/* =====================================================================
   Schriften lokal (keine Anfrage an Google)
   Erzeugt mit scratchpad/fonts-lokal.mjs aus den Google-Fonts-Dateien.
   ===================================================================== */
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-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; }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-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:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400-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; }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400-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:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-normal-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; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/cormorant-garamond-300-normal-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:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400-normal-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; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-garamond-400-normal-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:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-normal-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; }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/cormorant-garamond-500-normal-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:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jost-400-normal-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; }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jost-400-normal-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:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jost-500-normal-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; }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jost-500-normal-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; }
/* =====================================================================
   LA MANIFESTA — Designsystem
   Editorial · ruhig · hochwertig
   Flächen: tiefes Anthrazit (Nacht) und warmes Off-White (Papier).
   Champagner und Violett nur als Akzent. Keine Verläufe auf Text/Buttons.
   ===================================================================== */
:root{
  /* Helle Flächen */
  --cream:#fbf8f5;
  --blush:#f3f2f6;
  --blush-2:#e9e7ef;
  --mauve:#dcd9e4;
  --mauve-2:#eceaf1;
  /* Tiefe Töne (Text, Sticky-Leiste, Buch-Overlay) */
  --plum:#2b2226;
  --plum-2:#3a2f34;

  /* Gold */
  --gold:#8f6b2c;            /* Button-Fläche, weiße Schrift 4,9:1 */
  --gold-hover:#7a5a24;
  --gold-line:#b8923f;       /* Linien, Ziffern, Deko */
  --gold-ink:#7d5f27;        /* Labels auf Creme 5,3:1 */
  --gold-ink-2:#6b4f1e;      /* Labels auf Mauve 4,5:1 */
  --rose-ink:#625c78;        /* kursive Akzente auf Creme 6:1 */
  --rose-ink-2:#57516c;      /* kursive Akzente auf Grau-Lavendel 5,4:1 */

  /* Text */
  --on-light:#2b2226;
  --on-light-soft:#4d4146;
  --on-light-mute:#5e5055;
  --on-dark:#f7efe9;
  --on-dark-soft:rgba(247,239,233,.78);
  --on-dark-mute:rgba(247,239,233,.6);

  /* Typografie */
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Jost","Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif;

  --fs-display:clamp(2.3rem, 1.5rem + 2.3vw, 3.5rem);
  --fs-h1:clamp(2.4rem, 1.6rem + 3.2vw, 4.3rem);
  --fs-h2:clamp(2rem, 1.45rem + 2.3vw, 3.4rem);
  --fs-h3:clamp(1.4rem, 1.2rem + .8vw, 1.85rem);
  --fs-lead:clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-label:.74rem;

  /* Raum */
  --maxw:1240px;
  --gutter:clamp(20px, 5vw, 56px);
  --sec:clamp(88px, 10vw, 160px);
  --header-h:76px;
  --shadow:0 30px 60px -32px rgba(43,34,38,.45);
  --shadow-soft:0 8px 20px -10px rgba(43,34,38,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Alte Namen, die Bausteine noch nutzen */
  --ink:var(--plum); --ink-2:var(--plum-2); --ink-3:#4a3d43;
  --paper:var(--cream); --paper-2:var(--blush); --paper-3:var(--blush-2);
  --champagne:var(--gold-line); --champagne-soft:#d4b77a; --champagne-ink:var(--gold-ink);
  --on-ink:var(--on-dark); --on-ink-soft:var(--on-dark-soft); --on-ink-mute:var(--on-dark-mute);
  --on-paper:var(--on-light); --on-paper-soft:var(--on-light-soft); --on-paper-mute:var(--on-light-mute);
}
/* Flächen: alle hell. „on-ink" heißt jetzt Mauve, „on-ink-2" helles Mauve. */
:root, .on-paper, .on-paper-2{
  --fg:var(--on-light); --fg-soft:var(--on-light-soft); --fg-mute:var(--on-light-mute);
  --accent:var(--gold-ink); --em:var(--rose-ink);
  --line:rgba(43,34,38,.12); --line-strong:rgba(43,34,38,.3);
  --focus:var(--plum);
}
.on-ink, .on-ink-2{
  --fg:var(--on-light); --fg-soft:var(--on-light-soft); --fg-mute:var(--on-light-mute);
  --accent:var(--gold-ink-2); --em:var(--rose-ink-2);
  --line:rgba(43,34,38,.16); --line-strong:rgba(43,34,38,.34);
  --focus:var(--plum);
}
.on-paper{ background:var(--cream); color:var(--fg); }
.on-paper-2{ background:var(--blush); color:var(--fg); }
.on-ink{ background:var(--mauve); color:var(--fg); }
.on-ink-2{ background:var(--mauve-2); color:var(--fg); }
/* ---------- Basis ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0; background:var(--paper); color:var(--fg);
  font:400 var(--fs-body)/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img, picture, svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
p{ margin:0 0 1.1em; color:var(--fg-soft); }
p:last-child{ margin-bottom:0; }
ul, ol{ margin:0; padding:0; }
h1, h2, h3, h4{ margin:0; font-family:var(--serif); font-weight:400; color:var(--fg); }
.t-display, .t-h1, .t-h2{ font-weight:300; }
/* Versalziffern: Mediävalziffern der Cormorant lesen sich sonst als „OI“ */
.t-display, .t-h1, .t-h2, .t-h3{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
::selection{ background:rgba(214,211,226,.9); color:var(--plum); }

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:16px; top:-80px; z-index:400; background:var(--ink); color:var(--on-ink); padding:12px 18px; text-decoration:none; transition:top .2s; }
.skip:focus{ top:16px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:900px; }
.sec{ padding-block:var(--sec); position:relative; }
section[id], .acc-group[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }
.sec--tight{ padding-block:clamp(72px, 8vw, 128px); }
/* ---------- Typografie ---------- */
.t-display{ font-size:var(--fs-display); line-height:1.02; letter-spacing:-.022em; }
.t-h1{ font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.018em; }
.t-h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.014em; }
.t-h3{ font-size:var(--fs-h3); line-height:1.22; letter-spacing:-.005em; }
.t-display em, .t-h1 em, .t-h2 em, .t-h3 em{ font-style:italic; color:var(--em); }
.t-display em, .t-h1 em, .t-h2 em{ display:block; }
.label{
  display:block; margin:0 0 1.5rem;
  font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
}
.lead{ font-size:var(--fs-lead); line-height:1.65; color:var(--fg-soft); max-width:36em; }
.small{ font-size:var(--fs-small); color:var(--fg-mute); }
.head{ max-width:760px; margin-bottom:clamp(48px, 6vw, 88px); }
.head .lead{ margin-top:1.6rem; }
/* ---------- Buttons & Links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.85em;
  min-height:56px; padding:0 2.1rem;
  border:1px solid transparent; border-radius:999px;
  font:500 .78rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  box-shadow:var(--shadow-soft);
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn .arr{ width:18px; height:10px; flex:none; transition:transform .45s var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ background:var(--gold-hover); }
.btn--ink{ background:var(--plum); color:#fff; }
.btn--ink:hover{ background:var(--plum-2); }
.btn--ghost{ border-color:var(--line-strong); color:var(--fg); background:transparent; box-shadow:none; }
.btn--ghost:hover{ border-color:var(--fg); }
.btn--sm{ min-height:44px; padding:0 1.3rem; font-size:.75rem; }
.btn--block{ width:100%; }

.link{
  display:inline-flex; align-items:center; gap:.7em; min-height:44px;
  font:500 .8125rem/1.3 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--fg); text-decoration:none; background:none; border:0; padding:0; cursor:pointer;
}
.link span{
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom:3px; transition:background-size .5s var(--ease-out);
}
.link:hover span{ background-size:0 1px; background-position:100% 100%; }
.link .arr{ width:16px; height:10px; transition:transform .45s var(--ease-out); }
.link:hover .arr{ transform:translateX(4px); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }
/* ---------- Kopfzeile ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  color:var(--plum);
  transition:background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(251,248,245,.95);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--on-paper);
  box-shadow:0 1px 0 rgba(43,34,38,.08);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; height:var(--header-h); }
.brand{
  display:inline-flex; align-items:center; gap:.75rem; min-height:44px;
  text-decoration:none; font:500 1.05rem/1 var(--serif); letter-spacing:.26em; text-transform:uppercase;
}
.nav__links{ display:flex; gap:clamp(1.4rem, 2.4vw, 2.4rem); list-style:none; }
.nav__links a{
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:.75rem 0;
  font:400 .78rem/1 var(--sans); letter-spacing:.17em; text-transform:uppercase;
  text-decoration:none; opacity:.8; transition:opacity .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:.45rem; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ opacity:1; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta.btn{ min-height:44px; padding:0 1.35rem; font-size:.72rem; }

.menu-btn{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer; position:relative;
}
.menu-btn i{
  position:absolute; left:11px; right:11px; height:1px; background:currentColor;
  transition:transform .45s var(--ease-out), top .45s var(--ease-out);
}
.menu-btn i:nth-child(1){ top:18px; }
.menu-btn i:nth-child(2){ top:25px; }
.menu-open .menu-btn i:nth-child(1){ top:21.5px; transform:rotate(45deg); }
.menu-open .menu-btn i:nth-child(2){ top:21.5px; transform:rotate(-45deg); }
/* Vollbild-Menü */
.menu{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--header-h) + 3vh) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background:var(--blush); color:var(--plum);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
  overflow-y:auto;
}
.menu-open .menu{ opacity:1; visibility:visible; }
.menu-open{ overflow:hidden; }
.menu-open .site-header{ background:transparent; color:var(--plum); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.menu__links{ list-style:none; }
.menu__links li{ border-bottom:1px solid rgba(43,34,38,.12); opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .6s var(--ease-out); }
.menu-open .menu__links li{ opacity:1; transform:none; }
.menu-open .menu__links li:nth-child(2){ transition-delay:.04s; }
.menu-open .menu__links li:nth-child(3){ transition-delay:.08s; }
.menu-open .menu__links li:nth-child(4){ transition-delay:.12s; }
.menu-open .menu__links li:nth-child(5){ transition-delay:.16s; }
.menu-open .menu__links li:nth-child(6){ transition-delay:.2s; }
.menu__links a{
  display:flex; justify-content:space-between; align-items:baseline; padding:.95rem 0;
  font:400 clamp(1.9rem, 7.5vw, 2.6rem)/1.1 var(--serif); text-decoration:none;
}
.menu__links a small{ font:500 .7rem/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.menu__foot{ display:grid; gap:1rem; padding-top:2rem; }
.menu__foot p{ font-size:.85rem; color:var(--on-light-mute); text-align:center; margin:0; }

@media (max-width:980px){
  .nav__links, .nav__cta{ display:none; }
  .menu-btn{ display:block; }
}
@media (min-width:981px){ .menu{ display:none; } }
/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:clip;
  min-height:min(100svh, 980px);
  display:grid; align-items:center;
  padding:calc(var(--header-h) + clamp(32px, 6vw, 72px)) 0 clamp(64px, 8vw, 112px);
  background:
    radial-gradient(55% 60% at 74% 50%, rgba(201,169,110,.11), transparent 70%),
    radial-gradient(45% 55% at 8% 100%, rgba(168,152,201,.08), transparent 70%),
    var(--ink);
}
.hero h1{ max-width:13em; }
.hero .actions{ margin-top:2.4rem; }
/* Lade-Animation im Hero */
.js [data-load]{ opacity:0; transform:translateY(14px); animation:rise 1.1s var(--ease-out) var(--d,0s) forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
/* ---------- Die Person hinter der Marke ---------- */
.founder{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px, 7vw, 120px); align-items:center; }
.founder__photos{ position:relative; padding:0 8% 0 0; }
.founder__photos .figure{ aspect-ratio:4/4.6; }
.founder blockquote{ margin:2rem 0 0; font:italic 300 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.45 var(--serif); color:var(--fg); }
.founder blockquote p{ color:inherit; }
.founder figcaption{ margin-top:1.2rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-mute); }
/* ---------- Seitenkopf (Unterseiten) ---------- */
.page-head{
  overflow:clip;
  padding:calc(var(--header-h) + clamp(56px, 8vw, 120px)) 0 clamp(64px, 8vw, 112px);
  background:var(--mauve);
}
.page-head .lead{ margin-top:1.8rem; }
.coda{ margin-top:clamp(48px, 6vw, 80px); font:italic 400 var(--fs-h3)/1.35 var(--serif); color:var(--em); }
/* ---------- II · Perspektive ---------- */
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 7vw, 120px); align-items:center; }
.figure{ position:relative; margin:0; overflow:hidden; border-radius:2px; aspect-ratio:4/5; background:var(--blush-2); box-shadow:var(--shadow); }
.figure img{ width:100%; height:112%; object-fit:cover; transform:translate3d(0, var(--py,0px), 0); will-change:transform; }
.figure figcaption{ position:absolute; left:1.25rem; bottom:1.1rem; font:500 .7rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--on-ink-mute); }
/* ---------- Schluss ---------- */
.final{ text-align:center; }
.final h2{ max-width:15em; margin-inline:auto; }
.final .actions{ justify-content:center; margin-top:3rem; }
.pull{ margin-top:clamp(40px, 5vw, 64px); font:italic 400 var(--fs-h2)/1.15 var(--serif); color:var(--em); max-width:18em; }
.prose h2{ font-size:var(--fs-h3); margin:3rem 0 1rem; }
.prose h2:first-child{ margin-top:0; }
.prose section{ padding-block:2rem; border-top:1px solid var(--line); scroll-margin-top:calc(var(--header-h) + 24px); }
.note{ padding:1rem 1.2rem; border-left:2px solid var(--accent); background:rgba(201,169,110,.08); font-size:.95rem; color:var(--fg-soft); }
/* ---------- Akkordeon ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; width:100%; min-height:64px;
  padding:1.4rem 0; background:none; border:0; text-align:left; cursor:pointer;
  font:400 clamp(1.15rem, 1.05rem + .4vw, 1.4rem)/1.35 var(--serif); color:var(--fg);
}
.acc-q::after{ content:""; flex:none; width:12px; height:12px; background:linear-gradient(currentColor,currentColor) 50%/12px 1px no-repeat, linear-gradient(currentColor,currentColor) 50%/1px 12px no-repeat; color:var(--accent); transition:transform .4s var(--ease-out); }
.acc-item.open .acc-q::after{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out); }
.acc-a-in{ padding:0 3rem 1.6rem 0; color:var(--fg-soft); max-width:44em; }
.acc-group + .acc-group{ margin-top:clamp(48px, 6vw, 80px); }
.acc-group h2{ font-size:var(--fs-h3); margin-bottom:1.2rem; }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
/* ---------- Fußzeile ---------- */
.site-footer{ padding:clamp(72px, 9vw, 128px) 0 2rem; }
.foot{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px, 4vw, 56px); }
.foot__brand .brand{ color:var(--plum); }
.foot__claim{ margin-top:1.4rem; font:italic 400 1.3rem/1.4 var(--serif); color:var(--rose-ink-2); }
.foot h2{ font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink-2); margin-bottom:1.1rem; }
.foot ul{ list-style:none; display:grid; gap:0; }
.foot ul a{ display:inline-flex; align-items:center; min-height:44px; padding:0; font-size:.93rem; color:var(--on-light-soft); text-decoration:none; transition:color .3s; }
.foot ul a:hover{ color:var(--plum); }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 2rem;
  margin-top:clamp(56px, 7vw, 96px); padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--on-light-mute);
}
.foot__bottom ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.foot__bottom a{ color:inherit; text-decoration:none; }
.foot__bottom a:hover{ color:var(--plum); }
/* ---------- Mobile Sticky CTA ---------- */
.sticky{
  position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:8px 8px 8px 18px; border-radius:3px;
  background:rgba(43,34,38,.96); color:var(--on-dark);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 24px)); transition:transform .55s var(--ease-out);
}
.sticky.is-visible{ transform:none; }
.sticky__t{ display:grid; line-height:1.25; }
.sticky__t b{ font:400 1.1rem/1.2 var(--serif); }
.sticky__t span{ font-size:.78rem; color:var(--on-dark-mute); letter-spacing:.04em; }
@media (min-width:981px){ .sticky{ display:none; } }
/* ---------- Scroll-Reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity 1s var(--ease-out) var(--d,0s), transform 1.1s var(--ease-out) var(--d,0s); }
.js .reveal.in{ opacity:1; transform:none; }
@property --page-h{ syntax:"<length>"; inherits:true; initial-value:600px; }
@keyframes reader-in{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes intro-out{ to{ opacity:0; visibility:hidden; } }
@keyframes mist-a{ from{ transform:translate(-8%,6%) scale(.9); opacity:0; } 40%{ opacity:1; } to{ transform:translate(6%,-4%) scale(1.05); opacity:.9; } }
@keyframes mist-b{ from{ transform:translate(8%,-4%) scale(.95); opacity:0; } 45%{ opacity:1; } to{ transform:translate(-6%,5%) scale(1.08); opacity:.8; } }
@keyframes dust{ 0%{ opacity:0; transform:translateY(0); } 25%{ opacity:.85; } 100%{ opacity:0; transform:translateY(calc(-60vh - 10vh * var(--r, 1))); } }
@keyframes logo-drift{ from{ transform:scale(.96); } to{ transform:scale(1.03); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes moon{ from{ opacity:0; transform:translateY(8px) scale(.9); } to{ opacity:1; transform:none; } }
@keyframes word{ from{ opacity:0; filter:blur(6px); letter-spacing:.42em; } to{ opacity:1; filter:blur(0); letter-spacing:.14em; } }
@keyframes fade{ to{ opacity:1; } }
/* =====================================================================
   V1-Bausteine
   Methode, Journal-Bereiche, Angebot, Wiedererkennung, Durchblättern,
   Schlussabschnitte und Popup.
   ===================================================================== */
