/* =========================================================================
   Ordnung & Klarheit / Annika Bartsch
   Farbwelt und Schriften exakt nach 03_Logo und Gestaltung
   Bewusst einfarbige Markenwelt: die Seite traegt in jedem Viewer-Theme
   denselben beigen Grund, deshalb ist jede Farbe explizit gesetzt.
   ========================================================================= */

:root{
  /* Vorgegebene CI */
  --ground:#F4ECDE;      /* Hintergrund beige */
  --sage:#A8B5A2;        /* Buttons und Akzente salbeigruen */
  --ink:#31483B;         /* Schrift dunkelgruen */
  --gold:#B9965A;        /* Akzent gold */
  --terra:#C98D72;       /* Akzent terracotta */

  /* Abgeleitet, aus der CI heraus gemischt */
  --paper:#FBF7EF;       /* Kartenflaeche, heller als der Grund */
  --paper-2:#EFE5D3;     /* zweite Flaeche, dunkler als der Grund */
  --deep:#24362C;        /* dunkle Flaeche, Footer */
  --deep-2:#1B291F;
  --ink-soft:#576C5D;    /* Fliesstext, zweite Ebene */
  --line:#E3D9C7;        /* Trennlinien */
  --line-strong:#D2C4AB;--feld-rahmen:#8C7D5C;
  --gold-soft:#E7D7B8;
  /* Gold und Terracotta sind als Flaechen- und Linienfarben gedacht. Auf hellem
     Grund erreichen sie als Schrift nur 2.4:1. Fuer Text deshalb dieselben
     Farbtoene, nur dunkler: beide liegen ueber 4.5:1 auf allen hellen Flaechen. */
  --gold-text:#7A6034;--gold-zahl:#A48146;
  --terra-text:#9E5136;
  --sage-soft:#DCE3D8;
  --terra-soft:#F0DCD2;

  /* Fuenf Stufen statt zwei. Der Farbton der Schatten ist das Dunkelgruen der
     Marke, nicht Schwarz: auf beigem Grund wirkt Schwarz schmutzig. */
  --shadow-xs:0 1px 2px rgba(49,72,59,.05);
  --shadow-sm:0 1px 2px rgba(49,72,59,.05), 0 4px 10px -2px rgba(49,72,59,.06);
  --shadow-md:0 2px 4px rgba(49,72,59,.05), 0 12px 28px -6px rgba(49,72,59,.10);
  --shadow-lg:0 4px 8px rgba(49,72,59,.06), 0 24px 48px -12px rgba(49,72,59,.16);
  --shadow-xl:0 8px 16px rgba(49,72,59,.07), 0 44px 84px -24px rgba(49,72,59,.24);

  /* Ein einziges Bewegungsprofil fuer die ganze Seite. */
  --ease:cubic-bezier(.22,.68,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --wrap:1180px;
  --narrow:720px;
  --r:3px;               /* sehr kleine Radien: Ordnung, keine Bubble-Optik */
}

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

/* Ein Fokusring fuer alles. --ink traegt auf hellem Grund, auf den dunklen
   Baendern wird auf --ground umgestellt, dort erreicht --ink nur 1.3:1. */
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
footer.site :focus-visible,.private-band :focus-visible,.finale :focus-visible,
.actionbar :focus-visible,.draftbar :focus-visible,.offer.featured :focus-visible{
  outline-color:var(--ground);
}

/* Sprungziele nicht unter der klebenden Kopfzeile parken */
section[id],div[id]{scroll-margin-top:96px}

/* Sprunglink fuer Tastaturbedienung */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:26px;top:8px;z-index:99;position:fixed;background:var(--ink);color:var(--ground);
  padding:10px 16px;border-radius:var(--r);font-size:.875rem;font-weight:600;text-decoration:none;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:"Cardo","Iowan Old Style",Georgia,serif;
  font-weight:400;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  line-height:1.14;
  letter-spacing:-.005em;
}
h1{font-size:clamp(2.35rem,5.2vw,4.05rem)}
h2{font-size:clamp(1.95rem,3.6vw,2.95rem)}
h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.24}
h4{font-size:clamp(1.14rem,1.15vw,1.3rem);line-height:1.3}
p{margin:0}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:26px}
.narrow{max-width:var(--narrow)}

section{padding-block:clamp(64px,8.5vw,116px)}

/* =========================================================================
   Bewegung

   Regeln, an die sich alles hier haelt:
   1. Nichts bewegt sich ohne Grund. Jede Animation zeigt entweder eine
      Reihenfolge oder das Kernmotiv der Marke: aus lose wird sortiert.
   2. Alle Bewegung haengt an html.js. Ohne JavaScript ist jeder Inhalt
      sofort sichtbar, es gibt keinen Zustand, in dem etwas verborgen bleibt.
   3. Zusaetzlich blendet ein Sicherheitsnetz nach drei Sekunden alles ein,
      falls ein Observer nie ausloest.
   4. prefers-reduced-motion schaltet alles ab.
   ========================================================================= */

