/* Physiotherapie Isabell Schirmer — Kabelsketal
   ------------------------------------------------------------------
   Thema: Drei Türen, ein Haus. Die Praxis macht dreierlei, das sich für
   den Besucher sehr verschieden anfühlt: verordnete Therapie, Training
   und Wellness. Wer mit einer Verordnung kommt, darf nicht in der
   Massageliste landen, und wer sich etwas Gutes tun will, nicht im
   Heilmittelkatalog. Deshalb ist die Trennung der drei Bereiche die
   Struktur dieser Seite und zugleich ihre Signatur.

   Farbe: Die Praxis hat keine erkennbare Hausfarbe — das Gebäude ist
   weiß, das Schild grau. Gewählt wurde deshalb ein ruhiges Petrol.
   Es ist NICHT aus dem Material abgeleitet, und das steht hier so, damit
   niemand später glaubt, es wäre belegt. Alle Werte nachgerechnet:
     #6ed0c1 auf #0d1416 = 10,2:1   Akzenttext auf dunkel
     #0d1416 auf #6ed0c1 = 10,2:1   gefüllte Knöpfe, dunkle Schrift
     #1a615a auf #f1f3f1 =  6,5:1   Akzenttext auf hellem Band

   Ton: ruhig, ohne Heilsversprechen. Keine Wirkaussagen zu einzelnen
   Anwendungen — bei Heilmitteln ist das auch werberechtlich heikel.

   Mobile first (Hausregel 3 vom 04.08.2026): Grundregeln beschreiben die
   schmale Ansicht, jede Medienabfrage ist ein `min-width`.
*/

@font-face{font-family:FaustinaLokal;src:url("schrift/faustina-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:SansLokal;src:url("schrift/public-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:SansLokal;src:url("schrift/public-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:SansLokal;src:url("schrift/public-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --tief:#0d1416;
  --tief-2:#141d20;
  --kante:rgba(228,236,234,.15);
  --text:#e4ecea;
  --gedaempft:rgba(228,236,234,.74);
  --petrol:#6ed0c1;
  --petrol-hell:#8fdcd0;
  --petrol-tief:#1a615a;
  --hell:#f1f3f1;
  --hell-2:#dfe4e1;
  --auf-hell:#101a1b;
  --auf-hell-2:#4c5654;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tief);color:var(--text);
  font-family:SansLokal,system-ui,Arial,sans-serif;line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3{font-family:FaustinaLokal,Georgia,serif;font-weight:600;
  line-height:1.08;margin:0;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,9.5vw,3.1rem)}
h2{font-size:clamp(1.8rem,6.8vw,2.4rem)}
h3{font-size:1.14rem;line-height:1.24}
p{margin:0;color:var(--gedaempft)}
h1+p,h2+p,h3+p{margin-top:1rem}

.marke{display:inline-block;font-family:SansLokal;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--petrol);margin-bottom:.9rem}
.hell .marke{color:var(--petrol-tief)}
.hero .marke{color:var(--petrol-hell)}

.sprung{position:absolute;left:-9999px;top:.5rem;background:var(--petrol);
  color:var(--tief);padding:.7rem 1rem;z-index:40;border-radius:6px;font-weight:600}
.sprung:focus{left:.75rem}

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:30;background:rgba(13,20,22,.95);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--kante)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;row-gap:.15rem;column-gap:.5rem;
  max-width:1180px;margin:auto;padding:.2rem .85rem .28rem}
.wortmarke{order:1;flex:0 1 auto;min-width:0;font-family:FaustinaLokal,Georgia,serif;
  font-weight:600;font-size:1rem;line-height:1.1;letter-spacing:-.01em;
  /* Einzeilig war der Verweis nur 15 px hoch und damit unter der
     Mindest-Tippflaeche von 24 px. */
  display:flex;flex-direction:column;justify-content:center;min-height:32px}
.wortmarke em{display:none;font-style:normal;font-family:SansLokal;font-weight:400;
  font-size:.66rem;color:var(--gedaempft);letter-spacing:.05em}
