/* ==========================================================================
   /agentic-coding/ · Entwurf 17.10.2026 (Karl)
   Lädt NACH bauhaus.css. Nutzt nur die vorhandene Palette und Montserrat.
   bg #0a0d12 · section #0e1219 · card #131820 · card2 #1c2230 · lime #b8d44a · text #eef0f4 · muted #9aa7b5
   ========================================================================== */
.ac-page{
  --ac-card:#131820; --ac-card2:#1c2230; --ac-line:rgba(255,255,255,.08); --ac-line2:rgba(255,255,255,.16);
  --ac-text:#eef0f4; --ac-sec-text:rgba(238,240,244,.78); --ac-muted:#9aa7b5; --ac-lime:#b8d44a;
  /* Abstände wachsen mit dem Viewport (1440 → 1920 spürbar mehr Luft) */
  --bh-sec:clamp(72px,2.5vw + 6vh,176px);          /* Section oben/unten */
  --ac-gap:clamp(48px,6vw - 16px,128px);            /* Spaltenabstand Zweispalter */
  --ac-stack:clamp(28px,1.2vw + 2.4vh,64px);        /* Kopf → Inhalt */
  --ac-pad:clamp(24px,1vw + 1.2vh,40px);            /* Karten-Innenabstand */
  --ac-cardgap:clamp(16px,1.6vw,32px);              /* Kartenabstand */
  --ac-ease:cubic-bezier(.22,1,.36,1);              /* Einblenden */
  --ac-draw-ease:cubic-bezier(.65,0,.35,1);         /* Linien */
}
.ac-page .content p,.ac-page .content li{font-size:clamp(1rem,.94rem + .2vw,1.125rem)}
.ac-page .bh-sec :is(h2.bh-n){font-size:clamp(1.75rem,1rem + 1.9vw,2.75rem);max-width:20ch;margin-bottom:var(--ac-stack)}
.ac-page .content h3{margin:0}
.ac-page .content ul,.ac-page .content ol{list-style:none;margin:0;padding:0}
.ac-page .content li{margin:0;padding:0}
.ac-page .content p{margin-bottom:0}
.ac-page .content p+p{margin-top:1.1em}
.ac-page strong{color:var(--ac-text);font-weight:700}

/* ---------- Hero: 7/5, H1 sofort sichtbar ---------- */
.ac-hero{padding-top:clamp(32px,4vh,64px)!important;padding-bottom:clamp(48px,6vh,96px)!important}
.ac-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--ac-gap);align-items:center;max-width:var(--bh-max);width:100%}
.ac-kicker{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-muted);margin-bottom:clamp(16px,2.4vh,28px)!important;display:flex;align-items:center;gap:14px}
.ac-kicker::before{content:"";width:32px;height:2px;background:var(--ac-lime);flex:none}
.ac-hero h1 .nw{white-space:nowrap}
.ac-hero h1{font-size:clamp(2.25rem,1.2rem + 2.7vw,3.5rem)!important;line-height:1.08!important;max-width:17ch!important;letter-spacing:-.025em}
.ac-hero .lead{margin-top:clamp(20px,3vh,36px)!important;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem)!important;line-height:1.6;max-width:56ch!important}
.ac-trust{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:clamp(24px,3.4vh,40px) 0 0;padding:0}
.ac-trust li{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:var(--ac-text)}
.ac-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac-lime);flex:none}
.ac-hero-cta{margin-top:clamp(28px,4.4vh,52px)!important}
.ac-hero-art{margin:0;justify-self:end;width:100%;max-width:520px}
.ac-hero-art svg{display:block;width:100%;height:auto}

