/* Le Guide Lekka — Hausstil, Édition Moderne
   „Die Typographie ist das Tischtuch des Gedankens.“ — Inspektor N° 3 */

:root {
  --papier: #f6f1e7;
  --papier-tief: #ede4d3;
  --karte: #fffdf8;
  --tinte: #1c1418;
  --tinte-leise: #6a5d58;
  --bordeaux: #7a1f35;
  --bordeaux-tief: #561525;
  --gold: #b08a3e;
  --gold-hell: #e9cf8b;
  --linie: rgba(28, 20, 24, .12);
  --schatten: 0 1px 2px rgba(28,20,24,.04), 0 8px 24px -8px rgba(28,20,24,.12);
  --schatten-hoch: 0 2px 4px rgba(28,20,24,.05), 0 24px 48px -16px rgba(122,31,53,.28);
  --folie: linear-gradient(100deg, #8a6a2a 0%, #e9cf8b 22%, #b08a3e 40%, #f6e3ae 55%, #9c7631 75%, #e2c47a 100%);
  --glanz: radial-gradient(1200px 500px at 50% -10%, rgba(233,207,139,.35), transparent 70%);
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rund: 22px;
  --rund-klein: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #110c0f; --papier-tief: #1a1317; --karte: #1d1519; --tinte: #f3ead9; --tinte-leise: #a9998f;
    --bordeaux: #e07a92; --bordeaux-tief: #b8546c; --gold: #d8b766; --linie: rgba(243,234,217,.12);
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
    --schatten-hoch: 0 2px 4px rgba(0,0,0,.3), 0 24px 48px -16px rgba(224,122,146,.25);
    --glanz: radial-gradient(1200px 500px at 50% -10%, rgba(216,183,102,.18), transparent 70%);
  }
}
:root[data-theme="dark"] {
  --papier: #110c0f; --papier-tief: #1a1317; --karte: #1d1519; --tinte: #f3ead9; --tinte-leise: #a9998f;
  --bordeaux: #e07a92; --bordeaux-tief: #b8546c; --gold: #d8b766; --linie: rgba(243,234,217,.12);
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  --schatten-hoch: 0 2px 4px rgba(0,0,0,.3), 0 24px 48px -16px rgba(224,122,146,.25);
  --glanz: radial-gradient(1200px 500px at 50% -10%, rgba(216,183,102,.18), transparent 70%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--glanz), var(--papier);
  background-repeat: no-repeat;
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.06rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* feines Papierkorn */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--gold-hell); color: #1c1418; }
a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.wrap-breit { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Kopf: schwebende Pille ---------- */
.kopf { position: sticky; top: 0; z-index: 50; padding: 12px 0; }
.kopf .wrap-breit {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--karte) 72%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--linie); border-radius: 999px; padding: 10px 22px; box-shadow: var(--schatten);
  max-width: 1088px;
}
.marke { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; text-decoration: none; color: var(--tinte); }
.marke em { font-style: italic; font-weight: 500; background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 4px 18px; font-size: .9rem; font-weight: 500; flex-wrap: wrap; }
.nav a { color: var(--tinte-leise); text-decoration: none; transition: color .2s; }
.nav a:hover { color: var(--bordeaux); }
.nav { align-items: center; }
.nav a.nav-knopf { color: #fff7e6; background: var(--bordeaux); padding: 7px 16px; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 16px -8px var(--bordeaux); }
.nav a.nav-knopf:hover { color: #fff7e6; background: var(--bordeaux-tief); }
:root[data-theme="dark"] .nav a.nav-knopf { color: #1c1418; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav a.nav-knopf { color: #1c1418; } }
.aufruf { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 36px; }
.knopf-leise { font-weight: 600; color: var(--tinte); text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--linie); background: color-mix(in srgb, var(--karte) 60%, transparent); }
.knopf-leise:hover { color: var(--bordeaux); border-color: var(--gold); }

/* ---------- Titelei ---------- */
.titelei { position: relative; text-align: center; padding: 64px 0 40px; overflow: hidden; }
.ueberzeile {
  display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 22px;
}
.ueberzeile::before, .ueberzeile::after { content: "✦"; font-size: .7rem; }
.titelei h1 {
  font-family: var(--display); font-weight: 400; font-size: clamp(3.6rem, 15vw, 9.5rem); line-height: .86; margin: 0;
  letter-spacing: -.045em; font-variation-settings: "opsz" 144, "SOFT" 100;
}
.titelei h1 em {
  display: inline-block; font-style: italic; font-weight: 500; padding: 0 .06em .08em;
  background: var(--folie); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: folie 7s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(176,138,62,.25));
}
@keyframes folie { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.untertitel { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 3.6vw, 1.9rem); color: var(--tinte-leise); margin: 18px 0 0; font-weight: 400; }
.ornament { color: var(--gold); letter-spacing: .6em; margin: 26px 0 0; font-size: .9rem; }
.zitat { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 2.6vw, 1.4rem); max-width: 30ch; margin: 30px auto 0; line-height: 1.45; }
.zitat cite { display: block; font-family: var(--text); font-style: normal; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-leise); margin-top: 12px; }

