/* Kontora · öffentliche Seiten (Startseite, Registrierung) – aus willkommen.php ausgelagert (0.97) */
:root{
  --tanne:#0b3d34; --tanne-hell:#12574a; --gruen:#1a9e7f; --gruen-blass:#e8f5f1;
  --bernstein:#d97b1f; --bernstein-hell:#fff2e2;
  --papier:#fbfaf6; --weiss:#ffffff; --linie:#e7e3da;
  --text:#15201d; --text-weich:#4b5b57; --text-zart:#7c8b87;
}
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--papier); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; }
a{ color:var(--tanne-hell); }

/* @@hilfsklassen-anfang */
/* Hilfsklassen wie in app.css (ersetzen Inline-Styles der öffentlichen Seiten; CSP ohne 'unsafe-inline') */
.m-0{margin:0!important} .m-12-0-0{margin:12px 0 0!important} .m-14-0-0{margin:14px 0 0!important}
.mb-18{margin-bottom:18px!important}
.maxw-560{max-width:560px!important}
.fs-22{font-size:22px!important}
/* @@hilfsklassen-ende */
.wrap{ max-width:1060px; margin:0 auto; padding:0 24px; }

/* Bewegung: sparsam, gestaffelt, abschaltbar */
@keyframes auf{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes wachsen{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes pulsen{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.an{ animation:auf .7s cubic-bezier(.2,.7,.3,1) both; }
.v1{ animation-delay:.05s } .v2{ animation-delay:.14s } .v3{ animation-delay:.23s }
.v4{ animation-delay:.32s } .v5{ animation-delay:.41s } .v6{ animation-delay:.50s }
@media (prefers-reduced-motion:reduce){
  .an,.an *{ animation:none !important; transition:none !important; }
}

/* Kopf */
.kopf{ position:sticky; top:0; z-index:20; background:rgba(251,250,246,.9);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--linie); }
.kopf-in{ display:flex; align-items:center; justify-content:space-between; height:70px; gap:16px; }
.marke{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px;
  letter-spacing:-.02em; color:var(--tanne); text-decoration:none; }
.zeichen{ width:32px; height:32px; border-radius:9px; background:var(--tanne);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:800; }
.kopf-anbieter{ font-size:12.5px; color:var(--text-zart); font-weight:500; letter-spacing:.01em; }
/* Der Weg zur Anmeldung steht dort, wo das Auge nach dem Logo zuerst hinspringt:
   oben rechts, dauerhaft sichtbar (der Kopf bleibt beim Blättern stehen). Der
   kleine Hinweis davor spricht Wiederkehrer an, ohne ein zweites Ziel zu setzen. */
.kopf-tat{ display:flex; align-items:center; gap:12px; }
.kopf-hin{ font-size:13.5px; color:var(--text-zart); }
@media (max-width:560px){ .kopf-hin{ display:none; } }

.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:11px; padding:12px 22px;
  font-weight:650; font-size:15px; text-decoration:none; border:1px solid transparent;
  white-space:nowrap; transition:transform .16s, box-shadow .16s, background .16s; }
.btn-tat{ background:var(--bernstein); color:#fff; box-shadow:0 6px 20px rgba(217,123,31,.26); }
.btn-tat:hover{ background:#c26c15; transform:translateY(-1px); box-shadow:0 10px 26px rgba(217,123,31,.32); }
.btn-still{ background:transparent; color:var(--tanne); border-color:#cfd8d3; }
.btn-still:hover{ border-color:var(--tanne); }
.btn-gross{ padding:16px 30px; font-size:17px; }
.pfeil{ transition:transform .16s; }
.btn:hover .pfeil{ transform:translateX(3px); }

/* Hero */
.hero{ padding:82px 0 68px; position:relative; overflow:hidden; }
.hero::before{ content:''; position:absolute; inset:-30% 40% 40% -20%;
  background:radial-gradient(closest-side, rgba(26,158,127,.14), transparent); pointer-events:none; }
.hero::after{ content:''; position:absolute; right:-12%; top:-18%; width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(217,123,31,.13), transparent); pointer-events:none; }
.hero > .wrap{ position:relative; z-index:1; }
.marke-zeile{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600;
  color:var(--tanne-hell); background:var(--gruen-blass); border:1px solid #cfe7df;
  padding:7px 15px; border-radius:999px; margin-bottom:22px; }
.punkt{ width:7px; height:7px; border-radius:50%; background:var(--gruen); animation:pulsen 2.6s ease-in-out infinite; }
h1{ font-size:clamp(35px,5.4vw,57px); line-height:1.08; letter-spacing:-.03em; margin:0 0 22px;
  font-weight:800; max-width:14ch; color:var(--tanne); }
h1 em{ font-style:normal; position:relative; white-space:nowrap; }
h1 em::after{ content:''; position:absolute; left:0; right:0; bottom:.07em; height:.30em;
  background:rgba(217,123,31,.28); border-radius:3px; z-index:-1;
  transform-origin:left; animation:wachsen .8s .5s cubic-bezier(.2,.7,.3,1) both; }
.lead{ font-size:19.5px; color:var(--text-weich); max-width:600px; margin:0 0 32px; }
.tat{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.tat-note{ font-size:13.5px; color:var(--text-zart); }

/* Belegstrom (1.4.1): Belege treiben auf das Kontora-Zeichen zu und werden am
   Prüfring abgehakt. Rein dekorativ; Zeichnung in belegstrom.js (Canvas). */
.hero-oben{ position:relative; }
.hero-oben > :not(.strom){ position:relative; z-index:1; }
.strom{ --strom-ueberstand:calc((100vw - min(100vw, 1060px)) / 2 + 24px);
  position:absolute; z-index:0; top:-82px; bottom:-34px; left:54%;
  right:calc(-1 * var(--strom-ueberstand)); pointer-events:none; }
.strom-flaeche{ position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26%, #000 100%),
                     linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 26%, #000 100%),
             linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%);
  mask-composite:intersect; }
.strom-leinwand{ display:block; width:100%; height:100%; }
.ablage{ position:absolute; right:var(--strom-ueberstand); bottom:46px; width:248px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--linie); border-radius:14px; padding:12px 14px 10px;
  box-shadow:0 10px 30px rgba(11,61,52,.08); opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.ablage.ist-sichtbar{ opacity:1; transform:none; }
.ablage-kopf{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-zart); margin-bottom:6px; }
.ablage-zeichen{ width:18px; height:18px; border-radius:5px; background:var(--tanne); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; letter-spacing:0; }
.ablage-liste{ list-style:none; margin:0; padding:0; }
.ablage-liste li{ display:grid; grid-template-columns:16px 1fr auto; gap:8px; align-items:center;
  font-size:13px; line-height:1.35; padding:5px 0; border-top:1px solid #f0ede6; color:var(--text-weich);
  animation:ablage-rein .55s cubic-bezier(.2,.7,.3,1) both; }
.ablage-liste li:first-child{ border-top:0; }
.ablage-liste li.geht{ animation:ablage-raus .45s ease both; }
.ablage-haken{ width:16px; height:16px; border-radius:50%; background:var(--gruen); position:relative; }
.ablage-haken::after{ content:''; position:absolute; left:5px; top:3px; width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.ablage-wer{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:600; }
.ablage-betrag{ font-variant-numeric:tabular-nums; color:var(--tanne); font-weight:700; }
@keyframes ablage-rein{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes ablage-raus{ to{ opacity:0; transform:translateY(4px); } }
@media (max-width:980px){
  .hero-oben{ display:grid; }
  .hero-oben > .marke-zeile{ justify-self:start; }
  .strom{ position:relative; order:10; left:auto; right:auto; top:auto; bottom:auto;
    height:300px; margin:30px -24px 0; }
  .strom-flaeche{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .ablage{ right:24px; bottom:10px; width:220px; }
}
@media (max-width:560px){ .ablage{ display:none; } .strom{ height:260px; } }
@media (prefers-reduced-motion:reduce){ .ablage{ transition:none; } .ablage-liste li{ animation:none; } }

/* Fristenband – konkret und nachprüfbar */
.frist{ margin-top:56px; background:var(--weiss); border:1px solid var(--linie);
  border-radius:18px; padding:24px 26px; }
.frist-kopf{ font-size:12px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:var(--text-zart); margin-bottom:16px; }
.frist-reihe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.frist-punkt{ position:relative; padding-left:20px; }
.frist-punkt::before{ content:''; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:50%; background:var(--gruen); }
.frist-punkt.kommt::before{ background:var(--bernstein); }
.frist-jahr{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--tanne); }
.frist-text{ font-size:13.5px; color:var(--text-weich); margin-top:2px; }

/* Abschnitte */
section{ padding:78px 0; }
.kopf-block{ max-width:640px; margin:0 0 42px; }
h2{ font-size:clamp(27px,3.6vw,36px); line-height:1.18; letter-spacing:-.025em; margin:0 0 14px;
  font-weight:800; color:var(--tanne); }
.kopf-block p{ font-size:17.5px; color:var(--text-weich); margin:0; }

.karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:20px; }
.karte{ background:var(--weiss); border:1px solid var(--linie); border-radius:18px; padding:28px;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.karte:hover{ transform:translateY(-3px); border-color:#d5ded9; box-shadow:0 14px 34px rgba(11,61,52,.08); }
.karte-ic{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; margin-bottom:18px; background:var(--gruen-blass); color:var(--tanne-hell); }
.karte h3{ font-size:18px; margin:0 0 9px; font-weight:700; letter-spacing:-.01em; color:var(--tanne); }
.karte p{ margin:0; font-size:14.5px; color:var(--text-weich); }

/* Der isolierte Block – bewusst der einzige dunkle Bereich */
.spot{ background:var(--tanne); color:#fff; border-radius:26px; padding:56px 52px; position:relative; overflow:hidden; }
.spot::after{ content:''; position:absolute; right:-90px; bottom:-90px; width:340px; height:340px;
  border-radius:50%; background:rgba(26,158,127,.16); }
.spot > *{ position:relative; z-index:1; }
.merksatz{ font-size:clamp(24px,3.4vw,33px); line-height:1.28; font-weight:800; letter-spacing:-.02em;
  margin:0 0 20px; max-width:19ch; color:#fff; }
.merksatz span{ color:#5fd3b4; }
.spot p{ color:#c3d8d2; font-size:17px; max-width:560px; margin:0; }
.spot-liste{ list-style:none; padding:0; margin:30px 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:15px; }
.spot-liste li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:#dcebe6; }
.haken{ flex:0 0 21px; height:21px; border-radius:50%; background:rgba(95,211,180,.18);
  color:#5fd3b4; display:flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:800; margin-top:1px; }

/* Ehrlichkeit */
.ehrlich{ background:var(--weiss); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.e-liste{ display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:26px; margin-top:8px; }
.e-punkt{ padding-left:34px; position:relative; }
.e-punkt::before{ content:'—'; position:absolute; left:0; top:-1px; color:var(--bernstein); font-weight:800; }
.e-punkt h3{ font-size:16px; margin:0 0 6px; font-weight:700; color:var(--tanne); }
.e-punkt p{ margin:0; font-size:14.5px; color:var(--text-weich); }

/* Betrieb */
.betrieb{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.b-punkt h3{ font-size:16px; margin:0 0 6px; font-weight:700; color:var(--tanne); }
.b-punkt p{ margin:0; font-size:14.5px; color:var(--text-weich); }

/* Schluss */
.schluss{ text-align:center; padding:92px 0 100px; }
.schluss h2{ margin-bottom:16px; }
.schluss p{ font-size:17.5px; color:var(--text-weich); max-width:500px; margin:0 auto 30px; }

footer{ border-top:1px solid var(--linie); padding:32px 0; font-size:13.5px; color:var(--text-zart); }
.fuss-in{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }

@media (max-width:640px){
  .spot{ padding:36px 26px; } section{ padding:58px 0; } .hero{ padding:56px 0 50px; }
  h1{ max-width:none; } .schluss{ padding:70px 0; }
}

/* ===== 0.97: Pakete, Fragen, Registrierung ================================ */
.kopf-nav{ display:flex; gap:22px; font-size:14.5px; font-weight:600; }
.kopf-nav a{ color:var(--text-weich); text-decoration:none; }
.kopf-nav a:hover{ color:var(--tanne); }
@media (max-width:820px){ .kopf-nav{ display:none; } }
.link-still{ font-size:14.5px; font-weight:650; color:var(--tanne); text-decoration:none; }
.link-still:hover{ text-decoration:underline; text-underline-offset:3px; }

.preise{ background:var(--weiss); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.takt{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--papier); border:1px solid var(--linie); margin:0 0 30px; }
.takt label{ padding:9px 20px; border-radius:999px; font-size:14.5px; font-weight:650; color:var(--text-weich); cursor:pointer; }
.takt .spar{ display:inline-block; margin-left:8px; font-size:12px; font-weight:700; color:var(--gruen); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
#takt-m:checked ~ .takt .l-m, #takt-j:checked ~ .takt .l-j{ background:var(--tanne); color:#fff; }
#takt-m:checked ~ .takt .l-m .spar, #takt-j:checked ~ .takt .l-j .spar{ color:#9ee6d0; }
#takt-m:focus-visible ~ .takt .l-m, #takt-j:focus-visible ~ .takt .l-j{ outline:2px solid var(--bernstein); outline-offset:2px; }
.p-jahr{ display:none; }
#takt-j:checked ~ .paketreihe .p-monat{ display:none; }
#takt-j:checked ~ .paketreihe .p-jahr{ display:block; }
#takt-j:checked ~ .paketreihe .cta-m{ display:none; }
.cta-j{ display:none; }
#takt-j:checked ~ .paketreihe .cta-j{ display:inline-flex; }
.paketreihe{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.paket{ position:relative; display:flex; flex-direction:column; gap:14px; background:var(--papier); border:1px solid var(--linie); border-radius:20px; padding:30px 28px; }
.paket.hervor{ background:var(--weiss); border:2px solid var(--tanne); box-shadow:0 22px 50px rgba(11,61,52,.12); }
.paket .flagge{ position:absolute; top:-13px; left:26px; background:var(--tanne); color:#fff; font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:999px; }
.paket h3{ margin:0; font-size:21px; font-weight:800; color:var(--tanne); letter-spacing:-.01em; }
.paket .wofuer{ margin:0; font-size:14.5px; color:var(--text-weich); min-height:46px; }
.betrag{ display:flex; align-items:baseline; gap:8px; }
.betrag strong{ font-size:44px; font-weight:800; letter-spacing:-.04em; color:var(--tanne); line-height:1; }
.betrag span{ font-size:14px; color:var(--text-zart); }
.p-hinweis{ font-size:13px; color:var(--text-zart); margin-top:-6px; }
.paket ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; font-size:14.5px; color:var(--text); }
.paket li{ display:flex; gap:10px; align-items:flex-start; }
.paket li::before{ content:''; flex:0 0 18px; height:18px; margin-top:3px; border-radius:50%;
  background:var(--gruen-blass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312574a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.paket li.plus{ color:var(--text-zart); font-size:13.5px; }
.paket li.plus::before{ display:none; }
.paket .btn{ justify-content:center; margin-top:auto; }
.preis-fuss{ margin-top:26px; font-size:13.5px; color:var(--text-zart); max-width:760px; }
@media (max-width:900px){ .paketreihe{ grid-template-columns:1fr; } .paket .wofuer{ min-height:0; } }

.fragen{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 26px; }
.fragen details{ border-bottom:1px solid var(--linie); padding:14px 0; }
.fragen summary{ cursor:pointer; font-weight:700; color:var(--tanne); font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.fragen summary::after{ content:'+'; color:var(--bernstein); font-weight:800; }
.fragen details[open] summary::after{ content:'–'; }
.fragen summary::-webkit-details-marker{ display:none; }
.fragen p{ margin:10px 0 0; font-size:15px; color:var(--text-weich); }
@media (max-width:760px){ .fragen{ grid-template-columns:1fr; } }

/* Registrierung */
.reg{ padding-top:56px; padding-bottom:80px; }   /* nur oben/unten – die seitlichen Ränder kommen von .wrap */
.reg-raster{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:start; }
.reg h1{ font-size:clamp(30px,4vw,42px); max-width:none; margin-bottom:10px; }
.reg .lead{ font-size:17px; margin-bottom:26px; }
.formkarte{ background:var(--weiss); border:1px solid var(--linie); border-radius:20px; padding:30px; }
.feld{ display:grid; gap:7px; margin-bottom:16px; }
.feld label{ font-size:14px; font-weight:650; color:var(--text); }
.feld input, .feld select{ font:inherit; font-size:15.5px; padding:12px 14px; border-radius:11px; border:1px solid #d8dfda; background:#fff; color:var(--text); }
.feld input:focus, .feld select:focus{ outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px rgba(26,158,127,.18); }
.feld .hilfe{ font-size:13px; color:var(--text-zart); }
.feld.fehler input{ border-color:#c2410c; }
.feld-reihe{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.feld input, .feld select{ min-width:0; width:100%; box-sizing:border-box; }
@media (max-width:620px){ .feld-reihe{ grid-template-columns:1fr; } .reg-raster{ grid-template-columns:1fr; } }
.haken-zeile{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--text-weich); margin:12px 0; }
.haken-zeile input{ margin-top:4px; width:17px; height:17px; accent-color:var(--tanne); flex:none; }
.meldung{ border-radius:12px; padding:13px 16px; font-size:14.5px; margin-bottom:18px; }
.meldung.fehler{ background:#fff1ec; border:1px solid #f6c3b0; color:#9a3412; }
.meldung.ok{ background:var(--gruen-blass); border:1px solid #cfe7df; color:var(--tanne); }
.schritte{ list-style:none; margin:0; padding:0; display:grid; gap:20px; counter-reset:s; }
.schritte li{ counter-increment:s; display:grid; grid-template-columns:38px 1fr; gap:14px; }
.schritte li::before{ content:counter(s); width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; color:var(--tanne); background:var(--gruen-blass); }
.schritte h3{ margin:4px 0 4px; font-size:16px; color:var(--tanne); }
.schritte p{ margin:0; font-size:14.5px; color:var(--text-weich); }
.honig{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.reg .btn{ width:100%; justify-content:center; }