/* ==========================================================================
   DT Consulting — gemeinsames Stylesheet der Unterseiten
   Erzeugt fuer: /call-danke, /termin-vorbereitung, /kundenstimmen,
                 /training-video

   Herkunft: die Tokens und Komponenten sind aus dem bereits getesteten CSS
   von /termin/index.html uebernommen, nicht neu erfunden. Damit bleiben
   Farben, Typo, Motion, Fokus und Buttons ueber alle Seiten identisch.

   Direction: Modern Minimal (DT-DESIGN.md L11).
   Harte Markenregel: es gibt KEINE Signalfarbe. Auswahl, Fokus und Fehler
   laufen ueber Polaritaet, Rahmenstaerke und Ikonografie.

   ⚠️ /termin traegt sein CSS noch inline. Solange das so ist, gibt es zwei
   Stellen mit denselben Tokens. Migration von /termin auf diese Datei ist
   offen und sollte nachgezogen werden, bevor Werte geaendert werden.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
img,svg,picture,video,iframe{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Ohne diese Zeile erben Eingabefelder das Browser-Schwarz #000. Das ist keine
   der sechs Brandbook-Graustufen und faellt niemandem auf, weil #000 und
   #1A1C1C nebeneinander kaum zu unterscheiden sind. Trotzdem falsch. */
input,select,textarea{font:inherit;color:inherit}

:root{
  /* Brandbook-Palette. Keine 7. Farbe. */
  --schwarz:#1A1C1C;
  --anthrazit:#666B6E;
  --grau:#A3A8AB;      /* nur Linien / dekorativ, NIE als Text auf Weiss */
  --hellgrau:#E5EBED;
  --weiss:#FFFFFF;
  --sandgrau:#F8F5F2;

  --bg:var(--weiss);
  --bg-soft:var(--sandgrau);
  --text:var(--schwarz);
  --text-mute:var(--anthrazit);
  --text-on-dark:var(--weiss);
  --text-on-dark-mute:var(--grau);   /* --grau auf --schwarz = 7,1:1 */

  --line:rgba(163,168,171,.42);
  --line-soft:rgba(163,168,171,.26);
  --line-strong:var(--grau);
  --line-on-dark:rgba(163,168,171,.24);

  --ring:inset 0 0 0 1px rgba(163,168,171,.30);
  --sh-1:0 1px 1px rgba(26,28,28,.03), 0 2px 4px rgba(26,28,28,.035);
  --sh-2:0 1px 1px rgba(26,28,28,.03), 0 4px 8px -2px rgba(26,28,28,.055),
         0 14px 28px -10px rgba(26,28,28,.075);

  --wrap:1140px;
  --gutter:clamp(20px,5vw,48px);
  --sec-y:clamp(64px,9vw,120px);
  --radius:2px;

  --ease:cubic-bezier(0.4,0,0.2,1);
  --t-fast:.25s;
  --t-int:.35s;
  --t-reveal:.6s;
}

body{
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:800px}
.wrap--mid{max-width:960px}

/* --- Typografie --------------------------------------------------------
   Brandbook S. 11: Schnitte ueberspringen und Groesse verdoppeln.
   Fliesstext bleibt Regular, ExtraLight nur fuer grosse Sublines
   (DT-DESIGN.md L60). */
h1,h2,h3{font-weight:600;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(32px,4.8vw,52px)}
h2{font-size:clamp(25px,3.6vw,38px)}
h3{font-size:clamp(19px,2vw,26px);line-height:1.25}
p{text-wrap:pretty}

.kicker{
  font-weight:200;text-transform:uppercase;
  font-size:clamp(13px,1.35vw,16px);letter-spacing:.16em;line-height:1.5;
  color:var(--text-mute);
}
.section--dark .kicker{color:var(--text-on-dark-mute)}

.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--text-mute);max-width:62ch}
.num{font-variant-numeric:tabular-nums}
.prose p+p{margin-top:16px}
.prose{color:var(--text-mute);max-width:66ch}
.prose strong{color:var(--text);font-weight:600}

/* --- Fokus (monochrom: braucht einen eigenen Zustand) ---------------- */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--schwarz);outline-offset:3px;border-radius:var(--radius);
}
.section--dark :where(a,button,summary):focus-visible{outline-color:var(--weiss)}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--schwarz);color:var(--weiss);
  padding:14px 22px;border-radius:var(--radius);font-size:.875rem;font-weight:600;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:12px}

