/* =========================================================================
   SCHRIFTEN — vom eigenen Server
   Bewusst lokal eingebunden statt ueber Google Fonts bzw. Fontshare: so
   entsteht beim Seitenaufruf keine Verbindung zu einem Drittanbieter und
   keine Uebermittlung der IP-Adresse. Die Datenschutzerklaerung stuetzt
   sich auf diesen Zustand - beim Tausch der Schriften mitpflegen.
   Fraunces: SIL Open Font License 1.1. Satoshi: ITF Free Font License.
   ========================================================================= */
/* Fraunces - variabel, 300..600, aufrecht */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Fraunces - kursiv, fuer .accent */
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 600; font-display:swap;
  src:url("fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:300 600; font-display:swap;
  src:url("fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Satoshi - Fliesstext */
@font-face{
  font-family:"Satoshi"; font-style:normal; font-weight:300; font-display:swap;
  src:url("fonts/satoshi-300.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/satoshi-400.woff2") format("woff2");
}
@font-face{
  font-family:"Satoshi"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/satoshi-500.woff2") format("woff2");
}

/* =========================================================================
   DESIGN TOKENS
   Palette aus den Referenzen (warmes Creme + Waldgruen) und dem
   aufgefrischten Logo (gedecktes Messing statt Gold-Verlauf).
   ========================================================================= */
:root{
  --canvas:      #FAF6EF;   /* warmes Creme, Grundflaeche          */
  --canvas-2:    #F3ECE0;   /* abgesetzte Flaeche                  */
  --moss:        #2E3728;   /* dunkle Sektionen                    */
  --moss-deep:   #232B20;   /* Ink, Fliesstext und Wortmarke       */
  --brass:       #9C7434;   /* einziger Akzent, aus dem Logo       */
  --brass-soft:  #C0A06A;   /* Akzent auf dunklem Grund            */
  --muted:       #6B7062;   /* Sekundaertext                       */
  --hairline:    rgba(35,43,32,.12);

  --shell:       min(1240px, 100% - 3rem);
  --radius:      1.75rem;

  /* Easing nach Emil Kowalski: eigene Kurven, nie die CSS-Defaults */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-inout:  cubic-bezier(.77,0,.175,1);

  --step--1: clamp(.82rem, .78rem + .18vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .22vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.2vw, 5.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:7.5rem; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--moss-deep);
  font-family:"Satoshi","Segoe UI",sans-serif;
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,.serif{
  font-family:"Fraunces",Georgia,serif;
  font-weight:300;
  font-variation-settings:"SOFT" 40,"WONK" 0;
  letter-spacing:-.015em;
  line-height:1.06;
  margin:0;
}
p{ margin:0; }

/* Highlight-Regel: hervorgehobenes Wort und angrenzendes Satzzeichen
   sind EIN Part - gleiche Farbe, gleicher Stil, nie getrennt umbrechend. */
.accent{ color:var(--brass); font-style:italic; white-space:nowrap; }
.on-dark .accent{ color:var(--brass-soft); }

.shell{ width:var(--shell); margin-inline:auto; }
section{ position:relative; }

/* Filmkorn - fix, nie im Scroll-Container (sonst dauerhafte GPU-Repaints) */
.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
   NAVIGATION - freischwebende Glas-Pille, nicht am Rand klebend
   ========================================================================= */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:60;
  padding:1.25rem 1.5rem;
  transition:padding 260ms var(--ease-out);
}
.nav[data-scrolled="true"]{ padding-top:.7rem; }
.nav__inner{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
  padding:.6rem .7rem .6rem 1.35rem;
  border-radius:999px;
  background:rgba(250,246,239,.72);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(35,43,32,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(35,43,32,.4);
  transition:box-shadow 260ms var(--ease-out), background 260ms var(--ease-out);
}
.nav[data-scrolled="true"] .nav__inner{
  background:rgba(250,246,239,.86);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 50px -30px rgba(35,43,32,.55);
}
.nav__logo{ display:flex; align-items:center; flex:0 0 auto; }
/* Zweizeilige Wortmarke - unter ~44px wird "Silvia Ortner" unlesbar */
.nav__logo img{ height:46px; width:auto; }
.nav__links{
  display:flex; align-items:center; gap:1.75rem; margin-inline-start:auto;
  list-style:none; padding:0; margin-block:0;
  font-size:var(--step--1); letter-spacing:.01em;
}
/* li ohne align-items werden gestreckt - der Anker haengt dann oben im Kasten */
.nav__links > li{ display:flex; align-items:center; }
.nav__links a{
  text-decoration:none; color:var(--muted);
  padding-block:.35rem; position:relative;
  transition:color 220ms var(--ease-out);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:.1rem; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform 300ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{ color:var(--moss-deep); }
  .nav__links a:hover::after{ transform:scaleX(1); }
}

/* Button - Pille mit eigenem Icon-Kreis (Button-in-Button) */
.btn{
  --btn-bg:var(--moss-deep); --btn-fg:var(--canvas); --btn-chip:rgba(250,246,239,.14);
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.55rem .55rem .55rem 1.35rem;
  border-radius:999px; border:0; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:inherit; font-size:var(--step--1); font-weight:500; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform 160ms var(--ease-out), background 260ms var(--ease-out);
}
.btn__chip{
  width:2rem; height:2rem; flex:0 0 auto; border-radius:999px;
  display:grid; place-items:center; background:var(--btn-chip);
  transition:transform 220ms var(--ease-out), background 220ms var(--ease-out);
}
.btn__chip svg{ width:.85rem; height:.85rem; }
.btn:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn__chip{ transform:translate(2px,-1px) scale(1.06); }
}
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--moss-deep); --btn-chip:rgba(35,43,32,.07);
  border:1px solid var(--hairline);
}
.btn--light{ --btn-bg:var(--canvas); --btn-fg:var(--moss-deep); --btn-chip:rgba(35,43,32,.08); }
.nav .btn{ flex:0 0 auto; }