/* „Physiotherapie Isabell Schirmer" braucht auf 320 px drei Zeilen; damit lag
   der Kopf bei 106 px statt der erlaubten 80. Der Ortszusatz erscheint erst,
   wenn die Leiste wieder einreihig ist. */
@media (max-width:479.98px){ .wortmarke{font-size:.88rem} }
.wege{order:3;flex:1 0 100%;display:flex;gap:.1rem;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.wege::-webkit-scrollbar{display:none}
.wege a{flex:0 0 auto;font-size:.82rem;color:var(--gedaempft);
  padding:.25rem .5rem;border-radius:6px;white-space:nowrap}
.wege a[aria-current="page"],.wege a:hover{color:var(--tief);background:var(--petrol)}
.ruf{order:2;flex:0 0 auto}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.55rem 1.1rem;border-radius:6px;border:1px solid var(--petrol);
  background:var(--petrol);color:var(--tief);font-family:SansLokal;
  font-weight:600;font-size:.9rem;cursor:pointer}
.knopf:hover{background:var(--petrol-hell);border-color:var(--petrol-hell)}
.kopf .knopf{min-height:34px;padding:.25rem .8rem;font-size:.84rem}
.knopf--leer{background:transparent;color:var(--text);border-color:var(--kante)}
.knopf--leer:hover{background:rgba(228,236,234,.09);border-color:var(--text)}
.hell .knopf--leer{color:var(--auf-hell);border-color:#c3cac6}
.hell .knopf--leer:hover{background:rgba(16,26,27,.07);border-color:var(--auf-hell)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;display:grid;align-items:end;min-height:70vh;
  overflow:hidden;border-bottom:1px solid var(--kante)}
.hero__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(13,20,22,.97) 8%,rgba(13,20,22,.6) 56%,rgba(13,20,22,.7)),
             linear-gradient(90deg,rgba(13,20,22,.9) 6%,rgba(13,20,22,.5) 55%,transparent 84%)}
/* Kein `margin:auto`: automatische Raender an einem Rasterelement schlagen
   `align-items:end` und setzen den Text in die Bildmitte. */
.hero__innen{position:relative;z-index:1;width:100%;max-width:1180px;
  margin-inline:auto;padding:5rem 1rem 2.6rem}
.hero p{font-size:1.06rem;max-width:38rem}
.hero__knoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.8rem}
.hero__knoepfe .knopf{flex:1 1 14rem}
.hero.klein{min-height:42vh}
.hero.klein .hero__innen{padding-top:4rem}

.band{padding:3.4rem 1rem}
.innen{max-width:1180px;margin:auto}
.hell{background:var(--hell);color:var(--auf-hell);border-block:1px solid var(--hell-2)}
.hell h1,.hell h2,.hell h3{color:var(--auf-hell)}
.hell p{color:var(--auf-hell-2)}

.zwei{display:grid;gap:1.6rem}
.zwei p{font-size:1.05rem}

/* ── Bereichskarten: die drei Türen ───────────────────────────────── */
.bereiche{display:grid;gap:1px;background:var(--kante);border:1px solid var(--kante);
  border-radius:6px;overflow:hidden;margin-top:2.2rem}
.hell .bereiche{background:var(--hell-2);border-color:var(--hell-2)}
.bereich{background:var(--tief-2);padding:1.5rem 1.3rem 1.7rem;display:flex;flex-direction:column}
.hell .bereich{background:var(--hell)}
.bereich__kopf{display:flex;align-items:baseline;gap:.65rem;
  font-size:1.14rem;line-height:1.24;min-height:2.48em}
.bereich__nr{font-family:FaustinaLokal,Georgia,serif;font-weight:600;
  color:var(--petrol);font-size:inherit;line-height:inherit}
