/* Schriften werden AUSSCHLIESSLICH vom eigenen Server geliefert.
   Kein Google Fonts, kein Fontshare-CDN - sonst geht bei jedem Seitenaufruf
   die IP des Besuchers an einen Dritten (LG Muenchen I, 20.01.2022, 3 O 17493/20).
   Liegen die Dateien nicht in /fonts/, greift stillschweigend die Systemschrift. */
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Semibold.woff2') format('woff2');
 font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Medium.woff2') format('woff2');
 font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('fonts/GeneralSans-Regular.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap}
/* Archivo als Variable Font: eine Datei, alle Gewichte, 34 KB.
   Quelle: npm @fontsource-variable/archivo, SIL Open Font License (Archivo-OFL.txt). */
@font-face{font-family:'Archivo';src:url('fonts/Archivo-Variable.woff2') format('woff2-variations');
 font-weight:100 900;font-style:normal;font-display:swap}
:root{--papier:#F3F2EE;--papier2:#E9E7E1;--tinte:#121212;--dunkel:#1D1D1C;
 --blau:#2B3BF5;--grau:#6b6b6b;--linie:#dbd9d2;
 --display:'General Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
 --text:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;--gutter:clamp(20px,5vw,72px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--text);
 font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.05em;line-height:.93;margin:0}
h1{font-size:clamp(46px,9.2vw,116px)}
h2{font-size:clamp(34px,6vw,78px)}
h3{font-size:clamp(20px,2.3vw,27px);letter-spacing:-.035em;line-height:1.1}
.blau{color:var(--blau)}
.lead{font-size:clamp(17px,1.5vw,20px);color:#4a4a4a;max-width:46ch}
.sec-blau .lead,.sec-dunkel .lead{color:rgba(255,255,255,.78)}

.ico{display:block;flex:none}
/* Blauer Akzent muss sich auf jedem Untergrund behaupten.
   Praesentationsattribute im SVG haben geringere Prioritaet als CSS. */
.sec-blau .ico [fill="#2B3BF5"]{fill:#ffffff}
.sec-blau .ico [stroke="#2B3BF5"]{stroke:#ffffff}
.sec-dunkel .ico [fill="#2B3BF5"],footer .ico [fill="#2B3BF5"]{fill:#8f9bff}
.sec-dunkel .ico [stroke="#2B3BF5"],footer .ico [stroke="#2B3BF5"]{stroke:#8f9bff}
.btn-blau .ico [fill="#2B3BF5"],.mockup .mb .ico [fill="#2B3BF5"]{fill:#ffffff}
.btn-blau .ico [stroke="#2B3BF5"],.mockup .mb .ico [stroke="#2B3BF5"]{stroke:#ffffff}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
 margin-bottom:24px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blau);flex:none}
.eyebrow.hell{color:rgba(255,255,255,.75)}.eyebrow.hell::before{background:#fff}

header{position:sticky;top:0;z-index:60;background:rgba(243,242,238,.92);
 backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:15px;padding-bottom:15px}
.kopf>a:first-child img{width:120px}
.nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;opacity:.72}.nav a:hover{opacity:1;color:var(--blau)}
.nav .mitico{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
@media(max-width:900px){.nav .verstecken{display:none}}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:15px 26px;
 font-family:var(--text);font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
 border:1px solid transparent;transition:transform .12s,background .15s,color .15s}
.btn:active{transform:translateY(1px)}
.btn-blau{background:var(--blau);color:#fff}.btn-blau:hover{background:#1e2cd6}
.btn-linie{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.btn-linie:hover{background:var(--tinte);color:var(--papier)}
.btn-weiss{background:#fff;color:var(--tinte)}.btn-weiss:hover{background:var(--papier2)}
.btn-geist{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-geist:hover{background:rgba(255,255,255,.12)}
.btn-klein{padding:10px 18px;font-size:14px}

.hero{padding:clamp(52px,8vw,96px) 0 clamp(40px,6vw,72px)}
.hero h1{margin-bottom:28px;max-width:15ch}
.hero-unten{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,5vw,68px);align-items:end;
 margin-top:clamp(30px,4.6vw,52px)}
@media(max-width:920px){.hero-unten{grid-template-columns:1fr;align-items:start}}

.codebox{background:#fff;border:1px solid var(--linie);border-radius:20px;padding:24px}
.codebox .kopfz{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.codebox label{font-size:13.5px;font-weight:700}
.codebox .hint{font-size:13px;color:var(--grau);margin:0 0 14px}
.codezeile{display:flex;gap:10px}
.codezeile input{flex:1;min-width:0;font-family:var(--text);font-size:19px;font-weight:600;
 letter-spacing:.22em;padding:14px 16px;border:1px solid var(--linie);border-radius:999px;
 background:var(--papier);color:var(--tinte)}
.codezeile input::placeholder{color:#b4b1a9;font-weight:500}
.codezeile input:focus{outline:none;border-color:var(--blau);background:#fff;
 box-shadow:0 0 0 3px rgba(43,59,245,.13)}
.codezeile .btn{flex:none}
@media(max-width:430px){.codezeile{flex-direction:column}.codezeile .btn{justify-content:center}}

.fakten{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px}
.fakt{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500}
.fakt .ico{width:19px;height:19px}

.band{background:var(--tinte);color:#fff;overflow:hidden;padding:14px 0}
.band-inner{display:flex;gap:50px;white-space:nowrap;animation:lauf 36s linear infinite;
 font-family:var(--display);font-size:16px;font-weight:500}
.band span{display:inline-flex;align-items:center;gap:50px}
.band span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--blau)}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band-inner{animation:none}}

section{padding:clamp(60px,8.5vw,120px) 0}
.sec-blau{background:var(--blau);color:#fff}
.sec-dunkel{background:var(--dunkel);color:var(--papier)}
.sec-papier2{background:var(--papier2)}
.zweispalt{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,6vw,84px);align-items:start}
@media(max-width:920px){.zweispalt{grid-template-columns:1fr;gap:28px}}

.gruende{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3.2vw,48px);
 margin-top:clamp(36px,5.5vw,66px);border-top:1px solid rgba(255,255,255,.3);padding-top:32px}
@media(max-width:820px){.gruende{grid-template-columns:1fr;gap:28px}}
.grund .kopfz{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.grund .ico{width:34px;height:34px;stroke-width:1.5}
.grund .nr{font-family:var(--display);font-size:13px;font-weight:600;opacity:.55}
.grund h3{margin-bottom:8px}
.grund p{margin:0;font-size:15.5px;line-height:1.6;opacity:.86;max-width:34ch}

.liste{margin-top:clamp(32px,5vw,52px);border-top:1px solid var(--linie)}
.zeile{display:grid;grid-template-columns:30px 1fr auto;gap:16px;align-items:start;
 padding:20px 0;border-bottom:1px solid var(--linie)}
.zeile .ico{width:24px;height:24px;margin-top:2px;color:var(--tinte)}
.zeile .was{font-family:var(--display);font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:-.025em}
.zeile .dazu{font-size:15px;color:var(--grau);margin-top:4px;max-width:54ch}
.zeile .preis{font-family:var(--display);font-size:16.5px;font-weight:600;white-space:nowrap;
 align-self:center}
.zeile .preis.inkl{color:var(--blau)}
@media(max-width:620px){.zeile{grid-template-columns:26px 1fr}.zeile .preis{grid-column:2;margin-top:8px;align-self:start}}

.preiskarte{background:var(--tinte);color:#fff;border-radius:26px;padding:clamp(26px,4.2vw,50px)}
.preiszahl{font-family:var(--display);font-size:clamp(62px,11.5vw,126px);font-weight:600;
 letter-spacing:-.055em;line-height:.88}
.preiszahl small{font-size:.26em;letter-spacing:-.02em;font-weight:500;opacity:.66;display:block;
 margin-top:14px;line-height:1.45}

.vzeile{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
 padding:18px 0;border-bottom:1px solid var(--linie)}
.vzeile:first-child{border-top:1px solid var(--linie)}
.vname{font-family:var(--display);font-size:clamp(18px,2.1vw,25px);font-weight:600;letter-spacing:-.03em}
.vspanne{display:block;font-family:var(--text);font-size:13.5px;font-weight:400;letter-spacing:0;
 color:var(--grau);margin-top:3px}
.vbetrag{text-align:right;white-space:nowrap}
.vmonat{display:block;font-family:var(--display);font-size:clamp(21px,2.6vw,32px);font-weight:600;
 letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05}
.vmonat small{font-size:.46em;font-weight:500;letter-spacing:-.01em;color:var(--grau)}
.vjahr{display:block;font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums;margin-top:3px}
.vzeile.eigen .vmonat small{color:rgba(43,59,245,.62)}

.vzeile.eigen .vname,.vzeile.eigen .vbetrag{color:var(--blau)}
.balken{display:block;height:5px;border-radius:999px;background:#dbd9d2;margin-top:10px;
 overflow:hidden;max-width:520px}
.balken i{display:block;height:100%;background:var(--tinte);border-radius:999px}
.vzeile.eigen .balken i{background:var(--blau)}
.fussnote{font-size:13px;color:var(--grau);margin-top:20px;line-height:1.65;max-width:78ch}

.karten{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,20px);
 margin-top:clamp(34px,5vw,54px)}
@media(max-width:940px){.karten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.karten{grid-template-columns:1fr}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:18px;padding:24px}
.karte .ico{width:30px;height:30px;margin-bottom:16px;color:var(--tinte)}
.karte h3{font-size:19px;margin-bottom:7px}
.karte p{margin:0;font-size:14.5px;line-height:1.55;color:var(--grau)}

.faq{margin-top:clamp(30px,4.6vw,50px);max-width:840px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
 padding:20px 0;font-family:var(--display);font-size:clamp(17px,1.9vw,21px);font-weight:600;
 letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:22px;height:22px;color:var(--blau)}
.faq summary .pfeil{margin-left:auto;font-size:22px;font-weight:400;color:var(--grau);
 transition:transform .18s}
.faq details[open] summary .pfeil{transform:rotate(45deg)}
.faq .antwort{padding:0 0 22px 36px;font-size:16px;color:#4a4a4a;max-width:64ch}

.pillen{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pille{border:1px solid var(--linie);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500}
.sec-blau .pille,.sec-dunkel .pille{border-color:rgba(255,255,255,.4)}
.portraet{border-radius:24px;overflow:hidden;background:var(--papier2);max-width:400px}

.fertigbild{width:100%}
.fertigbild svg{width:100%;height:auto;display:block;filter:drop-shadow(0 34px 60px rgba(18,18,18,.10))}

footer{background:var(--dunkel);color:var(--papier);padding:clamp(48px,6.5vw,80px) 0 32px}
footer>.wrap>img{width:148px;margin-bottom:28px}
.fuss-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:820px){.fuss-gitter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.fuss-gitter{grid-template-columns:1fr}}
.fuss-gitter h4{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;
 text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 12px}
.fuss-gitter a,.fuss-gitter p{display:flex;align-items:center;gap:9px;font-size:15px;
 color:rgba(255,255,255,.88);text-decoration:none;margin:0 0 9px}
.fuss-gitter a:hover{color:#fff}
.fuss-gitter .ico{width:17px;height:17px;opacity:.75}
.fuss-unten{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;
 display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13px;color:rgba(255,255,255,.5)}
.entwurf{background:#121212;color:#fff;font-size:13.5px;padding:11px var(--gutter);
 display:flex;gap:10px;align-items:baseline;line-height:1.5}
.entwurf b{color:#8f9bff;flex:none}
/* ---------- Textur ----------
   Papier statt Raster: zwei Rauschebenen als SVG-Filter - feine Faserung plus grobe
   Wolkigkeit. Erst beides zusammen liest sich als Papier. Ueber multiply eingerechnet,
   damit es die Flaechenfarbe anschmutzt statt sie aufzuhellen. Sehr niedrig dosiert. */
section,.hero,footer,.band{position:relative;isolation:isolate;overflow:hidden}
.hero>.wrap,section>.wrap,footer>.wrap{position:relative;z-index:2}
.hero::before,section::before,footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PGZpbHRlciBpZD0iZiIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuODYiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHNlZWQ9IjciLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+PC9maWx0ZXI+PGZpbHRlciBpZD0iZyIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDIyIiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiBzZWVkPSIxMCIvPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsdGVyPSJ1cmwoI2cpIiBvcGFjaXR5PSIuNTUiLz48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsdGVyPSJ1cmwoI2YpIiBvcGFjaXR5PSIuODUiLz48L3N2Zz4=");background-size:200px 200px;background-repeat:repeat;
  mix-blend-mode:multiply;opacity:.15}
/* Auf dunklen Flaechen wuerde multiply die Textur verschlucken */
.sec-dunkel::before,footer::before{mix-blend-mode:soft-light;opacity:.20}
.sec-blau::before{mix-blend-mode:soft-light;opacity:.22}
/* Weiche Verlaeufe fuer Tiefe - die bleiben */
.sec-blau::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(92% 72% at 20% 4%,rgba(255,255,255,.20),transparent 62%)}
.sec-dunkel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 0%,rgba(143,155,255,.15),transparent 66%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 48% at 88% 4%,rgba(43,59,245,.06),transparent 62%)}
.sec-papier2{border-top:1px solid #d6d4cd;border-bottom:1px solid #d6d4cd}
.sec-dunkel .wasserzeichen{position:absolute;left:50%;bottom:-.24em;transform:translateX(-50%);
  z-index:0;font-family:var(--display);font-weight:600;letter-spacing:-.06em;
  font-size:clamp(120px,26vw,340px);line-height:.8;color:rgba(255,255,255,.045);
  white-space:nowrap;pointer-events:none;user-select:none}



/* ---------- Rechtsseiten ---------- */
.rechtstext{max-width:74ch;padding-top:clamp(30px,5vw,54px)}
.rechtstext h2{font-size:clamp(23px,3vw,34px);margin:clamp(34px,4.6vw,52px) 0 12px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{font-size:clamp(17px,1.9vw,21px);letter-spacing:-.02em;margin:26px 0 8px}
.rechtstext p{margin:0 0 14px;font-size:16.5px;line-height:1.68}
.rechtstext ul{margin:0 0 14px;padding-left:22px}
.rechtstext li{margin-bottom:7px;font-size:16.5px;line-height:1.6}
.rechtstext a{color:var(--blau)}
.rechtstext .anschrift{font-size:17px;line-height:1.75;margin-bottom:14px}
.rechtstext .stand{margin-top:clamp(34px,5vw,54px);padding-top:20px;
 border-top:1px solid var(--linie);font-size:14px;color:var(--grau)}
.rechtstext .kasten{background:#fff;border:1px solid var(--linie);border-radius:16px;
 padding:22px 24px;margin:0 0 18px}
.rechtstext .kasten p:last-child{margin-bottom:0}