/* Ligia Possu — Designsystem. Quelle der Wahrheit fuer alle Seiten.
   Aenderungen hier wirken auf die ganze Site. */
:root{
  /* Flächen — 3 Stufen, warm neutral */
  --bg:#F5F1EC;        /* Grundfläche: Hero, Schritte, Leistungen, FAQ */
  --surface:#EBE3DA;   /* zweite Fläche: Story+Über sie, Bewertungen+Gebiet */
  --card:#FDFAF6;      /* erhöhtes Bauteil: Karten und Zitate liegen AUF den Flächen */

  /* Dunkel — EINE Familie */
  --ink:#2A1D17;       /* Überschriften, Primärknopf, Schlussblock+Footer */
  --ink-2:#3E2A20;     /* Hover des Primärknopfs */
  --on-dark:#E7DED4;   /* Fliesstext auf --ink */

  /* Akzent — EINE Familie, drei Helligkeiten */
  --terra:#8A5A40;     /* Eyebrow, Links, Icons, Zahlen, Schrittkreise */
  --terra-deep:#6E4633;/* Link-Hover */
  --sand:#D9BFA9;
  /* aus dem Logo POSSU MASSOTERAPIA — vorlaeufig geschaetzt, ersetzen sobald die Logodatei da ist */
  --sage:#787860;      /* Markenton, aus assets/logo-wordmark.png gemessen */
  --sage-soft:#DFE0D4; /* nur fuer Logo-Umfeld, NICHT als Flaeche verteilen */      /* Knopf auf Dunkel, Icon-Badge-Fläche */
  --sand-light:#E7D3BF;/* Hover des Schlussblock-Knopfs */

  /* Text und Linie */
  --muted:#6E5A4C;     /* JEDER sekundäre Text: Lede, Kartentext, FAQ-Antwort */
  --line:#DCD0C2;

  /* Abstand */
  --s1:6px; --s2:10px; --s3:14px; --s4:20px; --s5:28px; --s6:40px; --s7:56px; --s8:72px;

  --serif:Newsreader,Georgia,'Times New Roman',serif;
  --sans:Karla,'Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:660px;margin:0 auto;padding:0 22px}
section{padding:28px 0}
.sec-light{padding:24px 0}
.sec-heavy{padding:36px 0}
/* Zwei Abschnitte auf derselben Flaeche teilen sich die Fuge — sonst steht dort
   ein Loch statt eines Beats (Story+Ueber sie, Ablauf+Leistungen, Bewertungen+Gebiet) */
.story+.story,
section:not(.story):not(.final)+section:not(.story):not(.final){padding-top:var(--s4)}

/* --- Typografie (§3) --- */
h1,h2,h3{margin:0;text-wrap:pretty;color:var(--ink)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,10.2vw,56px);
   line-height:1.07;letter-spacing:-0.025em}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,7.2vw,38px);
   line-height:1.12;letter-spacing:-0.022em;margin-bottom:var(--s4)}
h3{font-family:var(--sans);font-weight:700;font-size:18px;
   line-height:1.3;letter-spacing:-0.005em}
p{margin:0 0 16px}
.muted{color:var(--muted)}
.muted strong{color:var(--ink);font-weight:700}

.lede{font-size:16px;line-height:1.55;color:var(--muted);max-width:34ch}

.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terra);margin:0 0 var(--s3);
  display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--terra);flex:0 0 18px}
.hero .eyebrow{font-size:14px;letter-spacing:.2em;flex-direction:column;align-items:flex-start;gap:8px;text-wrap:pretty}
.hero .eyebrow::before{flex:0 0 auto;width:24px}
@media(min-width:900px){
  .hero .eyebrow{flex-direction:row;align-items:center;gap:10px}
  .hero .eyebrow::before{flex:0 0 24px}
}

.txt-sm{font-size:14px;line-height:1.55;color:var(--muted)}       /* Nebentext in Karten/Schritten/FAQ */

