/* Gemeinsame Gestaltung der Seiten aus kaufen-seite.md und startseite.md. Quelle: tools/prototypes/2026-09-15-kaufen/index.html */
:root{
  --gruen:#416145; --gruen-tief:#303b31; --gruen-hell:#e4ece3; --grund:#f3f5f1; --flaeche:#ffffff; --auf-gruen:#ffffff;
  --linie:#d6ddd4; --text:#1f2620; --leise:#5d6a5f; --hinweis:#f7efdc; --hinweis-text:#6b4a00;
  --fehler:#a3342b; --fehler-grund:#fbecea; --ok-grund:#e7f0e6; --paypal:#ffc439; --paypal-text:#111;
  --chrome:#2b2f3a; --chrome-text:#e9ecf3; --chrome-linie:#6b7385; --logo-schrift:#111611;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --gruen:#7fae84; --gruen-tief:#cfe0cf; --gruen-hell:#223024; --grund:#141814; --flaeche:#1c211c; --auf-gruen:#101510; --linie:#344034; --text:#e6ece5; --leise:#9fae9f;
  --hinweis:#3a3120; --hinweis-text:#f0d596; --fehler:#f0877c; --fehler-grund:#3a1f1c; --ok-grund:#1f2e20; --logo-schrift:#e6ece5; --chrome:#0b0d12; --chrome-text:#d6dae4;
}}
:root[data-theme="dark"]{
  --gruen:#7fae84; --gruen-tief:#cfe0cf; --gruen-hell:#223024; --grund:#141814; --flaeche:#1c211c; --auf-gruen:#101510; --linie:#344034; --text:#e6ece5; --leise:#9fae9f;
  --hinweis:#3a3120; --hinweis-text:#f0d596; --fehler:#f0877c; --fehler-grund:#3a1f1c; --ok-grund:#1f2e20; --logo-schrift:#e6ece5; --chrome:#0b0d12; --chrome-text:#d6dae4;
}
*{box-sizing:border-box}
body{background:var(--grund);color:var(--text);font:16px/1.55 var(--sans);margin:0;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--gruen)}
:focus-visible{outline:3px solid var(--gruen);outline-offset:2px}

.seite{max-width:640px;margin:0 auto;padding-inline:16px;padding-block:28px 56px;display:grid;gap:26px;width:100%;flex:1 0 auto;align-content:start}
header.kopf{margin-bottom:14px;min-width:0}
.kopf>a,.kopf>div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-decoration:none;width:max-content;max-width:100%}
.kopf svg{width:64px;height:auto;display:block}
.kopf .schwarz{fill:var(--logo-schrift);stroke:var(--logo-schrift)}
.kopf .ring{fill:none;stroke:var(--logo-schrift)}
.kopf .marke{margin:0;font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.kopf .titel{margin:0;font-size:22px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--gruen-tief)}
footer.fuss .widerruf-knopf{font-weight:700;color:var(--gruen);border:1.5px solid var(--gruen);border-radius:5px;padding:6px 12px;text-decoration:none}
h1{font-size:clamp(26px,5vw,34px);line-height:1.15;margin:0;font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:var(--gruen-tief)}
.unter{margin:6px 0 0;color:var(--leise);max-width:60ch}
.ansicht{display:grid;gap:22px}

fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){fieldset{grid-template-columns:1fr}}
legend{grid-column:1/-1;float:left;width:100%;font-weight:700;font-size:18px;margin-bottom:10px;color:var(--gruen-tief)}
.produkt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;padding:14px;cursor:pointer}
.produkt b{font-size:16px;line-height:1.25;hyphens:auto}
.produkt:has(input:checked){border-color:var(--gruen);box-shadow:inset 0 0 0 1px var(--gruen)}
.produkt input,.check input{width:20px;height:20px;accent-color:var(--gruen);margin:0}
.produkt small{display:block;color:var(--leise);font-size:13.5px}
.preis{font:500 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

.feld{display:grid;gap:6px}
.feld label{font-weight:600}
.feld input,.feld textarea{font:inherit;padding:10px 12px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);color:var(--text)}
.feld small{color:var(--leise)}
.feld .fehlertext{color:var(--fehler);font-size:14px}
.feld input[aria-invalid="true"]{border-color:var(--fehler)}

