/* Brainbox – „Ruhiges Papier“
   Papierweiß, Tinte, ein Siegelrot für Dringendes. Serif für Überschriften (Newsreader),
   Grotesk für Text (Hanken Grotesk). Dokumente erscheinen als Blätter. */

@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/static/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --papier: #f6f2ea;
  --blatt: #fffdf8;
  --blatt-2: #fbf7ef;
  --tinte: #1f1b16;
  --tinte-2: #5e564b;
  --tinte-3: #8a8174;
  --linie: #e4dccd;
  --linie-2: #d6ccba;
  --siegel: #a8432a;          /* überfällig, dringend */
  --siegel-hell: #f3e3dc;
  --ocker: #9a7426;           /* bald fällig */
  --b-pascal: #2f4a6d;
  --b-fabian: #4f6b3a;
  --b-gemeinsam: #9a7426;
  --b-eingang: #8a8174;
  --schatten: 0 1px 0 rgb(60 40 10 / .04), 0 10px 28px -16px rgb(60 40 10 / .28);
  --schatten-hoch: 0 1px 0 rgb(60 40 10 / .05), 0 24px 60px -24px rgb(60 40 10 / .38);
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --r: 6px;
  --rand: clamp(16px, 4vw, 40px);
  --leiste: 68px;
  --kurve: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1b1916; --blatt: #23201c; --blatt-2: #2a2621;
    --tinte: #ede6d9; --tinte-2: #b9b0a2; --tinte-3: #8c8476;
    --linie: #36312a; --linie-2: #443d34;
    --siegel: #e07a5f; --siegel-hell: #3a2620; --ocker: #d4a64a;
    --b-pascal: #8fb0d8; --b-fabian: #a3c286; --b-gemeinsam: #d4a64a; --b-eingang: #8c8476;
    --schatten: 0 1px 0 rgb(0 0 0 / .3), 0 10px 28px -16px rgb(0 0 0 / .6);
    --schatten-hoch: 0 24px 60px -24px rgb(0 0 0 / .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 16px/1.55 var(--sans); font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
.noscript { padding: 2rem; }

/* Typografie */
.wortmarke { font: 500 1.35rem/1 var(--serif); letter-spacing: -.01em; font-variation-settings: "opsz" 36; }
.titel-gross { font: 400 clamp(2.4rem, 7vw, 3.6rem)/1.02 var(--serif); letter-spacing: -.025em; font-variation-settings: "opsz" 72; }
.titel-gross em { font-style: italic; color: var(--tinte-2); }
.titel-mittel { font: 400 1.6rem/1.15 var(--serif); letter-spacing: -.015em; font-variation-settings: "opsz" 48; }
.titel-klein { font: 500 1.15rem/1.25 var(--serif); letter-spacing: -.01em; }
.abschnitt { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-3); }
.leise { color: var(--tinte-2); }
.klein { font-size: .86rem; }
.mono { font: 500 .82rem/1.3 var(--mono); letter-spacing: -.01em; }
.fehler { color: var(--siegel); min-height: 1.4em; margin-top: .8rem; font-size: .95rem; }
.zahl { font-variant-numeric: tabular-nums; }

/* Knöpfe und Felder */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.3rem; border-radius: 999px; font-weight: 600; letter-spacing: .01em;
  transition: transform .15s var(--kurve), background-color .2s, box-shadow .2s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.knopf:active { transform: scale(.97); }
.knopf-tinte { background: var(--tinte); color: var(--papier); }
.knopf-tinte:hover { box-shadow: 0 6px 18px -8px rgb(31 27 22 / .55); }
.knopf-papier { background: var(--blatt); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-2); }
.knopf-papier:hover { background: var(--blatt-2); }
.knopf[disabled] { opacity: .45; pointer-events: none; }
.knopf-text { color: var(--tinte-2); font-weight: 500; padding: .5rem .2rem; text-decoration: underline;
  text-decoration-color: var(--linie-2); text-underline-offset: 4px; }
.knopf-text:hover { color: var(--tinte); text-decoration-color: currentColor; }
.feld { display: grid; gap: .35rem; }
.feld span { font-size: .82rem; font-weight: 600; color: var(--tinte-2); letter-spacing: .02em; }
.feld input, .suchfeld {
  width: 100%; min-height: 50px; padding: .7rem .9rem; font: 400 1.05rem var(--sans); color: var(--tinte);
  background: var(--blatt); border: 1px solid var(--linie-2); border-radius: var(--r);
  transition: border-color .2s, box-shadow .2s;
}
.feld input:focus, .suchfeld:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgb(31 27 22 / .08); }