/* Siegel */
.siegel { position: absolute; top: 28px; right: max(16px, calc(50% - 540px)); width: 132px; height: 132px; pointer-events: none; }
.siegel svg { width: 100%; height: 100%; animation: drehen 28s linear infinite; }
.siegel text { font-family: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: 3.2px; fill: var(--gold); text-transform: uppercase; }
.siegel .kern { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .siegel { display: none; } }
@media (max-width: 640px) { .kopf .wrap-breit { border-radius: 24px; justify-content: center; } .nav { justify-content: center; } }
@media (max-width: 420px) { .nav a:not(.nav-knopf):not([href*="urteile"]) { display: none; } }

/* Laufband */
.laufband { border-block: 1px solid var(--linie); background: linear-gradient(90deg, #4a1120, #6e1c30 50%, #4a1120); color: #f6e3ae; overflow: hidden; white-space: nowrap; }
.laufband-spur { display: inline-flex; gap: 48px; padding: 14px 0; animation: laufen 48s linear infinite; font-family: var(--display); font-style: italic; font-size: 1.1rem; }
.laufband-spur span::after { content: "✦"; margin-left: 48px; font-style: normal; color: var(--gold-hell); font-size: .8rem; vertical-align: middle; }
.laufband-spur small { font-family: var(--text); font-style: normal; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .75; margin-left: 10px; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .laufband-spur, .siegel svg, .titelei h1 em { animation: none; }
}

/* ---------- Abschnitte ---------- */
section { padding: 80px 0; }
section + section { border-top: 1px solid var(--linie); }
.nr { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0 0 10px; line-height: 1; letter-spacing: -.03em; }
h2 em { font-style: italic; color: var(--bordeaux); }
h2 + .lead { color: var(--tinte-leise); margin: 0 0 36px; max-width: 60ch; font-size: 1.08rem; }
h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; margin: 0; line-height: 1.15; letter-spacing: -.015em; }

/* ---------- Urteilskarten ---------- */
.urteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.urteil {
  position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; box-shadow: var(--schatten);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
a.urteil:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--schatten-hoch); border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: inherit; }
a.urteil::after { content: "→"; position: absolute; top: 22px; right: 24px; color: var(--gold); font-size: 1.2rem; transition: transform .3s; }
a.urteil:hover::after { transform: translateX(4px); }
.urteil .kat, .identitaet .kat {
  align-self: flex-start; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux);
  background: color-mix(in srgb, var(--bordeaux) 9%, transparent); padding: 5px 11px; border-radius: 999px;
}
.urteil .gegenstand { font-size: .86rem; color: var(--tinte-leise); margin-top: -4px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--gold) 60%, transparent); line-height: 1.45; }
.urteil p { margin: 0; color: var(--tinte-leise); font-size: .98rem; }
.urteil.in-pruefung { background: transparent; box-shadow: none; border-style: dashed; }
.urteil.in-pruefung h3 { color: var(--tinte-leise); }
.urteil .stempel { font-size: .85rem; color: var(--tinte-leise); font-style: italic; }

/* ---------- Löffel ---------- */
.loeffel { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.loeffel-wert { display: inline-flex; align-items: baseline; gap: 8px; color: var(--bordeaux); }
.loeffel-wert svg { width: 24px; height: 24px; fill: var(--gold); flex: none; align-self: center; filter: drop-shadow(0 2px 4px rgba(176,138,62,.35)); }
.loeffel-wert .zahl { font-family: var(--display); font-size: 1.9rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.loeffel-wert small { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-leise); }
.loeffel-skala { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--tinte) 10%, transparent), color-mix(in srgb, var(--gold) 45%, transparent)); }
.loeffel-skala .marker {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--folie); background-size: 200% 100%;
  border: 2px solid var(--karte); transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(176,138,62,.5);
}
.loeffel-enden { display: flex; justify-content: space-between; font-size: .78rem; color: var(--tinte-leise); font-variant-numeric: lining-nums; }
.loeffel.gross { min-width: 260px; }
.loeffel.gross .loeffel-wert { justify-content: center; }
.loeffel.gross .loeffel-wert svg { width: 38px; height: 38px; }
.loeffel.gross .loeffel-wert .zahl { font-size: clamp(3rem, 9vw, 4.2rem); }

