/* =====================================================================
   Abt Consulting LLC – Stylesheet
   Alle Werte kommen aus assets/design-tokens.css (erzeugt aus design-tokens.json):
   Primitive → Semantik (--color-*, --space-*, --text-*) → Komponente (--button-*, --card-*).
   Aufbau: Schrift · Basis · Zustände · Bausteine · Abschnitte · Chat · Animation · Responsive
   ===================================================================== */

/* ---------- Schrift (lokal, keine externen Anfragen) ---------- */
@font-face{font-family:"Inter Display";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/inter-display-600.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/inter-500.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/inter-600.woff") format("woff")}
/* Ersatzschrift mit angepassten Maßen: kein Springen beim Laden (CLS) */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--layout-header-h) + var(--space-3));-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--color-background);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--primitive-lineHeight-relaxed);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:calc(-1 * var(--space-16));z-index:var(--z-skip);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);text-decoration:none;font-weight:var(--primitive-fontWeight-semibold)}
.skip:focus{top:var(--space-3)}
.wrap{max-width:calc(var(--layout-max) + var(--layout-gutter) * 2);margin:0 auto;padding:0 var(--layout-gutter)}
section{padding:var(--layout-section) 0;position:relative}
.sec-alt{background:var(--color-background-alt)}
.sec-dark{background:var(--color-inverse);color:var(--color-on-inverse)}
.ic{width:var(--icon-md);height:var(--icon-md);flex:none}

/* ---------- Fokus (einheitlicher Ring nach Token-Spezifikation) ---------- */
:focus-visible{outline:var(--ring-width) solid var(--color-focus-ring);outline-offset:var(--ring-offset);border-radius:var(--space-1)}
/* Auf dunklem Grund: heller Ring (Kontrast ≥ 3:1) */
.sec-dark :focus-visible,.foot :focus-visible,.panel :focus-visible,.bot-head :focus-visible,.mock-head :focus-visible{outline-color:var(--color-focus-ring-inverse)}
a,button,summary,label,[role=button]{touch-action:manipulation}
.btn:focus-visible,.option:focus-visible,.fab:focus-visible,.social a:focus-visible{outline-offset:calc(var(--ring-offset) + 1px)}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;color:var(--color-heading);font-weight:var(--primitive-fontWeight-semibold);text-wrap:balance}
h1,h2{font-family:var(--font-display)}
h1{font-size:var(--text-h1);line-height:1.06;letter-spacing:-.036em}
h2{font-size:var(--text-h2);line-height:1.12;letter-spacing:-.03em}
h3{font-family:var(--font-body);font-size:var(--text-h3);line-height:var(--primitive-lineHeight-snug);letter-spacing:-.018em}
h1 em,h2 em{font-style:normal;color:var(--color-accent-strong)}
.sec-dark h2,.sec-dark h3{color:var(--color-on-inverse)}
.sec-dark h2 em{color:var(--color-accent)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);
  font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);line-height:1.2;letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent-text);
}
.eyebrow::before{content:"";width:var(--space-7);height:1.5px;border-radius:2px;background:var(--color-accent)}
.sec-dark .eyebrow{color:var(--color-accent)}
.lead{font-size:var(--text-lead);line-height:1.7;color:var(--color-text-muted);max-width:590px}
.sec-dark .lead{color:rgba(255,255,255,.78)}
.head{max-width:700px;margin-bottom:var(--layout-head-gap)}
.head > p{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--primitive-fontSize-lg);max-width:600px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .eyebrow{justify-content:center}
.head.center > p{margin-left:auto;margin-right:auto}

/* ---------- Buttons: Standard · Hover · Aktiv · Fokus · Deaktiviert · Laden ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  min-height:var(--button-height);padding:0 var(--button-padding-x);border-radius:var(--button-radius);border:1.5px solid transparent;
  font-size:var(--button-font-size);font-weight:var(--primitive-fontWeight-semibold);line-height:1;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;background:none;
  transition:background-color var(--motion-base) ease,color var(--motion-base) ease,border-color var(--motion-base) ease,transform var(--motion-slow) var(--motion-ease),box-shadow var(--motion-slow) var(--motion-ease);
}
.btn .ic{width:18px;height:18px}
.btn .ic-arrow{transition:transform var(--motion-slow) var(--motion-ease)}
.btn:hover .ic-arrow{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-navy{background:var(--button-bg);color:var(--button-fg);box-shadow:0 12px 24px -14px rgba(20,36,79,.7)}
.btn-navy:hover{background:var(--button-bg-hover);transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(20,36,79,.7)}
.btn-navy:active{background:var(--button-bg-active);box-shadow:none}
.btn-line{color:var(--color-primary);border-color:var(--color-border-strong)}
.btn-line:hover{border-color:var(--color-primary);background:rgba(20,36,79,.04)}
.btn-line:active{background:rgba(20,36,79,.08)}
.btn-gold{background:var(--button-gold-bg);color:var(--button-gold-fg)}
.btn-gold:hover{background:var(--button-gold-bg-hover);transform:translateY(-1px)}
.btn-sm{min-height:var(--button-height-sm);padding:0 var(--space-5);font-size:var(--text-small)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;cursor:not-allowed;box-shadow:none}
.btn[aria-busy="true"]{color:transparent;pointer-events:none}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:var(--color-on-primary);animation:spin .8s linear infinite;
}
.link{
  position:relative;display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-primary);
  font-weight:var(--primitive-fontWeight-semibold);text-decoration:none;padding-bottom:3px;
  background:linear-gradient(var(--color-accent),var(--color-accent)) 0 100%/100% 1.5px no-repeat;transition:color var(--motion-fast) ease;
}
.link::after{content:"";position:absolute;inset:calc(-1 * var(--space-2)) calc(-1 * var(--space-1))}  /* Klickfläche auf 44 px vergrößert */
.link .ic{width:var(--icon-sm);height:var(--icon-sm);transition:transform var(--motion-slow) var(--motion-ease)}
.link:hover{color:var(--color-accent-strong)}
.link:hover .ic{transform:translateX(3px)}
.link:active{color:var(--color-primary-active)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6)}

