@import "spido-tokens.css";
/* Die Design Tokens stehen bewusst als Import ganz oben: dadurch sind
   sie auf jeder Seite verfuegbar, die app.css laedt - das sind alle. */

/* Spido – gemeinsame Shell (Tokens, Sidebar, Layout, Typografie, Bausteine).

   Visuelle Ueberarbeitung 04.09.2026. Struktur, Menuefuehrung und Funktionalitaet
   sind unveraendert; jeder Selektor der bisherigen Fassung existiert weiter, damit
   keine Seite bricht. Geaendert ist die Gestaltung.

   Leitgedanke: offene Flaeche statt Kaesten. Zusammengehoerigkeit entsteht durch
   Position, Abstand und Typografie - nicht durch Rahmen und Schatten. Ein Container
   bleibt nur dort, wo er eine Funktion hat (Formularflaeche, Preisblock, Ablagefeld,
   Dateiliste). Alles Uebrige liegt frei auf der Seite.
*/
  :root{
    --violet:var(--spido-purple-tief); --violet-600:var(--spido-purple);
    --violet-500:var(--spido-purple-hell); --violet-050:var(--spido-purple-050);

    /* Bestaetigung und Vertrauen trugen frueher ein Teal. Es kommt in der
       Spido-Palette nicht vor; an seine Stelle tritt das Gruen der
       Journey. Die alten Namen bleiben, damit keine Seite bricht. */
    --teal:var(--spido-gruen); --teal-050:var(--spido-salbei-050);

    /* Warme Textstufen statt kuehler Graustufen - der Grund ist warm,
       ein blaustichiges Grau darauf wirkt schmutzig. */
    --ink:var(--spido-text); --muted:var(--spido-text-leise);
    --soft:var(--spido-text-2);
    --line:var(--spido-linie); /* nur fuer echte Trennungen, nicht fuer Kaesten */
    --bg:var(--spido-bg); --card:#ffffff;
    --radius:var(--spido-radius-karte);
    --shadow:none;           /* Standard ist schattenlos; Schatten nur gezielt */
    --shadow-btn:0 6px 22px rgba(109,40,217,.22);

    /* Abstandsraster, 8er-Schritte. Grosszuegig statt dicht. */
    --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  }
  *{box-sizing:border-box}
  /* Eine display-Angabe im Autoren-Stylesheet schlaegt das display:none
     des Browsers fuer [hidden]. Auf weissem Grund fiel das nicht auf,
     auf dem warmen schon: verborgene Bloecke standen als leere weisse
     Kaesten da. */
  [hidden]{display:none!important}
  html,body{margin:0}
  body{font-family:var(--spido-font);
    color:var(--ink);background:var(--bg);line-height:1.6;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  a{color:inherit;text-decoration:none}
  .app{display:grid;grid-template-columns:292px 1fr;min-height:100vh;align-items:start}

  /* Sidebar - traegt die Marke und die Navigation, sonst nichts.
     Die Trennung zum Inhalt entsteht ueber einen Tonwert, nicht ueber eine Linie. */
  .side{background:#fbfaff;padding:34px 22px;display:flex;flex-direction:column;gap:38px;
    position:sticky;top:0;height:100vh;overflow-y:auto}
  .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:23px;
    color:var(--violet);letter-spacing:-.01em}
  .brand .spark{width:26px;height:26px}
  .nav{display:flex;flex-direction:column;gap:2px}
  .nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
    color:#4a4e63;font-weight:500;font-size:15px;white-space:nowrap;
    transition:background .12s,color .12s}
  .nav a.active{background:#fff;color:var(--violet-600);font-weight:650}
  .nav a:hover:not(.active){background:rgba(255,255,255,.7);color:var(--ink)}
  .nav svg{width:18px;height:18px;opacity:.7}
  .nav a.active svg{opacity:1}

  /* Der Hinweiskasten in der Seitenleiste ist eine echte Gruppierung und darf
     einer bleiben - aber leise: kein Rahmen, nur eine getoente Flaeche. */
  .promo{margin-top:auto;background:var(--teal-050);border-radius:18px;padding:20px}
  .promo .gift{width:30px;height:30px;color:var(--teal)}
  .promo h4{margin:12px 0 6px;color:var(--spido-gruen);font-size:16px;font-weight:650}
  .promo p{margin:0;color:var(--soft);font-size:14px;line-height:1.5}
  .promo .go{margin-top:14px;display:inline-flex;width:36px;height:36px;border-radius:50%;
    background:var(--teal);color:#fff;align-items:center;justify-content:center}
  .foot-dsgvo{font-size:13px;color:var(--muted);line-height:1.5}
  .foot-dsgvo a{color:var(--violet-600);font-weight:600}

  /* Hauptflaeche - viel Rand, damit der Inhalt atmen kann. */
  .main{position:relative;padding:56px 64px 80px}
  /* Statt eines kraeftigen Verlaufs ein sehr leiser Schimmer, der die Marke
     andeutet und den Blick nach oben zieht. Kein zweiter Hintergrund. */
  .hero-bg{position:absolute;inset:0 0 auto 0;height:420px;pointer-events:none;z-index:0;
    background:radial-gradient(120% 100% at 12% 0%, rgba(124,58,237,.07) 0%, rgba(124,58,237,0) 62%)}
  .topbar{position:relative;z-index:1;display:flex;justify-content:flex-end;gap:10px;
    margin-bottom:12px}
  .icon-btn{width:40px;height:40px;border-radius:50%;background:transparent;border:none;
    display:flex;align-items:center;justify-content:center;color:var(--spido-text-leise);transition:background .12s}
  .icon-btn:hover{background:#f4f2fb}
  .icon-btn.pri{background:var(--violet-600);color:#fff}
  .icon-btn.pri:hover{background:var(--violet-500)}

  /* Textmass: rund 62 Zeichen fuer Fliesstext, breiter fuer Raster. */
  .content{position:relative;z-index:1;max-width:940px;margin:0 auto}

  /* Typografie traegt die Hierarchie - nicht Rahmen, nicht Farbflaechen. */
  h1{font-size:54px;line-height:1.06;margin:18px 0 var(--s2);font-weight:700;
    letter-spacing:-.025em}
  h1 .accent{color:var(--violet-600)}
  h2{font-size:32px;line-height:1.18;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
  h3{font-size:19px;font-weight:650;letter-spacing:-.01em}
  .lede{font-size:21px;line-height:1.55;color:var(--soft);max-width:60ch;
    margin:0 0 var(--s5);font-weight:400}
  .sub{color:var(--soft);font-size:17px;margin:0 0 var(--s4)}

  /* Ein Abschnitt wird durch Abstand abgesetzt, nicht durch einen Kasten. */
  .cards2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4);
    margin-bottom:var(--s5)}
  /* KEIN Kasten mehr. Die Karte ist jetzt eine reine Gruppierung im Raster. */
  .card{background:none;border:none;border-radius:0;padding:0;box-shadow:none}
  .card h3{margin:0 0 var(--s3);font-size:19px;font-weight:650}
  .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
  .list li{display:flex;align-items:flex-start;gap:15px;font-size:17px;line-height:1.5}
  .list .ic{width:30px;height:30px;border-radius:9px;background:var(--violet-050);
    color:var(--violet-600);display:flex;align-items:center;justify-content:center;
    flex:0 0 30px;margin-top:1px}
  .list .ic svg{width:16px;height:16px}
  .list li.audio .ic{background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief)}
  .hint{margin-top:var(--s3);font-size:15px;color:var(--muted);display:flex;gap:9px;
    line-height:1.5}

  /* Der Preisblock ist eine echte funktionale Einheit und bleibt eine Flaeche -
     aber ohne Rahmen und ohne Schatten, nur ueber einen Tonwert abgesetzt. */
  .cta{margin:var(--s5) 0 0;background:var(--spido-bg-2);border:none;border-radius:var(--radius);
    box-shadow:none;padding:var(--s4) var(--s4);display:grid;
    grid-template-columns:1fr minmax(340px,420px);gap:var(--s4);align-items:center}
  .cta .h{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:650;
    font-size:22px;line-height:1.3}
  .price{font-size:44px;font-weight:700;margin:var(--s2) 0 0;letter-spacing:-.02em}
  .price small{font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0}
  .checks{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;
    gap:9px;color:var(--soft);font-size:16px}
  .checks li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
    background:var(--teal);margin-right:12px;vertical-align:middle}
  .btn{display:inline-flex;align-items:center;gap:10px;background:var(--violet-600);color:#fff;
    font-weight:600;font-size:17px;border:none;border-radius:14px;padding:18px 30px;
    box-shadow:var(--shadow-btn);cursor:pointer;transition:background .12s,transform .12s}
  .btn:hover{background:var(--violet-500)}
  .btn:active{transform:translateY(1px)}
  .pay{margin-top:var(--s3);display:flex;align-items:center;gap:16px;color:var(--muted);
    font-size:14px;flex-wrap:wrap}
  .pay b{font-weight:600;color:var(--soft)}

  /* Sekundaere Information: leise, in einer Zeile, ohne Kasten. */
  .trust{position:relative;z-index:1;margin-top:var(--s4);display:flex;gap:var(--s4);
    color:var(--muted);font-size:15px;flex-wrap:wrap}
  .trust span{display:flex;align-items:center;gap:9px}
  .trust svg{width:17px;height:17px;color:var(--teal)}

  /* Vorschau-Hinweis: macht unmissverstaendlich, dass hier nichts gekauft
     oder verarbeitet wird. Sitzt ueber dem gesamten Layout. Ruhiger als zuvor,
     aber weiterhin unuebersehbar. */
  .previewbar{position:sticky;top:0;z-index:50;background:#231c33;color:#e7e2f5;
    padding:11px 18px;font-size:14px;text-align:center;line-height:1.45;font-weight:400}
  .previewbar b{font-weight:650;color:#fff}
  .previewbar a{color:#c4b5fd;font-weight:600;text-decoration:underline}

  /* Rechtlicher Footer, auf jeder Seite */
  .sitefoot{position:relative;z-index:1;margin-top:var(--s6);padding-top:var(--s3);
    border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;
    align-items:center;color:var(--muted);font-size:14px}
  .sitefoot a{color:var(--muted);font-weight:500}
  .sitefoot a:hover{color:var(--violet-600)}
  .sitefoot .sep{opacity:.35}

  /* Vorabueberweisung - Zahlen brauchen Ruhe, keinen Rahmen. */
  .bank{margin-top:var(--s3);text-align:left;background:var(--violet-050);border:none;
    border-radius:16px;padding:var(--s3) 26px}
  .bank h4{margin:0 0 14px;font-size:13px;color:var(--violet-600);
    text-transform:uppercase;letter-spacing:.08em;font-weight:650}
  .bank dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:16px}
  .bank dt{color:var(--muted)}
  .bank dd{margin:0;font-weight:600;color:var(--ink)}
  .bank dd.todo{color:var(--spido-terracotta-tief);font-weight:500;font-style:italic}
  .bank .bank-note{margin:16px 0 0;font-size:14px;color:var(--muted)}
  .bank .bank-warn{margin:14px 0 0;padding:11px 13px;background:var(--spido-terracotta-hell);border:none;
    border-radius:10px;font-size:14px;color:#8a4d0b;font-weight:500}
  .bank dd.iban{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap;font-size:16px}
  .soon{margin-top:var(--s2);font-size:14px;color:var(--muted);text-align:left}
  .soon b{color:var(--soft);font-weight:600}
  .b2b{margin-top:var(--s2);font-size:14px;color:var(--muted)}

  /* Schritt-Karten: keine Karten mehr. Die Nummer traegt die Gliederung,
     der Abstand die Trennung. */
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s2)}
  .stepcard{background:none;border:none;border-radius:0;padding:0;box-shadow:none}
  .stepcard .num{width:auto;height:auto;border-radius:0;background:none;
    color:var(--violet-600);font-weight:700;font-size:15px;letter-spacing:.1em;
    display:block;margin-bottom:14px}
  .stepcard h3{margin:0 0 10px;font-size:21px;font-weight:650;letter-spacing:-.01em}
  .stepcard p{margin:0;color:var(--soft);font-size:16.5px;line-height:1.6}
  .prose{max-width:64ch}
  .prose p{font-size:18px;line-height:1.7;color:var(--soft);margin:0 0 var(--s3)}

  /* Hinweis: statt Kasten eine ruhige Flaeche mit farbiger Kante links. */
  .note{background:none;border:none;border-left:2px solid var(--teal);border-radius:0;
    padding:2px 0 2px 24px;margin:var(--s4) 0;color:var(--soft);font-size:17px;
    line-height:1.6;max-width:62ch}
  .note strong{color:var(--spido-gruen);font-weight:650}

  /* Stepper (Schritt 1-3) */
  .steps{display:flex;align-items:center;justify-content:center;gap:0;margin:var(--s2) 0 10px}
  .steps .dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:14px;font-weight:600;background:#f2f0f9;border:none;
    color:#9aa0ac;flex:0 0 32px}
  .steps .dot.on{background:var(--violet-600);color:#fff}
  .steps .bar{width:96px;height:2px;background:#eceaf4}
  .steps .bar.on{background:var(--violet-600)}
  .stepcap{text-align:center;color:var(--muted);font-size:15px;margin-bottom:var(--s4)}
  .steps .dot.done{background:var(--teal);color:#fff}
  @media(max-width:900px){ .steps .bar{width:52px} }

  /* Formularfelder - hier ist der Rahmen funktional: er zeigt, wo man tippt. */
  .field{text-align:left;margin-bottom:var(--s2)}
  .field label{display:block;font-weight:600;font-size:15px;margin-bottom:9px;color:var(--ink)}
  .field input{width:100%;padding:15px 17px;border:1px solid var(--spido-linie);border-radius:13px;
    font-size:17px;font-family:inherit;color:var(--ink);background:#fff;letter-spacing:.02em}
  .field input::placeholder{color:var(--spido-text-leise);letter-spacing:normal}
  .field input:focus{outline:none;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(124,58,237,.13)}
  .field input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
  .field input:disabled{background:var(--spido-bg-2);color:var(--spido-text-leise)}
  .msg{text-align:left;font-size:14px;margin:9px 0 0;min-height:19px}
  .msg.err{color:#b91c1c}
  .msg.warn{color:var(--spido-terracotta-tief)}

  /* --- Demo-Flow (Schritt 2/3 und Ergebnis) --- */
  .demobar{background:var(--spido-terracotta-hell);border:none;border-radius:12px;padding:13px 16px;
    color:#8a4d0b;font-size:14px;font-weight:500;margin:0 auto var(--s4);max-width:680px;
    text-align:center}
  .flowwrap{max-width:680px;margin:0 auto}
  /* Die Formularflaeche ist eine echte Einheit und bleibt eine - ohne Rahmen,
     nur ueber Weiss gegen den leicht getoenten Grund abgesetzt. */
  .flowcard{background:#fff;border:none;border-radius:var(--radius);box-shadow:none;
    padding:var(--s4) var(--s4)}
  .flowcard h2{font-size:30px;font-weight:700;margin:0 0 10px;letter-spacing:-.02em}
  .flowcard .sub{color:var(--soft);font-size:17px;margin:0 0 var(--s4)}
  .kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:16px;
    background:var(--violet-050);border:none;border-radius:16px;padding:var(--s3) 26px}
  .kv dt{color:var(--muted)}
  .kv dd{margin:0;font-weight:600}
  .kv dd.mono{font-variant-numeric:tabular-nums;white-space:nowrap}

  /* Upload - das Ablagefeld muss als Flaeche erkennbar sein, der Rahmen bleibt. */
  .drop{border:1.5px dashed #d5cdf0;border-radius:18px;background:#fcfbff;padding:var(--s4) var(--s3);
    text-align:center;cursor:pointer;transition:.15s}
  .drop:hover,.drop.over{border-color:var(--violet-500);background:var(--violet-050)}
  .drop svg{width:36px;height:36px;color:var(--violet-500)}
  .drop p{margin:14px 0 4px;font-weight:600;font-size:17px}
  .drop small{color:var(--muted);font-size:14.5px}
  .files{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
  /* Dateizeilen: keine Kaestchen, nur eine feine Trennung. */
  .files li{display:flex;align-items:center;gap:13px;background:none;border:none;
    border-bottom:1px solid var(--line);border-radius:0;padding:14px 2px;font-size:16px}
  .files li:last-child{border-bottom:none}
  .files .fok{color:var(--teal);font-weight:700;flex:0 0 auto}
  .files .fname{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .files .fsize{color:var(--muted);font-size:14px;margin-left:auto;white-space:nowrap}
  .files .rm{background:none;border:none;color:#b91c1c;cursor:pointer;font-size:17px;
    line-height:1;padding:2px 4px}
  .consent{display:flex;gap:12px;align-items:flex-start;background:none;border:none;
    border-left:2px solid var(--teal);border-radius:0;padding:2px 0 2px 20px;
    margin:var(--s3) 0 0;font-size:16px;color:var(--soft);line-height:1.55}
  .consent input{margin-top:4px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--teal)}

  /* Registrierung: Gruppenueberschriften, PLZ/Ort nebeneinander, Augen-Symbol. */
  .fgroup{font-size:15px;font-weight:650;color:var(--muted);text-transform:uppercase;
    letter-spacing:.07em;margin:var(--s4) 0 var(--s2);padding-top:var(--s3);
    border-top:1px solid var(--line)}
  .flowcard .fgroup:first-of-type{border-top:none;padding-top:0;margin-top:var(--s3)}
  .fzeile{display:grid;grid-template-columns:34% 1fr;gap:14px}
  .fhint{margin:7px 0 0;font-size:14px;color:var(--muted)}
  .field select{width:100%;padding:15px 17px;border:1px solid var(--spido-linie);border-radius:13px;
    font-family:inherit;font-size:16.5px;color:var(--ink);background:#fff;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 17px center;background-size:12px}
  .field select:focus{outline:none;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(124,58,237,.13)}
  .pwbox{position:relative}
  .pwbox input{padding-right:54px}
  .pwauge{position:absolute;right:7px;top:50%;transform:translateY(-50%);background:none;
    border:none;cursor:pointer;line-height:0;padding:9px 11px;opacity:.5;color:var(--ink)}
  .pwauge svg{width:20px;height:20px;display:block}
  .pwauge:hover{opacity:1}
  .pwauge.an{opacity:1;color:var(--violet-600)}
  .vereinbarung{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;font-size:16px;
    text-align:left;line-height:1.55}
  .vereinbarung input{margin-top:3px;width:19px;height:19px;flex:0 0 19px;accent-color:var(--violet-600)}
  .vereinbarung a{color:var(--violet-600);font-weight:600}
  .dshinweis{margin:var(--s2) 0 0;font-size:14px;color:var(--muted);text-align:left}
  .dshinweis a{color:var(--violet-600);font-weight:600}
  @media(max-width:640px){ .fzeile{grid-template-columns:1fr} }
  .btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
  .btnrow{display:flex;gap:14px;align-items:center;margin-top:var(--s4)}
  .btn.ghost{background:none;color:var(--violet-600);border:none;box-shadow:none;
    font-weight:600;padding:18px 10px}
  .btn.ghost:hover{background:none;color:var(--violet-500);text-decoration:underline}

  /* Die Dokumentliste stand hier ein zweites Mal - mit eigener
     Ausrichtung und einer fest eingebauten Einrueckung von 58 px fuer
     die Aktion. Zusammen mit den Regeln in spido-basis.css ergab das
     mehrere Layoutmuster in derselben Liste: Je nach Titellaenge und
     Breite sass die Nummer ueber dem Titel, und "Oeffnen und
     bearbeiten" rutschte nach rechts.

     Die Zeile hat jetzt genau eine Definition, und zwar dort:
     spido-basis.css, Abschnitt "DIE DOKUMENTZEILE". */

  /* Beispieldokument */
  .doksheet{background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:var(--s3);font-size:15px;line-height:1.6}

  /* Abschluss-Claim - reine Typografie, kein Kasten. */
  .claim{margin:var(--s6) 0 0;background:none;border:none;border-radius:0;padding:0;
    text-align:left}
  .claim .a{font-size:20px;color:var(--muted);margin:0 0 6px;font-weight:400}
  .claim .b{font-size:30px;font-weight:700;color:var(--violet-600);margin:0;
    letter-spacing:-.02em;line-height:1.25}

  /* --- Feedbackschleife und Regelwerk --- */
  .fbitem{margin-bottom:var(--s4)}
  .rule{display:flex;gap:16px;align-items:flex-start;border:none;
    border-bottom:1px solid var(--line);border-radius:0;padding:var(--s3) 2px;
    margin-bottom:0;background:none}
  .rule.aus{opacity:.5;background:none}
  .rule .rt{font-weight:600;font-size:17px;margin:0 0 4px}
  .rule .rm2{font-size:15px;color:var(--muted);margin:0}
  .rule .acts{margin-left:auto;display:flex;gap:12px;align-items:center;flex:0 0 auto}
  .lnk{background:none;border:none;color:var(--violet-600);font-weight:600;font-size:15px;
    cursor:pointer;padding:0}
  .badge{display:inline-block;background:none;border:none;color:var(--violet-600);
    border-radius:0;padding:0;font-size:14px;font-weight:650;letter-spacing:.09em;
    text-transform:uppercase;vertical-align:middle}
  .meta{font-size:14px;color:var(--muted);margin:0 0 var(--s2)}
  .empty{color:var(--muted);font-size:17px;padding:var(--s4) 0}
  .verdict{display:flex;gap:12px;flex-wrap:wrap;margin:var(--s2) 0 0}
  .vbtn{border:1px solid var(--spido-linie);background:#fff;border-radius:12px;padding:11px 18px;
    font-size:16px;font-family:inherit;cursor:pointer;color:var(--soft)}
  .vbtn.sel{border-color:var(--violet-600);color:var(--violet-600);font-weight:600}

  /* Einladungshinweis und Jubelmeldung - leise, ohne Kasten. */
  .einladung{display:flex;align-items:center;gap:12px;margin:0 0 var(--s3);
    font-size:16px;color:var(--soft)}
  .einladung b{color:var(--ink);font-weight:650}
  .einladung-zu{margin-left:auto;background:none;border:none;color:var(--muted);
    font-size:14px;cursor:pointer;text-decoration:underline}
  .einladung-zu:hover{color:var(--ink)}
  .jubel{background:var(--teal-050);border:none;border-radius:16px;padding:var(--s3) 26px;
    margin:0 0 var(--s3);font-size:17px;color:var(--spido-gruen)}
  .jubel b{font-weight:650}

  /* Empfehlungsfenster */
  .reffenster{border:none;border-radius:var(--radius);padding:var(--s4);max-width:520px;
    box-shadow:0 24px 60px rgba(30,20,80,.16)}
  .reffenster::backdrop{background:rgba(22,23,42,.42)}
  .reffenster h3{font-size:24px;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}
  .reffenster .reflink{font-size:15px;background:var(--spido-bg-2);border-radius:12px;padding:14px 16px;
    word-break:break-all;color:var(--soft)}
  .reffenster .refbetreff{margin-top:var(--s2);font-size:15px}
  .reffenster .refbetreff span{color:var(--muted)}
  .refvorschau{margin:var(--s2) 0 0;font-size:15px;color:var(--soft)}
  .refvorschau p{margin:0 0 8px}
  .refvorschau p:last-child{margin-bottom:0}
  .refcta{display:inline-flex;align-items:center;gap:9px;background:var(--violet-600);
    color:#fff;border:none;border-radius:13px;padding:15px 24px;font-size:16px;
    font-weight:600;cursor:pointer;box-shadow:var(--shadow-btn)}
  .refcta:hover{background:var(--violet-500)}
  .refklein{font-size:14px;color:var(--muted);margin-top:var(--s2)}
  .refwege{display:flex;gap:14px;flex-wrap:wrap;margin-top:var(--s2)}

  /* Rechtstext-Seiten - lange Fliesstexte brauchen Mass und Ruhe. */
  .legal{max-width:62ch}
  .legal h2{font-size:26px;margin:var(--s5) 0 12px}
  .legal h3{font-size:19px;margin:var(--s4) 0 10px}
  .legal p,.legal li{font-size:17px;line-height:1.7;color:var(--soft)}
  .legal ul{padding-left:22px}
  .prop{margin-bottom:var(--s4)}
  .prop .meta{font-size:14px;color:var(--muted);margin:0 0 12px}

  /* Mobil: Seitenleiste ueber den Inhalt, Raender kleiner, Schrift bleibt gross. */
  @media(max-width:900px){
    .app{grid-template-columns:1fr}
    .side{flex-direction:row;align-items:center;gap:var(--s3);padding:16px 20px;flex-wrap:wrap}
    .nav{flex-direction:row;flex-wrap:wrap;gap:2px}
    .promo,.foot-dsgvo{display:none}
    .main{padding:var(--s4) 22px var(--s5)}
    h1{font-size:38px;max-width:none}
    h2{font-size:26px}
    .lede{font-size:19px;margin-bottom:var(--s4)}
    .cards2,.cards3{grid-template-columns:1fr;gap:var(--s4)}
    .cta{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}
    .price{font-size:38px}
    .claim .b{font-size:25px}
  }

  /* Nachgetragen 04.09.2026: Regeln, die in der Ueberarbeitung zunaechst
     untergegangen waren. Gleiche Formensprache - Flaeche statt Rahmen. */
  .legal .back{display:inline-block;margin-bottom:var(--s3);color:var(--muted);
    font-weight:500;font-size:15px}
  .legal .back:hover{color:var(--violet-600)}
  .legal .box{background:var(--spido-bg-2);border:none;border-radius:16px;
    padding:var(--s3) 26px;margin:var(--s3) 0}
  .legal .box p{margin:6px 0}
  .lnk.del{color:#b91c1c}
  .prop .q{font-size:14px;color:var(--muted);margin:0 0 6px}
  .prop .r{font-weight:600;font-size:17px;margin:0 0 6px}

  /* --- Uebernommen aus dem Branch (Otto, 03./04.09.2026) und an die neue
         Formensprache angeglichen: gleiche Aussage, weniger Rahmen. --- */

  /* Empfehlungs-Karte. Julia am 03.09.2026: "das lila ist zu dominant, bitte
     heller schattieren". Bleibt hell - jetzt ohne Rahmen und ohne Schatten,
     die getoente Flaeche traegt allein. */
  .refkarte{position:relative;border-radius:18px;padding:var(--s3) 26px var(--s3) 84px;
    background:var(--violet-050);border:none;color:var(--soft);
    box-shadow:none;font-size:16.5px;line-height:1.55}
  .refkarte strong{color:var(--violet-600);font-size:17.5px;font-weight:650}
  .refkarte .refgift{position:absolute;left:24px;top:24px;width:44px;height:44px;
    padding:9px;box-sizing:border-box;background:#fff;border-radius:13px;
    color:var(--violet-600);box-shadow:none}
  .refkarte a{color:var(--violet-600);font-weight:600}

  /* Mandantenbereich: Unterreiter. Die Pillenform ist Julias Entscheidung vom
     03.09.2026 und bleibt; angeglichen sind nur Groesse und Rahmen. */
  .mtabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 var(--s4)}
  .mtabs a{padding:10px 18px;border:none;border-radius:999px;
    background:#f5f3fb;font-size:15px;font-weight:500;color:var(--soft);
    transition:background .12s,color .12s}
  .mtabs a:hover{background:var(--spido-bg-2);color:var(--ink)}
  .mtabs a.on{background:var(--violet-600);color:#fff;font-weight:600}

  /* Unterschrift am Pad (Erstgespraech aufnehmen). Der gestrichelte Rahmen ist
     hier funktional - er zeigt die Zeichenflaeche. */
  .sigpad{display:block;width:100%;height:170px;border:1.5px dashed #d5cdf0;
    border-radius:14px;background:#fff;touch-action:none;cursor:crosshair}