/* ---------- SVG-Sprache (nur Palette, Lime = Mensch/Linie/Punkt) ---------- */
.ac-svg{display:block;width:100%;height:auto;overflow:visible;font-family:'Montserrat',system-ui,sans-serif}
.ac-grid path{stroke:rgba(255,255,255,.045);stroke-width:1;fill:none}
.ac-shape{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5}
.ac-route{fill:none;stroke:var(--ac-text);stroke-width:2;stroke-linejoin:round;opacity:.85}
.ac-node circle{fill:var(--ac-card2);stroke:var(--ac-text);stroke-width:1.5}
.ac-ring{fill:none;stroke:var(--ac-lime);stroke-width:2}
.ac-dot{fill:var(--ac-lime)}
.ac-guide{fill:none;stroke:var(--ac-lime);stroke-width:1.5;opacity:.9}
.ac-loop{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5}
.ac-arrow{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ac-fig{fill:var(--ac-card2);stroke:var(--ac-text);stroke-width:1.5;stroke-linejoin:round}
.ac-labels text,.ac-lab-cap{font-size:13px;font-weight:500;fill:var(--ac-muted);letter-spacing:.02em}
.ac-lab-strong{font-size:15px!important;font-weight:700!important;fill:var(--ac-text)!important;letter-spacing:.06em!important;text-transform:uppercase}
.ac-lab-cap{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.ac-step{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 0}
.ac-tick{fill:var(--ac-card2);stroke:rgba(255,255,255,.5);stroke-width:1.5}
.ac-goal{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.5}
.ac-divider{stroke:var(--ac-line);stroke-width:1}
.ac-drive-shadow{fill:none;stroke:rgba(184,212,74,.12);stroke-width:10;stroke-linecap:round}
.ac-drive{fill:none;stroke:var(--ac-lime);stroke-width:2.5;stroke-linecap:round}

/* ---------- Zweispalter (Text | Grafik oder Liste) ---------- */
@media (min-width:900px){
  .ac-split{display:grid!important;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:var(--ac-gap);align-items:center}
  .ac-split>*{max-width:var(--bh-max)}
  .ac-split-list{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .ac-split-rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  #grenzen{grid-template-rows:auto 1fr}
  #grenzen>.ac-text{grid-column:1;grid-row:1}
  #grenzen>.ac-limits{grid-column:2;grid-row:1 / span 2}
  #grenzen>.ac-conclusion{grid-column:1;grid-row:2;align-self:start}
}
.ac-split .ac-text{min-width:0}
.ac-art{margin:0;width:100%;max-width:560px;justify-self:end}
.ac-aside{padding-left:20px;border-left:2px solid var(--ac-line2);color:var(--ac-muted)!important}
@media (min-width:900px){.ac-split{padding-left:max(var(--bh-inline),calc((100% - var(--bh-max)) / 2))!important;padding-right:max(var(--bh-inline),calc((100% - var(--bh-max)) / 2))!important}}

/* Statement-Folie (Fortsetzung des Vergleichs, ohne Nummer) */
.ac-band{background:radial-gradient(ellipse 45% 70% at 80% 50%,rgba(184,212,74,.05),transparent 70%),var(--ac-card)!important}
.ac-statement{font-size:clamp(1.35rem,.9rem + 1.2vw,2rem)!important;line-height:1.45!important;font-weight:600;color:var(--ac-text)!important;letter-spacing:-.01em;max-width:24ch!important;text-wrap:pretty}
.ac-route-art{max-width:600px}

/* ---------- Breite Folien (Kopf + Inhalt in 1200er-Raster) ---------- */
.ac-wide>*{max-width:var(--bh-max)!important}
.ac-head{margin-bottom:var(--ac-stack)}
.ac-head .bh-n{margin-bottom:0!important}
.ac-head p{margin-top:clamp(16px,2vh,24px)!important}
@media (min-width:1100px){
  .ac-head-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--ac-gap);align-items:end}
  .ac-head-split p{margin-top:0!important}
}

/* ---------- Vergleich: Tabelle (Desktop) / Karten (mobil) ---------- */
.ac-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;line-height:1.55}
.ac-cmp col.c-q{width:24%}
.ac-cmp col.c-chat,.ac-cmp col.c-agent{width:38%}
.ac-cmp th,.ac-cmp td{text-align:left;vertical-align:top;padding:clamp(14px,1.9vh,22px) clamp(16px,1.6vw,28px);border-bottom:1px solid var(--ac-line)}
.ac-cmp thead th{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-muted);padding-top:clamp(16px,2.2vh,24px);border-bottom:1px solid var(--ac-line2)}
.ac-cmp thead td{border-bottom:1px solid var(--ac-line2)}
.ac-cmp thead th.is-agent{color:var(--ac-text);box-shadow:inset 0 2px 0 var(--ac-lime)}
.ac-cmp tbody th{font-weight:600;color:var(--ac-text);padding-left:0}
.ac-cmp thead td{padding-left:0}
.ac-cmp td{color:var(--ac-muted)}
.ac-cmp .is-agent{background:var(--ac-card);color:var(--ac-text)}
.ac-cmp tbody tr:last-child>*{border-bottom:0}
.ac-cmp tbody tr:last-child .is-agent{border-radius:0 0 12px 12px}
.ac-cmp thead .is-agent{border-radius:12px 12px 0 0}
@media (max-width:899px){
  .ac-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ac-cmp,.ac-cmp tbody,.ac-cmp tr,.ac-cmp th,.ac-cmp td{display:block;width:100%}
  .ac-cmp tr{background:var(--ac-card);border:1px solid var(--ac-line);border-radius:14px;margin-bottom:12px;overflow:hidden}
  .ac-cmp tbody th{padding:16px 18px 12px!important;font-size:1.05rem;border-bottom:1px solid var(--ac-line)}
  .ac-cmp td{padding:12px 18px;font-size:.95rem}
  .ac-cmp td::before{content:attr(data-label);display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ac-muted);margin-bottom:4px}
  .ac-cmp td.is-agent{background:var(--ac-card2);box-shadow:inset 2px 0 0 var(--ac-lime);border-radius:0!important}
  .ac-cmp td.is-agent::before{color:var(--ac-text)}
  .ac-cmp tbody tr:last-child>*{border-bottom:1px solid var(--ac-line)}
  .ac-cmp tr>*:last-child{border-bottom:0!important}
}

