/* ==========================================================================
   Ergotherapie Schönherz Schmöckwitz
   Gestaltungsidee „Handarbeit": Die Praxis arbeitet mit Materialien.
   Ton, Weide, Holz, Kiesel, Linsen, Garn, Farbe. Das bestimmt die Seite.
   Vier Fachbereiche, vier Farben aus dem Logo. Display: Bricolage Grotesque.
   ========================================================================== */

/* Schriften: Die Marke nutzt Arial, eigene Schriftdateien werden nicht mehr geladen.
   Die alten Dateien liegen zur Sicherheit in assets/src/fonts-alt/. */

/* ---------- Tokens ---------- */
:root{
  --paper:#f6f4ef;
  --paper-2:#efece4;
  --white:#fff;
  --ink:#17323b;
  --ink-2:#0d2129;
  --text:#233238;
  --muted:#5e7278;

  /* Markenfarbe Orange (aus dem Flyer): Orange-Flaechen, weisse Schrift, kein Schwarz */
  /* Markenorange der Praxis, gemessen aus ihren eigenen Unterlagen
     (Anfahrtsblatt, Team-Karten): #FF6600. Vorher stand hier ein zu rotes
     #e15a2b, das war nicht ihre Farbe. */
  --brand:#ff6600;      /* Orange fuer Flaechen */
  --brand-d:#e05500;    /* tieferes Orange fuer Fusszeile und Hover */
  --brand-dd:#bf4700;   /* noch tiefer, fuer warme Verlaeufe */
  /* Kein Schwarz als Flaeche oder Knopf: fuer eine Ergotherapie zu hart.
     Stattdessen ein warmes Grau. */
  --dunkel:#5c534e;

  /* Vier Fachbereiche */
  --kids:#57a838;   --kids-t:#eaf4e4;   --kids-d:#3f8226;
  --hand:#e15a2b;   --hand-t:#fdeee1;   --hand-d:#c0491d;
  --neuro:#0e9cd1;  --neuro-t:#e2f2fa;  --neuro-d:#0a7ba5;
  --plus:#e2960f;   --plus-t:#fcf1dd;   --plus-d:#a86c05;

  --accent:var(--brand);
  --accent-d:var(--brand-d);
  --accent-t:var(--hand-t);

  --line:rgba(23,50,59,.12);
  --line-soft:rgba(23,50,59,.07);

  --shadow-sm:0 2px 8px rgba(13,33,41,.05), 0 1px 2px rgba(13,33,41,.04);
  --shadow:0 14px 34px rgba(13,33,41,.08), 0 2px 8px rgba(13,33,41,.04);
  --shadow-lg:0 30px 66px rgba(13,33,41,.13), 0 6px 16px rgba(13,33,41,.05);

  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:36px;
  --r-media:28px 28px 28px 84px;   /* eine Ecke bricht aus: die Signatur der Bildflaechen */

  --display:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;

  --wrap:1180px;
  --nav-h:80px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* touch-action: pan-y = auf dem Handy nur senkrecht scrollen, kein Seitwaerts-Wischen (pinch-zoom bleibt) */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;touch-action:pan-y pinch-zoom}
body{
  margin:0;background:var(--paper);color:var(--text);position:relative;width:100%;max-width:100%;
  font-family:var(--sans);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;   /* clip stoppt iOS-Seitwaerts-Wischen ohne Scroll-Container */
}
/* height:auto ist Pflicht, sonst gewinnt das height-Attribut gegen aspect-ratio */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--display);color:var(--ink-2);
  font-weight:700;line-height:1.08;letter-spacing:-.018em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6.2vw,4.5rem);font-weight:800;letter-spacing:-.022em}
