/* Between Tools. Aussehen aus der Werkstatt-Vorlage  Aquarell auf Creme, Newsreader für Überschriften,
   Inter für Text, feine Symbole. Kein Inline-Stil nötig (die Kopfzeile erlaubt keinen).
   Das Gold ist #cf9d45 mit dunkler Schrift #2b2116, Kontrast gemessen über 6 zu 1. */

/* ---------- Schriften, lokal ---------- */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-kursiv.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Grundwerte ---------- */
:root {
  --creme: #f6efdf;
  --blatt: rgba(255, 252, 245, 0.9);
  --regel: rgba(255, 252, 245, 0.74);
  --tinte: #2f2b26;
  --still: #5f564b;
  --wald: #1f3a2d;
  --gruen: #3f5c47;
  --gold: #cf9d45;
  --gold-hell: #dfb25f;
  --gold-schrift: #2b2116;
  --goldtief: #7e5d1c;
  --link: #6b4a0e;
  --linie: rgba(184, 146, 74, 0.34);
  --rot: #8a4b3a;
  --feld-rand: #8f7440;
  --rand: clamp(1rem, 4vw, 3rem);
  --ein: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--creme); color: var(--tinte); font-family: var(--sans); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--wald); letter-spacing: -0.012em; line-height: 1.15; margin: 0; }
p, ul, ol, dl, figure { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--wald); }
b, strong { font-weight: 500; }
img, svg { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
.nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--gold); color: var(--gold-schrift); padding: 0.6rem 1rem; border-radius: 0 0 12px 12px; transition: top 0.2s; }
.sprung:focus { top: 0; }
.ic { flex: none; }
.klein { font-size: 0.9rem; color: var(--still); }

/* Ohne JavaScript nur das Nötige, mit JavaScript das Zusätzliche */
.nur-js { display: none; }
.js .nur-js { display: block; }
.js .ohne-js { display: none; }

/* ---------- Hintergrund und Papierkorn ---------- */
.hintergrund { position: fixed; inset: -24px; z-index: 0; pointer-events: none; background: var(--creme) url("/bilder/hintergrund.webp") center 70% / cover no-repeat; animation: zoom 30s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.korn { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.2  0 0 0 0 0.12  0 0 0 1.2 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 260px 260px; }
.huelle { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-width: 0; }
main { flex: 1; min-width: 0; outline: none; }

/* ---------- Kopf und Fuß ---------- */
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 1rem; padding: max(0.8rem, env(safe-area-inset-top)) var(--rand) 0.4rem; }
.marke { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--wald); border-radius: 12px; }
.marke img { width: 36px; height: 36px; border-radius: 50%; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-text b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.03em; }
.marke-text small { font-size: 0.78rem; color: var(--still); letter-spacing: 0.02em; }
.hauptnav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.35rem; }
.hauptnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.95rem; color: var(--wald); text-decoration: none; background: rgba(255, 252, 245, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.25s, border-color 0.25s; }
.hauptnav a:hover { background: rgba(255, 249, 235, 0.95); border-color: var(--gold); }
.hauptnav a[aria-current="page"] { border-color: var(--gold); background: rgba(255, 249, 235, 0.95); }
@media (max-width: 520px) { .hauptnav a { padding: 0.3rem 0.65rem; font-size: 0.9rem; } }

.fuss { padding: 2.2rem var(--rand) max(1.6rem, env(safe-area-inset-bottom)); text-align: center; }
.fuss nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1rem; }
.fuss a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-size: 0.92rem; color: var(--wald); }
.fuss .hilfe-link { font-weight: 500; }
.fuss-satz { margin-top: 0.4rem; font-size: 0.85rem; color: var(--still); }

