/* Meine Seite: Papierton und Rot der Röstereiseite, Jost und Source Sans 3, kleine Rundungen. Am Handy zuerst. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/jost-300-600.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('fonts/source-sans-3-300-600.woff2') format('woff2'); }

:root {
  --grund: #1e1511;
  --papier: #f3e8d6;
  --papier-tief: #e9dcc5;
  --feld: #fbf6ec;
  --tinte: #2b1d14;
  --tinte-weich: #6a5240;
  --linie: rgba(43, 29, 20, .22);
  --hell: #f1e5d2;
  --hell-weich: #cdb89e;
  --rot: #b2301f;
  --rot-tief: #8f2314;
  --gruen: #3f6232;
  --jost: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --sans: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.55 var(--sans); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
a { color: var(--rot-tief); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; border-radius: 2px; }
h1, h2, legend { font-family: var(--jost); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: .6rem 0 .5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .7rem; }
p { margin: 0 0 .8em; }
img { max-width: 100%; display: block; }
pre { white-space: pre-wrap; font: inherit; margin: 0; }
.klein { display: block; font-size: .92rem; color: var(--tinte-weich); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprungmarke { position: absolute; left: -999px; top: 8px; background: var(--papier); padding: .5em 1em; z-index: 5; }
.sprungmarke:focus { left: 8px; }

/* Kopf */
.kopf { background: var(--grund); color: var(--hell); }
.kopf a { color: var(--hell); }
.kopf-innen { max-width: 1080px; margin: 0 auto; padding: .7rem 16px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.marke { font-family: var(--jost); font-size: 1.1rem; text-decoration: none; margin-right: auto; }
.marke-zusatz { display: block; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--hell-weich); }
.kopf-rechts { display: flex; align-items: center; gap: .7rem; }
.kopf-rechts form { margin: 0; }
.kopf .knopf.zart { background: transparent; border-color: var(--hell-weich); color: var(--hell); min-height: 40px; padding: .3rem .7rem; font-size: .95rem; }
.verweis { background: none; border: 0; padding: .4rem 0; min-height: 40px; font: inherit; font-size: .95rem; color: var(--hell-weich); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .98rem; }
.nav a { padding: .35rem 0; text-decoration: none; color: var(--hell-weich); border-bottom: 2px solid transparent; }
.nav a[aria-current="page"] { color: var(--hell); border-bottom-color: var(--rot); }
/* Am Handy führt die Übersicht mit ihren Kacheln, die lange Leiste wäre fünf Zeilen hoch. */
@media (max-width: 759px) { .nav a:not(:first-child) { display: none; } }