/* Burger - Linien morphen zum X, kein Icon-Tausch */
.burger{
  display:none; width:2.75rem; height:2.75rem; border-radius:999px;
  border:1px solid var(--hairline); background:transparent; cursor:pointer;
  position:relative; margin-inline-start:auto; flex:0 0 auto;
}
.burger span{
  position:absolute; left:50%; width:1.1rem; height:1.5px; border-radius:2px;
  background:var(--moss-deep); translate:-50% 0;
  transition:transform 320ms var(--ease-inout), opacity 180ms var(--ease-out);
}
.burger span:nth-child(1){ top:calc(50% - 4px); }
.burger span:nth-child(2){ top:calc(50% + 4px); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55;
  background:rgba(250,246,239,.94);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  display:grid; place-content:center; gap:.25rem;
  opacity:0; visibility:hidden; transform:scale(.98);
  transition:opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s 360ms;
}
.drawer[data-open="true"]{ opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; }
.drawer a{
  font-family:"Fraunces",serif; font-weight:300; font-size:var(--step-2);
  text-decoration:none; text-align:center; padding-block:.4rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.drawer[data-open="true"] a{ opacity:1; transform:none; }
.drawer[data-open="true"] a:nth-child(1){ transition-delay:80ms; }
.drawer[data-open="true"] a:nth-child(2){ transition-delay:130ms; }
.drawer[data-open="true"] a:nth-child(3){ transition-delay:180ms; }
.drawer[data-open="true"] a:nth-child(4){ transition-delay:230ms; }
.drawer[data-open="true"] a:nth-child(5){ transition-delay:280ms; }
.drawer[data-open="true"] a:nth-child(6){ transition-delay:330ms; }

/* =========================================================================
   HERO - Editorial Split, bewusst nicht zentriert
   ========================================================================= */
.hero{
  min-height:100dvh;                 /* nie 100vh - iOS Safari springt */
  display:grid; align-items:center;
  padding-block:9rem 4rem;
}
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.eyebrow{
  display:inline-block;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--brass); font-weight:500;
  padding:.4rem .9rem; border:1px solid rgba(156,116,52,.3); border-radius:999px;
  margin-bottom:1.75rem;
}
.hero h1{ font-size:var(--step-4); max-width:13ch; }
.hero__lead{
  margin-top:1.75rem; max-width:44ch;
  color:var(--muted); font-size:var(--step-1); line-height:1.55; font-weight:300;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }
.hero__figure{ position:relative; }
.hero__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;
  border-radius:calc(var(--radius) + .5rem);
}
/* Doppelrand: das Bild sitzt in einer eigenen Fassung, nicht flach auf dem Grund */
.frame{
  padding:.5rem; border-radius:calc(var(--radius) + 1rem);
  background:rgba(35,43,32,.035);
  border:1px solid rgba(35,43,32,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.hero__stamp{
  position:absolute; left:-1.5rem; bottom:2.5rem;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:999px; padding:.6rem 1.15rem;
  font-size:var(--step--1); color:var(--muted);
  box-shadow:0 20px 40px -26px rgba(35,43,32,.5);
}

/* =========================================================================
   TRUST - reine Fakten aus ihrem Lebenslauf, keine erfundenen Zahlen
   ========================================================================= */
.trust{ border-block:1px solid var(--hairline); padding-block:2.25rem; }
.trust ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 2.5rem;
}
.trust li{
  font-size:var(--step--1); color:var(--muted); line-height:1.5;
  padding-inline-start:1.15rem; position:relative;
}
.trust li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:999px; background:var(--brass);
}
.trust strong{ display:block; color:var(--moss-deep); font-weight:500; }

/* =========================================================================
   SEKTIONEN
   ========================================================================= */
.sec{ padding-block:clamp(5.5rem,12vw,10rem); }
.sec__head{ max-width:62ch; margin-bottom:clamp(3rem,6vw,5rem); }
.sec__head h2{ font-size:var(--step-3); }
.sec__head p{ margin-top:1.6rem; color:var(--muted); max-width:52ch; font-size:var(--step-1); font-weight:300; line-height:1.6; }
.label{
  font-size:.68rem; line-height:1.4; text-transform:uppercase; letter-spacing:.24em;
  color:var(--brass); font-weight:500; display:block; margin-bottom:1.1rem;
}

/* Zitat-Sektion auf dunklem Grund */
.on-dark{ background:var(--moss); color:var(--canvas); }
.on-dark .label{ color:var(--brass-soft); }
.quote{ padding-block:clamp(5rem,10vw,8rem); }
.quote blockquote{
  margin:0; font-family:"Fraunces",serif; font-weight:300;
  font-size:var(--step-3); line-height:1.18; max-width:22ch;
}
.quote__body{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end;
}
.quote__body p{ color:rgba(250,246,239,.72); max-width:46ch; font-weight:300; font-size:var(--step-1); line-height:1.6; }