/* ---------- Kopfzeile ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:var(--z-progress);pointer-events:none;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));transform:scaleX(0);transform-origin:left}
.site-head{
  position:sticky;top:0;z-index:var(--z-header);background:rgba(247,243,236,.82);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--motion-base) ease,background-color var(--motion-base) ease,box-shadow var(--motion-base) ease;
}
.site-head.scrolled{background:rgba(247,243,236,.95);border-bottom-color:var(--color-border);box-shadow:0 10px 30px -24px rgba(12,23,51,.4)}
.nav{height:var(--layout-header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:inline-flex;align-items:center;min-height:var(--touch-min);flex:none;text-decoration:none}
.brand img{height:var(--space-11);width:auto;transition:transform var(--motion-slow) var(--motion-ease)}
.site-head.scrolled .brand img{transform:scale(.92);transform-origin:left center}
.menu{display:flex;align-items:center;gap:var(--space-7)}
.menu a:not(.btn){
  position:relative;display:inline-flex;align-items:center;min-height:var(--touch-min);
  font-size:var(--text-body-sm);font-weight:var(--primitive-fontWeight-medium);color:var(--color-text);text-decoration:none;transition:color var(--motion-fast) ease;
}
.menu a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--space-2);height:1.5px;border-radius:2px;background:var(--color-accent);
  transform:scaleX(0);transform-origin:right;transition:transform var(--motion-slow) var(--motion-ease);
}
.menu a:not(.btn):hover{color:var(--color-primary)}
.menu a:not(.btn):hover::after,.menu a.is-active::after{transform:scaleX(1);transform-origin:left}
.menu a.is-active{color:var(--color-primary)}
.menu-toggle{display:none;position:relative;width:var(--touch-min);height:var(--touch-min);margin-right:calc(-1 * var(--space-2));border:0;background:none;cursor:pointer;border-radius:var(--radius-sm)}
.menu-toggle span[aria-hidden]{position:absolute;left:11px;right:11px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--color-primary);transition:background var(--motion-fast)}
.menu-toggle span[aria-hidden]::before,.menu-toggle span[aria-hidden]::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--color-primary);transition:transform var(--motion-slow) var(--motion-ease)}
.menu-toggle span[aria-hidden]::before{top:-7px}
.menu-toggle span[aria-hidden]::after{top:7px}
.menu-toggle[aria-expanded="true"] span[aria-hidden]{background:transparent}
.menu-toggle[aria-expanded="true"] span[aria-hidden]::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span[aria-hidden]::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(44px,5.5vw,80px) 0 0;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,36,79,.10) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 55% 65% at 82% 35%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 55% 65% at 82% 35%,#000 0%,transparent 72%);
}
.hero::after{content:"";position:absolute;right:-160px;top:-200px;width:680px;height:680px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,165,107,.20),transparent 62%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-12) var(--space-18);align-items:center}
.hero h1{margin-bottom:var(--space-6)}
.hero .lead{margin-bottom:var(--space-9)}
.hero-founder{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-7)}
.hero-founder img{width:var(--space-11);height:var(--space-11);border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--color-surface),0 0 0 3px var(--color-accent)}
.hero-founder p{margin:0;font-size:var(--text-small);line-height:1.4;color:var(--color-text-muted)}
.hero-founder strong{display:block;font-size:var(--text-body-sm);color:var(--color-heading)}
.trust-row{
  /* Band mit Linie oben; Abstand oben und unten gleich, damit die vier Punkte mittig sitzen */
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-block:var(--space-8);border-top:1px solid var(--color-border);font-size:var(--text-body-sm);font-weight:var(--primitive-fontWeight-medium);color:var(--color-primary);
}
.trust-row span{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding-inline:var(--space-4);white-space:nowrap}
.trust-row span + span{border-left:1px solid var(--color-border)}
.trust-row .ic{color:var(--color-accent-text)}

/* Hero-Karte (Startseite) */
.panel{position:relative;overflow:hidden;background:var(--color-inverse);color:var(--color-on-inverse);border-radius:var(--panel-radius);padding:var(--panel-padding);box-shadow:var(--shadow-lg)}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 240px at 100% 0%,rgba(201,165,107,.22),transparent 65%)}
.panel > *{position:relative}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6)}
.panel-title h2{font-family:var(--font-body);color:var(--color-on-inverse);font-size:var(--primitive-fontSize-lg);line-height:var(--primitive-lineHeight-snug);letter-spacing:-.018em}
.panel-badge{flex:none;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid rgba(201,165,107,.45);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);color:var(--color-accent-hover)}
.panel-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.panel-steps li{display:grid;grid-template-columns:var(--space-11) minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--space-4);border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.panel-steps .n{width:var(--space-11);height:var(--space-11);border-radius:11px;display:grid;place-items:center;background:rgba(201,165,107,.15);color:var(--color-accent-hover);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--text-small)}
.panel-steps strong{display:block;margin-bottom:2px;font-weight:var(--primitive-fontWeight-semibold);color:var(--color-on-inverse);font-size:var(--primitive-fontSize-base)}
.panel-steps span{display:block;font-size:var(--text-small);line-height:var(--primitive-lineHeight-normal);color:rgba(255,255,255,.74)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.chips span{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:rgba(255,255,255,.08);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-medium);color:rgba(255,255,255,.92)}

