/* Kanvexa: shared styles for the public pages.
 *
 * One file for the landing page, the sign-in helper and the registration
 * form. They looked like three different products when each carried its own
 * styling, and the fix is a single source rather than discipline.
 *
 * System fonts on purpose: a web font from a CDN costs a DNS lookup and a TLS
 * handshake before the first line of text can be drawn, and browsers no longer
 * share that cache between sites.
 */

/* System fonts on purpose: a web font from a CDN costs a DNS lookup and a
   TLS handshake before the first line of text can be drawn, and browsers no
   longer share that cache between sites. */
:root{
  --gruen:#2EB586; --blau:#3174DA; --violett:#7640C3;
  --tinte:#0A0A0F; --text:#292524; --grau:#78716C;
  --linie:#E7E5E4; --flaeche:#FFFFFF; --grund:#FFFFFF;
  /* Separate token for the few places that need a tint against white:
     hover states and inline suffixes, which would otherwise vanish. */
  --tupfer:#F5F5F4;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--font);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 20px}

/* Fixed rather than sticky: sticky would still take part in the flow and
   push the hero down as it detaches. The body gets matching padding so the
   first section does not start underneath it. */
header{position:fixed;top:0;left:0;right:0;z-index:60;
  border-bottom:1px solid var(--linie);background:var(--flaeche);
  transform:translateY(0);transition:transform .22s ease,box-shadow .22s ease}
header.versteckt{transform:translateY(-100%)}
header.gescrollt{box-shadow:0 1px 12px rgba(10,10,15,.07)}
body{padding-top:var(--kopfhoehe)}
:root{--kopfhoehe:67px}
/* Anchors land below the header instead of under it. */
[id]{scroll-margin-top:calc(var(--kopfhoehe) + 12px)}
.kopf{display:flex;align-items:center;gap:16px;padding:14px 0}
.kopf .marke{display:block;line-height:0}
.kopf img{height:36px;width:auto}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:15px}
/* :not(.knopf) matters: this rule is more specific than .knopf and would
   otherwise paint the label of a dark button grey on black. */
.kopf nav a:not(.knopf){color:var(--grau);text-decoration:none}
.kopf nav a:not(.knopf):hover{color:var(--tinte)}
.knopf{display:inline-block;background:var(--tinte);color:#fff;text-decoration:none;
       padding:10px 18px;border-radius:8px;font-weight:600;font-size:15px}