.loeffel.jenseits .loeffel-skala .marker { left: -10px !important; background: var(--bordeaux); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bordeaux) 25%, transparent); animation: zittern 1.8s ease-in-out infinite; }
.loeffel-jenseits { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); background: color-mix(in srgb, var(--bordeaux) 10%, transparent); padding: 4px 10px; border-radius: 999px; }
.loeffel.gross .loeffel-jenseits { align-self: center; }
@keyframes zittern { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-58%, -50%); } 75% { transform: translate(-42%, -50%); } }
@media (prefers-reduced-motion: reduce) { .loeffel.jenseits .marker { animation: none; } }
.skala-hinweis { font-size: .95rem; color: var(--tinte-leise); margin-top: 32px; padding: 16px 20px; border-radius: var(--rund-klein); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ---------- Prosa-Regler ---------- */
.regler { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 30px 26px; box-shadow: var(--schatten); }
.regler label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-leise); display: flex; justify-content: space-between; }
.regler output { display: block; font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.35; min-height: 6.5em; font-style: italic; letter-spacing: -.01em; }
.regler .stufe { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--karte); background: var(--bordeaux); padding: 5px 12px; border-radius: 999px; margin-top: 14px; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 14px 0 22px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--tinte) 12%, transparent), color-mix(in srgb, var(--gold) 55%, transparent)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--tinte) 12%, transparent), color-mix(in srgb, var(--gold) 55%, transparent)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--folie); background-size: 200% 100%; border: 3px solid var(--karte); box-shadow: 0 3px 12px rgba(176,138,62,.55); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--folie); border: 3px solid var(--karte); box-shadow: 0 3px 12px rgba(176,138,62,.55); }
input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }

/* ---------- Glossar als Speisekarte ---------- */
dl.glossar {
  margin: 0; padding: 34px 30px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten);
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 18px; align-items: baseline;
  outline: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline-offset: -10px;
}
dl.glossar dt { font-family: var(--display); font-style: italic; font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; }
dl.glossar dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--gold) 70%, transparent); transform: translateY(-5px); }
dl.glossar dd { margin: 0; color: var(--tinte-leise); }
@media (min-width: 620px) { dl.glossar { grid-template-columns: minmax(220px, max-content) 1fr; padding: 40px 44px; } }
@media (max-width: 619px) {
  dl.glossar { grid-template-columns: 1fr; row-gap: 4px; }
  dl.glossar dt::after { display: none; }
  dl.glossar dd { margin-bottom: 14px; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; font-family: var(--text); font-weight: 600; font-size: 1rem;
  padding: 15px 30px; border: 0; border-radius: 999px; color: #fff7e6; background: var(--bordeaux); text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -10px var(--bordeaux); transition: transform .2s, box-shadow .2s;
}
.knopf::before { content: "✦"; color: var(--gold-hell); }
.knopf::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,240,200,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s;
}
.knopf:hover { transform: translateY(-2px); color: #fff7e6; box-shadow: 0 16px 30px -10px var(--bordeaux); }
.knopf:hover::after { transform: translateX(120%); }
:root[data-theme="dark"] .knopf { color: #1c1418; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf { color: #1c1418; } }

.garderobe, .ident-knopf {
  background: transparent; border: 1px solid var(--linie); color: var(--tinte-leise); font-family: var(--text); font-weight: 500;
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: .85rem; transition: border-color .2s, color .2s, background .2s;
}
.garderobe:hover, .ident-knopf:hover { border-color: var(--gold); color: var(--tinte); background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ---------- Testbericht ---------- */
.bericht-kopf { padding: 56px 0 44px; text-align: center; }
.bericht-kopf h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 9vw, 5.2rem); line-height: .95; letter-spacing: -.04em; margin: 4px 0 18px; }
.bericht-kopf .meta { color: var(--tinte-leise); font-style: italic; max-width: 56ch; margin: 0 auto; }
.wertung {
  margin: 34px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 36px;
  border-radius: var(--rund); background: var(--karte); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: var(--schatten-hoch);
}
.bericht { padding: 24px 16px 20px; }
.bericht h2 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-top: 52px; }
.bericht h2 .gang { display: block; font-family: var(--text); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.bericht > p:first-of-type::first-letter {
  font-family: var(--display); font-style: italic; float: left; font-size: 4.4rem; line-height: .8; padding: 8px 10px 0 0; color: var(--bordeaux);
}
.kriterien { width: 100%; border-collapse: separate; border-spacing: 0; margin: 22px 0; font-size: .98rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-klein); overflow: hidden; }
.kriterien th, .kriterien td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.kriterien tr:last-child td { border-bottom: 0; }
.kriterien th { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-leise); background: var(--papier-tief); }
.kriterien td:last-child { text-align: right; font-family: var(--display); font-size: 1.15rem; color: var(--bordeaux); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 560px) { .kriterien th:nth-child(2), .kriterien td:nth-child(2) { display: none; } }
.fazit {
  position: relative; margin: 44px 0; padding: 30px 32px 30px 70px; border-radius: var(--rund);
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-tief)); color: #fbeedd;
  font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.55rem); font-style: italic; line-height: 1.4; box-shadow: var(--schatten-hoch);
}
.fazit::before { content: "„"; position: absolute; left: 22px; top: 6px; font-size: 5rem; line-height: 1; color: var(--gold-hell); font-style: normal; }
:root[data-theme="dark"] .fazit { color: #1c1418; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fazit { color: #1c1418; } }
.fussnote { font-size: .88rem; color: var(--tinte-leise); }

/* ---------- Fuß ---------- */
.fuss { padding: 56px 0 64px; text-align: center; color: var(--tinte-leise); font-size: .92rem; border-top: 1px solid var(--linie); }
.fuss .nav { justify-content: center; margin-bottom: 16px; }

.manifest ol { padding-left: 0; list-style: none; counter-reset: art; display: grid; gap: 14px; }
.manifest li { counter-increment: art; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: 18px 22px 18px 74px; position: relative; box-shadow: var(--schatten); }
.manifest li::before {
  content: counter(art, upper-roman); position: absolute; left: 22px; top: 14px; font-family: var(--display); font-style: italic; font-size: 1.8rem; line-height: 1;
  background: var(--folie); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Volksurteile ---------- */
#volk-liste { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.urteil.volk .volk-text { color: var(--tinte); font-size: 1rem; }
.urteil.volk .volk-autor { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--linie); font-size: .88rem; }
.urteil.volk .volk-autor strong { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--tinte); font-weight: 500; }
.volk-leer { color: var(--tinte-leise); font-style: italic; grid-column: 1 / -1; margin: 0; }

