/* ==========================================================================
   SprachDuo — Praxis für Logopädie
   --------------------------------------------------------------------------
   Gestaltungsidee: Die Praxis ist in allem ein Duo. Zwei Therapeutinnen,
   zwei Markenfarben, Yin und Yang, "Im Einklang miteinander".
   Deshalb trägt die Seite eine sichtbare Naht: die S-Kurve aus dem Logo,
   senkrecht abgewickelt. Inhalte sitzen abwechselnd links und rechts davon,
   die Knotenpunkte sind Yin-Yang-Punkte — jeder in der Farbe der jeweils
   anderen Seite.

   Lesbarkeit hat Vorrang: Ein großer Teil der Patientinnen und Patienten
   ist nach Schlaganfall, mit Parkinson oder MS hier. Grundschrift 18px,
   Zeilenabstand 1.75, alle Farbpaare mindestens WCAG AA.
   ========================================================================== */

/* ==========================================================================
   Schriften — lokal eingebunden, keine Verbindung zu Google.
   Dateien liegen in website/fonts/ . Siehe schriften-einbauen.md
   ========================================================================== */
@font-face{
  font-family:'Petrona';
  font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/petrona-300.woff2') format('woff2');
}
@font-face{
  font-family:'Petrona';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/petrona-400.woff2') format('woff2');
}
@font-face{
  font-family:'Petrona';
  font-style:italic; font-weight:300; font-display:swap;
  src:url('fonts/petrona-300italic.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/hanken-400.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/hanken-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/hanken-700.woff2') format('woff2');
}

:root{
  /* Aus dem Logo gemessen */
  --petrol:#12808A;        /* Markenton: Flächen, Ränder, Dekor */
  --petrol-text:#107079;   /* dieselbe Farbe, für Text abgedunkelt (AA) */
  --petrol-deep:#0C3B41;
  --lilac:#C9A8D7;
  --lilac-deep:#7A4E95;

  /* Kühles Papier statt warmem Creme — das Logo ist kühl */
  --porcelain:#F7FAFA;
  --porcelain-deep:#EBF3F3;
  --white:#FFFFFF;

  --slate:#22383C;
  --slate-soft:#4F6569;
  --hairline:#D8E4E4;
  --hairline-soft:#E8F0F0;

  /* Auf dunklem Petrol */
  --on-deep:#D3E4E5;
  --on-deep-soft:#9FBEC1;

  --step:8px;
  --gutter:clamp(20px, 5vw, 48px);
  --measure:64ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--porcelain);
  color:var(--slate);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  margin:0;
  font-family:'Petrona',Georgia,serif;
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--petrol-deep);
}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}

.shell{
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell-tight{max-width:760px;}

/* ---------- Kleinschrift / Marker ------------------------------------- */
.tag{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--lilac-deep);
  line-height:1.5;
}
.tag-quiet{color:var(--slate-soft);}
.tag-bright{color:var(--lilac);}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(247,250,250,.9);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.masthead[data-lifted="true"]{border-bottom-color:var(--hairline);}

.masthead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:14px;
}

.crest{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
}
.crest-mark{width:40px;height:auto;}
.crest-word{height:22px;width:auto;}
.crest-sub{
  display:block;
  margin-top:5px;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--slate-soft);
}

.compass{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);}
.compass a{
  position:relative;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  color:var(--slate);
  padding-block:6px;
  transition:color .2s ease;
}
.compass a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--lilac);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.compass a:hover{color:var(--petrol-text);}
.compass a:hover::after{transform:scaleX(1);}
.compass a[aria-current="page"]{color:var(--petrol-deep);font-weight:600;}
.compass a[aria-current="page"]::after{transform:scaleX(1);background:var(--petrol);}

.latch{
  display:none;
  width:40px;height:40px;
  padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
}
.latch i{
  display:block;height:2px;border-radius:2px;background:var(--petrol-deep);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s ease,width .3s ease;
}
.latch i:nth-child(1){width:24px;}
.latch i:nth-child(2){width:17px;}
.latch i:nth-child(3){width:24px;}
.latch[aria-expanded="true"] i:nth-child(1){width:24px;transform:translateY(8px) rotate(45deg);}
.latch[aria-expanded="true"] i:nth-child(2){opacity:0;}
.latch[aria-expanded="true"] i:nth-child(3){width:24px;transform:translateY(-8px) rotate(-45deg);}

.drawer{
  overflow:hidden;
  max-height:0;
  transition:max-height .4s cubic-bezier(.2,.7,.3,1);
  border-top:1px solid transparent;
}
.drawer[data-open="true"]{max-height:340px;border-top-color:var(--hairline);}
.drawer a{
  display:block;
  padding:15px var(--gutter);
  font-size:17px;font-weight:600;
  text-decoration:none;color:var(--slate);
  border-bottom:1px solid var(--hairline-soft);
}
.drawer a:last-child{border-bottom:0;}
.drawer a[aria-current="page"]{color:var(--petrol-text);font-weight:600;}

