/* auris · Webseite v4 · Stand 12.10.2026
   Look von francis-kern (seite.css, R-ARB-01b): hell, Milchglas, weisse Karten, Farben von auris.
   Schrift wie v3: Manrope und DM Mono (Janic: «schrift kannst du belassen wie bei v3»). */

:root {
  color-scheme: light;
  --pflaume: #3A2A4E; --pflaume-tief: #2A1D39; --pflaume-soft: #DFD7E6;
  --flieder: #8257B5; --flieder-hell: #B08FDB; --flieder-soft: #EBE2F5;
  --n0: #FFFFFF; --n50: #F9F7FA; --n100: #F2EFF4; --n200: #E8E3EC; --n300: #D4CDDA; --n500: #6C6575; --n700: #443E4D; --n900: #191420;
  --gut: #256E52; --gut-soft: #DEEEE6; --fehler: #A8323F; --fehler-soft: #F7E2E4;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --radius: 22px; --radius-klein: 14px;
  --unschaerfe: blur(22px) saturate(140%);
  --schatten-karte: 0 24px 50px -32px rgb(58 42 78 / 28%);
  --ein: cubic-bezier(.2, .7, .2, 1);
  --kopf-h: 72px;
  --rhythmus: clamp(120px, 17vh, 184px); --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --r-s: 10px; --r-l: 22px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf-h) }
body {
  margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; color: var(--n900);
  background-color: var(--n50); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 8% -10%, rgb(176 143 219 / 45%), transparent 60%),
    radial-gradient(55rem 45rem at 100% 0%, rgb(130 87 181 / 25%), transparent 62%),
    radial-gradient(50rem 40rem at 0% 100%, rgb(223 215 230 / 70%), transparent 60%),
    radial-gradient(45rem 35rem at 95% 95%, rgb(58 42 78 / 12%), transparent 60%),
    var(--n50);
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
:focus-visible { outline: 2px solid var(--flieder); outline-offset: 3px; border-radius: 6px }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -.03em; color: var(--n700); line-height: 1.08 }
p { margin: 0 }
.hervor { color: var(--flieder) }

.wrap { width: min(84rem, 100% - 32px); margin-inline: auto }
.schmal { width: min(46rem, 100% - 32px); margin-inline: auto }

/* ── Kopfleiste aus Milchglas ───────────────────────────────────────────── */
.kopfleiste {
  position: sticky; top: 0; z-index: 30; height: var(--kopf-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 2rem;
  background: rgb(255 255 255 / 55%); -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe);
  border-bottom: 1px solid rgb(255 255 255 / 85%);
}
.marke { display: flex; align-items: center; gap: .55rem; color: var(--pflaume); text-decoration: none }
.marke img { height: 1.7rem; width: auto }
.marke-name { font-weight: 600; font-size: 1.05rem }
.marke-trenner { color: var(--n500) }
.kopf-rechts { display: flex; align-items: center; gap: .5rem }
.pille {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; border-radius: 999px;
  background: rgb(255 255 255 / 70%); border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: 0 10px 30px -14px rgb(58 42 78 / 30%); -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe);
  color: var(--n700); font-size: .9rem; text-decoration: none; cursor: pointer; font-family: inherit;
}
.pille:hover { background: #fff; color: var(--n900) }
.pille[aria-current="page"] { background: #fff; color: var(--n900); font-weight: 600 }
.punkt { width: .62rem; height: .62rem; border-radius: 50%; background: var(--flieder); box-shadow: 0 0 0 4px rgb(130 87 181 / 20%); flex: none }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
  padding: .7rem 1.35rem; border-radius: 999px; font: 600 .95rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid var(--n300); background: var(--n0); color: var(--n900);
  transition: background .2s var(--ein), transform .2s var(--ein);
}
.knopf:hover { background: var(--n50) }
.knopf.haupt { background: var(--pflaume); color: var(--n50); border-color: var(--pflaume) }
.knopf.haupt:hover { background: var(--pflaume-tief) }
.knopf.gross { min-height: 52px; padding: .9rem 1.7rem; font-size: 1rem }

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.abschnitt { padding: var(--rhythmus) 0 }
/* Zwei helle Abschnitte nacheinander: nur einmal Luft, überall gleich viel */
.abschnitt + .abschnitt { padding-top: calc(var(--rhythmus) * .6) }
.etikett { font: 500 .8rem/1 var(--mono); letter-spacing: .04em; color: var(--flieder); text-transform: uppercase; margin-bottom: 1.1rem; display: block }
.kernsatz { font-size: clamp(2rem, 4.6vw, 4.2rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.06; color: var(--n700) }
.titel-2 { font-size: clamp(1.8rem, 3.4vw, 3rem) }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--n500); margin-top: 1.2rem; max-width: 40ch }
.nutzen { font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--n700); max-width: 48ch; margin: var(--s-12) auto 0; text-align: center; line-height: 1.45 }
.nutzen strong { color: var(--pflaume); font-weight: 600 }
.mitte { text-align: center }
.mitte .lead { margin-inline: auto }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { min-height: calc(100svh - var(--kopf-h)); display: grid; align-items: center; padding: var(--s-12) 0 }
.hero-innen { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center }
.hero .kernsatz { font-size: clamp(2.4rem, 5.6vw, 5rem) }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem }
.gattung { font: 500 .8rem/1 var(--mono); color: var(--n500); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.4rem; display: flex; align-items: center; gap: .6rem }
.chat { display: grid; gap: .8rem; padding: clamp(20px, 3vw, 32px); border-radius: 26px;
  background: rgb(255 255 255 / 45%); border: 1px solid rgb(255 255 255 / 70%);
  box-shadow: 0 30px 70px -40px rgb(58 42 78 / 30%); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%) }
