/* ============================================================
   Craftix Systems — gemeinsames Design-System
   Eine Datei für alle Seiten. Farben unverändert zum Vorgänger,
   nur als Variablen sortiert.
   ============================================================ */

/* ---------- Schrift ----------
   Inter liegt als Variable Font vor. Vorher stand für jede Schriftstärke
   eine eigene @font-face-Regel auf derselben Datei — der Browser bekam
   damit nur einen Schnitt und hat 500 bis 800 künstlich fett gerechnet.
   Eine Regel mit Stärkebereich liefert die echten Schnitte. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-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;
}

/* ---------- Werte ---------- */
:root{
  /* Farben — identisch zur bisherigen Seite */
  --bg:#FBFAF6;
  --bg-soft:#F1EEE3;
  --accent-soft:#E3E9DE;
  --line:#DFD9C7;
  --line-soft:#EAE5D7;
  --faint:#B4B29E;
  --dim:#96967E;
  --muted:#6B7458;
  --sage-mid:#8B9A6C;
  --accent:#3E4A28;
  --accent-deep:#2A331A;
  --ink:#262E1D;
  --dark:#262E1D;
  --dark-2:#30392A;
  --dark-line:#45503A;
  --sage:#B7C48F;
  --on-dark:#AEB39A;
  --on-dark-2:#B4BBA5;
  --on-dark-3:#DCE4CC;
  --ok:#1B8A5A;
  --white:#fff;

  /* Schatten in der Hausfarbe statt in Schwarz */
  --shadow-s:0 1px 2px rgba(38,46,29,.04), 0 2px 8px rgba(38,46,29,.04);
  --shadow-m:0 2px 4px rgba(38,46,29,.04), 0 12px 28px rgba(38,46,29,.07);
  --shadow-l:0 4px 8px rgba(38,46,29,.05), 0 24px 56px rgba(38,46,29,.10);

  /* Maße */
  --breite:1180px;
  --breite-eng:66ch;
  --luft:clamp(20px,4vw,32px);
  --r-s:10px;
  --r-m:14px;
  --r-l:22px;
  --r-xl:28px;
  --r-pille:999px;

  /* Ebenen */
  --z-basis:1;
  --z-hinweis:80;
  --z-kopf:100;
  --z-menue:110;
  --z-korn:200;

  --ease:cubic-bezier(.22,.8,.3,1);
  --font:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}

/* ---------- Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:104px; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv05' 1,'ss01' 1;
  overflow-x:hidden;
}
/* Feines Korn über der ganzen Seite. Nimmt dem Creme die Plastik-Glätte,
   ohne dass man es bewusst wahrnimmt. */
body::after{
  content:""; position:fixed; inset:0; z-index:var(--z-korn); pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
img{max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent-soft); color:var(--accent);}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--sage-mid); outline-offset:3px; border-radius:4px;
}

/* Sprung direkt zum Inhalt — für Tastatur- und Screenreader-Bedienung */
.sprung{
  position:absolute; left:16px; top:-100px; z-index:calc(var(--z-kopf) + 10);
  background:var(--ink); color:var(--white);
  padding:12px 20px; border-radius:var(--r-pille);
  font-size:14px; font-weight:600;
  transition:top .2s var(--ease);
}
.sprung:focus{top:16px;}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.08; text-wrap:balance;}
p{margin:0;}

.anzeige{
  font-size:clamp(40px,6.2vw,72px);
  font-weight:600; letter-spacing:-.04em; line-height:1.02;
}
.titel-gross{font-size:clamp(28px,3.6vw,42px); font-weight:650; letter-spacing:-.03em; line-height:1.08;}
.titel{font-size:clamp(22px,2.4vw,27px); font-weight:650; letter-spacing:-.025em; line-height:1.18;}
.titel-klein{font-size:18px; font-weight:650; letter-spacing:-.02em; line-height:1.3;}

.lead{font-size:clamp(17px,1.5vw,19.5px); color:var(--muted); line-height:1.6; text-wrap:pretty;}
.fliess{font-size:16.5px; color:var(--muted); line-height:1.7; text-wrap:pretty;}
.klein{font-size:14.5px; color:var(--muted); line-height:1.65; text-wrap:pretty;}
.mini{font-size:13px; color:var(--dim); line-height:1.6;}

/* Kapitelmarke: kleine Versalien mit weiter Laufweite, davor eine Ziffer.
   Ersetzt die früheren gleich aussehenden Grün-Balken über jedem Abschnitt. */