/* Ruhige Absatzfolge in schmalen Abschnitten */
.prose-lead{ margin-top:clamp(28px, 3.5vw, 48px); max-width:38em; }
.prose-lead p{ font-size:var(--fs-lead); line-height:1.7; }
.mstep{ display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:clamp(24px, 5vw, 80px); padding:clamp(40px, 5.5vw, 88px) 0; border-top:1px solid var(--line); }
.mstep:last-child{ border-bottom:1px solid var(--line); }
.mstep__num{ display:block; font:300 clamp(4rem, 2rem + 8vw, 9rem)/.85 var(--serif); color:var(--accent); opacity:.38; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.mstep__name{ margin-top:1.2rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--fg); }
.mstep__claim{ margin-bottom:1.4rem; font:400 var(--fs-h3)/1.3 var(--serif); color:var(--fg); }
.mstep p{ max-width:34em; }
.mstep .coda{ margin-top:clamp(24px, 3vw, 40px); }
/* ---------- Miriams Geschichte ---------- */
.story{ margin-top:1.6rem; }
.story p{ font-size:var(--fs-lead); line-height:1.7; }
/* ---------- Schlussabschnitte ---------- */
.faq__foot{ margin-top:clamp(48px, 6vw, 80px); padding-top:clamp(32px, 4vw, 48px); border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr); gap:1.6rem; justify-items:start; }
.final__text{ max-width:40em; margin:clamp(28px, 3.5vw, 48px) auto 0; }
.final__text p{ font-size:var(--fs-lead); line-height:1.7; }
.final__method{ margin:clamp(32px, 4vw, 56px) 0; font:italic 400 var(--fs-h3)/1.35 var(--serif); color:var(--em); }
.final .small{ margin-top:1.2rem; }
/* ---------- Lead-Popup ---------- */
.popup{ position:fixed; inset:0; z-index:300; }
.popup[hidden]{ display:none; }
.popup__bg{ position:absolute; inset:0; background:rgba(43,34,38,.45); opacity:0; transition:opacity .45s var(--ease); }
.popup.in .popup__bg{ opacity:1; }
.popup__box{
  position:absolute; left:50%; top:50%; width:min(520px, calc(100vw - 32px));
  transform:translate(-50%,-44%); opacity:0; transition:opacity .45s var(--ease), transform .6s var(--ease-out);
  padding:clamp(28px, 4vw, 44px); background:var(--cream); border:1px solid var(--line); box-shadow:var(--shadow); text-align:center;
}
.popup.in .popup__box{ opacity:1; transform:translate(-50%,-50%); }
.popup .label{ display:flex; justify-content:center; }
.popup .t-h3{ margin:.4rem 0 1rem; }
.popup .btn{ margin-top:1.8rem; }
.popup__meta{ margin-top:1rem; }
.popup__close{ position:absolute; right:8px; top:8px; width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:var(--fg-mute); cursor:pointer; }
.popup__close:hover{ color:var(--fg); }
.popup__close svg{ width:14px; height:14px; }