/* ---------- Zwei Spalten mit Text ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10) var(--space-18);align-items:center}
.split-text p{color:var(--color-text-muted);font-size:var(--primitive-fontSize-lg)}
.split-text .link{margin-top:var(--space-6)}

/* ---------- Karten ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.card{
  position:relative;overflow:hidden;background:var(--card-bg);border:1px solid var(--color-border);border-radius:var(--card-radius);
  padding:var(--card-padding);box-shadow:var(--shadow-sm);
  transition:transform var(--motion-slow) var(--motion-ease),box-shadow var(--motion-slow) var(--motion-ease),border-color var(--motion-base) ease;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--motion-ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(201,165,107,.45)}
.card:hover::before{transform:scaleX(1)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.ic-box{width:var(--icon-box);height:var(--icon-box);border-radius:12px;display:grid;place-items:center;background:var(--color-accent-soft);color:var(--color-accent-text);transition:background-color var(--motion-slow) ease,color var(--motion-slow) ease}
.ic-box .ic{width:var(--icon-lg);height:var(--icon-lg)}
.card:hover .ic-box{background:var(--color-primary);color:var(--color-accent)}
.num{font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.08em;color:var(--color-accent-text)}
.cat{display:block;margin-bottom:var(--space-2);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-text)}
.card h3{margin-bottom:var(--space-2)}
.card p{color:var(--color-text-muted);font-size:var(--text-body-sm)}
.checks{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;gap:var(--space-3)}
.card .checks{padding-top:var(--space-5);border-top:1px solid var(--color-border)}
.checks li{position:relative;padding-left:var(--space-8);font-size:var(--text-body-sm);line-height:1.55;color:var(--color-text)}
.checks li::before{
  content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;border-radius:50%;
  background:var(--color-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A2B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);margin-top:var(--space-8);color:var(--color-text-muted);font-size:var(--text-body-sm)}

/* ---------- Zitat ---------- */
.quote-sec{padding:clamp(56px,6vw,84px) 0;overflow:hidden}
.quote-sec::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:420px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(ellipse,rgba(201,165,107,.14),transparent 65%)}
.quote-wrap{position:relative;max-width:900px;margin:0 auto;text-align:center}
.quote-mark{display:block;width:var(--space-10);height:var(--space-10);margin:0 auto var(--space-5);color:var(--color-accent)}
.quote{margin:0;font-family:var(--font-display);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--text-quote);line-height:1.28;letter-spacing:-.03em;color:var(--color-on-inverse);text-wrap:balance}
.quote em{font-style:normal;color:var(--color-accent)}
.quote-by{display:inline-block;margin-top:var(--space-6);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent)}

/* ---------- Vorgehen (Zeitleiste) ---------- */
.phases{--cols:4;--gap:var(--space-8);position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.phases.cols-3{--cols:3}
.phases::before,.phases::after{content:"";position:absolute;left:21px;right:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 21px);top:20px;height:2px;border-radius:2px}
.phases::before{background:var(--color-border)}
.phases::after{background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--motion-ease) .15s}
.phases.in::after{transform:scaleX(1)}
.phase{position:relative}
@supports (grid-template-rows:subgrid){
  /* Jede Spalte nutzt dieselben Zeilen: Kreis, Überschrift, Text, Stichpunkte beginnen überall auf gleicher Höhe */
  .phases{grid-auto-rows:auto}
  .phase{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
  .phase > *{align-self:start}
}
.step-n{
  position:relative;z-index:var(--z-raised);display:grid;place-items:center;width:42px;height:42px;margin-bottom:var(--space-6);border-radius:50%;
  background:var(--color-primary);color:var(--color-accent);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--text-small);box-shadow:0 0 0 6px var(--color-background);
}
.sec-alt .step-n{box-shadow:0 0 0 6px var(--color-background-alt)}
.phase .cat{margin-bottom:var(--space-1)}
.phase h3{margin-bottom:var(--space-2)}
.phase p{color:var(--color-text-muted);font-size:var(--text-body-sm)}
.phase .checks{margin-top:var(--space-4);gap:var(--space-2)}
.phase .checks li{font-size:var(--text-small);color:var(--color-text-muted)}
.after-cta{margin-top:var(--space-12)}

/* ---------- Ansprechpartner ---------- */
.person{
  display:grid;grid-template-columns:var(--portrait-width) minmax(0,1fr);gap:var(--space-14);align-items:center;
  padding:var(--space-10);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
}
.portrait{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:var(--radius-md)}
.portrait img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--motion-ease)}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(12,23,51,.08)}
.person:hover .portrait img{transform:scale(1.03)}
.person h3{font-family:var(--font-display);font-size:var(--primitive-fontSize-3xl);letter-spacing:-.03em}
.role{display:block;margin:var(--space-2) 0 var(--space-5);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent-text)}
.person p{color:var(--color-text-muted)}
.motto{
  margin:var(--space-6) 0 0;padding:var(--space-5) var(--space-6);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--color-accent-soft);font-family:var(--font-display);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--primitive-fontSize-lg);line-height:var(--primitive-lineHeight-normal);letter-spacing:-.015em;color:var(--color-heading);
}
.person-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-7)}
.person-actions .social{margin-left:auto}

/* ---------- Social-Symbole (44 px Touch-Fläche) ---------- */
.social{display:flex;align-items:center;gap:var(--space-2)}
.social a{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border-radius:50%;text-decoration:none;transition:background-color var(--motion-base) ease,border-color var(--motion-base) ease,color var(--motion-base) ease,transform var(--motion-slow) var(--motion-ease)}
.social svg{width:18px;height:18px}
.social.on-light a{border:1px solid var(--color-border-strong);color:var(--color-primary)}
.social.on-light a:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary);transform:translateY(-2px)}
.social.on-dark a{border:1px solid rgba(255,255,255,.22);color:var(--color-on-inverse)}
.social.on-dark a:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-inverse-deep);transform:translateY(-2px)}
.social a:active{transform:scale(.95)}

/* ---------- Produkt-Blöcke (KI-Seite) ---------- */
.product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-18);align-items:center;padding:var(--space-16) 0;border-top:1px solid var(--color-border)}
.head + .product{padding-top:0;border-top:0}
.product:last-child{padding-bottom:0}
.product.flip .product-text{order:2}
.product-title{font-family:var(--font-display);font-size:clamp(1.7rem,2.5vw,2.2rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:var(--space-4)}
.product-text > p{color:var(--color-text-muted)}
.product-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7)}
.product-note{margin-top:var(--space-4);font-size:var(--text-small);color:var(--color-text-muted)}

