/* Taxvia: helle, ruhige Seite. Systemschrift, viel Weißraum, echte Bilder aus der App. */
:root{
  --ink:#1d1d1f; --muted:#6b6660; --leise:#8e877d; --line:#e4dccd; --line-hell:#efe9de;
  --bg:#fff; --grau:#f8f4ec; --creme:#fbf8f2; --navy:#0f1b2d; --navy-2:#24344d; --gold:#a8854b; --gold-ink:#8a6a35;
  --schrift:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --titel:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 var(--schrift);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
h1,h2,h3,h4{font-family:var(--titel);margin:0;font-weight:600;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.wrap{width:min(1080px,100% - 44px);margin-inline:auto}
.schmal{width:min(760px,100% - 44px);margin-inline:auto}
.versteckt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nw{white-space:nowrap}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.wortmarke{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wortmarke .marke{width:26px;height:26px;flex:none}
.marke-grund{fill:var(--navy)}.marke-strich{stroke:#e8d3a6}.marke-punkt{fill:#e8d3a6}
.wortmarke span{font:700 19px/1 var(--titel);letter-spacing:-.03em;color:var(--navy)}
.wortmarke span i{font-style:normal;color:var(--gold)}
.kopf nav{display:flex;align-items:center;gap:28px}
.kopf nav a{font-size:13px;color:var(--ink);text-decoration:none;opacity:.8}
.kopf nav a:hover{opacity:1}
.kopf nav a.login{opacity:1;color:#fff;background:var(--navy);padding:6px 14px;border-radius:980px}
.menu-knopf{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;padding:0;position:relative}
.menu-knopf span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .25s}
.menu-knopf span:first-child{top:16px}.menu-knopf span:last-child{top:23px}
.menu-knopf[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-knopf[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Knöpfe und Links */
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:980px;padding:12px 22px;font:500 17px/1.2 var(--schrift);text-decoration:none;cursor:pointer;letter-spacing:-.01em}
.btn:hover{background:var(--navy-2)}
.btn:disabled{opacity:.5;cursor:default}
.link{color:var(--gold-ink);font-weight:500;text-decoration:none;font-size:17px}
.link:hover{text-decoration:underline}

/* Abschnitte */
.abschnitt{padding-block:clamp(72px,10vw,120px)}
.abschnitt.grau{background:var(--grau)}
.titel{max-width:760px}
.titel.mitte{margin-inline:auto;text-align:center}
.titel h2{font-size:clamp(32px,4.6vw,48px)}
.titel p{margin-top:18px;font-size:clamp(19px,1.8vw,21px);line-height:1.45;color:var(--muted)}
.vorzeile{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:600;color:var(--gold);margin-bottom:10px;letter-spacing:-.01em}

/* Start */
.held{padding-top:clamp(56px,8vw,96px);text-align:center;overflow:hidden}
.held h1{font-size:clamp(42px,7vw,76px);letter-spacing:-.035em}
.held-unter{margin:22px auto 0;max-width:640px;font-size:clamp(19px,2vw,24px);line-height:1.4;color:var(--muted)}
.held-knoepfe{margin-top:32px;display:flex;gap:26px;justify-content:center;align-items:center;flex-wrap:wrap}
.buehne{position:relative;margin:clamp(48px,7vw,80px) auto 0;width:min(1080px,100% - 44px);padding-bottom:56px}
.bildschirm{border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 80px -30px rgba(80,60,30,.28)}
.buehne .bildschirm{width:86%}
.handy{width:min(300px,30%);border-radius:44px;padding:9px;background:#1d1d1f;box-shadow:0 30px 70px -25px rgba(15,27,45,.5)}
.handy img{border-radius:36px;width:100%}
.buehne .handy{position:absolute;right:0;bottom:0;width:min(270px,27%)}
.bildnotiz{margin-top:20px;font-size:13px;color:var(--leise);text-align:center}

/* Bild neben Text */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:center}
.paar.handy-paar{grid-template-columns:1.2fr .8fr}
.paar .handy{width:min(320px,100%);margin-inline:auto}
.punkte{margin-top:40px;display:grid;gap:26px}
.punkte h3{font-size:19px;letter-spacing:-.015em}
.punkte p{margin-top:4px;color:var(--muted)}
.breit-bild{margin-top:clamp(48px,6vw,72px)}

/* Liste in Spalten */
.spalten{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 48px}
.spalten h3{font-size:19px;letter-spacing:-.015em}
.spalten p{margin-top:6px;color:var(--muted);font-size:16px}
.spalten.zwei{grid-template-columns:repeat(2,1fr)}
.linie{border-top:1px solid var(--line);padding-top:20px}

.liste{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
.liste li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.liste.zwei{columns:2;column-gap:48px;border-top:0}
.liste.zwei li{break-inside:avoid;border-bottom:1px solid var(--line)}

/* Video */
.video-rahmen{margin-top:48px;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.video-rahmen video{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* Schritte */
.schritte{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.schritte li{background:#fff;border-radius:20px;padding:24px}
.schritte .nr{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grau);color:var(--gold-ink);font-weight:600;font-size:15px}
.schritte h3{margin-top:16px;font-size:19px}
.schritte p{margin-top:6px;color:var(--muted);font-size:16px}

/* Fragen */
.fragen{margin-top:40px;border-top:1px solid var(--line)}
.fragen details{border-bottom:1px solid var(--line)}
.fragen summary{list-style:none;cursor:pointer;padding:22px 36px 22px 0;font-size:19px;font-weight:600;letter-spacing:-.015em;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.fragen details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fragen details p{padding:0 36px 24px 0;color:var(--muted)}

/* Formulare */
.formular{display:grid;gap:16px}
.formular h3{font-size:24px;margin-bottom:4px}
.formular label{display:block;font-size:14px;color:var(--muted)}
.formular input,.formular select,.formular textarea{font:17px/1.4 var(--schrift);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;display:block;margin-top:6px}
.formular textarea{min-height:110px;resize:vertical}
.formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formular .check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink)}
.formular .check input{width:18px;height:18px;margin:2px 0 0;flex:none;display:inline-block}
.formular .btn{justify-self:start;margin-top:4px}
.frei{color:var(--leise)}
.datenschutz-hinweis{font-size:13px;color:var(--leise)}
.datenschutz-hinweis a{color:inherit}
.fertig{font-size:15px;color:var(--ink);background:var(--grau);border-radius:12px;padding:12px 14px}
.fertig a{color:var(--gold-ink)}
.karte{background:#fff;border-radius:24px;box-shadow:0 20px 50px -30px rgba(80,60,30,.25);padding:clamp(24px,4vw,40px)}
.form-paar{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:start}
.kontakt{display:grid;gap:8px;align-content:start}
.kontakt h3{font-size:19px;margin-bottom:6px}
.kontakt a{color:var(--gold-ink);text-decoration:none;font-weight:500}
.kontakt span{color:var(--muted);margin-top:8px}

/* Unterseiten */
.inhalt{padding-block:clamp(56px,8vw,96px)}
.legal{max-width:760px}
.legal h1{font-size:clamp(36px,5vw,48px);margin-bottom:28px}
.legal h2{font-size:21px;margin:36px 0 10px}
.legal p,.legal li{color:#424245;margin-bottom:10px}
.legal a{color:var(--gold-ink)}
.head h1{font-size:clamp(36px,5vw,56px)}
.head p{margin-top:16px;max-width:720px;color:var(--muted);font-size:19px}
.app-video-raster{margin-top:40px;display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.app-video-raster .video-rahmen{margin-top:0}
.kapitel{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kapitel button{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;font:15px/1.35 var(--schrift);color:var(--ink);cursor:pointer}
.kapitel button:hover{color:var(--gold-ink)}
.kapitel span{color:var(--leise);min-width:40px;font-variant-numeric:tabular-nums}
.schluss{margin-top:72px;text-align:center}
.schluss h2{font-size:clamp(28px,3.6vw,40px)}
.schluss p{margin:12px auto 24px;color:var(--muted);max-width:560px;font-size:19px}

/* Fuß */
.fuss{background:var(--grau);color:var(--muted);font-size:12px;padding-block:40px 28px}
.fuss-oben{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.fuss-oben p{margin-top:12px;max-width:300px;line-height:1.5}
.fuss h4{font:600 12px/1.4 var(--schrift);color:var(--ink);margin-bottom:10px;letter-spacing:0}
.fuss-oben div{display:grid;gap:8px;align-content:start}
.fuss a{text-decoration:none;color:var(--muted)}
.fuss a:hover{color:var(--ink);text-decoration:underline}
.fuss-marke .wortmarke span{font-size:16px}.fuss-marke .wortmarke .marke{width:22px;height:22px}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:18px}

@media (max-width:900px){
  .kopf nav{position:absolute;top:56px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 22px 18px}
  .kopf nav.offen{display:flex}
  .kopf nav a{font-size:17px;padding:12px 0;border-bottom:1px solid var(--line-hell);opacity:1}
  .kopf nav a.login{margin-top:14px;text-align:center;border:0;padding:12px}
  .menu-knopf{display:block}
  .paar,.paar.handy-paar,.form-paar,.app-video-raster{grid-template-columns:1fr}
  .paar .handy{order:2;width:min(280px,72%)}
  .spalten{grid-template-columns:1fr 1fr}
  .schritte{grid-template-columns:1fr 1fr}
  .fuss-oben{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .buehne .bildschirm{width:100%}
  .buehne{padding-bottom:0}
  .buehne .handy{position:relative;width:50%;margin:-60px auto 0;right:auto}
  .spalten,.spalten.zwei,.schritte{grid-template-columns:1fr;gap:28px}
  .liste.zwei{columns:1}
  .formular .zeile{grid-template-columns:1fr}
  .fuss-oben{grid-template-columns:1fr}
  .handy{border-radius:38px;padding:8px}.handy img{border-radius:31px}
}
.kontakt.oben{margin-top:36px}
.held{background:linear-gradient(180deg,var(--creme) 0%,#fff 70%)}