/* Kristin Glenewinkel, optimierte Fassung.
   Marken-Tokens unveraendert aus der Bestandsseite uebernommen (Astra-Global-Palette).
   Geaendert sind Rhythmus, Hierarchie und Typo-Skala, nicht die Markenidentitaet. */
:root{
  --gold:#b88f4a; --gold-700:#96733a; --gold-200:#e4d3b4; --gold-50:#faf5ec;
  --petrol:#042829; --petrol-800:#0a3a3b; --petrol-600:#1d5354; --teal:#3e7c77;
  --sand:#ebe3d6; --sand-soft:#f6f1e8;
  --ink:#1b1c1c; --ink-soft:#4a4d4d; --muted:#6f7373;
  --line:#e2ddd3; --line-dark:rgba(255,255,255,.16);
  --bg:#fffefc; --bg-soft:#faf8f4;
  --r:14px; --r-lg:22px; --r-btn:6px;
  --wrap:1120px; --narrow:720px;
  --sp:clamp(64px,8vw,112px);
}
@font-face{font-family:'Coconat';src:url('fonts/Coconat-Regular.otf') format('opentype');
  font-weight:400;font-display:swap}
@font-face{font-family:'Coconat';src:url('fonts/Coconat-BoldExt.otf') format('opentype');
  font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dmsans-var.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  --hdr-h:68px}
/* Sprungmarken: Abstand zum Sticky-Header, sonst wird der Sektionskopf verdeckt */
:target{scroll-margin-top:calc(var(--hdr-h) + 22px)}
section[id],article[id],main[id],div[id]{scroll-margin-top:calc(var(--hdr-h) + 22px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink-soft);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.72;font-weight:400;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-700);text-decoration:none}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:'Coconat',Georgia,serif;color:var(--ink);font-weight:400;
  line-height:1.16;letter-spacing:-.005em;margin:0 0 .55em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