.knopf:hover{background:#000}
.knopf.hell{background:var(--flaeche);color:var(--text);border:1px solid var(--linie)}
.knopf.hell:hover{background:var(--tupfer);border-color:#D6D3D1}

.hero{padding:64px 0 56px;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.hero p.auge{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
             font-weight:600;color:var(--gruen);margin:0 0 14px}
h1{font-size:clamp(30px,5.2vw,50px);line-height:1.12;letter-spacing:-.02em;
   font-weight:700;color:var(--tinte);margin:0 0 18px;max-width:17ch}
.hero .lead{font-size:19px;color:var(--grau);margin:0 0 28px;max-width:56ch}
.tasten{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hinweis{font-size:14px;color:var(--grau);margin:18px 0 0}
.hinweis code{background:var(--tupfer);border:1px solid var(--linie);border-radius:5px;
              padding:2px 6px;font-size:13px}

/* Scoped to main: a bare element selector in a shared stylesheet also
   hits sections rendered by other components. The toast container is a
   <section> and picked up 112px of padding from this rule. */
main section{padding:56px 0}
h2{font-size:clamp(22px,3.2vw,30px);line-height:1.25;letter-spacing:-.01em;
   font-weight:700;color:var(--tinte);margin:0 0 10px}
.unter{color:var(--grau);margin:0 0 32px;max-width:62ch}

.raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;padding:20px}
.karte h3{font-size:17px;font-weight:650;color:var(--tinte);margin:0 0 6px}
.karte p{margin:0;font-size:15px;color:var(--grau);line-height:1.55}
.strich{width:26px;height:3px;border-radius:2px;margin:0 0 14px}

/* No fill any more: with a white page the bands separate through their
   hairlines alone, which is what was asked for. */
.band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.liste{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
       border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:var(--flaeche)}
.zeile{padding:18px 20px;border-bottom:1px solid var(--linie)}
.zeile:last-child{border-bottom:none}
.zeile h3{font-size:16px;font-weight:650;color:var(--tinte);margin:0 0 4px}
.zeile p{margin:0;font-size:15px;color:var(--grau)}

.fuer{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fuer div{border-left:3px solid var(--linie);padding:2px 0 2px 16px}
.fuer strong{display:block;color:var(--tinte);font-size:16px;margin-bottom:3px}
.fuer span{font-size:15px;color:var(--grau)}

.schluss{background:var(--tinte);color:#fff;border-radius:14px;padding:40px;margin:0 0 8px}
.schluss h2{color:#fff;margin-bottom:8px}
.schluss p{color:#A8A29E;margin:0 0 22px;max-width:52ch}
.schluss .knopf{background:#fff;color:var(--tinte)}
.schluss .knopf:hover{background:#E7E5E4}
.schluss .knopf.rand{background:transparent;color:#fff;border:1px solid #44403C}
.schluss .knopf.rand:hover{background:#1C1917}

.schau figure{margin:0}
.schau img{width:100%;height:auto;border:1px solid var(--linie);border-radius:12px;background:#fff}
.teaser{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:20px 0 0}
.teaser p{flex:1 1 320px;margin:0;font-size:16px;line-height:1.6;color:var(--grau)}
.teaser .knopf{flex:0 0 auto}
.teaser span{flex:1 1 100%;font-size:14px;color:var(--grau)}

footer{border-top:1px solid var(--linie);padding:26px 0;font-size:14px;color:var(--grau)}
.fuss{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.fuss a{color:var(--grau);text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss .rechts{margin-left:auto}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:44px 0 40px}
  main section{padding:44px 0}
  .schluss{padding:28px}
  .kopf nav{gap:10px}
}

/* ── Formular-Seiten (Anmelden, Registrieren) ───────────────────────────── */
.schmal{width:100%;max-width:560px;margin:0 auto;padding:0 20px}
.blatt{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:28px;margin:0 0 18px}
.blatt h1{font-size:24px;margin:0 0 8px}
.blatt .lead{font-size:16px;color:var(--grau);margin:0 0 22px}
.reihe{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 0 14px}
label.feld{display:block;margin:0 0 14px}
/* first-child only: a field can hold a second span, such as the suffix
   group below, and that one must not inherit the caption styling. */
label.feld > span:first-child{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:var(--font);font-size:16px;color:var(--text);background:var(--flaeche);
  border:1px solid #D6D3D1;border-radius:9px;padding:11px 12px;line-height:1.4}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tinte);box-shadow:0 0 0 3px rgba(10,10,15,.08)}
textarea{resize:vertical;min-height:110px}
button.knopf{border:0;cursor:pointer;font-family:var(--font)}
.meldung{border-radius:10px;padding:14px 16px;margin:0 0 18px;font-size:15px}
.meldung.gut{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.meldung.schlecht{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.kleingedruckt{font-size:13px;color:var(--grau);margin:14px 0 0}
.zurueck{display:inline-block;font-size:14px;color:var(--grau);text-decoration:none;margin-top:6px}
.zurueck:hover{color:var(--tinte)}
.suffix{display:flex!important;align-items:stretch;text-transform:none!important;margin:0!important}
.suffix input{border-radius:9px 0 0 9px}
.suffix span{display:flex;align-items:center;padding:0 12px;border:1px solid #D6D3D1;border-left:0;
  border-radius:0 9px 9px 0;background:var(--tupfer);color:var(--grau);font-size:15px;white-space:nowrap}

/* ── Rechtstexte ────────────────────────────────────────────────────────── */
.recht{max-width:720px}
.recht h1{font-size:clamp(26px,4vw,34px);margin:0 0 6px}
.recht .stand{font-size:14px;color:var(--grau);margin:0 0 30px}
.recht h2{font-size:19px;margin:34px 0 8px}
.recht h3{font-size:16px;font-weight:650;color:var(--tinte);margin:22px 0 6px}
.recht p{margin:0 0 12px;font-size:16px;line-height:1.7}
.recht ul{margin:0 0 14px;padding-left:22px}
.recht li{margin:0 0 6px;font-size:16px;line-height:1.65}
.recht dl{margin:0 0 14px}
.recht dt{font-weight:650;color:var(--tinte);font-size:15px;margin:12px 0 2px}
.recht dd{margin:0;font-size:16px;color:var(--text)}
.recht a{color:var(--blau)}
.luecke{display:inline-block;background:#FEF3C7;border:1px dashed #D97706;border-radius:5px;
        padding:1px 7px;font-size:14px;color:#92400E;font-weight:600}
.hinweiskasten{border:1px solid #FDE68A;background:#FFFBEB;border-radius:10px;
               padding:16px 18px;margin:0 0 26px;font-size:15px;line-height:1.6;color:#78350F}

/* ── Anfrageseite: Formular neben dem Ablauf ─────────────────────────────── */
.anfrage{display:grid;gap:26px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media (max-width:820px){.anfrage{grid-template-columns:1fr}}
.ablauf{background:var(--flaeche);border:1px solid var(--linie);border-radius:14px;padding:24px}
.ablauf h2{font-size:16px;font-weight:650;color:var(--tinte);margin:0 0 16px}
.ablauf ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:schritt}
.ablauf ol li{counter-increment:schritt;position:relative;padding:0 0 16px 34px;font-size:15px;
              line-height:1.55;color:var(--grau)}
.ablauf ol li:last-child{padding-bottom:0}
.ablauf ol li::before{content:counter(schritt);position:absolute;left:0;top:0;width:22px;height:22px;
  border-radius:50%;background:var(--tinte);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.ablauf ol li strong{display:block;color:var(--tinte);font-weight:650;margin-bottom:2px}
.punkte{margin:0;padding:0;list-style:none;border-top:1px solid var(--linie);padding-top:18px}
.punkte li{position:relative;padding:0 0 9px 22px;font-size:14px;color:var(--grau);line-height:1.5}
.punkte li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--gruen)}
.punkte li:last-child{padding-bottom:0}

/* Links inside body copy need to look like links, otherwise nobody clicks
   them. The nav is the only place where a muted link is intentional. */
.kleingedruckt a,.punkte a,.blatt p a,.ablauf a{color:var(--blau);text-decoration:underline;
  text-underline-offset:2px}
.kleingedruckt a:hover,.punkte a:hover,.blatt p a:hover,.ablauf a:hover{color:var(--tinte)}

/* ── Preise ─────────────────────────────────────────────────────────────── */
/* stretch, and the card is a column with the button pushed to the end:
   the tiers hold a different number of points, and buttons that sit at
   different heights read as a layout fault. */
.tarife{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.tarif{position:relative;display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:14px;padding:26px 24px;background:var(--flaeche)}
.tarif.hervor{border-color:var(--tinte);border-width:2px;padding:25px 23px}
.fahne{position:absolute;top:-11px;left:24px;background:var(--tinte);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.tarif h3{font-size:18px;font-weight:700;color:var(--tinte);margin:0 0 3px}
.fuerwen{font-size:14px;color:var(--grau);margin:0 0 18px;min-height:40px}
.preis{margin:0 0 2px;display:flex;align-items:baseline;gap:6px}
.preis strong{font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--tinte);line-height:1}
.preis span{font-size:15px;color:var(--grau)}
.jahr{font-size:13px;color:var(--grau);margin:0 0 20px}
.tarif ul{flex:1 1 auto;margin:0 0 22px;padding:0;list-style:none;border-top:1px solid var(--linie);padding-top:18px}
.tarif ul li{position:relative;padding:0 0 9px 22px;font-size:15px;color:var(--text);line-height:1.5}
.tarif ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--gruen)}
.tarif .knopf{display:block;text-align:center}
.gruender{margin:26px 0 0;border:1px solid var(--linie);border-left:3px solid var(--gruen);
  border-radius:12px;padding:22px 24px;background:var(--flaeche)}
.gruender h3{font-size:16px;font-weight:700;color:var(--tinte);margin:0 0 6px}
.gruender p{margin:0;font-size:15px;line-height:1.65;color:var(--grau)}
.gruender strong{color:var(--tinte)}
/* Rows, not a grid: the items differ in length, and auto-fit columns turned
   that into a ragged block where nothing lined up. A row list reads the same
   on a phone and on a desktop, which is the point. */
.feinheiten{margin:22px 0 0;padding:0;list-style:none;border:1px solid var(--linie);
  border-radius:12px;overflow:hidden}
.feinheiten li{padding:13px 18px;border-bottom:1px solid var(--linie);
  font-size:15px;line-height:1.55;color:var(--grau)}
.feinheiten li:last-child{border-bottom:none}
.feinheiten strong{color:var(--tinte);font-weight:650}
.feinheiten a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}

/* ── Burger ─────────────────────────────────────────────────────────────── */
.burger{display:none;margin-left:auto;width:42px;height:42px;padding:10px;
  background:none;border:0;cursor:pointer;border-radius:9px}
.burger:hover{background:var(--tupfer)}
.burger span{display:block;height:2px;border-radius:2px;background:var(--tinte);
  transition:transform .2s ease,opacity .15s ease}
.burger span + span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Kleine Schirme ─────────────────────────────────────────────────────── */
@media (max-width:640px){
  .wrap{padding:0 16px}
  :root{--kopfhoehe:55px}
  .kopf{padding:12px 0;gap:10px}
  .kopf img{height:30px}
  .burger{display:block}
  .kopf{position:relative}
  /* The nav turns into a panel under the header. Kept in the document rather
     than moved into a portal so the links stay in reading order for a screen
     reader and no focus juggling is needed. */
  .kopf nav{position:absolute;top:calc(100% + 1px);left:-16px;right:-16px;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--flaeche);border-bottom:1px solid var(--linie);
    box-shadow:0 8px 24px rgba(10,10,15,.08);padding:6px 16px 14px}
  .kopf nav.offen{display:flex}
  .kopf nav a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--linie)}
  .kopf nav a:last-child{border-bottom:none}
  .kopf nav a.knopf{margin-top:10px;text-align:center;border-bottom:none;padding:12px 18px}
  .kopf nav a.knopf.hell{margin-top:14px}
  .kopf nav a.verstecken{display:block}
  .knopf{padding:9px 14px;font-size:14px}
  h1{font-size:clamp(26px,7vw,34px)}
  .hero .lead{font-size:17px}
  .tasten{gap:8px}
  .tasten .knopf{flex:1 1 auto;text-align:center}
  .tarif{padding:22px 20px}
  .tarif.hervor{padding:21px 19px}
  .fuerwen{min-height:0;margin-bottom:14px}
  .preis strong{font-size:34px}
  .gruender{padding:18px 20px}
  .feinheiten li{padding:12px 16px;font-size:14px}
  .schau figcaption{font-size:13px}
  .recht h2{font-size:17px;margin-top:28px}
  .recht p,.recht li{font-size:15px}
  .blatt{padding:20px 18px}
  .anfrage{gap:16px}
  .ablauf{padding:20px 18px}
  .fuss{gap:6px 14px;font-size:13px}
  .fuss .rechts{margin-left:0;width:100%}
}

/* ── Inhaltsseiten ──────────────────────────────────────────────────────── */
.krume{font-size:13px;color:var(--grau);margin:0 0 10px}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--tinte)}
.recht .lead{font-size:19px;line-height:1.6;color:var(--grau);margin:0 0 26px}
.naechster{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0}
.verwandt{margin:0;padding:0;list-style:none;border-top:1px solid var(--linie);padding-top:16px}
.verwandt li{margin:0 0 8px}
.verwandt a{color:var(--blau);text-decoration:none;font-size:16px}
.verwandt a:hover{text-decoration:underline}

.karte h3 a,.zeile h3 a,.fuer strong a{color:inherit;text-decoration:none}
.karte h3 a:hover,.zeile h3 a:hover,.fuer strong a:hover{color:var(--blau);text-decoration:underline}
.fragenhinweis{margin:0 0 26px;font-size:16px;color:var(--grau)}
.fragenhinweis a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}