h2{font-size:clamp(2rem,4.1vw,3.15rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:clamp(1.3rem,2.1vw,1.62rem);line-height:1.16;font-weight:700}
h4{font-size:1.08rem;line-height:1.3;font-weight:700}
.lead{font-size:clamp(1.08rem,1.7vw,1.29rem);line-height:1.65;color:var(--muted)}
p+p{margin-top:1.05em}
strong{font-weight:600;color:var(--ink-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent-d);
  margin-bottom:1.15rem;
}
.eyebrow.is-light{color:#ffe3d6}

/* ---------- Layout ---------- */
.wrap,.wrap-wide{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.6rem,780px);margin-inline:auto}
section{position:relative}
.sec{padding:clamp(4.5rem,9vw,8rem) 0}
.sec-tight{padding:clamp(3.2rem,6vw,5.5rem) 0}
.sec-sand{background:var(--paper-2)}
.sec-white{background:var(--white)}
.sec-ink{background:var(--brand);color:rgba(255,255,255,.8)}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4{color:#fff}
.sec-ink .lead{color:rgba(255,255,255,.74)}

.sec-head{max-width:660px;margin-bottom:clamp(2.6rem,4.5vw,4rem)}
.sec-head.is-center{margin-inline:auto;text-align:center}
.sec-head h2+.lead{margin-top:1.2rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.98rem 1.8rem;border-radius:999px;
  font-family:var(--sans);font-size:.965rem;font-weight:600;
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),background .2s,color .2s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 22px rgba(242,107,15,.28)}
.btn-primary:hover{background:var(--accent-d);box-shadow:0 16px 32px rgba(242,107,15,.34)}
.btn-ink{background:var(--brand-d);color:#fff;box-shadow:0 10px 22px rgba(201,72,28,.28)}
.btn-ink:hover{background:var(--brand-dd)}
.btn-ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1.6px var(--line)}
.btn-ghost:hover{background:var(--white);box-shadow:inset 0 0 0 1.6px transparent,var(--shadow)}
.btn-glass{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.btn-glass:hover{background:rgba(255,255,255,.26)}
.btn-white{background:#fff;color:var(--ink-2);box-shadow:var(--shadow)}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
/* Auf orangefarbenen Sektionen: Primaer-Button weiss mit orangem Text */
.sec-ink .btn-primary,.cta-lead .btn-primary{background:#fff;color:var(--brand-d);box-shadow:0 10px 22px rgba(120,40,14,.22)}
.sec-ink .btn-primary:hover,.cta-lead .btn-primary:hover{background:var(--paper);color:var(--brand-dd)}
.sec-ink .btn-ink,.cta-lead .btn-ink{background:var(--brand-dd);color:#fff}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;
  color:var(--ink);transition:gap .3s var(--spring),color .2s;
}
.link-arrow svg{width:16px;height:16px}
.link-arrow:hover{color:var(--accent-d);gap:.8rem}

/* ---------- Hinweisleiste ---------- */
.notice{background:var(--brand-d);color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.5;position:relative;z-index:60}
.notice-in{display:flex;align-items:center;justify-content:center;gap:.85rem;padding:.75rem 0;flex-wrap:wrap;text-align:center}
.n-short{display:none}
.notice b{color:#fff;font-weight:600}
.notice .tag{
  background:#fff;color:var(--brand-d);font-size:.695rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.28rem .72rem;border-radius:999px;flex:none;
}
.notice a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.nav-in{display:flex;align-items:center;gap:1.6rem;height:var(--nav-h);width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.nav-logo{flex:none;display:flex;align-items:center}
/* 52px statt 40px: darunter wird der blaue Schriftzug „Schönherz" zu klein und geht auf Orange unter */
.nav-logo img{height:52px;width:auto}
.nav-logo .logo-light{display:none}
.nav-links{display:flex;align-items:center;gap:.2rem;margin-left:auto}
.nav-links a{
  position:relative;padding:.6rem .95rem;border-radius:999px;
  font-size:.95rem;font-weight:500;color:var(--text);transition:background .2s,color .2s;
}
.nav-links a:hover{background:rgba(23,50,59,.07);color:var(--ink-2)}
.nav-links a.is-active{color:var(--ink-2);font-weight:600;background:rgba(23,50,59,.06)}
/* Untermenue Leistungen: oeffnet bei Hover und bei Tastatur-Fokus */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop > a{display:inline-flex;align-items:center;gap:.4rem}
.nav-drop > a svg{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav-drop:hover > a svg,.nav-drop:focus-within > a svg{transform:rotate(180deg)}
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:.7rem}  /* Maus-Bruecke */
.nav-drop-menu{
  position:absolute;top:calc(100% + .7rem);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:264px;padding:.55rem;display:grid;gap:.1rem;
  background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{
  padding:.62rem .9rem;border-radius:12px;white-space:nowrap;
  font-size:.95rem;font-weight:500;color:var(--text);text-shadow:none;
}
.nav-drop-menu a:hover{background:var(--paper-2);color:var(--ink-2)}
.nav-drop-menu a.is-here{color:var(--accent-d);font-weight:600}

.nav-cta{display:flex;align-items:center;gap:.75rem;flex:none}
.nav-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;color:var(--ink-2);padding:.6rem .4rem;white-space:nowrap}
.nav-phone svg{width:16px;height:16px;color:var(--accent)}
.nav .btn{padding:.74rem 1.4rem;font-size:.91rem}

.nav.is-stuck{background:rgba(246,244,239,.9);backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);box-shadow:0 1px 0 var(--line-soft),0 12px 32px rgba(13,33,41,.06)}

/* Transparente Nav ueber dem Foto-Hero */
.nav-clear{background:transparent}
.nav-clear + .mobile-menu + main > .hero,
.nav-clear + .mobile-menu + main > .phero{margin-top:calc(var(--nav-h) * -1)}
.nav-clear .logo-light{filter:drop-shadow(0 2px 12px rgba(6,26,32,.6))}
.nav-clear .nav-links a,.nav-clear .nav-phone{color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(6,26,32,.45)}
.nav-clear .nav-links a:hover{background:rgba(255,255,255,.17);color:#fff}
.nav-clear .nav-links a.is-active{color:#fff;background:rgba(255,255,255,.17)}
.nav-clear .nav-phone svg{color:#ffc78a}
.nav-clear .logo-dark{display:none}
.nav-clear .logo-light{display:block}
.nav-clear .burger span{background:#fff}
/* Beim Scrollen: Nav wird orange (Logo laut Marke immer auf Orange), weißes Logo bleibt */
.nav-clear.is-stuck{background:var(--brand);box-shadow:0 10px 30px rgba(120,40,14,.24)}
.nav-clear.is-stuck .logo-light{filter:none}
.nav-clear.is-stuck .nav-links a,.nav-clear.is-stuck .nav-phone{color:#fff;text-shadow:none}
.nav-clear.is-stuck .nav-links a:hover{background:rgba(255,255,255,.17);color:#fff}
.nav-clear.is-stuck .nav-links a.is-active{color:#fff;background:rgba(255,255,255,.17)}
.nav-clear.is-stuck .nav-phone svg{color:#ffd8b8}
.nav-clear.is-stuck .burger span{background:#fff}
/* Das aufgeklappte Untermenue ist immer eine weisse Karte, also dunkle Schrift.
   Muss NACH den .nav-clear-Regeln stehen, sonst gewinnt dort die weisse Schriftfarbe. */
.nav .nav-drop-menu a,
.nav-clear .nav-drop-menu a,
.nav-clear.is-stuck .nav-drop-menu a{color:var(--text);text-shadow:none;background:none}
.nav .nav-drop-menu a:hover,
.nav-clear .nav-drop-menu a:hover,
.nav-clear.is-stuck .nav-drop-menu a:hover{background:var(--paper-2);color:var(--ink-2)}
.nav .nav-drop-menu a.is-here,
.nav-clear .nav-drop-menu a.is-here,
.nav-clear.is-stuck .nav-drop-menu a.is-here{color:var(--accent-d);font-weight:600}

/* CTA-Button in der transparenten/orangen Nav immer weiß */
.nav-clear .btn-primary{background:#fff;color:var(--brand-d);box-shadow:0 8px 22px rgba(120,40,14,.28)}
.nav-clear .btn-primary:hover{background:var(--paper);color:var(--brand-dd)}

.burger{display:none;flex-direction:column;gap:5px;padding:.6rem;margin-right:-.6rem}
.burger span{display:block;width:23px;height:2.5px;border-radius:2px;background:var(--ink-2);transition:transform .3s var(--ease),opacity .2s}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:49;background:var(--brand);
  display:flex;flex-direction:column;justify-content:center;padding:5.5rem 2rem 3rem;
  overflow-y:auto;   /* mit den Leistungs-Unterpunkten kann das Menue hoeher werden als der Schirm */
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%}
.mobile-menu a{display:block;font-family:var(--display);font-size:clamp(1.7rem,7vw,2.3rem);font-weight:800;color:#fff;padding:.45rem 0;letter-spacing:-.035em;line-height:1.1}
.mobile-menu a.is-active{color:#ffc78a}
/* Unterpunkte der Leistungen: kleiner und eingerueckt, immer sichtbar (kein Aufklappen noetig) */
.mobile-menu .mm-sub{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:.1rem 0 .7rem 1.1rem}
.mobile-menu .mm-sub a{font-family:var(--sans);font-size:1.05rem;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.88);padding:.3rem 0}
/* Menü offen: Top-Bar aus, Nav-Streifen dunkel wie das Menü, Original-Logo */
body.menu-open .notice{display:none}
body.menu-open .nav{background:var(--brand)!important;box-shadow:none}
body.menu-open .nav .logo-dark{display:none}
body.menu-open .nav .logo-light{display:block}
body.menu-open .nav .burger span{background:#fff}
.mobile-menu .mm-foot{margin-top:2.5rem;color:rgba(255,255,255,.7);font-size:1rem;line-height:1.9;font-family:var(--sans)}
.mobile-menu .mm-foot a{font-family:var(--sans);font-size:1.05rem;font-weight:600;color:#fff;display:inline;letter-spacing:0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;left:0;right:0;top:-15%;height:130%;z-index:-2;background:center/cover no-repeat}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(120,40,14,.58) 0%,rgba(110,36,12,.34) 28%,rgba(120,42,16,.52) 55%,rgba(110,38,14,.92) 100%);
}
.hero-in{padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,6vw,5rem)}
.hero h1{color:#fff;max-width:800px;text-shadow:0 2px 26px rgba(5,22,27,.42),0 1px 10px rgba(5,22,27,.3)}
.hero h1 em{font-style:normal;color:#ffc29a}
.hero .lead{color:rgba(255,255,255,.92);margin-top:1.5rem;max-width:56ch;text-shadow:0 1px 20px rgba(5,22,27,.45)}
.hero .btn-row{margin-top:2.3rem}
/* Vorteilsliste, bewusst KEINE Pillen (sonst mit Buttons verwechselbar) */
.hero-chips{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.2rem}
.hero-chips span{
  display:inline-flex;align-items:center;gap:.55rem;background:none;border:0;padding:0;
  font-size:.95rem;font-weight:500;color:rgba(255,255,255,.94);
  text-shadow:0 1px 14px rgba(5,22,27,.5);
}
.hero-chips svg{width:20px;height:20px;color:#ffb271;flex:none;filter:drop-shadow(0 1px 6px rgba(5,22,27,.55))}

/* Kopf der Unterseiten */
.phero{position:relative;padding:calc(var(--nav-h) + clamp(3.4rem,7vw,6rem)) 0 clamp(3.4rem,7vw,6rem);overflow:hidden;isolation:isolate;background:var(--brand)}
.phero-media{position:absolute;left:0;right:0;top:-15%;height:130%;z-index:-2;background:center/cover no-repeat}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.phero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(130,44,16,.9) 0%,rgba(130,44,16,.7) 48%,rgba(140,48,18,.45) 100%)}
.phero h1{color:#fff;max-width:19ch}
.phero .lead{color:rgba(255,255,255,.85);margin-top:1.3rem;max-width:60ch}
.phero .crumbs{color:rgba(255,255,255,.62);font-size:.87rem;margin-bottom:1.4rem}
.phero .crumbs a:hover{color:#fff}
.phero .crumbs span{opacity:.5;padding:0 .45rem}

/* ---------- Fachbereichs-Karten: jede Farbe steht fuer einen Bereich ---------- */
.card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.grid{display:grid;gap:clamp(1.2rem,2.4vw,1.8rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.fach{
  --c:var(--accent);--c-t:var(--accent-t);--c-d:var(--accent-d);
  display:flex;flex-direction:column;height:100%;
  background:var(--c-t);border-radius:var(--r-lg);padding:1.15rem 1.15rem 1.6rem;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.fach:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.fach--kids{--c:var(--kids);--c-t:var(--kids-t);--c-d:var(--kids-d)}
.fach--hand{--c:var(--hand);--c-t:var(--hand-t);--c-d:var(--hand-d)}
.fach--neuro{--c:var(--neuro);--c-t:var(--neuro-t);--c-d:var(--neuro-d)}
.fach--plus{--c:var(--plus);--c-t:var(--plus-t);--c-d:var(--plus-d)}
.fach--geriatrie{--c:var(--plus);--c-t:var(--plus-t);--c-d:var(--plus-d)}
.fach-img{position:relative;aspect-ratio:9/7;overflow:hidden;border-radius:var(--r) var(--r) var(--r) 56px;flex:none;background:rgba(0,0,0,.05)}
.fach-img img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--ease)}
.fach:hover .fach-img img{transform:scale(1.06)}
.fach-body{padding:1.4rem .55rem 0;flex:1;display:flex;flex-direction:column}
.fach-body .kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.715rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-d);margin-bottom:.7rem;
}
.fach-body h3{margin-bottom:.7rem}
.fach-body p{font-size:.95rem;color:var(--muted);line-height:1.62;margin-bottom:1.5rem}
/* Der Verweis auf die Unterseite sieht jetzt aus wie ein Knopf, damit klar ist, dass man klicken kann */
.fach-body .link-arrow{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.35rem;border-radius:999px;
  background:var(--c);color:#fff;font-size:.93rem;font-weight:600;
  transition:filter .25s var(--ease),transform .25s var(--ease);
}
.fach-body .link-arrow svg{width:17px;height:17px}
.fach:hover .fach-body .link-arrow{filter:brightness(.92);transform:translateX(2px)}
.fach-body .link-arrow:hover{color:#fff}

/* Verordnungszeile auf den Fachbereichskarten */
.fach-vo{
  display:block;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-soft);
  font-size:.82rem;line-height:1.5;font-weight:600;color:var(--c-d,var(--accent-d));
}

/* Behandlungsarten in der Reihenfolge der Verordnung.
   Gross, ruhig und einspaltig, weil viele Patienten aelter sind. */
/* Liste links, die beiden Verordnungstexte rechts daneben */
.vo-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.vo-side{display:grid;gap:1rem}
@media (max-width:940px){ .vo-layout{grid-template-columns:1fr} }

.behandlungen{counter-reset:bh;display:grid;gap:.9rem}
.behandlungen li{
  counter-increment:bh;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;
  background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:1.4rem 1.6rem;
}
.behandlungen li::before{
  content:counter(bh);flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--accent-t);color:var(--accent-d);
  font-family:var(--display);font-weight:700;font-size:1.1rem;display:grid;place-items:center;
}
.behandlungen b{display:block;font-size:1.14rem;color:var(--ink-2);line-height:1.3;margin-bottom:.3rem}
.behandlungen span{display:block;font-size:.98rem;color:var(--muted);line-height:1.65}
.behandlungen li.is-rare{counter-increment:none;background:var(--paper-2);box-shadow:none}
.behandlungen li.is-rare::before{content:'';background:transparent;border:2px dashed var(--line)}
.sec-white .behandlungen li.is-rare{background:var(--paper)}
@media (max-width:620px){
  .behandlungen li{padding:1.2rem 1.25rem;gap:.9rem}
  .behandlungen li::before{width:34px;height:34px;font-size:1rem}
  .behandlungen b{font-size:1.06rem}
}

/* Schlichte Info-Karten */
.icard{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:1.9rem 1.75rem}
.icard h3{font-size:1.22rem;margin-bottom:.65rem}
.icard p{font-size:.95rem;color:var(--muted)}
.icard .ico{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--accent-t);color:var(--accent-d);margin-bottom:1.2rem}
.icard .ico svg{width:22px;height:22px}
.sec-ink .icard{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid rgba(255,255,255,.11)}
.sec-ink .icard p{color:rgba(255,255,255,.72)}
.sec-ink .icard .ico{background:rgba(255,255,255,.1);color:#ffb271}

/* Schrittfolge: hier ist die Nummer echte Information */
.step{counter-increment:step}
.step .ico{position:relative}
.step .ico::after{
  content:counter(step);position:absolute;right:-9px;top:-9px;
  width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--display);font-size:.78rem;font-weight:700;display:grid;place-items:center;
}
.steps{counter-reset:step}

/* ---------- Text und Bild ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.is-wide-media{grid-template-columns:1fr 1.15fr}
.split-media{position:relative;border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow-lg)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-media.is-tall img{aspect-ratio:3/4}
.split.is-reverse .split-media{order:2;border-radius:28px 28px 84px 28px}
.split.is-reverse .split-media.is-portrait{border-radius:var(--r-xl)}
.split-body p{color:var(--muted)}
.sec-ink .split-body p{color:rgba(255,255,255,.76)}
.split-body h2+p{margin-top:1.35rem}

.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.5rem}
.stat b{display:block;font-family:var(--display);font-size:2.35rem;font-weight:800;color:var(--ink-2);line-height:1;letter-spacing:-.04em}
.stat span{display:block;font-size:.845rem;color:var(--muted);margin-top:.45rem;line-height:1.45}
.sec-ink .stat b{color:#fff}
.sec-ink .stat span{color:rgba(255,255,255,.62)}

/* ---------- Materialband: das Herzstueck ---------- */
.material{background:var(--white);padding:clamp(4rem,8vw,7rem) 0;overflow:hidden}
.mat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.mat-nav{display:flex;gap:.6rem;flex:none;padding-bottom:.3rem}
.mat-nav-bottom{display:none}
.mat-nav button{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);color:var(--ink-2);box-shadow:var(--shadow-sm);
  border:1.5px solid var(--line-soft);
  transition:transform .25s var(--spring),background .2s,color .2s,box-shadow .2s,opacity .2s;
}
.mat-nav button:hover{background:var(--brand);color:#fff;transform:scale(1.06);box-shadow:var(--shadow)}
.mat-nav button:disabled{opacity:.35;cursor:default;transform:none}
.mat-nav svg{width:20px;height:20px}
.mat-viewport{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  display:flex;gap:clamp(1.4rem,3vw,2.6rem);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:16px 4px 6px;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;touch-action:pan-x pan-y;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.mat-viewport::-webkit-scrollbar{display:none}
.mat-viewport.is-dragging{cursor:grabbing;scroll-behavior:auto}
.mat-viewport.is-dragging .mat-item{pointer-events:none}
.mat-item{margin:0;text-align:center;flex:none;width:clamp(146px,16vw,208px);scroll-snap-align:center}
.mat-item img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;
  box-shadow:0 12px 30px rgba(13,33,41,.13);
  transition:transform .5s var(--spring);
}
.mat-item:nth-child(odd) img{transform:rotate(-2.5deg)}
.mat-item:nth-child(even) img{transform:rotate(2deg)}
.mat-item:hover img{transform:rotate(0) scale(1.05)}
.mat-item figcaption{margin-top:.95rem;font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink-2);letter-spacing:-.02em}
.mat-item small{display:block;font-size:.79rem;color:var(--muted);margin-top:.1rem;line-height:1.4}

/* ---------- Therapie in Aktion: Foto-Mosaik ---------- */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.2rem)}
.showcase figure{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r-lg);
  aspect-ratio:3/2;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--spring),box-shadow .4s var(--ease);
}
.showcase figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.showcase figure.is-wide{grid-column:span 2}
.showcase img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.showcase figure:hover img{transform:scale(1.05)}
.showcase figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.9rem 1.15rem .95rem;
  background:linear-gradient(to top,rgba(8,28,34,.82),transparent);
  color:#fff;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
}
@media (max-width:820px){
  .showcase{grid-template-columns:repeat(2,1fr)}
  .showcase figure.is-wide{grid-column:span 2}
}
@media (max-width:520px){
  .showcase{grid-template-columns:1fr}
  .showcase figure.is-wide{grid-column:span 1}
}

/* ---------- Zitat ---------- */
.quote{text-align:center;max-width:900px;margin-inline:auto}
.quote p{font-family:var(--display);font-size:clamp(1.55rem,3.5vw,2.6rem);line-height:1.2;font-weight:700;color:#fff;letter-spacing:-.035em;text-wrap:balance}
.quote cite{display:block;margin-top:1.9rem;font-style:normal;font-family:var(--sans);font-size:.92rem;color:rgba(255,255,255,.65)}

/* ---------- Leistungs-Detailbloecke ---------- */
.detail{
  --c:var(--accent);--c-t:var(--accent-t);--c-d:var(--accent-d);
  background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.detail--kids{--c:var(--kids);--c-t:var(--kids-t);--c-d:var(--kids-d)}
.detail--hand{--c:var(--hand);--c-t:var(--hand-t);--c-d:var(--hand-d)}
.detail--neuro{--c:var(--neuro);--c-t:var(--neuro-t);--c-d:var(--neuro-d)}
.detail--plus{--c:var(--plus);--c-t:var(--plus-t);--c-d:var(--plus-d)}
.detail--geriatrie{--c:var(--plus);--c-t:var(--plus-t);--c-d:var(--plus-d)}
.detail-top{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
.detail-top .dt-media{position:relative;min-height:300px;background:var(--c-t)}
.detail-top .dt-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-top .dt-body{padding:clamp(2rem,3.6vw,3.2rem);background:var(--c-t)}
.detail-top .dt-body .kicker{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.715rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-d);margin-bottom:.9rem;
}
.detail-top .dt-body h2{font-size:clamp(1.65rem,2.6vw,2.2rem);margin-bottom:1.05rem}
.detail-top .dt-body p{color:var(--muted);font-size:1rem}
.verordnung{margin-top:1.7rem;background:rgba(255,255,255,.72);border-radius:var(--r);padding:1.2rem 1.4rem;font-size:.9rem;line-height:1.6}
.verordnung b{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--c-d);margin-bottom:.5rem}
.detail-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.detail-cols > div{padding:clamp(1.8rem,3vw,2.5rem)}
.detail-cols h4{font-family:var(--sans);font-size:.715rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--c-d);margin-bottom:.95rem}
.detail-cols p{font-size:.925rem;color:var(--muted);line-height:1.68}

/* ---------- Stellenanzeigen (Karriere): bewusst ohne Karten und Kaesten ---------- */
.stelle + .stelle{margin-top:clamp(3.5rem,7vw,6rem)}
.stelle-cols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);margin-top:clamp(2.4rem,5vw,3.6rem);
}
.stelle-cols h4{
  font-family:var(--sans);font-size:.715rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-d);margin-bottom:1rem;
}
.stelle-cols p{font-size:.95rem;color:var(--muted);line-height:1.68}
@media (max-width:940px){ .stelle-cols{grid-template-columns:1fr;gap:2.2rem} }

/* ---------- Listen ---------- */
.ticks{display:grid;gap:.72rem}
.ticks li{display:flex;gap:.8rem;font-size:.95rem;line-height:1.6;color:var(--muted)}
.ticks li::before{
  content:'';flex:none;width:21px;height:21px;margin-top:.2rem;border-radius:50%;
  background:var(--accent-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c85606' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sec-ink .ticks li{color:rgba(255,255,255,.76)}
.sec-ink .ticks li::before{background-color:rgba(255,178,113,.2)}

.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{background:var(--paper-2);border-radius:999px;padding:.44rem .95rem;font-size:.83rem;color:var(--ink);font-weight:500}
.sec-white .tags li,.sec-sand .tags li{background:var(--paper)}
.tags-lg{gap:.6rem}
.tags-lg li{font-size:.95rem;padding:.6rem 1.15rem;box-shadow:var(--shadow-sm)}
.sec-white .tags-lg li{background:var(--paper-2)}
.sec-ink .tags li{background:rgba(255,255,255,.09);color:rgba(255,255,255,.88)}

/* ---------- Team: Portraets als Bogen ---------- */
.person{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.person:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.person-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);border-radius:var(--r-lg) var(--r-lg) 0 0}
.person-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .7s var(--ease)}
.person:hover .person-img img{transform:scale(1.04)}
.person-body{padding:1.6rem 1.6rem 1.85rem}
.person-body h3{font-size:1.32rem;margin-bottom:.4rem}
.person-body .role{font-size:.885rem;color:var(--accent-d);font-weight:600;line-height:1.5}
.person-body .qual{margin-top:1.2rem}

/* Grosse Portraets auf der Teamseite: ruhiger, gleichmaessig gerundeter Rahmen */
.split-media.is-portrait{border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.split-media.is-portrait img{aspect-ratio:4/5;object-position:50% 22%}

/* ---------- Galerie ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.gallery button{
  position:relative;display:block;border-radius:var(--r);overflow:hidden;padding:0;
  background:var(--paper-2);aspect-ratio:4/3;box-shadow:var(--shadow-sm);
  transition:transform .4s var(--spring),box-shadow .4s var(--ease);
}
.gallery button:hover{transform:translateY(-4px) scale(1.012);box-shadow:var(--shadow)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery button:hover img{transform:scale(1.07)}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.7rem .95rem .85rem;
  background:linear-gradient(to top,rgba(8,28,34,.85),transparent);
  color:#fff;font-size:.84rem;font-weight:500;text-align:left;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease);
}
.gallery button:hover figcaption,.gallery button:focus-visible figcaption{opacity:1;transform:none}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,22,27,.95);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .lb-cap{position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);text-align:center;color:rgba(255,255,255,.82);font-size:.92rem;padding:0 4rem}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.13);color:#fff;transition:background .2s,transform .25s var(--spring);backdrop-filter:blur(6px)}
.lb-btn:hover{background:rgba(255,255,255,.26);transform:scale(1.07)}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.7rem,3vw,2.5rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.7rem,3vw,2.5rem);top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.07)}

/* ---------- Standorte ---------- */
.loc{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.loc-map{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.loc-map img{width:100%;height:100%;object-fit:cover}
.loc-body{padding:1.9rem;flex:1;display:flex;flex-direction:column}
.loc-body .badge{align-self:flex-start;font-size:.695rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.32rem .8rem;border-radius:999px;margin-bottom:1rem}
.badge-now{background:var(--hand-t);color:var(--hand-d)}
.badge-soon{background:var(--neuro-t);color:var(--neuro-d)}
.loc-body h3{font-size:1.28rem;margin-bottom:.6rem}
.loc-body address{font-style:normal;color:var(--muted);font-size:.96rem;line-height:1.68}
.loc-body .btn{margin-top:1.5rem;align-self:flex-start}

/* ---------- Kontakt und Formular ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4.5vw,4rem);align-items:start}
/* Symbolische Bilderreihe (wie die Flyer-Badges) */
.symbol-strip{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem}
.symbol-strip li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem}
.symbol-strip .ss-img{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--accent-t);position:relative}
.symbol-strip .ss-img::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.symbol-strip img{width:100%;height:100%;object-fit:cover;display:block}
.symbol-strip figcaption,.symbol-strip span{font-size:.85rem;line-height:1.35;color:var(--ink-2);font-weight:600;max-width:15ch}
.symbol-strip .ss-ph{display:flex;align-items:center;justify-content:center;box-shadow:none;border:2px dashed rgba(193,73,29,.4);background:var(--accent-t)}
.symbol-strip .ss-ph::after{display:none}
.symbol-strip .ss-ph>span{color:var(--accent-d);font-weight:700;font-size:1.15rem;max-width:none}
@media (max-width:720px){.symbol-strip{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.4rem}.symbol-strip span{font-size:.8rem}}
.rez-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.rez-contact{margin-top:0}
@media (max-width:820px){.rez-grid{grid-template-columns:1fr;gap:2.4rem}}
.contact-list{display:grid;gap:1.45rem;margin-top:2.2rem}
.cl-item{display:flex;gap:1.05rem;align-items:flex-start}
.cl-item .ico{width:46px;height:46px;flex:none;border-radius:15px;display:grid;place-items:center;background:var(--accent-t);color:var(--accent-d)}
.sec-ink .cl-item .ico{background:rgba(255,255,255,.1);color:#ffb271}
.cl-item .ico svg{width:20px;height:20px}
.cl-item b{display:block;font-size:.735rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.sec-ink .cl-item b{color:rgba(255,255,255,.55)}
.cl-item .val{font-size:1.04rem;font-weight:500;color:var(--ink-2);line-height:1.55}
.sec-ink .cl-item .val{color:#fff}
.cl-item .val a:hover{color:var(--accent-d)}
.sec-ink .cl-item .val a:hover{color:#ffb271}
.cl-item small{display:block;font-size:.86rem;color:var(--muted);margin-top:.2rem}
.sec-ink .cl-item small{color:rgba(255,255,255,.6)}

.form-card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:clamp(1.8rem,3.5vw,2.9rem)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.7rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.is-full{grid-column:1/-1}
.field label{font-size:.83rem;font-weight:600;color:var(--ink-2)}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.965rem;color:var(--text);
  background:var(--paper);border:1.6px solid transparent;border-radius:var(--r-sm);
  padding:.88rem 1rem;transition:border-color .2s,background .2s;width:100%;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
.field input::placeholder,.field textarea::placeholder{color:#9aabaf}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e7278' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:15px;padding-right:2.6rem}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.855rem;color:var(--muted);line-height:1.55;grid-column:1/-1}
.consent input{width:19px;height:19px;flex:none;margin-top:.15rem;accent-color:var(--accent);padding:0}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* Honeypot unsichtbar, aber OHNE die Seite seitlich zu verbreitern (kein -9999px) */
.hp{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}
.form-note{font-size:.82rem;color:var(--muted);margin-top:1.1rem;line-height:1.55}
.form-msg{display:none;margin-top:1.2rem;padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:.93rem;line-height:1.55}
.form-msg.ok{display:block;background:var(--kids-t);color:var(--kids-d)}
.form-msg.err{display:block;background:#fdeaea;color:#a52626}

/* ---------- Zeiten ---------- */
.hours{display:grid;gap:.1rem}
.hours li{display:flex;justify-content:space-between;gap:1.5rem;padding:.75rem 0;font-size:.96rem;border-bottom:1px solid var(--line-soft)}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{color:var(--muted)}
.hours li span:last-child{font-weight:600;color:var(--ink-2);text-align:right}
.sec-ink .hours li{border-color:rgba(255,255,255,.11)}
.sec-ink .hours li span:first-child{color:rgba(255,255,255,.66)}
.sec-ink .hours li span:last-child{color:#fff}

/* ---------- Parallax-Foto hinter dunklen Sektionen ---------- */
.sec-photo{isolation:isolate;overflow:hidden}
.sec-photo::before{
  content:'';position:absolute;left:0;right:0;top:-15%;height:130%;z-index:-2;
  background:var(--bg) center/cover no-repeat;transform:translateY(var(--py,0));will-change:transform;
}
.sec-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(200,72,28,.9),rgba(180,64,24,.86))}

.cta-band.is-photo{isolation:isolate}
.cta-band.is-photo::before{
  content:'';position:absolute;left:0;right:0;top:-15%;height:130%;z-index:-2;border-radius:inherit;
  background:var(--bg) center/cover no-repeat;transform:translateY(var(--py,0));will-change:transform;
}
.cta-band.is-photo::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(rgba(200,72,28,.9),rgba(180,64,24,.86))}

/* ---------- Abschluss-Band ---------- */
.cta-band{background:var(--brand);color:#fff;border-radius:var(--r-xl);padding:clamp(2.8rem,5vw,4.4rem);text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.78);margin-top:1.15rem;max-width:52ch;margin-inline:auto}
.cta-band .btn-row{justify-content:center;margin-top:2.2rem}

/* Vollflächiges Abschluss-Band (Foto als Sektions-Hintergrund) */
.cta-lead{text-align:center;max-width:640px;margin-inline:auto}
.cta-lead h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-lead p{color:rgba(255,255,255,.8);margin-top:1.15rem;max-width:52ch;margin-inline:auto}
.cta-lead .btn-row{justify-content:center;margin-top:2.2rem}

/* ---------- Footer ---------- */
.footer{background:var(--brand-d);color:rgba(255,255,255,.68);padding:clamp(3.5rem,6vw,5rem) 0 2rem;font-size:.94rem}
.footer h4{color:#fff;font-family:var(--sans);font-size:.735rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1.2rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(1.8rem,4vw,3.5rem)}
.footer-logo img{height:44px;width:auto;margin-bottom:1.3rem}
.footer-dve{margin-top:1.7rem;display:flex;align-items:center;gap:.9rem}
.footer-dve span{font-size:.82rem;color:rgba(255,255,255,.6)}
.footer-dve a{display:inline-flex;border-radius:10px;overflow:hidden;transition:transform .25s var(--spring)}
.footer-dve a:hover{transform:translateY(-2px)}
.footer-dve img{width:64px;height:64px;display:block}

/* ---------- Cookie-Einwilligung (Modal, DSGVO) ---------- */
.cc-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(8,28,34,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:1.2rem;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.cc-overlay.is-in{opacity:1;visibility:visible}
.cc{
  background:#fff;color:var(--text);width:min(100%,560px);max-height:90vh;overflow-y:auto;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.98);transition:transform .4s var(--spring);
}
.cc-overlay.is-in .cc{transform:none}
.cc-head{display:flex;align-items:center;gap:1rem;padding:1.35rem 1.5rem;border-bottom:1px solid var(--line-soft)}
.cc-head img{height:40px;width:auto;flex:none}
.cc-head h3{font-size:1.14rem;margin-right:auto;line-height:1.2}
.cc-close{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2);flex:none;transition:background .2s}
.cc-close:hover{background:var(--line)}
.cc-close svg{width:18px;height:18px}
.cc-body{padding:1.5rem}
.cc-body>p{font-size:.94rem;color:var(--muted);line-height:1.65}
.cc-cats{margin-top:1.3rem;display:none}
.cc-cats.is-open{display:block}
.cc-cat{padding:1rem 0;border-top:1px solid var(--line-soft)}
.cc-cat:last-child{border-bottom:1px solid var(--line-soft)}
.cc-cat-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cc-cat b{color:var(--ink-2);font-size:.95rem}
.cc-cat .cc-on{color:var(--kids-d);font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;flex:none}
.cc-cat p{font-size:.85rem;color:var(--muted);margin-top:.4rem;line-height:1.55}
.cc-actions{display:flex;flex-wrap:wrap;gap:.7rem;padding:0 1.5rem 1.1rem}
.cc-actions .btn{flex:1 1 auto;padding:.85rem 1.1rem;font-size:.93rem}
.cc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.4rem;padding:0 1.5rem 1.5rem;font-size:.85rem}
.cc-links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.cc-links a:hover{color:var(--accent-d)}
@media (max-width:520px){.cc-actions .btn{flex:1 1 100%}}
.footer-top p{line-height:1.75;font-size:.93rem}
.footer nav{display:grid;gap:.62rem}
.footer nav a,.footer a{transition:color .2s}
.footer nav a:hover,.footer a:hover{color:#fff}
.footer address{font-style:normal;line-height:1.8}
.footer address a{color:rgba(255,255,255,.9)}
.footer-bottom{margin-top:clamp(2.5rem,5vw,3.8rem);padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.11);display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center;justify-content:space-between;font-size:.855rem}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.cookie-link{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:inherit;cursor:pointer;transition:color .2s}
.cookie-link:hover{color:#fff}

/* ---------- Rechtstexte ---------- */
.legal h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-top:2.8rem;margin-bottom:1rem}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.12rem;margin-top:1.9rem;margin-bottom:.65rem}
.legal p,.legal li{font-size:.985rem;line-height:1.78;color:var(--muted)}
.legal ul{list-style:disc;padding-left:1.3rem;margin:.8rem 0}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal .ph{color:var(--accent-d);font-weight:600}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .mat-item img{transform:none!important}
  .hero-media,.phero-media{transform:none!important}
  .sec-photo::before,.cta-band.is-photo::before{transform:none!important}
}

/* ---------- Responsiv ---------- */
@media (max-width:1160px){
  .nav-links a{padding:.6rem .78rem}
  .nav-phone{display:none}
}
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  :root{--nav-h:72px}
  .nav-links,.nav-phone{display:none}
  .burger{display:flex}
  .nav .btn{display:none}
  .nav-cta{margin-left:auto}   /* Burger an den rechten Rand */
  .g-3,.g-2{grid-template-columns:1fr}

  /* Reihenfolge auf Mobil: Überschrift → Bild → Text → Button */
  .split,.split.is-wide-media,.split.is-reverse{display:flex;flex-direction:column;gap:0}
  .split-body{display:contents}
  .split-body > *{order:3;width:100%}
  .split-body > .eyebrow{order:1}
  .split-body > h2{order:1}
  .split-body > .role{order:1}
  .split-media,.split.is-reverse .split-media{order:2;margin:1rem 0 1.7rem}
  .split-media.is-tall img{aspect-ratio:4/3}
  .split-media.is-portrait img{aspect-ratio:4/5}
  /* Zwei-Spalten-Split ohne Bild (z. B. Umzug/Erreichbarkeit): mehr Luft */
  .split-body > h3{order:3;margin-top:2.6rem}
  .sec-ink .hours li{padding:1.05rem 0}

  .detail-top{grid-template-columns:1fr}
  .detail-top .dt-media{min-height:0;aspect-ratio:16/10}
  .detail-cols{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}

  /* Hero: mehr Platz oben, Inhalt startet unter der Nav */
  .hero{min-height:auto;align-items:flex-start}
  .hero-in{padding-top:calc(var(--nav-h) + 2.4rem);padding-bottom:2.6rem}

  /* Materialband: Pfeile UNTER die Bilder, zentriert */
  .mat-head{flex-direction:column;align-items:flex-start;gap:0}
  .mat-nav-top{display:none}
  .mat-nav-bottom{display:flex;justify-content:center;margin-top:1.7rem;padding-bottom:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .nav-logo img{height:44px}
  .wrap,.wrap-wide,.wrap-narrow{width:calc(100% - 2rem)}
  .form-grid{grid-template-columns:1fr}
  .g-4{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .gallery figcaption{display:none}
  .footer-top{grid-template-columns:1fr;gap:2.2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-bottom nav{flex-wrap:wrap;gap:.8rem 1.3rem}
  /* Kennzahlen: alle drei in einer Zeile */
  .stat-strip{grid-template-columns:repeat(3,1fr);gap:.9rem}
  .stat b{font-size:1.55rem}
  .stat span{font-size:.72rem;margin-top:.3rem}
  .btn{padding:.9rem 1.55rem}
  .lb-prev{left:.4rem}.lb-next{right:.4rem}
  .lb-btn{width:44px;height:44px}

  /* Top-Bar: einzeilig und klein, Kurztext */
  .notice-in{font-size:.8rem;padding:.5rem 0;gap:.5rem;flex-wrap:nowrap}
  .notice .tag{font-size:.62rem;padding:.22rem .55rem;letter-spacing:.08em}
  .n-full{display:none}
  .n-short{display:inline}

  /* Hero-Vorteile kompakter */
  .hero-chips{gap:.35rem 1.1rem;margin-top:1.5rem}
  .hero-chips span{font-size:.8rem;gap:.4rem}
  .hero-chips svg{width:15px;height:15px}
  .hero .btn-row .btn{flex:1 1 auto}

  /* CTA-Buttons nebeneinander, etwas kleiner */
  .cta-lead .btn-row{flex-wrap:nowrap;gap:.6rem}
  .cta-lead .btn-row .btn{flex:1 1 0;min-width:0;padding:.85rem .5rem;font-size:.9rem}

  /* Chips kleiner und kompakter */
  .tags{gap:.4rem}
  .tags li{font-size:.8rem;padding:.4rem .85rem}
  .tags-lg{gap:.45rem}
  .tags-lg li{font-size:.82rem;padding:.45rem .9rem}

  /* Startseiten-Hero: Ausschnitt auf die Handtherapie */
  .hero-media{background-position:50% 42%}
}

/* ==========================================================================
   Umbau 08/2026: Umzugsband, feste Menueleiste links, Fotostreifen,
   Praxisgeschichte, Stichpunkte, Handy-Bedienleiste
   ========================================================================== */

/* ---------- Umzugsband ganz oben ---------- */
.umzug{background:var(--brand-d);color:#fff;font-family:var(--sans)}
.umzug-in{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  padding:.6rem 0;font-size:.95rem;line-height:1.35;text-align:center}
.umzug b{font-weight:700}
.umzug .u-tag{flex:none;display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.16);border-radius:999px;padding:.2rem .75rem;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.umzug a{text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}
.umzug a:hover{text-decoration-thickness:2px}
@media (max-width:620px){ .umzug-in{font-size:.88rem;padding:.55rem 0;gap:.5rem} }

/* ---------- Feste Menueleiste links ----------
   Ab der ersten Sektion unter dem Hero. Die Leiste steht beim Scrollen still,
   damit man sich nie verlaeuft. Auf dem Handy uebernimmt .mbar unten. */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr);align-items:start}
.rail{position:sticky;top:calc(var(--nav-h) + .8rem);align-self:start;
  padding:1.2rem .8rem 1.2rem 1.4rem;font-family:var(--sans);
  /* Die Leiste muss vollstaendig sichtbar bleiben, notfalls scrollt sie in sich */
  max-height:calc(100dvh - var(--nav-h) - 1.6rem);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.rail-t{display:block;font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-d);margin-bottom:.5rem;padding-left:.7rem}
.rail nav{display:flex;flex-direction:column;gap:0}
.rail nav a{display:block;padding:.42rem .75rem;border-radius:9px;font-size:.95rem;font-weight:600;color:var(--text);line-height:1.3}
.rail nav a:hover{background:var(--paper-2);color:var(--ink-2)}
.rail nav a.is-active{background:var(--accent);color:#fff}
.rail .sub{display:flex;flex-direction:column;gap:0;margin:.05rem 0 .3rem .5rem;
  padding-left:.65rem;border-left:2px solid var(--line-soft)}
.rail .sub a{font-size:.855rem;font-weight:500;color:var(--muted);padding:.26rem .55rem;line-height:1.3}
.rail .sub a.is-active{background:none;color:var(--accent-d);font-weight:700}
.rail .rail-call{margin-top:.9rem;display:block;padding:.6rem .75rem;border-radius:12px;
  background:var(--accent-t);color:var(--accent-d);font-weight:700;font-size:.95rem;line-height:1.3}
.rail .rail-call small{display:block;font-weight:500;font-size:.75rem;color:var(--muted);margin-top:.15rem}
.content{min-width:0}
@media (max-width:1080px){ .layout{grid-template-columns:1fr} .rail{display:none} }

/* ---------- Bedienleiste am unteren Rand, nur Handy ---------- */
.mbar{display:none}
@media (max-width:1080px){
  .mbar{
    display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:48;
    background:var(--white);box-shadow:0 -2px 18px rgba(13,33,41,.13);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.6rem .2rem .55rem;
    font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--muted);text-align:center}
  .mbar a svg{width:21px;height:21px}
  .mbar a.is-active{color:var(--accent-d)}
  body{padding-bottom:64px}
  body.menu-open .mbar{display:none}
}

/* ---------- Fotostreifen wie auf dem Flyer ----------
   Hochformat, eckig, ohne Abstand aneinander, laufend. */
.strip{overflow:hidden;position:relative;background:var(--ink-2)}
.strip-track{display:flex;width:max-content;animation:strip-run 64s linear infinite}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
.strip figure{position:relative;margin:0;flex:none;width:clamp(148px,15vw,215px);aspect-ratio:3/4;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;display:block}
.strip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .6rem;
  background:linear-gradient(to top,rgba(9,20,25,.86),rgba(9,20,25,0));
  color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:600;line-height:1.25;
}
@keyframes strip-run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .strip-track{animation:none;width:100%;overflow-x:auto;scroll-snap-type:x mandatory}
  .strip figure{scroll-snap-align:start}
}

/* ---------- Praxisgeschichte: altes Haus durchgestrichen, Pfeil zum neuen ---------- */
.retro{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.2rem);align-items:center}
.retro figure{margin:0;position:relative}
.retro .r-img{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.retro .r-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.retro .is-alt .r-img img{filter:grayscale(.55) sepia(.18) contrast(.95)}
/* Das durchgestrichene X liegt als SVG ueber dem alten Foto.
   Bewusst kein ::before/::after, das hat sich beim Rendern als unzuverlaessig gezeigt. */
.retro .r-x{position:absolute;inset:0;display:block;pointer-events:none}
.retro .r-x svg{width:100%;height:100%;display:block}
.retro .r-x .x-weiss{stroke:rgba(255,255,255,.62);stroke-width:3.1}
.retro .r-x .x-farbe{stroke:var(--brand);stroke-width:1.7;opacity:.9}
.retro figcaption{margin-top:.85rem;font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--muted)}
.retro figcaption b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--ink-2);margin-bottom:.15rem}
.retro .r-jahr{display:inline-block;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.06em;
  background:var(--paper-2);color:var(--muted);border-radius:999px;padding:.22rem .7rem;margin-bottom:.5rem}
.retro .is-neu .r-jahr{background:var(--accent-t);color:var(--accent-d)}
.retro .r-pfeil{flex:none;color:var(--accent);display:grid;place-items:center}
.retro .r-pfeil svg{width:clamp(30px,4vw,52px);height:auto}
@media (max-width:820px){
  .retro{grid-template-columns:1fr;gap:1.3rem}
  .retro .r-pfeil{transform:rotate(90deg);margin:-.3rem 0}
}

/* ---------- Stichpunkte mit farbigem Punkt ---------- */
.bul{display:grid;gap:.6rem}
.bul li{position:relative;padding-left:1.5rem;font-size:1rem;line-height:1.6;color:var(--text)}
.bul li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--c,var(--accent))}
.bul li b{font-weight:700;color:var(--ink-2)}
.bul.is-lg li{font-size:1.06rem}
.sec-ink .bul li{color:rgba(255,255,255,.86)}
.sec-ink .bul li::before{background:#fff}
.bul--kids li::before{background:var(--kids)}
.bul--hand li::before{background:var(--hand)}
.bul--neuro li::before{background:var(--neuro)}
.bul--plus li::before{background:var(--plus)}

/* ---------- Angebote ---------- */
.angebot{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column}
.angebot .a-img{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.angebot .a-img img{width:100%;height:100%;object-fit:cover}
.angebot .a-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.angebot h3{margin-bottom:.55rem}
.angebot p{font-size:.95rem;color:var(--muted)}
.angebot .a-status{display:inline-block;align-self:flex-start;margin-bottom:.8rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--accent-t);color:var(--accent-d);border-radius:999px;padding:.24rem .7rem}
.angebot .btn-row{margin-top:auto;padding-top:1.3rem}

/* ---------- Handy: heller Schleier ueber Fotos, damit Text ruhig bleibt ---------- */
@media (max-width:820px){
  .hero-media::after,.phero-media::after{
    content:'';position:absolute;inset:0;background:rgba(246,244,239,.22);pointer-events:none;
  }
  .hero-media,.phero-media{position:absolute}
  .split-media::after,.fach-img::after,.showcase figure::after{
    content:'';position:absolute;inset:0;background:rgba(246,244,239,.14);pointer-events:none;
  }
  .split-media,.fach-img,.showcase figure{position:relative}
}


/* ==========================================================================
   Ruhiger Hintergrund (25.08.2026)
   Farbige Baender endeten sichtbar an der Kante zur Menueleiste. Deshalb tragen
   Abschnitte in der Inhaltsspalte keine eigene Flaechenfarbe mehr. Farbe kommt
   nur noch aus Karten, Knoepfen und dem Footer, der ueber die volle Breite laeuft.
   ========================================================================== */
.content .sec-sand,
.content .sec-white,
.content .sec-ink,
.content .strip{background:transparent}
.content .sec-photo::before,.content .sec-photo::after{display:none}
.content .sec-ink{color:var(--text)}
.content .sec-ink h1,.content .sec-ink h2,.content .sec-ink h3,.content .sec-ink h4{color:var(--ink-2)}
.content .sec-ink p,.content .sec-ink .lead{color:var(--muted)}
.content .sec-ink .eyebrow,.content .sec-ink .eyebrow.is-light{color:var(--accent-d)}
.content .sec-ink .quote p{color:var(--ink-2)}
.content .sec-ink .quote cite{color:var(--muted)}
.content .sec-ink .icard{background:var(--white);box-shadow:var(--shadow);border:0}
.content .sec-ink .icard p{color:var(--muted)}
.content .sec-ink .icard .ico{background:var(--accent-t);color:var(--accent-d)}
.content .sec-ink .ticks li{color:var(--muted)}
.content .sec-ink .ticks li::before{background-color:var(--accent-t)}
.content .sec-ink .bul li{color:var(--text)}
.content .sec-ink .bul li::before{background:var(--accent)}
.content .sec-ink .tags li{background:var(--paper-2);color:var(--ink)}
.content .sec-ink .stat b{color:var(--ink-2)}
.content .sec-ink .stat span{color:var(--muted)}
.content .sec-ink .btn-primary{background:var(--accent);color:#fff;box-shadow:none}
.content .sec-ink .btn-primary:hover{background:var(--brand-d)}
.content .sec-ink .btn-glass{background:transparent;border:1px solid var(--line);color:var(--ink-2);backdrop-filter:none}
.content .sec-ink .btn-glass:hover{background:var(--paper-2)}
.content .sec-ink .btn-ink{background:var(--ink);color:#fff}
/* Fliesstext in hellen Split-Abschnitten wieder dunkel */
.content .sec-ink .split-body p{color:var(--muted)}
/* Erreichbarkeitsliste auf der Kontaktseite */
.content .sec-ink .hours li{color:var(--text);border-color:var(--line-soft)}
.content .sec-ink .hours li span:first-child{color:var(--muted)}
/* Fotostreifen: dunkle Flaeche nur noch hinter den Kacheln, kein Rand */
.content .strip{border-radius:var(--r);overflow:hidden}


/* ==========================================================================
   Aufraeumen (25.08.2026)
   Vorher trugen Kopfleiste und Menueleiste links dasselbe Menue. Das wirkte
   doppelt. Jetzt gibt es genau eine Navigation: die Leiste links. Die Kopfzeile
   traegt nur noch Logo, Telefon und den Termin-Knopf. Unter 1081 px uebernimmt
   der Burger, damit dazwischen keine Luecke entsteht.
   ========================================================================== */
.nav-links{display:none!important}
@media (max-width:1080px){ .burger{display:flex} }
@media (min-width:1081px){ .nav .btn{display:inline-flex} }

/* Kopfzeile ruhiger: kein Schatten, keine harte Kante */
.nav.is-stuck{box-shadow:none;border-bottom:1px solid var(--line-soft)}
.nav-clear.is-stuck{border-bottom:0}

/* --- Umzugsband: orange, damit der Hinweis auffaellt ------------------------- */
.umzug{background:var(--brand);color:#fff}
.umzug .u-tag{background:rgba(255,255,255,.2);color:#fff}
.umzug a{color:#fff}
.umzug b{color:#fff}

/* --- Menueleiste: leise. Aktive Seite bekommt einen schmalen Strich statt einer
       vollflaechigen Pille, das beruhigt das ganze linke Drittel. ------------- */
.rail{padding-top:1.6rem}
.rail-t{display:none}
.rail nav a{
  position:relative;background:none;border-radius:0;
  padding:.44rem .2rem .44rem .95rem;font-weight:600;color:var(--muted);
}
.rail nav a::before{
  content:'';position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;border-radius:2px;
  background:transparent;
}
.rail nav a:hover{background:none;color:var(--ink-2)}
.rail nav a.is-active{background:none;color:var(--ink-2);font-weight:700}
.rail nav a.is-active::before{background:var(--accent)}
.rail .sub{border-left:0;margin-left:.95rem;padding-left:0}
.rail .sub a{padding-left:.95rem;font-weight:500}
.rail .sub a.is-active{color:var(--accent-d);font-weight:600}
.rail .rail-call{
  margin-top:1.4rem;background:none;padding:.9rem .2rem 0 .95rem;border-radius:0;
  border-top:1px solid var(--line-soft);color:var(--ink-2);font-size:1.02rem;
}
.rail .rail-call small{color:var(--muted)}

/* --- Karten: eine Farbe weniger. Die Flaeche wird weiss, die Farbe steckt im
       Kicker und im Knopf. Das nimmt den Flickenteppich raus. ----------------- */
.fach{background:var(--white);box-shadow:var(--shadow-sm)}
.fach:hover{box-shadow:var(--shadow)}
.icard{box-shadow:none;border:1px solid var(--line-soft)}
.angebot{box-shadow:none;border:1px solid var(--line-soft)}

/* --- Behandlungsarten: Liste statt Kaestchen -------------------------------- */
.behandlungen li{background:none;box-shadow:none;padding:1.15rem .2rem;border-top:1px solid var(--line-soft)}
.behandlungen li:first-child{border-top:0}
.behandlungen li.is-rare{background:none}
.behandlungen li::before{background:var(--paper-2);color:var(--muted);font-size:.95rem;width:34px;height:34px}
.behandlungen li.is-rare::before{background:none;border:2px dashed var(--line)}
.content .sec-ink .behandlungen li{border-color:var(--line-soft)}

/* --- Ruhigere Abstaende, weniger Betrieb ------------------------------------ */
.content .sec{padding:clamp(3.4rem,6vw,5.5rem) 0}
.content .sec-tight{padding:clamp(2.6rem,4.5vw,4rem) 0}
.sec-head{margin-bottom:clamp(2rem,3.4vw,2.8rem)}

/* --- Fotostreifen ohne Rahmenwirkung ---------------------------------------- */
.content .strip{border-radius:var(--r)}


/* ==========================================================================
   Ausrichtung und Ruhe (25.08.2026, zweiter Durchgang)
   Kopfzeile, Inhalt und Fusszeile liefen vorher auf verschiedenen Rastern.
   Jetzt teilen sie sich eine gemeinsame Buehne (--shell) und die Inhaltsspalte
   beginnt ueberall an derselben Kante, auch im Hero.
   ========================================================================== */
:root{ --shell:1420px; --rail-w:238px; --rail-gap:2.6rem; }

.layout{
  width:min(100% - 2.6rem,var(--shell));margin-inline:auto;
  grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--rail-gap);
}
.rail{padding-left:0;padding-right:.6rem}
/* In der Inhaltsspalte kein zweites Zentrieren mehr, sonst rutscht alles nach innen */
.content .wrap,.content .wrap-wide{width:100%;margin-inline:0}
.content .wrap-narrow{width:100%;max-width:780px;margin-inline:0}

.umzug .wrap,.nav-in,.footer .wrap{width:min(100% - 2.6rem,var(--shell))}

@media (min-width:1081px){
  /* Hero und Seitenkopf beginnen buendig mit der Inhaltsspalte */
  .hero .wrap,.phero .wrap{
    width:min(100% - 2.6rem,var(--shell));
    padding-left:calc(var(--rail-w) + var(--rail-gap));
  }
  /* Fusszeile: erste Spalte steht ueber der Menueleiste */
  .footer-top{grid-template-columns:var(--rail-w) repeat(3,minmax(0,1fr));gap:var(--rail-gap)}
}

/* --- Zitat: leiser Einschub statt Grossaufnahme ----------------------------- */
.quote{text-align:left;max-width:34ch;margin-inline:0}
.content .quote p{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.35;font-weight:700;letter-spacing:-.02em}
.content .quote cite{margin-top:1rem;font-size:.88rem}
.content .sec:has(> .wrap > .quote){padding-block:clamp(2.4rem,4vw,3.4rem)}

/* --- Abschlussblock statt Werbeflaeche --------------------------------------
   Die Seite ist eine Informationsseite, keine Verkaufsseite. Der Hinweis auf
   Telefon und Formular steht deshalb ruhig am Ende, linksbuendig, ohne Buehne. */
.content .cta-lead{text-align:left;max-width:56ch;margin-inline:0}
.content .cta-lead h2{margin-inline:0;max-width:22ch;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.content .cta-lead p{margin-inline:0;font-size:1rem}
.content .cta-lead .btn-row{justify-content:flex-start;margin-top:1.6rem}
.content .sec:has(> .wrap > .cta-lead){
  padding-block:clamp(2.2rem,3.6vw,3rem);
  border-top:1px solid var(--line-soft);margin-top:clamp(1.5rem,3vw,2.5rem);
}

/* Das Bildband sitzt jetzt als eigenes Element direkt unter dem Hero,
   ueber die volle Breite und ohne Rundung, genau wie die Reihe auf dem Flyer. */
main > .strip{border-radius:0;background:var(--ink-2)}
main > .strip figure{width:clamp(120px,11vw,168px)}
main > .strip figcaption{padding:1.3rem .6rem .5rem;font-size:.72rem}

/* Ohne Menue in der Kopfzeile muessen Telefon und Knopf selbst nach rechts rutschen */
.nav-cta{margin-left:auto}


/* ==========================================================================
   Feinschliff (25.08.2026, dritter Durchgang)
   ========================================================================== */

/* Bildband: feste Kachelbreiten statt vw-Rechnerei. Gebrochene Pixelwerte
   erzeugten sonst haarfeine helle Fugen zwischen den Bildern. */
main > .strip{line-height:0;font-size:0;background:var(--ink-2)}
main > .strip .strip-track{align-items:stretch}
main > .strip figure{width:170px;aspect-ratio:auto;height:226px}
main > .strip figcaption{font-size:.72rem;line-height:1.25}
@media (max-width:1080px){ main > .strip figure{width:146px;height:194px} }
@media (max-width:620px){ main > .strip figure{width:118px;height:157px} }

/* Titelbild: Text steht am linken Rand, nicht eingerueckt auf die Inhaltsspalte */
@media (min-width:1081px){
  .hero .wrap,.phero .wrap{padding-left:0}
}


/* --------------------------------------------------------------------------
   Bildband endgueltig fugenlos.
   Die Kacheln laufen waehrend der Bewegung auf gebrochene Pixelpositionen.
   Der Browser zeichnet dann zwischen zwei Kacheln eine haarfeine Kante, in der
   der Untergrund durchscheint. Drei Massnahmen zusammen schliessen das:
   1. Untergrund dunkel, auch auf der laufenden Spur
   2. jede Kachel ueberlappt die naechste um ein Pixel
   3. das Band liegt ein Pixel unter dem Titelbild, damit oben keine Linie bleibt
   -------------------------------------------------------------------------- */
main > .strip{background:var(--ink-2);margin-top:-1px;overflow:hidden}
main > .strip .strip-track{background:var(--ink-2)}
main > .strip figure{margin-right:-1px;background:var(--ink-2)}
main > .strip figure:last-child{margin-right:0}
main > .strip img{display:block;width:calc(100% + 1px);height:100%;object-fit:cover}

/* Das Bildband bekommt NIE die Einblend-Animation.
   .reveal startet mit translateY(26px). Solange die Animation laeuft, klafft
   darueber eine helle Luecke, und der verschobene Kasten erzeugt zusaetzlich
   haarfeine Fugen zwischen den Kacheln. Sicherheitshalber auch hier abgeschaltet. */
main > .strip{opacity:1!important;transform:none!important;transition:none!important}


/* --------------------------------------------------------------------------
   Bildband steht still.
   Die Laufbewegung war die letzte Quelle fuer helle Fugen: ein bewegter Kasten
   landet staendig auf halben Pixeln, und genau dort zeichnet der Browser eine
   Kante. Das Band fuellt jetzt die Breite mit sieben festen Kacheln, ohne
   Animation. So sieht es auch auf dem Flyer aus.
   -------------------------------------------------------------------------- */
main > .strip .strip-track{
  width:100%;animation:none;display:flex;
}
main > .strip figure{
  flex:1 1 0;width:auto;min-width:0;height:auto;aspect-ratio:3/4;
  margin-right:0;
}
@media (max-width:1080px){ main > .strip figure{width:auto;height:auto} }
@media (max-width:620px){
  main > .strip figure{width:auto;height:auto}
  /* auf dem Handy sind sieben Kacheln zu schmal: nur vier zeigen */
  main > .strip figure:nth-child(n+5){display:none}
  main > .strip figcaption{font-size:.62rem;padding:1rem .4rem .4rem}
}
main > .strip img{width:100%;height:100%;object-fit:cover;display:block}


/* --------------------------------------------------------------------------
   Bildband als EIN Bild.
   Sieben einzelne Kacheln nebeneinander erzeugten je nach Fensterbreite und
   Bewegung haarfeine helle Kanten. Ein durchgehendes Bild kann das nicht.
   Die Beschriftungen liegen als Raster darueber.
   -------------------------------------------------------------------------- */
main > .strip{position:relative;display:block;overflow:hidden;margin-top:-1px;background:var(--ink-2);line-height:0}
main > .strip > img{display:block;width:100%;height:auto}
main > .strip .strip-caps{
  position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(7,1fr);
  pointer-events:none;
}
main > .strip .strip-caps span{
  padding:2rem .7rem .6rem;color:#fff;font-family:var(--sans);
  font-size:.78rem;font-weight:600;line-height:1.25;
  background:linear-gradient(to top,rgba(9,20,25,.85),rgba(9,20,25,0));
}
/* Diese Regel stammte aus der Fassung mit EINEM stehenden Bild und hat spaeter
   die Beschriftungen um 75 Prozent breiter gemacht als das Bild darunter.
   Dadurch sassen die Bildunterschriften unter den falschen Motiven. */


/* --------------------------------------------------------------------------
   Bildband laeuft wieder.
   Grundlage ist das durchgehende Bild, dreimal hintereinandergelegt. Weil jede
   Einheit exakt gleich breit ist, springt die Schleife nicht, und weil es je
   ein einziges Bild ist, kann zwischen den Motiven keine Kante entstehen.
   -------------------------------------------------------------------------- */
main > .strip{--kachel:210px;position:relative;display:block;overflow:hidden;
  margin-top:-1px;background:var(--ink-2);line-height:0}
main > .strip .strip-track{
  display:flex;width:max-content;animation:band-lauf 70s linear infinite;
}
main > .strip:hover .strip-track,
main > .strip:focus-within .strip-track{animation-play-state:paused}
main > .strip .strip-unit{
  position:relative;flex:none;
  width:calc(var(--kachel) * 7);height:calc(var(--kachel) * 4 / 3);
}
main > .strip .strip-unit > img{width:100%;height:100%;object-fit:cover;display:block}
main > .strip .strip-caps{
  position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(7,1fr);
  pointer-events:none;
}
main > .strip .strip-caps span{
  padding:2rem .7rem .6rem;color:#fff;font-family:var(--sans);
  font-size:.78rem;font-weight:600;line-height:1.25;
  background:linear-gradient(to top,rgba(9,20,25,.88),rgba(9,20,25,0));
}
@keyframes band-lauf{ from{transform:translateX(0)} to{transform:translateX(-33.3333%)} }

@media (max-width:1080px){ main > .strip{--kachel:170px} }
@media (max-width:620px){
  main > .strip{--kachel:132px}
  main > .strip .strip-caps span{padding:1.3rem .45rem .45rem;font-size:.64rem}
}
/* Wer Bewegung nicht mag, sieht das Band ruhig stehen */
@media (prefers-reduced-motion:reduce){
  main > .strip .strip-track{animation:none}
}

/* Waehrend ein Seitenwechsel laeuft, den Inhalt kurz leicht abblenden.
   Das ist ruhiger als ein harter Sprung, ohne dass es nach Warten aussieht. */
.wechselt main{opacity:.45;transition:opacity .12s linear}
main{transition:opacity .25s var(--ease)}


/* --------------------------------------------------------------------------
   Sprungmarke zum Inhalt.
   Liegt versteckt am Seitenanfang und wird sichtbar, sobald jemand mit der
   Tastatur navigiert. So muss man sich nicht durch das ganze Menue hangeln.
   -------------------------------------------------------------------------- */
.skip{
  position:absolute;left:1rem;top:-100px;z-index:100;
  background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700;
  padding:.85rem 1.4rem;border-radius:0 0 12px 12px;text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{top:0}
main:focus{outline:none}


/* --------------------------------------------------------------------------
   Seitenkopf: Foto wieder sichtbar machen.
   Der orange Schleier lag mit 90 Prozent ueber dem Bild, dadurch war vom Foto
   nichts mehr zu erkennen. Jetzt deckt er nur noch dort stark, wo die Schrift
   steht, und laeuft nach rechts fast klar aus.
   -------------------------------------------------------------------------- */
.phero::after{
  background:linear-gradient(100deg,
    rgba(48,20,10,.86) 0%,
    rgba(62,26,13,.68) 34%,
    rgba(84,35,17,.34) 66%,
    rgba(96,40,19,.14) 100%);
}
.phero h1{text-shadow:0 2px 22px rgba(30,12,6,.4)}
.phero .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(30,12,6,.45)}


/* --------------------------------------------------------------------------
   Cookie-Hinweis auf dem Handy.
   Logo, Ueberschrift und Schliessen-Knopf standen in einer Zeile und waren
   zusammen breiter als ein Telefon. Der Kasten lief dadurch aus dem Bild.
   Jetzt bricht die Kopfzeile um und das Logo wird kleiner.
   -------------------------------------------------------------------------- */
.cc{min-width:0}
.cc-head h3{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){
  .cc-overlay{padding:.8rem;align-items:flex-end}
  .cc{border-radius:var(--r-lg);max-height:88vh}
  .cc-head{flex-wrap:wrap;gap:.6rem 1rem;padding:1.1rem 1.15rem}
  .cc-head img{height:28px;max-width:58%}
  .cc-head .cc-close{margin-left:auto;width:36px;height:36px}
  .cc-head h3{order:3;flex:1 1 100%;font-size:1.04rem;margin-right:0}
  .cc-body{padding:1.15rem}
  .cc-body p{font-size:.95rem}
  .cc-actions{padding:1.15rem;gap:.6rem}
  .cc-links{padding:0 1.15rem 1.15rem}
}


/* --------------------------------------------------------------------------
   Handy: volle Breite fuer den Text.
   Die spaetere .layout-Regel hat grid-template-columns erneut gesetzt und damit
   die Handy-Regel weiter oben ueberstimmt. Die Menueleiste war zwar
   ausgeblendet, ihre 238 Pixel breite Spalte blieb aber stehen, und der Text
   quetschte sich in den Rest. Diese Regel muss deshalb ganz am Ende stehen.
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .rail{display:none}
}


/* --------------------------------------------------------------------------
   Handy-Menue neu geordnet.
   Vorher war die Liste senkrecht zentriert. Bei vielen Eintraegen lief sie
   dadurch oben unter die Kopfzeile, und Logo und Schliessen-Knopf lagen mitten
   in den Menuepunkten. Jetzt beginnt die Liste unter der Kopfzeile, die
   Kopfzeile liegt sichtbar darueber, und lange Listen scrollen sauber.
   -------------------------------------------------------------------------- */
.mobile-menu{
  justify-content:flex-start;
  padding:calc(var(--nav-h) + 1.1rem) 1.6rem calc(2.5rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
body.menu-open .nav{z-index:60}
body.menu-open .nav-in{background:var(--brand)}

.mobile-menu nav{gap:0}
.mobile-menu a{
  font-size:clamp(1.35rem,5.4vw,1.75rem);
  padding:.5rem 0;letter-spacing:-.02em;
}
.mobile-menu .mm-sub{
  margin:.15rem 0 .55rem .9rem;
  border-left:2px solid rgba(255,255,255,.28);padding-left:.9rem;
}
.mobile-menu .mm-sub a{font-size:1.02rem;font-weight:500;padding:.34rem 0;color:rgba(255,255,255,.9)}
.mobile-menu .mm-foot{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.25);
  font-size:.95rem;line-height:1.7;
}
.mobile-menu .mm-foot a{font-size:1.15rem}
/* Sehr flache Geraete: noch etwas kompakter, damit alles ohne Scrollen passt */
@media (max-height:720px){
  .mobile-menu a{font-size:1.22rem;padding:.38rem 0}
  .mobile-menu .mm-sub a{font-size:.96rem;padding:.26rem 0}
  .mobile-menu .mm-foot{margin-top:1.1rem;padding-top:.9rem}
}

/* Beim geoeffneten Menue verschwindet das Umzugsband. Sonst schiebt es die
   Kopfzeile nach unten, und Logo und Schliessen-Knopf landen mitten in der
   Menueliste. Die alte Regel zielte noch auf .notice, das Band heisst .umzug. */
body.menu-open .umzug{display:none}


/* --------------------------------------------------------------------------
   Untere Bedienleiste: Behandlungsgebiete klappen direkt auf.
   Ein Tippen auf "Leistungen" zeigt sofort die Themen, statt erst eine
   Uebersichtsseite zu laden. Zwei Tipps statt drei.
   -------------------------------------------------------------------------- */
.mbar-wrap{display:none}
@media (max-width:1080px){
  .mbar-wrap{display:block}
  .mbar-btn{
    display:flex;flex-direction:column;align-items:center;gap:.18rem;
    padding:.6rem .2rem .55rem;font-family:var(--sans);font-size:.72rem;font-weight:600;
    color:var(--muted);text-align:center;width:100%;
  }
  .mbar-btn svg{width:21px;height:21px}
  .mbar-btn.is-active,.mbar-btn[aria-expanded="true"]{color:var(--accent-d)}

  .mbar-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:47;
    background:var(--white);box-shadow:0 -10px 40px rgba(13,33,41,.22);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding:1.1rem 1.1rem calc(72px + env(safe-area-inset-bottom));
    transform:translateY(102%);transition:transform .28s var(--ease);
  }
  .mbar-sheet[hidden]{display:block}          /* hidden nur fuer Vorlesegeraete */
  .mbar-sheet.is-open{transform:translateY(0)}
  .mbar-sheet-in{display:flex;flex-direction:column}
  .mbar-sheet b{
    font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent-d);padding:0 .2rem .7rem;
  }
  .mbar-sheet a{
    padding:.85rem .2rem;font-size:1.02rem;font-weight:600;color:var(--ink-2);
    border-top:1px solid var(--line-soft);
  }
  .mbar-sheet a:first-of-type{font-weight:700;color:var(--accent-d)}
  .mbar-sheet a.is-active{color:var(--accent-d)}
  /* Abdunkeln, solange die Auswahl offen ist */
  .sheet-offen::before{
    content:'';position:fixed;inset:0;z-index:46;background:rgba(8,28,34,.42);
  }
  body.menu-open .mbar-wrap{display:none}
}
@media (prefers-reduced-motion:reduce){ .mbar-sheet{transition:none} }


/* --------------------------------------------------------------------------
   Umzugsband auf dem Handy kompakter.
   Es lief ueber drei Zeilen und nahm den halben ersten Bildschirm ein.
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .umzug-in{padding:.5rem 0;gap:.4rem .6rem;font-size:.84rem;line-height:1.3}
  .umzug .u-tag{font-size:.62rem;padding:.14rem .55rem;letter-spacing:.1em}
  .umzug a{font-size:.84rem}
}
@media (max-width:620px){
  .umzug-in{font-size:.8rem;padding:.45rem 0}
  /* Auf sehr schmalen Geraeten die Kurzfassung, sonst frisst der Hinweis den Einstieg */
  .umzug .u-lang{display:none}
}
.umzug .u-kurz{display:none}
@media (max-width:620px){ .umzug .u-kurz{display:inline} }

/* Lageplan der Praxis: volle Breite, damit die Beschriftungen lesbar bleiben */
.karte{margin:0}
.karte img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
.karte figcaption{margin-top:.8rem;font-size:.9rem;color:var(--muted)}


/* --------------------------------------------------------------------------
   Bildband: Beschriftung erst auf Wunsch.
   Vorstellung der Kundin: "Erklaerungen nur wenn man darauf drueckt."
   Die Kacheln zeigen also erst einmal nur das Foto. Beim Antippen oder
   Darueberfahren erscheint der Text. Fuer Vorlesegeraete steht er immer da.
   -------------------------------------------------------------------------- */
main > .strip .strip-caps span{
  opacity:0;transition:opacity .25s var(--ease);
  background:linear-gradient(to top,rgba(9,20,25,.9),rgba(9,20,25,.15) 70%,rgba(9,20,25,0));
  padding-top:3rem;
}
main > .strip .strip-caps span:hover,
main > .strip .strip-caps span.is-an{opacity:1}
main > .strip .strip-caps{pointer-events:auto}
main > .strip .strip-caps span{cursor:pointer}
/* Hinweis, dass man tippen kann */
main > .strip .strip-hinweis{
  position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);z-index:2;
  background:rgba(9,20,25,.62);color:#fff;border-radius:999px;
  padding:.3rem .9rem;font-family:var(--sans);font-size:.72rem;font-weight:600;
  pointer-events:none;line-height:1.3;
}
@media (hover:hover){ main > .strip .strip-hinweis{display:none} }

/* Diagnosen: pro Fachbereich ein Block mit zwei Spalten */
.diag{padding:clamp(1.5rem,3vw,2.2rem) 0;border-top:1px solid var(--line-soft)}
.diag:first-of-type{border-top:0;padding-top:0}
.diag-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.5rem}
.diag-kopf .eyebrow{margin-bottom:0}
.diag-kopf .link-arrow{font-size:.9rem}
.diag-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,3rem);margin-top:1.3rem}
.diag-spalten h3{font-size:1.02rem;margin-bottom:.8rem}
@media (max-width:820px){ .diag-spalten{grid-template-columns:1fr;gap:1.6rem} }


/* ==========================================================================
   Aufbau nach der Vorlage der Kundin (27.08.2026)
   Kein Deckblatt mehr. Ganz oben ein orangefarbenes Band mit dem laufenden
   Bildstreifen und dem Logo rechts. Darunter links die orange Menueleiste mit
   weissen Feldern, rechts der Inhalt.
   ========================================================================== */
.nav#kopf{position:static;background:var(--brand)}
.nav#kopf .kopf-in{
  display:flex;align-items:stretch;gap:0;background:var(--brand);
  width:min(100% - 2.6rem,var(--shell));margin-inline:auto;height:auto;
}
.nav#kopf .strip{flex:1 1 auto;min-width:0;margin-top:0;border-radius:0}
.nav#kopf .nav-logo{
  flex:none;display:flex;align-items:center;justify-content:center;
  padding:.9rem 0 .9rem 1.6rem;
}
.nav#kopf .nav-logo img{height:58px;width:auto}
.nav#kopf .burger{display:none;margin-left:auto;align-self:center}
.nav#kopf .burger span{background:#fff}
/* Die Bandhoehe gibt den Takt vor */
.nav#kopf .strip-unit{height:auto;aspect-ratio:auto}
.nav#kopf .strip{--kachel:150px}
.nav#kopf .strip .strip-unit{width:calc(var(--kachel) * 7);height:calc(var(--kachel) * 4 / 3)}

/* --- Menueleiste orange mit weissen Feldern --- */
.rail{
  background:var(--brand);border-radius:0 0 var(--r) 0;
  padding:1.4rem 1rem 1.6rem;margin-right:0;
}
.rail nav{gap:.42rem}
.rail nav a{
  background:#fff;color:var(--ink-2);border-radius:10px;
  padding:.62rem .9rem;font-size:.95rem;font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.rail nav a::before{display:none}
.rail nav a:hover{background:var(--paper);color:var(--ink-2)}
.rail nav a.is-active{background:var(--ink-2);color:#fff}
.rail .sub{border-left:0;margin:.35rem 0 .5rem .7rem;padding-left:0;gap:.28rem}
.rail .sub a{background:rgba(255,255,255,.88);font-size:.86rem;font-weight:500;padding:.46rem .8rem}
.rail .sub a.is-active{background:var(--ink-2);color:#fff}
.rail .rail-call{
  margin-top:1.3rem;padding:1rem .2rem 0;border-top:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:1.05rem;
}
.rail .rail-call small{color:rgba(255,255,255,.8)}

/* --- Seitenkopf: Ueberschrift steht jetzt im Inhalt, nicht mehr im Deckblatt --- */
.seitenkopf{max-width:62ch}
.seitenkopf h1{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:0}
.seitenkopf .lead{margin-top:1rem}
.seitenkopf .btn-row{margin-top:1.7rem}
.seitenkopf .hero-chips{margin-top:1.6rem}
.seitenkopf .hero-chips span{color:var(--muted)}
.seitenkopf .hero-chips svg{color:var(--accent)}
.content > .sec-tight:first-child{padding-top:clamp(1.8rem,3vw,2.6rem)}

@media (max-width:1080px){
  .nav#kopf{position:sticky;top:0;z-index:50}
  .nav#kopf .strip{display:none}
  .nav#kopf .kopf-in{align-items:center;height:var(--nav-h)}
  .nav#kopf .nav-logo{padding-left:0}
  .nav#kopf .nav-logo img{height:44px}
  .nav#kopf .burger{display:flex}
}


/* Die Bandregeln galten nur fuer "main > .strip". Im Kopfbereich liegt das Band
   jetzt woanders, deshalb hier dieselben Regeln noch einmal. */
.nav#kopf .strip{overflow:hidden;line-height:0;background:var(--ink-2);position:relative}
.nav#kopf .strip .strip-track{display:flex;width:max-content;animation:band-lauf 70s linear infinite}
.nav#kopf .strip:hover .strip-track,
.nav#kopf .strip:focus-within .strip-track{animation-play-state:paused}
.nav#kopf .strip .strip-unit{position:relative;flex:none}
.nav#kopf .strip .strip-unit > img{width:100%;height:100%;object-fit:cover;display:block}
.nav#kopf .strip .strip-caps{
  position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(7,1fr);
}
.nav#kopf .strip .strip-caps span{
  padding:2.4rem .6rem .55rem;color:#fff;font-family:var(--sans);
  font-size:.74rem;font-weight:600;line-height:1.25;cursor:pointer;
  opacity:0;transition:opacity .25s var(--ease);
  background:linear-gradient(to top,rgba(9,20,25,.9),rgba(9,20,25,.15) 70%,rgba(9,20,25,0));
}
.nav#kopf .strip .strip-caps span:hover,
.nav#kopf .strip .strip-caps span.is-an{opacity:1}
.nav#kopf .strip .strip-hinweis{
  position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);z-index:2;
  background:rgba(9,20,25,.6);color:#fff;border-radius:999px;padding:.26rem .8rem;
  font-family:var(--sans);font-size:.68rem;font-weight:600;line-height:1.3;pointer-events:none;
}
@media (hover:hover){ .nav#kopf .strip .strip-hinweis{display:none} }
@media (prefers-reduced-motion:reduce){ .nav#kopf .strip .strip-track{animation:none} }

/* Unterpunkte in der Menueleiste ebenfalls weiss, nur kleiner */
.rail .sub a{background:#fff}

/* Hoffoto auf der Anfahrtsseite */
.hofbild{margin:1.8rem 0 0;max-width:900px}
.hofbild img{width:100%;height:auto;display:block;border-radius:var(--r);box-shadow:var(--shadow)}
.hofbild figcaption{margin-top:.7rem;font-size:.9rem;color:var(--muted)}


/* ==========================================================================
   Kopf und Menue als ein orangefarbener Block links (27.08.2026, zweiter Anlauf)
   Logo oben links, direkt darunter die Menueleiste, beides orange und beim
   Scrollen stehend. Rechts daneben oben der Bildstreifen, darunter der Inhalt.
   ========================================================================== */
.nav#kopf{background:transparent;position:static}
.nav#kopf .kopf-in{
  display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--rail-gap);
  width:min(100% - 2.6rem,var(--shell));margin-inline:auto;align-items:stretch;height:auto;
}
.nav#kopf .kopf-logo{
  background:var(--brand);border-radius:var(--r) var(--r) 0 0;
  display:flex;align-items:center;justify-content:center;padding:1.1rem .9rem;
}
.nav#kopf .kopf-logo .nav-logo{display:block}
.nav#kopf .kopf-logo img{height:auto;width:100%;max-width:190px}
.nav#kopf .kopf-band{min-width:0;display:flex}
.nav#kopf .kopf-band .strip{flex:1 1 auto;min-width:0;--kachel:112px;align-self:stretch}
.nav#kopf .strip .strip-unit{width:calc(var(--kachel) * 7);height:100%}
.nav#kopf .strip .strip-unit > img{height:100%;object-fit:cover}
.nav#kopf .burger{display:none}

/* Menueleiste schliesst unten an das Logo an und bleibt beim Scrollen stehen */
.rail{
  background:var(--brand);border-radius:0 0 var(--r) var(--r);
  padding:1rem .85rem 1.2rem;position:sticky;top:.8rem;
  max-height:calc(100dvh - 1.6rem);overflow-y:auto;
}
.rail nav{gap:.34rem}
.rail nav a{padding:.52rem .8rem;font-size:.92rem}
.rail .sub{margin:.28rem 0 .4rem .6rem;gap:.24rem}
.rail .sub a{padding:.4rem .75rem;font-size:.82rem}
.rail .rail-call{margin-top:1rem;padding-top:.85rem;font-size:1rem}

/* Der Inhalt beginnt bündig unter dem Bildstreifen */
.layout{align-items:start}
.content > .sec-tight:first-child{padding-top:clamp(1.6rem,2.6vw,2.2rem)}

@media (max-width:1080px){
  .nav#kopf{position:sticky;top:0;z-index:50;background:var(--brand)}
  .nav#kopf .kopf-in{grid-template-columns:1fr;gap:0;height:var(--nav-h);align-items:center}
  .nav#kopf .kopf-logo{
    background:none;border-radius:0;padding:0;
    display:flex;align-items:center;justify-content:space-between;width:100%;
  }
  .nav#kopf .kopf-logo img{width:auto;height:44px;max-width:none}
  .nav#kopf .kopf-band{display:none}
  .nav#kopf .burger{display:flex}
}

/* Der Glas-Knopf stammt aus der Zeit mit dunklem Deckblatt und war auf hellem
   Grund kaum zu sehen. Ohne Deckblatt braucht er einen sichtbaren Rand. */
.btn-glass{background:transparent;border:1.5px solid var(--line);color:var(--ink-2);backdrop-filter:none}
.btn-glass:hover{background:var(--paper-2);color:var(--ink-2)}
/* Logo etwas groesser, der Zusatz "Schönherz" war zu klein zum Lesen */
.nav#kopf .kopf-logo{padding:1.3rem .8rem}
.nav#kopf .kopf-logo img{max-width:100%}


/* ==========================================================================
   Kopfbereich aufgeraeumt (27.08.2026)
   Zwei Fehler steckten hier: Das Logo hatte "width:100%" ohne "min-width:0",
   dadurch blieb es auf seiner natuerlichen Breite von 1272 Pixeln stehen und
   lief aus dem Block heraus. Und der Bildstreifen hatte "height:100%" in einem
   Elternteil ohne feste Hoehe, deshalb blieb unter den Kacheln eine dunkle
   Flaeche stehen. Beides loest eine feste Kopfhoehe.
   ========================================================================== */
.nav#kopf .kopf-in{--kopfhoehe:clamp(120px,11vw,158px);align-items:start}

.nav#kopf .kopf-logo{
  height:var(--kopfhoehe);min-width:0;
  display:flex;align-items:center;justify-content:center;
  padding:.9rem 1rem;box-sizing:border-box;
}
.nav#kopf .kopf-logo .nav-logo{display:block;min-width:0;width:100%;line-height:0}
.nav#kopf .kopf-logo img{
  display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;
}