/* ---------- V1-Bausteine auf kleinen Displays ---------- */
@media (max-width:980px){
  .mstep{ grid-template-columns:1fr; gap:1.2rem; padding:clamp(32px, 6vw, 56px) 0; }
  .mstep__num{ font-size:clamp(3rem, 2rem + 5vw, 4.5rem); }
  .mstep__name{ margin-top:0; }
  .faq__foot{ justify-items:stretch; }
}

@media (max-width:600px){
  .popup__box{ top:auto; bottom:0; left:0; width:100%; transform:translateY(24px); border-radius:18px 18px 0 0; padding-bottom:max(28px, env(safe-area-inset-bottom)); }
  .popup.in .popup__box{ transform:none; }
}
/* =====================================================================
   V2-Bausteine
   Hero ohne Foto, Methode als Reise, Angebots-Reise, Ablauf, Listen,
   Preis, Hinweise, Platzhalter, Formular.
   ===================================================================== */
/* ---------- Einstieg: Nacht geht in Morgen über, getragen von Typografie ---------- */
.hero{
  position:relative; overflow:clip; min-height:auto; display:block;
  padding:calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(72px, 10vw, 140px);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(168,152,201,.22), transparent 70%),
    linear-gradient(180deg, var(--mauve) 0%, var(--blush) 46%, var(--cream) 100%);
  color:var(--fg);
}
.hero--collage{ padding:calc(var(--header-h) + clamp(20px, 3vw, 40px)) 0 clamp(72px, 9vw, 128px); }
.collage{ position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); align-items:center; min-height:min(84svh, 820px); }
.collage__a{ grid-column:1 / 8; grid-row:1; margin:0; align-self:stretch; overflow:hidden; box-shadow:var(--shadow); }
.collage__a picture{ display:block; height:100%; }
.collage__a img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.collage__box{ grid-column:6 / 13; grid-row:1; z-index:2; position:relative; text-align:center;
  padding:clamp(32px, 4vw, 64px) clamp(24px, 4vw, 56px); background:var(--cream); box-shadow:var(--shadow); }