/* Leistungen - asymmetrisches Raster statt drei gleicher Karten */
.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:1.25rem; }
.card{
  grid-column:span 6;
  display:flex; flex-direction:column;
  padding:.5rem; border-radius:calc(var(--radius) + .5rem);
  background:rgba(35,43,32,.035); border:1px solid rgba(35,43,32,.06);
  transition:transform 240ms var(--ease-out), background 240ms var(--ease-out);
}
.card--wide{ grid-column:span 7; }
.card--slim{ grid-column:span 5; }
.card__inner{
  flex:1; display:flex; flex-direction:column;
  background:var(--canvas); border-radius:var(--radius);
  padding:clamp(2rem,3.4vw,3rem);
  box-shadow:0 1px 1px rgba(255,255,255,.7) inset;
}
.card__no{
  display:block; font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; letter-spacing:-.02em;
  color:var(--brass); opacity:.4; margin-bottom:1.4rem;
}
.card__media{
  border-radius:calc(var(--radius) - .35rem); overflow:hidden; margin-bottom:1.6rem;
  aspect-ratio:16/10;
}
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out); }
.card h3{ font-size:var(--step-2); }
.card p{ margin-top:1rem; color:var(--muted); font-size:var(--step-0); max-width:46ch; }
.card__list{
  list-style:none; padding:0; margin:1.6rem 0 0;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.card__list li{
  font-size:.78rem; letter-spacing:.02em; color:var(--muted);
  border:1px solid var(--hairline); border-radius:999px; padding:.28rem .7rem;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{ background:rgba(35,43,32,.06); }
  .card:hover .card__media img{ transform:scale(1.035); }
}

/* Platzhalter fuer noch fehlende Motive - bewusst als solcher erkennbar */
.ph{
  margin:0; border-radius:calc(var(--radius) - .35rem);
  display:grid; place-items:center; text-align:center; gap:.35rem;
  background:
    repeating-linear-gradient(-45deg, rgba(156,116,52,.07) 0 1px, transparent 1px 11px),
    var(--canvas-2);
  border:1px dashed rgba(156,116,52,.34);
  color:var(--brass); padding:2rem 1.25rem;
}
.ph span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; font-weight:500; }
.ph small{ color:var(--muted); font-size:var(--step--1); letter-spacing:0; text-transform:none; max-width:30ch; }
.card__media.ph{ aspect-ratio:16/10; }

/* Beratung - der Bereich, fuer den noch keine Texte vorliegen */
.card--row{ grid-column:span 12; }
.card--row .card__inner{
  flex-direction:row; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  background:var(--canvas-2);
}

/* Ablauf */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; counter-reset:s; }
.step{ border-top:1px solid var(--hairline); padding-top:1.6rem; }
.step::before{
  counter-increment:s; content:"0" counter(s);
  font-family:"Fraunces",serif; font-size:var(--step-1); color:var(--brass);
  display:block; margin-bottom:.9rem;
}
.step h3{ font-size:var(--step-1); }
.step p{ margin-top:.7rem; color:var(--muted); font-size:var(--step--1); line-height:1.6; }

/* Ueber mich */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5.5rem); align-items:center; }
.about__figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
.about h2{ font-size:var(--step-3); margin-top:.6rem; }
.about h2 + p{ margin-top:2rem; }
.about p + p{ margin-top:1.35rem; }
.about p{ color:var(--muted); }
.about .sig{
  margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--hairline);
  font-family:"Fraunces",serif; font-size:var(--step-1); color:var(--moss-deep);
}

/* Praxis-Band */
.band{ position:relative; overflow:hidden; }
.band img{ width:100%; height:clamp(320px,52vh,560px); object-fit:cover; }
.band__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(1.5rem,4vw,3rem);
  background:linear-gradient(to top, rgba(35,43,32,.72), transparent);
  color:var(--canvas);
}
.band__caption p{ font-family:"Fraunces",serif; font-size:var(--step-2); font-weight:300; }

/* Disclaimer */
.disclaimer{
  margin-top:2.5rem; padding:1.15rem 1.4rem;
  border:1px solid var(--hairline); border-radius:1rem;
  background:rgba(35,43,32,.025);
  font-size:var(--step--1); color:var(--muted); max-width:70ch;
}

/* CTA + Kontakt */
.cta{ text-align:center; padding-block:clamp(5rem,10vw,8rem); }
.cta h2{ font-size:var(--step-3); max-width:18ch; margin-inline:auto; }
.cta__actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }

.sec--contact{ padding-block:clamp(2.5rem,5vw,4rem); }
.contact__mark{ height:77px; width:auto; display:block; margin-bottom:2.4rem; }
.contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.contact h2,
.contact h3{ font-family:"Satoshi",sans-serif; font-size:.68rem; text-transform:uppercase; letter-spacing:.22em; color:var(--brass); font-weight:500; }
.contact div p{ margin-top:1rem; line-height:1.8; }
.contact a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color 240ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .contact a:hover{ border-color:var(--brass); } }

/* Footer */
.footer{ border-top:1px solid var(--hairline); padding-block:2.5rem; }
.footer__row{ display:flex; justify-content:space-between; gap:.7rem 1.5rem; flex-wrap:wrap; align-items:center; font-size:var(--step--1); color:var(--muted); }
.footer nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer a{ text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .footer a:hover{ color:var(--moss-deep); } }

