/* Wortfang Website- und Wizard-Styles.
   Knopf-Innenabstaende sind nahezu gleich: Inters Versalhoehe sitzt mittig
   in der Zeile. Die frueheren 3px Unterschied waren eine Korrektur fuer
   Akkurat und muessten hier wieder heraus.
   Design-Stand: Handoff vom 11.08.2026 (Design/README.md).
   Primary #202967 nur fuer Primary Actions, Logo, Auswahl-Zustaende.
   Schriften: Inter (UI), Unna (Ueberschriften), Caveat (Signatur), alle lokal. */

/* Inter statt Akkurat (17.08.): Den Akkurat-Dateien fehlte das grosse Ae,
   und ohne Umlaut ist eine deutsche Oberflaeche nicht zu machen. Inter ist
   eine variable Schrift von 100 bis 900, steht unter der Open Font License
   und liegt wie alle anderen lokal auf unserem Server. Zwei Ausschnitte mit
   unicode-range: Der Browser laedt nur, was die Seite wirklich braucht. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Unna';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/unna-regular.woff2') format('woff2');}
@font-face{font-family:'Unna';font-style:italic;font-weight:400;font-display:swap;src:url('/static/fonts/unna-italic.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/caveat-500.woff2') format('woff2');}
/* Handschrift fuer die Signatur auf dem Polaroid. Wie alle Schriften hier
   lokal ausgeliefert, damit kein Aufruf zu Google geht. Shadows Into Light
   Two steht unter der Open Font License. */
@font-face{font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/shadows-into-light-two.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Shadows Into Light Two';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/shadows-into-light-two-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --primary:#202967;
  --primary-tief:#192051;
  --primary-hauch:rgba(32,41,103,.07);
  --primary-rand:rgba(32,41,103,.28);
  --ink:#1C1722;
  --text-mid:#655F6D;
  --text-soft:#9A94A2;
  --grund:#FFFFFF;
  --flaeche:#F8F7FA;
  --flaeche-tief:#F1EFF4;
  --rahmen:#E7E4EC;
  --gruen:#1F8A5B;
  --warnrot:#C24540;
  --schrift:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Unna','PP Editorial New','Hoefler Text',Didot,Georgia,serif;
  --hand:'Caveat','Segoe Script','Bradley Hand',cursive;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{background:var(--grund);-webkit-font-smoothing:antialiased;font-family:var(--schrift);color:var(--ink);font-size:16px;line-height:1.55;}
h1,h2,h3,h4,p,ol,ul,figure,blockquote{margin:0;padding:0;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;}
a{color:var(--primary);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--primary-tief);}
summary{list-style:none;cursor:pointer;}
summary::-webkit-details-marker{display:none;}
::placeholder{color:var(--text-soft);}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
::selection{background:rgba(32,41,103,.16);}
img{max-width:100%;}

@keyframes wfSchweb{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes wfBalken{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
@keyframes wfAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wfMarker{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes wfWiege{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wz-dreh{to{transform:rotate(360deg);}}
@keyframes wfPlop{0%{transform:scale(0);opacity:0}45%{transform:scale(1.24);opacity:1}68%{transform:scale(.93)}84%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes wfHaken{from{stroke-dashoffset:34}to{stroke-dashoffset:0}}
@keyframes wfRing{0%{transform:scale(.55);opacity:.5}100%{transform:scale(2.3);opacity:0}}
@keyframes wfKonf{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}18%{opacity:1}70%{opacity:1}100%{transform:translate(-50%,-50%) translateY(-52px) scale(.8) rotate(200deg);opacity:0}}

/* ══ Landing ══ */

.ld-wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,32px);}

/* Buttons */
.ld-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:13px 22px 12px;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out;}
.ld-btn:hover{background:var(--primary-tief);color:#fff;transform:translateY(-1px);}
.ld-btn.gross{padding:19px 34px;font-size:17px;}
.ld-btn.mittel{padding:14px 26px;font-size:15px;}
.ld-btn-hell{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);border:1px solid var(--rahmen);border-radius:999px;padding:15px 20px 14px;font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .18s ease-out,border-color .18s ease-out;}
.ld-btn-hell:hover{border-color:#D8D4DE;background:#FCFBFD;color:var(--ink);}

/* Header */
.ld-kopf{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rahmen);}
.ld-kopf-innen{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,32px);min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap;}
.ld-kopf-innen>a:first-child{display:block;}
/* Die Schleife oben in der Wortmarke traegt schon optische Luft, deshalb sitzt sie hoeher als geometrisch mittig. */
.ld-wortmarke{height:33px;width:auto;display:block;margin-top:-5px;}
.ld-kopf-rechts{display:flex;align-items:center;gap:20px;position:relative;flex:none;}

/* Inline-Navigation mit Pacman-Verhalten: je schmaler der Viewport,
   desto mehr Punkte wandern in das Burger-Menue. */
/* Pacman-Navigation: Die Zeile bekommt den freien Platz, und was nicht
   hineinpasst, raeumt landing.js ins Burgermenue um. Feste Haltepunkte
   waeren immer entweder zu frueh oder zu spaet. */
.ld-nav{display:flex;align-items:center;gap:28px;flex:1;min-width:0;overflow:hidden;margin-left:22px;}
.ld-nav a{font-size:15px;color:var(--text-mid);white-space:nowrap;}
.ld-nav a:hover{color:var(--primary);}
/* Logo und rechte Gruppe schrumpfen nie, sonst verschwindet die Wortmarke, bevor der erste Menuepunkt weicht. */
.ld-kopf-innen > a[aria-label]{flex:none;}
/* Das gelieferte Docx-Icon traegt seine Farbe ueber currentColor. */
.wz-docx-icon{color:var(--primary);display:block;}
.ld-burger-zone{position:relative;display:flex;align-items:center;}
.ld-burger{width:42px;height:42px;border-radius:999px;background:#fff;border:1px solid var(--rahmen);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:border-color .16s ease-out;}
.ld-burger:hover{border-color:var(--primary-rand);}
/* Aus drei Strichen wird ein Kreuz, in zwei Phasen statt in einer:
   erst rutschen die aeusseren Striche zusammen, dann drehen sie sich.
   Beim Schliessen laeuft es genau rueckwaerts. Rutschen und Drehen sind
   getrennte Eigenschaften, nur so lassen sie sich einzeln verzoegern;
   als eine transform-Angabe liefen sie gleichzeitig und die Striche
   beschrieben einen Bogen. */
/* Drehpunkt als Schluesselwort, nicht als Zahl: Manche Browser messen
   12px 12px ab der Ecke des Pfad-Rahmens statt ab der Ecke der Zeichnung,
   und bei einer waagerechten Linie ohne Hoehe landet der Punkt dann weit
   rechts. "center" trifft in beiden Auslegungen die Mitte der Linie. */
.ld-burger .strich{transform-origin:center;transform-box:fill-box;
  transition:translate .18s ease-out .15s, rotate .19s ease-out, scale .19s ease-out, opacity .14s ease-out .12s;}
.ld-burger[aria-expanded="true"] .strich{
  transition:translate .18s ease-out, rotate .19s ease-out .16s, scale .19s ease-out .16s, opacity .1s ease-out;}
.ld-burger[aria-expanded="true"] .oben{translate:0 7px;rotate:45deg;scale:.88;}
.ld-burger[aria-expanded="true"] .mitte{opacity:0;}
.ld-burger[aria-expanded="true"] .unten{translate:0 -7px;rotate:-45deg;scale:.88;}

/* Aeltere Browser kennen die Einzel-Eigenschaften nicht: Dort wird das
   Kreuz in einem Zug gebildet, ohne Ueberschwingen. */
@supports not (rotate: 45deg){
  .ld-burger .strich{transition:transform .22s ease-out,opacity .14s ease-out;}
  .ld-burger[aria-expanded="true"] .oben{transform:translateY(7px) rotate(45deg) scale(.88);}
  .ld-burger[aria-expanded="true"] .unten{transform:translateY(-7px) rotate(-45deg) scale(.88);}
}
.ld-menue{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--rahmen);border-radius:18px;box-shadow:0 14px 30px rgba(28,23,34,.08);padding:10px;min-width:230px;display:flex;flex-direction:column;z-index:50;}
.ld-menue a{display:block;padding:11px 14px;border-radius:12px;font-size:15px;color:var(--ink);}
.ld-menue a:hover{background:var(--flaeche);color:var(--ink);}