@media(min-width:900px){
  .lede{font-size:18px;max-width:42ch}
  .wrap--wide{max-width:1080px}
  section{padding:80px 0}
  .sec-light{padding:64px 0}
  .sec-heavy{padding:96px 0}
  .story+.story,
  section:not(.story):not(.final)+section:not(.story):not(.final){padding-top:var(--s7)}
  .story.sec-heavy h2{max-width:660px}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.rating .n{font-family:var(--serif);font-weight:600;font-size:56px;line-height:1;color:var(--terra)}

/* Kopf */
header{position:static;z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}
.brand{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:6px 0}
.brand img{height:26px;width:auto;display:block}
.brand span{font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  color:var(--muted);font-weight:600;text-transform:uppercase;line-height:1}


/* --- Bausteine (§5) — existieren genau einmal --- */

/* Karte: Leistung, Zitat, alles Modulare */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px;box-shadow:0 1px 2px rgba(42,29,23,.04),0 10px 24px -14px rgba(42,29,23,.18)}
.card h3{margin-bottom:6px}
.card p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.card .for{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--terra);margin-bottom:6px}

/* Zitat: Karte mit Akzentkante links */
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:14px;padding:20px;box-shadow:0 1px 2px rgba(42,29,23,.04)}
.quote p{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--ink)}
.quote .stars{display:block;margin-bottom:8px}
.quote .who{font-size:12.5px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.avatar{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--terra);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}

/* Icon-Badge (Leistungen, Vertrauenszeile) */
.badge{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--sand);
  color:var(--terra);display:flex;align-items:center;justify-content:center}
.badge svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* Knopf: EIN Stil */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;
  padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.01em;
  background:var(--ink);color:#fff;
  transition:background .16s ease,transform .06s ease}
.btn:hover{background:var(--ink-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:44px;font-size:14px;padding:0 18px}
.btn-block{display:flex;width:100%}
.final .btn{background:var(--sand);color:var(--ink)}
.final .btn:hover{background:var(--sand-light);color:var(--ink)}

/* Textlink mit Pfeil: die einzige zweite CTA-Ebene */
a{color:var(--terra);text-decoration:none}
a:hover{color:var(--terra-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.link-arrow{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:14px;text-wrap:pretty}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:4px}

/* Aufzählung als Chip */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s5) 0 var(--s4)}
.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink)}

/* Schritt-Kette: gefüllte Kreise, verbunden */
.steps{display:flex;flex-direction:column;gap:0;margin-top:var(--s5)}
.step{display:flex;gap:16px;padding:0 0 var(--s5);position:relative}
.step:last-child{padding-bottom:0}
.step-n{flex:0 0 38px;height:38px;border-radius:50%;background:var(--terra);color:#fff;
  font-family:var(--serif);font-weight:600;font-size:16px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.step:not(:last-child)::after{content:"";position:absolute;top:38px;left:18px;
  width:1.5px;bottom:0;background:var(--line)}
.step p{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
@media(min-width:900px){
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .step{flex-direction:column;align-items:center;text-align:center;padding:0 18px}
  .step-n{width:38px;flex:0 0 38px;margin-bottom:var(--s3)}
  /* Linie horizontal am Desktop überschreibt die mobile vertikale Linie */
  .step:not(:last-child)::after{content:"";position:absolute;top:18px;bottom:auto;
    left:calc(50% + 27px);right:calc(-50% + 27px);width:auto;height:1.5px;background:var(--line)}
}

/* Akkordeon */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;position:relative;min-height:56px;display:flex;
  align-items:center;padding:16px 34px 16px 0;font-weight:700;font-size:16px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--terra)}
summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--terra);border-bottom:1.6px solid var(--terra);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--muted);max-width:46ch}
details.todo-critical{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--terra);border-radius:14px;margin:12px 0;padding:0 14px}
details.todo-critical summary{color:var(--ink)}
details.todo-critical summary:hover{color:var(--terra-deep)}
details.todo-critical summary::after{border-color:var(--terra)}
details.todo-critical p{color:var(--ink);max-width:none}

/* Bildrahmen mit Bildunterschrift (bleibt Pflicht) */
.figure{position:relative;border-radius:4px;overflow:hidden;background:var(--surface)}
.figure img{width:100%;height:auto;display:block;object-fit:cover}
.ph{position:absolute;left:0;right:0;bottom:0;background:rgba(42,29,23,.82);color:var(--bg);
  padding:9px 13px;font-size:12.5px;line-height:1.35}
