/* Kesru — gemeinsames Stylesheet für Produktseite, Einrichtung, Konto und Verwaltung.
   Hell und redaktionell: warmes Papier, Tinte, ein Signalorange (Warnweste, Werkzeug, klingelndes Telefon).
   Schriften selbst gehostet (Geist, Instrument Serif; SIL OFL). Keine fremden Dienste. */
@font-face { font-family: "Instrument Serif"; src: url("/assets/schrift/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/schrift/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/schrift/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* Papier, Tinte, Linien; Signalorange nur für Stempel und den einen Hauptknopf (siehe web/DESIGN.md) */
  --papier: #F4F1EA; --papier-2: #ECE7DC; --flaeche: #FFFFFF; --flaeche-2: #FAF8F3; --durchschlag: #FBF3D5;
  --tinte: #16150F; --text: #34322C; --leise: #5E5A50; --linie: #DAD3C4; --linie-2: #C4BBA9;
  --akzent: #C8460F; --akzent-2: #AE3B0B; --akzent-text: #A83A0C;  /* weiß auf akzent 4,8:1 */ --akzent-hauch: #FCE6DA;
  --gruen: #1F7A45; --gruen-hauch: #E1F0E6; --gelb-hauch: #FFF3D6; --gelb: #7A5000; --rot: #B42318; --rot-hauch: #FDECEC;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rund: 10px; --rund-gross: 16px;
  --schatten: 0 1px 0 rgba(22,21,15,.04);
  --schatten-hoch: 0 1px 2px rgba(22,21,15,.06), 0 18px 40px -22px rgba(22,21,15,.35);
  --rand: clamp(20px, 5vw, 72px); --weich: cubic-bezier(.2,.7,.1,1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* sonst gewinnt z. B. .knopf { display: inline-flex } */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--linie-2); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
::selection { background: var(--tinte); color: var(--papier); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; max-width: 100%; }
.breit { width: min(1240px, 100% - 2 * var(--rand)); margin-inline: auto; }
.schmal { width: min(780px, 100% - 2 * var(--rand)); margin-inline: auto; }
.zahlen, .tab { font-variant-numeric: tabular-nums; }

/* Kopfleiste */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.gescrollt { border-color: var(--linie); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font: 620 19px/1 var(--sans); letter-spacing: -.03em; color: var(--tinte); text-decoration: none; }
.marke .zeichen { width: 28px; height: 28px; border-radius: 8px; background: var(--tinte); display: grid; grid-auto-flow: column; place-content: center; align-items: center; gap: 2px; }
.marke .zeichen i { width: 3px; border-radius: 3px; background: #fff; display: block; }
.marke .zeichen i:nth-child(2) { background: var(--akzent); }
.kopf nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; }
.kopf nav a:not(.knopf) { color: var(--text); text-decoration: none; padding: 10px 0; }
.kopf nav a:not(.knopf):hover { color: var(--tinte); }
@media (max-width: 860px) { .kopf nav .nur-breit { display: none; } }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 560 15.5px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--weich), background-color .2s, border-color .2s, color .2s, box-shadow .25s; }
.knopf:active { transform: scale(.975); }
.knopf .pfeil { transition: transform .3s var(--weich); }
.knopf:hover .pfeil { transform: translateX(3px); }
.knopf.haupt { background: var(--tinte); color: #fff; }
.knopf.haupt:hover { background: #2A2A2A; }
.knopf.akzent { background: var(--akzent); color: #fff; }
.knopf.akzent:hover { background: var(--akzent-2); }
.knopf.hell { background: transparent; color: var(--tinte); border-color: var(--linie-2); }
.knopf.hell:hover { border-color: var(--tinte); background: var(--flaeche); }
.knopf.klein { min-height: 38px; padding: 0 16px; font-size: 14px; }
.knopf[disabled] { opacity: .5; cursor: default; }
@media (max-width: 480px) { .knopf { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; } }

/* Typografie */
.augenbraue { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 560 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
h1, h2, h3 { margin: 0; color: var(--tinte); font-weight: 400; }
.anzeige { font: 400 clamp(54px, 8.4vw, 128px)/.9 var(--serif); letter-spacing: -.035em; text-wrap: balance; }
.anzeige em, .titel em { font-style: italic; color: var(--akzent-text); letter-spacing: -.02em; }
.titel { font: 400 clamp(38px, 5.2vw, 72px)/.98 var(--serif); letter-spacing: -.028em; text-wrap: balance; }
.untertitel { font: 400 clamp(17px, 1.45vw, 20px)/1.55 var(--sans); color: var(--text); text-wrap: pretty; letter-spacing: -.005em; }
.leise { color: var(--leise); }

/* Karten, Chips, Formulare */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-gross); box-shadow: var(--schatten); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie);
  font: 500 13.5px/1.2 var(--sans); color: var(--text); }
.chip .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hauch); animation: puls 2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(255,90,31,.12); } }
.chip.ok { background: var(--gruen-hauch); border-color: transparent; color: #11643A; }
.chip.ok .punkt { background: var(--gruen); box-shadow: 0 0 0 4px rgba(31,143,78,.14); animation: none; }
.chip.warn { background: var(--gelb-hauch); border-color: transparent; color: var(--gelb); }
.chip.aus { background: var(--papier-2); border-color: transparent; color: var(--leise); }
label.feld { display: grid; gap: 7px; font: 560 14px/1.3 var(--sans); color: var(--tinte); }
label.feld small { font-weight: 400; color: var(--leise); font-size: 13.5px; }
input, textarea, select { width: 100%; font: 400 16px/1.5 var(--sans); color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie-2);
  border-radius: 12px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s; }
input::placeholder, textarea::placeholder { color: #A39D92; }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(20,20,20,.07); }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .raster-2 { grid-template-columns: 1fr; } }
.hinweis { padding: 14px 16px; border-radius: 12px; background: var(--akzent-hauch); color: #7A2A08; font-size: 14.5px; }
.hinweis.warn { background: var(--gelb-hauch); color: var(--gelb); }
.hinweis.fehler { background: var(--rot-hauch); color: var(--rot); }
.meldung { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--tinte); color: #fff; padding: 12px 18px;
  border-radius: 12px; font-size: 14.5px; transition: opacity .3s, transform .3s var(--weich); z-index: 50; pointer-events: none; }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }
.wissen { white-space: pre-wrap; font: 400 14.5px/1.65 var(--sans); color: var(--text); background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: 14px; padding: 16px 18px; max-height: 360px; overflow: auto; }

/* Auftritt: beim Laden (.auftritt) und beim Hineinscrollen (.zeigen, gesteuert von app.js) */
.auftritt { opacity: 0; transform: translateY(16px); animation: auftritt 1s var(--weich) forwards; animation-delay: calc(var(--n, 0) * 90ms + 60ms); }
@keyframes auftritt { to { opacity: 1; transform: none; } }
.zeigen { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--weich), transform .9s var(--weich); transition-delay: calc(var(--n, 0) * 80ms); }
.zeigen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .auftritt, .zeigen { animation: none; opacity: 1; transform: none; transition: none; }
  .chip .punkt { animation: none; } html { scroll-behavior: auto; }
}

/* Fuß */
.fuss { border-top: 1px solid var(--linie); padding: 40px 0 48px; margin-top: 40px; font-size: 14px; color: var(--leise); }
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 30px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a { color: var(--leise); text-decoration: none; display: inline-block; padding: 6px 0; }
.fuss a:hover { color: var(--tinte); }