.collage__box h1{ font-size:var(--fs-display); line-height:1.08; }
.collage__box .lead{ margin:1.3rem auto 0; max-width:30em; font-size:1rem; }
.hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px, 3vw, 48px); margin-top:clamp(32px, 4vw, 52px); }
.hero__one{ display:grid; justify-items:center; gap:.9rem; }
.collage__box .hero__cta{ flex-direction:column; align-items:center; gap:clamp(2.4rem, 4vw, 3.2rem); margin-top:1.8rem; }
.micro{ font:500 clamp(.58rem, 2.4vw, .72rem)/1.5 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); }
.hero__one .micro{ text-align:center; white-space:nowrap; }
/* eine Zeile, mittig unter dem Button */
/* ---------- The La Manifesta Method als vertikale Reise ---------- */
.method{ list-style:none; margin-top:clamp(32px, 4vw, 56px); }
.mstep{ display:block; max-width:40em; padding:clamp(32px, 4.5vw, 64px) 0; border-top:1px solid var(--line); }
.mstep:last-child{ border-bottom:1px solid var(--line); }
.mstep__num{ font:300 clamp(3.2rem, 2rem + 5vw, 6rem)/.9 var(--serif); color:var(--accent); opacity:.42; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.mstep:not(:last-child) .mstep__num::after{ content:""; display:block; width:1px; height:clamp(24px, 3.5vw, 44px); margin:.5rem 0 0 .4em; background:linear-gradient(var(--gold-line), transparent); }
.mstep__name{ margin:.7rem 0 1rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--fg); }
.mstep__claim{ margin-bottom:1.2rem; font:400 var(--fs-h3)/1.3 var(--serif); color:var(--fg); }
.mstep p{ max-width:34em; }
.method__end{ margin-top:clamp(40px, 5vw, 72px); }
.method__end p{ margin:0 0 .35em; font:italic 400 var(--fs-h3)/1.45 var(--serif); color:var(--em); }
/* ---------- Wie möchtest du beginnen: eine Reise, keine Preiskarten ---------- */
.journey{ list-style:none; }
.journey__step{ position:relative; padding:clamp(36px, 5vw, 72px) 0 clamp(36px, 5vw, 72px) clamp(56px, 7vw, 112px); border-top:1px solid var(--line); }
.journey__step:last-child{ border-bottom:1px solid var(--line); }
.journey__num{ position:absolute; left:0; top:clamp(36px, 5vw, 72px); font:300 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--serif); color:var(--accent); opacity:.5; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.journey__t{ font:400 var(--fs-h3)/1.25 var(--serif); color:var(--fg); }
.journey__claim{ margin:.7rem 0 1.2rem; font:italic 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.4 var(--serif); color:var(--em); }
.journey__step p{ max-width:36em; }
.journey__preis{ margin-top:1.4rem; font:400 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--serif); color:var(--fg); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.journey__step .actions{ margin-top:1.4rem; }
.journey__step .micro{ margin-top:1rem; }
/* ---------- Fragen, Zitat ---------- */
.fragen{ list-style:none; margin-top:1.2rem; border-top:1px solid var(--line); }
.fragen li{ padding:1.05rem 0; border-bottom:1px solid var(--line); font:italic 400 var(--fs-h3)/1.4 var(--serif); color:var(--em); }
.zitat{ margin:2.2rem 0 0; }
.zitat blockquote{ margin:0; font:italic 300 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.45 var(--serif); color:var(--fg); }
.zitat blockquote p{ color:inherit; }
.zitat figcaption{ margin-top:1.1rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-mute); }
/* ---------- Ablauf in Schritten ---------- */
.steps{ list-style:none; margin-top:clamp(32px, 4vw, 56px); }
.steps li{ position:relative; padding:clamp(28px, 3.4vw, 48px) 0 clamp(28px, 3.4vw, 48px) clamp(52px, 6vw, 88px); border-top:1px solid var(--line); }
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps__num{ position:absolute; left:0; top:clamp(28px, 3.4vw, 48px); font:400 1.4rem/1 var(--serif); color:var(--accent); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.steps__t{ margin-bottom:.9rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--fg); }
.steps li p{ max-width:34em; }
/* ---------- Listen ---------- */
.leistungen{ list-style:none; margin-top:clamp(24px, 3vw, 40px); border-top:1px solid var(--line); max-width:36em; }
.leistungen li{ position:relative; padding:.95rem 0 .95rem 1.9rem; border-bottom:1px solid var(--line); color:var(--fg); }
.leistungen li::before{ content:""; position:absolute; left:0; top:1.55rem; width:11px; height:1px; background:var(--accent); }
.leistungen--kurz{ margin-top:1.2rem; }
.marks{ list-style:none; display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.marks li{ padding:.65rem 1.15rem; border:1px solid var(--line-strong); border-radius:999px; font-size:.93rem; color:var(--fg-soft); }
.lines{ list-style:none; margin-top:clamp(24px, 3vw, 40px); border-top:1px solid var(--line); }
.lines li{ padding:1.2rem 0; border-bottom:1px solid var(--line); font-size:var(--fs-lead); line-height:1.6; color:var(--fg); }
/* ---------- Gegenüberstellung ---------- */
.gegen{ display:grid; gap:.9rem; margin-top:clamp(36px, 4vw, 56px); padding-left:1.4rem; border-left:1px solid var(--gold-line); }
.gegen__no{ font:400 var(--fs-h3)/1.35 var(--serif); color:var(--fg-mute); }
.gegen__yes{ font:italic 400 var(--fs-h2)/1.18 var(--serif); color:var(--em); }
/* ---------- Angebot, Preis, Hinweise ---------- */
.angebot{ margin-top:clamp(40px, 5vw, 72px); padding:clamp(28px, 3.5vw, 48px); border:1px solid var(--line); background:rgba(255,255,255,.5); }
.angebot .actions{ margin-top:1.6rem; }
.preis{ margin-top:1.4rem; font:400 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/1 var(--serif); color:var(--fg); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.preis + .micro{ margin-top:.8rem; }
.hinweis{ max-width:36em; margin-top:1.4rem; padding:1rem 1.2rem; border-left:2px solid var(--accent); background:rgba(201,169,110,.1); font-size:.92rem; line-height:1.6; color:var(--fg-soft); }
.hinweis a{ color:var(--fg); }
/* ---------- Platzhalter für noch fehlende Bilder ---------- */
.ph{
  display:grid; place-content:center; gap:.7rem; text-align:center; padding:2rem;
  aspect-ratio:4/5; border:1px dashed var(--gold-line); color:var(--fg-mute);
  background:repeating-linear-gradient(45deg, rgba(201,169,110,.09) 0 12px, transparent 12px 26px);
}
.ph__l{ font:500 .7rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold-ink); }
.ph__t{ font-size:.92rem; line-height:1.5; max-width:22em; margin-inline:auto; }
.ph--karte{ aspect-ratio:3/4; }
.check{ display:grid; grid-template-columns:22px 1fr; gap:.85rem; align-items:start; font-size:.92rem; line-height:1.55; color:var(--fg-soft); cursor:pointer; }
.check input{ width:22px; height:22px; margin-top:.15rem; accent-color:var(--gold); }
/* ---------- Betonte Schlusszeile ---------- */
.coda--strong{ margin-top:.6rem; font-size:var(--fs-h2); line-height:1.15; color:var(--em); }

/* ---------- V2 auf kleinen Displays ---------- */
@media (max-width:980px){
  .collage{ display:flex; flex-direction:column; min-height:0; }
  .collage__a{ height:min(34svh, 340px); }
  .collage__box{ align-self:stretch; margin:-52px 10px 0; padding:28px 20px 32px; }
  .collage__box h1{ font-size:clamp(1.95rem, 1.3rem + 2.6vw, 2.4rem); }
  .collage__box .lead{ margin-top:1rem; font-size:.97rem; line-height:1.6; }
  .collage__box .hero__cta{ align-items:stretch; margin-top:1.4rem; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:1.8rem; }
  .hero__one{ width:100%; }
  .hero__one .btn{ width:100%; }
  .journey__step{ padding-left:0; }
  .journey__num{ position:static; display:block; margin-bottom:.5rem; }
  .steps li{ padding-left:0; }
  .steps__num{ position:static; display:block; margin-bottom:.7rem; }
  .gegen{ padding-left:1rem; }
}

/* =====================================================================
   Responsive – Mobile wird eigens gestaltet, nicht verkleinert
   ===================================================================== */
@media (max-width:980px){
  :root{ --header-h:68px; }
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 40px); }
  .split{ grid-template-columns:1fr; }
  .figure{ aspect-ratio:4/3.4; }
  .foot{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:980px){
  .founder{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  :root{ --fs-body:1.0625rem; }
/* Lange Button-Beschriftungen dürfen auf dem Handy umbrechen */
.btn{ white-space:normal; line-height:1.35; padding:.95rem 1.5rem; letter-spacing:.16em; text-align:center; }

  .actions{ flex-direction:column; align-items:stretch; gap:.6rem; }
  .actions .btn{ width:100%; }
  .actions .link{ justify-content:center; }
  .acc-a-in{ padding-right:0; }
  .foot{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:2.4rem; }
  .foot__bottom{ flex-direction:column; }
  .site-footer{ padding-bottom:calc(2rem + 76px); } /* Platz für die Sticky-Leiste */
}
/* Aufgeschlagenes Buch auf kleinen Displays: Seite antippen, um sie groß zu lesen */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .js .reveal, .js [data-load]{ opacity:1; transform:none; }
  .figure img{ transform:none; }
}
/* =====================================================================
   Verkaufsseite Traumdeutung
   Einstieg gespiegelt zur Startseite, Angebot als ruhiger Block.
   ===================================================================== */