/* --- Buttons ----------------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:14px 30px;
  border:1px solid var(--schwarz);border-radius:var(--radius);
  background:var(--schwarz);color:var(--weiss);
  font-size:.875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.2;text-align:center;
  transition:background var(--t-int) var(--ease),color var(--t-int) var(--ease),
             border-color var(--t-int) var(--ease),transform var(--t-int) var(--ease),
             box-shadow var(--t-int) var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;top:0;left:0;width:45%;height:100%;z-index:0;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.16) 50%,transparent 80%);
  transform:translateX(-160%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateX(340%)}
.btn__arrow{transition:transform var(--t-int) var(--ease);flex:none}
.btn:hover{
  background:var(--anthrazit);border-color:var(--anthrazit);
  transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(26,28,28,.55);
}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn--ghost{background:transparent;color:var(--schwarz)}
.btn--ghost::before{background:linear-gradient(105deg,transparent 20%,rgba(26,28,28,.07) 50%,transparent 80%)}
.btn--ghost:hover{background:var(--schwarz);color:var(--weiss);border-color:var(--schwarz)}
.btn--invers{background:var(--weiss);color:var(--schwarz);border-color:var(--weiss)}
.btn--invers::before{background:linear-gradient(105deg,transparent 20%,rgba(26,28,28,.10) 50%,transparent 80%)}
.btn--invers:hover{background:var(--hellgrau);border-color:var(--hellgrau);color:var(--schwarz)}
.btn--invers:focus-visible{outline-color:var(--weiss)}
.btn--lg{min-height:60px;padding:18px 40px;font-size:.9375rem}
.btn--block{width:100%}

/* Standalone-Textlink. min-height 44px, weil er nicht im Fliesstext sitzt und
   damit nicht unter die Inline-Ausnahme von WCAG 2.5.8 faellt. Die Unterkante
   bleibt optisch am Text, der Rest ist unsichtbare Klickflaeche. */
.textlink{
  display:inline-flex;align-items:flex-end;gap:8px;min-height:44px;
  font-weight:600;line-height:1.4;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:border-color var(--t-fast) var(--ease),gap var(--t-fast) var(--ease);
}
.textlink:hover{border-color:var(--schwarz);gap:12px}

/* --- Header ----------------------------------------------------------
   Funnel-Innenseiten: nur Marke und ein Rueckweg. Keine Navigation,
   weil jeder zusaetzliche Ausgang hier Conversions kostet. */
.tk-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.tk-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.tk-header__brand{display:flex;align-items:center;min-height:44px}
.tk-header__brand img{width:clamp(132px,17vw,168px);height:auto}
.tk-header__back{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 4px;
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);transition:color var(--t-fast) var(--ease);
}
.tk-header__back:hover{color:var(--schwarz)}
.tk-header__back svg{flex:none;transition:transform var(--t-fast) var(--ease)}
.tk-header__back:hover svg{transform:translateX(-3px)}
@media(max-width:560px){
  .tk-header__back span{display:none}
  .tk-header__back{padding:0 12px}
}

/* --- Sektionen -------------------------------------------------------- */
.section{padding:var(--sec-y) 0}
.section--tight{padding:clamp(44px,6vw,72px) 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:var(--schwarz);color:var(--text-on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-on-dark)}
.section--dark .lead,.section--dark .prose{color:var(--text-on-dark-mute)}
.section--dark .prose strong{color:var(--weiss)}
.section__head{max-width:64ch;margin-bottom:clamp(32px,4.4vw,56px)}
.section__head .kicker{margin-bottom:16px}
.section__head h1,.section__head h2{margin-bottom:18px}

/* --- Hero der Innenseiten --------------------------------------------- */
.ihero{padding:clamp(44px,6.5vw,84px) 0 clamp(32px,4.5vw,56px)}
.ihero .kicker{margin-bottom:20px}
.ihero h1{margin-bottom:20px}
.ihero .lead{margin-bottom:0}
.ihero__mark{
  width:56px;height:56px;display:grid;place-items:center;
  border:1px solid var(--schwarz);border-radius:50%;margin-bottom:24px;
}

/* --- Fakten auf Hairlines (Monocle-Prinzip: die Linie ist das Layout) -- */
.facts{border-top:1px solid var(--line);max-width:520px;margin-top:32px}
.facts__row{display:flex;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts__key{
  flex:none;width:120px;font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);
}
.facts__val{font-size:1.0625rem;font-weight:600}
@media(max-width:520px){
  .facts__row{flex-direction:column;gap:4px}
  .facts__key{width:auto}
}

/* --- Nummerierte Schritte --------------------------------------------- */
.steps-list{counter-reset:s;border-top:1px solid var(--line)}
.section--dark .steps-list,.section--dark .steps-list>li{border-color:var(--line-on-dark)}
.steps-list>li{
  counter-increment:s;border-bottom:1px solid var(--line);
  padding:26px 0 26px 0;display:grid;grid-template-columns:auto 1fr;gap:20px;
}
.steps-list>li::before{
  content:counter(s,decimal-leading-zero);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;
  color:var(--text-mute);padding-top:.5em;font-variant-numeric:tabular-nums;
}
.section--dark .steps-list>li::before{color:var(--text-on-dark-mute)}
.steps-list h3{margin-bottom:8px}
.steps-list p{color:var(--text-mute);font-size:1rem;line-height:1.6}
.section--dark .steps-list p{color:var(--text-on-dark-mute)}