.hell .bereich__nr{color:var(--petrol-tief)}
.bereich p{margin-top:.55rem;font-size:.97rem}
.bereich a{margin-top:1.1rem;align-self:flex-start;color:var(--petrol);
  font-weight:600;text-decoration:underline;text-underline-offset:4px;
  display:inline-block;min-height:32px;padding-block:.35rem}
.hell .bereich a{color:var(--petrol-tief)}

/* ── Anwendungsliste ──────────────────────────────────────────────── */
.liste{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--kante)}
.liste div{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:.15rem 1rem;padding:.85rem 0;border-bottom:1px solid var(--kante)}
.liste b{font-family:SansLokal;font-weight:600;font-size:1rem}
.liste span{color:var(--gedaempft);font-size:.88rem}
.hell .liste,.hell .liste div{border-color:var(--hell-2)}
.hell .liste span{color:var(--auf-hell-2)}

/* ── Mitmach-Station ──────────────────────────────────────────────── */
.station{border:1px solid var(--kante);background:var(--tief-2);
  padding:1.3rem 1.15rem;margin-top:1.8rem;border-radius:6px}
.hell .station{border-color:var(--hell-2);background:#fff}
.wahl{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.wahl button{appearance:none;font:inherit;font-family:SansLokal;font-weight:600;
  font-size:.88rem;min-height:44px;padding:.5rem 1rem;border-radius:6px;cursor:pointer;
  border:1px solid var(--kante);background:transparent;color:var(--text)}
.wahl button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--tief)}
.hell .wahl button{border-color:#c3cac6;color:var(--auf-hell)}
.hell .wahl button[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:var(--tief)}
.antwort{border-left:3px solid var(--petrol);padding:.2rem 0 .2rem 1rem}
.antwort b{display:block;font-family:FaustinaLokal,Georgia,serif;font-weight:600;
  font-size:1.1rem;color:var(--text);margin-bottom:.35rem}
.hell .antwort b{color:var(--auf-hell)}
.antwort a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:26px;padding-block:3px}
.hell .antwort a{color:var(--petrol-tief)}

/* ── Bildstreifen ─────────────────────────────────────────────────── */
.streifen{position:relative;min-height:34vh;overflow:hidden;border-block:1px solid var(--kante)}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.streifen::after{content:"";position:absolute;inset:0;background:rgba(13,20,22,.55)}

/* ── Kontakt ──────────────────────────────────────────────────────── */
.formular{display:grid;gap:.9rem;margin-top:1.6rem}
label{display:grid;gap:.3rem;font-family:SansLokal;font-weight:600;font-size:.88rem}
input,textarea,select{width:100%;font:inherit;padding:.75rem;border-radius:6px;
  border:1px solid var(--kante);background:rgba(228,236,234,.06);color:var(--text)}
textarea{min-height:7.5rem;resize:vertical}
.daten{display:grid;gap:0;margin-top:1.4rem;border-top:1px solid var(--kante)}
.daten p{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:.2rem 1.2rem;padding:.15rem 0;border-bottom:1px solid var(--kante)}
.daten b,.daten span,.daten a{display:flex;align-items:center;min-height:44px;margin:0}
.daten a{padding-block:0}
.daten b{font-family:SansLokal;font-weight:600;font-size:.98rem;color:var(--text)}
.daten span{color:var(--gedaempft);font-size:.9rem}
.hell .daten,.hell .daten p{border-color:var(--hell-2)}
.hell .daten span{color:var(--auf-hell-2)}
.daten a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.zeiten{display:grid;gap:0;margin-top:1.6rem;border-top:1px solid var(--kante)}
.zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.15rem 1rem;padding:.8rem 0;border-bottom:1px solid var(--kante)}
.zeiten b{font-family:SansLokal;font-weight:600;font-size:.98rem}
.zeiten span{color:var(--gedaempft);font-size:.9rem}
/* Die Zeitentabelle steht auf der Startseite in einem hellen Band. Ohne diese
   Regel erbt sie die helle Schrift der dunklen Seite und ist unlesbar (1,06:1). */