.nav#kopf .kopf-band{height:var(--kopfhoehe);min-width:0;display:block}
.nav#kopf .kopf-band .strip{height:100%;width:100%;overflow:hidden}
.nav#kopf .kopf-band .strip-track{height:100%;align-items:stretch}
.nav#kopf .kopf-band .strip-unit{
  height:100%;width:calc(var(--kopfhoehe) * 0.75 * 7);flex:none;
}
.nav#kopf .kopf-band .strip-unit > img{width:100%;height:100%;object-fit:cover;display:block}
.nav#kopf .kopf-band .strip-caps span{padding-top:1.6rem;font-size:.7rem}

@media (max-width:1080px){
  .nav#kopf .kopf-in{--kopfhoehe:var(--nav-h)}
  .nav#kopf .kopf-logo{height:var(--nav-h);padding:0;justify-content:space-between}
  .nav#kopf .kopf-logo .nav-logo{width:auto}
  .nav#kopf .kopf-logo img{width:auto;height:44px}
}


/* ==========================================================================
   Randloser Kopf (27.08.2026)
   Links laeuft das Orange bis an den Bildschirmrand, rechts laufen die Fotos
   bis an den Rand, und oben stossen sie direkt an das Umzugsband.
   Der Trick fuer das Orange nach links ist ein sehr breiter Schatten. Der wird
   vom "overflow-x:clip" am body sauber am Bildschirmrand abgeschnitten.
   ========================================================================== */