/* Beispiel-Chat */
.mock{overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.mock-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-inverse);color:var(--color-on-inverse)}
.avatar{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(201,165,107,.18);color:var(--color-accent)}
.avatar .ic{width:var(--icon-md);height:var(--icon-md)}
.mock-head strong{display:block;font-size:var(--text-body-sm);font-weight:var(--primitive-fontWeight-semibold)}
.mock-head small,.status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-label);color:rgba(255,255,255,.78)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--color-online);flex:none}
.mock-body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6) var(--space-5);background:var(--color-surface-muted);min-height:250px}
.bubble{max-width:84%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-body-sm);line-height:var(--primitive-lineHeight-normal)}
.bubble.bot{align-self:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-bottom-left-radius:6px}
.bubble.user{align-self:flex-end;background:var(--color-primary);color:var(--color-on-primary);border-bottom-right-radius:6px}
.mock-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-label);color:var(--color-text-muted)}
.mock-input{flex:1;padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:var(--color-surface-muted);border:1px solid var(--color-border);color:var(--color-text-muted)}
.typing-dots{align-self:flex-start;display:inline-flex;gap:5px;padding:var(--space-4);border-radius:var(--radius-md);border-bottom-left-radius:6px;background:var(--color-surface);border:1px solid var(--color-border)}
.typing-dots i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);animation:dots 1s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}

/* Beispiel-Telefonat */
.phone-card{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}
.phone-top{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-border)}
.phone-top .avatar{background:var(--color-primary)}
.phone-top strong{display:block;font-size:var(--text-body-sm);color:var(--color-heading)}
.phone-top .status{color:var(--color-text-muted)}
.wave{display:inline-flex;align-items:center;gap:3px;height:var(--space-5);margin-left:auto}
.wave i{width:3px;height:100%;border-radius:2px;background:var(--color-accent);animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
.phone-line{margin:0 0 var(--space-3);padding:var(--space-3) var(--space-4);border-radius:14px;background:var(--color-surface-muted);border:1px solid var(--color-border);font-size:var(--text-body-sm);line-height:var(--primitive-lineHeight-normal)}
.phone-line .who{display:block;margin-bottom:3px;font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-text)}
.phone-line.user{margin-left:var(--space-10);background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}
.phone-line.user .who{color:var(--color-accent-hover)}
.phone-line.saved{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:0;background:var(--color-success-soft);border-color:var(--color-success-border);color:var(--color-success-text)}
.phone-line.saved .ic{width:18px;height:18px;margin-top:2px;color:var(--color-success)}
.example-note{margin-top:var(--space-4);font-size:var(--text-label);color:var(--color-text-muted);text-align:center}

/* ---------- Fragen ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--color-border)}
.faq details{border-bottom:1px solid var(--color-border)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--touch-min);padding:var(--space-5) 0;cursor:pointer;list-style:none;
  font-size:var(--primitive-fontSize-lg);font-weight:var(--primitive-fontWeight-semibold);line-height:1.4;letter-spacing:-.012em;color:var(--color-heading);transition:color var(--motion-fast) ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--color-accent-strong)}
.pm{position:relative;flex:none;width:var(--space-8);height:var(--space-8);border-radius:50%;border:1px solid var(--color-border-strong);transition:transform var(--motion-slow) var(--motion-ease),background-color var(--motion-base) ease,border-color var(--motion-base) ease}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:2px;background:var(--color-primary);transition:background-color var(--motion-base) ease}
.pm::after{transform:rotate(90deg)}
.faq summary:hover .pm{border-color:var(--color-primary)}
.faq details[open] .pm{transform:rotate(45deg);background:var(--color-primary);border-color:var(--color-primary)}
.faq details[open] .pm::before,.faq details[open] .pm::after{background:var(--color-on-primary)}
.faq details p{max-width:68ch;padding:0 var(--space-14) var(--space-6) 0;color:var(--color-text-muted)}
.faq details[open] p{animation:faqIn .5s var(--motion-ease)}
.faq a{color:var(--color-primary);font-weight:var(--primitive-fontWeight-semibold)}

/* ---------- Kontakt-Optionen ---------- */
.final{overflow:hidden}
.final::before{content:"";position:absolute;right:-200px;top:-260px;width:720px;height:720px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(201,165,107,.16),transparent 62%)}
.final-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12) var(--space-18);align-items:center}
.final h2{margin-bottom:var(--space-5)}
.final .note{margin-top:var(--space-6);font-size:var(--text-body-sm);color:rgba(255,255,255,.72)}
.final .note a{color:var(--color-on-inverse);text-decoration-color:rgba(201,165,107,.7);text-underline-offset:3px}
.options{display:grid;gap:var(--space-3)}
.option{
  display:flex;align-items:center;gap:var(--space-5);width:100%;min-height:var(--space-20);padding:var(--space-5);border-radius:var(--radius-md);text-align:left;text-decoration:none;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:var(--color-on-inverse);
  transition:background-color var(--motion-base) ease,border-color var(--motion-base) ease,transform var(--motion-slow) var(--motion-ease);
}
.option:hover{background:rgba(255,255,255,.09);border-color:rgba(201,165,107,.55);transform:translateX(4px)}
.option:active{transform:translateX(2px) scale(.99);background:rgba(255,255,255,.12)}
.o-ic{flex:none;display:grid;place-items:center;width:var(--space-12);height:var(--space-12);border-radius:12px;background:rgba(201,165,107,.15);color:var(--color-accent)}
.o-ic svg{width:var(--icon-lg);height:var(--icon-lg)}
.o-text{min-width:0}
.option strong{display:block;font-size:var(--primitive-fontSize-lg);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:-.01em}
.option small{display:block;margin-top:2px;font-size:var(--text-small);color:rgba(255,255,255,.72)}
.option .o-arrow{flex:none;width:var(--icon-md);height:var(--icon-md);margin-left:auto;color:rgba(255,255,255,.55);transition:transform var(--motion-slow) var(--motion-ease),color var(--motion-base) ease}
.option:hover .o-arrow{transform:translateX(3px);color:var(--color-accent)}
.option.primary{background:var(--button-gold-bg);border-color:var(--button-gold-bg);color:var(--button-gold-fg)}
.option.primary:hover{background:var(--button-gold-bg-hover);border-color:var(--button-gold-bg-hover)}
.option.primary .o-ic{background:rgba(12,23,51,.10);color:var(--button-gold-fg)}
.option.primary small{color:var(--color-inverse-deep);opacity:.85}
.option.primary .o-arrow{color:var(--button-gold-fg)}