.blase { padding: .9rem 1.1rem; border-radius: 18px; max-width: 85%; font-size: 1.02rem; line-height: 1.45 }
.blase.du { justify-self: end; background: var(--pflaume); color: var(--n50); border-bottom-right-radius: 6px }
.blase.ki { background: var(--n0); border: 1px solid var(--n200); border-bottom-left-radius: 6px; color: var(--n700) }
.blase.ki.leer { color: var(--n500) }
.blase small { display: block; font: 400 .74rem/1.3 var(--mono); color: var(--n500); margin-top: .35rem }
.chat-kopf { font: 500 .74rem/1 var(--mono); color: var(--n500); letter-spacing: .04em; text-transform: uppercase }
.tippt { display: inline-flex; gap: 4px }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--n300); animation: tippt 1.2s infinite }
.tippt i:nth-child(2) { animation-delay: .15s } .tippt i:nth-child(3) { animation-delay: .3s }
@keyframes tippt { 50% { opacity: .3 } }

/* ── Ablauf: Mail, Kalender, Meeting → auris → Personen und Firmen ─────── */
.ablauf { display: grid; grid-template-columns: minmax(0,1fr) minmax(40px,1fr) auto minmax(40px,1fr) minmax(0,1fr); align-items: center; gap: clamp(12px, 2.4vw, 32px); margin-top: var(--s-16) }
.ablauf-spalte { display: grid; gap: .7rem }
.ablauf-chip { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-radius: var(--radius-klein);
  background: var(--n0); border: 1px solid var(--n200); box-shadow: var(--schatten-karte); font-weight: 600; color: var(--n700) }
.ablauf-chip svg { width: 24px; height: 24px; fill: none; stroke: var(--pflaume); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none }
.ablauf-chip small { display: block; font: 400 .78rem/1.3 var(--mono); color: var(--n500) }
.ablauf-pfeil { width: 100%; height: 2px; background: linear-gradient(90deg, var(--n300), var(--flieder)); position: relative; overflow: hidden; border-radius: 2px }
.ablauf-pfeil::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--flieder); animation: fliessen 2.4s var(--ein) infinite }
@keyframes fliessen { to { left: 100% } }
.ablauf-mitte { width: clamp(96px, 11vw, 150px); aspect-ratio: 1; border-radius: 30px; background: var(--n0); border: 1px solid var(--n200);
  box-shadow: 0 30px 60px -30px rgb(58 42 78 / 40%); display: grid; place-items: center }
.ablauf-mitte img { width: 58% }
.person-chip { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flieder-soft); color: var(--pflaume); font-weight: 700; font-size: .78rem; flex: none }
.firma-chip { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--n100); color: var(--n700); font-weight: 700; font-size: .78rem; flex: none }

/* ── Ruhepunkt in Pflaume ─────────────────────────────────────────────── */
.ruhe { background: var(--pflaume); color: var(--n50); padding: calc(var(--rhythmus) * 1.3) 0; text-align: center }
.ruhe img { width: 64px; margin: 0 auto 2.2rem }
.ruhe .kernsatz { color: var(--n50); font-size: clamp(2.6rem, 6.4vw, 5.6rem) }
.ruhe .lead { color: var(--pflaume-soft); margin: 1.6rem auto 0; max-width: 34ch; font-size: clamp(1.2rem, 1.9vw, 1.6rem) }

