/* ma-ki, Gestaltung A in heller Fassung.
   Aus der Entwurfsdatei 15_Startseite_ABC/vorlage-a-hell.html herausgeloest,
   damit alle Seiten dieselbe Grundlage teilen. */
:root{
    --bg:#0D1B2A;
    --bg2:#0A1622;
    --panel:rgba(255,255,255,.045);
    --line:rgba(255,255,255,.10);
    --text:#E8EEF6;
    --muted:#9FB0C3;
    --cyan:#22D3EE;
    --blue:#0EA5E9;
    --deep:#1D4ED8;
    --accent:#38BDF8;
    --radius:18px;
    --font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;overflow-x:hidden}
  ::selection{background:rgba(34,211,238,.35)}

  /* ---------- Header ---------- */
  header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease}
  header.scrolled{background:rgba(13,27,42,.75);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
  .navwrap{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:32px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.35rem;letter-spacing:.02em;color:var(--text);text-decoration:none}
  .brand .dash{color:var(--accent)}
  .chev{width:22px;height:22px;flex:none}
  nav{display:flex;gap:26px;margin-left:auto}
  nav a{color:var(--muted);text-decoration:none;font-size:.95rem;position:relative;padding:4px 0;transition:color .25s}
  nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,var(--cyan),var(--deep));transition:width .3s ease}
  nav a:hover{color:var(--text)}
  nav a:hover::after{width:100%}
  .btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;text-decoration:none;font-size:.98rem;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;cursor:pointer;border:0}
  .btn-primary{background:linear-gradient(100deg,var(--cyan),var(--blue) 45%,var(--deep));color:#04121F;box-shadow:0 8px 28px rgba(14,165,233,.35)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(14,165,233,.5)}
  .btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent}
  .btn-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
  .nav-cta{padding:10px 20px;font-size:.9rem}

  /* ---------- Hero ---------- */
  .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
  .aurora{position:absolute;inset:0;pointer-events:none;filter:blur(70px);opacity:.55}
  .blob{position:absolute;border-radius:50%}
  .blob.b1{width:46vw;height:46vw;background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.8),transparent 60%);top:-12%;left:-8%;animation:drift1 26s ease-in-out infinite alternate}
  .blob.b2{width:40vw;height:40vw;background:radial-gradient(circle at 60% 40%,rgba(29,78,216,.9),transparent 62%);bottom:-18%;right:-6%;animation:drift2 32s ease-in-out infinite alternate}
  .blob.b3{width:28vw;height:28vw;background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.7),transparent 60%);top:38%;left:52%;animation:drift3 22s ease-in-out infinite alternate}
  @keyframes drift1{to{transform:translate(9vw,7vh) scale(1.15)}}
  @keyframes drift2{to{transform:translate(-7vw,-9vh) scale(1.1)}}
  @keyframes drift3{to{transform:translate(-6vw,6vh) scale(.9)}}
  .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 75% 65% at 50% 42%,#000 30%,transparent 72%);pointer-events:none}
  .hero-inner{position:relative;max-width:1120px;margin:0 auto;padding:140px 24px 90px;width:100%}
  .kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.85rem;color:var(--muted);background:rgba(255,255,255,.03);opacity:0;animation:rise .8s ease .15s forwards}
  .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  h1{font-size:clamp(2.5rem,6.2vw,4.6rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:28px 0 24px;max-width:16ch}
  h1 .w{display:inline-block;opacity:0;transform:translateY(28px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i)*.09s)}
  h1 .grad{background:linear-gradient(92deg,var(--cyan),var(--accent) 50%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .sub{max-width:56ch;color:var(--muted);font-size:1.13rem;opacity:0;animation:rise .8s ease .95s forwards}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px;opacity:0;animation:rise .8s ease 1.15s forwards}
  .trust{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:54px;color:var(--muted);font-size:.85rem;opacity:0;animation:rise .8s ease 1.35s forwards}
  .trust span{display:inline-flex;align-items:center;gap:8px}
  .trust svg{width:15px;height:15px;flex:none}

  /* ---------- Sections ---------- */
  section{position:relative;padding:110px 24px}
  .wrap{max-width:1120px;margin:0 auto}
  .sec-kicker{color:var(--accent);font-weight:600;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase}
  h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;letter-spacing:-.01em;margin:14px 0 18px;max-width:24ch}
  .lead{color:var(--muted);max-width:62ch;font-size:1.05rem}

  /* Reveal on scroll */
  .js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.visible{opacity:1;transform:none}

  /* Leistungen */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:20px;margin-top:52px}
  .card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;overflow:hidden}
  .card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 180px at var(--mx,50%) -20%,rgba(34,211,238,.14),transparent 70%);opacity:0;transition:opacity .4s}
  .card:hover{transform:translateY(-8px);border-color:rgba(56,189,248,.45);box-shadow:0 22px 44px rgba(2,10,20,.55)}
  .card:hover::before{opacity:1}
  .card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(29,78,216,.18));border:1px solid rgba(56,189,248,.3);margin-bottom:20px}
  .card .icon svg{width:22px;height:22px}
  .card h3{font-size:1.12rem;margin-bottom:10px}
  .card p{color:var(--muted);font-size:.95rem;min-height:72px}
  .price{display:inline-block;margin-top:18px;font-weight:700;color:var(--accent);font-size:.95rem}

  /* Zahlen */
  .stats{background:linear-gradient(180deg,transparent,rgba(255,255,255,.03) 18%,rgba(255,255,255,.03) 82%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;text-align:center}
  .stat b{display:block;font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;letter-spacing:-.02em;background:linear-gradient(92deg,var(--cyan),var(--accent) 55%,var(--deep));-webkit-background-clip:text;background-clip:text;color:transparent}
  .stat span{color:var(--muted);font-size:.95rem;display:block;margin-top:8px;max-width:26ch;margin-inline:auto}

  /* Ablauf */
  .steps{position:relative;margin-top:56px;display:grid;gap:0}
  .step{position:relative;padding:0 0 44px 62px}
  .step:last-child{padding-bottom:0}
  .step::before{content:"";position:absolute;left:17px;top:38px;bottom:0;width:2px;background:var(--line)}
  .step:last-child::before{display:none}
  .step .fill{position:absolute;left:17px;top:38px;bottom:0;width:2px;background:linear-gradient(180deg,var(--cyan),var(--deep));transform:scaleY(0);transform-origin:top;transition:transform 1s ease .2s}
  .step.visible .fill{transform:scaleY(1)}
  .step .num{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.9rem;border:1px solid rgba(56,189,248,.5);background:rgba(13,27,42,.9);color:var(--accent);box-shadow:0 0 0 0 rgba(34,211,238,.0);transition:box-shadow .6s}
  .step.visible .num{box-shadow:0 0 22px 2px rgba(34,211,238,.35)}
  .step h3{font-size:1.15rem;margin-bottom:6px}
  .step p{color:var(--muted);max-width:60ch}

  /* Person */
  .person{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:44px}
  .portrait{width:200px;height:200px;border-radius:50%;background:
      radial-gradient(circle at 35% 30%,rgba(255,255,255,.16),transparent 55%),
      linear-gradient(135deg,rgba(34,211,238,.25),rgba(29,78,216,.35));
      border:1px solid rgba(56,189,248,.4);display:grid;place-items:center;color:var(--muted);font-size:.8rem;text-align:center;padding:14px}
  .person blockquote{font-size:1.25rem;line-height:1.55;font-weight:500;max-width:52ch}
  .person cite{display:block;margin-top:16px;color:var(--muted);font-style:normal;font-size:.95rem}

  /* CTA */
  .ctaband{text-align:center;overflow:hidden}
  .ctaband h2{margin-inline:auto}
  .ctaband .lead{margin-inline:auto}
  .ctaband .btn{margin-top:34px}

  footer{border-top:1px solid var(--line);padding:44px 24px;color:var(--muted);font-size:.88rem}
  .foot{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
  .foot .claim{color:var(--text);font-weight:600}
  .foot nav{display:flex;gap:20px;margin:0}

  @media (max-width:820px){
    nav.mainnav{display:none}
    .person{grid-template-columns:1fr;text-align:center;justify-items:center;padding:32px 22px}
    section{padding:80px 20px}
    .hero-inner{padding:120px 20px 70px}
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    .reveal,.kicker,.sub,.hero-cta,.trust,h1 .w{opacity:1 !important;transform:none !important}
  }

  /* ---------- Ergänzungen für die vollständigen Inhalte ---------- */
  .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--text);color:var(--bg);padding:12px 18px;font-size:.9rem;font-weight:600;text-decoration:none}
  .skip:focus{left:0}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  .portrait{overflow:hidden;padding:0;margin:0}
  .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.06)}

  .klartext{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);padding:clamp(28px,4vw,48px)}
  .klartext h2{margin-top:12px}
  .klartext p{color:var(--muted);max-width:62ch}
  .klartext .mark{border-left:2px solid var(--accent);padding-left:20px;margin-top:26px;color:var(--text)}

  .proj{margin-top:60px;border-top:1px solid var(--line);text-align:left}
  .proj article{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
  .proj h3{font-size:1.06rem;margin-bottom:10px}
  .proj p{color:var(--muted);font-size:.95rem}
  .vn{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;font-weight:600}

  .faq{margin-top:52px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;font-weight:600;font-size:1.05rem;transition:color .2s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{color:var(--accent)}
  .faq summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.35rem;font-weight:400}
  .faq details[open] summary::after{content:"−"}
  .faq .a{color:var(--muted);padding:0 0 24px;max-width:64ch}

  .offen{border-bottom:1px dashed #F0B36B;color:#F0B36B;cursor:help}
  .count.offen{color:transparent;border-bottom:1px dashed #F6C177}

  @media (max-width:820px){
    .proj article{grid-template-columns:1fr;gap:12px}
  }
  h2{max-width:none}
  .faq{max-width:none}
  .faq .a{max-width:none}

  /* =========================================================
     Helle Fassung.
     Dieselbe Gestaltung wie Nachtblau, nur umgedreht: heller
     Grund, Tiefblau als Schrift, Blau als einzige Signalfarbe.
     Steht bewusst am Ende, damit sie die dunklen Regeln
     ueberschreibt und der Aufbau darueber unveraendert bleibt.
     ========================================================= */
  :root{
    --bg:#F5F8FC;
    --bg2:#FFFFFF;
    --panel:#FFFFFF;
    --line:#DBE3ED;
    --text:#0D1B2A;
    --muted:#4C5D73;
    --cyan:#0EA5E9;
    --blue:#0284C7;
    --deep:#1D4ED8;
    --accent:#1D4ED8;
  }

  body{background:var(--bg);color:var(--text)}
  ::selection{background:rgba(29,78,216,.16)}

  /* Kopf */
  header.scrolled{background:rgba(245,248,252,.85);box-shadow:0 1px 0 var(--line)}
  nav a{color:var(--muted)}
  nav a:hover{color:var(--text)}

  /* Aufmacher: Lichtflaechen bleiben, nur viel leiser */
  .aurora{opacity:.55;filter:blur(80px)}
  .blob.b1{background:radial-gradient(circle at 30% 30%,rgba(56,189,248,.40),transparent 60%)}
  .blob.b2{background:radial-gradient(circle at 60% 40%,rgba(29,78,216,.22),transparent 62%)}
  .blob.b3{background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.26),transparent 60%)}
  /* Statt des Millimeterpapier-Gitters das Zeichen aus dem Logo:
     einmal, gross, sehr leise, rechts wo der Aufmacher leer ist.
     Kein Muster, keine Bewegung, nur eine Flaeche mit Herkunft. */
  .grid-overlay{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24' fill='none'%3E%3Cpath d='M4 2l10 10L4 22' stroke='%231D4ED8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 2l10 10-10 10' stroke='%230EA5E9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right -7vw top 46%;
    background-size:min(52vw,620px) auto;
    -webkit-mask-image:none;
    mask-image:none;
    opacity:.075;
  }
  @media (max-width:820px){
    .grid-overlay{background-position:right -22vw top 58%;background-size:80vw auto;opacity:.06}
  }

  .kicker{background:#fff;border-color:var(--line);color:var(--muted);box-shadow:0 2px 12px rgba(13,27,42,.06)}
  .kicker .dot{background:var(--deep);box-shadow:0 0 10px rgba(29,78,216,.45)}
  /* background-image statt background: die Kurzschreibweise wuerde
     background-clip zuruecksetzen und aus der Schrift einen Block machen */
  h1 .grad{background-image:linear-gradient(92deg,#0284C7,#1D4ED8 55%,#1E3A8A);-webkit-background-clip:text;background-clip:text;color:transparent}
  .trust{color:var(--muted)}
  .trust svg path{stroke:#1D4ED8}

  /* Schaltflaechen */
  .btn-primary{background:linear-gradient(100deg,#0EA5E9,#1D4ED8 70%);color:#fff;box-shadow:0 10px 26px rgba(29,78,216,.26)}
  .btn-primary:hover{box-shadow:0 16px 34px rgba(29,78,216,.34)}
  .btn-ghost{border-color:#C7D3E2;color:var(--text);background:rgba(255,255,255,.7)}
  .btn-ghost:hover{background:#fff}

  /* Abschnitte */
  .sec-kicker{color:var(--deep)}

  /* Leistungskacheln */
  .card{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(13,27,42,.05)}
  .card:hover{border-color:rgba(29,78,216,.35);box-shadow:0 20px 42px rgba(13,27,42,.10)}
  .card::before{background:radial-gradient(420px 180px at var(--mx,50%) -20%,rgba(29,78,216,.09),transparent 70%)}
  .card .icon{background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(29,78,216,.14));border-color:rgba(29,78,216,.24)}
  .card .icon svg path,.card .icon svg circle,.card .icon svg rect{stroke:#1D4ED8}
  .price{color:var(--deep)}

  /* Zahlen */
  .stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat b{background-image:linear-gradient(92deg,#0284C7,#1D4ED8 55%,#1E3A8A);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Ablauf */
  .step::before{background:var(--line)}
  .step .fill{background:linear-gradient(180deg,#0EA5E9,#1D4ED8)}
  .step .num{background:#fff;border-color:rgba(29,78,216,.35);color:var(--deep)}
  .step.visible .num{box-shadow:0 0 0 6px rgba(29,78,216,.10)}

  /* Person */
  .person{background:#fff;border-color:var(--line);box-shadow:0 12px 44px rgba(13,27,42,.07)}
  .portrait{border-color:rgba(29,78,216,.22)}
  .person cite{color:var(--muted)}

  /* Fuss */
  footer{border-top:1px solid var(--line);color:var(--muted)}
  .foot .claim{color:var(--text)}

  /* Ergaenzte Bausteine */
  .skip{background:var(--text);color:#fff}
  .klartext{background:#fff;border-color:var(--line);box-shadow:0 12px 44px rgba(13,27,42,.07)}
  .klartext .mark{border-left-color:var(--deep);color:var(--text)}
  .proj{border-top-color:var(--line)}
  .proj article{border-bottom-color:var(--line)}
  .vn{color:var(--deep)}
  .faq{border-top-color:var(--line)}
  .faq details{border-bottom-color:var(--line)}
  .faq summary:hover{color:var(--deep)}
  .faq summary::after{color:var(--deep)}
  .offen{border-bottom:1px dashed #B45309;color:#8A4708}
  .count.offen{color:transparent;border-bottom:1px dashed #B45309}

  /* =========================================================
     Bausteine für die Unterseiten
     ========================================================= */

  /* Menü für schmale Bildschirme. Die Vorlage hatte keines,
     das Menü verschwand einfach. Bei mehreren Seiten geht das nicht. */
  .burger{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:999px;
    padding:10px 18px;font:inherit;font-size:.88rem;font-weight:600;color:var(--text);cursor:pointer}
  .mnav{display:none;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(13,27,42,.10)}
  .mnav ul{list-style:none;margin:0;padding:8px 0 16px}
  .mnav a{display:block;padding:14px 24px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);font-size:1.05rem}
  .mnav a[aria-current="page"]{color:var(--deep)}
  .mnav .m-cta{padding:18px 24px 4px}
  header[data-open="true"] .mnav{display:block}
  header[data-open="true"]{background:#fff}

  nav.mainnav a[aria-current="page"]{color:var(--text)}
  nav.mainnav a[aria-current="page"]::after{width:100%}

  /* Kopf der Unterseiten */
  .seitenkopf{padding:150px 24px 56px;position:relative}
  .seitenkopf .marke{color:var(--deep);font-weight:600;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase}
  .seitenkopf h1{font-size:clamp(2.1rem,4.8vw,3.5rem);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:16px 0 20px;max-width:22ch}
  .seitenkopf .lead{max-width:64ch}

  /* Leistungsblöcke */
  .leistung{border-top:1px solid var(--line);padding-top:26px;margin-bottom:76px;scroll-margin-top:110px}
  .leistung .nr{color:var(--deep);font-weight:600;font-size:.88rem;letter-spacing:.14em}
  .leistung h2{margin:12px 0 20px}
  .leistung-inhalt{display:grid;grid-template-columns:1fr 21rem;gap:44px;align-items:start}
  .leistung-inhalt p{color:var(--muted)}
  .leistung-inhalt p + p{margin-top:14px}
  .fuerwen{border-left:2px solid var(--deep);padding-left:18px;color:var(--text);margin-bottom:22px}
  .merkkasten{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:0 10px 34px rgba(13,27,42,.06)}
  .merkkasten h3{font-size:1rem;margin-bottom:14px}
  .merkkasten ul{margin:0;padding-left:20px;color:var(--muted);font-size:.95rem}
  .merkkasten li{margin-bottom:9px}
  .merkkasten li:last-child{margin-bottom:0}

  /* Fallstudien */
  .fall{border-top:1px solid var(--line);padding-top:26px;margin-bottom:76px;scroll-margin-top:110px}
  .fall .nr{color:var(--deep);font-weight:600;font-size:.88rem;letter-spacing:.14em}
  .fall h2{margin:12px 0 0}
  .fall-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
  .fall-raster > div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
  .fall-raster h3{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin-bottom:10px;font-weight:600}
  .fall-raster p{color:var(--muted);font-size:.95rem}
  .fall-zahlen{display:flex;flex-wrap:wrap;gap:36px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
  .fall-zahlen b{display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;
    background-image:linear-gradient(92deg,#0284C7,#1D4ED8 55%,#1E3A8A);-webkit-background-clip:text;background-clip:text;color:transparent}
  .fall-zahlen span{color:var(--muted);font-size:.85rem}

  /* Kontaktangaben */
  .kontaktraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px;margin-top:36px;border-top:1px solid var(--line);padding-top:28px}
  .kontaktraster dt{color:var(--deep);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:7px}
  .kontaktraster dd{margin:0}
  .kontaktraster a{color:var(--deep);text-decoration:none;border-bottom:1px solid rgba(29,78,216,.35)}
  .kontaktraster a:hover{border-bottom-color:var(--deep)}

  /* Fließtext für die Rechtsseiten */
  .prose{max-width:78ch;padding-bottom:110px}
  .prose h2{font-size:1.2rem;margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
  .prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
  .prose p,.prose li{color:var(--muted)}
  .prose p{margin-bottom:1em}
  .prose ul{padding-left:20px;margin-bottom:1em}
  .prose li{margin-bottom:7px}
  .prose a{color:var(--deep);text-decoration:none;border-bottom:1px solid rgba(29,78,216,.35)}
  .prose .stand{margin-top:38px;border-top:1px solid var(--line);padding-top:16px;font-size:.9rem}

  @media (max-width:820px){
    .burger{display:block}
    .leistung-inhalt{grid-template-columns:1fr;gap:28px}
    .fall-raster{grid-template-columns:1fr}
    .seitenkopf{padding:120px 20px 44px}
  }

  .weiter{display:inline-flex;align-items:center;gap:8px;color:var(--deep);text-decoration:none;font-weight:600;
    border-bottom:1px solid rgba(29,78,216,.35);transition:border-color .2s}
  .weiter:hover{border-bottom-color:var(--deep)}
  .weiter::after{content:"→";transition:transform .2s}
  .weiter:hover::after{transform:translateX(4px)}

  /* Bildmarke im Kopf: M und Chevron aus dem Logo */
  .brandmark{height:32px;width:auto;flex:none}
  .brand{gap:12px}
  @media (max-width:520px){ .brandmark{height:27px} }

  /* Personenblock über die volle Breite des Containers */
  .person blockquote{max-width:none}
  .person p{max-width:none}
  .person cite{max-width:none}

  /* Das Zeichen steht jetzt allein, darf also etwas groesser sein */
  .brandmark{height:38px}
  @media (max-width:520px){ .brandmark{height:32px} }

  /* Durchgehend linksbündig. In der Urvorlage waren der Zahlen-Abschnitt,
     der Schlussblock und der Personenblock auf schmalen Schirmen zentriert,
     das brach den Rhythmus der Seite. */
  .stat-grid{text-align:left}
  .stat span{margin-inline:0;max-width:30ch}
  .ctaband{text-align:left}
  .ctaband h2{margin-inline:0}
  .ctaband .lead{margin-inline:0}
  @media (max-width:820px){
    .person{text-align:left;justify-items:start}
  }

  /* =========================================================
     Siegel Austrian Standards
     ========================================================= */
  .siegel{display:block;height:auto;mix-blend-mode:multiply}
  .trust .siegel{width:46px;flex:none}
  .trust-siegel{display:inline-flex;align-items:center;gap:12px}
  .merkkasten .siegel{width:104px;margin-bottom:16px}

  /* =========================================================
     Schaubild: so funktioniert eine Wissensdatenbank
     Der Ablauf haengt am Scrollstand. Ohne JavaScript und bei
     abgeschalteter Bewegung steht der Endzustand da, dann ist
     das Schaubild ein Bild statt eines Films.
     ========================================================= */
  .rag{--einsaug:1;--ausgabe:1;padding:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .rag-bahn{position:relative;height:420vh}
  .rag-fest{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .rag-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;width:100%}
  .rag-text h2{margin:14px 0 22px}
  .rag-schritte{display:grid;gap:14px;margin:0;padding:0;list-style:none;counter-reset:rs}
  .rag-schritte li{display:grid;grid-template-columns:34px 1fr;gap:14px;color:var(--muted);
    opacity:.32;transition:opacity .45s ease,color .45s ease}
  .rag-schritte li::before{counter-increment:rs;content:"0" counter(rs);font-weight:700;font-size:.85rem;
    color:var(--line);padding-top:3px;transition:color .45s ease}
  .rag-schritte li.aktiv{opacity:1;color:var(--text)}
  .rag-schritte li.aktiv::before{color:var(--deep)}
  .rag-schritte b{display:block;font-weight:600;margin-bottom:2px}

  /* Bühne */
  .rag-buehne{position:relative;height:min(60vh,460px);border:1px solid var(--line);border-radius:var(--radius);
    background:linear-gradient(180deg,#FBFCFE,#F3F7FC);overflow:hidden}
  /* left und top statt translate: Prozentwerte in translate beziehen sich
     auf die eigene Groesse des Kaertchens, hier soll die Buehne zaehlen. */
  .rag-chip{position:absolute;
    left:calc(50% + var(--x) * (1 - var(--einsaug)));
    top:calc(50% + var(--y) * (1 - var(--einsaug)));
    background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:.72rem;
    color:var(--muted);white-space:nowrap;box-shadow:0 4px 14px rgba(13,27,42,.06);
    transform:translate(-50%,-50%) scale(calc(1 - var(--einsaug) * .5));
    opacity:clamp(0, calc((1 - var(--einsaug)) * 2.2), 1);
    transition:left .12s linear,top .12s linear,transform .12s linear,opacity .12s linear}
  .rag-kern{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(.72 + var(--einsaug) * .28));
    width:min(78%,340px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:20px 22px;box-shadow:0 16px 44px rgba(13,27,42,.10);
    /* Der Kern verschwindet schneller als die Antwort kommt, sonst liegen
       beide kurz halbdurchsichtig uebereinander. */
    opacity:calc(var(--einsaug) * (1 - min(1, var(--sortiert) * 2)));transition:opacity .12s linear,transform .12s linear}
  .rag-kern .kern-titel{font-weight:600;font-size:1rem;margin-bottom:12px}
  .rag-balken{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
  .rag-balken i{display:block;height:100%;width:calc(var(--einsaug) * 100%);
    background:linear-gradient(90deg,#0EA5E9,#1D4ED8)}
  .rag-kern .kern-zahl{margin-top:10px;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

  .rag-antwort{position:absolute;left:50%;top:50%;width:min(88%,420px);
    transform:translate(-50%,calc(-50% + (1 - var(--ausgabe)) * 26px));
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
    box-shadow:0 16px 44px rgba(13,27,42,.10);opacity:calc(max(0, var(--ausgabe) - .3) / .7);
    transition:opacity .12s linear,transform .12s linear}
  .rag-frage{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:600;margin-bottom:12px}
  .rag-frage span{color:var(--deep)}
  .rag-antwort p{font-size:.9rem;color:var(--muted);margin-bottom:14px}
  .rag-quellen{display:grid;gap:7px;border-top:1px solid var(--line);padding-top:12px}
  .rag-quellen span{display:flex;gap:9px;align-items:center;font-size:.76rem;color:var(--muted)}
  .rag-quellen span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--deep);flex:none}
  .rag-fuss{margin-top:22px;font-size:.9rem;color:var(--muted)}

  @media (max-width:900px){
    .rag-inner{grid-template-columns:1fr;gap:26px}
    .rag-bahn{height:360vh}
    .rag-fest{height:auto;min-height:100vh;padding-block:70px}
    .rag-buehne{height:340px}
  }
  @media (prefers-reduced-motion:reduce){
    .rag-bahn{height:auto}
    .rag-fest{position:static;height:auto;padding-block:90px}
    .rag-schritte li{opacity:1;color:var(--text)}
    .rag-schritte li::before{color:var(--deep)}
  }

  /* Sortiert abgelegt: was beim Vektorisieren passiert, als Bild.
     Ähnliches liegt beieinander, mal viele Stellen, mal wenige. */
  .rag{--sortiert:1}
  .rag-buehne{height:min(70vh,540px)}
  .rag-lager{position:absolute;left:50%;top:50%;width:min(92%,470px);
    transform:translate(-50%,calc(-50% - var(--ausgabe) * 58%)) scale(calc(.94 + var(--sortiert) * .06));
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
    box-shadow:0 16px 44px rgba(13,27,42,.10);opacity:var(--sortiert);
    transition:opacity .12s linear,transform .12s linear}
  .lager-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    font-weight:600;font-size:.95rem;margin-bottom:14px}
  .lager-kopf span{font-weight:400;font-size:.8rem;color:var(--muted)}
  .lager-kopf b{color:var(--deep);font-variant-numeric:tabular-nums}
  .lager-gruppen{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .gruppe{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#FBFCFE}
  .g-titel{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);margin-bottom:8px;font-weight:600}
  .punkte{display:flex;flex-wrap:wrap;gap:4px}
  .punkte i{width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,#38BDF8,#1D4ED8);
    transform:scale(var(--sortiert));transition:transform .18s ease}

  /* Die Antwort sitzt darunter, nicht anstelle des Lagers */
  .rag-antwort{top:auto;bottom:5%;transform:translate(-50%,calc((1 - var(--ausgabe)) * 22px))}

  @media (max-width:900px){
    .rag-buehne{height:420px}
    .lager-gruppen{grid-template-columns:1fr}
    .gruppe:nth-child(n+3){display:none}
  }

  /* Der Abschnitt hat padding:0, damit der Sticky-Bereich die volle Hoehe hat.
     Die seitlichen Abstaende muessen deshalb hier wieder rein, sonst steht
     das Schaubild 24 Pixel weiter links als alle anderen Abschnitte. */
  .rag-fest{padding-inline:24px}
  @media (max-width:820px){ .rag-fest{padding-inline:20px} }

  /* Der Aufmacher hatte den seitlichen Abstand doppelt: einmal vom Abschnitt,
     einmal von sich selbst. Dadurch stand er weiter rechts als alles darunter.
     Der eigene Abstand faellt weg, die Maximalbreite bleibt wie bei .wrap. */
  .hero-inner{max-width:1120px;padding-inline:0}

  /* =========================================================
     Punkte wachsen mit dem Scrollen
     Jeder Punkt kennt seine Nummer (--i), jede Gruppe ihre Anzahl (--n).
     Sobald der Fuellstand die Nummer erreicht, klappt der Punkt auf.
     Alle Gruppen wachsen gleichzeitig, dadurch sieht man das Verhaeltnis:
     viele Stellen zu einem Thema, wenige zu einem anderen.
     ========================================================= */
  .rag{--fuell:1}
  .punkte i{
    opacity:clamp(0, calc(var(--fuell) * var(--n) - var(--i)), 1);
    transform:scale(clamp(.35, calc(var(--fuell) * var(--n) - var(--i)), 1));
    transition:opacity .18s ease,transform .18s ease}
  .punkte i:nth-child(3n){background:linear-gradient(135deg,#7DD3FC,#2563EB)}
  .punkte i:nth-child(4n){background:linear-gradient(135deg,#38BDF8,#0284C7)}
  .lager-zahl{font-variant-numeric:tabular-nums}

  /* =========================================================
     Chat: Frage und Antwort werden getippt
     ========================================================= */
  .rag-chat{position:absolute;left:50%;bottom:4%;width:min(94%,470px);
    transform:translate(-50%,calc((1 - var(--ausgabe)) * 18px));
    opacity:calc(min(1, var(--ausgabe) * 6));
    display:grid;gap:10px;transition:opacity .12s linear,transform .12s linear}
  .chat-zeile{display:flex}
  .chat-zeile.ich{justify-content:flex-end}
  .chat-zeile.system{justify-content:flex-start}
  .blase{max-width:88%;border-radius:16px;padding:11px 14px;font-size:.86rem;line-height:1.5;
    box-shadow:0 8px 26px rgba(13,27,42,.09)}
  .ich .blase{background:linear-gradient(120deg,#0EA5E9,#1D4ED8);color:#fff;border-bottom-right-radius:5px}
  .system .blase{background:#fff;border:1px solid var(--line);color:var(--text);border-bottom-left-radius:5px}
  .strich{display:none;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
    background:currentColor;animation:blinken 1s steps(1) infinite}
  .blase.tippend .strich{display:inline-block}
  @keyframes blinken{50%{opacity:0}}
  /* Die Quellen belegen erst Platz, wenn sie kommen, sonst steht unter
     der Antwort ein leeres Feld. Deshalb waechst die Blase mit. */
  .rag-chat .rag-quellen{
    overflow:hidden;
    max-height:calc(var(--quellen,1) * 90px);
    margin-top:calc(var(--quellen,1) * 10px);
    padding-top:calc(var(--quellen,1) * 9px);
    border-top:1px solid rgba(219,227,237,var(--quellen,1));
    opacity:var(--quellen,1);
    transition:max-height .2s ease,opacity .18s ease,margin-top .2s ease,padding-top .2s ease}
  .rag-chat .rag-quellen span{font-size:.72rem}

  @media (max-width:900px){
    .blase{font-size:.8rem;max-width:92%}
    .rag-chat{width:96%}
  }

  /* =========================================================
     Ablauf, zweite Fassung.
     Die Linie zeichnet sich mit dem Scrollen (--gang laeuft von
     0 bis 1), jeder Schritt springt an, sobald die Linie seinen
     Kreis erreicht: Kreis fuellt sich mit dem Blauverlauf, ein
     Ring pulst einmal, der Text wird kraeftig.
     Ohne JavaScript ist alles gefuellt und kraeftig.
     ========================================================= */
  .steps{--gang:1;--n:4}
  .step:nth-child(1){--i:0}.step:nth-child(2){--i:1}
  .step:nth-child(3){--i:2}.step:nth-child(4){--i:3}

  .step{padding:0 0 52px 82px;transition:opacity .35s ease,transform .35s ease}
  .step:last-child{padding-bottom:0}
  .js .step{opacity:.35;transform:translateX(-6px)}
  .js .step.an{opacity:1;transform:none}

  /* Grundlinie und gezeichnete Linie zur neuen Kreisgroesse */
  .step::before{left:23px;top:54px;bottom:6px;width:2px}
  .step .fill{left:23px;top:54px;bottom:6px;width:2px;
    transform:scaleY(clamp(0, calc(var(--gang) * var(--n) - var(--i)), 1));
    transition:none}

  /* Nummernkreis: ohne Skript gefuellt, mit Skript erst grau, dann blau */
  .step .num{width:48px;height:48px;font-size:1.05rem;font-weight:700;
    border:2px solid transparent;color:#fff;
    background:linear-gradient(135deg,#0EA5E9,#1D4ED8);
    box-shadow:0 10px 24px rgba(29,78,216,.28);
    transition:background-color .25s ease,color .25s ease,border-color .25s ease,
      box-shadow .25s ease,transform .25s ease}
  .js .step .num{background:#fff;border-color:var(--line);color:var(--muted);box-shadow:none}
  .js .step.an .num{border-color:transparent;color:#fff;
    background:linear-gradient(135deg,#0EA5E9,#1D4ED8);
    box-shadow:0 10px 24px rgba(29,78,216,.35);transform:scale(1.08)}

  /* Ring, der beim Anspringen einmal nach aussen pulst */
  .step .num::after{content:"";position:absolute;inset:-3px;border-radius:50%;
    border:2px solid rgba(14,165,233,.55);opacity:0}
  .js .step.an .num::after{animation:ringpuls .7s ease forwards}
  @keyframes ringpuls{
    0%{transform:scale(.9);opacity:.9}
    100%{transform:scale(1.65);opacity:0}}

  .step h3{font-size:1.2rem}

  @media (prefers-reduced-motion:reduce){
    .js .step{opacity:1;transform:none}
    .js .step .num{border-color:transparent;color:#fff;
      background:linear-gradient(135deg,#0EA5E9,#1D4ED8);
      box-shadow:0 10px 24px rgba(29,78,216,.28)}
    .js .step.an .num::after{animation:none}
    .step .fill{transform:scaleY(1)}
  }

  /* Die Urvorlage hat ".step.visible .fill" auf voll gesetzt, das ist
     spezifischer als die Scroll-Regel und hat sie ueberschrieben.
     Deshalb hier mit gleicher Gewichtung noch einmal, nach ihr. */
  .steps .step .fill,.steps .step.visible .fill{
    transform:scaleY(clamp(0, calc(var(--gang) * var(--n) - var(--i)), 1));
    transition:none}
  @media (prefers-reduced-motion:reduce){
    .steps .step .fill,.steps .step.visible .fill{transform:scaleY(1)}
  }

  /* =========================================================
     Lesbarkeit: Fliesstext rund 15 Prozent groesser.
     html hebt die Grundgroesse, die Textklassen ziehen nach.
     ========================================================= */
  html{font-size:17px}
  .leistung-inhalt p{font-size:1.07rem;line-height:1.7}
  .person p{font-size:1.05rem;line-height:1.7}
  .lead{font-size:1.12rem}
  .merkkasten ul{font-size:1rem}
  .faq .a{font-size:1.04rem}

  /* Das Zitat ist die Marke, es darf gross sein */
  .person blockquote{font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.42;font-weight:600;letter-spacing:-.015em;max-width:none}

  /* Liste "Wobei ich Unternehmen unterstuetze" */
  .nutzenliste{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
  .nutzenliste li{position:relative;padding-left:32px;color:var(--muted);font-size:1.05rem;line-height:1.5}
  .nutzenliste li::before{content:"";position:absolute;left:0;top:.18em;width:19px;height:19px;border-radius:6px;
    background:linear-gradient(135deg,#0EA5E9,#1D4ED8);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
  @media (max-width:680px){ .nutzenliste{grid-template-columns:1fr} }

  /* Seitenkoepfe ohne Breitenbegrenzung, die Ueberschriften muessen
     in einer Zeile stehen (Vorgabe von Martin) */
  .seitenkopf h1{max-width:none}

  /* Lange Einzelwoerter wie "Geschäftsbedingungen" duerfen sich auf
     schmalen Schirmen trennen, sonst schieben sie die Seite breit */
  @media (max-width:600px){
    .seitenkopf h1{hyphens:auto;overflow-wrap:break-word}
  }

  /* Gespraechsreihe auf der Kontaktseite: bewusst anders als die
     Zeitachse bei den Leistungen, damit sich nichts wiederholt */
  .gespraech{list-style:none;counter-reset:g;margin:44px 0 0;padding:0;
    display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
  .gespraech li{border-top:2px solid var(--line);padding-top:16px}
  .gespraech li::before{counter-increment:g;content:"0" counter(g);
    color:var(--deep);font-weight:700;font-size:.92rem;letter-spacing:.06em}
  .gespraech h3{font-size:1.1rem;margin:8px 0 6px}
  .gespraech p{color:var(--muted);font-size:1rem;line-height:1.6}
  @media (max-width:860px){ .gespraech{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .gespraech{grid-template-columns:1fr} }

  /* =========================================================
     Martins Vorgabe: Text nutzt immer die gesamte verfuegbare
     Breite. Hier werden saemtliche Lesebreiten-Begrenzungen
     aufgehoben, an einer Stelle statt verstreut.
     ========================================================= */
  h1,h2,
  .sub,.lead,.seitenkopf .lead,
  .stat span,.step p,
  .klartext p,.klartext .mark,
  .person blockquote,
  .faq .a,
  .prose{max-width:none}

  /* =========================================================
     Statischer Schaubild-Kasten auf der RAG-Seite: derselbe
     Endzustand wie das Schaubild der Startseite, nur ohne
     Scroll-Kopplung. Die absoluten Positionen und die an
     Variablen haengenden Deckkraften werden hier aufgehoben.
     ========================================================= */
  .rag-still{background:linear-gradient(180deg,#FBFCFE,#F3F7FC);border:1px solid var(--line);
    border-radius:var(--radius);padding:clamp(18px,2.6vw,30px);display:grid;gap:16px;align-self:start}
  .rag-still .rag-lager,.rag-still .rag-chat{position:static;transform:none;opacity:1;width:auto;left:auto;top:auto;bottom:auto}
  .rag-still .punkte i{opacity:1;transform:none}
  .rag-still .blase{font-size:.88rem}
  .rag-still .rag-quellen{max-height:none;opacity:1;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
  .rag-still .lager-gruppen{grid-template-columns:1fr 1fr}
  @media (max-width:560px){ .rag-still .lager-gruppen{grid-template-columns:1fr} }

  /* Beispiel-Fragen als ruhiger Einschub */
  .fragebeispiel{border-left:2px solid var(--deep);padding:4px 0 4px 20px;margin:16px 0}
  .fragebeispiel p{font-style:italic;color:var(--text);font-size:1.05rem;margin:0 0 10px}
  .fragebeispiel p:last-child{margin-bottom:0}

  
  
  
  

  
  

  

  
  
  
  
  
  

  

  
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  

  
  

  
  

  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  

  
  

  
  

  
  

  
  

  

  
  
  
  
  
  
  

  /* =========================================================
     Buehne, dritte Anordnung: schmaler Kern mittig, Dateien
     schweben langsam rundherum und werden schwebend eingesaugt,
     Regal rechts, Chat mittig unter dem Kern, Protokoll als
     Ticker im Kern statt als Stapel.
     ========================================================= */

  
  
  

  
  
  

  
  
  
  
  
  
  
  
  

  
  
  
  

  
  

  
  
  
  
  
  

  
  
  
  
  
  

  
  
  
  

  
  
  
  

  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  
  

  
  
  

  
  
  
  
  
  
  
  
  

  
  
  
  
  

  
  
  
  
  

  
  

  
  
  

  /* Schaubild Startseite: die gerade laufende Stufe wird fett gesetzt,
     damit auf einen Blick klar ist, wo man im Ablauf steht */
  .js .step h3{font-weight:600;transition:font-weight .2s,color .35s}
  .js .step.an h3{font-weight:800;color:var(--text)}
  .js .step.an p{color:var(--text);font-weight:500}
  @media (prefers-reduced-motion:reduce){ .js .step h3{font-weight:700} }

  /* Startseite: die gerade laufende Stufe wird fett gesetzt */
  .rag-schritte li.aktiv b{font-weight:800}
  .rag-schritte li.aktiv span{font-weight:500}
  @media (prefers-reduced-motion:reduce){ .rag-schritte li b{font-weight:700} }

/* =========================================================
   Vektorraum: die Schaubuehne der RAG-Seite. Eine Leinwand mit
   1.946 Punkten, einer je Dokument, alles am Scrollstand.
   Ohne JavaScript bleibt die Buehne weg, der Text erklaert alles.
   ========================================================= */
.vr{--vr-bg:var(--bg);--vr-text:var(--text);--vr-muted:var(--muted);--vr-line:var(--line);--vr-karte:#fff;
  --vr-deep:#1D4ED8;--vr-cyan:#22D3EE;--vr-sky:#0EA5E9;--vr-teal:#0891B2;--vr-navy:#1E3A8A;
  background:var(--vr-bg);border-block:1px solid var(--line)}
.vr[data-grund="dunkel"]{--vr-bg:#0D1B2A;--vr-text:#E7EDF4;--vr-muted:#94A6BC;--vr-line:rgba(255,255,255,.14);--vr-karte:#12233A;
  --vr-deep:#60A5FA;--vr-sky:#38BDF8;--vr-teal:#2DD4BF;--vr-navy:#93C5FD}
html:not(.js) .vr{display:none}
.vr-bahn{position:relative;height:720vh}
.vr-fest{position:sticky;top:0;height:100vh;padding-top:80px;overflow:hidden}
.vr-leinwand{position:absolute;left:0;top:80px;width:100%;height:calc(100% - 80px)}
.vr-mono{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vr-muted)}
.vr-status{position:absolute;left:50%;top:80px;transform:translateX(-50%);width:min(1120px,100%);padding:14px 0 12px;
  display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--vr-line)}
@media (max-width:1168px){.vr-status{padding-inline:24px}}
.vr-phase{color:var(--vr-deep)}
.vr-balken{flex:1;height:2px;background:var(--vr-line);position:relative}
.vr-balken i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);background:linear-gradient(90deg,var(--vr-cyan),var(--vr-deep))}
.vr-zahl{color:var(--vr-text)}
.vr-zahl b{color:var(--vr-deep);font-weight:700}
.vr-schalter{display:flex;gap:6px;margin-left:8px}
.vr-schalter button{font:inherit;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--vr-line);background:var(--vr-karte);color:var(--vr-muted);cursor:pointer}
.vr-schalter button[aria-pressed="true"]{background:var(--vr-deep);border-color:var(--vr-deep);color:#fff}
.vr[data-grund="dunkel"] .vr-schalter button[aria-pressed="true"]{color:#04121F}
.vr-chat{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(520px,92vw);display:grid;gap:8px;opacity:0}
.vr-zeile{display:flex;opacity:0}
.vr-ich{justify-content:flex-end}
.vr-blase{max-width:92%;padding:10px 14px;border-radius:12px;font-size:.95rem;line-height:1.4;position:relative}
.vr-ich .vr-blase{background:linear-gradient(90deg,#0EA5E9,#1D4ED8);color:#fff;border-bottom-right-radius:4px}
.vr-system .vr-blase{background:var(--vr-karte);color:var(--vr-text);border:1px solid var(--vr-line);border-bottom-left-radius:4px;box-shadow:0 10px 30px rgba(13,27,42,.08)}
.vr-strich{display:none;width:2px;height:1em;background:currentColor;vertical-align:-2px;margin-left:2px;animation:vr-blink .8s steps(1) infinite}
.vr-tippend .vr-strich{display:inline-block}
@keyframes vr-blink{50%{opacity:0}}
.vr-quellen{margin-top:8px;padding-top:8px;border-top:1px solid var(--vr-line);display:grid;gap:4px;font-size:.85rem;color:var(--vr-muted);opacity:0}
.vr-quellen span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--vr-deep);margin-right:8px;vertical-align:1px}
@media (max-width:700px){
  .vr-status{gap:10px;flex-wrap:wrap}
  .vr-gruppen,.vr-prozent{display:none}
  .vr-schalter{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){ .vr-strich{animation:none} }

/* Zwei Darstellungen in einer Buehne: Vektorraum (Leinwand) und Schaltplan (SVG) */
.vr-plan{position:absolute;left:50%;top:132px;transform:translateX(-50%);width:min(1120px,100%);height:calc(100vh - 132px - 250px);max-height:600px;overflow:visible}
.vr[data-ansicht="plan"] .vr-leinwand{display:none}
.vr:not([data-ansicht="plan"]) .vr-plan{display:none}
.vr-plan text{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:11px;letter-spacing:.12em;fill:var(--vr-muted)}
.vr-plan .top{fill:var(--vr-karte);stroke:var(--vr-line)}
.vr-plan .links{fill:var(--vr-flanke1,#EEF3F9);stroke:var(--vr-line)}
.vr-plan .rechts{fill:var(--vr-flanke2,#E2EAF3);stroke:var(--vr-line)}
.vr[data-grund="dunkel"]{--vr-flanke1:#0F1F33;--vr-flanke2:#0B1828;--vr-aktiv:#123B5A}
.vr-plan .station.aktiv .top{fill:var(--vr-aktiv,#E0F2FE)}
.vr-plan .station.aktiv text{fill:var(--vr-deep);font-weight:700}
.vr-plan .dok{fill:var(--vr-karte);stroke:var(--vr-muted);stroke-width:.8}
.vr-plan .zelle{fill:var(--vr-deep)}
.vr-plan .zelle.treffer{fill:var(--vr-cyan)}
.vr-plan .punkt{fill:var(--vr-deep)}
.vr-plan .frage-punkt{fill:var(--vr-teal)}
.vr-plan .faden{stroke:var(--vr-teal);stroke-width:1;fill:none;stroke-dasharray:4 6;animation:vr-lauf .5s linear infinite}
.vr-plan .faden.zurueck{stroke:var(--vr-deep);animation-direction:reverse}
@keyframes vr-lauf{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.vr-plan .faden{animation:none}}
.vr-ansicht{margin-left:auto}
.vr-schalter+.vr-schalter{margin-left:8px}
@media (max-width:700px){ .vr-ansicht button,.vr-schalter button{padding:5px 9px;font-size:.75rem} }

/* Wer spricht: Beschriftung neben den Blasen */
.vr-zeile{align-items:center;gap:10px}
.vr-wer{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--vr-muted);white-space:nowrap;flex:0 0 auto}
.vr-ich{flex-direction:row-reverse}
.vr-ich .vr-wer{text-align:right}
.vr-blase{max-width:none;flex:1 1 auto}
.vr-chat{width:min(680px,94vw)}
@media (max-width:600px){ .vr-wer{display:none} }

/* Beschriftung in einer schmalen Spalte links, beide Blasen gleich breit und buendig */
.vr-zeile{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px;flex-direction:row}
.vr-ich{flex-direction:row}
.vr-wer,.vr-ich .vr-wer{text-align:right}
.vr-blase{width:100%;max-width:none}
@media (max-width:600px){ .vr-zeile{grid-template-columns:1fr} }

/* Kapitel ohne Merkkasten laufen ueber die volle Breite: die rechte
   Spalte gibt es nur, wenn dort wirklich ein zweites Element steht */
.leistung-inhalt{grid-template-columns:1fr}
.leistung-inhalt:has(> :nth-child(2)){grid-template-columns:1fr 21rem}
@media (max-width:900px){ .leistung-inhalt:has(> :nth-child(2)){grid-template-columns:1fr} }

/* Quellenliste braucht erst Platz, wenn sie kommt: so bleibt die Antwortblase
   waehrend des Tippens klein */
.vr-quellen{max-height:0;overflow:hidden;margin-top:0;padding-top:0;border-top-width:0}
.vr-quellen.vr-da{max-height:200px;margin-top:8px;padding-top:8px;border-top-width:1px}

/* Kapitel mit Merkkasten: Text laeuft immer ueber die volle Breite,
   der Kasten steht darunter, seine Punkte in zwei Spalten */
.leistung-inhalt,.leistung-inhalt:has(> :nth-child(2)){grid-template-columns:1fr;gap:26px}
.leistung-inhalt .merkkasten{margin-top:6px}
.leistung-inhalt .merkkasten ul{columns:2;column-gap:36px}
.leistung-inhalt .merkkasten li{break-inside:avoid}
.leistung-inhalt .merkkasten .siegel{float:none}
@media (max-width:700px){ .leistung-inhalt .merkkasten ul{columns:1} }

/* =========================================================
   Beitraege: Uebersicht, Einzelseite, Kaesten auf Start und Themen
   ========================================================= */
.beitrag-meta{color:var(--muted);font-size:.95rem;margin-top:14px}
.prose.beitrag{max-width:none;padding-bottom:40px;font-size:1.07rem;line-height:1.7}
.prose.beitrag h2{font-size:1.45rem;border-top:0;padding-top:0;margin:38px 0 12px}
.prose.beitrag h3{font-size:1.15rem;margin:26px 0 8px}
.prose.beitrag p{margin-bottom:16px}
.prose.beitrag ul,.prose.beitrag ol{margin:0 0 16px 22px}
.prose.beitrag li{margin-bottom:6px}
.prose.beitrag img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:8px 0 18px}
.prose.beitrag blockquote{margin:22px 0;padding:6px 0 6px 20px;border-left:3px solid var(--deep);color:var(--muted)}
.prose.beitrag pre{background:#0D1B2A;color:#E7EDF4;padding:16px 18px;border-radius:12px;overflow:auto;font-size:.9rem;margin:0 0 18px}
.prose.beitrag code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:.92em}
.prose.beitrag p code,.prose.beitrag li code{background:#fff;border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.prose.beitrag .tabelle{overflow-x:auto;margin:0 0 18px}
.prose.beitrag table{border-collapse:collapse;width:100%;font-size:.98rem}
.prose.beitrag th,.prose.beitrag td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose.beitrag th{color:var(--muted);font-weight:600;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.prose.beitrag hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.beitrag-nachbarn{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:26px 0 90px;border-top:1px solid var(--line)}
.beitrag-nachbarn a{color:var(--text);text-decoration:none;font-weight:600}
.beitrag-nachbarn a span{display:block;color:var(--muted);font-weight:400;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.beitrag-nachbarn .rechts{text-align:right}
.beitrag-nachbarn .alle{color:var(--deep);font-size:.95rem}
@media (max-width:700px){.beitrag-nachbarn{grid-template-columns:1fr;text-align:left}.beitrag-nachbarn .rechts{text-align:left}}
.themenfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.themenfilter button{font:inherit;font-size:.9rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.themenfilter button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.beitraege-liste{display:grid;gap:0}
.beitrag-karte{padding:26px 0;border-top:1px solid var(--line)}
.beitrag-karte:last-child{border-bottom:1px solid var(--line)}
.beitrag-karte[hidden]{display:none}
.beitrag-kopf{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;color:var(--muted);font-size:.9rem;margin:0 0 8px}
.beitrag-kopf .thema{color:var(--deep);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.beitrag-karte h2{font-size:1.4rem;margin:0 0 8px}
.beitrag-karte h2 a{color:var(--text);text-decoration:none}
.beitrag-karte h2 a:hover{color:var(--deep)}
.beitrag-karte p{color:var(--muted)}
.beitraege-neu .beitrag-vorschau{display:block;color:inherit;text-decoration:none}
.beitraege-neu .beitrag-vorschau h3{margin:8px 0 8px}
.beitraege-neu .beitrag-vorschau p:last-child{color:var(--muted)}
.themen-beitraege{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:.98rem}
.themen-beitraege span{font-weight:600;color:var(--text)}
.themen-beitraege a{color:var(--deep);text-decoration:none;font-weight:600}

/* Die senkrechte Bildlaufleiste ist immer da, auch auf kurzen Seiten.
   Sonst springt der Inhalt beim Seitenwechsel um die Leistenbreite nach links. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){ body{min-height:calc(100vh + 1px)} }
.seitenkopf .lead code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;font-size:.92em;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px}

/* Verweise, die zu einer anderen Seite führen, sehen wie Knöpfe aus.
   Reine Textverweise mitten im Satz bleiben Textverweise. */
.weiter{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(13,27,42,.05);transition:border-color .2s,box-shadow .2s,transform .12s}
.weiter:hover{border-color:var(--deep);border-bottom-color:var(--deep);box-shadow:0 6px 18px rgba(29,78,216,.12)}
.weiter:active{transform:translateY(1px)}
.weiter:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
/* im Fließtext, dort wäre ein Knopf zu laut */
.prose .weiter,.weiter-inline{padding:0;border:0;border-bottom:1px solid rgba(29,78,216,.35);border-radius:0;background:none;box-shadow:none}
.prose .weiter:hover,.weiter-inline:hover{border-bottom-color:var(--deep);box-shadow:none}