.nav#kopf .kopf-in{
  width:100%;max-width:none;margin:0;align-items:stretch;
  padding-left:max(0px, calc((100vw - min(100vw - 2.6rem, var(--shell))) / 2));
  padding-right:0;
}
.nav#kopf .kopf-logo{box-shadow:-100vw 0 0 var(--brand)}
.nav#kopf .kopf-band{margin:0}
.nav#kopf .kopf-band .strip{margin-top:0;border-radius:0}

/* Menueleiste: Orange ebenfalls bis zum linken Bildschirmrand */
.rail{box-shadow:-100vw 0 0 var(--brand);border-radius:0 0 var(--r) 0}
.nav#kopf .kopf-logo{border-radius:0}

@media (max-width:1080px){
  .nav#kopf .kopf-in{padding-left:0;width:min(100% - 2.6rem,var(--shell));margin-inline:auto}
  .nav#kopf .kopf-logo{box-shadow:none}
}


/* ==========================================================================
   Orange Spalte sitzt am Bildschirmrand (27.08.2026)
   Der Versuch mit einem breiten Schatten war falsch: Ein Schatten mit
   "-100vw" liegt komplett ausserhalb des Bildes, er fuellt die Luecke nicht.
   Stattdessen beginnen Kopf und Inhaltsraster jetzt direkt bei null. Die
   orange Spalte reicht damit an den linken Rand, der Bildstreifen an den
   rechten. Nur der Text bekommt innen Abstand.
   ========================================================================== */
