/* Weissinger · weissinger.digital
   Formensprache wie die neue Weisshelm-Seite (helles Papier, runde Karten, Pill-Buttons,
   Marker-Highlight, Häkchen-Badges, Stepper), Farben und Titelschrift aus dem
   Weissinger-Branding. Regel Boris: kein max-width auf Textelementen, nur der Seitenrahmen. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var-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-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque-var.woff2') format('woff2-variations'),
       url('fonts/bricolage-grotesque-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --espresso:#26211A;      /* wie Navy bei Weisshelm: Überschriften, dunkle Flächen */
  --kupfer:#B65432;        /* wie Gold: Akzent, Knöpfe, Marker */
  --kupfer-dunkel:#8E3F23;
  --kupfer-blass:#F7E9E2;
  --rot:#B3402F;
  --rot-blass:#F8EAE7;
  --papier:#FFFDF9;
  --creme:#F6F1E8;
  --tint:#F1EADF;
  --linie:#E4D9C6;
  --ink:#26211A;
  --ink-mid:#5C5245;
  --ink-grau:#6A5E4F;
  --ink-blass:#A08F76;
  --r-karte:16px;
  --r-foto:20px;
  --titel:'Bricolage Grotesque','Segoe UI',Arial,sans-serif;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);color:var(--ink);background:var(--papier);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;font-size:16px}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
a{color:var(--kupfer-dunkel)}
::selection{background:var(--kupfer);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}   /* Seitenrahmen, erlaubte Ausnahme */
@media(min-width:920px){.wrap{padding:0 40px}}