.marke{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.marke::before{
  content:attr(data-nr);
  font-variant-numeric:tabular-nums; font-weight:500;
  color:var(--dim); letter-spacing:.08em;
}
.marke--hell{color:var(--sage);} .marke--hell::before{color:var(--on-dark);}
.marke--ohne::before{display:none;}

.zahl{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}

/* ---------- Raster ---------- */
.huelle{max-width:var(--breite); margin:0 auto; padding-inline:var(--luft);}
.huelle--eng{max-width:820px;}

.abschnitt{padding-block:clamp(72px,9vw,124px); position:relative;}
.abschnitt--soft{background:var(--bg-soft);}
.abschnitt--kante{border-top:1px solid var(--line);}

/* Kopf eines Abschnitts: links die Kapitelmarke, rechts Titel und Text.
   Auf dem Desktop steht die Marke in einer eigenen schmalen Spalte —
   das gibt der Seite eine Leserichtung statt lauter mittiger Blöcke. */
.kapitel{
  display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,3fr);
  gap:clamp(20px,4vw,56px); align-items:start;
  margin-bottom:clamp(40px,5vw,64px);
}
.kapitel__marke{padding-top:6px;}
.kapitel__text > * + *{margin-top:16px;}
@media (max-width:820px){
  .kapitel{grid-template-columns:1fr; gap:18px;}
  .kapitel__marke{padding-top:0;}
}

/* ---------- Schaltflächen ---------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1;
  padding:15px 26px; border-radius:var(--r-pille);
  border:1.5px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease),
             color .22s var(--ease), transform .12s var(--ease), box-shadow .22s var(--ease);
  will-change:transform;
}
.knopf svg{width:16px; height:16px; flex:none; transition:transform .25s var(--ease);}
.knopf:hover svg{transform:translateX(3px);}
.knopf:active{transform:translateY(1px) scale(.988);}

.knopf--voll{background:var(--accent); color:var(--white); box-shadow:var(--shadow-s);}
.knopf--voll:hover{background:var(--accent-deep); box-shadow:var(--shadow-m);}

.knopf--tinte{background:var(--ink); color:var(--white);}
.knopf--tinte:hover{background:var(--accent);}

.knopf--rand{border-color:var(--line); color:var(--ink); background:transparent;}
.knopf--rand:hover{border-color:var(--accent); background:var(--white); box-shadow:var(--shadow-s);}

.knopf--hell{background:var(--bg); color:var(--accent);}
.knopf--hell:hover{background:var(--white);}

/* Zweite Schaltfläche auf dunklem Grund — Rahmen statt Fläche */
.knopf--randhell{border-color:var(--dark-line); color:var(--sage); background:transparent;}
.knopf--randhell:hover{border-color:var(--sage); background:rgba(183,196,143,.1); color:var(--sage);}

.knopf--klein{font-size:13.5px; padding:11px 20px;}
.knopf--breit{width:100%;}
.knopf[disabled]{opacity:.45; cursor:not-allowed; transform:none;}

/* Textlink mit mitwachsender Unterstreichung */
.textlink{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:600; color:var(--accent);
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0 1.5px;
  transition:background-size .3s var(--ease);
}
.textlink:hover{background-size:100% 1.5px;}
.textlink svg{width:15px; height:15px; transition:transform .25s var(--ease);}
.textlink:hover svg{transform:translateX(3px);}

/* ---------- Kopfleiste ---------- */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-kopf);
  background:rgba(251,250,246,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .32s var(--ease), border-color .3s ease, background .3s ease;
  will-change:transform;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopf{background:var(--bg);}
}
.kopf.gescrollt{border-bottom-color:var(--line);}
.kopf.verborgen{transform:translateY(-101%);}