/* =========================================================================
   SCROLL-REVEAL - nur transform + opacity, Stagger ueber --i
   ========================================================================= */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 60ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================================
   RESPONSIVE - unter 900px konsequent einspaltig
   ========================================================================= */
@media (max-width:1000px){
  .trust ul{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
  .contact{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  :root{ --shell:min(1240px, 100% - 2rem); }
  .nav__links{ display:none; }
  .nav .btn--nav{ display:none; }
  .burger{ display:block; }
  .hero{ padding-block:7.5rem 3rem; }
  .hero__grid,.quote__body,.about{ grid-template-columns:1fr; }
  .hero h1{ max-width:none; }
  .hero__figure{ order:-1; }
  .hero__figure img{ aspect-ratio:3/2; }
  .hero__stamp{ left:auto; right:1rem; bottom:1rem; }
  .about__figure img{ aspect-ratio:3/2; }
  .card,.card--wide,.card--slim,.card--row{ grid-column:span 12; }
  .card--row .card__inner{ flex-direction:column; align-items:flex-start; }
  .contact{ grid-template-columns:1fr; gap:2rem; }
  .trust ul{ grid-template-columns:1fr; }
  .quote blockquote{ max-width:none; }
}

/* =========================================================================
   REDUZIERTE BEWEGUNG - Opazitaet bleibt, Bewegung faellt weg
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* =========================================================================
   UNTERSEITEN
   Jede Leistungsseite konvertiert fuer sich: Hero -> Inhalt -> Trust -> CTA
   ========================================================================= */
.page-hero{ padding-block:9.5rem clamp(3rem,6vw,5rem); }
.page-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.page-hero h1{ font-size:var(--step-4); max-width:15ch; }
.page-hero__lead{
  color:var(--muted); font-size:var(--step-1); font-weight:300;
  line-height:1.55; max-width:44ch; margin-top:1.75rem;
}
.crumb{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  font-size:var(--step--1); color:var(--muted); margin-bottom:1.75rem;
}
.crumb a{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color 240ms var(--ease-out); }
.crumb span{ color:var(--brass); }
@media (hover:hover) and (pointer:fine){ .crumb a:hover{ border-color:var(--brass); } }

/* Selbstpruefungs-Fragen als editoriale Liste, nicht als Kartenreihe */
.checkin{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,4rem); }
.checkin p{
  border-top:1px solid var(--hairline); padding-block:1.15rem;
  font-family:"Fraunces",serif; font-size:var(--step-1); font-weight:300; line-height:1.3;
}

/* =========================================================================
   METHODEN - typografisch statt bildgetrieben.
   Linke Spalte traegt Nummer und Titel und bleibt beim Scrollen stehen;
   rechts laeuft der Text. Ungleich lange Abschnitte fallen so nicht auf,
   weil daneben keine Bildflaeche steht, die ausgeglichen werden muesste.
   ========================================================================= */
.methods{ border-top:1px solid var(--hairline); }
.method{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,9fr);
  gap:clamp(1.5rem,5vw,4.5rem);
  padding-block:clamp(2.75rem,6vw,4.5rem);
  border-bottom:1px solid var(--hairline);
  align-items:start;
}
.method__head{ position:sticky; top:8rem; }
.method__no{
  display:block; font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(2.6rem,5.5vw,4.25rem); line-height:.9; letter-spacing:-.03em;
  color:var(--brass); opacity:.42; margin-bottom:.75rem;
}
.method__head h2{ font-size:var(--step-2); max-width:none; }
.method__body{ max-width:60ch; }
.method__body p{ color:var(--muted); }
.method__body p + p{ margin-top:1.15rem; }
.method__body .card__list{ margin-top:1.5rem; }
/* Erster Satz eines Abschnitts traegt mehr Gewicht - klassischer Vorspann */
.method__body > p:first-child{ color:var(--moss-deep); font-size:var(--step-1); font-weight:300; line-height:1.55; }


/* Praxisraeume - einmal gezeigt, an einer Stelle, statt ueber alle Seiten verteilt */
.rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.75rem,2vw,1.25rem); }
.rooms figure{ margin:0; }
.rooms img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:1.25rem; }
.rooms figcaption{ margin-top:.85rem; font-size:var(--step--1); color:var(--muted); }

/* Ankerbild im Seitenkopf */
/* Ihre Aufnahmen sind querformatig - 4:3 haelt die Komposition zusammen */
.page-hero__figure img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 42%;
  border-radius:calc(var(--radius) + .5rem);
}

@media (max-width:860px){
  .method{ grid-template-columns:1fr; gap:1rem; padding-block:2.5rem; }
  .method__head{ position:static; }
  .method__no{ font-size:2.2rem; margin-bottom:.4rem; }
  .method__head h2{ max-width:none; }
  .rooms{ grid-template-columns:1fr; }
  .page-hero__figure img{ aspect-ratio:3/2; }
}