/* ---------- Grenzen + Gründe: Listen mit Haarlinien ---------- */
.ac-page .ac-limits li,.ac-page .ac-reasons li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:clamp(14px,1.4vw,24px);padding:clamp(18px,2.6vh,30px) 0;border-top:1px solid var(--ac-line)}
.ac-page .ac-limits li:last-child,.ac-page .ac-reasons li:last-child{border-bottom:1px solid var(--ac-line)}
.ac-page .ac-reasons li{grid-template-columns:minmax(0,1fr)}
.ac-limits p,.ac-reasons p{max-width:60ch!important}
.ac-mark{width:24px;height:24px;margin-top:2px;fill:none;stroke:var(--ac-text);stroke-width:1.5;stroke-linejoin:round;opacity:.8}
.ac-page .ac-reasons li{position:relative;padding-left:28px}
.ac-reasons li::before{content:"";position:absolute;left:0;top:calc(clamp(18px,2.6vh,30px) + .7em);width:12px;height:2px;background:var(--ac-line2)}
.ac-conclusion{margin-top:var(--ac-stack)!important;max-width:44ch!important;padding-top:var(--ac-stack);border-top:1px solid var(--ac-line);color:var(--ac-text)!important}
.ac-signet{margin:var(--ac-stack) 0 0;max-width:220px}
@media (max-width:899px){.ac-limits,.ac-reasons{margin-top:var(--ac-stack)!important}.ac-signet{display:none}}

