/* Plattform-Hülle: Start, Projekt, Maske, Verwaltung. Galerie: heller Wandgrund, starke Typo, Ultramarin als einziger Akzent. */
:root {
	--wand: #f5f3ee;
	--weiss: #fff;
	--tinte: #0b0b10;
	--tinte-2: #33333d;
	--akzent: #1f3fe0;
	--akzent-tief: #1631b8;
	--akzent-hell: #e3e8ff;
	--gefahr: #c0161d;
	--ok: #0d7a3a;
	--rand: 2px solid var(--tinte);
	--rinne: clamp(16px, 4vw, 48px);
	--radius: 6px;
	color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--wand); }
body {
	margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
	font: 400 1.0625rem/1.55 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--tinte); background: var(--wand);
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1; }
::selection { background: var(--akzent); color: #fff; }
input, textarea, button, select { font: inherit; color: inherit; }
input, textarea { caret-color: var(--akzent); }
a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
p { margin: 0; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.huelle { width: min(1280px, 100% - 2 * var(--rinne)); margin-inline: auto; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Zurück / Fuß ---------- */
.zurueck { padding-top: 16px; }
.kopf-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--tinte); text-decoration: none; min-height: 44px; }
.kopf-link:hover { color: var(--akzent); }
.fuss { border-top: var(--rand); margin-top: clamp(48px, 8vw, 96px); }
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px; font-size: .95rem; }
.fuss a { color: var(--tinte); font-weight: 600; }