.check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--linie)}
.check input{margin-top:3px}
.quelle{display:block;font:500 11px var(--mono);color:var(--leise);margin-top:4px}

.rechnung{background:var(--hinweis);color:var(--hinweis-text);padding:14px 16px;border-radius:6px}
.rechnung p{margin:0}

.kasse{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:18px;display:grid;gap:14px}
.kasse h2{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--leise)}
.oben{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
@media (max-width:520px){.oben{grid-template-columns:1fr}}
.vorteile{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.preis-karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;padding:14px 20px;text-align:center;display:grid;gap:4px;justify-items:center}
.preis-karte .summe{margin:0;font:800 26px var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gruen-tief)}
.preis-karte .klein{line-height:1.4}
.vorteile li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;font-size:17px}
.vorteile svg{width:22px;height:22px;color:var(--gruen)}
dl.pflicht{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:6px 16px}
dl.pflicht dt{color:var(--leise)}
dl.pflicht dd{margin:0;font-weight:600}
.betrag{font:500 18px var(--mono);font-variant-numeric:tabular-nums}
.klein{font-size:13.5px;color:var(--leise);margin:0}

.pp{font:700 16px var(--sans);background:var(--paypal);color:var(--paypal-text);border:0;border-radius:6px;padding:13px;width:100%;cursor:pointer}
.pp:disabled{opacity:.45;cursor:not-allowed}
.primaer{display:block;text-align:center;text-decoration:none;font:700 17px var(--sans);background:var(--gruen);color:var(--auf-gruen);border:0;border-radius:6px;padding:15px;width:100%;cursor:pointer}
.fehlt{color:var(--leise);font-size:14px;margin:0}
.fehlt.gemahnt{color:var(--fehler);font-weight:600}

/* Gesperrter Bezahlweg. Der Schleier deckt den Container, nicht das fremde
   iframe -- dessen Masse bestimmt PayPal, unsere nicht. Abgedunkelt statt
   weichgezeichnet: blur() ueber einem Cross-Origin-iframe flackert beim
   Scrollen und macht das PayPal-Logo unleserlich. */
/* isolation:isolate macht das Knopffeld zu einem eigenen Stapelraum. Ohne das
   konkurriert der Schleier mit der ganzen Seite, und ein hoher z-index waere
   ein Uebergriff. Mit ihm gilt die 999 NUR hier drin.
   Die 999 ist kein Aberglaube, sondern gemessen: Das PayPal-SDK gibt seinem
   iframe z-index:100, dem prerender-frame 200 und dem Menue 300. Mit z-index:2
   lag der Schleier UNTER dem Bezahlweg -- die Sperre war gebaut und
   wirkungslos, und der statische Riegel blieb dabei gruen (2026-09-25). */
.knopffeld{position:relative;isolation:isolate}
/* Weiss, NICHT var(--flaeche): im Dunkelmodus ist die Flaeche #1c211c, und ein
   dunkler Schleier ueber dem goldenen PayPal-Knopf macht den Bereich dunkler
   statt heller -- das Kriterium verlangt aber "messbar heller". Das fremde
   Widget rendert in beiden Modi gleich hell, also darf der Schleier nicht
   mitschalten. */