.collage--flip .collage__a{ grid-column:6 / 13; }
.collage--flip .collage__box{ grid-column:1 / 8; }
.hero__wer{ margin-top:1.6rem; font-size:.9rem; line-height:1.55; color:var(--fg-mute); }
.actions--eins{ justify-content:center; }
.actions--eins .btn{ width:100%; max-width:26rem; }
.angebot--gross{ margin-top:clamp(28px, 3.5vw, 44px); text-align:left; }
.angebot--gross .leistungen{ margin-top:0; max-width:none; }
.angebot--gross .preis{ margin-top:1.8rem; }
.angebot--gross .actions{ margin-top:1.8rem; }
.collage__box .preis{ margin-top:1.6rem; }
.collage__box .hinweis{ margin-inline:auto; text-align:left; }

@media (max-width:980px){
  .collage--flip .collage__a, .collage--flip .collage__box{ grid-column:auto; }
}
/* =====================================================================
   Checkout
   ===================================================================== */
.kauf{ margin-top:clamp(48px, 6vw, 80px); padding:clamp(28px, 3.5vw, 48px); border:1px solid var(--line); background:rgba(255,255,255,.55); }
.kauf h2{ margin-bottom:.8rem; }
.kauf__form{ display:grid; gap:1.3rem; margin-top:1.8rem; }
.kauf__form[hidden]{ display:none; }
.kauf__form .check span{ font-size:.92rem; }
.kauf__form .btn{ margin-top:.4rem; }
.kauf__fehler{ padding:.85rem 1.1rem; border-left:2px solid #9c3b3b; background:rgba(156,59,59,.09); font-size:.92rem; color:var(--fg); }
.kauf__fehler[hidden]{ display:none; }
.kauf .small a{ color:var(--fg); }
.kauf__weiter{ display:grid; gap:1rem; margin-top:1.8rem; }
.kauf__weiter[hidden]{ display:none; }

/* ---------- Buchungsseite ---------- */
.hero--buchung{ padding-block:calc(var(--header-h) + clamp(48px, 7vw, 96px)) clamp(56px, 7vw, 96px); }
.hero--buchung .prose-lead{ margin-inline:0; }
.center-text{ text-align:center; }
.actions--eins + .micro{ text-align:center; }
.abschluss{ text-align:center; }
.abschluss .prose-lead{ margin-inline:auto; }
.abschluss .t-h2{ margin-inline:auto; max-width:16em; }
.fein{ margin-top:1.2rem; }
.fein .lines{ margin-top:0; }
.fein .lines li{ padding:.9rem 0; font-size:.92rem; line-height:1.6; color:var(--fg-mute); }

/* ---------- Zitat als Überschrift (Über Miriam) ---------- */
.zitat-h{ max-width:20em; font-style:italic; font-weight:300; color:var(--fg); }
.zitat-h__wer{ margin-top:1.2rem; font:500 var(--fs-label)/1.5 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--fg-mute); }