.ph b{display:block;font-size:12px;letter-spacing:.1em;color:var(--sand);margin-bottom:2px}
/* --- Ende Bausteine --- */

/* Hero */
.hero{padding-top:34px;padding-bottom:0}
.hero-grid{display:flex;flex-direction:column}
.hero-figure{margin:var(--s6) 0 0}
.hero-figure img{aspect-ratio:4/3}
.trust{display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.trust-item{display:flex;align-items:center;gap:7px}
a.trust-item{min-height:44px;text-decoration-thickness:1.3px}
.stars{color:var(--terra);letter-spacing:.1em;font-size:14px}
@media(min-width:900px){
  .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
  .hero-text{max-width:560px}
  .hero-figure{margin-top:0}
  .hero-figure img{aspect-ratio:4/5}
  .hero-text .btn-block{display:inline-flex;width:auto;min-width:320px}
}

/* Videoreihe unter den drei Schritten — eigener Scroll-Container, das Dokument
   bekommt keine Breite dazu. 4:5 schneidet unten den Rest der eingebrannten
   Untertitel weg, ohne dass eine Datei angefasst wird. (Eintrag 2) */
.reel-lead{margin-top:var(--s5)}
.reel{display:flex;gap:12px;margin:var(--s5) -22px 0;padding:0 22px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
/* Mit der Maus gibt es kein Wischen: sobald ein Zeigergeraet da ist, zeigen wir den
   Balken, sonst kommt niemand zur zweiten und dritten Karte. */
@media(hover:hover) and (pointer:fine){
  .reel{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:10px}
  .reel::-webkit-scrollbar{display:block;height:8px}
  .reel::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .reel::-webkit-scrollbar-track{background:transparent}
}
.reel video{flex:0 0 62vw;width:62vw;height:auto;aspect-ratio:4/5;display:block;
  object-fit:cover;object-position:50% 0;border-radius:4px;
  background:var(--surface);scroll-snap-align:start}
@media(min-width:700px){
  .reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);
    overflow:visible;margin:var(--s5) 0 0;padding:0}
  .reel video{flex:none;width:100%;height:auto}
}

/* Am Handy sind nur anderthalb Karten der Videoreihe zu sehen. Der Hinweis sagt,
   dass es drei sind. Ab 700 px steht die Reihe als Raster, dann faellt er weg —
   dieselbe Grenze wie die Reihe selbst. (Lauf C, Eintrag 7) */
.reel-hint{font-size:12.5px;color:var(--muted);margin:var(--s2) 0 0}
@media(min-width:700px){.reel-hint{display:none}}

/* Story */
.story{background:var(--surface)}
.story .big{font-family:var(--serif);font-weight:500;font-size:clamp(26px,6.6vw,34px);line-height:1.2;margin-bottom:18px;border-left:3px solid var(--terra);padding-left:18px}

/* Leistungen */
.svc{display:grid;gap:12px;margin-top:var(--s2)}
/* Preiszeile am Kartenboden — sonst steht sie in einer Reihe auf drei Hoehen */
.svc .card{display:flex;flex-direction:column}
.svc .card>p{margin-bottom:auto}
a.card{color:var(--ink);text-decoration:none}
a.card:hover{border-color:var(--terra);text-decoration:none}
a.card:hover h3{color:var(--terra)}
.svc-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.svc-head .for{margin-bottom:0}
.svc-meta{margin-top:12px;padding-top:13px;border-top:1px solid var(--line);font-size:16px;font-weight:700;color:var(--terra)}
.more{margin:var(--s5) 0 0;font-size:14px;color:var(--muted)}
.more+.chips{margin-top:var(--s3)}
.pricelist{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--line)}
.pricelist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.pricelist span{font-size:16px;font-weight:600;color:var(--ink)}
.pricelist b{flex:0 0 auto;font-size:16px;font-weight:700;color:var(--terra);white-space:nowrap}
/* Zeile ohne Preis: die Leistung steht in der Liste, ist aber gerade nicht buchbar.
   Kein Preis, kein Gewicht — sie soll nicht das Auge ziehen. (Lauf C, Eintrag 5) */