@media (max-width:880px){
  .compass{display:none;}
  .latch{display:flex;}
}
@media (min-width:881px){
  .drawer{display:none;}
}

/* ==========================================================================
   Auftakt — die Kopfzeile spricht mit zwei Stimmen
   ========================================================================== */
.overture{padding-block:clamp(52px,9vw,104px) clamp(44px,6vw,72px);}

.duet{
  font-size:clamp(38px,8.2vw,86px);
  font-weight:300;
  line-height:1.02;
  margin-block:26px 0;
}
.duet span{display:block;}
.voice-one{color:var(--petrol);}
.voice-two{
  color:var(--lilac-deep);
  font-style:italic;
  margin-left:clamp(24px,9vw,150px);
}
.voice-join{
  color:var(--petrol-deep);
  margin-left:clamp(12px,4.5vw,74px);
}

.overture-note{
  margin-top:clamp(30px,4vw,44px);
  padding-top:26px;
  border-top:1px solid var(--hairline);
  max-width:var(--measure);
  font-size:19px;
  color:var(--slate);
}

.hail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 22px;
  margin-top:32px;
}
.hail-aside{font-size:15.5px;color:var(--slate-soft);}

/* ==========================================================================
   Schaltflächen
   ========================================================================== */
.act{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-family:'Hanken Grotesk',sans-serif;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
}
.act:hover{transform:translateY(-2px);}
.act-filled{background:var(--petrol);color:var(--white);}
.act-filled:hover{background:var(--petrol-deep);}
.act-outline{border-color:var(--petrol-text);color:var(--petrol-text);}
.act-outline:hover{background:var(--petrol-text);color:var(--white);}
.act-pale{background:var(--white);color:var(--petrol-deep);}
.act-pale:hover{background:var(--lilac);color:var(--petrol-deep);}
.act em{font-style:normal;transition:transform .25s ease;}
.act:hover em{transform:translateX(4px);}

/* ==========================================================================
   DIE NAHT — Signatur der Startseite
   Die S-Kurve des Logos, senkrecht abgewickelt.
   ========================================================================== */
.seam{
  position:relative;
  padding-block:clamp(24px,5vw,56px) clamp(56px,8vw,96px);
}
.seam::before{
  content:"";
  position:absolute;
  left:50%;
  translate:-1px 0;
  top:0;bottom:0;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,
    var(--petrol) 0%,
    var(--lilac) 42%,
    var(--petrol) 100%);
  opacity:.5;
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform 1.4s cubic-bezier(.3,.8,.3,1);
}
.seam[data-drawn="true"]::before{transform:scaleY(1);}

.knot{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(48px,7vw,96px);
  padding-block:clamp(28px,4vw,44px);
}

/* Der Punkt sitzt auf der Naht und trägt immer die Farbe der Gegenseite */
.knot::after{
  content:"";
  position:absolute;
  left:50%;
  top:clamp(40px,5.2vw,62px);
  width:13px;height:13px;
  translate:-50% 0;
  border-radius:50%;
  border:2px solid var(--porcelain);
  scale:0;
  transition:scale .5s cubic-bezier(.3,1.5,.5,1);
}
.knot[data-lit="true"]::after{scale:1;}

.knot-right .knot-body{grid-column:2;}
.knot-right::after{background:var(--lilac);}
.knot-left .knot-body{grid-column:1;text-align:right;}
.knot-left::after{background:var(--petrol);}

.knot-body{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:22px 26px;
  border-radius:14px;
  transition:background-color .3s ease;
}
.knot-body:hover{background:var(--porcelain-deep);}
.knot-body h2{
  font-size:clamp(24px,3.1vw,33px);
  margin-bottom:8px;
  transition:color .25s ease;
}
.knot-body:hover h2{color:var(--petrol-text);}
.knot-body p{
  font-size:16.5px;
  color:var(--slate-soft);
  margin:0;
}
.knot-body .tag{margin-bottom:10px;}

@media (max-width:760px){
  .seam::before{left:7px;translate:0 0;}
  .knot{grid-template-columns:1fr;padding-block:18px;}
  .knot::after{left:8px;top:30px;translate:-50% 0;}
  .knot-right .knot-body,
  .knot-left .knot-body{grid-column:1;text-align:left;}
  .knot-body{padding:16px 0 16px 34px;}
  .knot-body:hover{background:none;}
}

/* ==========================================================================
   Dunkle Bahn — das eine mutige Feld auf der Seite
   ========================================================================== */