/* ---------- Einblenden ---------- */
@keyframes einblenden { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wort-rein { from { opacity: 0; filter: blur(12px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes wort-klein { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes linie { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes kreis-auf { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } }
@keyframes ring { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes schweben { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes strich { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }

.r { animation: einblenden 1s var(--ein) calc(var(--b, 0s) + var(--i, 0) * var(--schritt, 0.12s)) both; }
.wort { display: inline-block; animation: wort-rein 1.1s var(--ein) calc(var(--b, 0s) + var(--i, 0) * var(--schritt, 0.09s)) both; }
.wort.klein { animation-name: wort-klein; animation-duration: 0.9s; }
.worte { --b: 0.3s; --schritt: 0.09s; }
.worte.klein { --b: 1.45s; --schritt: 0.07s; }
.worte > :nth-child(1) { --i: 0; } .worte > :nth-child(2) { --i: 1; } .worte > :nth-child(3) { --i: 2; } .worte > :nth-child(4) { --i: 3; }
.worte > :nth-child(5) { --i: 4; } .worte > :nth-child(6) { --i: 5; } .worte > :nth-child(7) { --i: 6; } .worte > :nth-child(8) { --i: 7; }
.r-reihe > :nth-child(1) { --i: 0; } .r-reihe > :nth-child(2) { --i: 1; } .r-reihe > :nth-child(3) { --i: 2; } .r-reihe > :nth-child(4) { --i: 3; }
.r-reihe > :nth-child(5) { --i: 4; } .r-reihe > :nth-child(6) { --i: 5; } .r-reihe > :nth-child(7) { --i: 6; } .r-reihe > :nth-child(8) { --i: 7; }
.r-reihe > :nth-child(9) { --i: 8; } .r-reihe > :nth-child(10) { --i: 9; } .r-reihe > :nth-child(11) { --i: 10; } .r-reihe > :nth-child(12) { --i: 11; }
.r-reihe > :nth-child(13) { --i: 12; } .r-reihe > :nth-child(14) { --i: 13; }
.goldlinie { display: block; width: min(220px, 50vw); height: 1px; margin: 2.2rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform-origin: 50% 50%; animation: linie 1s var(--ein) 1.9s both; }
/* Verzögerung der Einblendung in Schritten von 0,1 Sekunden (b7 = 0,7 s). Kein Inline-Stil nötig. */
.b0 { --b: 0s; } .b1 { --b: 0.1s; } .b2 { --b: 0.2s; } .b3 { --b: 0.3s; } .b4 { --b: 0.4s; } .b5 { --b: 0.5s; }
.b6 { --b: 0.6s; } .b7 { --b: 0.7s; } .b8 { --b: 0.8s; } .b9 { --b: 0.9s; } .b10 { --b: 1s; } .b11 { --b: 1.1s; }
.b12 { --b: 1.2s; } .b13 { --b: 1.3s; } .b14 { --b: 1.4s; } .b15 { --b: 1.5s; } .b16 { --b: 1.6s; } .b17 { --b: 1.7s; }
.b18 { --b: 1.8s; } .b19 { --b: 1.9s; } .b20 { --b: 2s; } .b21 { --b: 2.1s; } .b22 { --b: 2.2s; } .b23 { --b: 2.3s; }
.b24 { --b: 2.4s; } .b25 { --b: 2.5s; } .b26 { --b: 2.6s; } .b27 { --b: 2.7s; } .b28 { --b: 2.8s; } .b29 { --b: 2.9s; }
.b30 { --b: 3s; }

/* ---------- Gemeinsames Layout ---------- */
.inhalt { width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.2rem var(--rand) 2rem; min-width: 0; }
.inhalt.breit { max-width: 84rem; }
.inhalt.mittel { max-width: 56rem; }
.inhalt.schmal { max-width: 42rem; }
.inhalt.zentriert { text-align: center; display: flex; flex-direction: column; align-items: center; }
.links { text-align: left; }
.titel { font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.08; max-width: 22ch; }
.titel.links { max-width: none; }
.unterzeile { margin-top: 0.9rem; font-family: var(--serif); font-style: italic; color: var(--still); font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 46ch; line-height: 1.45; }
.inhalt:not(.zentriert) > .unterzeile.links, .unterzeile.links { margin-left: 0; }
.blatt { margin-top: 1.4rem; padding: clamp(1.1rem, 4vw, 2.2rem); border-radius: 24px; background: var(--blatt); border: 1px solid rgba(184, 146, 74, 0.28); border-bottom: 3px solid rgba(184, 146, 74, 0.4); box-shadow: 0 18px 40px -28px rgba(47, 43, 38, 0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-width: 0; overflow-wrap: anywhere; }
.blatt > :first-child { margin-top: 0; }
.blatt h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.blatt h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 1.8rem; }
.blatt h3 { font-size: 1.2rem; margin-top: 1.2rem; }
.blatt p, .blatt ul, .blatt ol, .blatt dl { margin-top: 0.8rem; }
.blatt ul, .blatt ol { padding-left: 1.3rem; }
.blatt li + li { margin-top: 0.35rem; }
.blatt > h2:first-child, .blatt > h1 + .lead { margin-top: 0.4rem; }
.lead { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.45; color: var(--tinte); margin-top: 0.8rem; }
.krume { margin: 0.6rem 0 0; }
.leer { margin-top: 1rem; color: var(--still); font-style: italic; font-family: var(--serif); }
section + section { margin-top: 1.6rem; }

/* ---------- Knöpfe. Gold mit dunkler Schrift, keine weiße ---------- */
.knopf-zeile { margin-top: 1.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.knopf-zeile.links { justify-content: flex-start; margin-top: 1.2rem; }
.knopf { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.7rem; border-radius: 999px; border: 1.5px solid var(--gold); cursor: pointer; text-decoration: none; font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.02em; line-height: 1.2; color: var(--gold-schrift); background: var(--gold); box-shadow: 0 14px 30px -14px rgba(150, 108, 36, 0.6), 0 2px 6px rgba(150, 108, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.25s var(--ein), box-shadow 0.3s, background 0.25s; text-align: center; }
.knopf > span { position: relative; z-index: 1; }
.knopf::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; transform: translateX(-160%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); pointer-events: none; }
.knopf:hover, .knopf:focus-visible { color: var(--gold-schrift); background: var(--gold-hell); transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(150, 108, 36, 0.7), 0 2px 8px rgba(150, 108, 36, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.knopf:hover::after, .knopf:focus-visible::after { animation: glanz 0.9s ease-out 1; }
@keyframes glanz { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(380%) skewX(-20deg); } }
.knopf.gross { min-height: 58px; padding: 1rem 2.6rem; font-size: 1.3rem; }
.knopf.klein { min-height: 44px; padding: 0.45rem 1.1rem; font-family: var(--sans); font-size: 0.95rem; box-shadow: 0 8px 18px -12px rgba(150, 108, 36, 0.6); }
.knopf.ruhig { background: rgba(255, 252, 245, 0.75); border-color: var(--goldtief); color: var(--wald); box-shadow: none; }
.knopf.ruhig:hover, .knopf.ruhig:focus-visible { background: #fffaf0; color: var(--wald); }
.knopf.warn { background: rgba(255, 252, 245, 0.75); border-color: var(--rot); color: var(--rot); box-shadow: none; }
.bestaetigen .knopf.warn, .knopf.warn.fest { background: var(--rot); color: #fff; }
.knopf.warn:hover, .knopf.warn:focus-visible { background: #fff3ee; color: #6e3426; }
.bestaetigen .knopf.warn:hover, .bestaetigen .knopf.warn:focus-visible { background: #6e3426; color: #fff; }
.knopf[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.textknopf { font: inherit; padding: 0.4rem 0.2rem; min-height: 44px; border: 0; background: none; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.feld { display: grid; gap: 0.35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 500; color: var(--wald); padding: 0; }
.feld small { color: var(--still); font-size: 0.88rem; line-height: 1.4; }
.feld.zwei { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 560px) { .feld.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
input[type="text"], input[type="email"], input[type="date"], textarea, select { width: 100%; min-height: 48px; padding: 0.65rem 0.85rem; font: inherit; color: var(--tinte); background: #fffdf8; border: 1.5px solid var(--feld-rand); border-radius: 12px; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #7a6f60; }
.code-feld { font-family: var(--serif); font-size: 1.8rem; letter-spacing: 0.35em; text-align: center; max-width: 14rem; }
.haken { display: flex; gap: 0.75rem; align-items: flex-start; }
.haken input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; accent-color: var(--gruen); }
.haken label { font-weight: 400; }
.auswahl { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--linie); border-radius: 14px; background: rgba(255, 253, 248, 0.7); }
.auswahl input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0.15rem 0 0; accent-color: var(--gruen); }
.auswahl label { display: grid; gap: 0.1rem; font-weight: 400; }
.auswahl label b { color: var(--wald); }
.feld-fehler { color: var(--rot); font-size: 0.92rem; }
.formular.zweit { margin-top: 0.4rem; }
.meldung { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--linie); border-left: 5px solid var(--gold); background: #fffaf0; color: var(--tinte); line-height: 1.5; overflow-wrap: anywhere; }
.meldung.ok { border-left-color: #3f7a4f; background: #f1f8f1; }
.meldung.fehler { border-left-color: var(--rot); background: #fdf2ee; }
.meldung.info { border-left-color: #6b8aa3; background: #f2f7fa; }
.hinweis-karte { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1.5px solid var(--gold); background: #fffaf0; }

/* ---------- Onboarding ---------- */
.ob { display: flex; flex-direction: column; align-items: center; padding: 0 var(--rand) 2rem; text-align: center; }
.ob-schritt { width: 100%; max-width: 62rem; display: flex; flex-direction: column; align-items: center; padding: 3.2rem 0; }
.ob-schritt + .ob-schritt { border-top: 1px solid var(--linie); }
.ob-js .ob-schritt { display: none; border: 0; padding: 1.5rem 0 0.5rem; }
.ob-js .ob-schritt.aktiv { display: flex; min-height: calc(100svh - 16rem); justify-content: center; view-transition-name: ob-buehne; }
.hero { font-size: clamp(2.5rem, 6.8vw, 5.2rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 17ch; }
.en { margin: 1.6rem auto 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.3vw, 1.6rem); color: var(--still); max-width: 32ch; line-height: 1.4; letter-spacing: 0.01em; }
.ob .titel { margin: 0 auto; }
.ob .knopf-zeile { margin-top: 2.6rem; }
.ob .knopf-zeile.zwei { gap: 1rem; }
.ueberspringen { margin-top: 1.4rem; }
.ueberspringen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; font-size: 0.9rem; color: var(--still); }
.darunter { margin-top: 1.8rem; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.45; color: var(--tinte); max-width: 38rem; }
.darunter.klein { color: var(--still); font-style: italic; font-size: 1.1rem; }
.emblem-gross { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 1.4rem; box-shadow: 0 16px 34px -18px rgba(47, 43, 38, 0.5); }

.punkte { list-style: none; counter-reset: punkt; padding: 0; margin: 2.4rem 0 0; width: 100%; max-width: 44rem; text-align: left; --schritt: 0.7s; }
.punkte li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: center; padding: 1.4rem 0.2rem; counter-increment: punkt; }
.punkte li::before { content: counter(punkt); font-family: var(--serif); font-size: clamp(3rem, 7vw, 4.2rem); line-height: 1; color: var(--gold); text-align: center; user-select: none; -webkit-user-select: none; }
.punkte li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(207, 157, 69, 0.1)); }
.punkte li:last-child { border-bottom: 1px solid rgba(184, 146, 74, 0.22); }
.punkt-text { font-family: var(--serif); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--tinte); }
@media (max-width: 420px) { .punkte li { grid-template-columns: 2.6rem 1fr; gap: 0.7rem; } .ob .knopf.gross { padding-left: 2rem; padding-right: 2rem; } }

.drei { list-style: none; padding: 0; margin: 2.4rem 0 0; width: 100%; max-width: 46rem; display: grid; gap: 1rem; --schritt: 0.5s; }
.karte { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: center; padding: 1.2rem 1.3rem; border-radius: 22px; text-align: left; background: var(--regel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(184, 146, 74, 0.25); border-bottom: 3px solid rgba(184, 146, 74, 0.42); box-shadow: 0 18px 40px -26px rgba(47, 43, 38, 0.35); }
.karte p { font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.4; }
.satz1 { color: var(--wald); font-size: 1.12em; }
.satz2 { color: var(--tinte); }
.medaille { display: grid; place-items: center; width: clamp(3.8rem, 14vw, 4.8rem); aspect-ratio: 1; border-radius: 50%; color: var(--goldtief); background: radial-gradient(circle at 40% 35%, #fffaf0, #efe0bd); border: 1.5px solid var(--gold); box-shadow: 0 0 0 5px rgba(255, 252, 245, 0.7), 0 10px 22px -12px rgba(126, 93, 28, 0.5); }
.medaillen { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.8rem; }

.stufen { list-style: none; counter-reset: stufe; padding: 0; margin: 2.8rem 0 0; display: grid; gap: 0.3rem; width: 100%; max-width: 62rem; align-items: stretch; }
.stufe { counter-increment: stufe; position: relative; display: flex; align-items: center; justify-content: center; padding: 2.4rem 1.2rem 1.4rem; border-radius: 22px; background: var(--regel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(184, 146, 74, 0.28); border-bottom: 3px solid rgba(184, 146, 74, 0.45); box-shadow: 0 18px 40px -26px rgba(47, 43, 38, 0.35); }
.stufe::before { content: counter(stufe); position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gold); color: var(--gold-schrift); font-family: var(--serif); font-size: 1.3rem; box-shadow: 0 6px 14px -6px rgba(150, 108, 36, 0.6); }
.stufe p { font-family: var(--serif); font-size: clamp(1.15rem, 2.3vw, 1.4rem); line-height: 1.35; }
.stufen-pfeil { display: flex; justify-content: center; align-items: center; height: 56px; }
.stufen-pfeil .pfeil-svg { transform: rotate(90deg) scale(0.8); }
@media (min-width: 820px) {
  .stufen { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; }
  .stufen-pfeil { height: auto; }
  .stufen-pfeil .pfeil-svg { transform: none; }
}
.pfeil-svg .bogen { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; animation: strich 1.4s var(--ein) calc(var(--b, 0s) + 0.6s) both; }
.pfeil-svg .spitze { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: blende 0.5s ease calc(var(--b, 0s) + 1.4s) both; }

.ob-nav { display: none; margin-top: 1.4rem; align-items: center; justify-content: center; gap: 1rem; min-height: 48px; }
.ob-js .ob-nav { display: flex; }
.ob-zurueck { min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--linie); border-radius: 999px; background: rgba(255, 252, 245, 0.6); font: inherit; font-size: 0.9rem; color: var(--wald); cursor: pointer; }
.ob-zurueck:hover { background: #fffaf0; border-color: var(--gold); }
.ob-punkte { list-style: none; display: flex; gap: 0.1rem; padding: 0; margin: 0; }
.ob-punkte button { position: relative; width: 28px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; }
.ob-punkte button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(184, 146, 74, 0.45); transition: background 0.25s, transform 0.25s; }
.ob-punkte button[aria-current="step"]::before { background: var(--gold); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(207, 157, 69, 0.3); }

@keyframes vt-raus { to { opacity: 0; filter: blur(12px); transform: scale(1.025); } }
@keyframes vt-rein { from { opacity: 0; filter: blur(12px); transform: scale(0.98); } }
::view-transition-old(ob-buehne) { animation: vt-raus 0.5s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(ob-buehne) { animation: vt-rein 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
::view-transition-group(ob-buehne) { animation-duration: 0s; }

/* ---------- Werkzeuge ---------- */
.vier { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem 1.5rem; align-items: start; --kreis: min(220px, calc(100vw - 2 * var(--rand))); }
.bereich { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.pf { display: none; }
.schwebe { width: var(--kreis, 240px); max-width: 100%; animation: schweben 6s ease-in-out 2.4s infinite alternate; }
.kbild { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; padding: 6px; box-shadow: 0 26px 46px -22px rgba(47, 43, 38, 0.45), 0 4px 14px rgba(47, 43, 38, 0.08); background: rgba(255, 252, 245, 0.9); animation: ring 1s var(--ein) 0.2s both; }
.kbild::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold); pointer-events: none; }
.kbild-in { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; clip-path: circle(50% at 50% 50%); animation: kreis-auf 1.4s var(--ein) 0.35s backwards; }
.kbild img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.kbild.gross { padding: 8px; }
.inhalt-spalte { margin-top: 1.4rem; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 26rem; min-width: 0; }
.unter-kopf { display: flex; align-items: center; justify-content: center; gap: 0.7rem; max-width: 100%; }
.unter-kopf h2 { min-width: 0; text-align: left; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.15; }
.nr { display: inline-grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; font-family: var(--serif); font-size: 1.15rem; background: #8f6f3f; box-shadow: 0 4px 10px -4px rgba(47, 43, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.nr.n2 { background: #5f7a58; } .nr.n3 { background: #4d708c; } .nr.n4 { background: #3c6a47; }
.zeilen { list-style: none; margin: 1.1rem 0 0; padding: 0.3rem 0.8rem; width: 100%; text-align: left; border-radius: 18px; background: rgba(255, 252, 245, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(184, 146, 74, 0.22); }
.zeile { position: relative; display: grid; gap: 0.25rem; padding: 0.95rem 1.6rem 0.95rem 0.2rem; text-decoration: none; color: inherit; border-radius: 12px; transition: background 0.3s, transform 0.3s var(--ein); }
.zeilen li + li .zeile { border-top: 1px solid var(--linie); }
a.zeile:hover, a.zeile:focus-visible { background: rgba(255, 249, 235, 0.95); transform: translateX(3px); }
.ursache { font-family: var(--serif); font-size: 0.88rem; color: var(--rot); line-height: 1.25; }
.projekt { display: flex; align-items: center; gap: 0.55rem; min-width: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--wald); line-height: 1.15; }
.projekt .ic { color: var(--goldtief); }
.pname { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.loest { font-size: 0.9rem; color: var(--still); line-height: 1.35; }
.zeile .pfeil { position: absolute; right: 0.4rem; top: 50%; margin-top: -8px; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s var(--ein); }
a.zeile:hover .pfeil, a.zeile:focus-visible .pfeil { opacity: 1; transform: none; }
.schloss { color: var(--goldtief); }
.punkt { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.punkt.nutzbar { background: #3f7a4f; }
.punkt.teil { background: #4d708c; }
.punkt.aufbau { background: var(--gold); }
.stand-abzeichen { display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; max-width: 100%; padding: 0.15rem 0.7rem; border-radius: 999px; font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; border: 1px solid transparent; }
.stand-abzeichen.nutzbar { color: #2c5f3c; background: #e4f1e6; border-color: #b9d8be; }
.stand-abzeichen.teil { color: #35566d; background: #e3edf3; border-color: #b8cedc; }
.stand-abzeichen.aufbau { color: #6b4a0e; background: #f7ecd0; border-color: #e6cf9b; }
.zusatz { font-weight: 500; }
.alle { margin: 3.2rem auto 0; padding: 1.5rem clamp(1rem, 3vw, 1.8rem) 1.8rem; border-radius: 24px; border: 1.5px solid var(--gold); background: rgba(255, 249, 235, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -26px rgba(47, 43, 38, 0.35); }
.alle h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1.2rem; text-align: left; }
.alle ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; --schritt: 0.1s; }
@media (min-width: 640px) { .alle ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .alle ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alle a { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.3rem 1rem 1.4rem; border-radius: 20px; text-align: center; text-decoration: none; color: inherit; background: rgba(255, 252, 245, 0.85); border: 1px solid var(--linie); border-bottom: 3px solid rgba(184, 146, 74, 0.42); box-shadow: 0 14px 30px -24px rgba(47, 43, 38, 0.4); transition: background 0.3s, transform 0.3s var(--ein), border-color 0.3s; }
.alle a:hover, .alle a:focus-visible { background: #fffaf0; border-color: var(--gold); transform: translateY(-3px); }
.scheibe { display: grid; place-items: center; flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffaf0, #efe0bd); color: var(--goldtief); border: 1.5px solid var(--gold); box-shadow: 0 0 0 4px rgba(255, 252, 245, 0.7), 0 8px 18px -10px rgba(126, 93, 28, 0.5); }
.alle a > b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--wald); line-height: 1.15; overflow-wrap: anywhere; }
.alle-loest { font-family: var(--serif); font-size: 1.05rem; color: var(--still); line-height: 1.3; }
.landkarte-satz { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.9rem; color: var(--goldtief); }
.landkarte-satz.gross { font-family: var(--serif); font-size: 1.15rem; margin-top: 1rem; }
.legende { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0; justify-content: center; font-family: var(--serif); font-size: 1.05rem; color: var(--tinte); }
.legende > span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.2rem; }
.legende > span + span { border-left: 1px solid var(--linie); }
.legende .u { color: var(--rot); }

@media (min-width: 700px) {
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.6rem 2rem; --kreis: min(240px, calc((100vw - 2 * var(--rand) - 2rem) / 2)); }
}
@media (min-width: 1100px) {
  .vier { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; --kreis: min(240px, calc((100vw - 2 * var(--rand) - 192px) / 4)); }
  .bereich { padding: 0 0.3rem; }
  .unter-kopf { min-height: 2.9rem; }
  .pf { display: flex; height: var(--kreis); align-items: center; justify-content: center; }
}

/* ---------- Seite eines Werkzeugs ---------- */
.projekt-kreis { --kreis: 260px; display: flex; justify-content: center; margin-top: 0.6rem; }
.medaillon { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--goldtief); background: radial-gradient(circle at 38% 30%, #fffdf6 0%, #f6e9c9 55%, #e6cf9b 100%); border: 2px solid var(--gold); box-shadow: 0 0 0 8px rgba(255, 252, 245, 0.85), 0 0 0 9.5px rgba(184, 146, 74, 0.7), 0 28px 50px -22px rgba(47, 43, 38, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.7); animation: ring 1s var(--ein) 0.2s both; }
.medaillon::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(184, 146, 74, 0.5); pointer-events: none; }
.medaillon svg { width: 40%; height: 40%; stroke-width: 1.25; }
@media (min-width: 700px) { .projekt-kreis { --kreis: 320px; } }
.bereich-name { margin-top: 2.2rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--goldtief); letter-spacing: 0.03em; }
.projekt-name { margin-top: 0.3rem; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fakten { margin: 2rem 0 0; display: grid; gap: 1.2rem; max-width: 34rem; }
.fakten dt { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--goldtief); }
.fakten dd { margin: 0.25rem 0 0; font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.3; color: var(--wald); }
.fakten dd.rot { color: var(--rot); }
.bald { margin-top: 1.4rem; color: var(--still); font-style: italic; font-family: var(--serif); font-size: 1.25rem; }
.hinweis-notruf { width: 100%; margin: 2rem auto 0; padding: 1.1rem 1.2rem 1.3rem; text-align: left; border-radius: 20px; border: 1px solid rgba(184, 146, 74, 0.45); border-left: 5px solid var(--gold); background: rgba(255, 252, 245, 0.95); }
.hinweis-notruf h2 { font-size: 1.35rem; }
.hinweis-notruf p { margin-top: 0.5rem; }
/* Kellerlicht und Feuerwache. Die Nummern stehen ganz oben und straff, damit sie am Handy ohne Scrollen im Bild sind. */
.werkzeug-seite > .hinweis-notruf:first-child { margin-top: 0.2rem; padding: 0.7rem 0.8rem 0.8rem; }
.werkzeug-seite > .hinweis-notruf:first-child .notruf-liste { margin-top: 0.5rem; gap: 0.4rem; }
.werkzeug-seite > .hinweis-notruf:first-child .notruf { min-height: 48px; padding: 0.35rem 0.7rem; }
.werkzeug-antraege { width: 100%; margin-top: 2.4rem; }
.werkzeug-seite > .knopf-zeile { margin-top: 1.6rem; }

/* ---------- Notrufnummern ---------- */
.notruf-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.55rem; }
.notruf { display: flex; align-items: center; gap: 0.9rem; min-height: 58px; padding: 0.65rem 1rem; border-radius: 16px; border: 1.5px solid var(--gold); background: #fffdf8; color: var(--wald); text-decoration: none; box-shadow: 0 10px 22px -18px rgba(47, 43, 38, 0.5); }
.notruf .ic { color: var(--goldtief); }
.notruf:hover, .notruf:focus-visible { background: #fff6e0; color: var(--wald); }
.notruf-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.notruf-name { font-size: 0.88rem; color: var(--still); overflow-wrap: anywhere; }
.notruf-nummer { font-family: var(--serif); font-size: 1.55rem; color: var(--tinte); letter-spacing: 0.01em; }
.notruf-nummer.klein-nummer { font-family: var(--sans); font-size: 1rem; }

/* ---------- Hilfe in Not (kompakt, damit alles ohne Scrollen im Bild steht, auch am Handy) ---------- */
.seite-hilfe .kopf { padding-bottom: 0; }
.hilfe { padding-top: 0.2rem; }
.hilfe h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
.hilfe .lead { margin-top: 0.3rem; font-size: 1.05rem; line-height: 1.35; }
.hilfe .notruf-liste { margin-top: 0.7rem; gap: 0.45rem; }
.hilfe .notruf { min-height: 56px; gap: 0.7rem; padding: 0.4rem 0.8rem; }
.hilfe .notruf-text { flex-direction: row; align-items: center; gap: 0.8rem; width: 100%; }
.hilfe .notruf-nummer { order: -1; flex: none; font-size: 1.35rem; white-space: nowrap; }
.hilfe .notruf-nummer.klein-nummer { font-size: 0.95rem; }
.hilfe .notruf-name { font-size: 0.8rem; line-height: 1.25; }
.hilfe .schluss { margin-top: 0.9rem; font-family: var(--serif); font-size: 1.15rem; }
.hilfe .klein { margin-top: 0.4rem; }
@media (max-width: 400px) {
  .hilfe .notruf .ic { display: none; }
  .hilfe .notruf-nummer { font-size: 1.2rem; }
  .hilfe .notruf { gap: 0.5rem; }
}
/* Auf dem Handy bleibt auf dieser einen Seite das Menü weg, damit die Nummern ohne Scrollen im Bild stehen. Marke und Fuß führen weiter. */
@media (max-width: 600px) { .seite-hilfe .kopf.kompakt .hauptnav { display: none; } }

/* ---------- Anträge ---------- */
.antrag-liste { display: grid; gap: 1rem; margin-top: 1rem; padding: 0; list-style: none; }
.antrag { padding: 1.1rem 1.2rem 1rem; border-radius: 20px; background: var(--blatt); border: 1px solid rgba(184, 146, 74, 0.28); border-bottom: 3px solid rgba(184, 146, 74, 0.4); box-shadow: 0 14px 30px -24px rgba(47, 43, 38, 0.4); min-width: 0; overflow-wrap: anywhere; text-align: left; }
.antrag header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.antrag h3 { font-size: 1.3rem; }
.antrag h3 a { color: var(--wald); text-decoration: none; }
.antrag h3 a:hover { text-decoration: underline; }
.antrag p { margin-top: 0.5rem; }
.antrag .auszug { color: var(--tinte); }
.antrag-text h4 { margin-top: 1.1rem; font-size: 1.1rem; color: var(--goldtief); }
.antrag-text p { margin-top: 0.4rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.aktionen a { display: inline-flex; align-items: center; min-height: 40px; }
.abzeichen { display: inline-flex; align-items: center; padding: 0.1rem 0.65rem; border-radius: 999px; font-size: 0.8rem; background: #f7ecd0; color: #6b4a0e; border: 1px solid #e6cf9b; width: fit-content; }
.abzeichen.stand-uebernommen { background: #e4f1e6; color: #2c5f3c; border-color: #b9d8be; }
.abzeichen.stand-abgelehnt { background: #f6e5df; color: #7a3d2e; border-color: #e3bfb3; }
.abzeichen.stand-eingegangen { background: #eceae4; color: #4d463b; border-color: #d3cec2; }
.herkunft { font-size: 0.88rem; color: var(--still); }
.herkunft.von-between { color: #2c5f3c; font-weight: 500; }
.begruendung { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: #fdf2ee; border-left: 4px solid var(--rot); }
.begruendung b { display: block; color: var(--rot); }
.begruendung p { margin-top: 0.3rem; }
.antrag-kurz { display: grid; gap: 0.2rem; padding: 0.7rem 0; }
.antrag-kurz + .antrag-kurz { border-top: 1px solid var(--linie); }
.filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--linie); background: rgba(255, 252, 245, 0.7); text-decoration: none; color: var(--wald); }
.filter a[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--gold-schrift); }
.seiten { display: flex; gap: 1rem; margin-top: 1.2rem; }
.verwaltung-karte { margin-top: 1.2rem; padding: 0.2rem 0 1rem; border-bottom: 1px dashed var(--linie); }
.verwaltung-form { padding: 0 0.2rem; }
.meldung-karte { margin-top: 1rem; }
.daten-liste { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.daten-liste dt { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--goldtief); }
.daten-liste dd { margin: 0; }
.punkte-liste { padding-left: 1.2rem; }

/* ---------- Rechtstexte ---------- */
.recht { text-align: left; }
.recht section { margin-top: 1.6rem; }
.recht section + section { margin-top: 1.6rem; }
.recht h2 { font-size: 1.45rem; margin-top: 0; }
.recht p { max-width: 62ch; }
.recht ul { max-width: 62ch; }
.in-kuerze { padding: 1rem 1.2rem; border-radius: 18px; border: 1.5px solid var(--gold); background: #fffaf0; }

/* ---------- Gemeinsame Projekte ---------- */
.projekt-liste { margin-top: 1.4rem; }
.projekt-karten { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.projekt-karte { display: grid; gap: 0.2rem; padding: 1rem 1.2rem; border-radius: 18px; background: var(--blatt); border: 1px solid var(--linie); border-bottom: 3px solid rgba(184, 146, 74, 0.42); text-decoration: none; color: var(--tinte); transition: background 0.25s, transform 0.25s var(--ein); }
.projekt-karte b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--wald); overflow-wrap: anywhere; }
.projekt-karte:hover, .projekt-karte:focus-visible { background: #fffaf0; transform: translateY(-2px); }
.schluessel-satz { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.9rem; border-radius: 14px; background: #f1f6f1; border: 1px solid #c4dac6; color: #264a31; }
.schluessel-satz .ic { margin-top: 0.15rem; }
.projekt-kopf { margin-top: 0.6rem; }
.projekt-titel { font-size: clamp(2rem, 6vw, 3.2rem); overflow-wrap: anywhere; }
.hinweis-todo { margin-bottom: 0.2rem; }
.todo-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.todo { padding: 0.8rem 0.95rem; border-radius: 16px; background: #fffdf8; border: 1px solid var(--linie); }
.todo.fertig { background: rgba(255, 253, 248, 0.6); }
.todo.fertig .todo-text { text-decoration: line-through; color: var(--still); }
.todo-haken { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; min-height: 32px; }
.todo-haken input { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--gruen); }
.todo-text { font-size: 1.05rem; overflow-wrap: anywhere; padding-top: 0.1rem; }
.todo-notiz { margin: 0.4rem 0 0 2.35rem; color: var(--still); font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0 2.35rem; }
.todo-meta select, .todo-meta input[type="date"] { width: auto; min-height: 44px; max-width: 100%; font-size: 0.95rem; }
.erledigt-box { margin-top: 1.2rem; }
.erledigt-box summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--wald); }
.mitglieder-liste { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.4rem; }
.mitglieder-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.8rem; }
.bestaetigen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.frage { font-size: 0.95rem; color: var(--rot); overflow-wrap: anywhere; }
.boxen { margin-top: 1rem; }
.link-box { padding: 0.9rem 1rem; border-radius: 16px; background: #fffaf0; border: 1.5px solid var(--gold); }
.link-zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.link-feld { flex: 1 1 14rem; min-width: 0; font-size: 0.85rem; }
.einladung-titel { margin: 0.6rem 0; font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--wald); overflow-wrap: anywhere; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 520px) {
  .kopf { gap: 0.2rem 0.6rem; }
  .marke-text b { font-size: 1.2rem; }
  .karte { grid-template-columns: 1fr; justify-items: start; }
  .legende > span { padding: 0 0.7rem; }
  .knopf.gross { font-size: 1.2rem; }
  .code-feld { letter-spacing: 0.25em; }
}

/* ---------- Weniger Bewegung  alles sofort sichtbar, nichts bewegt sich ---------- */
@media (prefers-reduced-motion: reduce) {
  .hintergrund, .hintergrund *, .huelle *, .huelle *::before, .huelle *::after { animation: none !important; transition: none !important; }
  .knopf:hover, .knopf:focus-visible { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}