.pricelist .is-off,
.pricelist .is-off b{color:var(--muted);opacity:.7;font-weight:600}
.depil{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink)}
.depil a{display:inline-flex;align-items:center;min-height:44px}

/* Über sie */
.about-figure{margin-bottom:var(--s5)}
.about-figure img{aspect-ratio:4/3;object-position:50% 40%}
.about-figure~.chips .chip,
.who-text .chips .chip{line-height:1.3;padding:9px 16px 8px}
.about-figure+h2+.chips,
.who-text h2+.chips{margin-top:var(--s2)}
/* Ab 900 px steht das Portraet links in seiner Originalbreite, Name und Text
   rechts daneben. Vorher wurde es auf 616 px hochgerechnet und quer beschnitten.
   Unter 900 px ist .wrap nur 660 px breit, dort haetten Bild und Text nebeneinander
   keinen Platz — deshalb 900 und nicht 760. (Lauf C, Eintrag 8) */
@media(min-width:900px){
  .who-grid{display:grid;grid-template-columns:371px minmax(0,1fr);gap:var(--s7);align-items:start}
  .who-grid .about-figure{margin-bottom:0}
  .who-grid .about-figure img{width:371px;height:auto;aspect-ratio:auto;object-fit:unset}
}

/* Bewertungen */
.rating{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s4)}
.quotes{display:grid;gap:12px}


/* Abschluss */
.final{background:var(--ink);color:var(--bg);border-radius:0;padding-bottom:var(--s6)}
.final h2{color:var(--bg)}
.final .lede{color:var(--on-dark)}
.final .trust{border-top:0;padding-top:0;margin-top:16px;color:var(--sand)}
@media(min-width:900px){
  .final .btn{display:inline-flex;width:auto;min-width:320px}
}

/* Fusszeile — verschmilzt mit .final zu einem durchgehenden dunklen Koerper */
footer{background:var(--ink);color:var(--on-dark);padding:16px 0 40px;font-size:12.5px}
.footrow{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:12px}
footer a{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;color:var(--sand)}
footer a:hover{color:#fff}
footer a svg{flex:0 0 auto}

/* Fester WhatsApp-Knopf */
.dock--mini{left:auto;padding-right:18px}
.dock--mini .btn{width:56px;min-width:56px;height:56px;min-height:56px;
  padding:0;gap:0;border-radius:50%;font-size:0;margin-left:auto}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 22px calc(10px + env(safe-area-inset-bottom));
  background:none;pointer-events:none}
.dock .btn{pointer-events:auto;box-shadow:0 6px 22px rgba(42,29,23,.22)}
body{padding-bottom:70px}
@media(max-width:759px){ .bar .btn{display:none} }
@media(min-width:760px){
  header{position:sticky;top:0;background:rgba(245,241,236,.94);backdrop-filter:blur(8px)}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock{display:none}
  body{padding-bottom:0}
}

/* ============================================================
   Mehrseiten-Site: Navigation, Trilha, Fusszeilen-Raster
   ============================================================ */
.brand{display:block;text-decoration:none}
.brand:hover{color:var(--terra);text-decoration:none}
.nav{display:none;gap:22px;font-size:16px;font-weight:600}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--terra)}

.crumbs{background:var(--bg);border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.crumbs .wrap{padding-top:12px;padding-bottom:12px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--terra)}
.crumbs span{margin:0 6px;color:var(--line)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.footgrid{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s4)}
.footcol{display:flex;flex-direction:column;align-items:flex-start;gap:0}
/* Links fliessen als Zeile und brechen um: kompakt, buendig, 44px Tapziel */
.footlinks{display:flex;flex-wrap:wrap;gap:0 4px}
.footgrid a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;
  margin-left:-10px;border-radius:8px;color:var(--sand);font-size:14px;line-height:1.25}
.footgrid a:hover{color:#fff;background:rgba(231,222,212,.08);text-decoration:none}
.foothead{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark);opacity:.55;margin-bottom:var(--s1)}
.footnote{font-size:12.5px;color:var(--on-dark);opacity:.7;line-height:1.6;
  padding-top:var(--s3);border-top:1px solid rgba(231,222,212,.18)}