.kopf__innen{
  max-width:var(--breite); margin:0 auto; padding:14px var(--luft);
  display:flex; align-items:center; gap:20px;
}
.wortmarke{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:650; font-size:17px; letter-spacing:-.03em; color:var(--accent);
  white-space:nowrap; margin-right:auto;
}
.wortmarke__mark{
  width:26px; height:26px; flex:none; border-radius:8px;
  background:var(--accent); color:var(--bg);
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.wortmarke__mark svg{width:14px; height:14px;}
.wortmarke:hover .wortmarke__mark{transform:rotate(90deg);}

.kopf__nav{display:flex; align-items:center; gap:26px;}
.kopf__link{
  position:relative; font-size:14px; font-weight:500; color:var(--muted);
  padding-block:6px; transition:color .2s ease; white-space:nowrap;
}
.kopf__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.kopf__link:hover{color:var(--ink);}
.kopf__link:hover::after{transform:scaleX(1);}
.kopf__link[aria-current="page"]{color:var(--accent); font-weight:600;}
.kopf__link[aria-current="page"]::after{transform:scaleX(1);}

.kopf__cta{margin-left:6px;}

/* Menüknopf — erst auf schmalen Schirmen sichtbar */
.menue-knopf{
  display:none; width:42px; height:42px; flex:none;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.menue-knopf:hover{background:var(--white); border-color:var(--accent);}
.menue-knopf__balken{display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px; position:relative;}
.menue-knopf__balken::before,.menue-knopf__balken::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s ease;
}
.menue-knopf__balken::before{top:-5.5px;} .menue-knopf__balken::after{top:5.5px;}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken{background:transparent;}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken::before{transform:translateY(5.5px) rotate(45deg);}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken::after{transform:translateY(-5.5px) rotate(-45deg);}

@media (max-width:900px){
  .menue-knopf{display:inline-flex;}
  .kopf__nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px var(--luft) 22px;
    transform-origin:top;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
    transition:opacity .25s ease, transform .25s var(--ease), visibility .25s;
    box-shadow:var(--shadow-m);
  }
  .kopf__nav.offen{opacity:1; transform:none; pointer-events:auto; visibility:visible;}
  .kopf__link{font-size:16px; padding:14px 2px; border-bottom:1px solid var(--line-soft);}
  .kopf__link::after{display:none;}
  .kopf__cta{margin:18px 0 0; justify-content:center;}
}

/* ---------- Flächen ---------- */
.flaeche{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-l); padding:clamp(22px,2.6vw,30px);
  transition:border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.flaeche--heben:hover{border-color:var(--sage-mid); box-shadow:var(--shadow-m); transform:translateY(-3px);}
.flaeche--betont{border-color:var(--accent); border-width:1.5px;}
.flaeche--ruhig{background:var(--bg-soft); border-color:var(--line);}

.symbol{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
  transition:background .25s ease, color .25s ease;
}
.symbol svg{width:19px; height:19px; stroke-width:1.6;}

/* ---------- Hairline-Liste: nummerierte Zeilen statt Kartenwand ---------- */
.reihen{border-top:1px solid var(--line);}
.reihe{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,3vw,36px); align-items:start;
  padding:clamp(24px,3vw,34px) clamp(4px,1.6vw,20px);
  border-bottom:1px solid var(--line);
  position:relative; transition:background .3s var(--ease);
}
.reihe::before{
  content:""; position:absolute; inset:0; border-radius:var(--r-m);
  background:var(--bg-soft); opacity:0; transition:opacity .3s var(--ease);
}
.reihe > *{position:relative; z-index:1;}
.reihe:hover::before{opacity:1;}
.reihe__nr{
  font-size:12.5px; font-weight:600; color:var(--dim);
  font-variant-numeric:tabular-nums; letter-spacing:.08em; padding-top:5px;
  min-width:26px;
}
.reihe__text > * + *{margin-top:9px;}
.reihe__symbol{align-self:center;}
.reihe:hover .symbol{background:var(--accent); color:var(--bg);}
@media (max-width:620px){
  .reihe{grid-template-columns:auto minmax(0,1fr);}
  .reihe__symbol{grid-row:1; grid-column:2; justify-self:end;}
  .reihe__text{grid-column:2;}
}

/* ---------- Kennzahlenband ---------- */
.kennband{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--white); overflow:hidden;
}
.kennband__feld{
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,30px);
  border-right:1px solid var(--line);
}
.kennband__feld:last-child{border-right:none;}
.kennband__wert{
  font-size:clamp(26px,3vw,34px); font-weight:650; letter-spacing:-.03em;
  color:var(--accent); line-height:1.05; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
@media (max-width:760px){
  .kennband{grid-template-columns:1fr;}
  .kennband__feld{border-right:none; border-bottom:1px solid var(--line);}
  .kennband__feld:last-child{border-bottom:none;}
}

/* ---------- Gestaffelte Blöcke (Webseiten-Abschnitt) ---------- */
.staffel{display:grid; gap:clamp(14px,2vw,20px);}
.staffel__block{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px); align-items:start;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-l); padding:clamp(22px,2.6vw,30px);
  transition:border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.staffel__block:hover{border-color:var(--sage-mid); box-shadow:var(--shadow-m); transform:translateY(-3px);}