/* ---------- Knöpfe & Felder ---------- */
.knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 0 24px; border: var(--rand); border-radius: var(--radius);
	background: var(--weiss); color: var(--tinte); font-weight: 700; text-decoration: none; cursor: pointer;
	transition: background-color .15s, color .15s, transform .15s;
}
.knopf:hover { background: var(--tinte); color: #fff; }
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.haupt:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }
.knopf.gross { min-height: 56px; padding: 0 28px; font-size: 1.1rem; }
.knopf.gefahr { color: var(--gefahr); border-color: var(--gefahr); }
.knopf.gefahr:hover { background: var(--gefahr); color: #fff; }
.knopf.klein { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.knopf:disabled { opacity: 1; background: #d9d6ce; border-color: #8a877f; color: #3b3a36; cursor: not-allowed; transform: none; }

.feld { display: grid; gap: 8px; }
.feld > label, .feld-titel { font-weight: 750; font-size: 1rem; }
.hilfe { font-size: .92rem; color: var(--tinte-2); }
input[type="text"], input[type="password"], input[type="search"], textarea {
	width: 100%; min-height: 52px; padding: 12px 14px;
	background: var(--weiss); border: var(--rand); border-radius: var(--radius);
	font-size: 1.0625rem; /* ≥16px: kein Zoom auf iPhone */
}
textarea { min-height: 220px; resize: vertical; line-height: 1.55; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
::placeholder { color: #5d5c66; opacity: 1; }
.zaehler { justify-self: end; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--tinte-2); }

.meldung { padding: 14px 16px; border: var(--rand); border-radius: var(--radius); font-weight: 600; background: var(--weiss); }
.meldung.ok { border-color: var(--ok); background: #e6f6ec; color: #08431f; }
.meldung.fehler { border-color: var(--gefahr); background: #fdeaea; color: #7c0c11; }
.meldung a { color: inherit; font-weight: 800; }

/* ---------- Startseite ---------- */
.held { padding-block: clamp(40px, 9vw, 120px) clamp(32px, 6vw, 72px); }
.held h1 { font-size: clamp(2.1rem, 8vw, 6rem); font-weight: 850; font-stretch: 118%; line-height: .94; letter-spacing: -0.035em; max-width: 13ch; }
.held h1 em { font-style: normal; color: var(--akzent); }
.held p { margin-top: clamp(20px, 3vw, 32px); font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 54ch; color: var(--tinte-2); }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 4px solid var(--tinte); }
.abschnitt-kopf h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; }
.abschnitt-kopf .anzahl { font-weight: 700; font-variant-numeric: tabular-nums; }

.projektliste { list-style: none; margin: 0; padding: 0; }
.projektliste li { border-bottom: var(--rand); }
.projektliste a {
	display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center;
	padding: clamp(20px, 3vw, 36px) clamp(16px, 2vw, 32px); color: var(--tinte); text-decoration: none;
	transition: background-color .2s, color .2s;
}
.pl-titel { font-size: clamp(1.6rem, 4vw, 3.2rem); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.03em; }
.pl-beschr { grid-column: 1; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--tinte-2); max-width: 70ch; }
.pl-rechts { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 16px; font-weight: 700; white-space: nowrap; }
.pl-rechts .icon { width: 2rem; height: 2rem; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.projektliste a:hover, .projektliste a:focus-visible { background: var(--akzent); color: #fff; outline-offset: -3px; }
.projektliste a:hover .pl-beschr, .projektliste a:focus-visible .pl-beschr { color: #fff; }
.projektliste a:hover .icon { transform: translateX(6px); }
@media (max-width: 640px) {
	.projektliste a { grid-template-columns: 1fr; }
	.pl-rechts { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: 8px; }
}

.leer { padding: clamp(32px, 6vw, 64px) 0; display: grid; gap: 16px; justify-items: start; }
.leer h2, .leer h3 { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; }
.leer h1 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1; }
.leer p { max-width: 52ch; font-size: 1.1rem; color: var(--tinte-2); }

/* ---------- Projektseite ---------- */
.projekt-kopf { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: end; padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 48px); border-bottom: 4px solid var(--tinte); }
.projekt-kopf h1 { font-size: clamp(2rem, 6.4vw, 5.6rem); font-weight: 850; font-stretch: 112%; line-height: .96; letter-spacing: -0.035em; }
.projekt-kopf .beschr { margin-top: 18px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); max-width: 60ch; color: var(--tinte-2); white-space: pre-line; }
.projekt-aktion { display: grid; gap: 10px; justify-items: end; }
.projekt-aktion .anzahl { font-weight: 750; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
	.projekt-kopf { grid-template-columns: 1fr; }
	.projekt-aktion { justify-items: stretch; }
	.projekt-aktion .anzahl { order: -1; }
}

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(32px, 4vw, 56px) clamp(20px, 2.6vw, 40px); padding-top: clamp(32px, 5vw, 64px); }
.exponat { position: relative; }
.ex-link { display: block; color: var(--tinte); text-decoration: none; }
.ex-bild {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--bild, none) center / cover no-repeat, var(--flaeche);
	border-bottom: 8px solid var(--farbe);
	box-shadow: 0 1px 2px rgba(11,11,16,.12), 0 14px 30px -14px rgba(11,11,16,.45);
	transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1);
}
.ex-link:hover .ex-bild, .ex-link:focus-visible .ex-bild { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(11,11,16,.12), 0 22px 40px -16px rgba(11,11,16,.5); }
.ex-link:focus-visible { outline: none; }
.ex-link:focus-visible .ex-bild { outline: 3px solid var(--akzent); outline-offset: 4px; }
.ex-logo { position: absolute; left: 14px; bottom: 14px; width: 30%; aspect-ratio: 1; padding: 8px; background: #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); }
.ex-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ex-bild:not(.hat-bild) .ex-logo { left: 50%; top: 50%; bottom: auto; width: 46%; translate: -50% -50%; box-shadow: none; background: rgba(255,255,255,.94); }
.ex-vorschau { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; text-align: center; color: var(--schrift); font: var(--font); line-height: 1; overflow-wrap: anywhere; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.ex-schild { padding-top: 16px; display: grid; gap: 2px; }
.ex-titel { font-size: 1.3rem; font-weight: 800; font-stretch: 105%; letter-spacing: -0.015em; line-height: 1.15; }
.ex-link:hover .ex-titel { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.ex-name { font-weight: 500; }
.ex-design { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .9rem; font-weight: 650; color: var(--tinte-2); }
.ex-design::before { content: ""; width: 14px; height: 14px; background: var(--flaeche); border: 2px solid var(--farbe); }
.ex-bearbeiten { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; font-weight: 700; font-size: .92rem; color: var(--akzent); border: 2px solid var(--akzent); border-radius: var(--radius); text-decoration: none; background: var(--wand); }
.ex-bearbeiten:hover { background: var(--akzent); color: #fff; }

/* Design-Andeutung: Fläche, Akzentfarbe, Schrift je Design (auch für die Mini-Vorschauen der Maske) */
[data-design="glas"] { --flaeche: radial-gradient(70% 70% at 15% 10%, #ff6b3d, transparent 70%), radial-gradient(70% 80% at 95% 20%, #3f5cff, transparent 70%), #1c1548; --farbe: #6b4dff; --schrift: #fff; --font: 800 1em "Archivo", sans-serif; }
[data-design="plakat"] { --flaeche: #e30613; --farbe: #0a0a0a; --schrift: #fff; --font: 900 condensed 1.15em "Archivo", sans-serif; }
[data-design="magazin"] { --flaeche: #fbf8f1; --farbe: #b8121c; --schrift: #111; --font: 600 1.05em "Fraunces", Georgia, serif; }
[data-design="neon"] { --flaeche: radial-gradient(80% 60% at 80% 100%, rgba(255,79,216,.35), transparent 70%), #07060f; --farbe: #2ef2ff; --schrift: #fff; --font: 800 .8em "Unbounded", sans-serif; }
[data-design="papier"] { --flaeche: #eadbc0; --farbe: #c2410c; --schrift: #2a1d12; --font: 700 1.3em "Caveat", cursive; }
[data-design="neon"] .ex-vorschau { text-shadow: 0 0 .25em rgba(46,242,255,.9); }
[data-design="plakat"] .ex-vorschau { font-stretch: 72%; }

/* ---------- Maske ---------- */
.pinbox { margin-bottom: clamp(20px, 3vw, 32px); border: var(--rand); border-radius: var(--radius); background: var(--weiss); }
.pinbox summary { display: flex; align-items: center; min-height: 52px; padding: 0 16px; font-weight: 750; cursor: pointer; }
.pinbox[open] summary { border-bottom: var(--rand); }
.pinbox form { display: grid; gap: 16px; padding: 16px; max-width: 480px; }
.pinbox .knopf, .pin-zeile .knopf { min-height: 52px; }
select { width: 100%; min-height: 52px; padding: 12px 14px; background: var(--weiss); border: var(--rand); border-radius: var(--radius); font-size: 1.0625rem; }
select:focus-visible { outline: 3px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.pin-zeile { display: flex; gap: 8px; max-width: 360px; }
.pin-zeile input { flex: 1; min-width: 0; letter-spacing: .2em; }
.pin-weg { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; cursor: pointer; }
.pin-weg input { width: 24px; height: 24px; accent-color: var(--akzent); }

.maske-kopf { padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 36px); }
.maske-kopf h1 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.035em; line-height: .98; }
.maske-kopf p { margin-top: 12px; font-size: 1.15rem; font-weight: 600; }
.maske { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); align-items: start; }
.block { display: grid; gap: 24px; padding: 0; margin: 0; border: 0; min-width: 0; }
.block > legend, .block-titel { padding: 0; margin-bottom: 4px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
fieldset.block > legend { float: left; width: 100%; margin-bottom: 0; padding-bottom: 12px; }
fieldset.block > legend + * { clear: both; }
@media (min-width: 1100px) {
	.maske { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
	.maske > * { grid-column: 1; }
	.maske > .vorschau { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 24px; }
}

.ablage {
	display: grid; justify-items: center; gap: 8px; padding: clamp(24px, 4vw, 40px) 20px; text-align: center; cursor: pointer;
	border: 3px dashed var(--tinte); border-radius: var(--radius); background: var(--weiss);
	transition: background-color .15s, border-color .15s;
}
.ablage .icon { width: 2.4rem; height: 2.4rem; color: var(--akzent); }
.ablage strong { font-size: 1.15rem; }
.ablage.drueber, .ablage:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.bildplaetze { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.bildplatz { display: grid; gap: 10px; min-width: 0; }
.bildplatz-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 750; }
.bildplatz-bild {
	aspect-ratio: 4 / 3; border: var(--rand); border-radius: var(--radius); display: grid; place-items: center; overflow: hidden;
	background: repeating-conic-gradient(#e7e4dc 0 25%, #fff 0 50%) 0 0 / 20px 20px;
}
.bildplatz-bild img { width: 100%; height: 100%; object-fit: contain; }
.bildplatz-bild span { font-weight: 650; color: var(--tinte-2); background: var(--weiss); padding: 4px 10px; }
.bildplatz-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.datei-knopf { position: relative; }
.datei-knopf input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 0; }
.datei-knopf:focus-within { outline: 3px solid var(--akzent); outline-offset: 3px; }
.tauschen-zeile { display: flex; justify-content: center; }
@media (max-width: 420px) { .bildplaetze { grid-template-columns: 1fr; } }

.wahl { display: flex; flex-wrap: wrap; gap: 0; border: var(--rand); border-radius: var(--radius); overflow: hidden; width: fit-content; max-width: 100%; }
.wahl label { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; }
.wahl span { display: block; padding: 12px 18px; font-weight: 700; min-height: 48px; background: var(--weiss); }
.wahl label + label span { border-left: var(--rand); }
.wahl input:checked + span { background: var(--tinte); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: -5px; }

.designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.design-karte { position: relative; display: grid; gap: 12px; padding: 8px 8px 12px; cursor: pointer; background: var(--weiss); border: var(--rand); border-radius: 12px; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1); }
.design-karte:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(11,11,16,.5); }
.design-karte input { position: absolute; opacity: 0; pointer-events: none; }
.design-karte:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent); }
.design-karte:has(input:focus-visible) { outline: 3px solid var(--akzent); outline-offset: 4px; }
.design-karte .haken { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; border-radius: 50%; background: var(--akzent); color: #fff; display: none; place-items: center; }
.design-karte .haken .icon { width: 18px; height: 18px; stroke-width: 3; }
.design-karte:has(input:checked) .haken { display: grid; }
.design-name { font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
.design-info { font-size: .88rem; line-height: 1.35; color: var(--tinte-2); }

/* Mini-Vorschau: Fläche + "Aa" + Textzeilen im Stil des Designs */
.mini { position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--flaeche); color: var(--schrift); }
.mini b { position: absolute; left: 10%; top: 14%; font: var(--font); font-size: 1.9rem; line-height: 1; }
.mini i { position: absolute; left: 10%; right: 10%; bottom: 14%; height: 30%; background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 9px); opacity: .9; }
[data-design="glas"] .mini i { right: 8%; left: 8%; bottom: 10%; height: 38%; padding: 0; border-radius: 6px; background: rgba(12,12,22,.5) ; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
[data-design="plakat"] .mini i { left: 0; right: 0; bottom: 0; height: 32%; background: #fff; opacity: 1; box-shadow: inset 0 6px 0 #0a0a0a; }
[data-design="plakat"] .mini b { font-size: 2.6rem; top: 8%; font-stretch: 72%; }
[data-design="magazin"] .mini b { font-size: 2.1rem; }
[data-design="magazin"] .mini i { box-shadow: 0 -10px 0 -7px #b8121c; }
[data-design="neon"] .mini b { text-shadow: 0 0 .2em rgba(46,242,255,.95); font-size: 1.5rem; }
[data-design="neon"] .mini i { color: #2ef2ff; opacity: .7; }
[data-design="papier"] .mini b { font-size: 2.4rem; rotate: -4deg; }
[data-design="papier"] .mini i { background: #fffdf6; opacity: 1; rotate: 1.5deg; box-shadow: 0 4px 8px rgba(60,40,10,.3); }
[data-design="papier"] .mini::after { content: ""; position: absolute; top: 10%; right: 12%; width: 22%; height: 22%; background: #fff; rotate: 6deg; box-shadow: 0 3px 6px rgba(60,40,10,.3); }

.vorschau { display: grid; gap: 12px; min-width: 0; }
.vorschau-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.vorschau-kopf h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
.vorschau-rahmen { position: relative; width: 100%; overflow: hidden; border: 3px solid var(--tinte); border-radius: 10px; background: #111; margin-inline: auto; }
.vorschau-rahmen.handy { max-width: 320px; border-radius: 28px; border-width: 8px; }
.vorschau-rahmen iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }

.speichern-zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Verwaltung ---------- */
.anmelden { max-width: 480px; display: grid; gap: 20px; padding-block: clamp(40px, 8vw, 96px); }
.anmelden h1, .v-kopf h1 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 850; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1; }
.v-kopf { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: end; gap: 16px; padding-block: clamp(32px, 5vw, 64px) 24px; border-bottom: 4px solid var(--tinte); }
#abmelden { margin-left: auto; align-self: center; }
.v-liste { display: grid; gap: 28px; padding-top: 32px; }
.v-projekt { background: var(--weiss); border: var(--rand); border-radius: 10px; padding: clamp(16px, 3vw, 32px); display: grid; gap: 20px; }
.v-projekt h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; }
.v-meta { margin-top: 6px; font-weight: 600; color: var(--tinte-2); }
.v-teilen { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: center; padding: 16px; background: var(--akzent-hell); border-radius: var(--radius); }
.v-teilen dt { font-weight: 750; }
.v-teilen dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.v-code { font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; background: var(--weiss); border: var(--rand); padding: 6px 12px; border-radius: var(--radius); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.v-url { font-weight: 650; overflow-wrap: anywhere; color: var(--tinte); }
@media (max-width: 560px) { .v-teilen { grid-template-columns: 1fr; } .v-teilen dt { margin-top: 6px; } }
.v-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
details.v-klapp { border-top: var(--rand); padding-top: 14px; }
details.v-klapp > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 750; cursor: pointer; list-style: none; }
details.v-klapp > summary::-webkit-details-marker { display: none; }
details.v-klapp > summary::before { content: ""; width: 10px; height: 10px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; rotate: -45deg; transition: rotate .2s; margin-inline: 4px 6px; }
details.v-klapp[open] > summary::before { rotate: 45deg; }
details.v-klapp.gefahr > summary { color: var(--gefahr); }
.v-form { display: grid; gap: 16px; padding-top: 12px; }
.v-eintraege { list-style: none; margin: 0; padding: 8px 0 0; display: grid; }
.v-eintraege li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #c9c6bd; }
.v-eintraege li > div { min-width: 0; overflow-wrap: anywhere; }
.v-eintraege strong { display: block; }
.v-neu { background: var(--weiss); border: var(--rand); border-radius: 10px; padding: clamp(16px, 3vw, 32px); margin-top: 32px; }
details.v-neu:not([open]) { padding-block: 8px; }
.v-neu > summary { font-size: 1.2rem; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .zwei { grid-template-columns: 1fr; } }
textarea.kurz { min-height: 110px; }