.nav#kopf .kopf-logo,.rail{box-shadow:none}

.nav#kopf .kopf-in{padding-left:0;padding-right:0}
.nav#kopf .kopf-logo{padding:.9rem 1.2rem}

.layout{
  width:100%;max-width:none;margin:0;
  padding-left:0;
  padding-right:max(1.3rem, calc((100vw - min(100vw - 2.6rem, var(--shell))) / 2));
}
.rail{padding:1rem 1rem 1.2rem 1.2rem;border-radius:0 0 var(--r) 0}

@media (max-width:1080px){
  .layout{padding-inline:1.3rem}
}


/* ==========================================================================
   Durchgehende orange Spalte (27.08.2026)
   Die Menueleiste ist beim Scrollen stehen geblieben, ihre orange Flaeche
   endete dadurch mittendrin. Die Farbe kommt jetzt von einer eigenen Spalte,
   die ueber die volle Hoehe des Inhalts laeuft. Die Leiste selbst ist
   durchsichtig und bewegt sich darauf.
   ========================================================================== */
.layout{position:relative}
.layout::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:var(--rail-w);
  background:var(--brand);z-index:0;
}
.rail{background:transparent;border-radius:0;position:sticky;z-index:1}
.nav#kopf .kopf-logo{border-radius:0}
.content{position:relative;z-index:1}

@media (max-width:1080px){
  .layout::before{display:none}
}


/* ==========================================================================
   Kein Schwarz auf Flaechen (31.08.2026)
   Wunsch der Kundin: dunkle, fast schwarze Flaechen passen nicht zu einer
   Ergotherapie. Knoepfe und die aktive Menuezeile bekommen ein warmes Grau.
   Ueberschriften bleiben dunkel, das ist Text und kein Farbfeld.
   ========================================================================== */