.staffel__block:hover .symbol{background:var(--accent); color:var(--bg);}
.staffel__text > * + *{margin-top:9px;}
/* Jeder zweite Block rückt ein — bricht die starre Spaltenkante auf */
@media (min-width:900px){
  .staffel__block:nth-child(2){margin-left:clamp(24px,4vw,56px);}
  .staffel__block:nth-child(3){margin-left:clamp(48px,8vw,112px);}
}

/* ---------- Preisblöcke ---------- */
.preise{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(14px,2vw,20px);}
.preis{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-l); padding:clamp(22px,2.6vw,30px);
  transition:border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.preis:hover{box-shadow:var(--shadow-m); transform:translateY(-3px);}
.preis__stufe{
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.preis__titel{margin-bottom:10px;}
/* Die monatliche Betreuung ist der Posten, der erklärt werden muss —
   sie bekommt die dunkle Fläche statt nur einen dickeren Rahmen. */
.preis--betont{background:var(--accent); border-color:var(--accent); color:var(--bg);}
.preis--betont .preis__stufe{color:var(--sage);}
.preis--betont .titel-klein{color:var(--white);}
.preis--betont .klein{color:var(--on-dark-3);}
.preis--betont:hover{box-shadow:var(--shadow-l);}

.notiz{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-m); background:var(--white);
  padding:clamp(22px,2.6vw,30px);
}
.notiz > * + *{margin-top:14px;}

/* ---------- Blog-Anreißer ---------- */
.anreisser{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,40px); align-items:center;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(28px,3.4vw,44px);
  transition:border-color .25s ease, box-shadow .3s var(--ease), background .25s ease;
}
.anreisser:hover{border-color:var(--sage-mid); box-shadow:var(--shadow-m);}
.anreisser__text > * + *{margin-top:10px;}
.anreisser:hover .textlink{background-size:100% 1.5px;}
.anreisser:hover .textlink svg{transform:translateX(3px);}
@media (max-width:700px){
  .anreisser{grid-template-columns:1fr; gap:20px;}
}

/* ---------- Dunkler Abschnitt ---------- */
.dunkel{background:var(--dark); color:var(--white);}
.dunkel h1,.dunkel h2,.dunkel h3{color:var(--white);}
.dunkel .lead,.dunkel .fliess{color:var(--on-dark);}
.dunkel .klein{color:var(--on-dark-2);}
.dunkel .mini{color:var(--on-dark-2);}
.dunkel a:not(.knopf){color:var(--sage);}