/* ── 3D-Bühne (aus v3, Technik unverändert) ───────────────────────────── */
.buehne-kopf { padding: var(--rhythmus) 0 var(--s-8) }
.buehne { position: relative; height: 770svh }
.buehne .klebt { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); overflow: hidden }
#szene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .55s var(--ein) }
#szene.an { opacity: 1 }
.texte { position: absolute; inset: 0; display: flex; align-items: center; padding-left: clamp(28px, 9vw, 180px); pointer-events: none }
.texte::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(249 247 250 / 92%) 0%, rgb(249 247 250 / 80%) 28%, rgb(249 247 250 / 50%) 38%, rgb(249 247 250 / 0) 50%) }
.bloecke { position: relative; width: min(38ch, 44vw); min-height: clamp(260px, 38vh, 380px); display: grid }
.st { grid-area: 1/1; align-self: center; opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ein), transform .55s var(--ein) }
.st.da { opacity: 1; transform: none }
.st-nr { font: 500 .78rem/1 var(--mono); color: var(--flieder); letter-spacing: .04em; margin-bottom: .9rem; display: block }
.st-titel { font-size: clamp(1.7rem, min(3.2vw, 5vh), 2.8rem); line-height: 1.08; font-weight: 300; letter-spacing: -.03em; margin: 0 0 .55em; color: var(--n700) }
.st-text { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; color: var(--n500) }
.st-merk { margin-top: clamp(20px, 3vh, 32px); display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.05rem; border-radius: 999px;
  background: rgb(255 255 255 / 80%); border: 1px solid rgb(255 255 255 / 95%); box-shadow: 0 10px 30px -14px rgb(58 42 78 / 30%);
  font-size: .95rem; color: var(--pflaume); font-weight: 600 }
.hinweis { display: none }
.st-bild { display: none }

@media (prefers-reduced-motion: reduce) {
  .buehne { height: auto }
  .buehne .klebt { position: relative; height: auto; padding: var(--s-8) 0 var(--s-16) }
  #szene { display: none }
  .texte { position: relative; inset: auto; padding: 0 16px; display: block }
  .texte::before { display: none }
  .bloecke { width: min(46rem, 100%); margin-inline: auto; display: grid; gap: var(--s-12) }
  .st { opacity: 1 !important; transform: none !important; grid-area: auto }
  .ablauf-pfeil::after, .tippt i { animation: none }
}
html.kein-3d .buehne { height: auto }
html.kein-3d .buehne .klebt { position: relative; height: auto; overflow: visible; padding: var(--s-8) 0 var(--s-16) }
html.kein-3d #szene { display: none }
html.kein-3d .texte { position: relative; inset: auto; padding: 0 16px; display: block }
html.kein-3d .texte::before { display: none }
html.kein-3d .bloecke { width: min(46rem, 100%); margin-inline: auto; min-height: 0; display: grid; gap: clamp(56px, 10vh, 96px) }
html.kein-3d .st { opacity: 1; transform: none; grid-area: auto }
@media (max-width: 860px) {
  .st-bild { display: block; width: 100%; max-width: 420px; margin: 0 auto var(--s-6); border-radius: var(--r-l) }
}

/* ── Umschalter ohne / mit ────────────────────────────────────────────── */
.umschalter { display: inline-flex; padding: 5px; border-radius: 999px; gap: 4px; margin: var(--s-8) auto 0;
  background: rgb(255 255 255 / 60%); border: 1px solid rgb(255 255 255 / 90%); box-shadow: 0 10px 30px -14px rgb(58 42 78 / 30%);
  -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe) }
.umschalter button { border: 0; background: transparent; padding: .65rem 1.3rem; border-radius: 999px; font: 600 .95rem/1 var(--sans); color: var(--n500); cursor: pointer; min-height: 44px }
.umschalter button[aria-pressed="true"] { background: var(--pflaume); color: var(--n50) }
.faelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: var(--s-12) }
.fall { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--radius); box-shadow: var(--schatten-karte); padding: clamp(22px, 2.4vw, 30px); display: grid; align-content: start; gap: 1rem; min-height: 100% }
.fall h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--n900); line-height: 1.3 }
.fall .seite-ohne, .fall .seite-mit { font-size: 1rem; line-height: 1.5; padding: .9rem 1rem; border-radius: var(--radius-klein) }
.fall .seite-ohne { background: var(--n100); color: var(--n500) }
.fall .seite-mit { background: var(--flieder-soft); color: var(--pflaume) }
.fall .seite-mit b { font-weight: 600 }
.fall .marke-zeile { font: 500 .74rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--n500); display: flex; align-items: center; gap: .45rem }
[data-zustand="ohne"] .seite-mit, [data-zustand="mit"] .seite-ohne { display: none }
[data-zustand="mit"] .fall { border-color: var(--flieder-hell) }