/* ---------- Einreichung ---------- */
.einreichung { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund); padding: 30px 26px; display: flex; flex-direction: column; gap: 24px; box-shadow: var(--schatten); }
.identitaet {
  text-align: center; padding: 28px 18px; border-radius: var(--rund-klein); display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--glanz), color-mix(in srgb, var(--gold) 9%, var(--karte)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.identitaet .kat { align-self: center; }
.identitaet strong {
  font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 5.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; margin-top: 6px;
  background: var(--folie); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: folie 7s ease-in-out infinite;
}
.identitaet .besteck { font-style: italic; color: var(--tinte-leise); }
.identitaet .ident-knopf { margin-top: 10px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld > span { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-leise); }
.feld input[type=text], .feld select, .feld textarea {
  font: inherit; color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); padding: 13px 15px; border-radius: var(--rund-klein); width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { resize: vertical; min-height: 150px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.feld input[type=range] { margin: 4px 0; }
.wert-anzeige em { font-family: var(--display); font-size: 1.2rem; color: var(--tinte); }
fieldset.chips { border: 0; margin: 0; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 8px; }
fieldset.chips legend { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-leise); padding: 0; margin-bottom: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier); font-size: .92rem; font-weight: 500; transition: all .15s; }
.chips label:hover span { border-color: var(--gold); }
.chips input:checked + span { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff7e6; box-shadow: 0 6px 14px -8px var(--bordeaux); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
:root[data-theme="dark"] .chips input:checked + span { color: #1c1418; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips input:checked + span { color: #1c1418; } }
@media (max-width: 560px) { .einreichung .knopf { align-self: stretch; justify-content: center; } }
.wert-anzeige { font-size: .9rem; color: var(--tinte-leise); }
.wert-anzeige strong { font-family: var(--display); font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--bordeaux); font-variant-numeric: lining-nums tabular-nums; margin-right: 4px; }
.zaehler { align-self: flex-end; color: var(--tinte-leise); font-size: .82rem; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.einreichung .knopf { align-self: center; }
.einreichung .knopf:disabled { opacity: .55; cursor: wait; transform: none; }
.formular-meldung { margin: 0; text-align: center; min-height: 1.6em; font-style: italic; }
.formular-meldung.fehler { color: var(--bordeaux); }
.formular-meldung.erfolg { color: var(--tinte); }

/* Auftritt beim Scrollen */
@media (prefers-reduced-motion: no-preference) {
  .auftritt { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .auftritt.da { opacity: 1; transform: none; }
}

/* QR-Gag im Bericht */
.qr-gag { margin: 30px auto; max-width: 260px; text-align: center; }
.qr-gag svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 24px rgba(28,20,24,.18)); transform: rotate(-2deg); }
.qr-gag .qr-grund { fill: #fffdf8; }
.qr-gag .qr-punkte { fill: #1c1418; }
.qr-gag figcaption { margin-top: 14px; font-family: var(--display); font-style: italic; color: var(--tinte-leise); }