/* Blätter */
.blatt { background: var(--blatt); border-radius: var(--r); box-shadow: var(--schatten); }
.punkt { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--b-eingang); flex: none; }
.b-pascal { background: var(--b-pascal); } .b-fabian { background: var(--b-fabian); }
.b-gemeinsam { background: var(--b-gemeinsam); } .b-eingang { background: var(--b-eingang); }
.chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--tinte-2); white-space: nowrap; }
.chip-pruefen { color: var(--siegel); }
.az { display: inline-block; padding: .18rem .45rem; border-radius: 4px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }

/* Anmeldung */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: var(--rand); }
.anmelde-blatt { width: min(420px, 100%); padding: clamp(28px, 6vw, 44px); box-shadow: var(--schatten-hoch); }
.anmelde-blatt .wortmarke { color: var(--tinte-3); font-size: 1rem; margin-bottom: 2.2rem; }
.schritt { display: grid; gap: 1.1rem; }
.schritt .titel-gross { margin-bottom: .6rem; }
.qr { display: grid; place-items: center; padding: .6rem; margin: .4rem 0; background: var(--blatt); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--linie); }
.qr svg { width: min(220px, 70vw); height: auto; }
#schluessel { display: inline-block; margin-top: .3rem; word-break: break-all; }

/* Gerüst */
.app { min-height: 100dvh; padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom) + 12px); }
.kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top)) var(--rand) 10px;
  background: color-mix(in srgb, var(--papier) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.bereiche { display: flex; gap: 2px; padding: 3px; margin-left: auto; background: var(--blatt-2); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--linie); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.bereiche::-webkit-scrollbar { display: none; }
.bereiche button { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px;
  font-size: .86rem; font-weight: 600; color: var(--tinte-2); white-space: nowrap; transition: background-color .2s, color .2s; }
.bereiche button[aria-checked="true"] { background: var(--blatt); color: var(--tinte); box-shadow: var(--schatten); }
.abmelden { font-size: .86rem; }
@media (max-width: 899px) {
  /* Handy: oben Wortmarke + Abmelden, darunter der Bereich-Umschalter über die volle Breite */
  .kopf { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; }
  .kopf .bereiche { grid-column: 1 / -1; grid-row: 2; margin-left: 0; justify-self: stretch; }
  .kopf .bereiche button { flex: 1 0 auto; justify-content: center; padding: .42rem .65rem; }
}

.leiste {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; height: calc(var(--leiste) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--blatt) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--linie);
}
.leiste a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 0; font-size: .72rem; font-weight: 600;
  color: var(--tinte-3); transition: color .2s; -webkit-tap-highlight-color: transparent; }
.leiste a[aria-current="page"] { color: var(--tinte); }
.leiste svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hochladen-knopf { justify-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--tinte); color: var(--papier); box-shadow: 0 10px 24px -10px rgb(31 27 22 / .6); transition: transform .15s var(--kurve); }
.hochladen-knopf:active { transform: scale(.94); }
.hochladen-knopf svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zaehler { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--siegel); color: #fff; font-size: .68rem; line-height: 18px; text-align: center; }

.inhalt { width: min(1120px, 100%); margin: 0 auto; padding: clamp(20px, 5vw, 48px) var(--rand) 40px; outline: none; }
.einblenden > * { animation: auftauchen .45s var(--kurve) both; }
.einblenden > *:nth-child(2) { animation-delay: .05s; } .einblenden > *:nth-child(3) { animation-delay: .1s; }
.einblenden > *:nth-child(4) { animation-delay: .15s; } .einblenden > *:nth-child(n+5) { animation-delay: .2s; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 900px) {
  .app { padding-bottom: 0; padding-left: 96px; }
  .leiste { top: 0; right: auto; width: 96px; height: 100dvh; grid-template-columns: 1fr; grid-auto-rows: min-content;
    align-content: center; gap: 10px; border-top: 0; border-right: 1px solid var(--linie); padding: 0; }
  .leiste .hochladen-knopf { order: 9; margin-top: 18px; }
  .kopf { padding-top: 18px; }
}

/* Heute */
.gruss { display: grid; gap: .9rem; margin-bottom: clamp(32px, 6vw, 56px); }
.gruss .leise { font: italic 400 1.25rem/1.4 var(--serif); }
.bilanz { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .4rem; }
.bilanz span { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--tinte-2); }
.bilanz b { color: var(--tinte); font-weight: 600; }
.block { margin-bottom: clamp(36px, 6vw, 60px); }
.block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--linie); }