/* Verweise auf die uebrigen Leistungen */
.more{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.more a{
  /* Inhalt mittig im Kasten - die Kacheln sind gleich hoch, die Texte
     unterschiedlich lang; oben ausgerichtet blieb unten Leere stehen. */
  display:flex; flex-direction:column; justify-content:center;
  min-height:9.5rem;
  text-decoration:none; padding:1.75rem 1.9rem;
  background:var(--canvas);
  border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  transition:background 240ms var(--ease-out), transform 240ms var(--ease-out),
             box-shadow 240ms var(--ease-out);
}
.more strong{ font-family:"Fraunces",serif; font-weight:300; font-size:var(--step-1); display:block; }
.more span{ color:var(--muted); font-size:var(--step--1); display:block; margin-top:.4rem; }
@media (hover:hover) and (pointer:fine){
  .more a:hover{
    transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 34px -22px rgba(35,43,32,.4);
  }
}
.more a:active{ transform:scale(.99); }
.card__link:active{ transform:scale(.97); }
.pindex a:active{ transform:scale(.99); }

@media (max-width:860px){
  .page-hero{ padding-block:7.5rem 2.5rem; }
  .page-hero__grid,.checkin,.method,.more{ grid-template-columns:1fr; }
  .page-hero h1{ max-width:none; }
  .method:nth-child(even) .method__media{ order:0; }
  .method{ gap:1.75rem; }
}

/* Fliesstext-Sektionen auf Inhaltsseiten */
.prose{ max-width:62ch; }
.prose p + p{ margin-top:1.25rem; }
.prose p{ color:var(--muted); }
.prose h3{ font-size:var(--step-2); margin-top:2.75rem; }
.prose h3 + p{ margin-top:1.1rem; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }

/* Kontaktseite - grosszuegiger als der Footer-Block */
.contact--lg{ grid-template-columns:repeat(2,1fr); gap:clamp(2.5rem,5vw,4rem); }
.contact--lg div{ border-top:1px solid var(--hairline); padding-top:1.5rem; }
.contact--lg p{ font-family:"Fraunces",serif; font-size:var(--step-1); font-weight:300; line-height:1.5; }
.contact--lg a{ border-bottom:1px solid var(--hairline); }

/* Qualifikationsliste */
.creds{ list-style:none; padding:0; margin:0; }
.creds li{ border-top:1px solid var(--hairline); padding-block:1.15rem; display:grid; grid-template-columns:5.5rem 1fr; gap:1.5rem; align-items:baseline; }
.creds b{ font-family:"Fraunces",serif; font-weight:300; color:var(--brass); font-size:var(--step-0); }
.creds span{ color:var(--muted); font-size:var(--step-0); }

@media (max-width:860px){
  .split,.contact--lg{ grid-template-columns:1fr; }
  .creds li{ grid-template-columns:1fr; gap:.2rem; }
}

/* Weiterfuehrender Link in Leistungskarten */
.card__link{
  margin-top:auto; padding-top:1.6rem;
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--step--1); font-weight:500; color:var(--moss-deep);
  text-decoration:none; align-self:flex-start;
}
.card__link svg{ width:.8rem; height:.8rem; transition:transform 300ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .card:hover .card__link svg{ transform:translate(2px,-2px); }
}

/* =========================================================================
   LEISTUNGS-DROPDOWN
   Oeffnet aus dem Trigger heraus (transform-origin oben), nicht aus der Mitte.
   ========================================================================= */
.nav__links li.has-sub{ position:relative; }
.nav__trigger{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; padding:.35rem 0; cursor:pointer;
  line-height:inherit;
  font-family:inherit; font-size:var(--step--1); letter-spacing:.01em; color:var(--muted);
  transition:color 220ms var(--ease-out);
}
.nav__chev{ width:.7rem; height:.7rem; transition:transform 280ms var(--ease-out); }
.has-sub[data-open="true"] .nav__trigger{ color:var(--moss-deep); }
.has-sub[data-open="true"] .nav__chev{ transform:rotate(180deg); }