/* Der Hero laeuft beim Laden als Sequenz, ohne auf Scrollen zu warten */
@keyframes heben{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heben-klein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bild-rein{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rahmen-rein{from{opacity:0;transform:translate(-14px,-14px)}to{opacity:1;transform:none}}
@keyframes marke-rein{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes strich-rein{from{transform:scaleX(0)}to{transform:scaleX(1)}}

html.js .hero .eyebrow{animation:heben-klein .6s var(--ease-out) .05s both}
html.js .hero .eyebrow::before{
  transform-origin:left center;animation:strich-rein .5s var(--ease-out) .3s both;
}
html.js .hero h1{animation:heben .85s var(--ease-out) .14s both}
html.js .hero .lead{animation:heben .8s var(--ease-out) .3s both}
html.js .hero .cta-row{animation:heben .8s var(--ease-out) .42s both}
html.js .hero .cta-note{animation:heben-klein .7s var(--ease-out) .54s both}
html.js .hero .switch{animation:heben-klein .7s var(--ease-out) .62s both}
html.js .hero-figure img{animation:bild-rein 1s var(--ease-out) .2s both}
html.js .hero-figure::after{animation:rahmen-rein .9s var(--ease-out) .55s both}
html.js .hero-badge{animation:marke-rein .7s var(--ease-out) .8s both}

/* Kennzahlen: die Trennlinien wachsen, die Zahlen kommen einzeln */
html.js .factbar .fact{opacity:0;transform:translateY(16px)}
html.js .factbar.sichtbar .fact{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease-out),transform .6s var(--ease-out);
}
html.js .factbar.sichtbar .fact:nth-child(1){transition-delay:.05s}
html.js .factbar.sichtbar .fact:nth-child(2){transition-delay:.15s}
html.js .factbar.sichtbar .fact:nth-child(3){transition-delay:.25s}
html.js .factbar.sichtbar .fact:nth-child(4){transition-delay:.35s}
.fact .n{font-variant-numeric:tabular-nums}

/* Ablauf: die Goldlinie zeichnet sich, die Ziffern setzen sich nacheinander */
html.js .steps::before{transform:scaleY(0);transform-origin:top center}
html.js .steps.laeuft::before{
  transform:scaleY(1);transition:transform 1.1s var(--ease-out);
}
html.js .steps .step{opacity:0;transform:translateY(14px)}
html.js .steps.laeuft .step{
  opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
html.js .steps.laeuft .step:nth-child(1){transition-delay:.12s}
html.js .steps.laeuft .step:nth-child(2){transition-delay:.26s}
html.js .steps.laeuft .step:nth-child(3){transition-delay:.4s}
html.js .steps.laeuft .step:nth-child(4){transition-delay:.54s}
html.js .steps.laeuft .step:nth-child(5){transition-delay:.68s}
.step-n{
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease);
}

/* Beim Ueberfahren wandert die Farbe bis zum jeweiligen Schritt mit: alle
   Schritte davor faerben sich ebenfalls. Das zeigt Fortschritt statt nur,
   worauf der Zeiger gerade steht. Jeder Schritt traegt dafuer sein eigenes
   Liniensegment, weil sich eine durchgehende Linie nicht teilweise faerben
   laesst. Ohne :has bleibt der einfache Hover, das genuegt als Rueckfall. */
.step{--linie:transparent}
.step::after{
  content:"";position:absolute;left:26px;top:0;bottom:0;width:1px;
  background:var(--linie);transition:background .35s var(--ease);
}
@media(max-width:640px){.step::after{left:19px}}

.step:hover .step-n{transform:scale(1.1)}

.steps:has(.step:hover) .step.now .step-n{
  background:var(--ground);color:var(--gold-text);
}
.steps:has(.step:nth-child(1):hover) .step:nth-child(-n+1) .step-n,
.steps:has(.step:nth-child(2):hover) .step:nth-child(-n+2) .step-n,
.steps:has(.step:nth-child(3):hover) .step:nth-child(-n+3) .step-n,
.steps:has(.step:nth-child(4):hover) .step:nth-child(-n+4) .step-n,
.steps:has(.step:nth-child(5):hover) .step:nth-child(-n+5) .step-n{
  background:var(--gold);color:var(--ground);border-color:var(--gold);
}
.steps:has(.step:nth-child(2):hover) .step:nth-child(-n+1),
.steps:has(.step:nth-child(3):hover) .step:nth-child(-n+2),
.steps:has(.step:nth-child(4):hover) .step:nth-child(-n+3),
.steps:has(.step:nth-child(5):hover) .step:nth-child(-n+4){
  --linie:var(--gold);
}
/* Der überfahrene Schritt selbst bekommt nur die obere Haelfte, damit die
   Linie an der Ziffer endet und nicht darueber hinauslaeuft. */
.steps:has(.step:nth-child(2):hover) .step:nth-child(2)::after,
.steps:has(.step:nth-child(3):hover) .step:nth-child(3)::after,
.steps:has(.step:nth-child(4):hover) .step:nth-child(4)::after,
.steps:has(.step:nth-child(5):hover) .step:nth-child(5)::after{
  background:linear-gradient(var(--gold) 0 34px,transparent 34px);
}
/* Der Schritttitel zieht leicht nach */
.step h4{transition:color .35s var(--ease)}
.step:hover h4{color:var(--gold-text)}

/* ---------- Bausteine ---------- */

.eyebrow{
  font-size:.695rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 20px;display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);flex:none}
.eyebrow.center{justify-content:center}

.lead{font-size:clamp(1.06rem,1.5vw,1.2rem);color:var(--ink-soft);line-height:1.68}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:.895rem;font-weight:600;letter-spacing:.015em;
  padding:15px 27px;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;position:relative;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease),
             box-shadow .3s var(--ease);
}
.btn:active{transform:translateY(1px) !important;transition-duration:.05s}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primary:hover{background:var(--deep);border-color:var(--deep);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(49,72,59,.045)}
.btn-sage{background:var(--sage);color:var(--deep);border-color:var(--sage)}
.btn-sage:hover{background:#98A791;border-color:#98A791;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-light{background:var(--ground);color:var(--ink);border-color:var(--ground)}
.btn-light:hover{background:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-outline-light{background:transparent;color:var(--ground);border-color:rgba(244,236,222,.42)}
.btn-outline-light:hover{border-color:var(--ground);background:rgba(244,236,222,.09)}
.btn-arrow::after{content:"\2192";font-size:1em;line-height:1;transition:transform .18s ease}
.btn:hover .btn-arrow::after,.btn-arrow:hover::after{transform:translateX(3px)}

.textlink{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;
  border-bottom:1px solid var(--gold);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.textlink:hover{color:var(--gold)}

.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.cta-note{
  margin-top:17px;font-size:.795rem;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
}
.cta-note span{display:inline-flex;align-items:center;gap:7px}
.cta-note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sage);flex:none}
.switch{margin-top:20px;font-size:.85rem;color:var(--ink-soft);line-height:1.6}

/* ---------- Entwurfs-Hinweis ---------- */

.draftbar{
  background:var(--deep);color:var(--ground);font-size:.775rem;line-height:1.5;
  padding:10px 26px;display:flex;gap:16px;align-items:center;justify-content:center;
  text-align:center;flex-wrap:wrap;
}
.draftbar strong{color:var(--gold-soft);font-weight:600}
.draftbar button{
  background:transparent;border:1px solid rgba(244,236,222,.34);color:var(--ground);
  font:inherit;font-size:.72rem;padding:3px 11px;border-radius:var(--r);cursor:pointer;
}
.draftbar button:hover{background:rgba(244,236,222,.12)}
.draftbar[hidden]{display:none}

/* ---------- Kopfzeile ---------- */

header.site{
  position:sticky;top:0;z-index:60;background:var(--ground);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
}
header.site.geschoben{box-shadow:var(--shadow-md);border-bottom-color:transparent}
.head-inner{transition:height .35s var(--ease)}
header.site.geschoben .head-inner{height:66px}
header.site.geschoben .brand img{width:36px;height:36px}
.brand img{transition:width .35s var(--ease),height .35s var(--ease)}
.head-inner{display:flex;align-items:center;gap:22px;height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:42px;height:42px;border-radius:2px}
.brand-name{display:block;font-family:"Cardo",Georgia,serif;font-size:1.22rem;line-height:1.05;color:var(--ink)}
.brand-sub{display:block;font-size:.615rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);margin-top:3px}
@media(max-width:430px){
  .brand img{width:36px;height:36px}
  .brand-name{font-size:1.05rem}
  .brand-sub{font-size:.54rem;letter-spacing:.12em}
  .wrap{padding-inline:20px}
}