.fristen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
@media (max-width: 600px) {
  .fristen { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto;
    scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 18px; scrollbar-width: none; }
  .fristen::-webkit-scrollbar { display: none; }
  .fristen > * { scroll-snap-align: start; }
}
.frist { position: relative; display: grid; gap: .55rem; padding: 18px 18px 16px; min-height: 196px; text-align: left;
  transition: transform .25s var(--kurve), box-shadow .25s var(--kurve); }
.frist:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--schatten-hoch); }
.frist::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--papier) 50%, var(--linie) 50%); border-radius: 0 var(--r) 0 4px; }
.frist-datum { font: 400 2.5rem/1 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 72; }
.frist-datum small { font-size: 1rem; letter-spacing: 0; color: var(--tinte-2); margin-left: .25rem; }
.frist-rest { font-size: .84rem; font-weight: 600; color: var(--tinte-2); }
.frist.dringend .frist-rest, .frist.vorbei .frist-rest { color: var(--siegel); }
.frist.bald .frist-rest { color: var(--ocker); }
.frist.vorbei { background: var(--siegel-hell); }
.frist-titel { font: 500 1.05rem/1.3 var(--serif); }
.frist-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .6rem;
  border-top: 1px dashed var(--linie-2); font-size: .82rem; color: var(--tinte-2); }
.betrag { font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; }

/* Listen */
.liste { display: grid; }
.zeile { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 12px 8px; margin: 0 -8px;
  border-radius: var(--r); text-align: left; width: calc(100% + 16px); transition: background-color .15s; }
.zeile:hover { background: var(--blatt-2); }
.zeile + .zeile { border-top: 1px solid var(--linie); }
.zeile:hover, .zeile:hover + .zeile { border-top-color: transparent; }
.mini { width: 52px; height: 68px; border-radius: 3px; object-fit: cover; object-position: top; background: var(--blatt-2);
  box-shadow: 0 0 0 1px var(--linie), 0 4px 10px -6px rgb(60 40 10 / .35); }
.zeile-text { min-width: 0; display: grid; gap: 2px; }
.zeile-titel { font: 500 1.02rem/1.3 var(--serif); overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zeile-unter { font-size: .84rem; color: var(--tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-rechts { display: grid; justify-items: end; gap: 4px; font-size: .8rem; color: var(--tinte-3); }
.auszug { font-size: .84rem; color: var(--tinte-2); margin-top: 2px; }
.auszug { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.auszug mark { background: color-mix(in srgb, var(--ocker) 26%, transparent); color: var(--tinte); border-radius: 2px; }

.aufgaben { display: grid; gap: 2px; }
.aufgabe { display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 12px 0; text-align: left; border-bottom: 1px solid var(--linie); }
.aufgabe::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border: 1.5px solid var(--tinte-3); border-radius: 3px; }
.aufgabe p { font-size: .98rem; }
.aufgabe small { display: block; color: var(--tinte-3); font-size: .8rem; margin-top: 2px; }

.leer { padding: 28px 0; color: var(--tinte-2); font: italic 400 1.15rem/1.45 var(--serif); }

/* Suche */
.suche-kopf { display: grid; gap: 1rem; margin-bottom: 1.6rem; }
.suchfeld { font: 400 clamp(1.4rem, 4vw, 1.9rem) var(--serif); min-height: 64px; padding: .6rem 1rem; }
.mehr { margin-top: 1.4rem; }

/* Akten */
.akten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.akte { display: grid; gap: .35rem; padding: 16px 18px; text-align: left; transition: transform .2s var(--kurve), box-shadow .2s; }
.akte:hover { transform: translateY(-2px); box-shadow: var(--schatten-hoch); }
.akte .titel-klein { overflow-wrap: anywhere; }
.akte-unter { display: flex; justify-content: space-between; gap: .6rem; font-size: .82rem; color: var(--tinte-2); }
.akte-frist { color: var(--siegel); font-weight: 600; }
.zurueck { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.2rem; font-weight: 600; color: var(--tinte-2); }
.zeitleiste { position: relative; display: grid; gap: 0; padding-left: 22px; }
.zeitleiste::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--linie-2); }
.zeitleiste .zeile { position: relative; }
.zeitleiste .zeile::before { content: ""; position: absolute; left: -21px; top: 50%; width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--tinte-3); }

/* Prüfen */
.pruef-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pruef { display: grid; grid-template-columns: 76px 1fr; gap: 16px; padding: 16px; transition: opacity .3s, transform .3s var(--kurve); }
.pruef.weg { opacity: 0; transform: translateX(24px); }
.pruef > * { min-width: 0; }
.pruef .titel-klein, .dok-titel, .frist-titel { overflow-wrap: anywhere; }
.pruef .mini { width: 76px; height: 100px; }
.pruef-grund { font: italic 400 .95rem/1.4 var(--serif); color: var(--tinte-2); }
.pruef-wahl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pruef-wahl .knopf { min-height: 44px; padding: 0 .4rem; font-size: .86rem; }