.hell .zeiten,.hell .zeiten div{border-color:var(--hell-2)}
.hell .zeiten span{color:var(--auf-hell-2)}

/* ── Rechtstexte ──────────────────────────────────────────────────── */
.rechtstext{max-width:44rem}
.rechtstext h1{font-size:clamp(2rem,8vw,2.6rem);margin-bottom:.4rem}
.rechtstext h2{font-size:1.16rem;margin:2.2rem 0 .5rem}
.rechtstext p{margin-bottom:.85rem}
.rechtstext a{text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:26px;padding-block:3px}
.hinweis{margin-top:2.6rem;border:1px solid var(--petrol);border-left-width:4px;
  background:rgba(110,208,193,.09);padding:1.15rem;border-radius:6px}
.hinweis strong{display:block;font-family:FaustinaLokal,Georgia,serif;font-weight:600;
  color:var(--petrol);margin-bottom:.5rem}
.hinweis p:last-child{margin-bottom:0}

/* ── Fuss ─────────────────────────────────────────────────────────── */
.fuss{background:#080f10;border-top:1px solid var(--kante);padding:2.6rem 1rem}
.fuss__innen{max-width:1180px;margin:auto;display:grid;gap:1.6rem}
.fuss b{font-family:FaustinaLokal,Georgia,serif;font-weight:600;font-size:1.05rem}
.fuss p{font-size:.92rem}
.fuss a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;padding-block:.55rem}
.fein{font-size:.82rem;color:rgba(228,236,234,.6)}
.fein a{min-height:32px;padding-block:.3rem;font-weight:600}

:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}

/* ══ ab 620 px ═══════════════════════════════════════════════════ */
@media (min-width:620px){
  .bereiche{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fuss__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .formular .weit{grid-column:1/-1}
  .hero__knoepfe .knopf{flex:0 0 auto}
}

/* ══ ab 760 px: Kopf wieder einreihig ════════════════════════════ */
@media (min-width:760px){
  .kopf__innen{flex-wrap:nowrap;padding:.45rem 1.4rem;column-gap:1.2rem}
  .wortmarke{order:0;font-size:1.14rem}
  .wortmarke em{display:block}
  .wege{order:0;flex:1 1 auto;justify-content:center;overflow:visible}
  .wege a{font-size:.88rem;padding:.45rem .7rem}
  .ruf{order:0}
  .kopf .knopf{min-height:42px;padding:.5rem 1rem;font-size:.88rem}
  .band{padding:5rem 1.4rem}
  .hero__innen{padding:7rem 1.4rem 4rem}
  .fuss{padding:3.4rem 1.4rem}
  .bereiche{grid-template-columns:repeat(3,1fr)}
}

/* ══ ab 1000 px ══════════════════════════════════════════════════ */
@media (min-width:1000px){
  h1{font-size:clamp(3rem,5.2vw,4.4rem)}
  h2{font-size:clamp(2.1rem,3.3vw,2.9rem)}
  .hero{min-height:78vh}
  .hero.klein{min-height:46vh}
  /* 05.08.2026: Ueberschrift und Text stehen UNTEREINANDER. Der Beitext
     neben der Ueberschrift zerreisst den Lesefluss — die Anweisung dazu
     steht in ANWEISUNG-NEU, Hausregel 15. */
  .zwei{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .zwei > div > p{max-width:70ch}
  /* Zwei eigenstaendige Bloecke duerfen nebeneinander stehen (Kontaktdaten
     und Formular). Das ist kein Beitext zur Ueberschrift, sondern ein Paar. */
  .zwei.gespann{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .band{padding:6rem 2rem}
  .hero__innen{padding:8rem 2rem 5rem}
  .streifen{min-height:42vh}
}

/* Lange deutsche Woerter (Krankengymnastik, Fussreflexzonen) liefen auf
   320 px aus der Seite. Getrennt wird nur hier unten. */
@media (max-width:719.98px){
  h1,h2,h3,p,.liste b{hyphens:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}