/* ---------- Formular ---------- */
.form{
  background:var(--dark-2); border:1px solid var(--dark-line);
  border-radius:var(--r-xl); padding:clamp(24px,3vw,36px);
}
.feldraster{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.feld--voll{grid-column:1 / -1;}
@media (max-width:560px){.feldraster{grid-template-columns:1fr;}}

.etikett{display:block; font-size:12.5px; font-weight:600; color:var(--on-dark-2); margin-bottom:7px;}
.eingabe{
  width:100%; font-family:inherit; font-size:15px; color:var(--white);
  background:var(--dark); border:1.5px solid var(--dark-line);
  padding:13px 15px; border-radius:var(--r-s);
  transition:border-color .2s ease, background .2s ease;
}
.eingabe::placeholder{color:#7C8770;}
.eingabe:hover{border-color:#57624A;}
.eingabe:focus{outline:none; border-color:var(--sage); background:#2B3424;}
.eingabe:user-invalid{border-color:#C98B6B;}
textarea.eingabe{resize:vertical; min-height:104px; line-height:1.6;}

.zustimmung{display:flex; align-items:flex-start; gap:11px; margin-top:20px;}
.zustimmung input{margin-top:3px; width:17px; height:17px; flex:none; accent-color:var(--sage); cursor:pointer;}
.zustimmung label{font-size:12.5px; color:var(--on-dark-2); line-height:1.55;}
.zustimmung label a{color:var(--white); text-decoration:underline; text-underline-offset:2px;}

.status{font-size:13px; color:var(--on-dark-2); min-height:20px;}
.status--fehler{color:#E8B9A1;}
.status--fertig{color:var(--sage);}

/* ---------- Fußzeile ---------- */
.fuss{border-top:1px solid var(--line); padding-block:44px 34px;}
.fuss__oben{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:24px; align-items:start; padding-bottom:26px;
}
.fuss__links{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:flex-end;}
.fuss__links a{font-size:14px; color:var(--muted); transition:color .2s ease;}
.fuss__links a:hover{color:var(--accent);}
.fuss__unten{
  border-top:1px solid var(--line-soft); padding-top:20px;
  display:grid; gap:10px;
}
@media (max-width:760px){
  .fuss__oben{grid-template-columns:1fr;}
  .fuss__links{justify-content:flex-start;}
}

/* ---------- Hinweis unten links (Quiz) ---------- */
.hinweis{
  position:fixed; left:20px; bottom:20px; z-index:var(--z-hinweis);
  max-width:330px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-l);
  padding:20px 20px 20px 22px;
  display:flex; gap:14px; align-items:flex-start;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity .4s ease, transform .4s var(--ease);
}
.hinweis.sichtbar{opacity:1; transform:none; pointer-events:auto;}
.hinweis__text > * + *{margin-top:5px;}
.hinweis__zu{
  position:absolute; top:9px; right:9px; width:24px; height:24px;
  border:none; background:none; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; color:var(--dim);
  transition:background .2s ease, color .2s ease;
}
.hinweis__zu:hover{background:var(--bg-soft); color:var(--ink);}
@media (max-width:480px){
  .hinweis{left:12px; right:12px; bottom:12px; max-width:none;}
}

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-auf]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--verzug,0ms);
}
.js [data-auf].sichtbar{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .js [data-auf]{opacity:1; transform:none;}
}

/* ---------- Hilfsklassen ---------- */
.reihe-quer{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.nur-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.mt-s{margin-top:14px;} .mt-m{margin-top:24px;} .mt-l{margin-top:40px;}

/* ---------- Bewegungen ---------- */
@keyframes puls{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(.72);}}
@keyframes strichfluss{to{stroke-dashoffset:-24;}}
@keyframes schweben{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.punkt{width:7px; height:7px; border-radius:50%; flex:none; background:var(--accent);}
.punkt--puls{animation:puls 2.4s ease-in-out infinite;}
.punkt--ok{background:var(--ok);}

/* ---------- Schaubild: Eingang → System → Ergebnis ---------- */
.schaubild{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(26px,3.4vw,44px);
}
.fluss{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;}
.fluss__spalte{display:flex; flex-direction:column; gap:12px;}
.fluss__karte{
  display:flex; align-items:center; gap:11px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:13px 16px; font-size:13.5px; font-weight:500; color:var(--muted);
  transition:border-color .25s ease, transform .3s var(--ease);
}
.fluss__karte svg{width:16px; height:16px; flex:none; stroke:var(--dim); stroke-width:1.6;}
.fluss__karte--ergebnis{justify-content:space-between; color:var(--ink); font-weight:600;}
.schaubild:hover .fluss__karte{border-color:var(--sage-mid);}
.fluss__mitte{display:flex; align-items:center;}
.fluss__kern{
  background:var(--accent); border-radius:var(--r-l);
  padding:24px 26px; display:flex; flex-direction:column; align-items:center; gap:7px;
  box-shadow:var(--shadow-m); animation:schweben 6s ease-in-out infinite;
}
.fluss__kern svg{width:24px; height:24px; stroke:var(--white); stroke-width:1.6;}
.fluss__kern b{font-size:13px; color:var(--white); font-weight:650; letter-spacing:-.01em;}
.fluss__kern span{font-size:11px; color:var(--sage); font-weight:500;}
.fluss__pfad{stroke:var(--dim); stroke-width:1.5; fill:none; stroke-dasharray:4 8; animation:strichfluss 1.6s linear infinite;}
.fluss__quer{width:72px; height:120px;}
.fluss__hoch{display:none;}
@media (max-width:760px){
  .fluss{grid-template-columns:1fr; gap:14px;}
  .fluss__mitte{flex-direction:column; align-items:center; justify-content:center; gap:4px;}
  .fluss__quer{display:none;}
  .fluss__hoch{display:block; width:120px; height:52px; flex:none;}
}

/* ---------- Vertrauenszeile unter dem Aufmacher ---------- */
.vertrauen{
  display:flex; flex-wrap:wrap; gap:10px 30px; align-items:center;
  font-size:13.5px; color:var(--dim); font-weight:500;
}
.vertrauen > span{display:inline-flex; align-items:center; gap:8px;}
.vertrauen a{text-decoration:underline; text-underline-offset:3px; transition:color .2s ease;}
.vertrauen a:hover{color:var(--accent);}

/* ---------- Aufmacher ---------- */
.aufmacher{padding-block:clamp(56px,8vw,96px) clamp(48px,6vw,80px);}
.aufmacher__text{max-width:min(100%,940px);}
.aufmacher__text > * + *{margin-top:clamp(18px,2.4vw,26px);}
.dreher{
  display:inline-block; height:1em; overflow:hidden;
  vertical-align:bottom; color:var(--accent);
}
.dreher__band{animation:wortdreh 14.4s cubic-bezier(.7,0,.3,1) infinite;}
.dreher i{display:block; font-style:normal; line-height:1;}
@keyframes wortdreh{
  0%,11.7%{transform:translateY(0);}
  16.7%,28.3%{transform:translateY(-1em);}
  33.3%,45%{transform:translateY(-2em);}
  50%,61.7%{transform:translateY(-3em);}
  66.7%,78.3%{transform:translateY(-4em);}
  83.3%,95%{transform:translateY(-5em);}
  100%{transform:translateY(-6em);}
}
@media (prefers-reduced-motion:reduce){
  /* Ohne Bewegung bleibt nur das erste Wort stehen — statt eines
     abgeschnittenen Bandes aus sechs Zeilen. */
  .dreher__band{animation:none !important; transform:none !important;}
  .dreher i:not(:first-child){display:none;}
}

/* ---------- Lesebreiten ----------
   Fließtext bleibt bei rund 62 Zeichen, auch wenn der Kasten breiter ist. */
.reihe__text .klein,
.notiz .klein,
.kennband__feld .klein,
.staffel__text .klein,
.anreisser__text .klein{max-width:66ch;}
.kapitel__text .lead{max-width:62ch;}
.kapitel__text .fliess{max-width:68ch;}

/* Gleiche Höhe für die Überschriften der Preisblöcke, damit die Absätze
   darunter auf einer Linie beginnen. */
@media (min-width:900px){
  .preis__titel{min-height:2.6em;}
}

/* ============================================================
   Blog-Beitrag
   ============================================================ */
.vergleich{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px);}
@media (max-width:820px){.vergleich{grid-template-columns:1fr;}}

.spur{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,2.8vw,32px);
  transition:border-color .25s ease, box-shadow .3s var(--ease);
}
.spur:hover{box-shadow:var(--shadow-m);}
.spur--gut{border-color:var(--accent); border-width:1.5px;}
.spur__kopf{
  display:flex; align-items:center; gap:9px; margin-bottom:22px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.spur--gut .spur__kopf{color:var(--accent);}
.spur__schritt{
  display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px;
  padding-block:13px; border-top:1px solid var(--line-soft);
}
.spur__schritt:first-of-type{border-top:none; padding-top:0;}
.spur__schritt:last-of-type{border-top:1px solid var(--line); margin-top:5px; padding-top:18px;}
.spur__zeit{
  font-size:12.5px; font-weight:600; color:var(--dim);
  font-variant-numeric:tabular-nums; padding-top:2px;
}
.spur--gut .spur__zeit{color:var(--accent);}
.spur__schritt p{font-size:14.5px; color:var(--muted); line-height:1.6;}
.spur__schritt--fazit p{color:var(--ink); font-weight:600;}

.delta{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  font-size:13.5px; color:var(--dim); font-weight:500; text-align:center;
}
.delta svg{width:110px; height:12px; flex:none;}
@media (max-width:820px){.delta svg{display:none;}}

/* Nachbau einer Auswertung — keine echten Zahlen */
.tafel{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden;
}
.tafel__kopf{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:15px 24px; border-bottom:1px solid var(--line); background:var(--bg-soft);
  font-size:13px; font-weight:650; color:var(--ink);
}
.tafel__lauf{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:var(--muted);}
.tafel__gross{padding:36px 24px 30px; text-align:center; border-bottom:1px solid var(--line);}
.tafel__zahl{
  font-size:clamp(44px,7vw,62px); font-weight:650; letter-spacing:-.04em;
  color:var(--accent); line-height:1; font-variant-numeric:tabular-nums;
}
.tafel__raster{display:grid; grid-template-columns:repeat(3,1fr);}
.tafel__feld{padding:22px 20px; text-align:center; border-right:1px solid var(--line);}
.tafel__feld:last-child{border-right:none;}
.tafel__wert{font-size:25px; font-weight:650; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums;}
@media (max-width:560px){
  .tafel__raster{grid-template-columns:1fr;}
  .tafel__feld{border-right:none; border-top:1px solid var(--line);}
}

.pillen{display:flex; flex-wrap:wrap; gap:10px;}
.pille{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pille);
  padding:11px 20px; font-size:14.5px; color:var(--muted);
  transition:border-color .22s ease, transform .22s var(--ease), box-shadow .25s var(--ease);
}
.pille:hover{border-color:var(--sage-mid); transform:translateY(-2px); box-shadow:var(--shadow-s);}
.pille--eigen{background:var(--accent); border-color:var(--accent); color:var(--white); font-weight:600;}

.artikel > * + *{margin-top:18px;}

/* ============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================ */
.rechtstext{max-width:72ch;}
.rechtstext h2{
  font-size:15px; font-weight:650; letter-spacing:-.01em; color:var(--ink);
  margin:38px 0 12px; padding-top:18px; border-top:1px solid var(--line);
}
.rechtstext h2:first-of-type{margin-top:28px;}
.rechtstext p{font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:12px;}
.rechtstext p:last-child{margin-bottom:0;}
.rechtstext ul{margin:0 0 14px; padding-left:20px;}
.rechtstext li{font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:5px;}
.rechtstext a{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}
.rechtstext a:hover{color:var(--accent-deep);}
.rechtstext .anschrift p{margin-bottom:2px;}
.rechtstext .hervor{
  background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-m); padding:20px 22px; margin-top:6px;
}
.rechtstext .hervor p{color:var(--ink); font-size:14.5px; margin-bottom:0;}