/* ---------- Fußzeile ---------- */
.foot{background:var(--color-inverse-deep);color:rgba(255,255,255,.72);padding:var(--space-18) 0 var(--space-8);font-size:var(--text-body-sm)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-10)}
.foot-brand{display:inline-block}
.foot-brand img{height:var(--space-11);width:auto}
.foot-desc{max-width:320px;margin:var(--space-5) 0 var(--space-6);line-height:1.6}
.foot-h{margin-bottom:var(--space-3);font-family:var(--font-body);line-height:1.2;font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.13em;text-transform:uppercase;color:var(--color-on-inverse)}
.foot ul{list-style:none;margin:0;padding:0;display:grid}
.foot ul a{display:inline-flex;align-items:center;min-height:var(--touch-min);color:rgba(255,255,255,.88);text-decoration:none;transition:color var(--motion-fast) ease}
.foot ul a:hover{color:var(--color-accent)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3) var(--space-8);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);font-size:var(--text-label);color:rgba(255,255,255,.62)}
.foot-bottom p{margin:0}

/* ---------- Rechtliche Seiten ---------- */
.legal{padding:clamp(48px,6vw,80px) 0 var(--layout-section)}
.legal-wrap{max-width:780px;margin:0 auto;padding:0 var(--layout-gutter)}
.legal h1{font-size:clamp(2.2rem,4.4vw,3.2rem);margin-bottom:var(--space-2)}
.legal h2{font-size:var(--primitive-fontSize-2xl);margin:var(--space-11) 0 var(--space-3)}
.legal p,.legal li{max-width:70ch;color:var(--color-text)}
.legal a:not(.btn){color:var(--color-primary);font-weight:var(--primitive-fontWeight-medium)}
.draft{margin:var(--space-6) 0 var(--space-2);padding:var(--space-4) var(--space-5);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--color-accent-soft);font-size:var(--text-body-sm)}
.draft strong{color:var(--color-heading)}
.ph{padding:0 var(--space-1);border-radius:var(--space-1);background:rgba(201,165,107,.28)}

/* ---------- Schwebende Buttons ---------- */
.fab{
  position:fixed;right:var(--fab-offset);bottom:var(--fab-offset);z-index:var(--z-fab);display:inline-flex;align-items:center;gap:var(--space-3);height:var(--fab-size);padding:0 var(--space-6) 0 var(--space-5);
  border:0;border-radius:var(--radius-full);background:var(--button-bg);color:var(--button-fg);font-size:var(--text-body-sm);font-weight:var(--primitive-fontWeight-semibold);line-height:1;text-decoration:none;cursor:pointer;
  box-shadow:0 18px 36px -12px rgba(12,23,51,.6),inset 0 0 0 1.5px rgba(201,165,107,.55);
  transition:background-color var(--motion-base) ease,transform var(--motion-slow) var(--motion-ease),opacity var(--motion-slow) ease;
}
.fab svg{width:24px;height:24px;flex:none}
.fab:hover{background:var(--button-bg-hover)}
.fab:active{background:var(--button-bg-active)}
.fab::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:ring 2.6s ease-out 1.6s 3}
.fab-badge{position:absolute;top:calc(-1 * var(--space-2));right:calc(-1 * var(--space-1));padding:2px 7px;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-inverse-deep);font-size:var(--text-label);font-weight:700;letter-spacing:.04em;line-height:1.2}
.js .fab{opacity:0;transform:translateY(16px);pointer-events:none}
.js .fab.show{opacity:1;transform:none;pointer-events:auto}
.js .fab.show:hover{transform:translateY(-2px)}
body.chat-open .fab,body.chat-open .fab.show{opacity:0;pointer-events:none;transform:translateY(16px)}

/* Hinweis-Blase neben dem Chat-Button */
.chat-teaser{
  position:fixed;right:var(--fab-offset);bottom:94px;z-index:calc(var(--z-fab) - 1);display:flex;align-items:flex-start;gap:var(--space-2);max-width:280px;padding:var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-radius:14px;border-bottom-right-radius:var(--space-1);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);
  font-size:var(--text-small);line-height:1.45;color:var(--color-text);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--motion-slow) ease,transform var(--motion-slow) var(--motion-ease);
}
.chat-teaser.show{opacity:1;transform:none;pointer-events:auto}
.chat-teaser strong{display:block;color:var(--color-heading)}
.chat-teaser button{flex:none;display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);margin:calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-2)) 0;border:0;border-radius:50%;background:none;color:var(--color-text-muted);font-size:1.15rem;line-height:1;cursor:pointer}
.chat-teaser button:hover{background:var(--color-background)}

/* Mobile Leiste */
.mobile-bar{display:none}