.subnav{
  position:absolute; top:calc(100% + .9rem); left:50%; z-index:2;
  min-width:19rem; padding:.5rem;
  border-radius:1.25rem;
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(35,43,32,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 26px 50px -28px rgba(35,43,32,.5);
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(-6px) scale(.97);
  transform-origin:top center;
  transition:opacity 190ms var(--ease-out), transform 190ms var(--ease-out), visibility 0s 190ms;
}
.has-sub[data-open="true"] .subnav{
  opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
  transition-delay:0s;
}
.subnav a{
  display:block; padding:.6rem .85rem; border-radius:.75rem;
  text-decoration:none; color:var(--moss-deep); font-size:var(--step--1); line-height:1.35;
  transition:background 200ms var(--ease-out);
}
.subnav a small{ display:block; color:var(--muted); font-size:.72rem; margin-top:.15rem; }
.subnav a::after{ content:none; }
.subnav__all{
  margin-top:.35rem; padding-top:.75rem !important;
  border-top:1px solid var(--hairline); border-radius:0 0 .75rem .75rem;
  color:var(--brass) !important;
}
@media (hover:hover) and (pointer:fine){
  .nav__trigger:hover{ color:var(--moss-deep); }
  .subnav a:hover{ background:rgba(35,43,32,.05); }
}

/* Zwischenueberschrift im mobilen Menue */
.drawer__label{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.22em;
  color:var(--brass); text-align:center; margin-top:1.25rem; margin-bottom:.35rem;
  opacity:0; transform:translateY(14px);
  transition:opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.drawer[data-open="true"] .drawer__label{ opacity:1; transform:none; }
.drawer a.is-sub{ font-size:var(--step-1); }
.drawer[data-open="true"] > *:nth-child(7){ transition-delay:380ms; }
.drawer[data-open="true"] > *:nth-child(8){ transition-delay:430ms; }
.drawer[data-open="true"] > *:nth-child(9){ transition-delay:480ms; }
.drawer[data-open="true"] > *:nth-child(10){ transition-delay:530ms; }

/* Icons in den CTA-Pillen etwas groesser, einheitliches Mass */
.btn__chip{ width:2.15rem; height:2.15rem; }
.btn__chip svg{ width:1.05rem; height:1.05rem; }

/* In der breiten Beratungskarte liegt der Link in einer Zeile, nicht am Fuss */
.card--row .card__link{ align-self:center; margin-top:0; padding-top:0; }

/* Gewuenschter Zeilenumbruch in Ueberschriften - nur auf breiten Viewports,
   mobil bricht der Satz natuerlich um. */
br.wide{ display:none; }
@media (min-width:861px){ br.wide{ display:inline; } }

/* Abstand nach dunklen Baendern - sonst klebt die naechste Sektion daran */
.on-dark + .sec,
.on-dark + section > .shell{ padding-top:clamp(4.5rem,9vw,7rem); }
/* Kontaktdaten am Seitenende bleiben kompakt, auch direkt nach einem dunklen Band */
.on-dark + .sec--contact{ padding-top:clamp(2.5rem,5vw,4rem); }
.on-dark + .sec--contact > .shell{ padding-top:0; }

/* Lange deutsche Komposita: Ueberschriften bekommen Platz statt Gewalt.
   break-word wuerde mitten im Wort trennen ("Raucherentwoehnun|g") - deshalb
   nur im Fliesstext. Ueberschriften trennen erst auf sehr schmalen Geraeten,
   und dann korrekt nach Silben. */
p,li,blockquote{ overflow-wrap:break-word; }
h1,h2,h3{ overflow-wrap:normal; }
@media (max-width:420px){
  h1,h2,h3{ hyphens:auto; -webkit-hyphens:auto; }
}

/* =========================================================================
   SCROLL-ERLEBNIS
   Kein Scroll-Hijacking. Das native Scrollen des Geraets bleibt unangetastet -
   Lenis & Co. fuehlen sich auf Trackpads traege an und brechen Barrierefreiheit.
   Stattdessen haengt der Auftritt der Sektionen direkt an der Scrollposition
   (scroll-driven animations). Das laeuft im Compositor, nicht im Main Thread,
   und wirkt dadurch verbunden statt geschaltet.
   Browser ohne Unterstuetzung behalten den IntersectionObserver-Auftritt.
   ========================================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal]{
      opacity:0; transform:none;
      transition:none;
      animation:reveal-in both;
      animation-timeline:view();
      animation-timing-function:var(--ease-out);
      /* Staffelung ueber den Sichtbereich statt ueber Zeitverzoegerung:
         Elemente treten nacheinander ein, waehrend man scrollt. */
      animation-range:entry calc(4% + var(--i,0) * 2.5%) cover calc(21% + var(--i,0) * 2.5%);
    }
    @keyframes reveal-in{
      from{ opacity:0; transform:translateY(16px); }
      to{ opacity:1; transform:none; }
    }

    /* Das Praxisband setzt sich beim Durchscrollen sanft - der Container
       schneidet ab, deshalb ist hier eine Skalierung gefahrlos. */
    .band img{
      animation:band-settle both;
      animation-timeline:view();
      animation-range:entry 0% cover 55%;
      animation-timing-function:var(--ease-out);
      will-change:transform;
    }
    @keyframes band-settle{
      from{ transform:scale(1.06); }
      to{ transform:scale(1); }
    }
  }
}

/* Abgesetzte Sektion - hebt den Ausklang vom uebrigen Seitenfluss ab */
.sec--tinted{
  background:var(--canvas-2);
  /* Ausklang - braucht nicht die volle Sektionshoehe */
  padding-block:clamp(4rem,8vw,6.5rem);
}
.sec--tinted .sec__head{ margin-bottom:clamp(2rem,4vw,3rem); }

/* =========================================================================
   EDITORIAL-AUSBAU
   Nach dem Vorbild der Referenz: Vollbild-Fotografie mit Text darauf,
   ganzflaechige Farbbaender, Bogen-Zuschnitt, Siegel, Versalien-Serif.
   Ersetzt die Kursiv-Akzent-Formel als wiederkehrendes Mittel.
   ========================================================================= */

/* Versalien-Serif - das neue Leitmotiv */
.display{
  font-family:"Fraunces",Georgia,serif; font-weight:300;
  text-transform:uppercase; letter-spacing:.11em; line-height:1.25;
  font-variation-settings:"opsz" 120,"SOFT" 30,"WONK" 0;
}
.display--xl{ font-size:clamp(1.75rem,4.4vw,3.6rem); letter-spacing:.085em; }
.display--lg{ font-size:clamp(1.4rem,2.9vw,2.35rem); }
.display--sm{ font-size:clamp(1rem,1.7vw,1.35rem); letter-spacing:.16em; }