/* ── Drei Fakten mit Icon ──────────────────────────────────────────────── */
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: var(--s-12) }
.fakt { padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); background: rgb(255 255 255 / 55%); border: 1px solid rgb(255 255 255 / 85%);
  -webkit-backdrop-filter: var(--unschaerfe); backdrop-filter: var(--unschaerfe) }
.fakt svg { width: 28px; height: 28px; fill: none; stroke: var(--pflaume); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem }
.fakt h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--n900); margin-bottom: .4rem }
.fakt p { color: var(--n500) }

/* ── Produktbilder auf der Milchglas-Bühne ─────────────────────────────── */
.produkt { padding: clamp(10px, 1.6vw, 18px); border-radius: 26px; background: rgb(255 255 255 / 32%); border: 1px solid rgb(255 255 255 / 55%);
  box-shadow: 0 30px 70px -40px rgb(58 42 78 / 30%); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%) }
.produkt img { border-radius: 16px; width: 100% }
.produkt-zeile { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 6vw, 88px); align-items: center }
.produkt-zeile.umgekehrt { grid-template-columns: 1.35fr 1fr }
.produkt-zeile.umgekehrt .produkt { order: -1 }

/* ── Fragen ─────────────────────────────────────────────────────────────── */
.fragen { display: grid; gap: .6rem; margin-top: var(--s-8) }
.fragen-breit { width: min(72rem, 100% - 32px); margin-inline: auto }
/* Zwei feste Spalten: eine offene Antwort verschiebt nur ihre eigene Spalte */
.fragen-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; align-items: start }
@media (max-width: 860px) { .fragen-spalten { grid-template-columns: 1fr } .fragen-spalten .fragen + .fragen { margin-top: .6rem } }
.fragen details { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--radius-klein); box-shadow: 0 1px 2px rgb(58 42 78 / 4%) }
.fragen summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 44px }
.fragen summary::-webkit-details-marker { display: none }
.fragen summary::after { content: "+"; font-weight: 300; font-size: 1.5rem; color: var(--flieder); line-height: 1 }
.fragen details[open] summary::after { content: "–" }
.fragen details p { padding: 0 1.3rem 1.2rem; color: var(--n500) }

/* ── Termin und Band ───────────────────────────────────────────────────── */
.termin { text-align: center }
.termin .cta { justify-content: center }
.band { margin: 0 auto; width: min(84rem, 100% - 32px); border-radius: 26px; padding: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  background: rgb(255 255 255 / 45%); border: 1px solid rgb(255 255 255 / 75%); box-shadow: 0 30px 70px -40px rgb(58 42 78 / 30%);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%) }
.band-links { display: flex; align-items: center; gap: 1.2rem }
.band img.rund { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--n200); flex: none }
.band p { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--n700); line-height: 1.35 }
.band p b { color: var(--pflaume); font-weight: 600 }

.fuss { padding: var(--s-16) 0 var(--s-12); color: var(--n500); font-size: .9rem }
.fuss .wrap { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: space-between; align-items: center }
.fuss nav { display: flex; gap: 1.2rem; flex-wrap: wrap }
.fuss a { text-decoration: none } .fuss a:hover { color: var(--n900) }

/* ── Francis-Seite ─────────────────────────────────────────────────────── */
.f-hero-bild { position: relative }
.f-hero-bild img { width: min(80%, 420px); margin-inline: auto; filter: drop-shadow(0 30px 40px rgb(58 42 78 / 10%)) }
.problem { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--n500); max-width: 42ch; margin-top: 1.2rem }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); margin-top: var(--s-12) }
.weg { background: var(--n0); border: 1px solid var(--n200); border-radius: var(--radius); box-shadow: var(--schatten-karte); padding: clamp(22px, 2.6vw, 34px) }
.weg h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: var(--n900); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem }
.weg ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; counter-reset: s }
.weg li { counter-increment: s; display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: var(--n50); color: var(--n700) }
.weg li::before { content: counter(s); font: 500 .8rem/1 var(--mono); color: var(--n500); width: 1.2rem }
.weg.mit { border-color: var(--flieder-hell) }
.weg.mit li { background: var(--flieder-soft); color: var(--pflaume); font-weight: 600 }
.weg.mit li::before { color: var(--flieder) }
.regler { display: grid; gap: .6rem; margin-top: var(--s-8) }
.regel-zeile { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--n0); border: 1px solid var(--n200); border-radius: var(--radius-klein) }
.regel-zeile b { font-weight: 600 }
.stufen { display: inline-flex; background: var(--n100); border-radius: 999px; padding: 4px; gap: 2px; justify-self: start }
.stufen span { padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; color: var(--n500) }
.stufen span.an { background: var(--n0); color: var(--n900); font-weight: 600; box-shadow: 0 1px 3px rgb(58 42 78 / 15%) }