/* ---------- KI-Chat (Dialog) ---------- */
.bot-panel{
  position:fixed;right:var(--fab-offset);bottom:var(--fab-offset);z-index:var(--z-dialog);display:flex;flex-direction:column;overflow:hidden;padding:0;
  width:min(var(--chat-width),calc(100vw - var(--space-6)));height:min(var(--chat-height),calc(100dvh - var(--space-12)));
  border-radius:var(--chat-radius);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-xl);
  transform-origin:bottom right;animation:panelIn var(--motion-slow) var(--motion-ease);
}
.bot-panel[hidden]{display:none}
.bot-panel.closing{animation:panelOut var(--motion-exit) ease-in forwards}
.bot-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);background:var(--color-inverse);color:var(--color-on-inverse)}
.bot-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:var(--primitive-fontSize-base);font-weight:var(--primitive-fontWeight-semibold);line-height:1.3;color:var(--color-on-inverse)}
.tag-ki{padding:1px 7px;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-inverse-deep);font-size:var(--text-label);font-weight:700;letter-spacing:.05em}
.bot-close{margin-left:auto;display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--color-on-inverse);font-size:1.3rem;line-height:1;cursor:pointer;transition:background-color var(--motion-fast) ease}
.bot-close:hover{background:rgba(255,255,255,.16)}
.bot-close:active{background:rgba(255,255,255,.24)}
.bot-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) var(--space-4);background:var(--color-surface-muted);scroll-behavior:smooth}
.msg{max-width:86%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-body-sm);line-height:var(--primitive-lineHeight-normal);white-space:pre-wrap;overflow-wrap:anywhere;animation:msgIn .35s var(--motion-ease)}
.msg.bot{align-self:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-bottom-left-radius:6px}
.msg.user{align-self:flex-end;background:var(--color-primary);color:var(--color-on-primary);border-bottom-right-radius:6px}
.msg-actions{align-self:flex-start;display:flex;flex-wrap:wrap;gap:var(--space-2);max-width:92%;animation:msgIn .35s var(--motion-ease)}
.msg-actions a,.msg-actions button{
  display:inline-flex;align-items:center;gap:6px;min-height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-primary);
  background:var(--color-surface);color:var(--color-primary);font-size:var(--text-small);font-weight:var(--primitive-fontWeight-semibold);text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease;
}
.msg-actions a:hover,.msg-actions button:hover{background:var(--color-primary);color:var(--color-on-primary)}
.msg-actions .primary{background:var(--color-primary);color:var(--color-on-primary)}
.msg-actions .primary:hover{background:var(--color-primary-hover)}
.msg-actions a:active,.msg-actions button:active{background:var(--color-primary-active);color:var(--color-on-primary)}
.bot-quick{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0 var(--space-4) var(--space-3);background:var(--color-surface-muted)}
.bot-quick[hidden]{display:none}
.bot-quick button,.msg-next button{
  min-height:var(--touch-min);padding:0 var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border-strong);background:var(--color-surface);
  color:var(--color-primary);font-size:var(--text-small);font-weight:var(--primitive-fontWeight-medium);cursor:pointer;
  transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease;
}
.msg-next button:hover,.bot-quick button:hover{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}
.msg-next button:active,.bot-quick button:active{background:var(--color-primary-active)}
.bot-input{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--color-border);background:var(--color-surface)}
.bot-input input{flex:1;min-width:0;min-height:var(--touch-min);padding:0 var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);font:inherit;font-size:16px;color:var(--color-text);background:var(--color-surface)}
.bot-input input::placeholder{color:var(--color-text-muted)}
.bot-input input:focus{outline:var(--ring-width) solid var(--color-focus-ring);outline-offset:0;border-color:transparent}
.bot-input button{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);flex:none;border:0;border-radius:50%;background:var(--button-bg);color:var(--button-fg);cursor:pointer;transition:background-color var(--motion-fast) ease}
.bot-input button:hover{background:var(--button-bg-hover)}
.bot-input button:active{background:var(--button-bg-active)}
.bot-input button:disabled{opacity:.5;cursor:not-allowed}
.bot-input button .ic{width:18px;height:18px}
.bot-lead{max-height:62%;overflow-y:auto;padding:var(--space-4);border-top:1px solid var(--color-border);background:var(--color-surface)}
.bot-lead[hidden]{display:none}
/* Formular offen: volle Höhe, Chat-Eingabe ausgeblendet, Verlauf kompakt */
.bot-panel.lead-open .bot-input,.bot-panel.lead-open .bot-quick{display:none}
.bot-panel.lead-open .bot-log{flex:0 1 auto;max-height:28%}
.bot-panel.lead-open .bot-lead{flex:1 1 auto;max-height:none}
.bot-lead-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1)}
.bot-lead h3{font-size:var(--primitive-fontSize-base);color:var(--color-heading)}
.bot-lead-close{display:grid;place-items:center;width:var(--touch-min);height:var(--touch-min);margin:calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;border:0;border-radius:50%;background:none;color:var(--color-text-muted);font-size:1.2rem;cursor:pointer}
.bot-lead-close:hover{background:var(--color-background)}
.bot-lead p{margin:0 0 var(--space-3);font-size:var(--text-small);color:var(--color-text-muted)}
.bot-lead input,.bot-lead textarea{display:block;width:100%;min-height:var(--touch-min);margin-bottom:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font:inherit;font-size:16px;color:var(--color-text)}
.bot-lead input::placeholder,.bot-lead textarea::placeholder{color:var(--color-text-muted)}
.bot-lead input:focus,.bot-lead textarea:focus{outline:var(--ring-width) solid var(--color-focus-ring);outline-offset:0;border-color:transparent}
.bot-lead [aria-invalid="true"]{border-color:var(--color-error);border-width:2px}
.field-label{display:block;margin:0 0 var(--space-1);font-size:var(--text-small);font-weight:var(--primitive-fontWeight-semibold);color:var(--color-heading)}
.req{color:var(--color-error);margin-left:2px}
.field-err{margin:calc(-1 * var(--space-1)) 0 var(--space-2);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-medium);color:var(--color-error)}
.field-err:empty{display:none}
.bot-lead .field-err{margin:calc(-1 * var(--space-1)) 0 var(--space-2);color:var(--color-error)}
.req-note{margin:0 0 var(--space-3);font-size:var(--text-label);color:var(--color-text-muted)}
.consent{display:flex;align-items:flex-start;gap:var(--space-3);margin:var(--space-1) 0 var(--space-3);font-size:var(--text-label);line-height:1.45;color:var(--color-text-muted);cursor:pointer}
.consent input{flex:none;width:20px;height:20px;min-height:0;margin:0;accent-color:var(--color-primary)}
.consent a{color:var(--color-primary)}
.bot-lead .btn{width:100%;min-height:var(--touch-min);font-size:var(--text-small)}
.form-msg{min-height:1.2em;margin:var(--space-2) 0 0;font-size:var(--text-small);color:var(--color-primary)}
.form-msg.err{color:var(--color-error)}