/* Hero */
.ld-hero-zone{position:relative;overflow-x:clip;}
.ld-hero-aura{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 100% at 22% -10%,rgba(32,41,103,.086) 0%,rgba(255,255,255,0) 74%);}
.ld-hero{position:relative;max-width:1080px;margin:0 auto;padding:clamp(56px,7vw,96px) clamp(20px,4vw,32px) clamp(80px,10vw,132px);display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:clamp(44px,5vw,72px);align-items:center;}
.ld-hero-links{animation:wfAuf .7s ease-out both;}
.ld-hero h1{font-family:var(--serif);font-size:clamp(38px,6vw,68px);font-weight:400;line-height:1.02;letter-spacing:-.014em;max-width:15ch;}
.ld-hero-sub{font-size:18.5px;line-height:1.65;color:var(--text-mid);margin-top:30px;max-width:36em;text-wrap:pretty;}
.ld-hero-liste{display:flex;flex-direction:column;gap:14px;margin-top:36px;}
.ld-hero-liste li{display:flex;align-items:center;gap:11px;font-size:15.5px;}
.ld-hero-liste svg{flex:0 0 auto;}
.ld-hero-cta{display:flex;align-items:center;gap:20px;margin-top:42px;flex-wrap:wrap;}
/* Steht seit 17.08. unter dem Knopf, nicht daneben, und tritt dort
   kleiner auf: Es ist eine Fussnote zum Angebot, kein zweites Argument. */
.ld-hero-note{display:block;margin-top:14px;font-size:13.5px;color:var(--text-soft);}

/* Marker in Ueberschriften */
.ld-mark{position:relative;display:inline-block;}
.ld-mark i{position:absolute;inset:16% -4px 10%;border-radius:2px;z-index:0;transform:scaleX(0);transform-origin:left center;transition:transform .82s cubic-bezier(.22,.61,.36,1) .12s;font-style:normal;}
.ld-mark b{position:relative;z-index:1;font-weight:inherit;}
.ld-mark.sichtbar i{transform:scaleX(1);}
.ld-mark-gelb{background:rgba(255,235,0,.5);}
.ld-mark-tuerkis{background:rgba(0,214,242,.42);}
.ld-mark-gruen{background:rgba(45,212,168,.4);}
.ld-mark-pink{background:rgba(255,110,190,.34);}

