/* Werkstatt-Oberfläche (für Ludwig und Kunden) im Look von ludwigtiemann.de: Erdtöne, Fraunces, Moos. Ohne Abhängigkeiten. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.eb2486760f75.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic.701ae03b5183.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight.989fe0a65c6d.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --boden: #0d0b08; --flaeche: #17140f; --linie: rgb(236 226 206 / 0.12); --text: #ede6d6; --leise: #b7ad97; --dezent: #958a74;
  --akzent: #a7c86f; --akzent-leise: rgb(167 200 111 / 0.14); --fehler: #f0a08a;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(60rem 30rem at 85% -10%, rgb(167 200 111 / 0.07), transparent 70%), var(--boden); color: var(--text); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--akzent) 60%, transparent); text-underline-offset: .2em; }
h1, h2 { font-family: var(--serif); font-weight: 420; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 .75rem; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.4rem; }
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; padding: calc(1.2rem + env(safe-area-inset-top)) 1rem 1rem; border-bottom: 1px solid var(--linie); }
@media (min-width: 768px) { .kopf { padding-inline: 2rem; } }
.marke { display: inline-flex; align-items: baseline; gap: .6rem; font-family: var(--serif); font-size: 1.6rem; font-style: italic; text-decoration: none; }
.marke-zusatz { font-family: var(--sans); font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dezent); }
.punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 18px var(--akzent); align-self: center; }
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .9rem; }
.nav a, .nav button.leise { border-radius: 999px; padding: .45rem .9rem; color: var(--leise); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.nav a:hover, .nav button.leise:hover { background: rgb(236 226 206 / 0.06); color: var(--text); }
.haupt { flex: 1; width: 100%; max-width: 72rem; margin-inline: auto; padding: 2rem 1rem 3rem; }
@media (min-width: 768px) { .haupt { padding-inline: 2rem; } }
.fuss { padding: 1rem 2rem 2rem; font-size: .8rem; color: var(--dezent); text-align: center; }
.zeile { margin: 0 0 .6rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.einleitung { max-width: 40rem; color: var(--leise); font-size: 1.05rem; margin-bottom: 1.5rem; }
.reihe { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; align-items: center; }
.inline { display: inline; }
.knopf, button.knopf { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; background: var(--akzent); color: var(--boden); font: 600 .95rem var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.knopf-leise { background: rgb(236 226 206 / 0.05); color: var(--text); border-color: rgb(236 226 206 / 0.24); }
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.kachel { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--linie); border-radius: 1.25rem; padding: 1.4rem; background: linear-gradient(160deg, rgb(236 226 206 / 0.045), rgb(236 226 206 / 0.01)); color: var(--text); text-decoration: none; }
a.kachel:hover { border-color: rgb(167 200 111 / 0.35); }
.kachel.hervorgehoben { border-color: rgb(167 200 111 / 0.45); }
.kachel.hervorgehoben .kachel-wert { color: var(--akzent); }
.kachel-titel { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dezent); }
.kachel-wert { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.kachel-text { font-size: .875rem; color: var(--leise); }
.hinweis { margin-top: 2rem; font-size: .9rem; color: var(--leise); }
.meldungen { margin-bottom: 1.5rem; }
.meldung { border: 1px solid rgb(167 200 111 / 0.4); background: var(--akzent-leise); border-radius: 1rem; padding: .7rem 1rem; }
.meldung.error { border-color: rgb(240 160 138 / 0.5); background: rgb(240 160 138 / 0.12); }
.liste { display: grid; gap: .75rem; max-width: 48rem; }
.eintrag { border: 1px solid var(--linie); border-radius: 1.1rem; padding: 1rem 1.2rem; }
.eintrag.neu { border-left: 3px solid var(--akzent); }
.eintrag header { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; margin-bottom: .4rem; font-size: .9rem; }
.eintrag header time { margin-left: auto; color: var(--dezent); font-size: .8rem; }
.eintrag p { margin: 0; color: var(--leise); }
/* Formulare (allauth, Admin-fern) */
.konto { max-width: 26rem; }
label { display: block; font-size: .9rem; color: var(--leise); margin-bottom: .3rem; }
input, textarea, select { width: 100%; padding: .7rem .9rem; border-radius: .8rem; border: 1px solid rgb(236 226 206 / 0.2); background: rgb(13 11 8 / 0.6); color: var(--text); font: inherit; margin-bottom: 1rem; }
input:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-leise); }
input[type=checkbox] { width: auto; margin-right: .5rem; }
button:not(.leise):not(.knopf) { display: inline-flex; padding: .7rem 1.3rem; border-radius: 999px; background: var(--akzent); color: var(--boden); font: 600 .95rem var(--sans); border: 0; cursor: pointer; }
.errorlist { color: var(--fehler); list-style: none; padding: 0; margin: 0 0 .5rem; font-size: .9rem; }
.helptext { display: block; color: var(--dezent); font-size: .8rem; margin-top: -.6rem; margin-bottom: 1rem; }