/* ---------- Kundenstimmen ---------- */
.stats{list-style:none;margin:0 0 var(--space-10);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.stat{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-7) var(--space-7) var(--space-6);border-radius:var(--radius-md);background:var(--color-inverse);color:var(--color-on-inverse);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 160px at 100% 0%,rgba(201,165,107,.22),transparent 70%)}
.stat > *{position:relative}
.stat-num{font-family:var(--font-display);font-weight:var(--primitive-fontWeight-semibold);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;letter-spacing:-.035em;color:var(--color-accent-hover);font-variant-numeric:tabular-nums}
.stat-label{font-size:var(--text-body-sm);line-height:var(--primitive-lineHeight-normal);color:rgba(255,255,255,.88)}
.stat-src{margin-top:auto;padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.12);font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap)}
.reviews.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.review{margin:0;display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-7);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:transform var(--motion-slow) var(--motion-ease),box-shadow var(--motion-slow) var(--motion-ease),border-color var(--motion-base) ease}
.review:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(201,165,107,.45)}
.review-mark{width:var(--space-7);height:var(--space-7);color:var(--color-accent)}
.review blockquote{margin:0;flex:1}
.review blockquote p{font-size:var(--text-body-sm);line-height:var(--primitive-lineHeight-relaxed);color:var(--color-text)}
.review figcaption{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--color-border);font-size:var(--text-label);color:var(--color-text-muted)}
.review figcaption strong{display:block;font-size:var(--text-body-sm);color:var(--color-heading)}
.review-avatar{flex:none;display:grid;place-items:center;width:var(--space-10);height:var(--space-10);border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-text);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--text-body-sm)}
@media (max-width:1080px){ .stats,.reviews{grid-template-columns:1fr 1fr} .stats .stat:last-child,.reviews .review:last-child:nth-child(odd){grid-column:1/-1} }
@media (max-width:860px){ .stats,.reviews,.reviews.cols-2{grid-template-columns:1fr} .stats .stat:last-child,.reviews .review:last-child:nth-child(odd){grid-column:auto} .stat{padding:var(--space-6)} .review{padding:var(--space-6)} }

/* ---------- Leistungsliste (statt Karten-Raster) ---------- */
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-strong)}
.service{
  position:relative;display:grid;grid-template-columns:var(--space-16) minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-4) var(--space-10);
  align-items:start;padding:var(--space-8) 0;border-bottom:1px solid var(--color-border-strong);
}
.service::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--motion-ease)}
.service:hover::before{transform:scaleX(1)}
.service-n{font-family:var(--font-display);font-weight:var(--primitive-fontWeight-semibold);font-size:var(--primitive-fontSize-2xl);line-height:1;letter-spacing:-.02em;color:var(--color-accent-text);font-variant-numeric:tabular-nums;padding-top:var(--space-1)}
.service-head .cat{margin-bottom:var(--space-2)}
.service h3{font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;letter-spacing:-.025em}
.service-body p{max-width:60ch;color:var(--color-text-muted)}
/* Gründer-Überschrift */
.person-title{font-size:clamp(1.75rem,2.8vw,2.4rem);margin-bottom:var(--space-2)}
/* Hinweis unter Kennzahlen */
.stats{margin-bottom:var(--space-4)}
.stats-note{margin:0 0 var(--space-10);font-size:var(--text-label);color:var(--color-text-muted)}
/* Zeilenlänge auch auf dem Tablet begrenzen */
main p{max-width:65ch}
.center p,[class*="center"] > p{margin-inline:auto}
@media (max-width:860px){
  .service{grid-template-columns:var(--space-12) minmax(0,1fr);row-gap:var(--space-3)}
  .service-body{grid-column:2}
}
@media (max-width:560px){
  .service{grid-template-columns:1fr;padding:var(--space-7) 0}
  .service-body{grid-column:auto}
}

/* ---------- Animationen ---------- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes dots{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-4px);opacity:1}}
@keyframes wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(201,165,107,.5)}80%,100%{box-shadow:0 0 0 16px rgba(201,165,107,0)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes panelOut{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes menuOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Einblenden beim Scrollen */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity var(--motion-reveal) var(--motion-ease),transform var(--motion-reveal) var(--motion-ease)}
.js .reveal.in{opacity:1;transform:none}

/* Auftritt im Hero beim Laden */
.js .hero-intro > *{animation:rise .95s var(--motion-ease) both}
.js .hero-intro > :nth-child(2){animation-delay:.08s}
.js .hero-intro > :nth-child(3){animation-delay:.16s}
.js .hero-intro > :nth-child(4){animation-delay:.24s}
.js .hero-intro > :nth-child(5){animation-delay:.32s}
.js .hero-visual{animation:rise 1.1s var(--motion-ease) .2s both}
.js .trust-row{animation:rise .95s var(--motion-ease) .38s both}