.knopffeld>.schleier{position:absolute;inset:0;z-index:999;background:#fff;opacity:.55;border-radius:6px;cursor:not-allowed}
/* Frei: der Schleier verschwindet GANZ. display:none statt pointer-events,
   damit kein Kastenmass uebrigbleibt -- ein Overlay, das im freien Zustand
   liegen bleibt, macht den Kauf unmoeglich. */
.kauf-frei .knopffeld>.schleier{display:none}
/* Erst nach einem Klick auf den gesperrten Bezahlweg, nie im Ruhezustand. */
.check.gemahnt{border:2px solid var(--fehler);background:var(--fehler-grund);border-radius:6px;padding:12px}

.meldung{border-radius:8px;padding:18px;display:grid;gap:10px}
.meldung h2{margin:0;font-size:20px}
.meldung p{margin:0}
.ok{background:var(--ok-grund)}
.bad{background:var(--fehler-grund)}
.bad h2{color:var(--fehler)}
.mono{font:500 15px var(--mono)}
.spinner{width:22px;height:22px;border:3px solid var(--linie);border-top-color:var(--gruen);border-radius:50%;animation:dreh .9s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

.text{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:clamp(18px,4vw,30px);max-width:68ch}
.text h2{font-size:24px;margin:0 0 4px;color:var(--gruen-tief)}
.text h3{font-size:16px;margin:22px 0 6px}
.text p,.text li{margin:0 0 10px}
.text ol,.text ul{padding-left:22px;margin:0 0 10px}
.stand{font:500 12px var(--mono);color:var(--leise)}
.entwurf-band{background:var(--hinweis);color:var(--hinweis-text);padding:10px 14px;border-radius:6px;margin:12px 0 4px;font-size:14px}

footer.fuss{border-top:1px solid var(--linie);padding:18px 16px 22px;display:grid;gap:10px;justify-items:center;text-align:center;font-size:14px}
footer.fuss nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px}
footer.fuss a{color:var(--leise)}
footer.fuss .copy{margin:0;color:var(--leise)}
footer.fuss .copy a{color:inherit}


/* Ergaenzungen gegenueber dem Prototyp (Plan Task 7, Step 4). */
.erklaerung-text{display:inline}
#paypal-knopf{min-height:48px}
/* Abweichende Rechnungsadresse (Documentation/goals/rechnung-abweichend.md) */
.rechnungswunsch{display:grid;gap:14px}
.haken-abweichend{align-items:start}
.haken-abweichend input{margin-top:3px}
/* Nur vorgelesen: abgeschnitten statt display:none, sonst schwiege auch der Screenreader */
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fehlertext{color:var(--fehler);font-size:14px;font-weight:600;margin:0}
.anschrift{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:16px}
.anschrift .ganz,.anschrift>p{grid-column:1/-1}
.anschrift>p{margin:0;color:var(--leise);font-size:14px}
@media (max-width:520px){.anschrift{grid-template-columns:1fr}}
.feld label .frei{font-weight:400;color:var(--leise)}
.feld input[aria-invalid="true"]{border-width:2px}
/* Startseite (Documentation/goals/startseite.md, Abweichungen rechnung-und-rahmen.md) */
.start{max-width:880px;padding-block:24px 40px;gap:clamp(28px,5vw,44px)}
.start .kopf{margin-bottom:0}
.start .kopf svg{width:72px}
.start .kopf h1{font-size:30px;line-height:1.05;white-space:nowrap}
@media (max-width:480px){.start .kopf h1{font-size:26px}.start .kopf .marke{font-size:11px}}
.abschnitt{display:grid;gap:14px}
.abschnitt h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leise)}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kachel{display:grid;grid-template-rows:auto 1fr auto;gap:18px;min-height:150px;padding:20px;background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.kachel .kennung{font:500 12px var(--mono);color:var(--gruen);letter-spacing:.04em}
.kachel b{font-size:22px;line-height:1.15;letter-spacing:-.01em;align-self:end;hyphens:auto}
.kachel .los{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--gruen);border-top:1px solid var(--linie);padding-top:12px}
.kachel .pfeil{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gruen);color:var(--auf-gruen);transition:transform .15s}
.kachel:hover{border-color:var(--gruen);transform:translateY(-2px);box-shadow:0 6px 18px -10px rgba(48,59,49,.45)}
.kachel:hover .pfeil{transform:translateX(3px)}
.kachel:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.kachel,.kachel .pfeil{transition:none}.kachel:hover{transform:none}}
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.hinweis{display:flex;flex-direction:column;gap:14px;align-items:flex-start;justify-content:space-between;padding:16px 20px;border-radius:10px}
.hinweis p{margin:0}
.hinweis small{display:block;color:var(--leise);font-size:14px}
.hinweis.test{background:var(--gruen-hell)}
.hinweis.kauf{border:1px dashed var(--linie)}
.knopf{display:inline-block;font-weight:700;text-decoration:none;border-radius:6px;padding:9px 14px;white-space:nowrap}
.knopf.voll{background:var(--gruen);color:var(--auf-gruen)}
.knopf.rand{border:1.5px solid var(--gruen);color:var(--gruen)}
[hidden]{display:none!important}