/* Inhaltsverzeichnis der Datenschutzerklärung */
.sprungliste{
  display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 8px; padding:0; list-style:none;
}
.sprungliste a{
  display:inline-block; font-size:13px; color:var(--muted); text-decoration:none;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pille);
  padding:7px 14px; transition:border-color .2s ease, color .2s ease;
}
.sprungliste a:hover{border-color:var(--sage-mid); color:var(--accent);}

/* ============================================================
   Automatisierungs-Check
   Die Klassennamen bleiben, weil das Skript der Seite sie erzeugt
   und anspricht. Nur das Aussehen ist neu.
   ============================================================ */
.check{max-width:760px; margin:0 auto; padding-inline:var(--luft);}
.check-kopf{text-align:center; margin-bottom:clamp(28px,4vw,44px);}
.check-kopf .marke{justify-content:center; margin-bottom:18px;}
.check-kopf h1{font-size:clamp(30px,4.6vw,46px); font-weight:650; letter-spacing:-.035em;}
.check-kopf .lead{margin:16px auto 0; max-width:54ch;}

.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(24px,3vw,32px);
}

/* Laufanzeige — bleibt beim Scrollen oben stehen */
.meter{
  background:var(--accent); color:var(--bg);
  border-radius:var(--r-xl); padding:22px 26px; margin-bottom:20px;
  position:sticky; top:96px; z-index:5;
  box-shadow:var(--shadow-m);
}
.meter-top{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap;}
.meter-label{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sage);}
.meter-count{font-size:12.5px; color:var(--sage); font-variant-numeric:tabular-nums;}
.meter-value{font-size:34px; font-weight:650; letter-spacing:-.035em; line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums;}
.meter-value span{font-size:15px; font-weight:500; color:var(--sage); margin-left:6px; letter-spacing:0;}
.track{height:5px; background:rgba(255,255,255,.16); border-radius:99px; margin-top:16px; overflow:hidden;}
.fill{height:100%; width:0; background:var(--sage); border-radius:99px; transition:width .6s var(--ease);}
.meter-note{font-size:11.5px; color:rgba(183,196,143,.8); margin-top:10px;}
@media (max-width:560px){.meter{position:static;}}