/* Beispiele bauen sich nacheinander auf */
.js [data-sequence] .bubble,.js [data-sequence] .phone-line,.js [data-sequence] .panel-steps li{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .6s var(--motion-ease)}
.js [data-sequence] .shown,.js [data-sequence] .panel-steps li.shown{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{max-width:none}
  .split,.final-grid{grid-template-columns:1fr}
  .split{align-items:start}
  .person{grid-template-columns:240px minmax(0,1fr);gap:var(--space-9);padding:var(--space-8)}
  .product{grid-template-columns:1fr;gap:var(--space-10);padding:var(--space-14) 0}
  .product.flip .product-text{order:0}
  .product .mock,.product .phone-card{max-width:560px}
  .phases{--cols:2;row-gap:var(--space-10)}
  .phases.cols-3{--cols:3}
  .phases:not(.cols-3)::before,.phases:not(.cols-3)::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-5);padding-block:var(--space-7)}
  .trust-row span{white-space:normal;justify-content:flex-start}
  .trust-row span:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:860px){
  :root{--layout-header-h:66px;--layout-gutter:20px}
  html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .menu-toggle{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-1) var(--layout-gutter) var(--space-6);background:var(--color-background);border-bottom:1px solid var(--color-border);box-shadow:0 24px 40px -28px rgba(12,23,51,.35);
  }
  .menu.open{display:flex;animation:msgIn .35s var(--motion-ease)}
  .menu.open.closing{animation:menuOut var(--motion-exit) ease-in forwards}
  .menu a:not(.btn){min-height:52px;border-bottom:1px solid var(--color-border);font-size:var(--primitive-fontSize-base)}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:var(--space-5);min-height:var(--button-height)}
  .brand img{height:var(--space-9)}
  body:has(.mobile-bar) .foot{padding-bottom:calc(var(--space-8) + 76px + env(safe-area-inset-bottom))}
  .mobile-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);padding:var(--space-3) var(--layout-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    background:rgba(247,243,236,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--color-border);
    transform:translateY(110%);visibility:hidden;transition:transform var(--motion-exit) ease-in,visibility 0s linear var(--motion-exit);
  }
  /* Leiste erst zeigen, wenn der Hero-Button aus dem Bild ist – nie zwei Hauptbuttons gleichzeitig */
  .mobile-bar.show{transform:none;visibility:visible;transition:transform .35s var(--motion-ease),visibility 0s}
  .mobile-bar .btn{width:100%;min-height:var(--button-height)}
  body.chat-open .mobile-bar{display:none}
  .fab{--fab-offset:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom));transition:background-color var(--motion-base) ease,transform var(--motion-slow) var(--motion-ease),opacity var(--motion-slow) ease,bottom .35s var(--motion-ease);width:var(--fab-size);padding:0;justify-content:center}
  body.bar-on .fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  .fab-label{display:none}
  .chat-teaser{display:none}
  .bot-panel{right:var(--space-3);left:var(--space-3);bottom:var(--space-3);width:auto;height:calc(100dvh - var(--space-6));max-height:680px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .phases.cols-3{--cols:1}
  .phases.cols-3::before,.phases.cols-3::after{display:none}
  .person{grid-template-columns:1fr;padding:var(--space-6)}
  .portrait{max-width:var(--portrait-width)}
  .person-actions .social{margin-left:0}
}
@media (max-width:560px){
  body{font-size:var(--primitive-fontSize-base)}
  h1{font-size:clamp(2.1rem,9.4vw,2.6rem)}
  .hero .lead{margin-bottom:var(--space-7)}
  .cta-row .btn{width:100%}
  .trust-row{grid-template-columns:1fr;row-gap:var(--space-3);padding-block:var(--space-6)}
  .trust-row span{border-left:0;padding-inline:0}
  .panel{padding:var(--space-6)}
  .card{padding:var(--space-7) var(--space-6)}
  .phases{--cols:1}
  .faq details p{padding-right:0}
  .option{padding:var(--space-4)}
  .o-ic{width:var(--space-11);height:var(--space-11)}
  .foot-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .foot-bottom{margin-top:var(--space-10)}
}

/* Tablet: aufklappbares Menü schon ab 1080 px, damit die Kopfzeile nie überläuft */
@media (max-width:1080px){
  .menu-toggle{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-1) var(--layout-gutter) var(--space-6);background:var(--color-background);border-bottom:1px solid var(--color-border);box-shadow:0 24px 40px -28px rgba(12,23,51,.35);
  }
  .menu.open{display:flex;animation:msgIn .35s var(--motion-ease)}
  .menu.open.closing{animation:menuOut var(--motion-exit) ease-in forwards}
  .menu a:not(.btn){min-height:52px;border-bottom:1px solid var(--color-border);font-size:var(--primitive-fontSize-base)}
  .menu a:not(.btn)::after{display:none}
  .menu .btn{margin-top:var(--space-5);min-height:var(--button-height)}
}

/* Reduzierte Bewegung: alles sofort sichtbar, keine Animation */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal,.js [data-sequence] .bubble,.js [data-sequence] .phone-line,.js [data-sequence] .panel-steps li{opacity:1;transform:none}
  .phases::after{transform:scaleX(1)}
  .progress{display:none}
}
main:focus{outline:none}
.legal h1,.legal h2{overflow-wrap:break-word;hyphens:manual}
/* Reflow: nichts darf bei 320 px oder mit größerem Textabstand seitlich überstehen */
.product > *,.person > *{min-width:0}
@media (max-width:420px){.btn{white-space:normal;text-align:center}}

/* Hinweis unter dem Hero-Button */
.cta-note{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 0;font-size:var(--text-small);color:var(--color-text-muted)}
.cta-note svg{width:16px;height:16px;flex:none;color:var(--color-accent-text)}
.legal .cta-row{margin-top:var(--space-6)}

/* Folge-Themen im Chat */
.msg-next{align-self:stretch;display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:var(--space-1);animation:msgIn .35s var(--motion-ease)}
.msg-next-label{flex-basis:100%;margin:0;font-size:var(--text-label);font-weight:var(--primitive-fontWeight-semibold);color:var(--color-text-muted)}
.msg-next button{text-align:left;line-height:1.3;padding-block:var(--space-2)}
.msg-next button.back{border-style:dashed;color:var(--color-text-muted)}