nav.main{margin-left:auto;display:flex;align-items:center;gap:5px}
nav.main a{
  font-size:.845rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding:9px 13px;border-radius:var(--r);position:relative;
  transition:color .16s ease,background .16s ease;
}
nav.main a:hover{background:rgba(49,72,59,.055)}
nav.main a[aria-current="page"]{color:var(--gold-text);font-weight:600}
/* Buttons in der Navigation behalten ihre eigenen Farben, sonst gewinnt nav.main a */
nav.main a.btn-primary{color:var(--ground)}
nav.main a.btn-primary:hover{background:var(--deep);color:var(--ground)}
.nav-cta{margin-left:10px}
.tel-inline{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);white-space:nowrap}
.tel-inline:hover{color:var(--gold)}
.finale .tel-inline{color:var(--ground);border-bottom-color:var(--gold-soft)}
.info-tel{border-color:var(--gold);border-width:2px;background:var(--paper)}
.info-tel .v a{font-size:1.16rem;font-weight:600}
.info .zeiten{display:grid;gap:4px;margin-top:11px;font-size:.815rem;line-height:1.5}
.info .zeiten b{font-weight:600}
.nav-tel{
  display:inline-flex;align-items:center;gap:7px;font-size:.845rem;font-weight:600;
  color:var(--ink);text-decoration:none;padding:9px 13px;border-radius:var(--r);
  border:1px solid var(--line-strong);margin-left:6px;white-space:nowrap;
}
.nav-tel:hover{border-color:var(--ink);background:rgba(49,72,59,.045)}
.nav-tel:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-tel .ic{width:13px;height:13px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.7}
@media(max-width:1080px){.nav-tel{display:none}}
@media(max-width:1000px){
  .nav-tel{display:inline-flex;margin:14px 0 0;justify-content:center;padding:13px}
}

.burger{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line-strong);
  border-radius:var(--r);width:44px;height:44px;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

@media(max-width:1000px){
  nav.main{
    /* haengt am Header statt an einer festen Pixelhoehe, damit der Hinweisbalken
       oder eine andere Kopfhoehe das Menue nicht verschiebt */
    position:absolute;top:100%;left:0;right:0;background:var(--ground);flex-direction:column;
    align-items:stretch;gap:0;padding:12px 26px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform .2s ease,opacity .2s ease,visibility 0s linear .2s;
    max-height:calc(100dvh - 100px);overflow:auto;box-shadow:var(--shadow-md);
  }
  nav.main.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
  nav.main a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:.98rem}
  .nav-cta{margin:16px 0 0}
  .burger{display:flex}
}

/* ---------- Held ---------- */

.hero{padding-block:clamp(52px,6.5vw,92px) clamp(56px,7vw,96px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,74px);align-items:center}
.hero h1{margin-bottom:22px}
.hero .lead{max-width:36em}

.hero-figure{position:relative}
.hero-figure{--rahmen:22px}
.hero-figure img{
  width:100%;border-radius:var(--r);box-shadow:var(--shadow-lg);
  aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;
  transition:box-shadow .6s var(--ease);
}
.hero-figure:hover img{box-shadow:var(--shadow-xl)}
.hero-figure::after{
  content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);
  border-radius:var(--r);z-index:-1;
}
.hero-badge{
  position:absolute;left:-18px;bottom:34px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 19px;
  box-shadow:var(--shadow-md);max-width:224px;
}
.hero-badge .t{font-family:"Cardo",Georgia,serif;font-size:1.72rem;line-height:1;color:var(--gold-zahl)}
.hero-badge .d{font-size:.735rem;color:var(--ink-soft);margin-top:6px;line-height:1.45}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-figure{max-width:430px}
  .hero-figure::after{inset:16px -16px -16px 16px}
  .hero-badge{left:auto;right:-12px;bottom:22px}
}

/* ---------- Kennzahlenband ---------- */

.factbar{border-block:1px solid var(--line);background:var(--paper-2)}
.factbar .in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.fact{background:var(--paper-2);padding:30px 26px;text-align:center}
.fact .n{font-family:"Cardo",Georgia,serif;font-size:clamp(1.9rem,3.1vw,2.5rem);line-height:1;color:var(--ink)}
.fact .n em{font-style:normal;color:var(--gold-text)}
.fact .l{font-size:.755rem;color:var(--ink-soft);margin-top:9px;line-height:1.5}
@media(max-width:760px){.factbar .in{grid-template-columns:repeat(2,1fr)}}

/* ---------- Reibungszettel ---------- */