.area{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;}
.q{font-size:clamp(20px,3vw,26px); font-weight:650; line-height:1.24; letter-spacing:-.025em;}
.q-hint{color:var(--muted); font-size:14.5px; margin-top:12px;}

.answers{display:grid; gap:9px; margin-top:26px;}
.ans{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  font-family:inherit; font-size:15.5px; font-weight:500; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-m);
  padding:16px 18px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .12s var(--ease), box-shadow .25s var(--ease);
}
.ans:hover{border-color:var(--accent); background:var(--white); box-shadow:var(--shadow-s);}
.ans:active{transform:scale(.993);}
.dot{
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line); flex:none;
  position:relative; transition:border-color .2s ease;
}
.dot::after{
  content:""; position:absolute; inset:3.5px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .22s var(--ease);
}
.ans:hover .dot{border-color:var(--accent);}
.ans:hover .dot::after{transform:scale(1);}

.steps{display:flex; gap:4px; margin-top:28px;}
.step{height:3px; flex:1; background:var(--line); border-radius:99px; transition:background .3s ease;}
.step.done{background:var(--sage-mid);}
.step.now{background:var(--accent);}

.back{
  margin-top:18px; background:none; border:none; font-family:inherit; font-size:14px;
  color:var(--muted); cursor:pointer; padding:6px 0;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .2s ease;
}
.back:hover{color:var(--accent);}