/* ---------- Button und Microcopy als eine Einheit ---------- */
.actions + .micro{ margin-top:.9rem; }
.micro + .small, .micro + p, .micro + .hinweis{ margin-top:1.4rem; }
.actions--eins + .micro, .final .micro, .abschluss .micro{ text-align:center; }

/* Auf dem Handy sind Buttons volle Breite – die Microcopy steht dann mittig darunter. */
@media (max-width:760px){
  .actions + .micro{ text-align:center; }
}

/* =====================================================================
   Rechtliche Bausteine: Bestellübersicht, Formulare, Muster-Widerruf
   ===================================================================== */
.bestellung{ margin:clamp(20px,2.5vw,32px) 0; padding:clamp(20px,2.5vw,32px); border:1px solid var(--line); background:rgba(255,255,255,.6); }
.bestellung__name{ font:400 var(--fs-h3)/1.25 var(--serif); color:var(--fg); margin-bottom:.3rem; }
.bestellung__preis{ font:400 clamp(1.4rem,1.2rem+.8vw,1.9rem)/1.2 var(--serif); color:var(--fg); font-variant-numeric:lining-nums; margin-bottom:.2rem; }
.bestellung__abo{ font-size:.92rem; color:var(--fg-mute); }
.bestellung .label{ margin:1.4rem 0 .4rem; }
.bestellung .leistungen{ margin-top:0; }
.bestellung__ref{ margin-top:1.4rem; font-size:.95rem; }
.bestellung .actions{ margin-top:1.6rem; }
.rechtsinfo{ margin:1.4rem 0 0; font-size:.92rem; line-height:1.6; color:var(--fg-soft); }
.rechtsinfo a{ color:var(--fg); }