.friction-head{max-width:44em;margin-bottom:46px}
.friction{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.note{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px 24px;font-size:.905rem;line-height:1.58;color:var(--ink);
  box-shadow:var(--shadow-sm);position:relative;
  transform:rotate(var(--rot,0deg));
  transition:transform .7s var(--ease),box-shadow .35s var(--ease);
}
/* Ausgangslage: die Zettel liegen lose und leicht verstreut auf dem Tisch.
   Beim Scrollen richten sie sich nacheinander aus. Das ist die einzige
   Bewegung der Seite, die selbst ein Argument ist. */
html.js .friction .note{
  opacity:0;
  transform:rotate(var(--rot,0deg)) translateY(26px) scale(.97);
}
html.js .friction .note.gelegt{
  opacity:1;
  transform:rotate(var(--rot,0deg)) translateY(0) scale(1);
  transition:opacity .5s var(--ease-out),transform .62s var(--ease-out);
}
html.js .friction.sortiert .note{
  transform:none;
  box-shadow:var(--shadow-md);
  transition:transform .75s var(--ease),box-shadow .5s var(--ease);
}
.note:hover{box-shadow:var(--shadow-lg);z-index:2}
html.js .friction.sortiert .note:hover{transform:translateY(-3px)}
.note::before{
  content:"";position:absolute;left:20px;top:0;width:22px;height:2px;background:var(--terra);
}
.sorted .note{transform:none}
.note strong{display:block;font-weight:600;margin-bottom:4px;font-size:.83rem;color:var(--gold-text);letter-spacing:.01em}
@media(max-width:1000px){.friction{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.friction{grid-template-columns:1fr}}

.friction-close{
  margin-top:40px;padding:26px 30px;background:var(--ink);color:var(--ground);
  border-radius:var(--r);display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  justify-content:space-between;
}
.friction-close p{max-width:44em;font-size:1.02rem}
.friction-close strong{color:var(--gold-soft);font-weight:600}

/* ---------- Angebotskarten ---------- */

.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.offer{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px 30px;display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-xs);
  transition:border-color .35s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);
}
.offer:hover{
  border-color:var(--line-strong);box-shadow:var(--shadow-xl);transform:translateY(-6px);
}
.offer.featured{box-shadow:var(--shadow-lg)}
.offer.featured:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)}
/* Der Preis tritt beim Ueberfahren der Karte leicht hervor */
.offer .price .v{transition:transform .45s var(--ease)}
.offer:hover .price .v{transform:translateX(3px)}
/* Die hervorgehobene Karte steht von Anfang an eine Stufe hoeher */
@media(min-width:1001px){
  .offers .offer.featured{transform:translateY(-10px)}
  .offers .offer.featured:hover{transform:translateY(-16px)}
}
.offer.featured{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.offer.featured h3,.offer.featured .price .v{color:var(--ground)}
.offer.featured .meta,.offer.featured li,.offer.featured .result{color:#CFD9CC}
.offer.featured .price{border-color:rgba(244,236,222,.2)}
.offer.featured .price .n{color:#AFBCAD}
.offer.featured .price .v em{color:var(--gold-soft)}
.offer.featured ul li::before{background:var(--sage)}
.offer.featured .result{border-color:rgba(244,236,222,.2)}
.offer.featured .result strong{color:var(--gold-soft)}

.offer-tag{
  align-self:flex-start;font-size:.655rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px;margin-bottom:16px;
  background:var(--gold);color:var(--deep);
}
.offer h3{margin-bottom:9px}
.offer .meta{font-size:.795rem;color:var(--ink-soft);margin-bottom:20px}
.price{border-block:1px solid var(--line);padding:16px 0;margin-bottom:20px}
.price .v{font-family:"Cardo",Georgia,serif;font-size:1.95rem;line-height:1;color:var(--ink)}
.price .v em{font-style:normal;font-size:.95rem;color:var(--ink-soft);font-family:"Montserrat",sans-serif}
.price .n{font-size:.715rem;color:var(--ink-soft);margin-top:7px}
.offer ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.offer ul li{font-size:.86rem;line-height:1.52;padding-left:19px;position:relative;color:var(--ink-soft)}
.offer ul li b{font-weight:600;color:var(--ink)}
.offer.featured ul li b{color:var(--ground)}

/* Ablauf innerhalb einer Angebotskarte: Zeitschiene mit Dauer, Schritt und Zweck */
.ablauf{list-style:none;counter-reset:schritt;margin:0 0 22px;padding:0;position:relative}
.ablauf::before{
  content:"";position:absolute;left:9px;top:8px;bottom:12px;width:1px;background:var(--line-strong);
}
.offer.featured .ablauf::before{background:rgba(244,236,222,.26)}
.ablauf li{position:relative;padding:0 0 20px 34px;counter-increment:schritt}
.ablauf li:last-child{padding-bottom:0}
.ablauf li::before{
  content:counter(schritt);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--ground);border:1px solid var(--gold);color:var(--gold-text);
  font-size:.66rem;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.offer.featured .ablauf li::before{background:var(--ink);border-color:var(--gold);color:var(--gold-soft)}
.ablauf li.pause{counter-increment:none}
.ablauf li.pause::before{content:"";background:var(--sage);border-color:var(--sage)}
.offer.featured .ablauf li.pause::before{background:var(--sage);border-color:var(--sage)}
.ablauf .wann{
  display:block;font-size:.665rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--gold-text);margin-bottom:4px;
}
.offer.featured .ablauf .wann{color:var(--gold-soft)}
.ablauf .was{display:block;font-size:.925rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.offer.featured .ablauf .was{color:var(--ground)}
.ablauf .wie{display:block;font-size:.83rem;line-height:1.55;color:var(--ink-soft)}
.offer.featured .ablauf .wie{color:#CFD9CC}
.ablauf li.pause .was{font-style:italic}
.offer ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--gold);
}
.result{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-size:.86rem;line-height:1.55;color:var(--ink-soft);
}
.result strong{display:block;font-size:.655rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:7px;font-weight:600}
.offer .btn{margin-top:20px;width:100%}
.offers.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
@media(max-width:1000px){
  .offers,.offers.two{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}

.pricenote{
  margin-top:26px;font-size:.83rem;color:var(--ink-soft);max-width:62em;
  padding-left:16px;border-left:2px solid var(--sage);line-height:1.62;
}

/* ---------- Ablauf ---------- */

.steps{position:relative;margin-top:52px;display:flex;flex-direction:column;gap:0}
.steps::before{
  content:"";position:absolute;left:26px;top:14px;bottom:34px;width:1px;background:var(--gold-soft);
}
.step{display:grid;grid-template-columns:54px 1fr;gap:26px;padding-block:22px;position:relative}
.step + .step{border-top:1px solid var(--line)}
.step-n{
  width:54px;height:54px;border-radius:50%;background:var(--ground);
  border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;
  font-family:"Cardo",Georgia,serif;font-size:1.18rem;color:var(--gold-text);position:relative;z-index:1;
}
.step.now .step-n{background:var(--gold);color:var(--ground)}
.step h4{margin-bottom:6px}
.step p{font-size:.915rem;color:var(--ink-soft);max-width:56em}
.step .tag{
  display:inline-block;margin-top:9px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--terra-text);font-weight:600;
}
@media(max-width:640px){
  .steps::before{left:19px}
  .step{grid-template-columns:40px 1fr;gap:17px}
  .step-n{width:40px;height:40px;font-size:1rem}
}

/* ---------- Portrait-Bahn ---------- */

.about-band{background:var(--paper-2);border-block:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,68px);align-items:center}
.about-grid figure,.about-grid picture{overflow:hidden;border-radius:var(--r);margin:0}
.about-grid img{
  border-radius:var(--r);box-shadow:var(--shadow-md);aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.2s var(--ease),box-shadow .6s var(--ease);
}
.about-grid img:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}
.trustline{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.trustline span{
  display:inline-flex;align-items:center;gap:8px;font-size:.795rem;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:2px;padding:8px 13px;background:var(--paper);
}
.trustline span::before{
  content:"";width:9px;height:5px;flex:none;
  border-left:1.6px solid var(--sage);border-bottom:1.6px solid var(--sage);transform:rotate(-45deg);
}
.quals{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}
.qual{background:var(--paper-2);padding:17px 19px}
.qual .t{font-size:.885rem;font-weight:600}
.qual .d{font-size:.755rem;color:var(--ink-soft);margin-top:3px;line-height:1.45}
@media(max-width:860px){.about-grid{grid-template-columns:1fr}
  /* min() statt fester Grenze: sonst bleibt das Bild auf 360px stehen
     und schiebt die ganze Seite ueber schmale Schirme hinaus. */
  .about-grid img{max-width:min(360px,100%)}}
@media(max-width:520px){.quals{grid-template-columns:1fr}}

/* ---------- Privatbereich ---------- */

.private-band{background:var(--deep);color:var(--ground)}
.private-band h2,.private-band h3{color:var(--ground)}
.private-band .eyebrow{color:var(--gold-soft)}
.private-band .eyebrow::before{background:var(--gold-soft)}
.private-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,66px);align-items:center}
.private-grid p{color:#CCD6C9}
.private-grid img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:32px}
.pcard{border:1px solid rgba(244,236,222,.2);border-radius:var(--r);padding:22px 20px;background:rgba(244,236,222,.045)}
.pcard .t{font-family:"Cardo",Georgia,serif;font-size:1.15rem;margin-bottom:7px}
.pcard .d{font-size:.83rem;color:#C5D0C3;line-height:1.55}
.pcard .p{margin-top:14px;font-family:"Cardo",Georgia,serif;font-size:1.42rem;color:var(--gold-soft)}
.pcard .p em{font-style:normal;font-family:"Montserrat",sans-serif;font-size:.7rem;color:#B4C0B2;display:block;margin-top:3px}
@media(max-width:900px){.private-grid{grid-template-columns:1fr}.private-grid figure{order:-1;max-width:400px}}
@media(max-width:520px){.pcards{grid-template-columns:1fr}}

/* ---------- Workbook ---------- */

.wb{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4.5vw,58px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3.6vw,46px)}
.wb-cover{
  aspect-ratio:1/1.414;background:var(--ground);border:1px solid var(--gold);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:32px 26px;text-align:center;box-shadow:var(--shadow-md);
}
.wb-cover img{width:82px;height:82px;border-radius:2px}
.wb-cover .t{font-family:"Cardo",Georgia,serif;font-size:1.32rem;line-height:1.2}
.wb-cover .s{font-size:.72rem;color:var(--ink-soft);line-height:1.5}
.wb-cover .r{width:34px;height:1px;background:var(--gold)}
.wb ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.wb ul li{font-size:.9rem;color:var(--ink-soft);padding-left:22px;position:relative;line-height:1.55}
.wb ul li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border:1px solid var(--sage);border-radius:1px}
.wb-price{display:flex;align-items:baseline;gap:12px;margin-top:26px;flex-wrap:wrap}
.wb-price .v{font-family:"Cardo",Georgia,serif;font-size:2.15rem;line-height:1;color:var(--ink)}
.wb-price .n{font-size:.73rem;color:var(--ink-soft)}
@media(max-width:820px){.wb{grid-template-columns:1fr}.wb-cover{max-width:270px}}