/* Schaltflächen des Checks nutzen das gemeinsame Aussehen */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:var(--white); border:1.5px solid var(--accent);
  border-radius:var(--r-pille); font-family:inherit; font-size:16px; font-weight:600;
  padding:16px 32px; cursor:pointer; box-shadow:var(--shadow-s);
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:var(--shadow-m);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none;}
.btn-wide{width:100%;}

.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:28px 0;}
.fact{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-m); padding:16px 18px;}
.fact dt{font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.fact dd{font-size:14px; color:var(--muted); margin:6px 0 0;}
@media (max-width:560px){.facts{grid-template-columns:1fr;}}

.score{text-align:center; padding:6px 0 4px;}
.score-num{
  font-size:clamp(52px,9vw,70px); font-weight:650; line-height:1; letter-spacing:-.045em;
  color:var(--accent); font-variant-numeric:tabular-nums; margin-top:10px;
}
.score-num small{font-size:20px; color:var(--muted); font-weight:500; letter-spacing:-.01em;}
.band{
  display:inline-block; background:var(--accent-soft); border:1px solid var(--line);
  border-radius:var(--r-pille); padding:8px 18px; font-size:13.5px; font-weight:600;
  color:var(--accent); margin-top:18px;
}

.bars{margin-top:32px; display:grid; gap:17px;}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:7px; align-items:baseline;}
.bar-name{font-size:14.5px; font-weight:600;}
.bar-val{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.bar-track{grid-column:1/-1; height:6px; background:var(--bg-soft); border-radius:99px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent); border-radius:99px; width:0; transition:width .9s var(--ease);}

.focus-box{
  background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r-m); padding:24px; margin-top:30px;
}
.focus-box h3{font-size:15.5px; font-weight:650; margin-bottom:14px;}
.focus-box ol{margin:0; padding-left:20px;}
.focus-box li{font-size:15px; color:var(--muted); margin-bottom:9px; line-height:1.6;}
.focus-box li:last-child{margin-bottom:0;}
.focus-box li strong{color:var(--ink); font-weight:650;}

/* E-Mail-Abschnitt */
.gate{background:var(--dark); color:var(--white); border-radius:var(--r-xl); padding:clamp(26px,3vw,34px); margin-top:20px;}
.gate h2{font-size:21px; font-weight:650; letter-spacing:-.025em;}
.gate p{color:var(--on-dark); font-size:15px; margin-top:12px; line-height:1.65;}
.gate ul{list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:10px;}
.gate li{display:flex; gap:11px; font-size:14.5px; color:var(--on-dark-3); align-items:flex-start; line-height:1.55;}
.tick{flex:none; margin-top:4px;}
label.fl{display:block; font-size:12.5px; color:var(--sage); margin-bottom:8px; font-weight:600;}
.gate input[type=email]{
  width:100%; font-family:inherit; font-size:15.5px; padding:14px 16px; border-radius:var(--r-s);
  border:1.5px solid var(--dark-line); background:var(--dark-2); color:var(--white);
  transition:border-color .2s ease, background .2s ease;
}
.gate input[type=email]::placeholder{color:#7C8770;}
.gate input[type=email]:focus{outline:none; border-color:var(--sage); background:#2B3424;}
.consent{display:flex; gap:12px; margin:20px 0 8px; align-items:flex-start; cursor:pointer;}
.consent input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--sage); cursor:pointer;}
.consent span{font-size:13.5px; color:var(--on-dark-3); line-height:1.55;}
.fine{font-size:12px; color:rgba(183,196,143,.8); margin-top:16px; line-height:1.6;}
.fine a{color:var(--sage); text-decoration:underline; text-underline-offset:2px;}
.gate .btn{background:var(--bg); border-color:var(--bg); color:var(--accent); margin-top:18px;}
.gate .btn:hover{background:var(--white); border-color:var(--white);}
.err{font-size:13px; color:#E8B9A1; margin-top:12px; min-height:18px;}

.disclaimer{font-size:12.5px; color:var(--muted); text-align:center; margin-top:28px; line-height:1.65;}
.marken-fuss{
  text-align:center; margin-top:32px; font-size:13px; color:var(--dim);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.marken-fuss svg{width:12px; height:12px;}

.hidden{display:none !important;}
.fade{animation:einblenden .38s var(--ease);}
@keyframes einblenden{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}