p{margin:0 0 1.1em;text-wrap:pretty}
.lead{font-size:1.1rem;color:var(--ink-soft)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.narrow{max-width:var(--narrow);margin-inline:auto;padding-inline:26px}
.sec{padding:var(--sp) 0}
.sec-soft{background:var(--bg-soft)}
.sec-sand{background:var(--sand-soft)}
.sec-dark{background:var(--petrol);color:#d9d3c8}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lead{color:rgba(255,255,255,.92)}
.sec-dark p{color:#d9d3c8}
.sec-dark strong{color:#fff}
.sec-dark a{color:var(--gold-200)}
.center{text-align:center}
.eyebrow{font-family:'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.17em;
  font-size:.71rem;font-weight:500;color:var(--gold-700);margin:0 0 1em}
.sec-dark .eyebrow{color:var(--gold-200)}
.rule{width:34px;height:1px;background:var(--gold);margin:0 0 1.3em}
.center .rule{margin-inline:auto}

/* Buttons: ein Design, ein Ziel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%;background:var(--gold);color:#fff;
  padding:14px 27px;border-radius:var(--r-btn);border:1px solid var(--gold);
  font-family:'DM Sans',sans-serif;font-size:.94rem;font-weight:500;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s}
.btn:hover{background:var(--gold-700);border-color:var(--gold-700);color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--petrol);border-color:#fff}
.btn-line{background:transparent;color:var(--petrol);border-color:var(--line)}
.btn-line:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.btn-sm{padding:10px 18px;font-size:.88rem}
.cta-note{font-size:.86rem;color:var(--muted);margin:.8em 0 0}
.sec-dark .cta-note{color:rgba(255,255,255,.6)}

/* Header */
.hdr{position:sticky;top:0;z-index:70;background:rgba(4,40,41,.97);
  backdrop-filter:saturate(140%) blur(8px)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin-inline:auto;padding:13px 26px}
.hdr__logo img{width:158px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:#eae4d9;font-size:.94rem}
.nav a:hover,.nav a[aria-current=page]{color:#fff}
.nav a[aria-current=page]{border-bottom:1px solid var(--gold);padding-bottom:2px}
.nav .btn{color:#fff}
.burger{display:none;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:23px;height:2px;background:#eae4d9;margin:5px 0;transition:.2s}

/* Hero */
.hero{position:relative;background:var(--petrol);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(4,40,41,.88) 0%,rgba(4,40,41,.6) 44%,rgba(4,40,41,.18) 100%)}
.hero__in{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(84px,11vw,140px) 26px}
.hero h1{color:#fff;max-width:18ch;margin-bottom:.4em}
.hero__lead{color:rgba(255,255,255,.93);max-width:46ch;font-size:1.1rem}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* Naechster Termin direkt im Hero */
.next{display:inline-flex;align-items:center;gap:14px;margin-bottom:26px;max-width:100%;flex-wrap:wrap;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:8px 18px 8px 10px;font-size:.9rem;color:#fff}
.next__tag{background:var(--gold);color:#fff;border-radius:100px;padding:3px 12px;flex:0 0 auto;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}

/* Termin-Karten */
.evs{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px}
.ev{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.ev:hover{border-color:var(--gold-200);transform:translateY(-3px);
  box-shadow:0 12px 30px -18px rgba(4,40,41,.35)}
.ev img{aspect-ratio:16/10;object-fit:cover;width:100%}
.ev__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.ev__d{font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);
  font-weight:500;margin:0 0 .55em}
.ev__t{font-family:'Coconat',serif;font-size:1.22rem;color:var(--ink);margin:0 0 .5em;
  line-height:1.25;min-height:2.5em;overflow-wrap:break-word}
.ev__m{font-size:.9rem;color:var(--muted);margin:0 0 1.1em}
.ev__m span{display:block}
.ev__f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:15px}
.ev__p{font-family:'Coconat',serif;font-size:1.1rem;color:var(--ink)}
.sec-dark .ev{background:rgba(255,255,255,.045);border-color:var(--line-dark)}
.sec-dark .ev__t,.sec-dark .ev__p{color:#fff}
.sec-dark .ev__m{color:rgba(255,255,255,.66)}
.sec-dark .ev__d{color:var(--gold-200)}
.sec-dark .ev__f{border-color:var(--line-dark)}
.sec-dark .ev:hover{border-color:var(--gold);background:rgba(255,255,255,.07)}
/* Detailkarten der Termin-Seite: Bild als Band oben, Text darunter */
.evs--detail .ev{flex-direction:column}
.evs--detail .ev>img{width:100%;aspect-ratio:21/8;object-fit:cover}
.evs--detail .ev__b{padding:30px clamp(24px,4vw,40px) 32px;max-width:74ch}
.ev__hint{font-size:.9rem;color:var(--muted);border-left:2px solid var(--gold-200);
  padding-left:14px;margin-bottom:1.2em}
.evs--detail .tick li{padding-top:5px;padding-bottom:5px}
@media(max-width:600px){.evs--detail .ev>img{aspect-ratio:16/10}}
/* Detailkarte, Bild neben Text erst ab 760px */
@media(max-width:760px){
  .ev[id]{flex-direction:column!important}
  .ev[id]>img{flex:none!important;aspect-ratio:16/10!important;min-height:0!important;width:100%}
}

/* Formate */
.fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fmts--3{grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:1000px){.fmts,.fmts--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fmts,.fmts--3{grid-template-columns:1fr}}
.fmt{border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden;background:#fff}
.fmt img{aspect-ratio:3/2;object-fit:cover;width:100%}
.fmt__b{padding:24px}
.fmt h3{margin-bottom:.45em}
.fmt p{font-size:.96rem;margin-bottom:0}
.fmt__meta{font-size:.85rem;color:var(--gold-700);margin-top:1em;font-weight:500}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,66px);align-items:center}
.split--rev .split__t{order:2}
.split img{border-radius:var(--r-lg)}
.split--narrow{grid-template-columns:.85fr 1fr}

/* Fakten */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;
  border-top:1px solid var(--line);padding-top:30px;margin-top:34px}
.fact b{display:block;font-family:'Coconat',serif;font-size:2rem;color:var(--gold);line-height:1}
.fact span{font-size:.88rem;color:var(--muted)}
.sec-dark .facts{border-color:var(--line-dark)}
.sec-dark .fact span{color:rgba(255,255,255,.66)}

/* Stimmen: Masonry-Fluss statt Grid, damit jede Karte nur so hoch ist wie ihr Text.
   Die Spannweite der Originalzitate reicht von 157 bis 1034 Zeichen, im Grid
   riss das kuerzeste Zitat die ganze Zeilenhoehe auf. */
.voices{columns:3;column-gap:24px}
.voices>*{break-inside:avoid;margin:0 0 24px}
/* Versaetze brechen die gemeinsame Oberkante der Spalten auf */
.voice--drop1{margin-top:26px}
.voice--drop2{margin-top:48px}
@media(max-width:1000px){.voices{columns:2}}
@media(max-width:620px){.voices{columns:1}}

.voice{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px 22px;position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.voice blockquote{margin:0}
.voice blockquote p{margin:0 0 1em}
.voice blockquote p:last-child{margin-bottom:0}
.voice__q{display:none}
.voice__w{display:flex;align-items:center;gap:13px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line);min-width:0}
.voice__w img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.voice__n{font-weight:500;color:var(--ink);font-size:.94rem;display:block;line-height:1.3}
.voice__r{font-size:.78rem;color:var(--muted)}
.voice__mono{width:44px;height:44px;border-radius:50%;flex:0 0 44px;display:grid;
  place-items:center;background:var(--gold-50);color:var(--gold-700);
  font-family:'Coconat',serif;font-size:1.15rem;border:1px solid var(--gold-200)}

/* Groesse folgt der Textlaenge: kurz wird zum Pull-Quote, lang wird kompakt */
.voice--xl blockquote p{font-family:'Coconat',serif;font-size:1.42rem;line-height:1.38;
  color:var(--ink);letter-spacing:-.01em}
.voice--xl{padding:30px 28px 24px}
.voice--l blockquote p{font-size:1.06rem;line-height:1.62}
.voice blockquote p{font-size:1rem;line-height:1.66}
.voice--sm blockquote p{font-size:.93rem;line-height:1.6}


/* Drei Grundtoene im Wechsel, damit die Wand nicht uniform wirkt */
.voice--sand{background:var(--sand-soft);border-color:#e3d9c8}
.voice--gold{background:var(--gold-50);border-color:var(--gold-200)}
.voice--dark{background:var(--petrol);border-color:var(--petrol)}
.voice--dark blockquote p{color:#e4ded3}
.voice--dark .voice__n{color:#fff}
.voice--dark .voice__r{color:rgba(255,255,255,.62)}
.voice--dark .voice__w{border-top-color:var(--line-dark)}

.voice--dark .voice__mono{background:rgba(255,255,255,.08);color:var(--gold-200);
  border-color:rgba(255,255,255,.22)}

/* Leichte Schraeglage, abwechselnd. Als Variable, damit der Reveal-Zustand
   (.rv / .rv.in setzen ebenfalls transform) sie nicht ueberschreibt. */
.voice{--tilt:0deg}
.voice--tl{--tilt:-1.15deg}
.voice--tr{--tilt:1.05deg}
.voice{transform:rotate(var(--tilt))}
.voice.rv{transform:translateY(14px) rotate(var(--tilt))}
.voice.rv.in{transform:rotate(var(--tilt))}
.voice:hover,.voice.rv.in:hover{transform:rotate(0deg) translateY(-3px);
  box-shadow:0 16px 34px -22px rgba(4,40,41,.42);border-color:var(--gold-200)}
.voice--dark:hover{border-color:var(--gold)}
@media(prefers-reduced-motion:reduce){
  .voice,.voice.rv,.voice.rv.in,.voice:hover{transform:none}
}

/* Ablauf */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:22px}
.steps li{counter-increment:s;padding-left:56px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:38px;height:38px;
  border:1px solid var(--gold-200);border-radius:50%;display:grid;place-items:center;
  font-family:'Coconat',serif;color:var(--gold-700);font-size:1.05rem;background:var(--gold-50)}
.steps h3{margin-bottom:.25em;font-size:1.12rem}
.steps p{margin:0;font-size:.96rem}

/* Liste mit Haken */
.tick{list-style:none;padding:0;margin:0 0 1.2em}
.tick li{padding:8px 0 8px 28px;position:relative}
.tick li::before{content:"";position:absolute;left:0;top:18px;width:13px;height:1px;background:var(--gold)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative;
  font-family:'Coconat',serif;font-size:1.1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:27px;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg);top:29px}
.faq__a{padding:0 0 22px;font-size:.97rem}
.faq__a p:last-child{margin-bottom:0}

/* Formulare */
.field{margin-bottom:17px}
label{display:block;font-size:.85rem;color:var(--ink);margin-bottom:6px;font-weight:500}
input[type=text],input[type=email],textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-btn);background:#fff;font-family:inherit;font-size:1rem;color:var(--ink)}
textarea{min-height:140px;resize:vertical}
.hp{position:absolute!important;left:-9999px}
.nl{display:flex;gap:11px;flex-wrap:wrap;max-width:480px}
.center .nl{margin-inline:auto}
.nl input[type=email]{flex:1 1 220px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;font-weight:400;margin-top:13px}
.check input{margin-top:5px;flex:0 0 auto}
.msg{font-size:.92rem;margin-top:12px;min-height:1.4em}

/* Kontaktzeile */
.contact-l{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.contact-l li{display:flex;gap:12px;align-items:flex-start;min-width:0}
.contact-l li>span:last-child{min-width:0;overflow-wrap:break-word}
.contact-l b{display:block;font-weight:500;color:var(--ink);font-size:.86rem}
.sec-dark .contact-l b{color:#fff}

/* Footer */
.ftr{background:var(--petrol);color:#a9a49a;padding:70px 0 24px;font-size:.93rem}
.ftr h2{font-size:1.02rem;color:#fff;font-family:'DM Sans',sans-serif;font-weight:500;
  letter-spacing:.02em;margin-bottom:1em}
.ftr a{color:#c8c1b4}
.ftr a:hover{color:var(--gold-200)}
.ftr__g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:40px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.social{display:flex;flex-wrap:wrap;gap:9px}
.social li{margin:0}
.social a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;
  border:1px solid var(--line-dark);border-radius:100px;font-size:.88rem;
  transition:background .18s,border-color .18s,color .18s}
.social a:hover{background:rgba(255,255,255,.08);border-color:var(--gold);color:#fff}
.social svg{width:16px;height:16px;fill:currentColor;flex:0 0 16px}
.ftr__bar{border-top:1px solid var(--line-dark);margin-top:46px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.86rem}

/* Reveal, einmal laufen und im End-State bleiben */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .split,.split--narrow{grid-template-columns:1fr}
  .split--rev .split__t{order:0}
  .ftr__g{grid-template-columns:1fr 1fr}
  .nav{position:fixed;inset:60px 0 auto;flex-direction:column;align-items:stretch;
    background:var(--petrol);padding:24px 26px 30px;gap:18px;display:none;
    border-bottom:1px solid var(--line-dark)}
  .nav.open{display:flex}
  .nav .btn{justify-content:center}
  .burger{display:block}
  .hero h1{max-width:none}
}
@media(max-width:560px){.ftr__g{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}