/* Leistungsseiten: Kopfblock, Faktenleiste, Inhaltsmass */
.page-hero{padding:var(--s6) 0 var(--s5)}
@media(max-width:899px){.page-hero h1{font-size:34px;line-height:1.12}}
.page-hero .lede{max-width:46ch}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
.fact{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.fact b{color:var(--terra)}

/* Vertrauensleiste der Unterseiten — Gesicht, Note, Ausbildung, Sprachen (Eintrag 1) */
.proof{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--line)}
.proof>img{flex:0 0 56px;width:56px;height:56px;border-radius:50%;
  object-fit:cover;object-position:50% 22%}
.proof-lines{min-width:0}
.proof-lines a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:14px;font-weight:700}
.proof-lines p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.prose{max-width:42ch}
.prose h2{margin-top:var(--s6)}
.prose h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.prose ul{margin:0 0 16px;padding-left:20px;color:var(--muted);font-size:16px;line-height:1.6}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--terra)}
.callout{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--terra);
  border-radius:14px;padding:20px;margin:var(--s5) 0}
.callout p:last-child{margin-bottom:0}

/* Desktop-Vorlage der Unterseiten: ab 1100 px zwei Spalten, links eine klebende
   Leiste mit Gesicht, Note, Preis, Knopf und Sprungliste. Darunter unveraendert
   einspaltig — mobil aendert sich nichts. (Eintrag 6) */
.page-grid{display:block}
.rail{display:none}
@media(min-width:1100px){
  .page-grid{display:grid;grid-template-columns:296px minmax(0,1fr);gap:var(--s8);
    max-width:1080px;margin:0 auto;padding:0 22px;align-items:start}
  .page-grid .page-main{min-width:0}
  .page-grid .page-main>section{background:transparent}
  .page-grid .page-main>section:first-child{padding-top:var(--s6)}
  .page-grid .wrap{max-width:none;padding:0;margin:0}
  .page-grid .prose{max-width:46ch}
  .page-grid .proof{margin-top:0;padding-top:0;border-top:0}
  .rail{display:block;position:sticky;top:var(--s5);padding:var(--s6) 0 0}
  .rail-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:20px;box-shadow:0 1px 2px rgba(42,29,23,.04),0 10px 24px -14px rgba(42,29,23,.18)}
  .rail-price{margin:var(--s3) 0 var(--s4);font-size:16px;font-weight:700;color:var(--terra)}
  .rail .btn{margin-top:var(--s3)}
  .rail-nav{margin-top:var(--s5);padding-left:14px;border-left:1px solid var(--line)}
  .rail-nav .foothead{color:var(--muted);opacity:1;margin-bottom:var(--s2)}
  .rail-nav a{display:block;padding:7px 0;font-size:14px;line-height:1.35;color:var(--muted)}
  .rail-nav a:hover{color:var(--terra)}
  .page-main .proof{display:none}
}

/* Bild auf einer Unterseite: unter dem Knopf, in der Lesespalte (Eintrag 15) */
.page-figure{margin:var(--s5) 0 0}
.page-figure img{aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
@media(min-width:900px){.page-figure{max-width:520px}}

/* Karten, die zu anderen Seiten fuehren */
.linkcards{display:grid;gap:12px;margin-top:var(--s5)}
.linkcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px;color:var(--ink);
  box-shadow:0 1px 2px rgba(42,29,23,.04),0 10px 24px -14px rgba(42,29,23,.18)}
.linkcard:hover{border-color:var(--terra);color:var(--ink);text-decoration:none}
.linkcard h3{margin-bottom:6px}
.linkcard p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--muted)}
.linkcard .go{font-size:14px;font-weight:700;color:var(--terra)}

/* Waisenkarten: die erste Karte nimmt die volle Breite, der Rest steht im Raster.
   Bewertungen stehen ab 1100 px zu dritt. (Eintrag 12) */
@media(min-width:1100px){
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .linkcard--lead{grid-column:1 / -1}
  .linkcard--lead p{font-size:16px;max-width:60ch}
}

/* Preisliste am Desktop: eigenes Mass und eine Punktlinie zwischen Name und Preis,
   damit das Auge die Zeile nicht verliert. (Eintrag 13) */