/* Formulare (Widerruf) */
.formular{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.15rem; max-width:560px; margin-top:clamp(28px,3.5vw,44px); }
.formular[hidden]{ display:none; }
.feld{ display:grid; gap:.45rem; }
.feld label{ font:500 var(--fs-label)/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); }
.feld label span{ letter-spacing:.02em; text-transform:none; opacity:.75; }
.feld input, .feld select, .feld textarea{ width:100%; min-width:0; max-width:100%; min-height:52px; padding:.8rem 1rem; border:1px solid var(--line-strong); border-radius:4px; background:rgba(255,255,255,.72); font:400 1rem var(--sans); color:var(--fg); }
.feld textarea{ min-height:120px; resize:vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus{ outline:none; border-color:var(--fg); }
.feld .small{ margin-top:.2rem; }
.honig{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.formular__fehler{ padding:.85rem 1.1rem; border-left:2px solid #9c3b3b; background:rgba(156,59,59,.09); font-size:.92rem; color:var(--fg); }
.formular__fehler[hidden]{ display:none; }
.formular__danke{ max-width:560px; margin-top:clamp(28px,3.5vw,44px); padding:clamp(24px,3vw,36px); border:1px solid var(--line); background:rgba(255,255,255,.6); }
.formular__danke[hidden]{ display:none; }
.formular__danke .t-h3{ margin-bottom:.6rem; }

/* Muster-Widerrufsformular */
.muster{ margin-top:1.4rem; padding:clamp(20px,2.5vw,32px); border:1px solid var(--line); background:rgba(255,255,255,.5); }
.muster .linie{ height:1px; margin:.4rem 0 1.4rem; background:var(--line-strong); }

/* Drucken: nur der Inhalt, ohne Navigation und Fußzeile */
@media print{
  .site-header, .site-footer, .sticky, .popup, .menu, [data-drucken]{ display:none !important; }
  body{ background:#fff; }
  .sec{ padding-block:1.2rem; }
}