/* --- Video-Rahmen ----------------------------------------------------- */
.videoframe{
  position:relative;background:var(--schwarz);border-radius:var(--radius);
  aspect-ratio:16/9;overflow:hidden;box-shadow:var(--ring),var(--sh-2);
}
.videoframe iframe,.videoframe video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Ehrlicher Platzhalter, solange kein Video existiert. Kein gefaktes Play-Overlay. */
.videoframe--placeholder{
  display:grid;place-items:center;text-align:center;padding:32px;
  border:1px dashed var(--line-strong);background:var(--sandgrau);box-shadow:none;
}
.videoframe--placeholder p{color:var(--text-mute);font-size:.9375rem;max-width:44ch}
.videoframe--placeholder strong{
  display:block;color:var(--schwarz);font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;
}

/* Kundenleiste und Kennzahlen stehen in _assets/proofbar.css,
   weil die Startseite sie ohne page.css braucht. */
.section--dark .proofstats__label{color:var(--text-on-dark-mute)}

/* --- Fallstudien: Vorher / Nachher ------------------------------------ */
.cases{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
.case{padding:30px 0;border-bottom:1px solid var(--line)}
.case__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:18px;
}
.case__who{font-size:clamp(19px,1.9vw,24px);font-weight:600;letter-spacing:-.01em}
.case__tag{
  font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);
}
.case__split{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.case__split{grid-template-columns:1fr 1fr;gap:0}}
.case__col{padding-bottom:4px}
@media(min-width:760px){
  .case__col:first-child{padding-right:32px;border-right:1px solid var(--line-soft)}
  .case__col:last-child{padding-left:32px}
}
.case__col h4{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:10px;
}
.case__col p{font-size:1rem;line-height:1.6;color:var(--text-mute)}
.case__col--nachher p{color:var(--text)}
.case__result{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums;
}

/* --- Vorher / Nachher als zwei Spalten (Perpetuum-Muster) -------------- */
.ba{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:820px){.ba{grid-template-columns:1fr 1fr}}
.ba__col{padding:28px 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .ba__col{padding:32px 36px 32px 0;border-bottom:0;border-right:1px solid var(--line)}
  .ba__col:last-child{border-right:0;padding-right:0;padding-left:36px}
}
.ba h3{margin-bottom:18px;font-size:clamp(18px,1.7vw,22px)}
.ba li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:10px 0;font-size:1rem;line-height:1.5;color:var(--text-mute);
}
/* Auf dunklem Grund muss der gedaempfte Ton --grau sein, nicht --anthrazit.
   --anthrazit auf --schwarz ergibt nur 3,2:1 und faellt damit unter die
   4,5:1-Grenze. --grau liegt bei 7,1:1. Steht so in DT-DESIGN.md L125. */
.section--dark .ba li{color:var(--text-on-dark-mute)}
.ba li svg{flex:none;margin-top:.35em}
/* Die Nachher-Spalte steht kraeftiger als die Heute-Spalte. Auf hellem Grund
   ist das --text, auf dunklem Grund MUSS es --text-on-dark sein, sonst steht
   Schwarz auf Schwarz und die Spalte ist unsichtbar. Genau das ist beim
   ersten Build passiert und faellt in einer Palettenpruefung nicht auf,
   weil beide Farben erlaubt sind. */
.ba__col--nachher li{color:var(--text)}
.section--dark .ba__col--nachher li{color:var(--text-on-dark)}