/* ---------- Grenzen ---------- */

.limits{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.limit{border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;background:var(--paper)}
.limit h4{margin-bottom:16px;font-family:"Cardo","Iowan Old Style",Georgia,serif;
  font-size:1.2rem;text-transform:none;letter-spacing:0;font-weight:400}
.limit.yes h4{color:#586651}
.limit.no h4{color:#8C5136}
.limit ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.limit li{font-size:.885rem;color:var(--ink-soft);padding-left:21px;position:relative;line-height:1.5}
.limit.yes li::before{content:"";position:absolute;left:2px;top:.46em;width:9px;height:5px;
  border-left:1.5px solid #586651;border-bottom:1.5px solid #586651;transform:rotate(-45deg)}
.limit.no li::before{content:"";position:absolute;left:2px;top:.68em;width:9px;height:1.5px;background:#8C5136}
@media(max-width:760px){.limits{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */

.faq{margin-top:42px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-weight:500;font-size:1.01rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 44px 24px 0;color:var(--ink-soft);font-size:.925rem;max-width:62em}

/* ---------- Abschluss-CTA ---------- */

.finale{background:var(--ink);color:var(--ground);text-align:center}
.finale h2{color:var(--ground);margin-bottom:18px}
.finale p{color:#CBD5C8;max-width:40em;margin-inline:auto}
.finale .cta-row{justify-content:center}
.finale .cta-note{justify-content:center;color:#B4C0B2}
.finale .cta-note span::before{background:var(--gold)}

/* ---------- Kontaktseite ---------- */

.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4.6vw,60px);align-items:start}
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;min-width:0}
.field label{font-size:.775rem;font-weight:600;letter-spacing:.04em}
.field label span,.field legend span{color:var(--terra-text)}
fieldset.field{border:0;margin:0 0 18px;padding:0}
fieldset.field legend{font-size:.775rem;font-weight:600;letter-spacing:.04em;padding:0;margin-bottom:7px}
.fieldnote{font-size:.775rem;color:var(--ink-soft);line-height:1.55;margin:-6px 0 18px}
/* Spamfalle: fuer Menschen unsichtbar, fuer einfache Roboter verlockend */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot-fein{font-size:.72rem;color:#8E9C8C;margin-top:9px;line-height:1.5}
.field input,.field textarea,.field select{
  font:inherit;font-size:.92rem;padding:12px 14px;border:1px solid var(--feld-rahmen);
  border-radius:var(--r);background:var(--ground);color:var(--ink);width:100%;min-width:0;
  /* Ohne diese beiden Angaben erzwingt ein Eingabefeld seine
     Standardbreite und schiebt die Seite ueber schmale Schirme hinaus. */
  width:100%;min-width:0}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{min-height:132px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.radioset{display:flex;flex-wrap:wrap;gap:9px}
.radioset label{
  display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:400;
  border:1px solid var(--line-strong);border-radius:var(--r);padding:10px 14px;cursor:pointer;
  background:var(--ground);
}
.radioset input{accent-color:var(--sage)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.81rem;color:var(--ink-soft);line-height:1.5}
.check input{margin-top:3px;accent-color:var(--sage);flex:none}
.contact-side{display:flex;flex-direction:column;gap:18px}
.info{border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;background:var(--paper)}
.info .k{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:8px}
.info .v{font-size:.95rem}
.info .v a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.info .d{font-size:.815rem;color:var(--ink-soft);margin-top:6px;line-height:1.55}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}}

/* ---------- Themenwolke ---------- */

.whylist{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.whylist li{
  font-size:1rem;line-height:1.65;color:var(--ink);padding-left:30px;position:relative;
}
.whylist li::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:7px;
  border-left:2px solid var(--sage);border-bottom:2px solid var(--sage);transform:rotate(-45deg);
}
.topics{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.topic{
  border:1px solid var(--line-strong);border-radius:2px;padding:8px 14px;
  font-size:.815rem;color:var(--ink-soft);background:var(--paper);
}
.private-band .topic{border-color:rgba(244,236,222,.24);background:rgba(244,236,222,.05);color:#CCD6C9}

/* ---------- Drei-Schritte-Methode ---------- */

.method{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mcard{border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;background:var(--paper);position:relative}
.mcard .num{font-family:"Cardo",Georgia,serif;font-size:2.3rem;line-height:1;color:var(--gold-zahl);margin-bottom:12px}
.mcard h3{margin-bottom:9px}
.mcard p{font-size:.895rem;color:var(--ink-soft);line-height:1.6}
.private-band .mcard{background:rgba(244,236,222,.05);border-color:rgba(244,236,222,.2)}
.private-band .mcard p{color:#C5D0C3}
.private-band .mcard .num{color:var(--gold-zahl)}
.method.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
@media(max-width:860px){
  .method,.method.two{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}

/* ---------- Werteraster ---------- */

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px}
.value{background:var(--ground);padding:30px 26px}
.value h4{margin-bottom:10px}
.value p{font-size:.885rem;color:var(--ink-soft);line-height:1.6}
@media(max-width:860px){.values{grid-template-columns:1fr}}

/* ---------- Werdegang ---------- */

.cv{margin-top:40px;border-top:1px solid var(--line)}
.cv-item{display:grid;grid-template-columns:186px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line)}
.cv-item .when{font-size:.79rem;color:var(--gold-text);font-weight:600;letter-spacing:.05em;padding-top:3px}
.cv-item h4{margin-bottom:6px}
.cv-item p{font-size:.895rem;color:var(--ink-soft)}
@media(max-width:680px){.cv-item{grid-template-columns:1fr;gap:6px}}

/* ---------- Seitenkopf Unterseiten ---------- */

.pagehead{padding-block:clamp(46px,6vw,86px) clamp(30px,4vw,52px);border-bottom:1px solid var(--line)}
.pagehead h1{margin-bottom:20px}
.pagehead .lead{max-width:40em}
.privathead{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,4.4vw,60px);align-items:start}
.privathead img{
  border-radius:var(--r);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;
  transition:transform 1.2s var(--ease),box-shadow .6s var(--ease);
}
.privathead img:hover{transform:scale(1.02);box-shadow:var(--shadow-xl)}
.reassure{
  margin-top:28px;padding:20px 24px;border-left:3px solid var(--sage);
  background:var(--paper);border-radius:0 var(--r) var(--r) 0;
}
.reassure p{font-size:1rem;line-height:1.68;color:var(--ink)}
@media(max-width:860px){
  .privathead{grid-template-columns:1fr}
  .privathead figure{max-width:320px;order:-1}
}

/* ---------- Fusszeile (Footer) ---------- */

footer.site{background:var(--deep-2);color:#B9C4B7;padding-block:56px 30px;font-size:.855rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
footer.site h5{
  font-family:"Montserrat",sans-serif;font-size:.665rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 15px;font-weight:600;
}
footer.site a{color:#B9C4B7;text-decoration:none;transition:color .16s ease}
footer.site a:hover{color:var(--ground)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-mark{margin-bottom:18px}
.foot-mark .fm-name{
  display:block;font-family:"Cardo",Georgia,serif;font-size:1.5rem;line-height:1.1;color:var(--ground);
}
.foot-mark .fm-rule{display:block;width:38px;height:1px;background:var(--gold);margin:11px 0 9px}
.foot-mark .fm-sub{
  display:block;font-size:.655rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.foot-brand p{max-width:30em;line-height:1.62;font-size:.845rem}
.foot-news{
  margin-top:44px;padding-top:30px;border-top:1px solid rgba(244,236,222,.13);
  display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;align-items:center;
}
.foot-news p{max-width:38em;line-height:1.6;margin-top:-4px}
.foot-news form{display:flex;gap:10px}
.foot-news input{
  flex:1;min-width:0;font:inherit;font-size:.87rem;padding:12px 14px;border-radius:var(--r);
  border:1px solid rgba(244,236,222,.26);background:rgba(244,236,222,.07);color:var(--ground);
}
.foot-news input::placeholder{color:#8E9C8C}

.foot-news .btn{padding:12px 22px}
@media(max-width:760px){.foot-news{grid-template-columns:1fr}}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(244,236,222,.13);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:.775rem;color:#8E9C8C;
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Handlungsleiste auf kleinen Geraeten ---------- */

.actionbar{display:none}
@media(max-width:1000px){
  .actionbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--ink);border-top:1px solid var(--gold);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .actionbar a{
    display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;
    color:var(--ground);text-decoration:none;font-size:.9rem;font-weight:600;
  }
  .actionbar a + a{border-left:1px solid rgba(244,236,222,.22)}
  .actionbar a:active{background:var(--deep)}
  .actionbar a:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-3px}
  .actionbar svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--gold-soft);stroke-width:1.8}
  body{padding-bottom:58px}
}

/* ---------- Kaufhinweis digitale Inhalte ---------- */

.buybox{
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper-2);
  padding:20px 22px;margin-top:22px;
}
.buybox .k{
  font-size:.655rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--gold-text);margin-bottom:11px;
}
.buybox ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.buybox li{font-size:.83rem;line-height:1.55;color:var(--ink-soft);padding-left:20px;position:relative}
.buybox li::before{
  content:"";position:absolute;left:2px;top:.46em;width:9px;height:5px;
  border-left:1.5px solid var(--sage);border-bottom:1.5px solid var(--sage);transform:rotate(-45deg);
}
.buybox .waiver{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line-strong);
  font-size:.79rem;line-height:1.55;color:var(--ink-soft);
}

/* ---------- Terminbuchung ---------- */

.booking{
  border:1px solid var(--gold);border-radius:var(--r);background:var(--paper);
  overflow:hidden;margin-bottom:24px;
}
.booking .head{
  padding:24px 26px;border-bottom:1px solid var(--line);
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.booking .head h3{margin-bottom:5px}
.booking .head p{font-size:.855rem;color:var(--ink-soft);line-height:1.55}
.booking .frame{
  min-height:420px;background:var(--ground);display:flex;align-items:center;
  justify-content:center;padding:40px 26px;text-align:center;
}
.booking .frame iframe{width:100%;min-height:640px;border:0;display:block}
.booking .platzhalter{max-width:34em}
.booking .platzhalter .icon{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.booking .platzhalter .icon svg{width:22px;height:22px;fill:none;stroke:var(--gold-text);stroke-width:1.6}
.booking .platzhalter .t{font-family:"Cardo",Georgia,serif;font-size:1.22rem;margin-bottom:10px}
.booking .platzhalter .d{font-size:.865rem;color:var(--ink-soft);line-height:1.6}
.booking .platzhalter code{
  display:inline-block;margin-top:14px;font-size:.775rem;background:var(--paper-2);
  border:1px solid var(--line-strong);border-radius:2px;padding:7px 11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- Newsletter ---------- */

.news{
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3.6vw,48px);align-items:center;
}
.news h3{margin-bottom:12px}
.news p{font-size:.925rem;color:var(--ink-soft);line-height:1.62}
.news form{display:grid;gap:12px}
.news .row{display:flex;gap:10px}
.news input[type=email]{
  flex:1;min-width:0;font:inherit;font-size:.92rem;padding:13px 15px;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--ground);color:var(--ink);
}
.news input[type=email]:focus{border-color:var(--gold)}
.news .check{font-size:.775rem}
.news .fine{font-size:.735rem;color:var(--ink-soft);line-height:1.5}
.news.dark{background:rgba(244,236,222,.05);border-color:rgba(244,236,222,.2)}
.news.dark h3{color:var(--ground)}
.news.dark p,.news.dark .check,.news.dark .fine{color:#C5D0C3}
.news.dark input[type=email]{background:rgba(244,236,222,.09);border-color:rgba(244,236,222,.26);color:var(--ground)}
@media(max-width:860px){.news{grid-template-columns:1fr}.news .row{flex-direction:column}}

/* ---------- Arbeitsbilder ---------- */

figure.arbeit{margin:0;overflow:hidden;border-radius:var(--r)}
figure.arbeit img{
  width:100%;display:block;border-radius:var(--r);box-shadow:var(--shadow-md);
  transition:transform 1.2s var(--ease),box-shadow .6s var(--ease);
}
figure.arbeit:hover img{transform:scale(1.02);box-shadow:var(--shadow-lg)}
figure.arbeit figcaption{
  font-size:.79rem;color:var(--ink-soft);margin-top:11px;line-height:1.5;
}

/* Bild und Text nebeneinander, wechselnde Seiten */
.bildtext{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,4.4vw,58px);align-items:center;
}
.bildtext.gedreht > figure{order:2}
@media(max-width:900px){
  .bildtext{grid-template-columns:1fr}
  .bildtext.gedreht > figure{order:-1}
}

/* Vorher und nachher als ein Bild, mit Beschriftung darunter */
.vergleich{max-width:760px;margin-inline:auto}
.vergleich figcaption{text-align:center;margin-top:14px;font-size:.85rem}
.vergleich figcaption b{color:var(--ink);font-weight:600}

/* ---------- Stimmen ---------- */

.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.voice{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;display:flex;flex-direction:column;position:relative;
}
.voice::before{
  content:"";position:absolute;left:28px;top:0;width:26px;height:2px;background:var(--gold);
}
.voice blockquote{
  margin:0 0 22px;font-family:"Cardo",Georgia,serif;font-size:1.09rem;line-height:1.55;
  color:var(--ink);
}
.voice .who{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:13px;
}
.voice .who img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line-strong);
}
.voice .who .monogramm{
  width:46px;height:46px;border-radius:50%;flex:none;background:var(--sage-soft);
  border:1px solid var(--sage);display:flex;align-items:center;justify-content:center;
  font-family:"Cardo",Georgia,serif;font-size:1rem;color:var(--ink);letter-spacing:.02em;
}
.voice.employer .who .monogramm{background:var(--gold-soft);border-color:var(--gold)}
.voice .who .n{display:block;font-size:.885rem;font-weight:600}
.voice .who .r{display:block;font-size:.775rem;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.voice .kind{
  font-size:.645rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--gold-text);margin-bottom:13px;
}
.voice.employer{background:var(--paper-2)}
.voice.employer .kind{color:var(--terra-text)}
.voice.employer::before{background:var(--terra)}
.draftnote{
  display:flex;gap:12px;align-items:flex-start;margin-top:30px;padding:16px 20px;
  border:1px dashed var(--terra);border-radius:var(--r);background:var(--terra-soft);
  font-size:.83rem;line-height:1.55;color:var(--ink);
}
.draftnote b{font-weight:600}
.voices.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
.voices.one{grid-template-columns:1fr;margin-top:32px}
@media(max-width:960px){
  .voices,.voices.two{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}

/* ---------- Rueckmeldungen ---------- */

.haken{
  width:72px;height:72px;margin:0 auto 26px;border-radius:50%;
  background:var(--sage-soft);border:1px solid var(--sage);
  display:flex;align-items:center;justify-content:center;
}
.haken svg{width:32px;height:32px;fill:none;stroke:#3F5946;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
html.js .haken{animation:heben-klein .6s var(--ease-out) both}

/* ---------- Rechtstexte ---------- */

.legal{max-width:760px;margin-inline:auto}
.legal h2{font-size:clamp(1.4rem,2.1vw,1.75rem);margin:44px 0 14px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.05rem;margin:28px 0 10px;font-family:"Montserrat",sans-serif;font-weight:600}
.legal p{margin-bottom:14px;font-size:.945rem;line-height:1.72}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;font-size:.945rem;line-height:1.72}
.legal li{margin-bottom:7px}
.legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.legal a:hover{color:var(--gold)}
.legal .box{
  border:1px solid var(--line-strong);border-radius:var(--r);padding:22px 24px;
  background:var(--paper);margin:22px 0;
}
.legal .box p:last-child{margin-bottom:0}
.legal .box.warn{border-color:var(--terra);background:var(--terra-soft)}
.legal .box.warn .k{
  font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:#A9583A;margin-bottom:9px;display:block;
}
.legal dl{margin:0 0 18px;display:grid;grid-template-columns:190px 1fr;gap:9px 20px;font-size:.945rem}
.legal dt{font-weight:600}
.legal dd{margin:0}
.legal .ph{background:var(--terra-soft);border-bottom:1px dashed var(--terra);
  padding:1px 6px;border-radius:2px;font-weight:600;font-size:.9em}
.legal .stand{font-size:.815rem;color:var(--ink-soft);margin-top:40px;padding-top:18px;
  border-top:1px solid var(--line)}
@media(max-width:560px){.legal dl{grid-template-columns:1fr;gap:2px 0}
  .legal dt{margin-top:10px}}

/* ---------- Seitenwechsel ---------- */

.page{display:block}

/* Stimmen, Werte, Methodenkarten und Formular */
.voice{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.voice:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mcard{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.info{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.info:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.form{box-shadow:var(--shadow-md)}
.wb{box-shadow:var(--shadow-sm)}
.wb-cover{transition:transform .8s var(--ease),box-shadow .6s var(--ease)}
.wb:hover .wb-cover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:var(--shadow-xl)}
.topic{transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.topic:hover{border-color:var(--sage);transform:translateY(-2px)}
.qual{transition:background .35s var(--ease)}
.qual:hover{background:var(--paper)}
.trustline span{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.trustline span:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.friction-close{box-shadow:var(--shadow-md)}
.reassure{box-shadow:var(--shadow-xs)}

/* FAQ: die Antwort faehrt auf statt zu springen */
.faq details>.a{
  overflow:hidden;
}
html.js .faq details[open]>.a{animation:faq-auf .4s var(--ease-out)}
@keyframes faq-auf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--gold-text)}

/* Die Handlungsleiste faehrt beim ersten Scrollen ein */
@media(max-width:1000px){
  html.js .actionbar{transform:translateY(100%);transition:transform .45s var(--ease-out)}
  html.js .actionbar.da{transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-delay:0s !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  /* Kein Zustand darf verborgen bleiben, wenn nichts animiert wird */
  html.js .friction .note,html.js .factbar .fact,
  html.js .steps .step{opacity:1 !important;transform:none !important}
  html.js .steps::before{transform:scaleY(1) !important}
  html.js .actionbar{transform:none !important}
  .offers .offer.featured{transform:none !important}
}

/* ---- Blog ---------------------------------------------------------- */
.wrap.schmal{max-width:760px}
.beitraege{display:grid;gap:34px;grid-template-columns:repeat(2,1fr);margin-top:8px}
#page-blog .hero-sub{padding-bottom:8px}
#page-blog .hero-sub+section{padding-top:26px}
#page-blog .lead{max-width:70ch}
.beitrag{background:#fff;border:1px solid rgba(49,72,59,.10);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.beitrag:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.beitrag.gross{grid-column:1 / -1}
.beitrag-bild{display:block;overflow:hidden;background:var(--ground)}
.beitrag-bild img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  display:block;transition:transform .8s var(--ease)}
.beitrag:hover .beitrag-bild img{transform:scale(1.035)}
.beitrag-text{padding:26px 28px 30px}
.beitrag.gross .beitrag-text{padding:32px 40px 38px}
.beitrag-meta{font-size:.82rem;letter-spacing:.04em;color:#5D6E60;margin:0 0 10px}
.beitrag-meta .rubrik{color:var(--gold-text);font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;margin-right:8px}
.beitrag h2{font-size:1.34rem;line-height:1.3;margin:0 0 12px;text-wrap:balance}
.beitrag.gross h2{font-size:1.9rem}
.beitrag h2 a{color:var(--ink);text-decoration:none}
.beitrag h2 a:hover{color:var(--gold-text)}
.beitrag-text p{font-size:.97rem;line-height:1.62;margin:0 0 14px}
.mehr{color:var(--gold-text);font-weight:600;text-decoration:none;font-size:.94rem}
.mehr:hover{text-decoration:underline;text-underline-offset:3px}

.artikel-kopf{padding-bottom:26px}
.artikel-kopf .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(122,96,52,.4)}
.artikel-kopf h1{font-size:clamp(2rem,4.4vw,3rem);text-wrap:balance}
.artikel-meta{color:#5D6E60;font-size:.92rem;margin-top:14px}
.artikel-bild{width:100%;height:auto;border-radius:14px;display:block;
  box-shadow:var(--shadow-md);margin-bottom:12px}
.artikel-text{padding-top:34px}
.artikel-text p{font-size:1.06rem;line-height:1.78;margin:0 0 20px}
.artikel-text h2{font-size:1.62rem;margin:44px 0 14px;text-wrap:balance}
.artikel-text h3{font-size:1.2rem;margin:32px 0 10px}
.artikel-text ul.liste{margin:0 0 22px}
.artikel-text blockquote{margin:28px 0;padding:18px 26px;border-left:3px solid var(--gold);
  background:rgba(185,150,90,.07);border-radius:0 10px 10px 0}
.artikel-text blockquote p{margin:0;font-style:italic}
.trenner{border:0;border-top:1px solid rgba(49,72,59,.14);margin:34px 0}

.artikel-schluss{padding-top:10px}
.autorbox{display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start;
  background:#fff;border:1px solid rgba(49,72,59,.10);border-radius:14px;
  padding:28px 30px;box-shadow:var(--shadow-sm)}
.autorbox img{width:120px;height:120px;object-fit:cover;border-radius:50%}
.autorbox p{font-size:.97rem;line-height:1.66;margin:0 0 12px}
.autor-name{font-family:var(--serif);font-size:1.16rem;color:var(--ink);margin:0 0 6px!important}

.weiterlesen{padding-top:14px}
.weiterlesen h2{font-size:1.3rem;margin-bottom:16px}
.tipps{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tipp{display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:#fff;
  border:1px solid rgba(49,72,59,.10);border-radius:12px;text-decoration:none;
  box-shadow:var(--shadow-xs);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tipp:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tipp-rubrik{font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--gold-text);font-weight:600}
.tipp-titel{font-family:var(--serif);font-size:1.04rem;line-height:1.35;color:var(--ink)}
.tipp-mehr{font-size:.88rem;color:var(--gold-text);font-weight:600}

@media (max-width:860px){
  .beitraege{grid-template-columns:1fr}
  .beitrag.gross{grid-template-columns:1fr}
  .beitrag.gross .beitrag-text{padding:26px 28px 30px}
  .beitrag.gross h2{font-size:1.5rem}
  .autorbox{grid-template-columns:1fr;text-align:left}
  .autorbox img{width:96px;height:96px}
  .tipps{grid-template-columns:1fr}
}

/* ---- Schmale Schirme --------------------------------------------------
   Grid- und Flexkinder haben von sich aus min-width:auto und schrumpfen
   deshalb nicht unter ihre Inhaltsbreite. Ein Eingabefeld mit seiner
   Standardbreite schiebt dadurch die ganze Seite ueber den Schirm hinaus.
   Diese Regel hebt das auf, ohne das Layout auf breiten Schirmen zu
   veraendern. Gemessen bei 320 Pixel Breite. */
.contact-grid > *, .about-grid > *, .private-grid > *, .field-row > *,
.field, .form, .beitraege > *, .tipps > *, .autorbox > *,
.actionbar > *{min-width:0}
/* Die feste Leiste teilt sich zwei gleiche Haelften. Ohne minmax(0,...)
   erzwingt der laengere Beschriftungstext die Spaltenbreite. */
.actionbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.actionbar a{padding-inline:8px;text-align:center}
.foot-news > *{min-width:0}
/* Die Einwilligungszeile darf umbrechen. Ohne das schiebt das Pflichtfeld-
   Sternchen am Zeilenende die Seite auf schmalen Geraeten nach rechts. */
.check{flex-wrap:wrap}
/* Rechtstexte enthalten lange Zeichenketten ohne Leerzeichen: die
   Unterschriftslinien im Widerrufsformular und ganze Internetadressen.
   Ohne Umbruchpunkt laufen sie auf schmalen Geraeten aus der Seite. */
body{overflow-wrap:break-word}
.legal, .legal p, .legal li, .legal td{overflow-wrap:anywhere}
/* Auf sehr schmalen Geraeten darf der Knopf unter das Eingabefeld rutschen. */
.foot-news form{flex-wrap:wrap}
.foot-news form input{flex:1 1 160px}
@media(max-width:359px){
  .actionbar a{font-size:.84rem;gap:5px}
  .actionbar svg{width:14px;height:14px}
}
img, video, svg{max-width:100%;height:auto}

/* Unter 16 Pixel zoomt iOS beim Antippen eines Feldes in die Seite hinein.
   Am Schreibtisch bleibt die feinere Groesse erhalten. */
@media(max-width:1000px){
  .field input, .field textarea, .field select,
  .radioset label, .foot-news input, .check{font-size:16px}
}

.artikel-anschluss{padding-top:8px;padding-bottom:0}
.anschluss{background:var(--sage-soft);border-left:3px solid var(--sage);
  border-radius:0 12px 12px 0;padding:24px 28px;margin:8px 0 4px}
.anschluss p{font-size:1.02rem;line-height:1.66;margin:0 0 16px}
.anschluss p:last-child{margin:0}