/* ---------- Leistungen: drei Karten ---------- */
.ac-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ac-cardgap)}
.ac-card{background:var(--ac-card);border:1px solid var(--ac-line);border-radius:16px;padding:var(--ac-pad);display:flex;flex-direction:column;transition:transform .35s var(--ac-ease),border-color .35s}
.ac-card:hover{transform:translateY(-4px);border-color:var(--ac-line2)}
.ac-card h3{font-size:clamp(1.15rem,1rem + .4vw,1.35rem)!important;line-height:1.3;color:var(--ac-text);margin:clamp(20px,2.6vh,32px) 0 14px!important;max-width:22ch}
.ac-card p{font-size:.98rem!important;line-height:1.65}
.ac-glyph{width:56px;height:56px;fill:none;stroke:var(--ac-text);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.ac-glyph-line{stroke:var(--ac-lime)}
.ac-glyph-dot{fill:var(--ac-lime);stroke:none}
.ac-example{margin-top:auto!important;padding-top:18px;border-top:1px solid var(--ac-line);font-size:.92rem!important;color:var(--ac-muted)!important}
.ac-card p+.ac-example{margin-top:22px!important}
.ac-example em{font-style:normal;font-weight:600;color:var(--ac-text)}
.ac-more{margin-top:14px!important;font-size:.92rem!important;color:var(--ac-muted)!important}
.ac-more a{font-weight:600}
@media (max-width:1099px){.ac-cards{grid-template-columns:1fr}.ac-card h3{max-width:none}}

/* ---------- Preise: Karten in /preise/-Optik (Kartenrahmen, Preis groß 800, Haarlinie) ---------- */
.ac-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ac-cardgap)}
.ac-price{background:var(--ac-card);border:1px solid var(--ac-line);border-radius:16px;padding:var(--ac-pad);display:flex;flex-direction:column;transition:transform .35s var(--ac-ease),border-color .35s}
.ac-price:hover{transform:translateY(-4px);border-color:rgba(184,212,74,.45)}
.ac-price h3{font-size:.8rem!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ac-muted)}
.ac-amount{display:flex;align-items:baseline;gap:8px;margin:12px 0 0!important;padding-bottom:clamp(14px,1.8vh,20px);border-bottom:1px dashed var(--ac-line2);max-width:none!important}
.ac-amount .v{font-size:clamp(1.8rem,1.3rem + 1.1vw,2.5rem);font-weight:800;line-height:1.1;color:var(--ac-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ac-amount .u{font-size:.85rem;font-weight:600;color:var(--ac-muted)}
.ac-desc{margin-top:clamp(14px,1.8vh,20px)!important;font-size:.95rem!important;line-height:1.6;color:var(--ac-sec-text)!important}
.ac-price-notes{margin-top:var(--ac-stack);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ac-cardgap)}
.ac-price-notes p{margin:0!important;font-size:.9rem!important;line-height:1.6;color:var(--ac-muted)!important;padding-top:14px;border-top:1px solid var(--ac-line)}
@media (max-width:1099px){.ac-prices{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-price-notes{grid-template-columns:1fr;gap:4px}.ac-price-notes p{border-top:0;padding-top:0}.ac-price-notes p:first-child{border-top:1px solid var(--ac-line);padding-top:14px}}
@media (max-width:699px){.ac-prices{grid-template-columns:1fr}}

/* ---------- Ablauf: Kette auf einer Linie ---------- */
.ac-chain{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--ac-cardgap)}
.ac-page .ac-chain-line{max-width:none}
.ac-chain-line{position:absolute;left:32px;right:calc((100% - 3 * var(--ac-cardgap)) / 4 - 32px);top:31px;height:2px;pointer-events:none}
.ac-chain-line svg{display:block;width:100%;height:2px;overflow:visible}
.ac-chain-line path{fill:none;stroke:var(--ac-line2);stroke-width:2}
.ac-page .ac-step,.ac-page .ac-card,.ac-page .ac-limits li,.ac-page .ac-reasons li{max-width:none}
.ac-step{position:relative}
.ac-step-fig{width:64px;height:64px;fill:var(--ac-card2);stroke:var(--ac-text);stroke-width:1.5;stroke-linejoin:round;background:transparent;position:relative;z-index:1}
.ac-step-fig .ac-ring{fill:#0e1219}
.ac-step h3{font-size:clamp(1.1rem,.95rem + .45vw,1.4rem)!important;color:var(--ac-text);margin:clamp(24px,3.2vh,40px) 0 12px!important;padding-right:12px}
.ac-step p{font-size:1rem!important;max-width:30ch!important}
@media (max-width:899px){
  .ac-chain{grid-template-columns:1fr;row-gap:32px;padding-left:0}
  .ac-chain-line{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
  .ac-step-fig{width:48px;height:48px}
  .ac-chain-line svg{width:2px;height:100%}
  .ac-chain-line svg{transform:rotate(90deg) scaleX(1);display:none}
  .ac-chain-line{background:var(--ac-line2)}
  .ac-step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px}
  .ac-step-fig{grid-row:1 / span 2}
  .ac-step h3{margin:10px 0 8px!important}
  .ac-step p{grid-column:2}
}

/* ---------- FAQ + Kontakt ---------- */
.ac-faq-more{margin-top:var(--ac-stack)!important;color:var(--ac-muted)!important}
.ac-kontakt .h-direct{margin-top:24px!important;text-align:center;color:var(--ac-muted)}
.ac-kontakt .h-intro{color:var(--ac-text)!important}
.ac-kontakt .du-note{margin-top:20px!important;color:var(--ac-text)!important;font-weight:600;font-size:.92rem!important}
.ac-kontakt #formular{margin-top:clamp(20px,3vh,36px)}
.ac-kontakt .contact-form{margin:0;background:var(--ac-card);border:1px solid var(--ac-line);border-radius:14px;padding:clamp(20px,2vw,32px)}
.ac-kontakt .contact-form .fg{gap:6px}
.ac-kontakt .contact-form textarea::placeholder{color:#6f7b88}

/* ---------- Mobil ---------- */
@media (max-width:899px){
  .ac-hero-grid{grid-template-columns:1fr}
  .ac-hero-art{display:none}
  .ac-art{margin-top:var(--ac-stack);justify-self:start;max-width:440px}
  .ac-split-rev .ac-art{max-width:420px}
}

/* ==========================================================================
   Animationen: einmalig, CSS/SVG, ausgelöst per IntersectionObserver (.is-in)
   Ohne JS oder bei reduced-motion: alles sofort im Endzustand.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* Linien zeichnen (stroke-dashoffset) */
  html.ac-js [data-ac] .ac-draw,html.ac-js .ac-anim-load .ac-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,1.2s) var(--ac-draw-ease) var(--d,0s)}
  html.ac-js [data-ac].is-in .ac-draw,html.ac-js .ac-anim-load.is-in .ac-draw{stroke-dashoffset:0}
  /* Punkte / Formen wachsen */
  html.ac-js [data-ac] .ac-pop,html.ac-js .ac-anim-load .ac-pop{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
  html.ac-js [data-ac].is-in .ac-pop,html.ac-js .ac-anim-load.is-in .ac-pop{transform:scale(1)}
  html.ac-js [data-ac] .ac-fade{opacity:0;transition:opacity .6s ease var(--d,0s)}
  html.ac-js [data-ac].is-in .ac-fade{opacity:1}
  /* Inhalte gleiten einmal ein (gestaffelt über --i) */
  html.ac-js [data-ac-reveal],
  html.ac-js [data-ac]:is(.ac-cards,.ac-prices,.ac-limits,.ac-reasons,.ac-chain)>[style*="--i"],
  html.ac-js .ac-cmp-wrap[data-ac] tbody tr{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ac-ease) calc(var(--i,0) * 90ms + 80ms),transform .7s var(--ac-ease) calc(var(--i,0) * 90ms + 80ms)}
  html.ac-js [data-ac-reveal].is-in,
  html.ac-js [data-ac].is-in:is(.ac-cards,.ac-prices,.ac-limits,.ac-reasons,.ac-chain)>[style*="--i"],
  html.ac-js .ac-cmp-wrap[data-ac].is-in tbody tr{opacity:1;transform:none}
  /* Ablauf: Linie zuerst, Stationen folgen der Linie */
  html.ac-js .ac-chain[data-ac]>.ac-step{transition-delay:calc(var(--i) * 320ms + 200ms)}
  html.ac-js .ac-chain[data-ac] .ac-step-fig{transform:scale(.4);transition:transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 320ms + 200ms)}
  html.ac-js .ac-chain[data-ac].is-in .ac-step-fig{transform:scale(1)}
  /* Hover nach dem Einblenden wieder schnell */
  html.ac-js .ac-cards.is-done>.ac-card,html.ac-js .ac-prices.is-done>.ac-price{transition:transform .35s var(--ac-ease),border-color .35s}
}
@media (prefers-reduced-motion:reduce){
  .ac-card,.ac-price{transition:none}
  .ac-card:hover,.ac-price:hover{transform:none}
}