.deep{
  background:var(--petrol-deep);
  color:var(--on-deep);
  padding-block:clamp(64px,9vw,116px);
}
.deep h2{
  color:var(--white);
  font-weight:300;
  font-size:clamp(26px,4vw,44px);
  max-width:20ch;
  margin-bottom:26px;
}
.deep p{color:var(--on-deep);max-width:var(--measure);}
.deep .tag{color:var(--lilac);margin-bottom:22px;}
.deep-close{margin-top:34px;}

/* ==========================================================================
   Textseiten — ruhige Zweispaltigkeit mit linker Randnaht
   ========================================================================== */
.plate{padding-block:clamp(48px,7vw,88px);}
.plate-tinted{background:var(--porcelain-deep);}

.leaf{
  display:grid;
  grid-template-columns:minmax(150px,200px) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
  align-items:start;
}
.leaf-aside{padding-top:6px;}
.leaf-aside .tag{position:sticky;top:104px;}
.leaf-main{max-width:var(--measure);}
.leaf-main h2{
  font-size:clamp(23px,3.2vw,34px);
  font-weight:400;
  margin-bottom:20px;
}
.leaf-main h2 + p{margin-top:0;}

@media (max-width:760px){
  .leaf{grid-template-columns:1fr;gap:12px;}
  .leaf-aside .tag{position:static;}
}

.crown{padding-block:clamp(46px,7vw,84px) clamp(24px,3vw,36px);}
.crown h1{
  font-size:clamp(32px,5.4vw,58px);
  font-weight:300;
  max-width:17ch;
  margin-top:18px;
}
.crown-lede{
  margin-top:22px;
  max-width:var(--measure);
  font-size:19px;
  color:var(--slate-soft);
}

/* ==========================================================================
   Therapieangebote — nach Anliegen gruppiert, nicht durchnummeriert.
   Die Reihenfolge ist keine Rangfolge, deshalb keine Zahlen.
   ========================================================================== */
.field{padding-block:clamp(38px,5vw,60px);border-top:1px solid var(--hairline);}
.field:first-of-type{border-top:0;}

.field-head{margin-bottom:clamp(22px,3vw,34px);}
.field-head h2{
  font-size:clamp(22px,2.9vw,30px);
  font-weight:400;
  margin-top:8px;
}

.offers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:2px;
  background:var(--hairline-soft);
  border:1px solid var(--hairline-soft);
  border-radius:16px;
  overflow:hidden;
}
.offer{
  background:var(--porcelain);
  padding:clamp(22px,2.6vw,30px);
  transition:background-color .3s ease;
}
.offer:hover{background:var(--white);}
.offer h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:17.5px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.35;
  color:var(--petrol-deep);
  margin-bottom:10px;
}
.offer p{font-size:16px;color:var(--slate);margin-bottom:0;}
.offer-list{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--hairline-soft);
  font-size:15.5px;
  color:var(--slate-soft);
}
.offer-list li{
  position:relative;
  padding-left:19px;
  margin-bottom:5px;
}
.offer-list li:last-child{margin-bottom:0;}
.offer-list li::before{
  content:"";
  position:absolute;
  left:0;top:12px;
  width:8px;height:2px;
  border-radius:2px;
  background:var(--lilac);
}

.plate-tinted .offers{background:var(--hairline);border-color:var(--hairline);}
.plate-tinted .offer{background:var(--porcelain-deep);}
.plate-tinted .offer:hover{background:var(--white);}

/* ==========================================================================
   Kontakt
   ========================================================================== */