/* Hero-Dokumentfenster */
.ld-doc-spalte{position:relative;margin-top:clamp(0px,2vw,34px);animation:wfAuf .76s ease-out .14s both;}
.ld-doc-aura{position:absolute;inset:-30% -30% -26% -34%;pointer-events:none;background:radial-gradient(circle closest-side at 46% 46%,rgba(32,41,103,.2) 0%,rgba(32,41,103,.11) 46%,rgba(32,41,103,0) 100%);}
.ld-doc-maske{position:relative;height:clamp(430px,46vw,540px);padding:64px 84px 0 64px;margin:-64px -84px 0 -64px;mask-image:linear-gradient(#000 0%,#000 64%,rgba(0,0,0,.5) 87%,rgba(0,0,0,0) 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 64%,rgba(0,0,0,.5) 87%,rgba(0,0,0,0) 100%);}
.ld-doc{position:absolute;left:64px;right:84px;top:64px;height:820px;background:#fff;border:1px solid var(--rahmen);border-bottom:none;border-radius:16px 16px 0 0;box-shadow:0 26px 58px rgba(28,23,34,.13);overflow:hidden;}
.ld-doc-leiste{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--flaeche);border-bottom:1px solid var(--rahmen);}
.ld-doc-punkte{display:flex;gap:6px;}
.ld-doc-punkte span{width:9px;height:9px;border-radius:999px;background:#D8D4DE;display:block;}
.ld-doc-name{font-size:13px;font-weight:700;color:var(--text-mid);}
.ld-doc-raster{position:relative;display:grid;grid-template-columns:minmax(220px,1fr) minmax(196px,232px);gap:20px;padding:28px 40px 4px 28px;}
.ld-doc-text{font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:2.1;color:var(--ink);}
.ld-doc-unterstrich{text-decoration:underline 1px;text-underline-offset:3px;}
.ld-doc-ziffer{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:999px;background:var(--primary);color:#fff;font-family:var(--schrift);font-size:9.5px;font-weight:700;vertical-align:super;margin:0 3px 0 2px;}
.ld-m1{background-image:linear-gradient(rgba(255,255,0,.5),rgba(255,255,0,.5));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out .9s both;}
.ld-m2{background-image:linear-gradient(rgba(0,255,255,.5),rgba(0,255,255,.5));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.04s both;}
.ld-m3{background-image:linear-gradient(rgba(192,192,192,.6),rgba(192,192,192,.6));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.18s both;}
.ld-m4{background-image:linear-gradient(rgba(255,255,0,.5),rgba(255,255,0,.5));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.32s both;}
.ld-m5{background-image:linear-gradient(rgba(255,255,0,.5),rgba(255,255,0,.5));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.46s both;}
.ld-m6{background-image:linear-gradient(rgba(0,255,255,.5),rgba(0,255,255,.5));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.6s both;}
.ld-m7{background-image:linear-gradient(rgba(192,192,192,.6),rgba(192,192,192,.6));background-repeat:no-repeat;background-size:0% 100%;animation:wfMarker .52s ease-out 1.74s both;}
.ld-doc-seite{display:flex;flex-direction:column;gap:14px;border-left:1px solid var(--rahmen);padding-left:22px;}
.ld-doc-kommentar{position:relative;background:#F6F4F9;border-radius:24px;padding:14px 16px 15px;}
.ld-doc-kommentar.wiege1{animation:wfWiege 7s ease-in-out 1.9s infinite;}
.ld-doc-kommentar.wiege2{animation:wfWiege 8s ease-in-out 2.6s infinite;}
.ld-doc-faden{position:absolute;left:-22px;top:18px;width:21px;border-top:1px dotted #C4BFCC;}
.ld-doc-kommentar-kopf{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.ld-doc-kommentar-kopf .nr{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--primary);color:#fff;font-size:10.5px;font-weight:700;flex:0 0 auto;}
.ld-doc-kommentar-kopf .titel{font-size:12.5px;font-weight:700;color:var(--ink);}
.ld-doc-kommentar p{font-size:12px;line-height:1.55;color:#3F3947;text-wrap:pretty;}

/* Trust-Bar */
.ld-trust{border-top:1px solid var(--rahmen);border-bottom:1px solid var(--rahmen);background:rgba(255,255,255,.6);}
.ld-trust ul{max-width:1080px;margin:0 auto;padding:22px clamp(20px,4vw,32px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 32px;}
.ld-trust li{display:flex;align-items:flex-start;gap:13px;flex:1 1 260px;max-width:340px;}
.ld-trust svg{flex:0 0 auto;margin-top:2px;}
.ld-trust .titel{display:block;font-size:15px;font-weight:700;}
.ld-trust .text{display:block;font-size:13px;line-height:1.5;color:var(--text-soft);margin-top:3px;text-wrap:pretty;}

/* Sektionen */
.ld-sektion{padding:clamp(76px,10vw,132px) clamp(20px,4vw,32px);}
/* Stimmen gehoeren optisch zu den Preisen, deshalb oben knapper. */
.ld-eng-oben{padding-top:clamp(20px,3vw,42px);}
/* Frueher trug jede Sektion ihren eigenen Verlauf und endete auf Weiss.
   An den Stossstellen ergab das sichtbare Kanten. Jetzt liegt EIN weicher
   Verlauf ueber der ganzen Seite, die Sektionen sind durchsichtig. */
.ld-body{background-image:linear-gradient(180deg,
  #fff 0%, #fff 5%,
  var(--flaeche) 20%,
  #fff 36%,
  var(--flaeche) 52%,
  #fff 68%,
  var(--flaeche) 83%,
  #fff 97%);
  background-repeat:no-repeat;background-size:100% 100%;}
.ld-verlauf{background:none;}
.ld-glow-rechts,.ld-glow-links{position:relative;background:none;}
.ld-glow-rechts::before,.ld-glow-links::before{content:'';position:absolute;left:0;right:0;top:-180px;bottom:-180px;pointer-events:none;z-index:-1;}
.ld-glow-rechts::before{background:radial-gradient(70% 46% at 84% 32%,rgba(32,41,103,.055) 0%,rgba(32,41,103,0) 72%);}
.ld-glow-links::before{background:radial-gradient(62% 42% at 12% 22%,rgba(32,41,103,.045) 0%,rgba(32,41,103,0) 70%);}
.ld-sektion h2{font-family:var(--serif);font-size:clamp(30px,5vw,46px);font-weight:400;letter-spacing:-.01em;line-height:1.14;text-align:center;max-width:22ch;margin-left:auto;margin-right:auto;}
.ld-sektion-intro{font-size:17.5px;line-height:1.7;color:var(--text-mid);margin:22px auto 0;max-width:58ch;text-wrap:pretty;text-align:center;}

/* Scroll-Reveal */
.ld-reveal{opacity:0;transform:translateY(14px);transition:opacity .62s ease-out,transform .62s ease-out;}
.ld-reveal.sichtbar{opacity:1;transform:none;}

/* Feature-Karten */
.ld-feature-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px;margin-top:64px;}
.ld-feature{position:relative;overflow:hidden;border-radius:26px;padding:44px 40px 46px;}
.ld-feature.grau{background:linear-gradient(166deg,rgba(28,23,34,.06) 0%,rgba(255,255,255,.55) 40%,#fff 100%);border:1px solid var(--rahmen);}
.ld-feature.lila{background:linear-gradient(166deg,rgba(32,41,103,.08) 0%,rgba(255,255,255,.55) 40%,#fff 100%);border:1px solid rgba(32,41,103,.14);}
.ld-feature-nr{position:absolute;top:20px;right:30px;font-family:var(--serif);font-size:80px;line-height:1;pointer-events:none;}
.ld-feature.grau .ld-feature-nr{color:rgba(28,23,34,.07);}
.ld-feature.lila .ld-feature-nr{color:rgba(32,41,103,.1);}
.ld-feature h3{font-size:23px;font-weight:700;position:relative;padding-right:96px;}
.ld-feature-sub{font-size:16px;color:var(--text-mid);margin-top:14px;text-wrap:pretty;}
.ld-feature-punkte{display:flex;flex-direction:column;gap:26px;margin-top:34px;}
.ld-feature-punkte h4{font-size:15.5px;font-weight:700;}
.ld-feature-punkte p{font-size:14px;line-height:1.6;color:var(--text-mid);margin-top:7px;text-wrap:pretty;}

/* Farbdemo */
.ld-farbdemo{margin-top:24px;background:#fff;border-radius:26px;padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,3vw,44px);align-items:stretch;border:1px solid var(--rahmen);}
.ld-farbdemo h3{font-size:19px;font-weight:700;}
.ld-farbdemo-text{font-size:15.5px;line-height:1.7;color:var(--text-mid);margin-top:10px;text-wrap:pretty;}
.ld-farbwahl{margin-top:14px;max-width:520px;}
.ld-farbdemo-label{font-size:13px;font-weight:700;color:var(--text-soft);margin-top:24px;}
.ld-segment{display:inline-flex;gap:3px;background:var(--flaeche-tief);border-radius:999px;padding:4px;margin-top:18px;}
.ld-segment button{border:none;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .16s ease-out;background:transparent;color:var(--text-mid);}
.ld-segment button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,23,34,.14);}
.ld-farbdemo-caption{font-size:14px;color:var(--text-mid);margin-top:16px;min-height:42px;text-wrap:pretty;}
.ld-farbdemo-doc{background:var(--flaeche);border:1px solid var(--rahmen);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;}
.ld-farbdemo-doc .name{font-size:12px;font-weight:700;color:var(--text-soft);margin-bottom:14px;}
.ld-farbdemo-doc .text{font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:2.05;}
.ld-farbdemo-doc .text mark{background:rgba(255,255,0,.5);border-radius:2px;transition:background .22s ease-out;color:inherit;}

/* Lektorin */
/* Kein Rahmen: Das hier ist keine Karte, sondern nur ein Raster aus
   Portraet und Text. Die Kontur zeichnete ein Rechteck um beides. */
.ld-lektorin-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,4vw,44px);margin-top:52px;align-items:center;}
/* Polaroid statt gerundetem Rahmen: weisser Rand, unten breiter, leicht
   gedreht. Die 3,71 Grad kommen aus Demians Entwurf. */
.ld-portraet{position:relative;max-width:400px;background:#fff;padding:14px 14px 78px;
  border-radius:2px;box-shadow:0 18px 44px rgba(28,23,34,.16);
  transform-origin:center;margin:10px auto;}
/* Das Polaroid wirft sich beim Scrollen von links herein und faellt in
   seine leichte Schraeglage. Die Kurve federt am Ende kurz nach, damit es
   sich anfuehlt, als haette es jemand hingelegt. */
.ld-portraet.ld-reveal{opacity:0;transform:translateX(-90px) rotate(-11deg);
  transition:opacity .5s ease-out,transform .78s cubic-bezier(.22,1.15,.32,1);}
.ld-portraet.ld-reveal.sichtbar{opacity:1;transform:rotate(3.71deg);}
.ld-portraet img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%;border-radius:0;}
.ld-signatur{position:absolute;right:26px;bottom:18px;font-family:'Shadows Into Light Two',var(--hand),cursive;
  font-weight:400;font-size:clamp(26px,3vw,34px);letter-spacing:0;line-height:1;color:var(--primary);}
.ld-lektorin-lead{font-size:21px;line-height:1.6;text-wrap:pretty;}
.ld-zitat{font-family:'Shadows Into Light Two',var(--hand),cursive;font-style:normal;font-size:27px;line-height:1.45;margin-top:30px;padding-left:24px;border-left:2px solid var(--primary-rand);text-wrap:pretty;color:var(--primary);}
.ld-lektorin-text{font-size:16.5px;line-height:1.7;color:var(--text-mid);margin-top:26px;max-width:60ch;text-wrap:pretty;}

/* Preise */
.ld-toggle-zeile{display:flex;justify-content:center;margin-top:36px;}
.ld-toggle{display:inline-flex;align-items:stretch;gap:3px;background:var(--flaeche-tief);border-radius:999px;padding:4px;}
.ld-toggle button{border:none;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;cursor:pointer;text-align:center;transition:background .18s ease-out;background:transparent;color:var(--text-mid);}
.ld-toggle button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,23,34,.14);}
.ld-toggle .spar{display:block;font-size:11px;font-weight:700;line-height:1.1;color:var(--gruen);}
/* ── Stimmen ── */
.ld-stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:32px;}
.ld-stimme{background:#fff;border:1px solid var(--rahmen);border-radius:22px;padding:30px 28px;display:flex;flex-direction:column;gap:20px;}
.ld-stimme blockquote{font-family:var(--schrift);font-size:15.5px;line-height:1.7;letter-spacing:0;margin:0;text-wrap:pretty;color:var(--ink);}
.ld-stimme .name{font-size:14.5px;font-weight:700;}
.ld-stimme .rolle{font-size:13px;color:var(--text-soft);}
/* Platzhalter bleiben sichtbar zurueckhaltend, damit sie niemand fuer eine
   echte Stimme haelt. */
.ld-stimme figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;}
.ld-stimme-bild{width:44px;height:44px;border-radius:999px;flex:none;object-fit:cover;background:var(--flaeche-tief);}
.ld-stimme-text{display:flex;flex-direction:column;gap:2px;min-width:0;}

.ld-feature-punkte > div{padding-left:32px;position:relative;}
.ld-feature-punkte > div > .haken{position:absolute;left:0;top:1px;color:var(--primary);}
.ld-feature-punkte h4{margin-bottom:4px;}

.ld-preis-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:32px;align-items:stretch;}
.ld-preis{background:#fff;border-radius:26px;padding:38px 34px 40px;transition:transform .2s ease-out,box-shadow .2s ease-out;display:flex;flex-direction:column;border:1px solid var(--rahmen);}
.ld-preis:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(28,23,34,.08);}
.ld-preis.beliebt{position:relative;border:1.5px solid var(--primary-rand);box-shadow:0 20px 48px rgba(28,23,34,.08);}
.ld-preis-fahne{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;border-radius:999px;padding:6px 14px 5px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.ld-preis-fahne.leise{background:var(--flaeche-tief);color:var(--text-mid);}
.ld-preis-kopf{min-height:196px;display:flex;flex-direction:column;}
.ld-preis h3{font-size:20px;font-weight:700;}
.ld-preis-fuer{font-size:14.5px;color:var(--text-mid);margin-top:8px;text-wrap:pretty;}
.ld-preis-zeile{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:auto 0;}
.ld-preis-betrag{font-size:40px;font-weight:900;letter-spacing:-.02em;}
.ld-preis-betrag.wort{font-size:32px;text-align:center;}
.ld-preis-zusatz{font-size:14px;color:var(--text-mid);}
.ld-preis .ld-btn,.ld-preis .ld-btn-hell{width:100%;padding:16px 20px 15px;font-size:15px;}
.ld-preis-features{display:flex;flex-direction:column;gap:13px;margin-top:30px;}
.ld-preis-features li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink);}
.ld-preis-features .haken{margin-top:3px;display:flex;flex:0 0 auto;}
.ld-unsicher{margin-top:32px;background:#fff;border-radius:22px;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px solid var(--rahmen);}
.ld-unsicher p{font-size:15.5px;color:var(--text-mid);text-wrap:pretty;}
.ld-unsicher a{font-weight:700;}

/* FAQ */
.ld-faq-spalte{max-width:900px;margin:0 auto;}
.ld-faq-gruppe{display:flex;align-items:center;justify-content:center;gap:10px;font-size:20px;font-weight:700;margin:60px 0 14px;}
.ld-faq-gruppe svg{flex:0 0 auto;}
.ld-faq-liste{border-top:1px solid var(--rahmen);}
.ld-faq-liste details{border-bottom:1px solid var(--rahmen);transition:background .18s ease-out;}
.ld-faq-liste summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 2px;font-size:17px;font-weight:700;}
.ld-faq-liste summary svg{flex:0 0 auto;transition:transform .2s ease-out;}
.ld-faq-liste details[open] summary svg{transform:rotate(180deg);}
.ld-faq-liste details p{font-size:16px;line-height:1.7;color:var(--text-mid);padding:0 2px 16px;max-width:64ch;text-wrap:pretty;}
.ld-faq-liste details p:last-child{padding-bottom:24px;}
.ld-faq-liste strong{color:var(--ink);}

/* Datenschutz-Box */
.ld-schutz-sektion{background:linear-gradient(#fff 0%,#F6F4F9 40%,#F3F0F7 100%);padding:clamp(70px,9vw,110px) clamp(20px,4vw,32px) clamp(80px,9vw,120px);}
.ld-schutz{background:#fff;border-radius:26px;padding:48px 44px;display:grid;grid-template-columns:auto minmax(260px,1fr);gap:32px;align-items:start;max-width:840px;margin:0 auto;}
.ld-schutz h2{font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:-.01em;text-align:left;margin:0;}
.ld-schutz p{font-size:16.5px;line-height:1.7;color:var(--text-mid);margin-top:14px;max-width:60ch;text-wrap:pretty;}

/* Footer */
.ld-fuss{border-top:1px solid var(--rahmen);padding:56px 32px 52px;background:none;}
.ld-fuss-innen{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px;}
.ld-fuss img{height:26px;width:auto;display:block;}
.ld-fuss nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;font-size:14.5px;}
.ld-fuss nav a{color:var(--text-mid);}
.ld-fuss nav a:hover{color:var(--primary);}
.ld-fuss-copy{font-size:13px;color:var(--text-soft);}

/* Warteliste-Modal */
.ld-modal-hintergrund{position:fixed;inset:0;z-index:60;background:rgba(28,23,34,.45);display:flex;align-items:center;justify-content:center;padding:20px;}
.ld-modal{position:relative;background:#fff;border-radius:26px;padding:44px 40px 38px;max-width:520px;width:100%;box-shadow:0 30px 80px rgba(28,23,34,.28);animation:wfAuf .34s ease-out both;}
.ld-modal h2{font-family:var(--serif);font-size:clamp(26px,4vw,32px);font-weight:400;letter-spacing:-.01em;line-height:1.16;text-align:left;max-width:none;margin:0;}
.ld-modal-text{font-size:15.5px;line-height:1.65;color:var(--text-mid);margin-top:14px;text-wrap:pretty;}
.ld-modal-zeile{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.ld-modal-eingabe{flex:1 1 220px;border:1.5px solid var(--rahmen);border-radius:999px;padding:13px 20px;font:400 15px var(--schrift);color:var(--ink);background:#fff;}
.ld-modal-eingabe:focus{outline:none;border-color:var(--primary-rand);}
.ld-modal-fehler{font-size:13.5px;color:var(--warnrot);margin-top:10px;}
.ld-modal-klein{font-size:12.5px;color:var(--text-soft);margin-top:14px;}
.ld-modal-zu{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:999px;border:1px solid var(--rahmen);background:#fff;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ld-modal-zu:hover{background:var(--flaeche);}
.ld-modal-danke-kopf{display:flex;align-items:center;gap:12px;}
.ld-modal-danke-kopf h2{font-size:28px;}

@media (prefers-reduced-motion:reduce){
  .ld-reveal,.ld-hero-links,.ld-doc-spalte{opacity:1;transform:none;transition:none;animation:none;}
  .ld-portraet.ld-reveal{transform:rotate(3.71deg);}
  .ld-mark i{transform:scaleX(1);transition:none;}
  .ld-m1,.ld-m2,.ld-m3,.ld-m4,.ld-m5,.ld-m6,.ld-m7{animation:none;background-size:100% 100%;}
  .ld-doc-kommentar.wiege1,.ld-doc-kommentar.wiege2{animation:none;}
}

@media (max-width:560px){
  .ld-hero{grid-template-columns:1fr;}
  .ld-schutz{grid-template-columns:1fr;padding:34px 28px;}
  .ld-signatur{right:18px;}
  /* Kopfzeile kompakt, damit der Burger-Kreis nicht am rechten Rand
     beschnitten wird: kleinere Abstaende, kleinere Wortmarke, engerer
     Knopf. Alles bleibt in einer Zeile. */
  .ld-kopf-innen{gap:10px;padding:0 14px 0 16px;}
  .ld-kopf-rechts{gap:10px;}
  .ld-wortmarke{height:27px;}
  .ld-kopf .ld-btn{padding:11px 15px 10px;font-size:13.5px;}
  /* Dokument-Attrappe: schmalere Spalten statt Beschnitt, damit die
     Randkommentare vollstaendig lesbar sind. */
  .ld-doc-maske{height:400px;}
  .ld-doc-raster{grid-template-columns:minmax(0,1fr) minmax(150px,170px);gap:12px;padding:18px 14px 4px 16px;}
  .ld-doc-text{font-size:13.5px;line-height:1.9;}
  .ld-doc-seite{padding-left:12px;gap:10px;}
  .ld-doc-kommentar{padding:10px 12px 11px;border-radius:16px;}
  .ld-doc-kommentar p{font-size:11px;}
  .ld-doc-kommentar-kopf .titel{font-size:11.5px;}
  .ld-doc-kommentar-kopf .nr{width:19px;height:19px;font-size:9.5px;}
}

/* ══ Wizard (/app), pixelgenau nach Design-Mockup ══ */

.wz-body{background:var(--grund);min-height:100vh;display:flex;flex-direction:column;}

/* Der Kopf liegt ueber dem Inhalt, sonst schiebt sich der Zaehler vor das
   aufgeklappte Kontomenue. */
.wz-kopf{position:relative;z-index:70;background:#fff;border-bottom:1px solid var(--rahmen);}
.wz-kopf-innen{max-width:1144px;margin:0 auto;padding:18px clamp(20px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:16px;}
/* Grosszuegige Klickflaeche: 40x34 waren zu wenig, um den Weg zurueck
   zur Startseite zuverlaessig zu treffen. */
.wz-kopf-innen > a[aria-label]{display:inline-flex;align-items:center;padding:8px 12px;margin:-8px -12px;border-radius:12px;transition:background .16s ease-out;}
.wz-kopf-innen > a[aria-label]:hover{background:var(--flaeche);}
.wz-signet{height:34px;width:auto;display:block;}
.wz-abbrechen{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--rahmen);border-radius:999px;padding:11px 19px;font-size:14.5px;font-weight:700;white-space:nowrap;color:var(--ink);text-decoration:none;transition:background .18s ease-out;}
.wz-abbrechen:hover{background:var(--flaeche);color:var(--ink);}

.wz-main{flex:1;padding:clamp(30px,5vw,56px) clamp(20px,4vw,32px) 200px;}
.wz-spalte{max-width:720px;margin:0 auto;}
.wz-ansicht{animation:wfAuf .34s ease-out both;}
.wz-ansicht h1{font-family:var(--serif);font-size:clamp(29px,4.8vw,38px);font-weight:400;letter-spacing:-.01em;line-height:1.1;}
.wz-sub{font-size:16px;color:var(--text-mid);margin-top:14px;max-width:58ch;text-wrap:pretty;}

/* Schritt 1: Dropzone und Datei-Karte */
.wz-dropzone{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:32px;padding:52px 28px;border:2px dashed var(--rahmen);border-radius:26px;background:var(--flaeche);cursor:pointer;transition:background .18s ease-out,border-color .18s ease-out,transform .18s ease-out;}
.wz-dropzone:hover,.wz-dropzone.zieht{border-color:var(--primary);background:var(--primary-hauch);}
.wz-dropzone-innen{position:relative;display:flex;flex-direction:column;align-items:center;}
.wz-dropzone-titel{font-size:19px;font-weight:700;margin-top:20px;}
.wz-dropzone-text{font-size:15px;color:var(--text-mid);margin-top:9px;}
.wz-dropzone-knopf{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;background:#fff;border:1px solid var(--rahmen);border-radius:999px;padding:13px 22px 12px;font-size:15px;font-weight:700;}
.wz-dropzone input{position:absolute;width:1px;height:1px;opacity:0;}

.wz-datei{margin-top:26px;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--rahmen);border-radius:22px;padding:19px 22px;}
.wz-datei-icon{width:46px;height:46px;border-radius:14px;background:var(--primary-hauch);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.wz-datei-text{flex:1;min-width:0;}
.wz-datei-name{display:block;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-datei-sub{display:block;font-size:14px;color:var(--text-mid);margin-top:4px;}
.wz-datei-sub .ok{color:var(--gruen);font-weight:700;}
.wz-datei-weg{background:none;border:none;padding:8px;font-size:14.5px;font-weight:700;color:var(--text-mid);text-decoration:underline;cursor:pointer;flex:0 0 auto;}
.wz-datei-weg:hover{color:var(--warnrot);}

.wz-fehlerbox{margin-top:22px;display:flex;gap:14px;align-items:flex-start;background:rgba(194,69,64,.07);border:1.5px solid var(--warnrot);border-radius:18px;padding:17px 19px;}
.wz-fehlerbox svg{flex:0 0 auto;margin-top:2px;}
.wz-fehlerbox p{font-size:15px;text-wrap:pretty;}

/* Schritt 2: Analyse-Art */
.wz-wahl-liste{display:flex;flex-direction:column;gap:16px;margin-top:40px;}
.wz-wahl{position:relative;display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--rahmen);border-radius:22px;padding:clamp(20px,3vw,26px) clamp(20px,3vw,28px);cursor:pointer;transition:box-shadow .18s ease-out;font-family:inherit;color:var(--ink);}
.wz-wahl:hover{box-shadow:0 14px 30px rgba(28,23,34,.08);}
.wz-wahl:disabled{opacity:.55;cursor:not-allowed;}
.wz-wahl:disabled:hover{box-shadow:none;}
.wz-wahl-frei-hinweis{display:block;margin-top:9px;font-size:12.5px;font-weight:650;color:var(--primary);}
#db-art button:disabled{opacity:.55;cursor:not-allowed;}
.wz-wahl-ring{position:absolute;inset:0;border:2px solid var(--primary);background:var(--primary-hauch);border-radius:22px;pointer-events:none;display:none;}
.wz-wahl.gewaehlt .wz-wahl-ring{display:block;}
.wz-wahl-innen{position:relative;display:flex;gap:20px;align-items:flex-start;}
.wz-wahl-innen>svg{flex:0 0 auto;margin-top:4px;}
.wz-wahl-text{flex:1;}
.wz-wahl-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wz-wahl-titel{font-size:clamp(18px,2.6vw,20px);font-weight:700;}
.wz-wahl-badge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mid);background:var(--flaeche-tief);border-radius:999px;padding:4px 9px;}
.wz-wahl-badge.lila{color:var(--primary);background:var(--primary-hauch);}
.wz-wahl-sub{display:block;font-size:15.5px;color:var(--text-mid);margin-top:8px;text-wrap:pretty;}
.wz-wahl-intern{display:block;font-size:13.5px;color:var(--text-soft);margin-top:10px;}
.wz-radio{width:22px;height:22px;border-radius:999px;border:1.5px solid var(--rahmen);background:#fff;flex:0 0 auto;margin-top:6px;display:block;transition:border .16s ease-out;}
.wz-wahl.gewaehlt .wz-radio{border:6px solid var(--primary);}

/* Schritt 3: Karten */
.wz-karte{margin-top:40px;background:#fff;border:1px solid var(--rahmen);border-radius:24px;padding:clamp(22px,3vw,28px);}
.wz-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.wz-karte-kopf h2{font-size:18px;font-weight:700;}
.wz-alle{background:none;border:none;padding:4px;font-size:14px;font-weight:700;color:var(--primary);text-decoration:underline;cursor:pointer;}
.wz-karte-hinweis{font-size:14.5px;color:var(--text-mid);margin-top:8px;text-wrap:pretty;}

/* Akkordeon (Wortlisten, Kommentarname) */
.wz-akkordeon{margin-top:18px;background:#fff;border:1px solid var(--rahmen);border-radius:24px;overflow:hidden;padding:0;}
.wz-zeile-trenner{height:1px;background:var(--rahmen);}
.wz-zeile{width:100%;display:flex;align-items:center;gap:16px;padding:20px clamp(20px,3vw,28px);background:none;border:none;text-align:left;cursor:pointer;transition:background .16s ease-out;font-family:inherit;color:var(--ink);}
.wz-zeile:hover{background:var(--flaeche);}
.wz-zeile-icon{width:40px;height:40px;border-radius:12px;background:var(--flaeche-tief);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.wz-zeile-text{flex:1;min-width:0;}
.wz-zeile-titel{display:block;font-size:16px;font-weight:700;}
.wz-zeile-sub{display:block;font-size:14px;color:var(--text-mid);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-zeile-pfeil{display:flex;flex:0 0 auto;transition:transform .2s ease-out;}
.wz-zeile[aria-expanded="true"] .wz-zeile-pfeil{transform:rotate(180deg);}
.wz-panel{padding:0 clamp(20px,3vw,28px) 26px;animation:wfAuf .24s ease-out both;}
.wz-panel-hinweis{font-size:14.5px;color:var(--text-mid);text-wrap:pretty;}
.wz-eingabe{width:100%;margin-top:16px;border:1px solid var(--rahmen);border-radius:6px;padding:15px 16px;font-size:16px;font-family:var(--schrift);background:#fff;color:var(--ink);}
.wz-eingabe:focus{outline:none;border-color:var(--primary-rand);box-shadow:0 0 0 3px var(--primary-hauch);}
/* Der Farbwaehler kommt per JS in einen leeren Behaelter und hatte
   deshalb als einzige Ansicht gar keinen Abstand nach oben. Hier nur der
   Abstand: Ein display davor nimmt .fw das Flex und damit den Abstand
   ZWISCHEN den Karten. */
.wz-sub + #wz-farbwahl{margin-top:40px;}

/* Kommentarvorschau: nachgebaut wie eine Wortfang-Notiz am Word-Rand,
   damit vor dem Start klar ist, was spaeter im Dokument steht. */
.wz-vorschau{margin-top:18px;background:var(--flaeche);border-radius:14px;padding:16px;}
.wz-vorschau-label{font-size:13px;font-weight:700;color:var(--text-mid);margin-bottom:10px;}
.wz-kommentar{background:#fff;border:1px solid var(--rahmen);border-left:4px solid var(--primary);border-radius:8px;padding:13px 16px;box-shadow:0 1px 3px rgba(28,23,34,.08);}
.wz-kommentar-kopf{display:flex;align-items:center;gap:9px;}
.wz-kommentar-kopf strong{font-size:14.5px;font-weight:700;overflow-wrap:anywhere;}
.wz-kommentar-text{font-size:14px;line-height:1.55;color:var(--ink);margin-top:7px;text-wrap:pretty;}

/* Konto und Code */
.wz-feld-label{display:block;font-size:14px;font-weight:700;margin-bottom:10px;}
.wz-feld-label.abstand{margin-top:22px;}
.wz-karte .wz-eingabe{margin-top:0;}
.wz-passwort{position:relative;}
.wz-passwort .wz-eingabe{padding-right:104px;}
.wz-anzeigen{position:absolute;top:50%;right:10px;transform:translateY(-50%);background:none;border:none;padding:8px 10px;font-size:14px;font-weight:700;color:var(--primary);text-decoration:underline;cursor:pointer;}
/* Passwort-Hilfe: Wir sagen, was ein gutes Passwort ausmacht, und wie das
   getippte dasteht. Kein Riegel, nur eine Rueckmeldung. */
.pw-hilfe{margin-top:14px;}
.pw-messer{margin-bottom:14px;}
.pw-balken{display:flex;gap:5px;}
.pw-balken i{flex:1;height:4px;border-radius:999px;background:var(--flaeche-tief);transition:background .18s ease;}
.pw-messer.stufe-1 i.an{background:#C24540;}
.pw-messer.stufe-2 i.an{background:#C4881B;}
.pw-messer.stufe-3 i.an{background:var(--gruen);}
.pw-urteil{font-size:13px;font-weight:700;margin-top:8px;color:var(--text-mid);}
.pw-messer.stufe-1 .pw-urteil{color:#C24540;}
.pw-messer.stufe-2 .pw-urteil{color:#A9740F;}
.pw-messer.stufe-3 .pw-urteil{color:var(--gruen);}
.pw-titel{font-size:13.5px;color:var(--text-mid);}
.pw-liste{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.pw-liste li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-soft);transition:color .18s ease;}
.pw-liste li svg{flex:0 0 auto;color:var(--rahmen);transition:color .18s ease;}
.pw-liste li.erfuellt{color:var(--text-mid);}
.pw-liste li.erfuellt svg{color:var(--gruen);}
.wz-hinweisbox{display:flex;align-items:flex-start;gap:12px;margin-top:20px;background:var(--flaeche);border:1px solid var(--rahmen);border-radius:16px;padding:14px 16px;}
.wz-hinweisbox svg{flex:0 0 auto;margin-top:1px;}
.wz-hinweisbox p{font-size:14px;line-height:1.6;color:var(--text-mid);text-wrap:pretty;}
.wz-konto-fuss{font-size:14px;color:var(--text-mid);margin-top:20px;}
.wz-konto-fuss a{color:var(--primary);font-weight:700;}
.wz-konto-fuss.rechts{text-align:right;margin-top:12px;}
/* Umschalter zwischen Anlegen und Anmelden: sieht aus wie ein Link, ist
   aber ein Knopf. Ein echter Link fuehrte von der Seite weg, und damit
   waeren Manuskript und Einstellungen verloren. */
.wz-textlink{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;font-weight:700;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.wz-textlink:hover{color:var(--ink);}
.wz-code-eingabe{width:100%;max-width:260px;border:1px solid var(--rahmen);border-radius:6px;padding:15px 16px;font-size:22px;font-weight:700;letter-spacing:.5em;font-family:var(--schrift);background:#fff;color:var(--ink);}
.wz-code-eingabe:focus{outline:none;border-color:var(--primary-rand);box-shadow:0 0 0 3px var(--primary-hauch);}
.wz-code-aktionen{display:flex;flex-wrap:wrap;gap:20px;margin-top:16px;}
.wz-code-aktionen button{background:none;border:none;padding:4px 0;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer;}
.wz-code-aktionen button:disabled{color:var(--text-soft);cursor:not-allowed;text-decoration:none;}
.wz-code-status{font-size:14px;font-weight:700;color:var(--gruen);margin-top:14px;}
.wz-ansicht .wz-fehlerbox{margin-top:18px;}
.wz-code-aktionen .primaer{color:var(--primary);}
.wz-code-aktionen .neutral{color:var(--text-mid);}

/* Bezahlung */
.wz-paket-liste{display:flex;flex-direction:column;gap:14px;margin-top:40px;}
.wz-paket{position:relative;display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--rahmen);border-radius:20px;padding:22px 24px;cursor:pointer;transition:background .16s ease-out,border-color .16s ease-out;font-family:inherit;color:var(--ink);}
.wz-paket.gewaehlt{background:var(--primary-hauch);border:2px solid var(--primary);padding:21px 23px;}
.wz-paket-zeile{position:relative;display:flex;align-items:center;gap:18px;}
.wz-paket-text{flex:1;}
.wz-paket-titel{display:block;font-size:18px;font-weight:700;}
.wz-paket-sub{display:block;font-size:14.5px;color:var(--text-mid);margin-top:5px;text-wrap:pretty;}
.wz-paket-preis{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;}
.wz-paket-betrag{font-size:18px;font-weight:700;}
.wz-paket-zusatz{font-size:12.5px;color:var(--text-soft);}
.wz-paket .wz-radio{width:20px;height:20px;margin-top:0;}
.wz-paket.gewaehlt .wz-radio{border:6px solid var(--primary);}
.wz-abo-toggle{display:inline-flex;align-items:stretch;gap:3px;background:var(--flaeche-tief);border-radius:999px;padding:4px;margin-top:16px;}
.wz-abo-toggle button{border:none;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;cursor:pointer;text-align:center;transition:background .18s ease-out;background:transparent;color:var(--text-mid);}
.wz-abo-toggle button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,23,34,.14);}
.wz-abo-toggle .spar{display:block;font-size:11px;font-weight:700;line-height:1.1;color:var(--gruen);}
.wz-bezahl-fuss{font-size:13.5px;color:var(--text-soft);margin-top:18px;text-wrap:pretty;}

/* Paddle-Modal (nachgestellt) */
.wz-modal-hintergrund{position:fixed;inset:0;z-index:100;background:rgba(28,23,34,.45);display:flex;align-items:center;justify-content:center;padding:24px;}
.wz-modal{width:100%;max-width:440px;background:#fff;border-radius:24px;padding:28px;animation:wfAuf .26s ease-out both;box-shadow:0 30px 70px rgba(28,23,34,.28);}
.wz-modal.breit{max-width:560px;max-height:88vh;overflow-y:auto;}
.wz-modal-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.wz-modal-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);}
.wz-modal-zu{width:34px;height:34px;border-radius:999px;background:var(--flaeche-tief);border:none;cursor:pointer;font-size:16px;color:var(--text-mid);}
.wz-modal-paket{font-size:20px;font-weight:700;margin-top:16px;}
.wz-modal-preis{font-size:14.5px;color:var(--text-mid);margin-top:4px;}
.wz-modal-felder{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.wz-modal-felder .wz-eingabe{margin-top:0;}
.wz-modal-halb{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.wz-modal-fuss{font-size:12.5px;color:var(--text-soft);margin-top:14px;text-align:center;text-wrap:pretty;}
.wz-modal-fehler{font-size:13.5px;font-weight:700;color:var(--warnrot);margin-top:14px;}
/* Fehlerzustand fuer Eingaben, ueberall gleich: rote Kontur plus ein
   weicher Ring, damit die Meldung darunter einen sichtbaren Bezug hat. */
.wz-eingabe.ungueltig,.fw-chips.fehlerhaft,.hi-textfeld.ungueltig{
  border-color:var(--warnrot);box-shadow:0 0 0 3px rgba(194,69,64,.10);}

/* Laeuft */
.wz-lauf{text-align:center;padding:40px 0 20px;}
.wz-kescher{position:relative;width:200px;height:150px;margin:0 auto;}
.wz-kescher img{position:relative;z-index:2;width:120px;height:auto;margin-top:22px;animation:wfSchweb 3.2s ease-in-out infinite;}
.wz-wortchip{position:absolute;border-radius:6px;padding:3px 8px;font-family:Georgia,'Times New Roman',serif;font-size:13px;animation:wfSchweb 3s ease-in-out infinite;}
.wz-lauf h1{font-size:34px;margin-top:34px;}
.wz-lauf .wz-sub{max-width:44ch;margin-left:auto;margin-right:auto;margin-top:12px;}
.wz-balken{max-width:340px;margin:32px auto 0;height:5px;border-radius:999px;background:var(--flaeche-tief);overflow:hidden;}
.wz-balken div{width:34%;height:100%;border-radius:999px;background:var(--primary);animation:wfBalken 1.6s ease-in-out infinite;}
.wz-lauf-datei{font-size:13.5px;color:var(--text-soft);margin-top:16px;}

/* Ergebnis */
.wz-haken-buehne{position:relative;width:60px;height:60px;}
.wz-haken-ring{position:absolute;inset:0;border-radius:999px;border:2px solid var(--gruen);animation:wfRing .9s ease-out .12s both;}
.wz-haken-kreis{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(31,138,91,.1);animation:wfPlop .62s cubic-bezier(.34,1.56,.64,1) both;}
.wz-haken-kreis polyline{stroke-dasharray:34;stroke-dashoffset:34;animation:wfHaken .42s ease-out .3s both;}
.wz-konfetti-arm{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;}
.wz-konfetti-arm i{position:absolute;display:block;animation:wfKonf .9s cubic-bezier(.2,.7,.35,1) both;}
.wz-ergebnis h1{font-size:36px;margin-top:26px;}
.wz-ergebnis-aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}
.wz-schutz-hinweis{margin-top:28px;display:flex;gap:14px;align-items:flex-start;background:rgba(32,41,103,.05);border:1px solid rgba(32,41,103,.22);border-radius:18px;padding:18px 20px;}
.wz-schutz-hinweis svg{flex:0 0 auto;margin-top:2px;}
.wz-schutz-hinweis p{font-size:15px;color:var(--text-mid);text-wrap:pretty;}

/* Serverfehler */
.wz-serverfehler{display:flex;gap:14px;align-items:flex-start;background:rgba(194,69,64,.07);border:1.5px solid var(--warnrot);border-radius:22px;padding:22px 24px;}
.wz-serverfehler>svg{flex:0 0 auto;margin-top:3px;}
.wz-serverfehler h1{font-size:24px;}
.wz-serverfehler .erklaerung{font-size:15.5px;color:var(--text-mid);margin-top:10px;text-wrap:pretty;}
.wz-serverfehler .detail{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-soft);margin-top:14px;max-width:58ch;overflow-wrap:anywhere;}

/* Buttons */
.wz-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--primary);color:#fff;border:none;border-radius:999px;padding:19px 32px 18px;font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .18s ease-out;text-decoration:none;}
.wz-primary:hover{background:var(--primary-tief);color:#fff;}
.wz-primary:disabled{background:var(--flaeche-tief);color:var(--text-soft);cursor:not-allowed;}
.wz-sekundaer{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--rahmen);border-radius:999px;padding:18px 28px 17px;font-size:16px;font-weight:700;cursor:pointer;transition:background .18s ease-out;color:var(--ink);text-decoration:none;}
.wz-sekundaer:hover{background:var(--flaeche);color:var(--ink);}
.wz-textknopf{background:none;border:none;padding:10px 4px;font-size:15.5px;font-weight:700;color:var(--ink);cursor:pointer;flex:0 0 auto;}
.wz-textknopf:hover{color:var(--primary);}

/* Bottom-Bar */
.wz-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;}
.wz-fortschritt{display:flex;gap:3px;}
.wz-fortschritt span{flex:1;height:4px;background:var(--flaeche-tief);overflow:hidden;}
.wz-fortschritt span i{display:block;height:100%;background:var(--primary);width:0;transition:width .26s ease-out;}
.wz-bar-zeile{border-top:1px solid var(--rahmen);}
/* Der Hauptknopf steht immer rechts, auch auf Schritt 1, wo der
   Zurueck-Link fehlt. Mit space-between waere er dort als einziges
   Element nach links gerutscht. Link und Kette liegen deshalb
   absolut, in der Reihe bleibt nur der Knopf. */
.wz-bar-innen{position:relative;max-width:1144px;margin:0 auto;padding:14px clamp(20px,4vw,32px);display:flex;align-items:center;justify-content:flex-end;gap:16px;}
.wz-bar-innen > .wz-textknopf{position:absolute;left:clamp(20px,4vw,32px);}
/* Die Kette steht in der Mitte der Leiste, nicht in der Mitte des Restes:
   Auf Schritt 1 fehlt der Zurueck-Link, und mit space-between waere sie
   dort nach links gerutscht. */
.wz-schritte{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;}
.wz-schritt{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);}
.wz-schritt .kreis{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--flaeche-tief);color:var(--text-soft);font-size:11.5px;font-weight:700;flex:none;}
.wz-schritt.aktiv{color:var(--ink);}
.wz-schritt.aktiv .kreis,.wz-schritt.fertig .kreis{background:var(--primary);color:#fff;}
.wz-schritt-zeile{border-top:1px solid var(--rahmen);padding:9px 20px;font-size:12px;color:var(--text-soft);text-align:center;margin:0;}
@media (min-width:1080px){
  .wz-schritt-zeile{display:none;}
}
@media (max-width:1079px){
  .wz-schritte{display:none;}
}
@media (max-width:560px){
  .wz-primary{padding:16px 24px 15px;font-size:15px;}
}

/* ══ Anmelden und Dashboard ══ */
.an-spalte{max-width:520px;margin:0 auto;}
.an-voll{width:100%;margin-top:24px;}
.an-wechsel{font-size:15px;color:var(--text-mid);margin-top:22px;text-align:center;}
.an-wechsel button{background:none;border:none;padding:4px;font-size:15px;font-weight:700;color:var(--primary);text-decoration:underline;cursor:pointer;}

.db-spalte{max-width:820px;margin:0 auto;}
.db-spalte h1{font-family:var(--serif);font-size:clamp(29px,4.8vw,38px);font-weight:400;letter-spacing:-.01em;line-height:1.1;margin-bottom:28px;}
.db-kopf-rechts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

.db-wahl{display:inline-flex;gap:3px;background:var(--flaeche-tief);border-radius:999px;padding:4px;flex-wrap:wrap;}
.db-wahl button{border:none;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer;background:transparent;color:var(--text-mid);transition:background .18s ease-out;}
.db-wahl button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(28,23,34,.14);}

.ld-preis-hinweis{font-size:12.5px;color:var(--text-soft);margin-top:8px;}
.ld-anmelden{font-size:15px;color:var(--ink);white-space:nowrap;}
.ld-anmelden:hover{color:var(--primary);}

/* ══ Farbwahl (Design-Handoff colorselect) ══
   Eigene Zellzustaende laut Handoff; Karten, Rahmen und Schrift bleiben
   bewusst bei den Seiten-Tokens, damit sich das Panel einfuegt. */
.fw{display:flex;flex-direction:column;gap:32px;}
.fw-karte{background:#fff;border:1px solid var(--rahmen);border-radius:14px;padding:26px 28px;}
.fw-titel{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.fw-unter{font-size:13px;color:var(--text-mid);margin-top:6px;line-height:1.5;}
.fw-hinweis{font-size:12px;line-height:1.45;color:var(--text-soft);margin-top:18px;}
.fw-fehler{font-size:12.5px;color:#D0342C;margin-top:16px;}

.fw-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;}
.fw-slot{position:relative;}

.fw-zelle{position:relative;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  height:38px;border-radius:19px;border:1.5px dashed #D3D8DE;background:transparent;color:#A2A8B0;
  font-size:13.5px;cursor:pointer;user-select:none;
  transition:background .2s ease,border-color .2s ease,color .24s ease;}
.fw-zelle.heiss{border-color:#AEB6C0;background:#F3F5F8;color:#5C636C;}
.fw-zelle.an{border-style:solid;color:#101215;background:transparent;}
.fw-zelle.an.heiss{background:transparent;color:#101215;}
/* Die Fuellung greift ueber den Rand hinaus, sonst blitzt an den Rundungen eine weisse Kante durch. Die Zelle schneidet sie ab. */
.fw-fuellung{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;pointer-events:none;
  clip-path:inset(0 100% 0 0);transition:clip-path .42s cubic-bezier(.4,0,.2,1);}
.fw-name{position:relative;z-index:1;}
.fw-zeichen{position:absolute;right:10px;z-index:1;font-size:19px;line-height:1;opacity:0;
  transition:opacity .16s ease,transform .3s cubic-bezier(.2,.85,.25,1);}

.fw-belegt{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  height:38px;border-radius:19px;background:#EDEFF2;font-size:13.5px;color:#B4BAC2;user-select:none;}
.fw-tipp{position:absolute;bottom:100%;left:50%;margin-bottom:7px;z-index:30;pointer-events:none;white-space:nowrap;
  background:#16191D;color:#fff;font-size:11.5px;line-height:1;padding:6px 9px;border-radius:7px;
  box-shadow:0 4px 12px rgba(16,20,26,.18);opacity:0;transform:translate(-50%,4px);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.85,.25,1);}
.fw-belegt.heiss .fw-tipp{opacity:1;transform:translate(-50%,0);}

.fw-kopf{display:flex;align-items:flex-start;gap:16px;}
.fw-kopf-text{flex:1;min-width:0;}
.fw-schalter{flex:none;display:flex;align-items:center;gap:7px;height:28px;border:0;border-radius:999px;cursor:pointer;
  background:#D7DBE0;flex-direction:row;padding:3px 11px 3px 3px;transition:background .2s;}
.fw-schalter.an{background:#101215;flex-direction:row-reverse;padding:3px 3px 3px 11px;}
.fw-schalter-kreis{width:22px;height:22px;border-radius:50%;background:#fff;flex:none;box-shadow:0 1px 2px rgba(16,20,26,.22);}
.fw-schalter-label{font-size:12.5px;font-weight:500;line-height:1;color:#5C636C;}
.fw-schalter.an .fw-schalter-label{color:#fff;}
.fw-aufklapp{margin-top:6px;animation:fwAuf .2s ease-out;}
@keyframes fwAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.fw-block3{margin-top:0;}
.fw-chips{width:100%;min-height:48px;margin-top:22px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border:1px solid #E1E4E8;border-radius:6px;padding:8px 10px;background:#fff;cursor:text;transition:border-color .15s;}
.fw-block3 .fw-chips{margin-top:22px;}
.fw-chips.fokus{border-color:#B6BDC6;}
.fw-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 5px 5px 10px;border-radius:6px;
  background:#F1F3F6;font-size:13px;line-height:1;color:var(--ink);}
.fw-chip-weg{width:17px;height:17px;border:0;padding:0;border-radius:5px;background:transparent;color:#A2A8B0;
  font-size:14px;line-height:1;cursor:pointer;transition:background .12s,color .12s;}
.fw-chip-weg:hover{background:#E3E7ED;color:#5C636C;}
.fw-chips-eingabe{flex:1;min-width:140px;height:30px;border:0;background:transparent;font-size:13.5px;
  color:var(--ink);padding:0 2px;font-family:var(--schrift);}
.fw-chips-eingabe:focus{outline:none;}
.fw-chips-eingabe::placeholder{color:#A2A8B0;}

@media (max-width:520px){
  .fw-raster{grid-template-columns:repeat(2,1fr);}
}

/* ══ Kontomenue in der Kopfzeile ══ */
.kk-aktion{border:1px solid var(--rahmen);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap;background:#fff;}
.kk-aktion:hover{border-color:var(--primary-rand);color:var(--primary);}
/* Im Wizard steht statt des Menues nur die Adresse als Weg ins Dashboard. */
.db-email{font-size:14.5px;color:var(--text-mid);}
a.db-email:hover{color:var(--primary);}
.kk-menue{position:relative;}
.kk-knopf{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid transparent;border-radius:999px;
  padding:8px 12px;font-family:inherit;font-size:14.5px;color:var(--text-mid);cursor:pointer;transition:background .16s,border-color .16s;}
.kk-knopf:hover,.kk-knopf.auf{background:var(--flaeche);border-color:var(--rahmen);color:var(--ink);}
.kk-chevron{flex:none;transition:transform .2s ease-out;}
.kk-knopf.auf .kk-chevron{transform:rotate(180deg);}
.kk-email{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kk-liste{position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:232px;background:#fff;border:1px solid var(--rahmen);
  border-radius:12px;box-shadow:0 14px 34px rgba(28,23,34,.14);padding:6px;animation:wfAuf .16s ease-out both;}
.kk-eintrag{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;background:none;border:0;border-radius:8px;
  padding:10px 12px;font-family:inherit;font-size:14.5px;color:var(--ink);text-align:left;cursor:pointer;}
.kk-eintrag svg{color:var(--text-soft);flex:none;}
.kk-eintrag:hover,.kk-eintrag:focus-visible{background:var(--flaeche);color:var(--primary);}
.kk-eintrag:hover svg,.kk-eintrag:focus-visible svg{color:var(--primary);}

/* ══ Dashboard: links das Manuskript, rechts die Einstellungen ══ */
.db-spalte{max-width:1080px;margin:0 auto;}
.db-schmal{max-width:720px;margin:0 auto;}
.db-titelzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:30px;}
.db-titelzeile h1{font-family:var(--serif);font-size:clamp(27px,4.2vw,34px);font-weight:400;letter-spacing:-.01em;line-height:1.15;margin:0;}

.db-zaehler{display:inline-flex;align-items:center;gap:9px;background:var(--primary-hauch);border-radius:999px;padding:8px 16px 8px 13px;color:var(--primary);flex:none;}
.db-zaehler-text{display:flex;flex-direction:column;line-height:1.25;}
.db-zaehler-titel{font-size:13.5px;font-weight:700;color:var(--ink);}
.db-zaehler-zusatz{font-size:11.5px;color:var(--text-mid);}
/* Sichtbar als Weg, nicht als Beschriftung: Der Zaehler fuehrt hier
   wirklich zur Paketwahl. */
.db-zaehler-aktion{align-self:flex-start;background:none;border:0;padding:0;font-family:inherit;
  font-size:11.5px;font-weight:700;color:var(--primary);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;}
.db-zaehler-aktion:hover{color:var(--ink);}
.db-zaehler.leer .db-zaehler-aktion{color:var(--primary);}
.db-zaehler.knapp{background:rgba(194,69,64,.09);color:var(--warnrot);}
.db-zaehler.leer{background:var(--flaeche-tief);color:var(--text-soft);}

.db-raster{display:grid;grid-template-columns:320px minmax(0,1fr);gap:32px;align-items:start;}
.db-links{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px;}
.db-rechts{display:flex;flex-direction:column;gap:32px;}
.db-rechts .fw{gap:32px;}

.db-dropzone{margin-top:0;padding:34px 20px;border-radius:14px;}
.db-dropzone .wz-dropzone-titel{font-size:15.5px;margin-top:14px;text-wrap:balance;}
.db-dropzone .wz-dropzone-text{font-size:13.5px;margin-top:7px;}
.db-dropzone .wz-dropzone-knopf{margin-top:18px;padding:11px 20px 10px;font-size:14.5px;}

.db-dateikarte{display:flex;align-items:center;gap:12px;background:var(--primary);border-radius:12px;padding:14px 14px 14px 16px;color:#fff;animation:wfAuf .2s ease-out both;}
.db-dateikarte-icon{display:flex;flex:none;color:rgba(255,255,255,.85);}
.db-dateikarte-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.db-dateikarte-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-dateikarte-sub{font-size:12.5px;color:rgba(255,255,255,.78);}
.db-dateikarte-weg{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;
  background:rgba(255,255,255,.16);color:#fff;cursor:pointer;transition:background .16s;}
.db-dateikarte-weg:hover{background:rgba(255,255,255,.3);}

.db-notiz{font-size:12.5px;line-height:1.5;color:var(--text-soft);text-wrap:pretty;}
.db-durchgang .fw-titel{margin-bottom:16px;}
/* Der aktive Knopf muss INNERHALB der grauen Spur sitzen, sonst sieht es
   aus, als bräche er heraus, und der Zustand hebt sich kaum ab. */
.db-wahl.gross{display:flex;width:100%;gap:0;padding:5px;background:var(--flaeche-tief);}
.db-wahl.gross button{flex:1;padding:14px 12px 13px;font-size:15px;border-radius:999px;color:var(--text-mid);}
.db-wahl.gross button[aria-pressed="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 4px rgba(28,23,34,.16);}
.db-art-text{font-size:13px;line-height:1.55;color:var(--text-mid);margin-top:16px;max-width:64ch;text-wrap:pretty;}

.db-bar .wz-bar-zeile{border-top:1px solid var(--rahmen);}
.db-bar .wz-bar-innen{max-width:1080px;justify-content:flex-end;}
.db-bar .wz-textknopf{margin-right:auto;}

.db-loeschen{background:#fff;border:1px solid rgba(194,69,64,.45);border-radius:999px;padding:13px 22px;font-size:15px;font-weight:700;color:var(--warnrot);cursor:pointer;white-space:nowrap;transition:background .18s ease-out;}
.db-loeschen:hover{background:rgba(194,69,64,.07);}
.db-loeschen.voll{background:var(--warnrot);border-color:var(--warnrot);color:#fff;}
.db-loeschen.voll:hover{background:#A83A36;}
.db-modal-aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}

/* ══ Kontoeinstellungen ══ */
.pr-spalte{max-width:1080px;margin:0 auto;}
.pr-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;}
.pr-links,.pr-rechts{display:flex;flex-direction:column;gap:32px;}
.pr-block{background:#fff;border:1px solid var(--rahmen);border-radius:14px;padding:26px 28px;}
.pr-block-titel{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:22px;}
.pr-feld{margin-bottom:26px;}
.pr-feld:last-child{margin-bottom:0;}
.pr-feld-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.pr-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);}
.pr-label.klein{font-weight:400;color:var(--text-mid);margin-top:16px;}
.pr-feld .wz-eingabe{margin-top:10px;}
.pr-feld .wz-eingabe[readonly]{background:var(--flaeche);color:var(--text-mid);}
.pr-notiz{font-size:12.5px;line-height:1.55;color:var(--text-soft);margin-top:12px;text-wrap:pretty;}
.pr-status{font-size:12.5px;color:var(--gruen,#1F8A5B);margin-top:12px;}
.pr-link{background:none;border:0;padding:0;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.pr-link:hover{color:var(--ink);}
.pr-link.leise{color:var(--text-mid);font-weight:400;}
.pr-link.leise:hover{color:var(--warnrot);}
.pr-lizenz-aktionen{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px;}
.pr-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--rahmen);animation:wfAuf .2s ease-out both;}
.pr-form .wz-eingabe{margin-top:8px;}
.pr-form .wz-code-eingabe{margin-top:8px;}
.pr-form-aktionen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;}
.pr-kuendigen{background:none;border:0;padding:4px;font-family:inherit;font-size:13.5px;color:var(--text-mid);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.pr-kuendigen:hover{color:var(--warnrot);}
.pr-lizenz{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--rahmen);border-radius:6px;padding:16px 18px;}
.pr-lizenz-name{font-size:15px;font-weight:700;}
.pr-lizenz-preis{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;}
.pr-lizenz-preis strong{font-size:16px;font-weight:900;letter-spacing:-.01em;}
.pr-lizenz-preis span{font-size:12.5px;color:var(--text-mid);}
.pr-leer{display:flex;align-items:flex-start;gap:14px;color:var(--text-soft);}
.pr-leer svg{flex:none;margin-top:2px;}
.pr-leer-titel{font-size:14px;font-weight:700;color:var(--ink);}
.pr-leer .pr-notiz{margin-top:8px;}
/* Was Paddle zurueckmeldet: Anschrift, Firma, Rechnungen. */
.pr-daten p{font-size:14px;line-height:1.6;color:var(--text-mid);}
.pr-daten-titel{font-weight:700;color:var(--ink) !important;}
.pr-daten-zusatz{margin-top:10px;font-size:13px !important;color:var(--text-soft) !important;}
.pr-rechnung{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--rahmen);color:var(--ink);}
.pr-rechnung:last-child{border-bottom:0;padding-bottom:0;}
.pr-rechnung:first-child{padding-top:0;}
.pr-rechnung:hover{color:var(--primary);}
.pr-rechnung strong{display:block;font-size:14px;font-weight:700;}
.pr-rechnung-sub{display:block;font-size:12.5px;color:var(--text-soft);margin-top:2px;}
.pr-rechnung-betrag{flex:none;font-size:14px;font-weight:700;}

/* ══ Hilfe ══ */
.hi-spalte{max-width:720px;margin:0 auto;}
.hi-spalte h1{font-family:var(--serif);font-size:clamp(27px,4.2vw,34px);font-weight:400;letter-spacing:-.01em;line-height:1.15;}
.hi-karte{margin-top:30px;}
.hi-karte .pr-label{margin-top:20px;}
.hi-karte .pr-label:first-child{margin-top:0;}
.hi-textfeld{resize:vertical;min-height:150px;line-height:1.6;}
.hi-danke{text-align:center;}
.hi-danke .pr-form-aktionen{justify-content:center;}
.hi-haken{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:rgba(31,138,91,.12);margin-bottom:16px;}
.hi-hinweise{margin-top:44px;}
.hi-hinweis{font-size:14px;line-height:1.6;color:var(--text-mid);margin-bottom:14px;text-wrap:pretty;}
.hi-hinweis strong{color:var(--ink);}

@media (max-width:940px){
  .db-raster,.pr-raster{grid-template-columns:minmax(0,1fr);}
  .db-links{position:static;}
}
@media (max-width:700px){
  /* Kopf und Leiste bleiben einzeilig: der Zaehler schrumpft auf die Zahl,
     die Adresse wird gekuerzt, der Startknopf nimmt den freien Platz. */
  .db-kopf-rechts{flex-wrap:nowrap;gap:8px;}
  .kk-aktion{display:none;}
  .kk-email{max-width:15ch;}
  .kk-knopf{padding:8px;font-size:13.5px;}
  .db-zaehler{padding:6px 12px 6px 10px;}
  .db-zaehler-zusatz{display:none;}
  .db-zaehler-titel{font-size:12.5px;}
  .db-bar .wz-bar-innen{justify-content:space-between;}
  .db-bar .wz-primary{flex:1;}
  .db-wahl{display:flex;width:100%;flex-wrap:nowrap;}
  .db-wahl.gross button{padding:13px 8px;font-size:14px;white-space:normal;}
}