/* Vollbild-Buehne mit Text darauf ---------------------------------------- */
.stage{
  position:relative; isolation:isolate;
  min-height:clamp(560px,88dvh,860px);
  display:grid; align-items:end;
  overflow:hidden;
}
.stage__media{ position:absolute; inset:0; z-index:-2; }
.stage__media img{ width:100%; height:100%; object-fit:cover; }
.stage::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(24,30,20,.88) 0%, rgba(24,30,20,.72) 26%, rgba(24,30,20,.34) 52%, rgba(24,30,20,.06) 74%),
    linear-gradient(to top, rgba(24,30,20,.5) 0%, transparent 38%);
}
.stage__inner{ width:var(--shell); margin-inline:auto; padding-block:clamp(3rem,7vw,6rem); color:var(--canvas); }
.stage__eyebrow{
  display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.3em;
  color:var(--brass-soft); margin-bottom:1.75rem;
}
.stage h1{ max-width:17ch; color:var(--canvas); }
.stage__meta{
  margin-top:2rem; padding-top:1.5rem; max-width:34ch;
  border-top:1px solid rgba(250,246,239,.28);
  color:rgba(250,246,239,.82); font-size:var(--step-0);
}
.stage__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

/* Aussage ueber Vollbild ------------------------------------------------- */
.statement{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  min-height:clamp(380px,55vh,560px);
  padding:clamp(3rem,8vw,6rem) 1.5rem;
}
.statement__media{ position:absolute; inset:0; z-index:-2; }
.statement__media img{ width:100%; height:100%; object-fit:cover; }
.statement::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(28,34,24,.68);
}
.statement p{ color:var(--canvas); max-width:24ch; }
.statement small{
  display:block; margin-top:1.75rem; color:var(--brass-soft);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.28em;
}

/* Geteiltes Farbband: Bild und Text in einer Flaeche ---------------------- */
.slab{ background:var(--moss); color:var(--canvas); }
.slab__grid{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  width:min(1560px,100%); margin-inline:auto;
}
.slab__media{ min-height:clamp(320px,46vw,620px); }
.slab__media img{ width:100%; height:100%; object-fit:cover; }
.slab__body{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem);
}
.slab__body h2{ color:var(--canvas); max-width:18ch; }
.slab__body p{
  margin-top:1.75rem; color:rgba(250,246,239,.76);
  max-width:44ch; font-size:var(--step-1); font-weight:300; line-height:1.6;
}
.slab .label{ color:var(--brass-soft); }

/* Bogen-Zuschnitt --------------------------------------------------------- */
.arch{ position:relative; }
.arch img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:999px 999px 1.5rem 1.5rem;
}

/* Siegel - kreisender Text, ueberlagert das Bild ------------------------- */
.seal{
  position:absolute; right:-1.75rem; bottom:2.5rem;
  width:8.5rem; height:8.5rem; border-radius:999px;
  display:grid; place-items:center;
  background:var(--canvas);
  box-shadow:0 22px 44px -26px rgba(35,43,32,.55);
}
.seal svg{ width:100%; height:100%; animation:seal-turn 28s linear infinite; }
.seal text{
  font-family:"Fraunces",serif; font-size:8.2px; letter-spacing:.24em;
  text-transform:uppercase; fill:var(--brass);
}
.seal__mark{
  position:absolute; width:2.1rem; height:2.1rem;
  background:var(--brass); border-radius:999px; opacity:.14;
}
@keyframes seal-turn{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .seal svg{ animation:none; } }

@media (max-width:860px){
  .slab__grid{ grid-template-columns:1fr; }
  .slab__media{ min-height:58vw; }
  .stage{ min-height:clamp(520px,82dvh,720px); }
  .stage h1{ max-width:none; }
  .seal{ width:6.5rem; height:6.5rem; right:-.5rem; bottom:1rem; }
  .arch img{ aspect-ratio:3/4; }
}


/* Buehne: durchgehend gruene Flaeche, das Foto sitzt gerahmt darauf.
   Der Hintergrund laeuft randlos, der Inhalt richtet sich an der
   Seitenbreite aus - deshalb das padding-inline mit max(). */
.stage--split{
  display:grid; grid-template-columns:1.06fr .94fr;
  align-items:center; gap:clamp(2rem,5vw,4.5rem);
  background:var(--moss);
  min-height:clamp(620px,92dvh,900px);
  padding-block:clamp(7.5rem,11vw,9.5rem) clamp(4rem,8vw,6rem);
  padding-inline:max(1.5rem, calc((100% - 1240px) / 2));
}
.stage--split::after{ content:none; }

/* Foto ohne Rahmung und ohne Schatten direkt auf der Flaeche */
.stage--split .stage__media{
  position:relative; inset:auto; z-index:0;
  padding:0; background:none; border:0; box-shadow:none;
}
.stage--split .stage__media img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 16%;
  border-radius:calc(var(--radius) + .5rem);
}
.stage--split .stage__inner{
  width:auto; margin:0; padding:0; max-width:34rem;
}

@media (max-width:860px){
  .stage--split{
    grid-template-columns:1fr; min-height:0;
    /* nicht zentrieren: die Zeilen sollen an ihrem Inhalt haengen, sonst
       entsteht zwischen Foto und Text eine Leere */
    align-items:start; align-content:start;
    gap:2rem;
    padding-block:6rem 3.25rem;
  }
  .stage--split .stage__media{ order:-1; margin-bottom:0; }
  .stage--split .stage__media img{ aspect-ratio:3/4; }
  .stage--split .stage__inner{ max-width:none; }
  .stage__meta{ margin-top:1.5rem; padding-top:1.25rem; }
  .stage__actions{ margin-top:1.75rem; }
}

/* =========================================================================
   EINWILLIGUNG UND KARTE
   ========================================================================= */
