/* Deumel kocht: Farben und Maße nach entwuerfe/seite-kombi.html. Hell/Dunkel: data-darstellung am html-Element
   (hell | dunkel | auto; auto folgt dem Handy). Keine fremden Quellen, Schriften lokal. */
@font-face { font-family: "Young Serif"; src: url("/schrift/YoungSerif-400.ttf"); font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/schrift/BricolageGrotesque-var.ttf"); font-weight: 200 800; font-display: swap; }

:root, html[data-darstellung="hell"] {
  --grund: #faf8f5; --text: #1f1b18; --leise: #857c73; --linie: #ece6de; --rot: #b8322a; --band: #b8322a; --bandtext: #fff;
  --rand: #fff; --randlinie: #e6e0d8; --knopf: #1f1b18; --knopftext: #fff; --leiste: #faf8f5; --fehler: #b8322a; --sternleer: #ddd5cb; --warn: #9e1f18; --kasten: #1f1b18; --weg: #b3aaa1;
  color-scheme: light;
}
html[data-darstellung="dunkel"] {
  --grund: #1c1917; --text: #f3efe6; --leise: #a39a90; --linie: #2e2925; --rot: #ff6a58; --band: #b8322a; --bandtext: #fff;
  --rand: #262220; --randlinie: #37312d; --knopf: #ff6a58; --knopftext: #1c1917; --leiste: #171412; --fehler: #ff6a58; --sternleer: #4a423c; --warn: #9e1f18; --kasten: #a39a90; --weg: #6b625a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-darstellung="auto"] {
    --grund: #1c1917; --text: #f3efe6; --leise: #a39a90; --linie: #2e2925; --rot: #ff6a58; --band: #b8322a; --bandtext: #fff;
    --rand: #262220; --randlinie: #37312d; --knopf: #ff6a58; --knopftext: #1c1917; --leiste: #171412; --fehler: #ff6a58; --sternleer: #4a423c; --warn: #9e1f18; --kasten: #a39a90; --weg: #6b625a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { font-family: "Bricolage", system-ui, sans-serif; background: var(--grund); color: var(--text); -webkit-text-size-adjust: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Kopfband */
.marke { display: flex; align-items: center; gap: 8px; font-family: "Young Serif", serif; font-size: 16px; }
.marke svg { width: 40px; height: 13px; fill: #fff; flex: none; }
h1 { font-family: "Young Serif", serif; font-weight: 400; font-size: 36px; line-height: 1; margin-top: 16px; }
.kopf { background: var(--band); color: var(--bandtext); padding: calc(18px + env(safe-area-inset-top)) 20px 18px; }
.ava { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: url("/bilder/foto.png") center / cover; display: block; }

/* Rahmen: Kopfband, Inhalt, Leiste; auf dem Desktop dieselbe Seite in einer Spalte */
.rahmen { display: flex; flex-direction: column; height: 100dvh; max-width: 640px; margin: 0 auto; background: var(--grund); }
.inhalt { flex: 1; overflow-y: auto; padding: 14px 20px; outline: none; }
.leer { color: var(--leise); font-size: 15px; }
.leiste { display: flex; border-top: 1px solid var(--linie); background: var(--leiste); padding: 9px 4px calc(12px + env(safe-area-inset-bottom)); }
.leiste a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--leise); text-decoration: none; }
.leiste svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leiste a[aria-current="page"] { color: var(--rot); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Anmeldung */
.anm { display: flex; flex-direction: column; min-height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--grund); }
.anm-bild { height: 44vh; min-height: 260px; max-height: 420px; background: url("/bilder/foto-deumel.jpg") center 18% / cover; }
.band { background: var(--band); color: #fff; padding: 18px 22px 20px; margin-top: -1px; }
.band .marke { font-size: 18px; }
.band .marke svg { width: 46px; height: 15px; }
.band p { font-size: 14.5px; line-height: 1.4; margin-top: 8px; font-weight: 500; }
.anm-form { padding: 16px 22px 0; }
.feld { display: block; border-bottom: 1.5px solid var(--text); margin-bottom: 10px; padding: 6px 0 4px; }
.feld span { display: block; font-size: 12px; color: var(--leise); font-weight: 600; }
.feld input { width: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; padding: 4px 0; outline: none; }
.feld:focus-within { border-bottom-color: var(--rot); }
.fehler { color: var(--fehler); font-size: 14px; font-weight: 600; margin: 2px 0 8px; }
.los { width: 100%; height: 50px; margin-top: 8px; border: 0; border-radius: 99px; background: var(--knopf); color: var(--knopftext); font-family: "Young Serif", serif; font-size: 17px; cursor: pointer; }
.los:disabled { opacity: .6; cursor: default; }
.ki { margin-top: auto; text-align: center; font-size: 11px; color: var(--leise); padding: 18px 0 calc(14px + env(safe-area-inset-bottom)); }

/* Woche (entwuerfe/seite-kombi): Kopfzeile unter dem Titel, Zeile je Tag mit Teller, Tausch-Pfeil und Menü */
.sub { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin-top: 8px; }
.tag { border: 1.5px solid #fff; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.z { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.teller { width: 64px; height: 64px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--rand);
          box-shadow: 0 0 0 1px var(--randlinie), inset 0 0 0 7px var(--rand), inset 0 0 0 8px var(--randlinie); }
.teller i { width: 43px; height: 43px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            background: color-mix(in srgb, var(--kat, var(--leise)) 18%, var(--rand)); }
.bart-teller { width: 30px; height: 10px; fill: var(--kat, var(--leise)); }
.z.frei .teller i { background: var(--linie); }
.z.frei .bart-teller { fill: var(--leise); opacity: .5; }
.t { flex: 1; min-width: 0; }
.tg { font-size: 12.5px; font-weight: 700; color: var(--rot); }
.nm { font-family: "Young Serif", serif; font-size: 17.5px; line-height: 1.2; margin-top: 1px; overflow-wrap: anywhere; }
.nm.leise { font-family: "Bricolage", sans-serif; font-size: 15px; }
.mt, .leise { color: var(--leise); }
.mt { font-size: 13px; margin-top: 2px; font-weight: 500; }
.ak, .mehr { border: 0; background: transparent; color: var(--rot); cursor: pointer; display: flex; align-items: center; justify-content: center; font: inherit; }
.ak { width: 38px; height: 38px; }
.ak svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mehr { color: var(--leise); font-size: 22px; font-weight: 800; width: 30px; height: 38px; }
button:disabled { opacity: .45; cursor: default; }
.platz { margin: 0 0 6px 78px; padding: 8px 0 8px 12px; border-left: 2px solid var(--linie); display: flex; flex-direction: column; gap: 6px; }
.platz .frage { font-size: 14px; font-weight: 600; }
.pk { text-align: left; border: 1.5px solid var(--text); background: transparent; color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; display: block; }
.pk.vorschlag { font-family: "Young Serif", serif; font-weight: 400; }
.pk.leise-knopf { border-color: var(--linie); color: var(--leise); }
.fuss { position: sticky; bottom: 0; background: var(--grund); padding: 10px 0 4px; margin-top: 6px; }
.fuss .los { margin-top: 0; }
.meld { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.meld.sperre { color: var(--fehler); }
.hinweis { font-size: 13px; margin-top: 6px; }
.ohne { padding: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.ohne .gross { font-family: "Young Serif", serif; font-size: 24px; line-height: 1.2; }
button.los { width: 100%; height: 50px; border: 0; border-radius: 99px; background: var(--knopf); color: var(--knopftext); font-family: "Young Serif", serif; font-size: 17px; cursor: pointer; }

/* Kopf für Rezept (Entwurf seite-kochbuch): Zurück-Zeile statt Wortmarke, kleinere Überschrift */
.zurueck { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.zurueck a { color: #fff; text-decoration: none; }
.zurueck svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.kopf.klein { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 16px; }
.kopf.klein h1 { font-size: 30px; margin-top: 12px; overflow-wrap: anywhere; }
.sub .rechts { font-weight: 600; }

/* Kochbuch: Suche, Reiter, Zeilen mit Teller und Herz */
.such { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--text); padding: 6px 0 7px; color: var(--leise); }
.such svg { width: 19px; height: 19px; fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.such input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.such input::placeholder { color: var(--leise); }
.such:focus-within { border-bottom-color: var(--rot); }
.reiter { display: flex; gap: 18px; margin: 12px 0 6px; font-size: 14px; font-weight: 600; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { border: 0; background: transparent; color: var(--leise); font: inherit; font-weight: 600; padding: 6px 0 4px; cursor: pointer; white-space: nowrap; border-bottom: 2.5px solid transparent; }
.reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--rot); }
.z.kb { padding: 7px 0; gap: 10px; }
.zl { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; text-decoration: none; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.z.kb .teller { width: 54px; height: 54px; box-shadow: 0 0 0 1px var(--randlinie), inset 0 0 0 6px var(--rand), inset 0 0 0 7px var(--randlinie); }
.z.kb .teller i { width: 36px; height: 36px; } .z.kb .bart-teller { width: 25px; height: 8px; }
.z.kb .nm { font-size: 16.5px; }
.teller.foto i { width: calc(100% - 16px); height: calc(100% - 16px); overflow: hidden; background: var(--linie); }
.z.kb .teller.foto i { width: 40px; height: 40px; }
.teller.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.herzknopf { border: 0; background: transparent; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.herz { width: 24px; height: 24px; fill: var(--rot); stroke: var(--rot); stroke-width: 2; }
.herz.leer { fill: none; stroke: var(--leise); }
.sterne { color: var(--rot); letter-spacing: 1px; font-size: 12px; white-space: nowrap; }
.stern { color: var(--sternleer); font: inherit; }
.stern.an { color: var(--rot); }
.sterne.klick { display: inline-flex; gap: 0; letter-spacing: 0; font-size: 26px; }
.sterne.klick .stern { border: 0; background: transparent; cursor: pointer; padding: 2px 5px; line-height: 1; }
.meld.wahl { color: var(--text); }
.meld.wahl a { color: var(--rot); margin-left: 8px; }

/* Rezept (Entwurf seite-kochbuch): Kopf, Kennzeichnung, Personenzahl, Zutaten, Schritte */
.warnbalken { position: sticky; top: 0; z-index: 3; margin: 0 -20px 12px; padding: 10px 20px; background: var(--warn); color: #fff; font-size: 14.5px; line-height: 1.35; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.warnbalken b { font-family: "Young Serif", serif; font-weight: 400; font-size: 20px; line-height: 1.1; flex: none; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-top: 1px; }
.inhalt.rz { padding-top: 0; }
.rzkopf { display: flex; align-items: center; gap: 16px; padding-top: 14px; }
.rzkopf .teller { width: 84px; height: 84px; box-shadow: 0 0 0 1px var(--randlinie), inset 0 0 0 9px var(--rand), inset 0 0 0 10px var(--randlinie); }
.rzkopf .teller i { width: 56px; height: 56px; } .rzkopf .bart-teller { width: 38px; height: 12px; }
.rzkopf .teller.foto i { width: 64px; height: 64px; }
.bew { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.kennz { margin: 14px 0 4px; border-left: 3px solid var(--rot); padding: 3px 0 3px 10px; font-size: 13.5px; line-height: 1.4; }
.kennz p + p { margin-top: 3px; }
.kennz b { font-weight: 700; }
.gang { display: flex; align-items: center; gap: 10px; font-family: "Young Serif", serif; font-size: 16px; color: var(--rot); margin: 18px 0 2px; }
.gang i { flex: 1; border-top: 1px solid var(--linie); }
.portion { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 2px; }
.portion .gang { margin: 0; }
.stepper { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.stepper button { width: 38px; height: 38px; border: 1.6px solid var(--text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 20px; font-weight: 500; background: transparent; color: var(--text); cursor: pointer; }
.stepper button:disabled { opacity: .35; }
.zt { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 15.5px; }
.zt .w { font-family: "Young Serif", serif; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.zt .m { color: var(--leise); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.schritt { display: flex; gap: 12px; margin-top: 12px; font-size: 15px; line-height: 1.4; }
.schritt b { font-family: "Young Serif", serif; font-weight: 400; color: var(--rot); font-size: 20px; line-height: 1; min-width: 16px; }
.rz .fuss { margin: 14px -20px -14px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); }

/* Kochmodus (Entwurf seite-kochmodus): je Schritt eine Seite, Vollbild */
.koch { display: flex; flex-direction: column; height: 100dvh; max-width: 640px; margin: 0 auto; background: var(--grund); color: var(--text); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.kmkopf { padding: calc(16px + env(safe-area-inset-top)) 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: "Young Serif", serif; font-size: 16px; }
.kmkopf span { min-width: 0; overflow-wrap: anywhere; }
.kmkopf a { font-family: "Bricolage", sans-serif; font-size: 24px; color: var(--leise); text-decoration: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.fort { display: flex; gap: 5px; padding: 12px 20px 0; }
.fort i { flex: 1; height: 5px; border-radius: 3px; background: var(--linie); }
.fort i.ja { background: var(--rot); }
.koch .warnbalken { position: static; margin: 12px 20px 0; border-radius: 6px; padding: 9px 12px; font-size: 13.5px; }
.weck { margin: 12px 20px 0; background: var(--band); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: 6px; font-weight: 700; font-size: 14px; border: 0; font-family: inherit; width: calc(100% - 40px); text-align: left; cursor: default; }
.weck b { font-family: "Young Serif", serif; font-weight: 400; font-size: 20px; }
.weck.aus { background: var(--text); color: var(--grund); cursor: pointer; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.kmseite { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.snr { font-family: "Young Serif", serif; padding: 18px 20px 0; display: flex; align-items: baseline; gap: 8px; font-size: 18px; color: var(--leise); }
.snr b { font-size: 64px; font-weight: 400; line-height: 1; color: var(--rot); }
.stext { font-size: 23px; line-height: 1.35; padding: 10px 20px 0; font-weight: 500; overflow-wrap: anywhere; }
.smenge { margin: 18px 20px 0; border-top: 1px solid var(--linie); }
.smenge div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 16px; }
.smenge span:first-child { font-family: "Young Serif", serif; overflow-wrap: anywhere; }
.smenge span:last-child { color: var(--leise); font-weight: 600; white-space: nowrap; }
.wknopf { margin: 18px 20px 0; border: 2px solid var(--rot); background: transparent; color: var(--rot); min-height: 52px; border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: "Young Serif", serif; font-size: 18px; cursor: pointer; width: calc(100% - 40px); }
.wknopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.blaettern { display: flex; gap: 10px; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); }
.blaettern button { height: 64px; display: flex; align-items: center; justify-content: center; font-family: "Young Serif", serif; font-size: 19px; border-radius: 14px; cursor: pointer; }
.blaettern .zu { flex: 1; border: 1.5px solid var(--randlinie); background: transparent; color: var(--leise); }
.blaettern .wei { flex: 2; border: 0; background: var(--knopf); color: var(--knopftext); }
.blaettern button:disabled { opacity: .35; cursor: default; }
.ende { text-align: center; padding: 50px 26px 0; display: flex; flex-direction: column; align-items: center; }
.ende .teller { width: 110px; height: 110px; box-shadow: 0 0 0 1px var(--randlinie), inset 0 0 0 11px var(--rand), inset 0 0 0 12px var(--randlinie); }
.ende .teller i { width: 74px; height: 74px; } .ende .bart-teller { width: 50px; height: 16px; }
.ende .teller.foto i { width: 88px; height: 88px; }
.ende h2 { font-family: "Young Serif", serif; font-weight: 400; font-size: 34px; margin-top: 22px; }
.ende p { color: var(--leise); font-size: 15px; margin-top: 6px; }
.ende .sterne.klick { font-size: 44px; margin-top: 18px; }
.ende .sterne.klick .stern { padding: 2px 4px; }
.herzz { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--leise); border: 0; background: transparent; font-family: inherit; cursor: pointer; min-height: 44px; }
.spaeter { text-decoration: none; text-align: center; color: var(--leise); font-size: 14px; font-weight: 600; padding: 0 0 calc(22px + env(safe-area-inset-bottom)); border: 0; background: transparent; font-family: inherit; cursor: pointer; width: 100%; min-height: 40px; }
.ende-fuss { margin-top: auto; padding: 0 18px 8px; }
a.los { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 50px; margin-top: 0; border-radius: 99px; background: var(--knopf); color: var(--knopftext); font-family: "Young Serif", serif; font-size: 17px; }
.baender { display: flex; flex-direction: column; }

/* Einkaufszettel (entwuerfe/seite-kombi, Vorlage „liste“): Eintragsfeld, Gänge, Kästchen, Abgehaktes von Hand rot durchgestrichen */
.eintrag { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--text); padding: 8px 0 6px; margin: 0 0 2px; color: var(--leise); }
.eintrag:focus-within { border-bottom-color: var(--rot); }
.eintrag input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.eintrag input::placeholder { color: var(--leise); }
.eintrag button { border: 0; background: transparent; color: var(--rot); width: 34px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eintrag button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.stand-meld { font-size: 13.5px; font-weight: 600; margin: 8px 0 0; color: var(--leise); }
.zettelbalken .warnbalken { margin-top: -14px; margin-bottom: 10px; }
.p { display: flex; align-items: center; gap: 12px; padding: 7px 0; width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.kasten { width: 21px; height: 21px; border: 1.8px solid var(--kasten); border-radius: 4px; flex: none; display: flex; align-items: center; justify-content: center; }
.kasten svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.p .w { font-family: "Young Serif", serif; font-size: 17px; position: relative; min-width: 0; overflow-wrap: anywhere; }
.p .m { margin-left: auto; font-size: 14px; color: var(--leise); font-weight: 500; white-space: nowrap; padding-left: 8px; }
.p.weg .kasten { background: var(--rot); border-color: var(--rot); }
.p.weg .w, .p.weg .m { color: var(--weg); }
.strich { position: absolute; left: -4px; right: -6px; top: 50%; height: 10px; width: calc(100% + 10px); transform: translateY(-40%); overflow: visible; }
.strich path { fill: none; stroke: var(--rot); stroke-width: 2.4; stroke-linecap: round; }
.p.gesperrt { cursor: default; }
.p.gesperrt:disabled { opacity: 1; }
.p.gesperrt .kasten { border-style: dashed; border-color: var(--warn); }
.p.gesperrt .w { color: var(--fehler); font-family: "Bricolage", sans-serif; font-weight: 700; font-size: 15px; }

/* Hinzufügen und Abgleich (entwuerfe/seite-rest, Vorlagen „hinzu“, „abgl“, „orig“). Gelb ist Warnfarbe des Entwurfs, in beiden Modi gleich. */
.hz-lab { font-size: 12.5px; font-weight: 700; color: var(--rot); margin: 4px 0 0; }
.hz-link { margin: 6px 0 0; border: 1.5px solid var(--text); border-radius: 8px; display: flex; align-items: center; height: 50px; overflow: hidden; background: var(--grund); }
.hz-link input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; padding: 0 0 0 12px; }
.hz-link:focus-within { border-color: var(--rot); }
.hz-link button { border: 0; background: var(--knopf); color: var(--knopftext); height: 100%; padding: 0 16px; font-family: "Young Serif", serif; font-size: 16px; cursor: pointer; margin-left: 10px; }
.hz-kacheln { display: flex; gap: 12px; margin: 16px 0 0; }
.hz-kachel { flex: 1; height: 150px; border: 1.5px solid var(--randlinie); background: var(--rand); color: var(--text); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font: inherit; position: relative; }
.hz-kachel svg { width: 38px; height: 38px; fill: none; stroke: var(--rot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hz-kachel b { font-family: "Young Serif", serif; font-weight: 400; font-size: 19px; }
.hz-kachel small { font-size: 12px; color: var(--leise); text-align: center; padding: 0 8px; line-height: 1.3; }
.hz-kachel input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hz-kachel:disabled { opacity: .5; cursor: default; }
.hz-zaehler { margin: 14px 0 0; font-size: 13px; color: var(--leise); text-align: center; }
.hz-tipp { margin: 22px 0 0; border-left: 3px solid var(--randlinie); padding: 2px 0 2px 10px; font-size: 13px; color: var(--leise); line-height: 1.4; }
.hz-meld { margin: 14px 0 0; border-left: 3px solid var(--rot); padding: 2px 0 2px 10px; font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.hz-erz { margin: 14px 0 0; }
.hz-erz textarea { width: 100%; min-height: 170px; border: 1.5px solid var(--text); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; font-size: 15px; padding: 10px 12px; resize: vertical; outline: 0; }
.hz-erz textarea:focus { border-color: var(--rot); }
.hz-erz small { display: block; font-size: 12.5px; color: var(--leise); margin: 6px 0 0; line-height: 1.35; }
.hz-erz .los { margin-top: 10px; }
.hz-geteilt { margin: 14px 0 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13.5px; font-weight: 600; }
.hz-geteilt img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--randlinie); }
.hz-geteilt .los { width: auto; padding: 0 22px; height: 44px; margin: 0; }

.hz-umsch { display: flex; margin: 0 0 4px; border: 1.5px solid var(--text); border-radius: 8px; overflow: hidden; font-size: 14px; font-weight: 700; }
.hz-umsch button { flex: 1; text-align: center; padding: 8px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.hz-umsch button[aria-pressed="true"] { background: var(--text); color: var(--grund); }
.hz-rueck { margin: 12px 0 0; font-size: 13px; line-height: 1.35; border-left: 3px solid var(--rot); padding: 2px 0 2px 10px; }
.hz-hinweis { margin: 8px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--leise); }
.hz-af { margin: 12px 0 0; }
.hz-k { font-size: 11.5px; font-weight: 700; color: var(--leise); }
.hz-v { font-family: "Young Serif", serif; font-size: 17px; padding: 2px 0 6px; border-bottom: 1px solid var(--linie); width: 100%; display: block; background: transparent; border-top: 0; border-left: 0; border-right: 0; color: var(--text); outline: 0; border-radius: 0; overflow-wrap: anywhere; }
input.hz-v { border-bottom: 1.5px solid var(--text); }
input.hz-v:focus { border-bottom-color: var(--rot); }
input.hz-v::placeholder { color: var(--leise); font-family: "Bricolage", sans-serif; font-size: 15px; }
.hz-zr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; font-size: 15px; border-radius: 6px; width: calc(100% + 16px); border: 1.5px solid transparent; background: transparent; color: var(--text); font-family: inherit; text-align: left; }
.hz-zr .w { font-family: "Young Serif", serif; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hz-zr .m { font-weight: 600; color: var(--leise); white-space: nowrap; }
.hz-zr.s .w { font-family: "Bricolage", sans-serif; font-size: 15px; line-height: 1.35; }
.hz-zr.s { align-items: flex-start; }
.hz-zr.offen { background: #f9e7a6; border-color: #d9a521; cursor: pointer; color: #1f1b18; }
.hz-zr.offen .m { color: #1f1b18; }
.hz-zr .ok { font-size: 12px; font-weight: 700; color: #1f1b18; border: 1.5px solid #1f1b18; border-radius: 99px; padding: 1px 9px; flex: none; }
.hz-zr .aend { border: 0; background: transparent; color: var(--leise); width: 34px; height: 34px; flex: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: -4px -6px -4px 0; }
.hz-zr.offen .aend { color: #1f1b18; }
.hz-edit { margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.hz-edit textarea, .hz-edit input { width: 100%; border: 1.5px solid var(--rot); border-radius: 8px; background: var(--grund); color: var(--text); font: inherit; font-size: 15px; padding: 8px 10px; outline: 0; }
.hz-edit .knoepfe { display: flex; gap: 8px; }
.hz-edit .knoepfe button { flex: 1; height: 40px; border-radius: 99px; border: 1.5px solid var(--randlinie); background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.hz-edit .knoepfe button.ja { background: var(--knopf); color: var(--knopftext); border-color: var(--knopf); }
.hz-text { margin: 14px 0 0; border-radius: 6px; background: #efe6d6; color: #3a3226; border: 1px solid var(--randlinie); padding: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hz-text mark { background: rgba(249, 231, 166, .9); border: 1.5px solid #d9a521; border-radius: 4px; color: inherit; padding: 0 2px; }
.hz-bilder { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.hz-bilder img { width: 100%; border-radius: 6px; border: 1px solid var(--randlinie); display: block; background: #efe6d6; }
.hz-bildhinweis { margin: 10px 0 0; font-size: 13px; color: var(--leise); text-align: center; }
.hz-fuss small { display: block; text-align: center; font-size: 12.5px; color: var(--leise); margin-top: 6px; }
.los.aus, .los.aus:disabled { background: var(--linie); color: var(--leise); opacity: 1; }
.hz-abg[data-ansicht="entwurf"] .hz-original, .hz-abg[data-ansicht="original"] .hz-entwurf { display: none; }
@media (min-width: 900px) {
  .rahmen.breit { max-width: 1060px; }
  .hz-umsch { display: none; }
  .hz-abg .hz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
  .hz-abg[data-ansicht] .hz-original, .hz-abg[data-ansicht] .hz-entwurf { display: block; }
  .hz-text, .hz-bilder { margin-top: 0; }
}