.eyebrow{display:block;color:var(--kupfer-dunkel);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
@media(min-width:920px){.eyebrow{font-size:12px}}

h1,h2,h3{font-family:var(--titel);color:var(--espresso);font-weight:800;letter-spacing:-.02em;line-height:1.14;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,46px)}
h2{font-size:clamp(25px,3.6vw,35px);margin-bottom:18px}
h3{font-size:18px}
.sub{color:var(--ink-mid);font-size:clamp(16px,1.3vw,18px);margin-top:14px}
.mark{background:linear-gradient(180deg,rgba(182,84,50,0) 56%,rgba(182,84,50,.45) 56%);padding:0 4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

section{padding:clamp(40px,6vw,72px) 0 clamp(44px,6.5vw,76px)}
.tintbg{background:var(--creme)}
.dunkelbg{background:var(--espresso);color:#F3EDE3}
.dunkelbg h2,.dunkelbg h3{color:#fff}
.dunkelbg .eyebrow{color:#E3A583}
.dunkelbg .sub{color:rgba(243,237,227,.8)}
.dunkelbg a{color:#E3A583}
.center{text-align:center}

/* Knöpfe */
.btn{display:inline-block;background:var(--kupfer);color:#fff;text-align:center;border:none;padding:16px 30px;border-radius:999px;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 6px 18px rgba(182,84,50,.26);transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--kupfer-dunkel);color:#fff;transform:translateY(-1px)}
.btn-sm{padding:10px 18px;font-size:14px;font-weight:700;box-shadow:none}
.btn-hell{background:#fff;color:var(--espresso);box-shadow:none;border:1px solid var(--linie)}
.btn-hell:hover{background:var(--creme);color:var(--espresso)}
.reassure{color:var(--ink-grau);font-size:13px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px}

/* Kopf */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(22,19,15,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,237,227,.14)}
header.scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.8)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
header .logo img{height:26px;width:auto}
header nav{display:flex;align-items:center;gap:26px}
header nav a{color:rgba(243,237,227,.82);font-size:14.5px;font-weight:600;text-decoration:none}
header nav a:hover{color:#fff}
header nav a.menue{display:none}
@media(min-width:920px){header nav a.menue{display:inline}}
main{padding-top:58px}

/* Hero */
.hero{padding-top:clamp(28px,4vw,54px)}
.hero-grid{display:grid;gap:28px}
@media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}}
.tickrow{display:flex;gap:12px;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
/* Im dunklen Hero dieselbe Kartensprache wie in den dunklen Beweis-Abschnitten */
.hero-dunkel .tickrow{background:rgba(243,237,227,.06);border-color:rgba(243,237,227,.16)}
.hero-dunkel .tickrow .txt{color:rgba(243,237,227,.72)}
.hero-dunkel .tickrow .txt b{color:#fff}
.tickstack{display:grid;gap:10px;margin-top:22px}
.tick{flex:none;width:26px;height:26px;background:var(--kupfer);border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.tickrow .txt{color:var(--ink-mid);font-size:14.5px;line-height:1.55}
.tickrow .txt b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.foto{border-radius:var(--r-foto);overflow:hidden;border:1px solid var(--linie);background:var(--creme)}
.foto img{width:100%;height:auto}
.fotonote{color:var(--ink-grau);font-size:13px;margin-top:10px}

/* Karten */
.cardrow{display:grid;gap:14px}
/* Raster- und Flex-Kinder duerfen schrumpfen. Ohne min-width:0 haelt ein Kind
   mit langem, nicht umbrechendem Inhalt die ganze Spalte auf und die Karte ragt
   auf dem Handy aus dem Seitenrand (gemessen am 18.09.: 370 px in 346 px). */
.cardrow>*{min-width:0}
@media(min-width:840px){.cardrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.cardrow.zwei{grid-template-columns:1fr}
@media(min-width:840px){.cardrow.zwei{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:20px 22px}
.card b{display:block;color:var(--ink);font-weight:700;font-size:16.5px;margin-bottom:6px;line-height:1.35}
.card p{color:var(--ink-mid);font-size:14.5px;line-height:1.6}
.xdot{flex:none;width:26px;height:26px;background:var(--rot-blass);border-radius:50%;display:grid;place-items:center;color:var(--rot);font-weight:800;font-size:13px;margin-bottom:12px}
.kdot{flex:none;width:26px;height:26px;background:var(--kupfer-blass);border-radius:50%;display:grid;place-items:center;color:var(--kupfer-dunkel);font-weight:800;font-size:13px;margin-bottom:12px}
/* Karten auf dunklem Grund: dieselbe Sprache wie Hero und Beweis-Abschnitte */
.dunkelbg .card{background:rgba(243,237,227,.06);border-color:rgba(243,237,227,.16)}
.dunkelbg .card b{color:#fff}
.dunkelbg .card p{color:rgba(243,237,227,.7)}
.dunkelbg .kdot{background:rgba(227,165,131,.18);color:#E3A583}

/* Hinweis-Box und dunkle Box */
.notebox{background:var(--tint);border-left:3px solid var(--kupfer);border-radius:6px 14px 14px 6px;padding:16px 18px;font-size:15px;line-height:1.65}
.darkbox{background:var(--espresso);color:#F3EDE3;border-radius:var(--r-karte);padding:20px 24px;font-size:15.5px;line-height:1.65}
.darkbox b{color:#E3A583}

/* System-Überblick: links vier Schritte zum Aufklappen, rechts das passende Gerät */
.systemzwei{display:grid;gap:34px;margin-top:32px}
@media(min-width:940px){.systemzwei{grid-template-columns:1.12fr .88fr;gap:clamp(40px,4.4vw,72px);align-items:start}}
.sysitem{border-top:2px solid var(--linie)}
.sysitem:last-child{border-bottom:2px solid var(--linie)}
.sysitem.aktiv{border-top-color:var(--kupfer)}
.systab{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:0;
  margin:0 -12px;padding:18px 12px 16px;width:calc(100% + 24px);color:inherit;cursor:pointer;
  border-radius:10px;transition:background .16s ease}
.systab:hover{background:rgba(182,84,50,.05)}
/* Der Knopf blutet ueber die negative Aussenkante hinaus, damit die Hover-Flaeche
   breiter wirkt als der Text. Auf dem Handy steht die Liste ohne Polsterung direkt
   im Seitenrahmen, dort ragt sie dadurch 12 px links und rechts hinaus. */
@media(max-width:939px){.systab{margin:0;width:100%}}
.systab .sysnum{flex:none;font-family:var(--titel);font-weight:800;font-size:15px;color:var(--ink-blass);
  transition:color .18s ease;width:14px}
.systab b{flex:1;font-family:var(--titel);font-weight:800;font-size:clamp(17px,1.5vw,20px);line-height:1.28;
  letter-spacing:-.01em;color:var(--ink-grau);transition:color .18s ease}
/* Der Pfeil sitzt in einem runden Feld, damit die Zeile als Knopf gelesen wird */
.syspfeil{flex:none;position:relative;width:42px;height:42px;border-radius:50%;background:#fff;
  border:2px solid var(--linie);transition:border-color .16s ease,background .16s ease}
.syspfeil::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--kupfer-dunkel);border-bottom:2.5px solid var(--kupfer-dunkel);
  transform:translate(-50%,-72%) rotate(45deg);transition:transform .2s ease}
.systab:hover .syspfeil{border-color:var(--kupfer);background:var(--kupfer-blass)}
.systab:hover b{color:var(--ink)}
.sysitem.aktiv .sysnum{color:var(--kupfer-dunkel)}
.sysitem.aktiv .systab b{color:var(--ink)}
.sysitem.aktiv .syspfeil{border-color:var(--kupfer);background:var(--kupfer-blass)}
.sysitem.aktiv .syspfeil::after{transform:translate(-50%,-28%) rotate(-135deg)}
.systab:focus-visible{outline:2px solid var(--kupfer);outline-offset:3px;border-radius:4px}
.syspanel{padding:0 0 22px 30px}
.sysitem.aktiv .systab{background:none}
.syspanel[hidden]{display:none}
.syspanel p{color:var(--ink-mid);font-size:15.5px;line-height:1.66}
.syspanel-liste{list-style:none;display:grid;gap:9px;margin-top:16px}
.syspanel-liste li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:var(--ink-mid)}
.syspanel-liste li::before{content:"✓";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;
  background:var(--kupfer-blass);color:var(--kupfer-dunkel);font-size:10px;font-weight:800;display:grid;place-items:center}
.sysziel{display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(142,63,35,.35);padding-bottom:1px}
.sysziel::after{content:" ↓"}
.sysziel:hover{border-bottom-color:var(--kupfer)}
/* Ohne JavaScript stehen alle vier Felder offen */
html:not(.js) .syspanel[hidden]{display:block}

.sysgeraet{position:relative}
@media(min-width:940px){.sysgeraet{position:sticky;top:104px}}
.sysschirm{margin:0}
.sysschirm[hidden]{display:none}
.sysgeraet .iphone{max-width:284px}
.sysschirm figcaption{margin-top:18px;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-grau)}
.beispiel-tag.im-geraet{position:absolute;left:50%;transform:translateX(-50%);bottom:-13px;z-index:4;
  background:var(--espresso);color:var(--creme);border:0;margin:0;white-space:nowrap}

/* Im Gerät blättern: Anzeigen und Funnel-Bildschirme wischen */
.schirmlauf{display:flex;height:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.schirmlauf::-webkit-scrollbar{display:none}
.schirmseite{flex:0 0 100%;scroll-snap-align:start;height:100%;position:relative;background:#fff}
.iphone-feed .schirmseite{display:flex}
.iphone-feed .schirmseite .feed{width:100%}
.feed-video{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block;background:#0E1630}
.beispiel-tag.im-geraet[hidden]{display:none}
.iphone-funnel .schirmseite img{width:100%;height:100%;object-fit:cover;object-position:top;margin:0;display:block}
.hat-lauf .iphone{touch-action:pan-y}
/* Die Pfeile sitzen halb auf dem Gerät und halb daneben, in der CTA-Farbe.
   Sie liegen neben .schirm, nicht darin: dessen overflow würde sie abschneiden. */
.schirmpfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:52px;height:52px;border-radius:50%;
  border:0;background:var(--kupfer);color:#fff;font-size:29px;line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(142,63,35,.42);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.schirmpfeil:hover{background:var(--kupfer-dunkel);transform:translateY(-50%) scale(1.07);
  box-shadow:0 8px 26px rgba(142,63,35,.5)}
.schirmpfeil:focus{outline:none}
.schirmpfeil:focus-visible{outline:3px solid var(--espresso);outline-offset:3px}
.schirmpfeil[disabled]{opacity:0;pointer-events:none}
.schirmpfeil.zurueck{left:-26px}
.schirmpfeil.vor{right:-26px}
@media(max-width:560px){
  .schirmpfeil{width:42px;height:42px;font-size:24px}
  .schirmpfeil.zurueck{left:-21px}
  .schirmpfeil.vor{right:-21px}
}

/* Wisch-Hinweis: legt sich 3 Sekunden nach dem Auftauchen kurz über den Bildschirm
   und zeigt mit einer Hand die Wischrichtung. Läuft genau einmal und blockiert nichts. */
.wischzeig{position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  background:rgba(182,84,50,.93);opacity:0;visibility:hidden;pointer-events:none}
.wischzeig.an{visibility:visible;animation:zeigBlende 2600ms ease forwards}
@keyframes zeigBlende{0%{opacity:0}10%{opacity:1}72%{opacity:1}100%{opacity:0;visibility:hidden}}
.wischhand{width:58px;height:auto;color:#fff;filter:drop-shadow(0 6px 14px rgba(70,26,10,.45))}
.wischzeig.an .wischhand{animation:handWisch 2600ms cubic-bezier(.45,.05,.3,1) forwards}
/* Rechts nach links: das ist die Geste, die zum nächsten Motiv führt */
@keyframes handWisch{
  0%{transform:translateX(52px) rotate(9deg)}
  14%{transform:translateX(52px) rotate(9deg)}
  62%{transform:translateX(-52px) rotate(-9deg)}
  100%{transform:translateX(-52px) rotate(-9deg)}
}
.wischspur{position:absolute;top:50%;height:5px;border-radius:999px;background:rgba(255,255,255,.55);
  transform:translateY(-50%);opacity:0}
.wischzeig.an .wischspur{animation:spurWachs 2600ms cubic-bezier(.45,.05,.3,1) forwards}
@keyframes spurWachs{
  0%{left:58%;right:14%;opacity:0}
  16%{left:58%;right:14%;opacity:.9}
  62%{left:14%;right:14%;opacity:.9}
  100%{left:14%;right:14%;opacity:0}
}
@media(prefers-reduced-motion:reduce){.wischzeig{display:none}}
.schirmpunkte{position:absolute;left:0;right:0;bottom:8px;z-index:6;display:flex;justify-content:center;gap:2px;
  padding:4px 10px;width:max-content;margin:0 auto;border-radius:999px;background:#fff;
  border:2px solid var(--kupfer);box-shadow:0 4px 16px rgba(142,63,35,.28)}
/* 24-px-Tippziel, der sichtbare Punkt bleibt klein. Sonst sind die Punkte
   am Handy mit 11 px nicht zu treffen (Lighthouse target-size). */
.schirmpunkt{width:24px;height:24px;border-radius:50%;border:0;padding:0;background:none;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.schirmpunkt::before{content:"";width:11px;height:11px;border-radius:50%;
  background:rgba(20,17,13,.22);transition:background .18s ease,transform .18s ease}
.schirmpunkt:hover::before{background:rgba(142,63,35,.5)}
.schirmpunkt.aktiv::before{background:var(--kupfer);transform:scale(1.22)}
.schirmpunkt:focus-visible{outline:2px solid var(--kupfer);outline-offset:3px}


/* Mail- und Berichtsansicht im Gerät */
.iphone-mail .schirm{background:#F3F5F8;color:#14110D}
.mailapp{height:100%;padding-top:26px;display:flex;flex-direction:column;font-size:10.5px;line-height:1.4}
.mailapp-kopf{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #E1E6EC;
  background:#fff;font-size:11px;font-weight:700;color:#3A4450}
.mailapp-kopf .zurueck{color:#B65432;font-size:15px;line-height:.8}
.mailapp-betreff{background:#fff;padding:12px 12px 13px;border-bottom:1px solid #E1E6EC}
.mailapp-betreff b{display:block;font-size:13px;font-weight:800;color:#14110D;line-height:1.25;letter-spacing:-.01em}
.mailapp-betreff span{display:block;font-size:9.5px;color:#68757F;margin-top:3px}
.mailapp-zeilen{background:#fff;display:grid}
.mailapp-zeilen span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 12px;border-bottom:1px solid #EEF1F5}
.mailapp-zeilen i{font-style:normal;color:#68757F;flex:none}
.mailapp-zeilen b{font-weight:700;color:#14110D;text-align:right}
.mailapp-zeilen .hervor b{color:#8E3F23}
.mailapp-fuss{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:12px;
  border-top:1px solid #E1E6EC;background:#fff}
.anrufknopf{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--kupfer);color:#fff;
  border-radius:999px;padding:11px 14px;font-size:12px;font-weight:800;letter-spacing:.01em}
.anrufknopf svg{width:13px;height:13px;flex:none}
.anrufnotiz{text-align:center;font-size:9px;color:#68757F}
/* Mini-Dashboard im Gerät (Schritt 4). Eine Serie, deshalb eine Farbe und keine Legende;
   beschriftet wird nur die laufende Woche, nicht jeder Balken. */
.dash{height:100%;padding:26px 0 0;display:flex;flex-direction:column;background:#F3F5F8}
.dash-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;background:#fff;
  border-bottom:1px solid #E1E6EC}
.dash-titel b{display:block;font-size:12.5px;font-weight:800;color:#14110D;letter-spacing:-.01em}
.dash-titel span{display:block;font-size:9px;color:#68757F;margin-top:1px}
.dash-punkt{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:8.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#1F7A4D;background:#E6F4EC;border-radius:999px;padding:3px 7px}
.dash-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E1E6EC;border-bottom:1px solid #E1E6EC}
.dash-kacheln span{background:#fff;padding:11px 12px;font-size:9px;color:#68757F;line-height:1.3}
.dash-kacheln b{display:block;font-family:var(--titel);font-weight:800;font-size:21px;color:#8E3F23;line-height:1;margin-bottom:3px}
.dash-block{background:#fff;margin-top:7px;padding:11px 12px;border-top:1px solid #E1E6EC;border-bottom:1px solid #E1E6EC}
.dash-label{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9AA6B2;margin-bottom:9px}
.dash-pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dash-pipeline span{font-size:9px;color:#68757F;line-height:1.3;border-left:2px solid #E1E6EC;padding-left:7px}
.dash-pipeline b{display:block;font-family:var(--titel);font-weight:800;font-size:16px;color:#14110D;line-height:1}
.dash-pipeline .offen{border-left-color:var(--kupfer)}
.dash-pipeline .offen b{color:#8E3F23}
.wgraf{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;align-items:end;height:66px}
.wbalken{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px}
.wwert{font-size:9px;font-weight:800;color:#8E3F23;opacity:0}
.wbalken.jetzt .wwert{opacity:1}
.wsaeule{width:100%;background:#D8DEE6;border-radius:4px 4px 0 0;min-height:4px}
.wbalken.jetzt .wsaeule{background:var(--kupfer)}
.wkw{font-size:8px;color:#9AA6B2}
.wbalken.jetzt .wkw{color:#14110D;font-weight:700}
.dash-liste{display:grid;gap:8px}
.dash-liste span{display:flex;align-items:center;gap:8px;font-size:9.5px;color:#68757F}
.dash-liste i{flex:none;width:20px;height:20px;border-radius:50%;background:#EEF1F5;color:#5A6673;
  font-style:normal;font-size:8px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.dash-liste b{flex:1;color:#14110D;font-weight:700}
.dash-liste u{flex:none;text-decoration:none;color:#9AA6B2}
.dash-aktion{margin-top:auto;background:#fff;border-top:1px solid #E1E6EC;padding:11px 12px;display:flex;
  align-items:center;gap:9px;font-size:9.5px;color:#3A4450;line-height:1.35}
.dash-aktion b{color:#14110D;font-weight:800}
.dash-knopf{flex:none;background:var(--kupfer);color:#fff;border-radius:999px;padding:7px 13px;font-size:10px;font-weight:800}
/* Stepper *//* Stepper */
/* Ablauf-Schritte als Karten, wie der Rest der Seite. Vorher standen sie
   nackt auf dem Hintergrund und der Abschnitt wirkte unfertig (Boris, 18.09.). */
.steps{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.step{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:20px 22px 22px}
.stepnum{width:30px;height:30px;border-radius:50%;background:var(--kupfer);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:12px}
.step b{display:block;color:var(--ink);font-weight:700;font-size:16px;margin-bottom:5px}
.step p{color:var(--ink-mid);font-size:14.5px;line-height:1.6}
@media(min-width:920px){
  .steps{flex-direction:row;gap:18px;margin-top:30px}
  .step{flex:1;min-width:0}
  .step p{font-size:14px}
}

/* Kennzahlen-Leiste */
.kpis{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;margin-top:26px}
@media(min-width:840px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{background:#fff;padding:20px 22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kpi strong{font-family:var(--titel);font-weight:800;font-size:24px;color:var(--espresso);letter-spacing:-.02em}
.kpi span{color:var(--ink-grau);font-size:14px}

/* Vergleich */
.vergleich{display:grid;gap:14px}
@media(min-width:840px){.vergleich{grid-template-columns:repeat(2,1fr);gap:18px}}
.vpaar{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:18px 20px}
.vpaar .titel{display:block;color:var(--ink-blass);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.vzeile{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;padding:6px 0}
.vzeile.gut{background:var(--kupfer-blass);border-radius:10px;padding:10px 12px;margin-top:6px;color:var(--ink)}
.vzeile .sym{flex:none;width:20px;font-weight:800}
.vzeile.schlecht .sym{color:var(--rot)}
.vzeile.gut .sym{color:var(--kupfer-dunkel)}
.vzeile.schlecht{color:var(--ink-grau)}

/* Zitat */
.zitat{border-left:3px solid var(--kupfer);padding:4px 0 4px 18px;margin-top:26px}
.zitat p{font-size:16px;line-height:1.6;color:var(--ink)}
.zitat .wer{margin-top:10px;font-size:14px;color:var(--ink-grau)}
.zitat .wer b{color:var(--ink)}

/* FAQ */
details{background:#fff;border:1px solid var(--linie);border-radius:14px;margin-bottom:10px;overflow:hidden}
details summary{cursor:pointer;list-style:none;padding:18px 48px 18px 20px;font-weight:700;font-size:16px;color:var(--espresso);position:relative}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;color:var(--kupfer)}
details[open] summary::after{content:"–"}
details .antwort{padding:0 20px 20px;color:var(--ink-mid);font-size:15px;line-height:1.65}

/* Formular */
.formkarte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:22px}
@media(min-width:840px){.formkarte{padding:28px 30px}}
.formular{display:grid;gap:14px}
.feld-paar{display:grid;gap:14px}
@media(min-width:640px){.feld-paar{grid-template-columns:1fr 1fr}}
label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font-family:var(--font);font-size:15.5px;color:var(--ink);background:var(--papier);border:1px solid var(--linie);border-radius:10px;padding:13px 14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--kupfer);outline-offset:1px}
textarea{min-height:120px;resize:vertical}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-grau)}
.zustimmung label{font-weight:400;font-size:13.5px;color:inherit;margin:0}
.honig{position:absolute;left:-9999px}
.kontaktliste{display:grid;gap:12px;margin-top:20px}
.kontaktzeile{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:14px 16px}
.kontaktzeile span{display:block;color:var(--ink-grau);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:4px}
.kontaktzeile a,.kontaktzeile p{font-size:16px;font-weight:700;color:var(--espresso);text-decoration:none}

/* Fuß */
footer{background:var(--espresso);color:#CFC4B3;padding:40px 0 32px;font-size:14px}
footer img{height:22px;width:auto}
footer .reihe{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid rgba(243,237,227,.15)}
footer a{color:#F3EDE3;text-decoration:none}
footer a:hover{color:#E3A583}

/* Textseiten */
.textseite{padding:clamp(34px,5vw,60px) 0 clamp(44px,6vw,72px)}
.textseite h1{margin-bottom:18px}
.textseite h2{font-size:20px;margin:30px 0 10px}
.textseite p{color:var(--ink-mid);margin-bottom:10px;font-size:15.5px}
.textseite .spalten{columns:2;column-gap:44px}
@media(max-width:900px){.textseite .spalten{columns:1}}
.textseite .spalten h2{break-after:avoid}

/* Offene Punkte für Boris, vor dem Livegang entfernen */
.tbd{background:rgba(182,84,50,.16);border-bottom:1px dashed var(--kupfer);padding:0 .2em}

/* Einblenden */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .d1.in{transition-delay:.08s}.js .d2.in{transition-delay:.16s}.js .d3.in{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ======================================================================
   Ausbau 17.09.: dunkler Hero mit Karte, Anzeigen-Galerie, Geräte-Mockups
   ====================================================================== */

/* Dunkler Hero */
.hero-dunkel{background:var(--espresso);color:#F3EDE3;position:relative;overflow:hidden;padding:clamp(34px,5vw,64px) 0 clamp(40px,5vw,72px)}
.hero-dunkel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 480px at 82% 6%,rgba(182,84,50,.34),transparent 62%),radial-gradient(620px 380px at 4% 92%,rgba(224,138,95,.14),transparent 70%)}
.hero-dunkel .wrap{position:relative;z-index:2}
.hero-dunkel h1{color:#fff;font-size:clamp(31px,4.8vw,50px)}
.hero-dunkel h1 em{font-style:normal;color:var(--kupfer-hell)}
.hero-dunkel .sub{color:rgba(243,237,227,.82)}
.hero-dunkel .eyebrow{color:var(--kupfer-hell)}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(243,237,227,.08);border:1px solid rgba(243,237,227,.18);color:rgba(243,237,227,.9);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;margin-bottom:18px}
.badge .punkt{width:8px;height:8px;border-radius:50%;background:var(--kupfer-hell);box-shadow:0 0 0 0 rgba(224,138,95,.7);animation:pulsieren 2.4s infinite}
@keyframes pulsieren{0%{box-shadow:0 0 0 0 rgba(224,138,95,.55)}70%{box-shadow:0 0 0 12px rgba(224,138,95,0)}100%{box-shadow:0 0 0 0 rgba(224,138,95,0)}}
@media(prefers-reduced-motion:reduce){.badge .punkt{animation:none}}
.hero-dunkel .tickrow{background:rgba(243,237,227,.06);border-color:rgba(243,237,227,.16)}
.hero-dunkel .tickrow .txt{color:rgba(243,237,227,.78)}
.hero-dunkel .tickrow .txt b{color:#fff}
.hero-dunkel .reassure{color:rgba(243,237,227,.7)}
.hero-dunkel .reassure a{color:var(--kupfer-hell)}
/* Kennzahlenband unter dem Hero, ueber die ganze Inhaltsbreite */
.hero-zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:clamp(34px,4vw,54px)}
@media(max-width:860px){.hero-zahlen{grid-template-columns:repeat(2,1fr)}}
/* Kaesten in derselben Sprache wie die Haken im Hero, damit es eine Familie bleibt */
.hero-zahl{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
  background:rgba(243,237,227,.06);border:1px solid rgba(243,237,227,.16);
  border-radius:14px;padding:18px 20px 16px;min-height:118px;position:relative}
.hero-zahl::before{content:"";position:absolute;left:20px;top:0;width:26px;height:2px;
  background:var(--kupfer-hell);border-radius:0 0 2px 2px}
.hero-zahl strong{font-family:var(--titel);font-weight:800;
  font-size:clamp(26px,3vw,34px);color:#fff;line-height:1.05}
.hero-zahl span{font-size:13.5px;color:rgba(243,237,227,.66);line-height:1.45}

/* Hero-Knopf mittig ueber den drei Haken-Kaesten */
.hero .cta-row{flex-direction:column;align-items:center;gap:11px;text-align:center;margin-top:26px}

/* Geräte-Mockups */
.geraete{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:start}
@media(max-width:900px){.geraete{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.geraete{grid-template-columns:1fr}}
.geraet{background:#fff;border:1px solid var(--linie);border-radius:22px;padding:10px;box-shadow:0 22px 46px -30px rgba(38,33,26,.6)}
.geraet img{border-radius:14px;width:100%}
.geraet-text{margin-top:12px;font-size:14px;color:var(--ink-mid)}
.geraet-text b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.mailkarte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:16px;font-size:13.5px;color:var(--ink-mid)}
.mailkarte .kopf{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--linie);padding-bottom:10px;margin-bottom:12px}
.mailkarte .kopf b{font-size:14px;color:var(--ink)}
.mailkarte .kopf span{font-size:11.5px;color:var(--ink-grau)}
.mailzeile{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--linie)}
.mailzeile:last-child{border-bottom:0}
.mailzeile b{color:var(--ink);font-weight:700}

/* ---------- iPhone-Mockup ---------- */
.iphone{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/19.5;background:#1b1714;border-radius:42px;padding:10px;box-shadow:0 26px 60px -32px rgba(38,33,26,.85),0 0 0 1px rgba(255,255,255,.06) inset}
/* Der Bildschirm wird absolut gesetzt, damit sein Inhalt das Gerät nie höher machen kann.
   Sonst sprengt zum Beispiel ein hochformatiges Video den Rahmen und die Bildunterschrift
   rutscht ins Gerät hinein. */
.iphone .schirm{position:absolute;inset:10px;border-radius:33px;overflow:hidden;background:#fff}
.iphone .schirm img,.iphone .schirm video{width:100%;height:100%;object-fit:cover;display:block}
.iphone .kerbe{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:38%;height:22px;background:#1b1714;border-radius:0 0 14px 14px;z-index:3}
/* Webseite im Geraet: echte Statusleiste, damit der Notch nicht den Seitenkopf verdeckt */
/* Gilt fuer JEDES Geraet mit Statusleiste. Die Regel darf nie an eine einzelne
   Geraete-Klasse gebunden werden, sonst rutscht die Leiste in den Textfluss und
   schiebt den Bildschirm nach unten aus dem Rahmen. */
.iphone .statusleiste{position:absolute;top:10px;left:10px;right:10px;height:30px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:#fff;color:#14110D;
  border-radius:33px 33px 0 0;font-size:11px;font-weight:700;letter-spacing:.01em}
.iphone .statusleiste b{padding-bottom:2px}
.iphone .statusleiste svg{width:42px;height:10px;display:block;margin-bottom:1px}
.iphone-web .schirm > img{height:calc(100% - 30px);margin-top:30px;object-position:top}
.iphone-funnel .schirmlauf{padding-top:26px}
/* Feed- und Mail-Geraet sind schmaler, Leiste und Kerbe entsprechend kleiner */
.iphone-feed .statusleiste,.iphone-mail .statusleiste{height:26px;padding:0 12px;font-size:9.5px;border-radius:29px 29px 0 0}
.iphone-feed .statusleiste svg,.iphone-mail .statusleiste svg{width:34px;height:8px}
.iphone-feed .kerbe,.iphone-mail .kerbe{width:36%;height:18px;border-radius:0 0 11px 11px}
.iphone .knopf{position:absolute;right:-3px;top:23%;width:3px;height:56px;background:#3a332b;border-radius:2px}
.iphone .knopf.links{left:-3px;right:auto;top:20%;height:34px}
.iphone-text{margin-top:16px;font-size:14px;color:var(--ink-mid)}
.iphone-text b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}
.dunkelbg .iphone-text{color:rgba(243,237,227,.72)}
.dunkelbg .iphone-text b{color:#fff}
.stumm{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(22,19,15,.68);color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:600;letter-spacing:.02em}
.kibadge{position:absolute;left:12px;bottom:12px;z-index:3;background:rgba(227,165,131,.92);color:#2A1B12;border-radius:999px;
  padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* Drei Reels nebeneinander (Weisshelm-Beweis) */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(246px,1fr));gap:clamp(24px,3vw,44px);margin-top:26px}
.reel{margin:0}
.reel .iphone{max-width:272px}
.reel figcaption{margin-top:18px;font-size:14px;line-height:1.55;color:rgba(243,237,227,.66);text-align:center}
.reel figcaption b{display:block;font-family:var(--titel);font-size:17.5px;font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:-.01em}
.quelle-klein{margin-top:30px;font-size:14px;line-height:1.6;color:rgba(243,237,227,.58)}

/* ---------- Zahlen-Trichter ---------- */
.trichter{display:grid;gap:14px;margin-top:8px}
.tstufe{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:6px 20px;align-items:center}
@media(max-width:620px){.tstufe{grid-template-columns:1fr}}
.tstufe .wert{font-family:var(--titel);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--espresso);letter-spacing:-.02em}
.tstufe .wert span{display:block;font-family:var(--font);font-weight:400;font-size:13.5px;color:var(--ink-grau);letter-spacing:0;margin-top:2px}
.tbalken{height:26px;border-radius:4px;background:var(--kupfer);position:relative}
.tbalken.s2{background:#C87A57}
.tbalken.s3{background:#E0A88C}
.dunkelbg .tstufe .wert{color:#fff}
.dunkelbg .tstufe .wert span{color:rgba(243,237,227,.66)}
.tquelle{margin-top:18px;font-size:13px;color:var(--ink-grau)}
.dunkelbg .tquelle{color:rgba(243,237,227,.6)}

/* Anonymes Anzeigenband */
.anonymband{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.anonymband img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;opacity:.95}
/* Zwei Spalten (Text + Medium) */
.zwei{display:grid;gap:26px}
@media(min-width:960px){.zwei{grid-template-columns:1.1fr .9fr;gap:clamp(30px,3.4vw,60px);align-items:start}}

/* Zwischenbloecke in den Beweis-Abschnitten */
.block-titel{font-size:clamp(19px,2vw,24px);margin:52px 0 10px}
.block-titel-flach{margin-top:0}
.sub-klein{font-size:clamp(15px,1.15vw,16.5px);margin-top:0}
.zwei-hinweis{margin-top:10px;gap:20px}
@media(min-width:960px){.zwei-hinweis{grid-template-columns:1.18fr .82fr;gap:34px;align-items:start}}
.zwei-video{margin-top:58px}
@media(min-width:960px){.zwei-video{align-items:center}}
.hinweisbox{background:rgba(243,237,227,.06);border:1px solid rgba(243,237,227,.16);border-left:3px solid #E3A583;
  border-radius:6px 14px 14px 6px;padding:16px 18px;font-size:14.5px;line-height:1.6;color:rgba(243,237,227,.78)}
.hinweisbox b{color:#fff}

/* Beispielmotive: sechs erfundene Betriebe, je im Geraet und als Wisch-Reihe */
.beispiele{display:flex;flex-wrap:nowrap;gap:clamp(18px,2.2vw,30px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}
.beispiele::-webkit-scrollbar{display:none}
.beispiel{flex:0 0 clamp(226px,23%,276px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;align-items:center}
.beispiel-tag{align-self:center;margin-bottom:13px;background:rgba(243,237,227,.10);color:rgba(243,237,227,.86);
  border:1px solid rgba(243,237,227,.3);border-radius:999px;padding:5px 13px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase}
.beispiel figcaption{margin-top:20px;font-size:14px;line-height:1.5;color:rgba(243,237,227,.66);text-align:center}
.beispiel figcaption b{display:block;font-family:var(--titel);font-size:17px;font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:-.01em}

/* Feed im Geraet: so sitzt ein quadratisches Motiv zwischen Kopfzeile und Aktionen */
.iphone-feed{max-width:262px}
.iphone-feed .schirm{background:#fff;color:#14110D}
.iphone-feed .feed{height:100%;padding-top:26px;display:flex;flex-direction:column;font-size:10px;line-height:1.35}
.feed-kopf{display:flex;align-items:center;gap:8px;padding:9px 11px}
.feed-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--marke,#26211A);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--titel)}
.feed-avatar-logo{overflow:hidden;background:#001A4D}
.feed-avatar-logo img{width:100%;height:100%;object-fit:cover;display:block}
.feed-wer{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.feed-wer b{font-size:11px;font-weight:700;color:#14110D;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-wer span{font-size:9.5px;color:#68757F}
.feed-mehr{flex:none;color:#68757F;font-size:13px;letter-spacing:.06em;line-height:.6}
.iphone-feed .feed img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block}
.feed-cta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;background:#F2F5F8;
  font-size:10.5px;font-weight:700;color:#14110D}
.feed-pfeil{color:#68757F;font-size:14px;line-height:.8}
.feed-aktionen{display:flex;align-items:center;gap:13px;padding:10px 11px 6px;color:#14110D}
.feed-aktionen svg{width:17px;height:17px;flex:none}
.feed-aktionen .feed-merken{margin-left:auto}
.feed-text{padding:0 11px 10px;font-size:10px;color:#3A4450}
.feed-text b{font-weight:700;color:#14110D}
.feed-naechster{margin-top:auto;border-top:1px solid #E7ECF1;padding:11px;display:flex;align-items:center;gap:8px;flex:none}
.feed-naechster .kreis{width:26px;height:26px;border-radius:50%;background:#E7ECF1;flex:none}
.feed-naechster .balken{display:flex;flex-direction:column;gap:5px;flex:1}
.feed-naechster .balken i{display:block;height:6px;border-radius:3px;background:#E7ECF1}
.feed-naechster .balken i:first-child{width:52%}
.feed-naechster .balken i:last-child{width:32%;background:#F0F3F6}

/* Am Handy werden die beiden Motiv-Raster zu Wisch-Reihen, sonst stapeln sich elf Quadrate. */
@media(max-width:720px){
  .beispiele{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:22px;padding:0 22px 12px;margin:0 -22px;
    scrollbar-width:none;-ms-overflow-style:none}
  .beispiele::-webkit-scrollbar{display:none}
  .beispiel{flex:0 0 78%;scroll-snap-align:start}
  .wischhinweis{display:block}
}

/* Kampagnen-Karussell (Beweis 3) */
.karussell{margin-top:22px}
.karussell-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.wischhinweis-hell{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-grau)}
.karussell-knoepfe{display:flex;gap:8px}
.kknopf{width:38px;height:38px;border-radius:50%;border:1px solid var(--linie);background:#fff;color:var(--ink-mid);
  font-size:19px;line-height:1;display:grid;place-items:center;transition:border-color .16s ease,color .16s ease,background .16s ease}
.kknopf:hover{border-color:var(--kupfer);color:var(--kupfer-dunkel);background:var(--kupfer-blass)}
.kknopf[disabled]{opacity:.34;cursor:default}
.kknopf[disabled]:hover{border-color:var(--linie);color:var(--ink-mid);background:#fff}
.kampagnenkarten{display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-left:0;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.kampagnenkarten::-webkit-scrollbar{display:none}
.kkarte{flex:0 0 clamp(250px,25%,300px);scroll-snap-align:start;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-karte);padding:22px 24px 20px;display:flex;flex-direction:column}
.kkarte-ort{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-grau)}
.kkarte h3{font-size:19px;margin-top:8px;line-height:1.22}
.kkarte-preis{margin-top:auto;padding-top:22px}
.kkarte-preis strong{display:block;font-family:var(--titel);font-weight:800;font-size:38px;color:var(--kupfer-dunkel);line-height:1}
.kkarte-preis span{display:block;font-size:13.5px;color:var(--ink-grau);margin-top:3px}
.kkarte-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)}
.kkarte-zahlen span{font-size:12.5px;color:var(--ink-grau);line-height:1.35}
.kkarte-zahlen b{display:block;font-family:var(--titel);font-weight:800;font-size:22px;color:var(--ink);margin-bottom:1px}
@media(max-width:620px){
  .kampagnenkarten{margin:0 -22px;padding:0 22px 6px;scroll-padding-left:22px}
  .kkarte{flex:0 0 78%}
  .karussell-knoepfe{display:none}
}

/* Kampagnen-Tabelle */
.tabelle{border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:#fff}
.zeile{display:grid;grid-template-columns:2fr 1.3fr .8fr .9fr;gap:14px;padding:14px 18px;border-bottom:1px solid var(--linie);align-items:center;font-size:15px}
.zeile:last-child{border-bottom:0}
.zeile.kopf{background:var(--creme);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-grau)}
.zeile .num{text-align:right;font-variant-numeric:tabular-nums}
.zeile .stark{font-family:var(--titel);font-weight:800;color:var(--kupfer-dunkel)}
.zeile b{font-weight:700}
.zeile span:nth-child(2){color:var(--ink-grau);font-size:14px}
@media(max-width:700px){
  .zeile{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px}
  .zeile.kopf{display:none}
  .zeile span:nth-child(2){grid-column:1;font-size:13px}
  .zeile .num:nth-child(3){grid-row:1;grid-column:2;text-align:right}
  .zeile .num:nth-child(4){grid-row:2;grid-column:2;text-align:right}
}

/* Fallstudien */
.faelle{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Gleiche Bausteine sollen in beiden Karten auf gleicher Höhe liegen. Das Zeilenraster
   liegt dafür im Container, die Karten erben es per subgrid. Die Beschreibung ist die
   einzige dehnbare Zeile, sie schluckt den Längenunterschied. */
.fall{display:flex;flex-direction:column}
.fall > p{flex:1}
@supports (grid-template-rows: subgrid){
  @media(min-width:860px){
    .faelle{grid-template-rows:auto auto 1fr auto auto auto}
    .fall{display:grid;grid-template-rows:subgrid;grid-row:span 6}
    .fall > p{flex:none}
  }
}


.fall{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:24px 26px}
.fall-marke{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-blass);margin-bottom:10px}
.fall h3{font-size:22px;margin-bottom:10px}
.fall p{color:var(--ink-mid);font-size:15px}
/* Drei Zahlen je Fall, gleich breit, damit die Karten nebeneinander ruhig wirken */
.fall-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0;padding:15px 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.fall-zahlen span{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;color:var(--ink-grau)}
.fall-zahlen strong{font-family:var(--titel);font-weight:800;font-size:clamp(21px,2vw,25px);
  color:var(--kupfer-dunkel);letter-spacing:-.02em;margin-bottom:2px}
.fall blockquote{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.fall .wer{margin-top:12px;font-size:13.5px;color:var(--ink-grau)}
.fall .wer b{display:block;color:var(--ink);font-size:15px}

/* Zitat-Karten */
/* Kundenstimmen: drei sichtbar, der Rest wird gewischt */
.zitat-karussell{margin-top:18px}
.zitate{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.zitate::-webkit-scrollbar{display:none}
/* Weiche Kante dort, wo es weitergeht. Zeigt ohne Text, dass die Reihe noch weiterläuft. */
.spur.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%)}
.spur.mehr-links{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 100%)}
.spur.mehr-links.mehr-rechts{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.zitatkarte{flex:0 0 calc((100% - 32px) / 3);scroll-snap-align:start}
@media(max-width:900px){.zitatkarte{flex:0 0 calc((100% - 16px) / 2)}}
@media(max-width:620px){
  .zitate{margin:0 -22px;padding:0 22px 6px;scroll-padding-left:22px}
  .zitatkarte{flex:0 0 80%}
  .zitat-karussell .karussell-knoepfe{display:none}
}
.zitatkarte{margin:0;background:#fff;border:1px solid var(--linie);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.zitatkarte blockquote{margin:0;font-size:15px;line-height:1.55}
.zitatkarte figcaption{margin-top:auto;font-size:13px;color:var(--ink-grau)}
.zitatkarte figcaption b{display:block;color:var(--ink);font-size:14.5px}

/* Logo-Laufband: ruhiges Raster, gleiche Slots, weiche Raender */
.logoband{overflow:hidden;padding:24px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--creme);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* Gleiche Luft zwischen allen Logos: fester Abstand statt fester Slot-Breite.
   Die Hoehe je Logo ist auf gleiche optische Flaeche gerechnet (Seitenverhaeltnis
   und Schwaerze der getrimmten Bounding-Box), damit kein Logo dominiert. */
.logoband .schiene{display:flex;align-items:center;gap:clamp(38px,4.6vw,72px);width:max-content;animation:logolauf 72s linear infinite}
.logoband .slot{flex:none;height:52px;display:grid;place-items:center}
.logoband img{width:auto;height:22px;filter:grayscale(1);opacity:.52}
.logoband img[src*="mitsubishi"]{height:18px}
.logoband img[src*="hyundai"]{height:19px}
.logoband img[src*="bacon"]{height:17px;opacity:.44}
.logoband img[src*="cbre"]{height:22px;opacity:.48}
.logoband img[src*="porr"]{height:23px;opacity:.44}
.logoband img[src*="durchblicker"]{height:26px}
.logoband img[src*="sedlak"]{height:24px;opacity:.44}
.logoband img[src*="denzel"]{height:28px}
.logoband img[src*="mtel"]{height:37px}
.logoband img[src*="luckycar"]{height:28px}
.logoband img[src*="leyrer-graf"]{height:28px;opacity:.48}
.logoband img[src*="plansee"]{height:33px}
.logoband img[src*="zech"]{height:35px;opacity:.66}
.logoband img[src*="swietelsky"]{height:35px}
.logoband img[src*="soluto"]{height:40px}
@keyframes logolauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logoband .schiene{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* Namens-Chips (Kunden ohne Logo) */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{border:1px solid rgba(243,237,227,.22);border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:600;color:rgba(243,237,227,.86)}

/* Zitate mit Portraet */
.zitatkarte .kopfzeile-zitat{display:flex;align-items:center;gap:12px}
.zitatkarte .avatar{width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover}
/* Name, Position und Unternehmen je in einer eigenen Zeile, ohne Trennzeichen */
.zitatkarte .wer{font-size:12.5px;color:var(--ink-grau);line-height:1.4;display:block}
.zitatkarte .wer b{display:block;color:var(--ink);font-size:14px;font-weight:700;margin-bottom:2px}
.zitatkarte .wer .rolle,.zitatkarte .wer .firma{display:block}
.zitatkarte .wer .firma{color:var(--ink-mid);font-weight:600}
.fall .wer-zeile{display:flex;align-items:center;gap:12px;margin-top:14px}
.wer .rolle,.wer .firma{display:block}
.wer .firma{color:var(--ink-mid);font-weight:600}
.hauptfall .wer .rolle,.hauptfall .wer .firma,.fall .wer .rolle,.fall .wer .firma{display:block}
.fall .wer-zeile img{width:54px;height:54px;border-radius:50%;flex:none}

/* Kennzahlen-Karten (Tempo der Kampagnen) */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:20px 22px}
.karte h3{font-size:24px;color:var(--kupfer-dunkel);margin-bottom:4px}
.karte p{color:var(--ink-mid);font-size:14px;line-height:1.5}

/* Hauptfall (grosse Fallstudie) */
.hauptfall{display:grid;gap:24px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:26px 28px;margin-bottom:18px}
@media(min-width:960px){.hauptfall{grid-template-columns:1.55fr .85fr;gap:44px;padding:34px 38px;align-items:center}}
.hauptfall h3{font-size:clamp(19px,2vw,24px);margin:10px 0 16px;line-height:1.22;text-wrap:wrap}
.hauptfall h3 em{font-style:normal;color:var(--kupfer-dunkel)}
.hauptfall blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink-mid)}
.hauptfall .wer-zeile{display:flex;align-items:center;gap:14px;margin-top:20px}
.hauptfall .wer-zeile img{width:60px;height:60px;border-radius:50%;flex:none}
.hauptfall .wer{font-size:13.5px;color:var(--ink-grau);line-height:1.4}
.hauptfall .wer b{display:block;color:var(--ink);font-size:15.5px}
.hauptfall-zahlen{display:grid;gap:14px;border-top:1px solid var(--linie);padding-top:18px}
@media(min-width:960px){.hauptfall-zahlen{border-top:0;border-left:1px solid var(--linie);padding:6px 0 6px 34px}}
.hauptfall-zahlen strong{display:block;font-family:var(--titel);font-weight:800;font-size:clamp(26px,3vw,34px);color:var(--kupfer-dunkel);letter-spacing:-.02em}
.hauptfall-zahlen span{font-size:13.5px;color:var(--ink-grau);line-height:1.4}


/* ============================================================
   Grafiken im Abschnitt „Kennen Sie das?" (überarbeitet 18.09.2026)
   Gebaut in HTML/CSS und SVG, nicht generiert. Jede Grafik trägt die
   Aussage ihrer Karte, nicht nur Dekoration:
   1 Reichweite: die kleine kupferne Gruppe gegen die große stumpfe Masse
   2 Postfach: echte Absagegründe statt anonymer Balken
   3 Schleife: Auswahl, Einstellung, Probezeit, und wieder von vorne
   ============================================================ */
.kgrafik{background:var(--creme);border:1px solid var(--linie);border-radius:12px;
  padding:15px;margin-bottom:16px;height:198px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden}

/* --- 1 · Wen ein Inserat auf dem Jobportal erreicht ---
   Zwei Reihen gleich großer Marken, darunter je eine einzeilige Beschriftung.
   Eine Schriftgröße, kein Fettwechsel: das war vorher schwer zu lesen. */
.kreich{display:flex;flex-direction:column;gap:16px}
.kreich-gruppe{display:flex;flex-direction:column;gap:7px}
.kreich-reihe{display:flex;flex-wrap:wrap;gap:4px}
.kreich-reihe i{width:13px;height:13px;border-radius:3px;background:#DCCFB8;display:block}
.kreich-gruppe.wenige .kreich-reihe i{background:var(--kupfer)}
.kreich-name{font-size:12px;line-height:1.3;color:var(--ink-grau);white-space:nowrap}
.kreich-gruppe.wenige .kreich-name{color:var(--kupfer-dunkel);font-weight:600}

/* --- 2 · Das Postfach nach der Anzeige --- */
.kpost-kopf{display:flex;align-items:baseline;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-grau)}
.kpost-kopf span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11px;color:var(--ink-grau)}
.kmail{display:flex;flex-direction:column;gap:6px}
.kmail-zeile{display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--linie);border-radius:8px;padding:7px 9px}
.kmail-zeile i{width:15px;height:15px;border-radius:50%;background:#DCCFB8;flex:none}
.kmail-zeile u{flex:1;min-width:0;font-size:11.5px;color:var(--ink-grau);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kmail-zeile em{font-style:normal;font-size:10px;font-weight:700;
  color:var(--rot);background:var(--rot-blass);border-radius:999px;
  padding:2px 8px;white-space:nowrap}
.kmail-zeile.passt{border-color:var(--kupfer);box-shadow:0 0 0 2px var(--kupfer-blass)}
.kmail-zeile.passt i{background:var(--kupfer)}
.kmail-zeile.passt u{color:var(--ink);font-weight:600}
.kmail-zeile.passt em{color:#fff;background:var(--kupfer)}

/* --- 3 · Es bleibt am Team haengen ---
   Fuenf Leute, einer faellt in der Probezeit aus, seine Arbeit geht
   zurueck an die Nachbarn. Traegt den Schmerz, nicht nur den Ablauf. */
.kteam{width:100%;height:auto;display:block;font-family:var(--font)}
.kteam .person{fill:#DCCFB8}
.kteam .luecke{fill:none;stroke:var(--rot);stroke-width:1.6;stroke-dasharray:4 3}
.kteam .kreuz{stroke:var(--rot);stroke-width:2;stroke-linecap:round;fill:none}
.kteam .last{stroke:var(--kupfer);stroke-width:1.6;fill:none;stroke-linecap:round}
.kteam .wort{font-size:11px;font-weight:700;fill:var(--kupfer-dunkel);text-anchor:middle}
.kteam .klein{font-size:10.5px;font-weight:500;fill:var(--ink-grau);text-anchor:middle}