.routes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,22px);
}
.route{
  padding:clamp(28px,3.4vw,40px);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.route h2{
  font-size:clamp(22px,2.8vw,29px);
  font-weight:400;
  margin-block:10px 12px;
}
.route p{font-size:16.5px;margin-bottom:24px;}
.route .act{margin-top:auto;}

.route-now{
  background:var(--petrol-deep);
  color:var(--on-deep);
}
.route-now h2{color:var(--white);}
.route-now p{color:var(--on-deep);}
.route-now .tag{color:var(--lilac);}

.route-soon{
  background:var(--white);
  border:1px solid var(--hairline);
}
.route-soon p{color:var(--slate-soft);}

.ledger{width:100%;border-collapse:collapse;}
.ledger th,.ledger td{
  text-align:left;
  vertical-align:top;
  padding:15px 0;
  border-bottom:1px solid var(--hairline-soft);
}
.ledger tr:last-child th,
.ledger tr:last-child td{border-bottom:0;}
.ledger th{
  width:34%;
  font-size:14.5px;
  font-weight:600;
  color:var(--slate-soft);
  padding-right:20px;
}
.ledger td{font-size:17px;}
.ledger a{color:var(--petrol-text);text-decoration:none;border-bottom:1.5px solid var(--lilac);}
.ledger a:hover{color:var(--petrol-deep);border-bottom-color:var(--petrol);}
.ledger .aside{color:var(--slate-soft);font-size:14.5px;}
@media (max-width:560px){
  .ledger th,.ledger td{display:block;width:100%;padding-block:4px;}
  .ledger th{padding-top:15px;border-bottom:0;}
  .ledger td{padding-bottom:15px;}
}

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.statute{max-width:66ch;padding-bottom:clamp(48px,7vw,80px);}
.statute h2{
  font-family:'Petrona',Georgia,serif;
  font-size:clamp(22px,2.8vw,28px);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--petrol-deep);
  margin-block:56px 18px;
  padding-top:22px;
  border-top:1px solid var(--hairline);
}
.statute h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.statute h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:16.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--petrol-text);
  margin-block:34px 10px;
}
.statute h4{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:15.5px;
  font-weight:600;
  color:var(--slate);
  margin-block:24px 8px;
}
.statute p{font-size:17px;}
.statute a{color:var(--petrol-text);}
.statute ul{margin:0 0 1.15em;padding:0;}
.statute li{
  position:relative;
  padding-left:20px;
  margin-bottom:7px;
  font-size:16.5px;
}
.statute li::before{
  content:"";
  position:absolute;
  left:0;top:12px;
  width:9px;height:2px;
  border-radius:2px;
  background:var(--lilac);
}
.statute .shout{
  font-size:15px;
  color:var(--slate-soft);
  background:var(--porcelain-deep);
  border-radius:12px;
  padding:20px 24px;
  line-height:1.7;
}
.statute .source{
  margin-top:44px;
  padding-top:20px;
  border-top:1px solid var(--hairline);
  font-size:14.5px;
  color:var(--slate-soft);
}
.statute mark{
  background:#FBEFC9;
  color:#5A4711;
  padding:1px 6px;
  border-radius:3px;
  font-size:.95em;
}
.counsel{
  margin-top:44px;
  padding:24px 28px;
  border-radius:16px;
  background:var(--porcelain-deep);
  border-left:3px solid var(--lilac);
  font-size:16px;
  color:var(--slate-soft);
  line-height:1.7;
}
.counsel strong{color:var(--slate);}

/* ==========================================================================
   Fußzeile
   ========================================================================== */
.foot{
  border-top:1px solid var(--hairline);
  padding-block:clamp(44px,6vw,64px) 34px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:clamp(28px,4vw,48px);
  padding-bottom:36px;
}
.foot-crest{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.foot-crest img:first-child{width:34px;height:auto;}
.foot-crest img:last-child{height:20px;width:auto;}
.foot-grid p{font-size:15.5px;color:var(--slate-soft);margin-bottom:4px;}
.foot-col h3{
  font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilac-deep);
  margin-bottom:14px;
}
.foot-col a{
  display:block;
  font-size:15.5px;
  color:var(--slate-soft);
  text-decoration:none;
  margin-bottom:9px;
  transition:color .2s ease;
}
.foot-col a:hover{color:var(--petrol-text);}

.guild{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:26px;
  border-top:1px solid var(--hairline-soft);
}
.guild img{width:128px;height:auto;}
.guild span{font-size:15px;color:var(--slate-soft);max-width:40ch;}

.foot-rule{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:24px;
  border-top:1px solid var(--hairline-soft);
  font-size:14.5px;color:var(--slate-soft);
}
.foot-rule nav{display:flex;gap:22px;}
.foot-rule a{text-decoration:none;transition:color .2s ease;}
.foot-rule a:hover{color:var(--petrol-text);}

@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr;gap:30px;}
}

/* ==========================================================================
   Bewegung — sparsam. Der Auftakt spricht in drei Atemzügen,
   die Naht zeichnet sich beim Scrollen.
   ========================================================================== */
@keyframes breathe{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}
.breath{animation:breathe .85s cubic-bezier(.2,.7,.3,1) both;}
.breath-1{animation-delay:.05s;}
.breath-2{animation-delay:.17s;}
.breath-3{animation-delay:.29s;}
.breath-4{animation-delay:.44s;}
.breath-5{animation-delay:.56s;}

.settle{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1);
}
.settle[data-shown="true"]{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .settle{opacity:1;transform:none;}
  .seam::before{transform:scaleY(1);}
  .knot::after{scale:1;}
}

/* ---------- Tastaturbedienung ----------------------------------------- */
.bypass{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--petrol);color:var(--white);
  padding:13px 22px;font-size:15px;font-weight:600;text-decoration:none;
}
.bypass:focus{left:0;}
:focus-visible{
  outline:2.5px solid var(--petrol);
  outline-offset:3px;
  border-radius:3px;
}