@media(min-width:900px){
  .pricelist{max-width:660px}
  .pricelist li>span{flex:1 1 auto;display:flex;align-items:baseline;min-width:0}
  .pricelist li>span::after{content:"";flex:1 1 auto;height:6px;margin:0 8px 3px;
    background-image:radial-gradient(circle,var(--line) 1px,transparent 1.2px);
    background-size:7px 6px;background-repeat:repeat-x;background-position:0 100%}
}

/* Blog */
.postmeta{font-size:12.5px;color:var(--muted);margin-bottom:var(--s4)}
.posts{display:grid;gap:12px;margin-top:var(--s5)}

@media(min-width:760px){
  .nav{display:flex}
}
@media(min-width:900px){
  .footgrid{flex-direction:row;align-items:flex-start;gap:var(--s8)}
  .footcol{flex:0 1 auto}
  .footcol:first-child{flex:1 1 auto}
  .footlinks{flex-direction:column;flex-wrap:nowrap;gap:0}
  .linkcards,.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose{max-width:46ch}
}

/* Sprachumschalter — Textlinks rechts der Wortmarke, keine Flaggen, kein
   Klappmenue, keine Umleitung. Sitzt in der 58 px hohen Leiste und kostet
   deshalb auf keiner Seite Hoehe. */
.langs{display:flex;align-items:center;gap:2px;margin-left:auto;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em}
.langs a,.langs span{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:44px;color:var(--muted);text-decoration:none}
.langs a:hover{color:var(--terra);text-decoration:none}
.langs [aria-current],.langs span[aria-current]{color:var(--ink)}
/* Am Handy sitzt der Umschalter am rechten Rand, und die Wortmarke darf
   schrumpfen statt umzubrechen: die englische Unterzeile ist zwei Zeichen
   laenger als die portugiesische und riss den Kopf sonst auf zwei Zeilen. */
.langs{flex:0 0 auto}
.brand{min-width:0}
@media(max-width:759px){
  .brand span{font-size:10.5px;letter-spacing:.12em;white-space:nowrap}
}
@media(min-width:760px){ .langs{margin-left:0;order:3} .bar .btn{order:4} }

/* Am Handy hatte der Kopf gar keine Navigation: .nav war bis 760 px aus und der
   Agendar-Knopf ebenfalls. Von oben kam man weder zu den Leistungen noch zum
   Blog — nur ueber die Fusszeile. Platz dafuer entsteht, indem am Handy allein
   die Wortmarke steht und die Unterzeile weicht; den Beruf traegt dort die
   Fusszeile ("Massoterapeuta a domicilio"), er geht also nicht verloren. */
@media(max-width:759px){
  .brand span{display:none}
  .nav{display:flex;order:2;gap:16px;font-size:14px;font-weight:700}
  .nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
  .langs{order:3}
  .langs a,.langs span{min-width:26px}
}

/* Zwei Ausgaenge unter den Leistungskarten: die volle Preisliste und die
   Depilation. Als kleine Textzeilen gingen beide unter. Zwei Spalten auch am
   Handy — so sind sie deutlich groesser UND brauchen zusammen weniger Hoehe
   als die drei Zeilen, die sie ersetzen. */
.exits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--s5)}
.exit{display:flex;flex-direction:column;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:16px 14px 14px;
  color:var(--ink);text-decoration:none}
.exit:hover{border-color:var(--terra);color:var(--ink);text-decoration:none}
.exit b{font-family:var(--serif);font-size:19px;font-weight:500;line-height:1.2}
.exit em{font-style:normal;font-size:13px;line-height:1.5;color:var(--muted);flex:1 1 auto}
.exit span{font-size:13px;font-weight:700;color:var(--terra)}
@media(min-width:760px){ .exit{padding:22px} .exit b{font-size:23px} .exit em{font-size:15px} }

/* Die Clips sind Beiwerk, keine Mediathek: sie laufen von selbst und lassen
   sich weder anhalten noch spulen. */
.reel video{pointer-events:none}
.reel video::-webkit-media-controls,
.reel video::-webkit-media-controls-enclosure,
.reel video::-webkit-media-controls-panel,
.reel video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}