.rail nav a.is-active,.rail .sub a.is-active{background:var(--dunkel);color:#fff}
.btn-ink{background:var(--dunkel);color:#fff}
.btn-ink:hover{background:#4b433f}
.content .sec-ink .btn-ink{background:var(--dunkel)}
.strip{background:var(--dunkel)}
.nav#kopf .strip,.nav#kopf .kopf-band .strip{background:var(--dunkel)}
.behandlungen li::before{background:var(--accent-t);color:var(--accent-d)}


/* ==========================================================================
   Bilder im Rahmen, wie auf dem Flyer und den Team-Karten (31.08.2026)
   Dort sitzt jedes Foto in einem weissen Feld mit orangefarbener Aussenlinie.
   ========================================================================== */
.split-media,.fach-img,.angebot .a-img,.person-img,.hofbild img,.karte img,.gallery button{
  background:#fff;
  box-shadow:0 0 0 5px #fff, 0 0 0 7px var(--brand), var(--shadow-sm);
  border-radius:var(--r-sm);
}
.split-media{border-radius:var(--r-sm)}
.fach-img{border-radius:var(--r-sm)}
.person-img{border-radius:var(--r-sm) var(--r-sm) 0 0}
.gallery{gap:1.5rem}
.gallery button{border-radius:var(--r-sm)}
.hofbild,.karte{padding:7px}
.hofbild img,.karte img{border-radius:var(--r-sm)}
/* Innerhalb der Karten braucht der Rahmen etwas Luft */
.fach{padding:1.35rem 1.35rem 1.6rem}
.angebot .a-img{margin:1rem 1rem 0;border-radius:var(--r-sm)}
.person{overflow:visible;padding:0}
.person-img{margin:1rem 1rem 0}

/* Team: Schwerpunkte in den Karten */
.person-body .titel{font-size:.9rem;color:var(--muted);margin-top:.2rem}
.person-body h4{
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-d);margin:1.2rem 0 .7rem;
}
.person-body .bul li{font-size:.92rem}
.person--rez{display:flex;align-items:center;background:var(--paper-2);box-shadow:none;border:1px dashed var(--line)}
.team-grid{align-items:start}


/* ==========================================================================
   Ruhe hineinbringen (01.09.2026)
   Befund: Die orange Spalte, sechzehn weisse Kaestchen, orange Rahmen um jedes
   Bild und Knoepfe in drei Farben ergaben vier Farbebenen gleichzeitig.
   Praxis-Seiten leben von einer Akzentfarbe und viel Ruhe. Der Aufbau bleibt,
   nur die Lautstaerke geht runter.
   ========================================================================== */

/* 1. Menue: flachere Felder, enger gesetzt, weniger Schatten */
.rail nav a{
  box-shadow:none;border-radius:8px;padding:.5rem .8rem;font-size:.9rem;
}
.rail nav{gap:.26rem}
.rail .sub a{background:rgba(255,255,255,.9);font-size:.82rem;padding:.38rem .75rem}
.rail .sub{margin:.22rem 0 .38rem .7rem;gap:.18rem}
.rail-call{letter-spacing:.01em}

/* 2. Nur eine Knopffarbe. Der Fachbereich bleibt als farbiger Kicker erkennbar,
      aber nicht mehr als drittes buntes Element im selben Blickfeld. */
.fach-body .link-arrow{background:var(--brand);color:#fff}
.fach:hover .fach-body .link-arrow{background:var(--brand-d)}

/* 3. Bildrahmen neutral: weisses Passepartout und feine Linie statt Orange.
      Der Rahmen bleibt, wie gewuenscht, wird aber nicht zum Farbträger. */
.split-media,.fach-img,.angebot .a-img,.person-img,.gallery button{
  box-shadow:0 0 0 6px #fff, 0 0 0 7px var(--line-soft), var(--shadow-sm);
}
/* Nur die grossen Einzelbilder behalten die orange Linie als Akzent */
.hofbild img,.karte img{box-shadow:0 0 0 6px #fff, 0 0 0 8px var(--brand), var(--shadow-sm)}

/* 4. Fachbereichskarten ruhiger: heller Rand statt Schatten, farbige Kante oben */
.fach{
  background:#fff;box-shadow:none;border:1px solid var(--line-soft);
  border-top:3px solid var(--c,var(--accent));
  border-radius:var(--r-sm);
}
.fach:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}

/* 5. Textspalte begrenzen, damit Zeilen nicht ins Leere laufen */
.content .lead,.content .sec-head p,.seitenkopf .lead{max-width:60ch}
.content p{max-width:72ch}

/* 6. Gleichmaessiger Takt */
.content .sec{padding:clamp(2.8rem,5vw,4.4rem) 0}
.content .sec-tight{padding:clamp(2.2rem,3.6vw,3.2rem) 0}

/* Eroeffnung der Startseite: Text und Bild nebeneinander */
.auftakt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.auftakt .seitenkopf{max-width:none}
.auftakt-bild{margin:0}
.auftakt-bild img{width:100%;height:auto;display:block;border-radius:var(--r-sm);
  box-shadow:0 0 0 6px #fff, 0 0 0 8px var(--brand), var(--shadow-sm)}
@media (max-width:900px){ .auftakt{grid-template-columns:1fr;gap:1.8rem} }


/* ==========================================================================
   Nach den Referenzen (03.09.2026)
   Three Circles, Modio und Easy Times zeigen dasselbe Muster: eine ruhige
   schmale Spalte links mit leisen Menuepunkten, rechts sehr viel Weissraum,
   grosse Typografie, grosse Bilder mit weichen Ecken, kaum Schatten, kaum
   Linien. Genau daran orientiert sich dieser Durchgang.
   ========================================================================== */

/* 1. Menue leiser: keine harten weissen Kaesten mehr, sondern warme, ruhige
      Felder. Die aktive Seite ist das einzige kraeftige Element. */
.rail nav a{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:10px;padding:.52rem .85rem;font-size:.92rem;font-weight:600;box-shadow:none;
}
.rail nav a:hover{background:rgba(255,255,255,.3);color:#fff}
.rail nav a.is-active{background:#fff;color:var(--brand-dd);border-color:#fff}
/* Unterpunkte ohne Kasten, nur Text */
.rail .sub{border-left:1px solid rgba(255,255,255,.35);margin:.3rem 0 .5rem .75rem;padding-left:.7rem}
.rail .sub a{background:none;border:0;color:rgba(255,255,255,.9);font-weight:500;
  font-size:.85rem;padding:.3rem .3rem}
.rail .sub a:hover{background:none;color:#fff;text-decoration:underline;text-underline-offset:3px}
.rail .sub a.is-active{background:none;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.rail-t{display:none}

/* 2. Waermerer, hellerer Grund im Inhalt */
:root{--paper:#fbf7f2;--paper-2:#f3ece4}

/* 3. Mehr Luft und groessere Typografie, wie in den Vorlagen */
.content .sec{padding:clamp(3.4rem,6vw,5.6rem) 0}
.seitenkopf h1{font-size:clamp(2.2rem,4.4vw,3.6rem);letter-spacing:-.03em}
.content h2{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.026em}
.content .lead{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62}
.sec-head{margin-bottom:clamp(2.2rem,4vw,3.2rem)}

/* 4. Karten: grosses Bild, weiche Ecken, keine Rahmenlinien, kein Schatten.
      Die Farbe des Fachbereichs steckt nur noch im Kicker. */
.fach{background:none;border:0;border-radius:0;padding:0}
.fach:hover{box-shadow:none;transform:none}
.fach-img{
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  box-shadow:none;background:var(--paper-2);
}
.fach:hover .fach-img img{transform:scale(1.03)}
.fach-body{padding:1.1rem 0 0}
.fach-body h3{font-size:1.32rem;margin-bottom:.5rem}
.fach-body p{font-size:.98rem;color:var(--muted);margin-bottom:1.1rem}
.fach-body .link-arrow{
  background:none;color:var(--ink-2);padding:0;border-radius:0;
  font-size:.95rem;font-weight:700;border-bottom:2px solid var(--brand);
  padding-bottom:.22rem;
}
.fach:hover .fach-body .link-arrow{background:none;color:var(--brand-d);transform:none}
.fach-body .link-arrow svg{width:16px;height:16px}
.grid.g-3{gap:clamp(1.8rem,3.4vw,2.8rem)}

/* 5. Uebrige Bilder ebenfalls ohne Rahmenlinie, nur weiche Ecken */
.split-media,.angebot .a-img,.person-img,.gallery button,.auftakt-bild img{
  box-shadow:none;border-radius:var(--r);
}
.person-img{border-radius:var(--r) var(--r) 0 0;margin:0}
.person{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.angebot .a-img{margin:0;border-radius:var(--r) var(--r) 0 0}
.angebot{border:0;box-shadow:var(--shadow-sm);border-radius:var(--r)}
/* Die beiden grossen Einzelbilder behalten das weisse Passepartout */
.hofbild img,.karte img{box-shadow:0 0 0 8px #fff, var(--shadow-sm);border-radius:var(--r)}

/* 6. Info-Karten ruhiger */
.icard{border:0;background:#fff;box-shadow:var(--shadow-sm);border-radius:var(--r);padding:1.7rem 1.6rem}

/* Knoepfe flach, wie in den Vorlagen. Der orange Schein wirkte aus der Zeit gefallen. */
.btn-primary{box-shadow:none}
.btn-primary:hover{box-shadow:none;background:var(--brand-d)}
.btn{box-shadow:none}
.nav-clear .btn-primary{box-shadow:none}
/* Zweiter Knopf als ruhige Linie statt Kasten */
.seitenkopf .btn-glass{border:1.5px solid var(--line);background:none}


/* ==========================================================================
   Aufbau nach Aurovia (03.09.2026)
   Vorbild: aurovia-template.webflow.io. Uebernommen ist der Aufbau, nicht
   das Aussehen: schmale Spalte links mit dem Handlungsaufruf ganz unten,
   rechts Abschnitte, die bis an die Bildschirmkante laufen und im Wechsel
   hell und sandfarben liegen. Jeder Abschnittskopf ist zweispaltig, die
   Marke steht links neben der Ueberschrift. Eine Fusszeile gibt es nicht
   mehr, die Seite endet mit einem dunklen Terminabschnitt.
   ========================================================================== */

:root{
  /* Der rechte Rand der Inhaltsspalte. Ihn braucht auch der Vollflaechen-
     Grund, damit er genau um diesen Betrag nach aussen ragen kann. */
  --randR: max(1.3rem, calc((100vw - min(100vw - 2.6rem, var(--shell))) / 2));
  --marke: clamp(140px, 17vw, 230px);   /* Spalte der Abschnittsmarke */
  --tief:#332d29;                       /* warmes Dunkelbraun, kein Schwarz */
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
/* overflow-x liegt schon oben am body als clip. Hier nichts anfassen:
   ein hidden daraus zu machen wuerde die klebende Menueleiste brechen. */
.layout{padding-right:var(--randR)}

/* --- 1. Gruende laufen bis an die rechte Bildschirmkante ---------------- */
.content .grund{
  margin-right:calc(-1 * var(--randR));
  padding-right:var(--randR);
}
.content .grund-sand{background:var(--paper-2)}
.content .grund-hell{background:var(--paper)}
.content .grund-tief{background:var(--tief)}

/* Auf Dunkel dreht sich die Schrift um */
.content .grund-tief,
.content .grund-tief p,
.content .grund-tief .lead,
.content .grund-tief address{color:rgba(255,255,255,.74)}
.content .grund-tief h1,.content .grund-tief h2,
.content .grund-tief h3,.content .grund-tief h4,
.content .grund-tief b,.content .grund-tief strong{color:#fff}
.content .grund-tief .eyebrow,.content .grund-tief .eyebrow.is-light{color:#ffb271}
.content .grund-tief a{color:#fff}
.content .grund-tief .btn-glass{border:1.5px solid rgba(255,255,255,.4);background:none;color:#fff}
.content .grund-tief .btn-glass:hover{background:rgba(255,255,255,.12)}

/* --- 2. Abschnittskopf: Marke links, Ueberschrift rechts ---------------- */
.content .sec-head{
  max-width:none;
  display:grid;
  grid-template-columns:var(--marke) minmax(0,1fr);
  column-gap:clamp(1.4rem,3.5vw,3.6rem);
  row-gap:0;
  align-items:start;
}
.content .sec-head > .eyebrow{
  grid-column:1;grid-row:1;
  margin:0;padding-top:.5rem;
  align-self:start;line-height:1.4;
  white-space:normal;display:block;
}
.content .sec-head > .eyebrow::before{content:'/';margin-right:.15em;opacity:.55}
.content .sec-head > h2{grid-column:2;grid-row:1;margin:0}
.content .sec-head > .lead,
.content .sec-head > p{grid-column:2;grid-row:2;margin-top:1.1rem;max-width:58ch}
/* Zentrierte Koepfe bleiben, wie sie waren */
.content .sec-head.is-center{display:block;text-align:center;max-width:660px;margin-inline:auto}
.content .sec-head.is-center > .eyebrow::before{content:none}

/* Das eine kursive Wort in der Ueberschrift, wie in der Vorlage */
.content h1 em,.content h2 em{
  font-family:var(--serif);font-style:italic;font-weight:700;
  letter-spacing:-.005em;
}

/* --- 3. Menueleiste: Termin und Rechtstexte stehen jetzt unten ---------- */
.rail{
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--nav-h) - 2.4rem);
  max-height:calc(100vh - var(--nav-h) - 2.4rem);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent;
}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:3px}
.rail-kontakt{
  margin-top:auto;padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.32);
}
.rail-frage{color:#fff;font-weight:700;font-size:1rem;margin:0 0 .7rem}
.btn-weiss{
  display:block;text-align:center;background:#fff;color:var(--brand-dd);
  border-radius:10px;padding:.62rem .9rem;font-weight:700;font-size:.92rem;
  box-shadow:none;
}
.btn-weiss:hover{background:var(--paper);color:var(--brand-dd)}
.rail-tel{
  display:block;margin-top:.85rem;color:#fff;font-weight:700;font-size:1.02rem;
  letter-spacing:-.01em;
}
.rail-tel:hover{text-decoration:underline;text-underline-offset:3px}
.rail-adresse{
  margin:.5rem 0 0;color:rgba(255,255,255,.85);font-size:.83rem;line-height:1.55;
}
.rail-fuss{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.24);
  display:flex;flex-wrap:wrap;gap:.35rem .8rem;
  font-size:.76rem;color:rgba(255,255,255,.8);
}
.rail-fuss a,.rail-fuss .cookie-link{
  color:rgba(255,255,255,.85);background:none;border:0;padding:0;
  font:inherit;cursor:pointer;
}
.rail-fuss a:hover,.rail-fuss .cookie-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rail-fuss span{flex:1 0 100%;color:rgba(255,255,255,.6);margin-top:.15rem}
.rail-call{display:none}   /* durch rail-kontakt ersetzt */

/* --- 4. Schlussabschnitt statt Fusszeile -------------------------------- */
.schluss-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(1.6rem,3vw,2.8rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
.sblock b{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.65rem;
}
.sblock .sgross{
  display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.35;overflow-wrap:anywhere;
}
.sblock .sgross:hover{color:#ffb271}
.sblock small{display:block;margin-top:.35rem;font-size:.83rem;color:rgba(255,255,255,.6)}
.sblock address{font-style:normal;line-height:1.7;font-size:.98rem}
.sblock .slink{
  display:inline-block;margin-top:.6rem;font-size:.9rem;font-weight:700;
  border-bottom:2px solid var(--brand);padding-bottom:.15rem;
}
.schluss-tat{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(2rem,4vw,3rem)}
.schluss-fuss{
  margin-top:clamp(2.4rem,4.5vw,3.4rem);padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  font-size:.84rem;color:rgba(255,255,255,.6);
}
.schluss-fuss .sdve{display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.7)}
.schluss-fuss .sdve img{width:38px;height:38px;border-radius:8px;background:#fff;padding:2px}
.schluss-fuss nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.schluss-fuss .cookie-link{background:none;border:0;padding:0;font:inherit;color:rgba(255,255,255,.8);cursor:pointer}
.schluss-fuss a,.schluss-fuss .cookie-link{color:rgba(255,255,255,.8)}
.schluss-fuss a:hover,.schluss-fuss .cookie-link:hover{color:#fff}
.schluss-fuss .scopy{margin-left:auto}

/* --- 5. Handy ----------------------------------------------------------- */
@media (max-width:1080px){
  .rail{min-height:0;max-height:none;overflow:visible}
  .content .sec-head{grid-template-columns:minmax(0,1fr)}
  .content .sec-head > .eyebrow{grid-column:1;grid-row:1;padding-top:0;margin-bottom:.85rem}
  .content .sec-head > h2{grid-column:1;grid-row:2}
  .content .sec-head > .lead,.content .sec-head > p{grid-column:1;grid-row:3}
  .schluss-fuss .scopy{margin-left:0;flex:1 0 100%}
}

/* --- 6. Menue flach wie in der Vorlage ---------------------------------
   Die weissen Kaesten hinter jedem Punkt haben die Leiste so hoch gemacht,
   dass der Terminblock unten aus dem Bild fiel. Aurovia setzt reinen Text.
   Nur die aktuelle Seite bleibt ein weisses Feld, damit aeltere Besucher
   sofort sehen, wo sie sind. */
.rail nav{gap:0}
.rail nav a{
  background:none;border:0;box-shadow:none;border-radius:8px;
  color:#fff;font-weight:500;font-size:.95rem;
  padding:.34rem .7rem;
}
.rail nav a:hover{background:rgba(255,255,255,.18);color:#fff}
.rail nav a.is-active{
  background:#fff;color:var(--brand-dd);font-weight:700;
}
.rail .sub{border-left:1px solid rgba(255,255,255,.34);margin:.1rem 0 .35rem .7rem;padding-left:.65rem;gap:0}
.rail .sub a{padding:.26rem .55rem;font-size:.855rem;color:rgba(255,255,255,.92)}
.rail .sub a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.rail .sub a.is-active{background:#fff;color:var(--brand-dd);font-weight:700;text-decoration:none}

/* --- 7. Die Leiste muss ganz in den Bildschirm passen -------------------
   Sonst rutscht genau der Terminblock unten heraus, also das Wichtigste.
   Der Kopf ist beim Scrollen ohnehin weg, deshalb klebt die Leiste jetzt
   dicht am oberen Rand und nutzt die volle Hoehe. */
@media (min-width:1081px){
  .rail{
    top:1rem;
    min-height:calc(100vh - 2rem);
    max-height:calc(100vh - 2rem);
    padding-top:.8rem;padding-bottom:.9rem;
  }
  .rail nav a{padding:.24rem .7rem}
  .rail .sub a{padding:.2rem .55rem}
  .rail .sub{margin:.05rem 0 .3rem .7rem}
  .rail-kontakt{padding-top:1.1rem}
  .rail-frage{font-size:.95rem;margin-bottom:.6rem}
  .rail-tel{margin-top:.7rem;font-size:.98rem}
  .rail-adresse{font-size:.8rem;line-height:1.5}
  .rail-fuss{margin-top:.85rem;padding-top:.7rem;font-size:.75rem}
}

/* --- 8. Gruende stossen links direkt an die orange Spalte ---------------
   Vorher blieb zwischen Menue und Abschnitt ein heller Streifen stehen.
   In der Vorlage laeuft jede Flaeche von der Spalte bis zur Bildschirmkante. */
@media (min-width:1081px){
  .content .grund{
    margin-left:calc(-1 * var(--rail-gap));
    padding-left:var(--rail-gap);
  }
}

/* --- 9. Auf dem Handy bleibt die Leiste aus -----------------------------
   Die Regel .rail{display:flex} weiter oben hat das alte display:none aus
   der Handy-Abfrage ueberschrieben, dadurch stand die orange Spalte auf
   einmal auch auf dem Telefon. Hier wieder abgeschaltet. */
@media (max-width:1080px){
  .rail{display:none}
}


/* ==========================================================================
   Ein durchgehender orangener Balken (03.09.2026)
   Der Logo-Block oben war 280 px breit, die Menuespalte darunter 238 px.
   Dazwischen sass die Luecke aus --rail-gap und war ebenfalls orange, dadurch
   sah der Balken aus wie zwei verschieden breite Bloecke mit einer Stufe.
   Jetzt gilt oben wie unten dieselbe Breite, und der Fotostreifen beginnt
   genau an dieser Kante.
   ========================================================================== */
@media (min-width:1081px){
  .nav#kopf .kopf-in{
    grid-template-columns:var(--rail-w) minmax(0,1fr);
    gap:0;
  }
  /* Der Streifen faengt jetzt direkt am Balken an, nicht erst hinter der Luecke */
  .nav#kopf .kopf-band{margin-left:0}
  /* Das Logo bekommt innen wieder Luft, weil die Luecke aussen weggefallen ist */
  .nav#kopf .kopf-logo{padding:1rem 1.3rem}
  .nav#kopf .kopf-logo img{max-width:100%}
}

/* ==========================================================================
   Schlussabschnitt aufgeraeumt (03.09.2026)
   Vorher standen Ueberschrift und Kontaktbloecke auf zwei verschiedenen
   Kanten, dazu viel Leerraum in der Mitte. Jetzt liegt alles auf derselben
   Linie wie die Ueberschrift, und der Ton ist waermer statt fast schwarz.
   ========================================================================== */
:root{
  --tief:#413830;
  /* Abstand von der linken Inhaltskante bis zur Ueberschriftenspalte */
  --spine:calc(var(--marke) + clamp(1.4rem,3.5vw,3.6rem));
}
@media (min-width:1081px){
  .schluss .schluss-grid,
  .schluss .schluss-tat,
  .schluss .schluss-fuss{margin-left:var(--spine)}
}
.schluss{padding-block:clamp(3rem,5.5vw,4.6rem)}
.schluss .sec-head{margin-bottom:0}
.schluss-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.4rem,2.4vw,2.2rem);
  margin-top:clamp(2rem,3.5vw,2.8rem);
}
.sblock b{margin-bottom:.5rem;color:rgba(255,255,255,.5)}
.sblock .sgross{font-size:1.05rem}
.sblock address{font-size:.95rem;line-height:1.6}
.schluss-tat{margin-top:clamp(1.6rem,2.8vw,2.2rem)}
.schluss-fuss{margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:1.1rem}

/* Die Mailadresse ist lang, sie darf nicht die ganze Spalte sprengen */
.sblock .sgross[href^="mailto"]{font-size:.98rem;letter-spacing:-.01em}


/* ==========================================================================
   Breiterer Balken, groesseres Logo, weicher Rand (03.09.2026)
   Drei Wuensche: der Balken darf breiter sein, das Logo soll groesser und
   auf derselben Linie wie die Menuepunkte stehen, und die rechte Kante soll
   nicht hart abbrechen, sondern auslaufen.
   ========================================================================== */
:root{ --rail-w:288px; --fade:clamp(26px,3.2vw,52px); }

@media (min-width:1081px){
  /* Logo beginnt genau dort, wo auch die Menueschrift beginnt (.7rem),
     und nutzt den Rest der Spalte aus. */
  .nav#kopf .kopf-logo{padding:1.1rem 1.1rem 1.1rem .7rem}
  .nav#kopf .kopf-logo img{width:100%;max-width:100%;height:auto}

  /* Die harte Kante zwischen Balken und Inhalt wird zu einem Verlauf.
     Der Streifen liegt ueber dem Inhalt, faengt aber keine Klicks ab, und er
     endet vor der Textkante, damit er nie in die Schrift hineinlaeuft. */
  .layout{position:relative}
  .layout::after,
  .nav#kopf .kopf-in::after{
    content:'';position:absolute;top:0;bottom:0;left:var(--rail-w);
    width:var(--fade);z-index:2;pointer-events:none;
    background:linear-gradient(90deg,
      rgb(255 102 0 / 1) 0%,
      rgb(255 102 0 / .72) 38%,
      rgb(255 102 0 / .28) 70%,
      rgb(255 102 0 / 0) 100%);
  }
  .nav#kopf .kopf-in{position:relative}
}

@media (max-width:1080px){
  .layout::after,.nav#kopf .kopf-in::after{display:none}
}

/* Nachtrag: Das Logo stand 6 px weiter rechts als die Menueschrift, weil der
   Logo-Link aus einer aelteren Regel noch 1.6rem Eigenpolsterung mitbrachte.
   Die Menueschrift beginnt bei 1.2rem (Leiste) + .7rem (Menuepunkt) = 1.9rem.
   Genau darauf steht das Logo jetzt, und der Balken ist breit genug, dass es
   deutlich groesser werden kann. */
:root{ --rail-w:320px; }
@media (min-width:1081px){
  .nav#kopf .kopf-logo{padding:1.2rem .8rem 1.2rem 1.9rem;justify-content:flex-start}
  .nav#kopf .kopf-logo .nav-logo{padding:0;width:100%}
  .nav#kopf .kopf-logo img{width:100%;max-width:none;height:auto}
}

/* Nachtrag zum Verlauf: 48 px waren zu breit, das erste Foto im Streifen sah
   dadurch ausgewaschen aus und die Abschnittsmarke lag noch im Schleier.
   Kuerzer und steiler: weiche Kante statt Nebelbank. */
:root{ --fade:clamp(18px,2.1vw,34px); }
@media (min-width:1081px){
  .layout::after,.nav#kopf .kopf-in::after{
    background:linear-gradient(90deg,
      rgb(255 102 0 / 1) 0%,
      rgb(255 102 0 / .55) 45%,
      rgb(255 102 0 / .14) 78%,
      rgb(255 102 0 / 0) 100%);
  }
}


/* ==========================================================================
   Laengerer Verlauf (03.09.2026)
   Der Verlauf soll weiter auslaufen. Breiter machen allein geht nicht: er
   wuerde sonst in die Schrift der Abschnitte hineinlaufen. Deshalb waechst
   die Rinne zwischen Balken und Text mit, und der Verlauf fuellt genau diese
   Rinne aus. Er endet damit immer kurz vor dem ersten Buchstaben.
   ========================================================================== */
:root{
  --rail-gap:clamp(2.6rem,4.6vw,5rem);
  --fade:calc(var(--rail-gap) - 5px);
}
@media (min-width:1081px){
  .layout::after,.nav#kopf .kopf-in::after{
    width:var(--fade);
    background:linear-gradient(90deg,
      rgb(255 102 0 / 1)   0%,
      rgb(255 102 0 / .86) 16%,
      rgb(255 102 0 / .58) 38%,
      rgb(255 102 0 / .32) 58%,
      rgb(255 102 0 / .13) 78%,
      rgb(255 102 0 / .04) 91%,
      rgb(255 102 0 / 0)   100%);
  }
}

/* Nachtrag: Weil der Balken breiter geworden ist, blieb den drei Karten bei
   rund 1100 px zu wenig Platz. `repeat(3,1fr)` kann aber nicht schrumpfen,
   die Spalte ist mindestens so breit wie ihr laengstes Wort, und die Seite
   lief seitlich ueber. Die Karten brechen jetzt auf zwei Spalten um, statt
   die Seite zu sprengen. */
@media (min-width:1081px){
  .content .grid.g-3{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
  .content .grid.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .content .grid.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .content .icard,.content .fach{min-width:0}
  .content .icard li,.content .icard h3{overflow-wrap:anywhere}
}


/* ==========================================================================
   Verlauf beginnt jetzt im Balken (03.09.2026)
   Wunsch: weiter ausblenden, aber nach links, nicht weiter nach rechts.
   Dafuer musste die Reihenfolge gedreht werden. Vorher lag eine orange
   Ueberlagerung rechts neben dem Balken; die konnte nur nach rechts wachsen.
   Jetzt laufen die Abschnittsflaechen unter dem Balken durch und der Balken
   liegt darueber. Sein Orange kann dadurch schon vor der Kante duenner
   werden und blendet in die Farbe des jeweiligen Abschnitts aus, auch in den
   dunklen Schlussabschnitt.
   ========================================================================== */
:root{ --fadeL:clamp(50px,5vw,80px); }

@media (min-width:1081px){
  /* 1. Die Flaechen reichen bis zum linken Bildschirmrand, liegen aber unten */
  .content .grund{
    margin-left:calc(-1 * (var(--rail-w) + var(--rail-gap)));
    padding-left:calc(var(--rail-w) + var(--rail-gap));
  }

  /* 2. Der Balken liegt oben und blendet ueber --fadeL nach links und
        ueber --fade nach rechts aus. Klicks laesst er durch. */
  .layout::before{
    width:calc(var(--rail-w) + var(--fade));
    z-index:2;pointer-events:none;
    background:linear-gradient(90deg,
      rgb(255 102 0 / 1)   0,
      rgb(255 102 0 / 1)   calc(var(--rail-w) - var(--fadeL)),
      rgb(255 102 0 / .93) calc(var(--rail-w) - var(--fadeL) * .6),
      rgb(255 102 0 / .74) calc(var(--rail-w) - var(--fadeL) * .22),
      rgb(255 102 0 / .46) var(--rail-w),
      rgb(255 102 0 / .18) calc(var(--rail-w) + var(--fade) * .45),
      rgb(255 102 0 / .05) calc(var(--rail-w) + var(--fade) * .78),
      rgb(255 102 0 / 0)   100%);
  }
  .layout::after{display:none}   /* die alte Ueberlagerung ist damit ueberfluessig */
  .rail{z-index:3}

  /* 3. Nichts aus dem Menue darf in den Verlauf hineinragen, sonst wirkt das
        weisse Feld der aktiven Seite angeschmutzt. */
  .rail nav a,.rail .sub a,.rail-kontakt .btn-weiss,.rail-fuss{
    max-width:calc(var(--rail-w) - var(--fadeL) - 1.9rem);
  }
  .rail-adresse,.rail-frage{max-width:calc(var(--rail-w) - var(--fadeL) - 1.2rem)}
}

/* Derselbe Verlauf im Kopf. Damit das Orange auch dort nach links duenner
   werden kann, liegt der Fotostreifen jetzt ueber die ganze Breite und der
   Logo-Block darueber. Vorher standen beide nebeneinander, dann gab es an
   der Kante nichts, in das man haette ausblenden koennen. */
@media (min-width:1081px){
  .nav#kopf .kopf-in{grid-template-columns:minmax(0,1fr)}
  .nav#kopf .kopf-band{grid-column:1;grid-row:1;width:100%}
  .nav#kopf .kopf-logo{
    grid-column:1;grid-row:1;z-index:2;
    width:calc(var(--rail-w) + var(--fade));
    background:linear-gradient(90deg,
      rgb(255 102 0 / 1)   0,
      rgb(255 102 0 / 1)   calc(var(--rail-w) - var(--fadeL)),
      rgb(255 102 0 / .93) calc(var(--rail-w) - var(--fadeL) * .6),
      rgb(255 102 0 / .74) calc(var(--rail-w) - var(--fadeL) * .22),
      rgb(255 102 0 / .46) var(--rail-w),
      rgb(255 102 0 / .18) calc(var(--rail-w) + var(--fade) * .45),
      rgb(255 102 0 / .05) calc(var(--rail-w) + var(--fade) * .78),
      rgb(255 102 0 / 0)   100%);
  }
  /* Das Logo bleibt im deckenden Teil stehen */
  .nav#kopf .kopf-logo .nav-logo{max-width:calc(var(--rail-w) - var(--fadeL) - 1.9rem)}
  .nav#kopf .kopf-in::after{display:none}
}

/* Nachtrag: die beiden Trennlinien in der Leiste liefen noch bis in den
   Verlauf hinein und standen dort frei in der Luft. Sie enden jetzt an
   derselben Kante wie die Menuepunkte. */
@media (min-width:1081px){
  .rail-kontakt,.rail-fuss{max-width:calc(var(--rail-w) - var(--fadeL) - 1.9rem)}
}

/* Die Unterpunkte sind eingerueckt, ihre eigene Hoechstbreite hat deshalb
   nicht gereicht: sie ragten trotzdem in den Verlauf. Jetzt begrenzt die
   Gruppe, nicht der einzelne Punkt. */
@media (min-width:1081px){
  .rail .sub{max-width:calc(var(--rail-w) - var(--fadeL) - 1.9rem)}
  .rail .sub a{max-width:none}
}

/* Auf dem Handy ist der Fotostreifen ausgeblendet, sein leerer Kasten stand
   aber weiter im Kopf und schob den Inhalt rund 72 px nach unten. Eine alte
   Regel weiter oben hatte das display:none der Handy-Abfrage ueberschrieben. */
@media (max-width:1080px){
  .nav#kopf .kopf-band{display:none}
}


/* ==========================================================================
   Verlauf zurueckgenommen, ein Hintergrund fuer alles (03.09.2026)
   Wunsch: kein Ausblenden mehr an der Balkenkante, und rechts vom Balken
   ueberall derselbe Hintergrund. Breite des Balkens, Logo und der ganze
   uebrige Aufbau bleiben wie sie sind.
   ========================================================================== */
@media (min-width:1081px){
  /* Balken wieder deckend, klare Kante, und wieder unter dem Inhalt */
  .layout::before{width:var(--rail-w);z-index:0;background:var(--brand)}
  .layout::after{display:none}
  .rail{z-index:1}

  /* Die Breitengrenzen waren nur noetig, damit nichts im Verlauf lag */
  .rail nav a,.rail .sub,.rail .sub a,.rail-kontakt,.rail-fuss,
  .rail-kontakt .btn-weiss,.rail-adresse,.rail-frage{max-width:none}

  /* Flaechen laufen wieder nur bis an die Balkenkante, nicht darunter */
  .content .grund{
    margin-left:calc(-1 * var(--rail-gap));
    padding-left:var(--rail-gap);
  }

  /* Kopf: Logo und Fotostreifen wieder nebeneinander statt uebereinander */
  .nav#kopf .kopf-in{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .nav#kopf .kopf-band{grid-column:2;grid-row:1}
  .nav#kopf .kopf-logo{
    grid-column:1;grid-row:1;width:auto;z-index:auto;background:var(--brand);
  }
  .nav#kopf .kopf-logo .nav-logo{max-width:none}
  .nav#kopf .kopf-in::after{display:none}
}

/* --- Ein einziger Hintergrund rechts vom Balken ------------------------- */
.content .grund,
.content .grund-hell,
.content .grund-sand,
.content .grund-tief{background:var(--paper)}

/* Der Schlussabschnitt steht damit auf hellem Grund und braucht wieder
   dunkle Schrift. Sonst waere er weiss auf weiss. */
.content .grund-tief,
.content .grund-tief p,
.content .grund-tief .lead,
.content .grund-tief address{color:var(--muted)}
.content .grund-tief h1,.content .grund-tief h2,
.content .grund-tief h3,.content .grund-tief h4,
.content .grund-tief b,.content .grund-tief strong{color:var(--ink-2)}
.content .grund-tief .eyebrow,
.content .grund-tief .eyebrow.is-light{color:var(--accent-d)}
.content .grund-tief a{color:var(--ink-2)}
.content .grund-tief .btn-glass{border:1.5px solid var(--line);background:none;color:var(--ink-2)}
.content .grund-tief .btn-glass:hover{background:var(--paper-2);color:var(--ink-2)}
.content .grund-tief .btn-primary{color:#fff}

.schluss .sblock b{color:var(--muted)}
.schluss .sblock small{color:var(--muted)}
.schluss .sblock .sgross{color:var(--ink-2)}
.schluss .sblock .sgross:hover{color:var(--brand-d)}
.schluss .sblock .slink{color:var(--ink-2)}
.schluss-fuss{border-top:1px solid var(--line-soft);color:var(--muted)}
.schluss-fuss a,.schluss-fuss .cookie-link,.schluss-fuss .sdve{color:var(--muted)}
.schluss-fuss a:hover,.schluss-fuss .cookie-link:hover{color:var(--ink-2)}
.schluss-fuss .sdve img{background:none;padding:0}


/* ==========================================================================
   Naht zwischen Logo-Block und Menuespalte (03.09.2026)
   Beide Flaechen sind dasselbe Orange und stossen exakt aneinander, die
   Kante liegt aber auf einem halben Bildschirmpunkt (y = 199,13). Der
   Browser zeichnet dort beide Kanten halbdurchsichtig, und der helle
   Seitengrund blitzt als feine Linie durch. Beim Scrollen wandert die Kante
   zwischen den Punkten, deshalb kam die Linie mal mehr, mal weniger.
   Loesung: die orange Spalte greift zwei Punkte in den Kopf hinein. Dort ist
   ohnehin dasselbe Orange, sichtbar ist nur, dass die Naht verschwindet.
   ========================================================================== */
@media (min-width:1081px){
  .layout::before{top:-2px}
  /* Derselbe Grund unter dem ganzen Kopf, damit auch dort nichts durchblitzt */
  .nav#kopf .kopf-logo{box-shadow:0 2px 0 0 var(--brand)}
}


/* ==========================================================================
   Alles auf eine linke Kante (03.09.2026)
   Der zweispaltige Abschnittskopf hat die Marke ganz nach links gestellt und
   die Ueberschrift eingerueckt. Bilder und Karten darunter standen aber
   wieder an der linken Kante, dadurch gab es zwei Fluchten. Jetzt steht
   alles auf derselben Linie: Marke, Ueberschrift, Vorspann und der Inhalt.
   ========================================================================== */
.content .sec-head{
  display:block;
  max-width:none;
}
.content .sec-head > .eyebrow{
  display:block;margin:0 0 .9rem;padding-top:0;
}
.content .sec-head > h2{margin:0}
.content .sec-head > .lead,
.content .sec-head > p{margin-top:1.1rem;max-width:60ch}

/* Der Schlussabschnitt hing an derselben Einrueckung */
.schluss .schluss-grid,
.schluss .schluss-tat,
.schluss .schluss-fuss{margin-left:0}

/* Der Schraegstrich vor der Marke war ein Spaltenzeichen. Jetzt, wo die Marke
   direkt ueber der Ueberschrift steht, ist er nur noch Beiwerk. */
.content .sec-head > .eyebrow::before{content:none}


/* ==========================================================================
   Vier Korrekturen (03.09.2026)
   1 Behandlungsgebiete als Schieber
   2 Schlussabschnitt enger
   3 weniger Schatten auf der Vorteilsliste
   4 Auftaktbild auf Texthoehe
   ========================================================================== */

/* --- 1. Behandlungsgebiete: Schieber statt Raster --------------------- */
.fbslider{margin-top:clamp(1.8rem,3.4vw,2.8rem)}
.fb-track{
  display:flex;align-items:stretch;
  gap:clamp(1.2rem,2.4vw,2rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:.3rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.fb-track::-webkit-scrollbar{display:none}
.fb-track:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--r-sm)}
.fb-track > .fach{
  flex:0 0 clamp(248px,29%,330px);
  scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;
}
.fb-track > .fach .fach-body{display:flex;flex-direction:column;flex:1}
/* Der Kicker laeuft mal ein-, mal zweizeilig. Ohne feste Hoehe stehen die
   Ueberschriften der Karten auf verschiedenen Linien. */
.fb-track > .fach .kicker{display:block;min-height:2.8em}
.fb-track > .fach .link-arrow{margin-top:auto}

.fb-nav{display:flex;gap:.6rem;margin-top:1.5rem}
.fb-nav button{
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1.5px solid var(--line);color:var(--ink-2);
  cursor:pointer;transition:background .2s,border-color .2s,opacity .2s;
}
.fb-nav button:hover:not(:disabled){background:var(--paper-2);border-color:var(--accent)}
.fb-nav button:disabled{opacity:.3;cursor:default}
.fb-nav svg{width:20px;height:20px}
.fbslider.ist-voll .fb-nav{display:none}

/* --- 2. Schlussabschnitt: enger zusammen ------------------------------- */
.schluss-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:920px;
  gap:clamp(1.4rem,2.4vw,2.4rem);
}
.schluss .sec-head .lead{max-width:52ch}
.sblock .sgross[href^="mailto"]{font-size:.95rem;line-height:1.4}

/* --- 3. Vorteilsliste ohne Schatten ------------------------------------
   Text- und Bildschatten stammten aus dem alten dunklen Deckblatt. Auf
   hellem Grund sehen sie nur unscharf aus. */
.hero-chips span{text-shadow:none}
.hero-chips svg{filter:none}

/* --- 4. Auftaktbild auf die Hoehe des Textes --------------------------- */
@media (min-width:901px){
  .auftakt{align-items:stretch}
  .auftakt-bild{display:flex;min-height:100%}
  .auftakt-bild img{height:100%;width:100%;object-fit:cover;min-height:340px}
}

/* Nachtrag zum Schieber: als Flex-Spur blieben die Karten auf ihrer
   Inhaltshoehe stehen, obwohl align-items:stretch gesetzt war. Nachgemessen:
   562, 504, 478, 504, 503 Punkte. Als Raster mit einer Zeile greift die
   Streckung zuverlaessig, dann sind alle Karten gleich hoch und die
   "Mehr erfahren" stehen auf einer Linie.
   Zusaetzlich bekommen Kicker und Ueberschrift die Hoehe von zwei Zeilen,
   damit ein- und zweizeilige Beschriftungen dieselbe Linie halten. */
.fb-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(248px,29%,330px);
  align-items:stretch;
}
.fb-track > .fach{flex:none}
.fb-track > .fach .kicker{line-height:1.5;min-height:3em}
.fb-track > .fach h3{min-height:2.32em}

@media (max-width:640px){
  .fb-track{grid-auto-columns:min(78vw,300px)}
  .fb-track > .fach .kicker{min-height:0}
  .fb-track > .fach h3{min-height:0}
}

/* ==========================================================================
   Kundenkorrekturen 07.09.2026 (39 handschriftliche Seiten, siehe PROJEKT_STATUS)
   ========================================================================== */

/* Nur eine Schrift in den Ueberschriften. Das kursive Serif-Wort fand die
   Kundin als "verschiedene Schriften" stoerend. */
.content h1 em,.content h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}

/* Auftakt: Knoepfe unter der Vorteilsliste */
.hero-tat{margin-top:1.7rem}

/* Flyer-Rueckseite auf der Startseite */
.katalog{max-width:66ch;display:grid;gap:1rem}
.katalog p{font-size:1.04rem;line-height:1.72;color:var(--text)}
.katalog b{color:var(--ink-2)}
.katalog .quelle{font-size:.84rem;color:var(--muted)}

/* Fachbereichskarten: Behandlungsarten farbig, jede in eigener Zeile,
   davor die Zeile "Das verordnet der Arzt". Bild hochkant, damit die
   Schulteruebung komplett zu sehen ist (Kundenwunsch). */
.fach-img{aspect-ratio:4/5}
.fach-vo-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:.1rem 0 .55rem}
.fach-list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:.4rem}
.fach-list li{position:relative;padding-left:1.25rem;font-size:.94rem;font-weight:600;line-height:1.4;color:var(--c-d)}
.fach-list li::before{content:'';position:absolute;left:0;top:.48em;width:9px;height:9px;border-radius:50%;background:var(--c)}
.fach-list-gross{margin-top:1.3rem}
.fach-list-gross li{font-weight:600;color:var(--ink-2)}

/* Ganzes Hochkantfoto auf der Handseite */
.split-media.is-ganz img{aspect-ratio:2/3;object-position:50% 40%}

/* Vier Verordnungswege als nummerierte Liste (nutzt .behandlungen) */
.vo-liste{margin-top:1.4rem}
.vo-liste li{padding:1.1rem 1.25rem}
.vo-liste b{font-size:1.04rem}
.vo-liste span{font-size:.92rem}

/* Praxisgeschichte: drei Stationen nebeneinander, ohne Durchstreichen */
.stationen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.5vw,2.2rem)}
.stationen figure{margin:0}
.stationen .r-img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--paper-2)}
.stationen .r-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.stationen figcaption{margin-top:.9rem;font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--muted)}
.stationen figcaption b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink-2);margin:.4rem 0 .2rem}
.stationen .r-jahr{display:inline-block;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.06em;
  background:var(--paper-2);color:var(--muted);border-radius:999px;padding:.22rem .7rem}