/* Dialoge */
.dialog { width: min(720px, 100%); max-width: 100%; max-height: min(92dvh, 100%); margin: auto auto 0; padding: 0; border: 0; color: var(--tinte);
  background: var(--blatt); border-radius: 14px 14px 0 0; box-shadow: var(--schatten-hoch); overflow: auto; overscroll-behavior: contain; }
.dialog[open] { animation: hochschieben .35s var(--kurve); }
.dialog::backdrop { background: rgb(31 27 22 / .36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: blenden .3s; }
@keyframes hochschieben { from { transform: translateY(40px); opacity: 0; } }
@keyframes blenden { from { opacity: 0; } }
@media (min-width: 760px) { .dialog { margin: auto; border-radius: 12px; } }
.dialog-hochladen { padding: 22px var(--rand) calc(24px + env(safe-area-inset-bottom)); }
.dialog-hochladen > .leise { margin: .4rem 0 1.2rem; }
.dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hochladen-wahl { display: grid; gap: 10px; }
.hochlade-liste { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 8px; }
.hochlade-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: 10px 0; border-top: 1px solid var(--linie); font-size: .92rem; }
.hochlade-liste li span:last-child { color: var(--tinte-2); text-align: right; }
.hochlade-liste li.fertig span:last-child { color: var(--b-fabian); }
.hochlade-liste li.fehlgeschlagen span:last-child { color: var(--siegel); }

.dok { display: grid; gap: 0; }
.dok-kopf { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 14px var(--rand); background: color-mix(in srgb, var(--blatt) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie); }
.dok-rumpf { display: grid; gap: 22px; padding: 22px var(--rand) calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .dok-rumpf { grid-template-columns: 200px 1fr; align-items: start; } }
.dok-bild { display: block; width: 100%; max-width: 260px; border-radius: 4px; box-shadow: 0 0 0 1px var(--linie), var(--schatten); background: var(--blatt-2); }
.dok-titel { font: 400 clamp(1.6rem, 4.5vw, 2.2rem)/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: .6rem; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 1rem 0 0; font-size: .95rem; }
.angaben dt { color: var(--tinte-3); font-size: .82rem; font-weight: 600; padding-top: 2px; }
.angaben dd { margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.zitat { margin: .9rem 0 0; padding: .7rem 1rem; border-left: 2px solid var(--siegel); background: var(--blatt-2);
  font: italic 400 1.02rem/1.45 var(--serif); color: var(--tinte); border-radius: 0 4px 4px 0; }
.zu-tun { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r); background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.zu-tun b { display: block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .2rem; }
.notizen { margin-top: 1.6rem; }
.notiz { padding: .9rem 0; border-top: 1px solid var(--linie); font-size: .93rem; white-space: pre-line; color: var(--tinte-2); }
.notiz small { display: block; color: var(--tinte-3); font-size: .78rem; margin-bottom: .2rem; }
.dok-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2rem; }
.umlegen { margin-top: 1.4rem; display: grid; gap: .6rem; }
.umlegen .bereiche { margin-left: 0; width: max-content; }
details.text summary { cursor: pointer; color: var(--tinte-2); font-weight: 600; font-size: .9rem; padding: .8rem 0; }
details.text pre { white-space: pre-wrap; font: .82rem/1.5 var(--mono); color: var(--tinte-2); max-height: 320px; overflow: auto;
  padding: .8rem; background: var(--blatt-2); border-radius: 4px; margin: 0; }

.lade { height: 3px; width: 100%; position: fixed; top: 0; left: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.lade::after { content: ""; position: absolute; inset: 0; width: 30%; background: var(--tinte); animation: laden 1s var(--kurve) infinite; }
@keyframes laden { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
.skelett { height: 196px; border-radius: var(--r); background: linear-gradient(100deg, var(--blatt) 40%, var(--blatt-2) 50%, var(--blatt) 60%) 0 0 / 300% 100%;
  animation: glanz 1.4s linear infinite; box-shadow: var(--schatten); }
@keyframes glanz { to { background-position: -150% 0; } }
.hinweis { position: fixed; left: 50%; bottom: calc(var(--leiste) + 20px + env(safe-area-inset-bottom)); z-index: 60;
  transform: translateX(-50%); padding: .7rem 1.1rem; border-radius: 999px; background: var(--tinte); color: var(--papier);
  font-size: .9rem; font-weight: 600; box-shadow: var(--schatten-hoch); animation: auftauchen .3s var(--kurve); white-space: nowrap; }
@media (min-width: 900px) { .hinweis { bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}