.hinweis-lokal { background: var(--papier-tief); text-align: center; font-size: .9rem; padding: .35rem 16px; }
.leiste { padding: .6rem 16px; font-size: 1rem; }
.leiste p { max-width: 1048px; margin: 0 auto; }
.leiste-laeuft { background: var(--papier-tief); }
.leiste-fertig { background: #dfe6cf; }
.leiste-warnung { background: #f1d9a8; }
.leiste-gescheitert { background: var(--rot); color: #fff; }

.haupt { max-width: 1080px; margin: 0 auto; padding: .6rem 16px 3rem; }
.fuss { border-top: 1px solid var(--linie); font-size: .9rem; color: var(--tinte-weich); }
.fuss-innen { max-width: 1080px; margin: 0 auto; padding: .8rem 16px; }
.einleitung { font-size: 1.08rem; max-width: 62ch; }
.zurueck { margin: .4rem 0 0; }
.zurueck a { display: inline-block; padding: .35rem 0; }
.abschnitt { margin-top: 1.5rem; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.kachel { display: flex; flex-direction: column; background: var(--feld); border: 1px solid var(--linie); border-radius: 3px; padding: .9rem 1rem; text-decoration: none; color: var(--tinte); }
.kachel:hover { border-color: var(--rot); }
.kachel h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.kachel-jetzt { flex: 1; }
.kachel-jetzt p:last-child { margin-bottom: .5rem; }
.kachel-los { color: var(--rot-tief); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Formulare */
.formular, .schmal { max-width: 640px; }
.feld { margin: 0 0 1.05rem; min-width: 0; }
label, legend { font-weight: 600; }
.feld label { display: block; margin-bottom: .2rem; }
.hilfe { font-size: .95rem; color: var(--tinte-weich); margin: 0 0 .35rem; }
.pflicht { font-weight: 400; font-size: .85rem; color: var(--tinte-weich); }
.fehler { color: var(--rot-tief); font-weight: 600; margin: .3rem 0 0; }
input, textarea, select { width: 100%; max-width: 100%; min-height: 48px; padding: .55rem .7rem; font: inherit; font-size: 1.0625rem; color: var(--tinte); background: var(--feld); border: 1px solid rgba(43, 29, 20, .5); border-radius: 2px; }
textarea { line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--rot); border-width: 2px; }
input[type="checkbox"], input[type="radio"] { width: 22px; min-height: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--rot); }
input[type="date"] { -webkit-appearance: none; appearance: none; }
.haken { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; padding: .6rem 0; min-height: 44px; cursor: pointer; }
.zwei { display: grid; gap: 0 .8rem; }
@media (min-width: 560px) { .zwei { grid-template-columns: 1fr 1fr; } }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .55rem 1.2rem; font: 500 1.0625rem var(--jost); background: var(--rot); color: #fff; border: 1px solid var(--rot); border-radius: 2px; text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--rot-tief); }
.knopf.zart { background: transparent; color: var(--tinte); border-color: rgba(43, 29, 20, .5); }
.knopf.zart:hover { background: var(--papier-tief); }
.knopf.klein { display: inline-flex; font-size: .95rem; color: var(--tinte); }
.knopf.gefahr-knopf { background: var(--tinte); border-color: var(--tinte); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.gefahr { color: var(--rot-tief); }
.abstand { margin-top: 2rem; }

/* Einträge in Listen: zugeklappt lesbar, aufgeklappt bearbeitbar */
.zeile { border: 1px solid var(--linie); border-radius: 3px; background: var(--feld); margin: 0 0 .5rem; padding: 0 .85rem; min-width: 0; }
.zeile.neu { padding: .85rem .85rem .2rem; }
.zeile summary { padding: .7rem 0; min-height: 44px; cursor: pointer; }
.zeile summary > span { font-weight: 400; }
.zeile-wann { font-weight: 600 !important; margin-right: .4rem; }
.zeile[open] { padding-bottom: .5rem; }
.zeile[open] summary { margin-bottom: .4rem; }
.zeile input:not([type="checkbox"]), .zeile textarea { background: #fff; }
.zeile.vorbei summary { color: var(--tinte-weich); }

.gruppe { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.gruppe legend { font-size: 1.3rem; padding: 0; margin-bottom: .4rem; }
.auswahl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.auswahl li { border-bottom: 1px solid var(--linie); }
.auswahl .fremd { background: #f1d9a8; padding: 0 .5rem; }
.auswahl .haken strong { font-weight: 600; display: block; }

.bildwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap: .6rem; }
.bildwahl label { position: relative; display: block; font-weight: 400; border: 1px solid var(--linie); border-radius: 3px; background: var(--feld); padding: .4rem; cursor: pointer; }
.bildwahl input { position: absolute; top: .7rem; left: .7rem; }
.bildwahl img { aspect-ratio: 7 / 3; object-fit: cover; width: 100%; border-radius: 2px; background: var(--papier-tief); }
.bildwahl label:has(input:checked) { border-color: var(--rot); outline: 2px solid var(--rot); outline-offset: -1px; }
.bildwahl .klein { margin-top: .25rem; }

.berichtliste { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 640px; }
.berichtliste li { border-bottom: 1px solid var(--linie); }
.berichtliste a { display: block; padding: .7rem 0; color: var(--tinte); text-decoration: none; }
.berichtliste a:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.berichtliste strong { font-weight: 600; }

/* Meldungen */
.meldung { background: var(--papier-tief); border-left: 3px solid var(--tinte-weich); border-radius: 2px; padding: .65rem .9rem; margin: .7rem 0 1rem; max-width: 640px; }
.meldung p:last-child { margin-bottom: 0; }
.meldung.ok { background: #dfe6cf; border-left-color: var(--gruen); }
.meldung.warnung { background: #f1d9a8; border-left-color: var(--rot); }
.jetzt { border: 1px solid var(--linie); border-radius: 3px; padding: .6rem .9rem; margin: 0 0 1rem; max-width: 640px; }
.jetzt summary { font-weight: 600; cursor: pointer; }

/* Verlauf */
.verlauf { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.verlauf li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.verlauf .klein { margin: .1rem 0 0; }
.marke-jetzt { color: var(--gruen); }

/* Postausgang im Probebetrieb */
.karte { background: var(--feld); border: 1px solid var(--linie); border-radius: 3px; padding: .8rem 1rem; margin-bottom: .8rem; }
.karte h2 { margin: .2rem 0 .4rem; font-size: 1.1rem; }