.stationen .is-neu .r-jahr{background:var(--accent-t);color:var(--accent-d)}
@media (max-width:860px){ .stationen{grid-template-columns:1fr} }

/* Jobs: nur noch zwei Spalten, "Zuerst gesucht" ist weg */
@media (min-width:941px){ .stelle-cols.is-zwei{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Menueleiste: zweite Telefonnummer (Berlin, weiterhin gueltig) kleiner */
.rail-tel.is-alt{font-size:.86rem;font-weight:500;opacity:.85;margin-top:.2rem}

/* Unterpunkte der Fachbereiche nur zeigen, wenn man dort ist ("nicht vorn sichtbar") */
.rail .sub{display:none}
.rail nav a.is-active + .sub{display:flex}
.mobile-menu .mm-sub{display:none}
.mobile-menu nav a.is-active + .mm-sub{display:flex}

/* Seitenkopf der Fachbereichsseiten mit Marke darueber */
.seitenkopf .eyebrow{margin-bottom:.7rem}

/* Bildunterschrift unter einem Splitbild */
.split-media figcaption.bildtext{padding:.6rem .2rem 0;font-size:.85rem;color:var(--muted);line-height:1.45}
figure.split-media{margin:0}

/* ==========================================================================
   Rueckmeldung Alessio 08.09.2026
   ========================================================================== */

/* 1. Schieber laeuft rechts bis an die Bildschirmkante, wie die Gruende */
@media (min-width:1081px){
  .fbslider{margin-right:calc(-1 * var(--randR))}
  .fb-track{padding-right:var(--randR);scroll-padding-right:var(--randR)}
}

/* 2. Schieber auch fuer Infokarten (Verordnungen) */
.fb-track > .icard{flex:none;scroll-snap-align:start;min-width:0;height:auto}
.fb-track > .icard .bul{margin-top:1.2rem}

/* 3. Abschnittskoepfe ueberall gleich: Marke, Ueberschrift, Vorspann
   untereinander und auf voller Breite. Die enge Spalte und die
   Zweispaltigkeit mit Schraegstrich sind damit weg. */
.content .sec-head{display:block;max-width:none}
.content .sec-head > .eyebrow{padding-top:0;margin:0 0 .7rem}
.content .sec-head > .eyebrow::before{content:none}
.content .sec-head > h2{margin:0}
.content .sec-head > .lead,.content .sec-head > p{margin-top:1rem;max-width:none}
.seitenkopf{max-width:none}
.content .lead,.content .sec-head p,.seitenkopf .lead{max-width:none}
.content p{max-width:none}
.katalog{max-width:none}
.seitenkopf .eyebrow{margin-bottom:.7rem}

/* --- Kopfband auch auf dem Handy (Wunsch der Kundin: Bilder oben im Kopf) --
   Das Band steht unter der Logozeile. Damit es nicht dauerhaft ein Drittel
   des Bildschirms belegt, klebt der Kopf auf dem Handy nicht mehr; die
   Bedienleiste unten bleibt immer erreichbar. */
@media (max-width:1080px){
  .nav#kopf{position:static}
  .nav#kopf .kopf-in{grid-template-rows:var(--nav-h) auto;height:auto;align-items:stretch}
  .nav#kopf .kopf-logo{height:var(--nav-h)}
  .nav#kopf .kopf-band{display:flex;min-width:0}
  .nav#kopf .strip{display:block;width:100%}
  .nav#kopf .kopf-band .strip{--kachel:74px;height:98px}
  .nav#kopf .strip .strip-unit{height:98px}
  .nav#kopf .strip .strip-caps span{font-size:.6rem;padding:1.1rem .3rem .3rem;line-height:1.2}
  .nav#kopf .strip .strip-hinweis{font-size:.58rem;bottom:.3rem;padding:.2rem .6rem}
}
/* Nachbesserung Handyband: randlos, feste Bandhoehe, keine Naht zwischen den Einheiten */
@media (max-width:1080px){
  .nav#kopf .kopf-in{grid-template-rows:var(--nav-h) 96px}
  .nav#kopf .kopf-band{margin-inline:-1.3rem;height:96px}
  .nav#kopf .kopf-band .strip{--kachel:72px;height:96px}
  .nav#kopf .strip .strip-unit{height:96px;width:calc(var(--kachel) * 7);margin-right:-1px;background:var(--ink-2)}
  .nav#kopf .strip .strip-unit > img{width:calc(100% + 1px)}
}

/* ==========================================================================
   Linke Spalte komplett fest (08.09.2026, Wunsch Alessio)
   Logo, Menue und Terminblock stehen immer, egal wie weit man scrollt.
   Das Logo wandert dafuer in die Leiste, der Logo-Block im Kopf bleibt nur
   auf dem Handy. Das Umzugsband beginnt rechts neben der Spalte, damit die
   feste Spalte es nicht ueberdeckt.
   ========================================================================== */
.rail-logo{display:none}
@media (min-width:1081px){
  .nav#kopf .kopf-logo{visibility:hidden}
  .rail{
    position:fixed;top:0;bottom:0;left:var(--randR);width:var(--rail-w);
    height:auto;min-height:0;max-height:none;border-radius:0;
    padding-top:1.1rem;z-index:40;
  }
  .rail-logo{display:block;padding:.4rem .8rem 1.4rem 1.2rem;line-height:0}
  .rail-logo img{width:100%;height:auto;display:block}
  .umzug{margin-left:calc(var(--randR) + var(--rail-w))}
  .umzug-in{justify-content:flex-start;padding-left:var(--rail-gap)}
}
@media (min-width:1081px){
  /* Die Leiste ist aus dem Raster genommen, der Inhalt bleibt in Spalte 2 */
  .layout > .content{grid-column:2}
}
@media (min-width:1081px){
  /* Der orange Balken kommt aus .layout::before und muss ebenfalls stehen.
     align-self:start liess die feste Leiste auf Inhaltshoehe schrumpfen,
     deshalb feste Hoehe ueber den ganzen Bildschirm. */
  .layout::before{position:fixed;top:0;bottom:0;height:auto;left:var(--randR);width:var(--rail-w);z-index:1}
  .rail{align-self:stretch;height:100dvh;z-index:40}
}

/* Nach dem Seitenwechsel setzt nav.js den Fokus auf die Ueberschrift. Safari
   zeichnet dann einen orangen Rahmen um die H1, das war der "Kasten" der
   Kundin. Der Fokus bleibt (Vorlesesoftware), der Rahmen nicht. */
h1[tabindex]:focus,h1:focus{outline:none}

/* Position der festen Spalte ohne verschachtelte Rechenformel, Safari-sicher */
@media (min-width:1081px){
  .rail,.layout::before{left:max(1.3rem, calc((100vw - 1420px) / 2))}
  .umzug{margin-left:calc(max(1.3rem, calc((100vw - 1420px) / 2)) + var(--rail-w))}
}

/* ==========================================================================
   Rueckmeldung Alessio 08.09.2026, Runde 3
   ========================================================================== */
@media (min-width:1081px){
  /* 1. Balken beginnt am Fensterrand und reicht bis zur Kante des Fotobands.
     Vorher stand links ein 21-px-Streifen Seitenhintergrund, und die Flaechen
     der Abschnitte ragten unter den letzten 21 px des Balkens hervor. */
  .layout::before{
    left:0;width:calc(var(--rail-w) + max(1.3rem, calc((100vw - 1420px) / 2)));z-index:5;
  }
  .rail{
    left:0;width:calc(var(--rail-w) + max(1.3rem, calc((100vw - 1420px) / 2)));
    box-sizing:border-box;
    padding-left:calc(max(1.3rem, calc((100vw - 1420px) / 2)) + .9rem);
    padding-right:1rem;
  }
  .rail nav a,.rail-kontakt .btn-weiss{max-width:100%}
  /* 2. Schieber laufen links bis an den Balken heran, nicht erst ab dem Text */
  .fbslider{margin-left:calc(-1 * var(--rail-gap))}
  .fb-track{padding-left:var(--rail-gap);scroll-padding-left:var(--rail-gap)}
}

/* 3. Rahmenknoepfe: orange Linie und orange Schrift, nie weiss auf weiss */
.btn-ghost,.btn-glass,.content .btn-glass{
  background:transparent;color:var(--accent-d);
  box-shadow:inset 0 0 0 2px var(--accent);border:0;backdrop-filter:none;
}
.btn-ghost:hover,.btn-glass:hover,.content .btn-glass:hover{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 2px var(--accent)}

/* 4. Team: Karten gleich hoch, Zitat lesbar und auf voller Breite */
.team-grid{align-items:stretch}
.team-grid .person{height:100%;display:flex;flex-direction:column}
.team-grid .person-body{flex:1}
.content .quote{max-width:none;text-align:left}
.content .quote p{color:var(--ink-2)}
.content .quote cite{color:var(--muted)}
.rezeption{margin-top:clamp(1.8rem,3vw,2.6rem);max-width:none}
.rezeption h3{font-size:1.3rem;margin-bottom:.3rem}
.rezeption .role{color:var(--accent-d);font-weight:700;margin-bottom:.8rem}
.rezeption p{color:var(--text);line-height:1.65}
.rezeption a{color:var(--accent-d);font-weight:700}

/* ==========================================================================
   Rueckmeldung Alessio 08.09.2026, Runde 4
   ========================================================================== */
/* 1. Schieber scrollt nur seitlich. Vorher war er auch senkrecht ein
   Scrollbereich und fing das Mausrad ab, die Seite blieb stehen. */
.fb-track{overflow-y:hidden;padding-top:.6rem;margin-top:-.6rem}

/* 2. "Mehr erfahren" auf den Karten als Rahmenknopf in der Bereichsfarbe,
   einheitlich mit den anderen Knoepfen */
.fach-body .link-arrow{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;
  padding:.62rem 1.15rem;border-radius:999px;background:transparent;
  color:var(--c-d);box-shadow:inset 0 0 0 2px var(--c);text-decoration:none;
  border-bottom:0;font-size:.92rem;font-weight:700;
}
.fach-body .link-arrow::after{content:none}
.fach:hover .fach-body .link-arrow{background:var(--c);color:#fff;filter:none;transform:none}

/* 3. Umzugshinweis steht in der linken Spalte, das Band oben faellt am Desktop weg */
.rail-umzug{display:none}
@media (min-width:1081px){
  .umzug{display:none}
  .rail-umzug{
    display:block;margin:1.1rem 0 0;padding:.85rem .95rem;border-radius:12px;
    background:rgba(255,255,255,.14);color:#fff;font-size:.84rem;line-height:1.5;
  }
  .rail-umzug b{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#ffd9c9;margin-bottom:.25rem}
  .rail-umzug a{display:inline-block;margin-top:.3rem;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
  /* 4. Gleiche Innenabstaende links und rechts im Balken */
  .rail{
    padding-left:calc(max(1.3rem, calc((100vw - 1420px) / 2)) + 1rem);
    padding-right:calc(max(1.3rem, calc((100vw - 1420px) / 2)) + 1rem);
  }
  .rail-logo{padding-left:.8rem;padding-right:.8rem}
}
/* Die Pfeile bleiben auf der Textkante, nur die Karten laufen unter den Balken */
@media (min-width:1081px){ .fb-nav{margin-left:var(--rail-gap)} }

/* Balken schmaler, Inhalt darin weiter links (Alessio, 08.09. abends).
   --shell groesser, damit der Aussenrand auf normalen Bildschirmen bei 1.3rem
   bleibt und der Balken nicht mit dem Bildschirm mitwaechst. */
:root{ --shell:1800px; --rail-w:272px; }
@media (min-width:1081px){
  .rail{
    padding-left:calc(max(1.3rem, calc((100vw - 1800px) / 2)) + .35rem);
    padding-right:calc(max(1.3rem, calc((100vw - 1800px) / 2)) + .35rem);
  }
  .rail,.layout::before{left:max(1.3rem, calc((100vw - 1800px) / 2))}
  .rail,.layout::before{left:0;width:calc(var(--rail-w) + max(1.3rem, calc((100vw - 1800px) / 2)))}
  .umzug{margin-left:calc(max(1.3rem, calc((100vw - 1800px) / 2)) + var(--rail-w))}
  .rail-logo{padding:.3rem .6rem 1.1rem .7rem}
  .rail nav a{padding:.48rem .7rem;font-size:.9rem}
  .rail-umzug{padding:.75rem .8rem;font-size:.8rem}
}

/* ==========================================================================
   Handy-Rueckmeldung Alessio 08.09.2026
   ========================================================================== */
@media (max-width:1080px){
  /* 1. Kopf klebt wieder. Das Fotoband liegt als erste Zeile im Kopf und
     schiebt sich beim Scrollen weg, die Logozeile bleibt oben stehen. */
  .nav#kopf{position:sticky;top:-96px;z-index:50}
  .nav#kopf .kopf-in{
    grid-template-rows:96px var(--nav-h);height:auto;
    width:100%;max-width:none;margin:0;padding:0 .9rem;box-sizing:border-box;
  }
  .nav#kopf .kopf-band{grid-row:1;margin:0 -.9rem;height:96px}
  .nav#kopf .kopf-logo{grid-row:2;height:var(--nav-h);padding:0}
  .nav#kopf .burger{margin-right:-.6rem}
  /* kein Hinweis-Etikett, keine Bildunterschriften auf dem Handy */
  .nav#kopf .strip .strip-hinweis,.nav#kopf .strip .strip-caps{display:none}
  /* Menue offen: Logozeile mit dem X oben, Band ausgeblendet */
  body.menu-open .nav#kopf{position:fixed;top:0;left:0;right:0;z-index:60}
  body.menu-open .nav#kopf .kopf-in{grid-template-rows:var(--nav-h)}
  body.menu-open .nav#kopf .kopf-band{display:none}
  /* 2. Umzugshinweis: eine kleine Zeile */
  .umzug .u-lang{display:none}
  .umzug .u-kurz{display:inline}
  .umzug-in{flex-wrap:nowrap;gap:.6rem;padding:.32rem .9rem;font-size:.76rem;white-space:nowrap;overflow:hidden}
  .umzug-in a{font-size:.76rem}
  /* 3. Schieber laufen bis an beide Bildschirmkanten */
  .fbslider{margin-inline:-1.3rem}
  .fb-track{padding-inline:1.3rem;scroll-padding-left:1.3rem}
  .fb-nav{margin-left:0}
}
/* 4. Knoepfe nebeneinander in einer Zeile */
@media (max-width:640px){
  .btn-row{flex-wrap:nowrap;gap:.55rem}
  .btn-row .btn{flex:1 1 0;min-width:0;justify-content:center;padding:.8rem .5rem;font-size:.9rem;white-space:nowrap}
}
@media (max-width:1080px){
  body.menu-open .nav#kopf .kopf-logo{grid-row:1}
  .mobile-menu{padding-top:calc(var(--nav-h) + 1.4rem)}
}