/* --- Drei Schritte ---------------------------------------------------- */
.howto{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:860px){.howto{grid-template-columns:repeat(3,1fr)}}
.section--dark .howto,.section--dark .howto>div{border-color:var(--line-on-dark)}
.howto>div{padding:26px 0;border-bottom:1px solid var(--line)}
@media(min-width:860px){
  .howto>div{border-bottom:0;border-right:1px solid var(--line);padding:30px 32px 30px 0}
  .howto>div:not(:first-child){padding-left:32px}
  .howto>div:last-child{border-right:0;padding-right:0}
}
.howto__num{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;color:var(--text-mute);
  margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.section--dark .howto__num{color:var(--text-on-dark-mute)}
.howto h3{margin-bottom:10px;font-size:clamp(18px,1.8vw,23px)}
.howto p{font-size:1rem;line-height:1.6;color:var(--text-mute)}
.section--dark .howto p{color:var(--text-on-dark-mute)}

/* --- Kundenstimmen ---------------------------------------------------- */
.voices{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:900px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{padding:30px 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){
  .voice{padding:34px 34px 34px 0;border-bottom:0;border-right:1px solid var(--line)}
  .voice:last-child{border-right:0;padding-right:0}
  .voice:not(:first-child){padding-left:34px}
}
/* Variante mit Video. Die dreispaltige Basis oben tragen /training-video und
   /termin-vorbereitung, dort stehen nur Zahlen. Sobald ein Player dazukommt,
   passen drei Spalten nicht mehr: jede Stimme wird eine eigene Zeile mit
   Video links und Text rechts. */
.voices--video{grid-template-columns:1fr;border-top:0}
@media(min-width:900px){.voices--video{grid-template-columns:1fr}}
.voices--video .voice{
  display:grid;gap:clamp(24px,3.4vw,44px);align-items:center;
  padding:clamp(26px,3.4vw,38px) 0;border-bottom:1px solid var(--line);
}
.voices--video .voice:first-child{border-top:1px solid var(--line)}
@media(min-width:820px){
  .voices--video .voice{grid-template-columns:1.1fr 1fr;padding-right:0;padding-left:0;border-right:0}
  .voices--video .voice:not(:first-child){padding-left:0}
  /* Jede zweite Stimme spiegeln, sonst liest sich die Seite wie eine Tabelle. */
  .voices--video .voice:nth-child(even) .voice__media{order:2}
}
.voices--video .voice__stat{margin-top:0}

.voice__stat{
  font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.05;
  letter-spacing:-.02em;margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.voice__unit{
  font-size:.9375rem;font-weight:600;color:var(--text-mute);
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px;
}
.voice__quote{font-size:1.0625rem;line-height:1.6;margin-bottom:16px}
.voice__who{font-size:.9375rem;line-height:1.55;color:var(--text-mute)}
.voice__who strong{display:block;color:var(--text);font-weight:600}

/* --- Über-Bereich: Bild links, Text rechts ---------------------------- */
.about{
  display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(26px,4vw,56px);align-items:center;
}
@media(max-width:820px){
  .about{grid-template-columns:1fr;gap:28px}
  .about__media{max-width:320px}
}
.about__media img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--sh-2)}
.about h2{margin-bottom:18px}

/* --- Hinweis-Box ------------------------------------------------------ */
.note{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 20px;background:var(--sandgrau);
  border-left:2px solid var(--schwarz);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9375rem;line-height:1.55;
}
.note svg{flex:none;margin-top:3px}
.section--soft .note{background:var(--weiss)}

/* Sichtbarer TODO-Marker: fehlendes Material darf nicht unsichtbar sein.
   Bewusst monochrom, damit die Palette nicht gebrochen wird. */
mark.todo{
  background:var(--hellgrau);color:var(--schwarz);
  border:1px dashed var(--anthrazit);border-radius:var(--radius);
  padding:1px 7px;font-size:.85em;font-weight:600;
}

/* --- FAQ -------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0;min-height:44px;
  font-size:clamp(17px,1.5vw,20px);font-weight:600;line-height:1.4;
  list-style:none;cursor:pointer;transition:color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--anthrazit)}
.faq__sign{flex:none;position:relative;width:18px;height:18px;margin-top:5px}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--schwarz);
  transform:translate(-50%,-50%);
  transition:transform var(--t-int) var(--ease),opacity var(--t-int) var(--ease);
}
.faq__sign::before{width:16px;height:1.5px}
.faq__sign::after{width:1.5px;height:16px}
.faq details[open] .faq__sign::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.faq__answer{padding:0 0 24px;max-width:66ch;color:var(--text-mute)}
.faq__answer p+p{margin-top:14px}

/* --- Abschluss-CTA ---------------------------------------------------- */
.closing{text-align:center}
.closing h2{margin-bottom:18px}
.closing .lead{margin:0 auto 30px}

/* --- Footer ----------------------------------------------------------- */
.tk-footer{background:var(--schwarz);color:var(--text-on-dark-mute);padding:48px 0 40px}
.tk-footer__top{
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
  font-size:.875rem;padding-bottom:28px;border-bottom:1px solid var(--line-on-dark);
}
.tk-footer img{width:150px;height:auto}
.tk-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.tk-footer a{display:inline-flex;align-items:center;min-height:44px}
.tk-footer a:hover{color:var(--weiss)}
.tk-footer__legal{padding-top:24px;font-size:.8125rem;line-height:1.6;color:var(--grau);max-width:90ch}
.tk-footer__copy{margin-top:16px;font-size:.8125rem;color:var(--grau)}

/* --- Reveal ----------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.is-in{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;
  }
  /* Endzustand zeigen, nicht ausblenden. */
  .reveal{opacity:1;transform:none}
  .btn::before{display:none}
}