/* ── Erscheinen beim Scrollen, einmal ─────────────────────────────────── */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ein), transform .4s var(--ein) }
.js .zeigen.da { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .js .zeigen { opacity: 1; transform: none; transition: none } }

/* ── Handy ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --kopf-h: 60px }
  .kopfleiste { padding: 0 16px }
  .kopf-rechts .pille { display: none }
  .kopf-rechts .knopf { min-height: 40px; padding: .55rem 1rem; font-size: .88rem }
  .hero-innen, .produkt-zeile, .produkt-zeile.umgekehrt { grid-template-columns: 1fr }
  .produkt-zeile.umgekehrt .produkt { order: 0 }
  .hero { padding: var(--s-12) 0 }
  .ablauf { grid-template-columns: 1fr; justify-items: center }
  .ablauf-spalte { width: 100%; max-width: 360px }
  .ablauf-pfeil { width: 2px; height: 36px; background: linear-gradient(180deg, var(--n300), var(--flieder)) }
  .ablauf-pfeil::after { width: 100%; height: 40%; left: 0; top: -40%; animation-name: fliessen-y }
  .faelle, .fakten, .vergleich { grid-template-columns: 1fr }
  .regel-zeile { grid-template-columns: 1fr }
  .band { flex-direction: column; align-items: flex-start }
}
@keyframes fliessen-y { to { top: 100% } }
@media (max-width: 420px) { .kopf-rechts .knopf { padding: .5rem .8rem } .marke img { height: 1.45rem } }

/* ── Vergleich mit ChatGPT, Claude und Copilot ─────────────────────────── */
.vgl { margin-top: var(--s-12); background: var(--n0); border: 1px solid var(--n200); border-radius: var(--radius); box-shadow: var(--schatten-karte); overflow: hidden }
.vgl-kopf, .vgl-zeile summary { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: .5rem; padding: .9rem clamp(14px, 2vw, 26px) }
.vgl-kopf { font: 500 .8rem/1.2 var(--mono); color: var(--n500); background: var(--n50); border-bottom: 1px solid var(--n200) }
.vgl-kopf span, .vgl-zeile summary span:not(:first-child) { text-align: center }
.vgl-kopf .uns { color: var(--pflaume); font-weight: 500 }
.vgl-zeile { border-bottom: 1px solid var(--n200) }
.vgl-zeile:last-child { border-bottom: 0 }
.vgl-zeile summary { list-style: none; cursor: pointer; min-height: 56px }
.vgl-zeile summary::-webkit-details-marker { display: none }
.vgl-zeile summary:hover { background: var(--n50) }
.vgl-zeile summary > span:first-child { font-weight: 600; color: var(--n900); display: flex; gap: .6rem; align-items: center }
.vgl-zeile summary > span:first-child::before { content: "+"; color: var(--flieder); font-weight: 300; font-size: 1.3rem; width: .8rem; flex: none }
.vgl-zeile[open] summary > span:first-child::before { content: "–" }
.wert { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600 }
.wert.ja { background: var(--gut-soft); color: var(--gut) }
.wert.nein { background: var(--n100); color: var(--n500) }
.wert.teils { background: #F5EBD6; color: #8A6114 }
.wert.uns { background: var(--pflaume); color: var(--n50) }
.vgl-zeile p { padding: 0 clamp(14px, 2vw, 26px) 1.1rem calc(clamp(14px, 2vw, 26px) + 1.4rem); color: var(--n500); max-width: 70ch }
.vgl-zeile p b { color: var(--n700); font-weight: 600 }
@media (max-width: 860px) {
  .vgl-kopf, .vgl-zeile summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .3rem; font-size: .98rem }
  .vgl-kopf span:first-child { display: none }
  .vgl-kopf { font-size: .7rem; position: sticky; top: var(--kopf-h); z-index: 2 }
  .vgl-zeile summary > span:first-child { grid-column: 1 / -1 }
  .wert { padding: .22rem .55rem; font-size: .74rem }
  .vgl-zeile p { padding-left: clamp(14px, 2vw, 26px) }
}