.consent{
  position:fixed; left:1.25rem; bottom:1.25rem; z-index:90;
  width:min(26rem, calc(100vw - 2.5rem));
  padding:1.5rem 1.6rem 1.35rem;
  background:var(--canvas); border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 34px 60px -34px rgba(35,43,32,.6);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transform-origin:bottom left;
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms;
}
.consent[data-open="true"]{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.consent__title{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.24em;
  color:var(--brass); font-weight:500;
}
.consent__text{ margin-top:.9rem; color:var(--muted); font-size:var(--step--1); line-height:1.6; }
.consent__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.35rem; }
.consent__actions .btn{ font-size:.82rem; padding-left:1.1rem; }
.consent__actions .btn__chip{ width:1.85rem; height:1.85rem; }
.consent__actions .btn__chip svg{ width:.9rem; height:.9rem; }
.consent__link{
  display:inline-block; margin-top:1.1rem;
  font-size:var(--step--1); color:var(--muted);
  text-decoration:none; border-bottom:1px solid var(--hairline);
}
@media (max-width:520px){
  .consent{ left:.75rem; right:.75rem; bottom:.75rem; width:auto; }
}

/* Karte: bis zur Zustimmung ein sprechender Platzhalter, kein leeres Feld */
.mapbox{
  margin:0; position:relative; overflow:hidden;
  aspect-ratio:16/10; border-radius:var(--radius);
  background:var(--canvas-2); border:1px solid var(--hairline);
}
.mapbox iframe{ width:100%; height:100%; border:0; display:block; }
.mapbox__ask{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center; padding:2rem 1.75rem;
  background:
    repeating-linear-gradient(-45deg, rgba(156,116,52,.06) 0 1px, transparent 1px 12px),
    var(--canvas-2);
}
.mapbox__ask p{ color:var(--muted); font-size:var(--step--1); max-width:34ch; line-height:1.6; }
.mapbox__ask strong{
  display:block; font-family:"Fraunces",serif; font-weight:300;
  font-size:var(--step-1); color:var(--moss-deep); margin-bottom:.2rem;
}

/* =========================================================================
   ZEILENUMBRUCH
   balance verteilt die Zeilen einer Ueberschrift gleichmaessig - damit steht
   kein Wort mehr allein in einer Zeile. pretty verhindert Schusterjungen am
   Absatzende. Beides ohne feste Umbruchmarken, also unabhaengig von der
   Geraetebreite.
   ========================================================================= */
h1,h2,h3,blockquote,.display,.sec__head p,.stage__meta,.page-hero__lead{
  text-wrap:balance;
}
p,li,.method__body p,.prose p{ text-wrap:pretty; }

/* =========================================================================
   SCHMALE GERAETE (Android ab 360, iPhone SE)
   Versalien mit weiter Sperrung machen lange deutsche Woerter uebermaessig
   breit - dann passt pro Zeile nur noch eines. Auf schmalen Schirmen wird die
   Sperrung deshalb zurueckgenommen und die Schrift etwas kleiner.
   ========================================================================= */
@media (max-width:520px){
  .display{ letter-spacing:.05em; }
  .display--xl{ font-size:clamp(1.55rem,7.2vw,2.1rem); letter-spacing:.04em; }
  .display--lg{ font-size:clamp(1.28rem,5.6vw,1.7rem); letter-spacing:.045em; }
  .display--sm{ letter-spacing:.12em; }
  .stage__eyebrow{ letter-spacing:.2em; font-size:.6rem; }
  .label{ letter-spacing:.18em; }

  /* Siegel ragte um zwei Pixel ueber den rechten Rand */
  .seal{ right:0; bottom:.75rem; width:5.75rem; height:5.75rem; }
  .seal text{ font-size:8.8px; letter-spacing:.2em; }
}

/* =========================================================================
   RECHTSTEXTE
   Listen und Inline-Auszeichnungen fuer Impressum und Datenschutz. Die
   Seite kennt sonst keine Aufzaehlungspunkte - daher ein eigener, feiner
   Marker in Messing statt des Browser-Defaults.
   ========================================================================= */
.prose ul{ list-style:none; padding:0; margin:1.4rem 0 0; }
.prose ul li{
  position:relative; padding-left:1.5rem; color:var(--muted);
  line-height:1.6;
}
.prose ul li + li{ margin-top:.7rem; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.82em;
  width:6px; height:1px; background:var(--brass);
}
.prose ul + p{ margin-top:1.4rem; }
.prose ul + h3{ margin-top:2.75rem; }

/* Impressum und Datenschutz haben deutlich laengere Bezeichnungen als die
   Qualifikationsliste auf "Ueber mich" - dort wuerde eine breitere Spalte
   nur Luecken reissen, hier bricht sie sonst mitten im Wort. */
.creds--legal li{ grid-template-columns:8.5rem 1fr; }
.creds--legal b{ hyphens:auto; }
@media (max-width:860px){
  .creds--legal li{ grid-template-columns:1fr; }
}
.prose ul li b{ color:var(--moss-deep); font-weight:500; }
.prose p b{ color:var(--moss-deep); font-weight:500; }
.prose p strong{ color:var(--moss-deep); font-weight:500; }
/* Schluesselname im Browserspeicher - laenger als der Fliesstext vertraegt */
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86em; color:var(--moss-deep);
  background:var(--canvas-2); border-radius:3px;
  padding:.12em .4em; overflow-wrap:anywhere;
}