/* Medien – gemeinsame Grundlage im Stil von Elenas Seite (Schifferstraße):
   Papier, harte schwarze Konturen, versetzte Schatten, leichte Schrägen.
   Schriften liegen auf unserem Server (fonts/, SIL Open Font License), nicht bei Google. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-full.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier: #f2e8d5;
  --papier-tief: #e7dcc4;
  --karte: #fffdf6;
  --tinte: #0e0e0e;
  --tinte-weich: #2b2621;
  --grau: #5f574c;
  --linie: rgba(14, 14, 14, .16);
  --fuchsia: #ff2e74;
  --ultramarin: #0a3fb0;
  --gelb: #ffcb05;
  --gruen: #0f6837;
  --ocker: #8a5a00;
  /* Farben der Quellenarten */
  --branche: var(--ultramarin);
  --pressestelle: var(--gruen);
  --international: var(--ocker);
  --konkurrenz: #c4124f;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}
a { color: inherit; }

/* Laufband mit dem Stand */
.band {
  background: var(--gelb);
  border-bottom: 3px solid var(--tinte);
  overflow: hidden;
  white-space: nowrap;
  padding: .4rem 0;
}
.band div { display: inline-block; animation: lauf 60s linear infinite; }
.band span {
  padding: 0 1.4rem;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.band span::after { content: "✦"; margin-left: 2.8rem; color: var(--tinte); }
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band div { animation: none; } }

/* Marke */
.marke-gross {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .9;
  text-decoration: none;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* Reiter als Kästen mit Kontur */
.reiter a {
  display: inline-block;
  border: 2px solid var(--tinte);
  background: var(--karte);
  box-shadow: 3px 3px 0 var(--tinte);
  padding: .35rem .8rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.reiter a:hover { background: var(--gelb); }
/* Reiter: lange Namen, am Telefon Kurzformen (News, Kollegen) */
.reiter .kurz { display: none; }
.reiter a[aria-current="page"] { background: var(--tinte); color: var(--papier); box-shadow: 3px 3px 0 var(--fuchsia); }
/* Sammlung ist kein Nachrichtenstrom, sondern die eigene Ablage: dauerhaft gelb und von den anderen Reitern abgesetzt */
.reiter a.reiter-sammlung:not([aria-current="page"]) { background: var(--gelb); }
.reiter a.reiter-sammlung:not([aria-current="page"]):hover { box-shadow: 3px 3px 0 var(--fuchsia); }
.reiter a.reiter-sammlung:not([aria-current="page"]) .sammlung-zahl { background: var(--karte); }

.tage-nav a { text-decoration: none; }
.tage-nav a span { color: var(--grau); font-weight: 400; }
.stand { color: var(--grau); font-size: .78rem; margin: 0; line-height: 1.6; }
.stand a { color: var(--tinte); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.stand a[aria-current="page"] { text-decoration-color: var(--fuchsia); text-decoration-thickness: 2px; }
.stand a.fehlerzahl { color: var(--konkurrenz); }
.ansicht-titel {
  font-family: var(--serif); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 1.2rem 0 0;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.fuss a { color: inherit; font-weight: 700; }

/* Werkzeugleiste: Filter und Suche, bleibt beim Scrollen stehen */
.werkzeug {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--papier);
  border-bottom: 3px solid var(--tinte);
  padding: .75rem 0 .7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; flex: 1 1 auto; }
.chip {
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .6rem;
  border: 2px solid var(--tinte);
  border-radius: 0;
  background: var(--karte);
  color: var(--tinte);
  box-shadow: 2px 2px 0 var(--tinte);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: var(--papier-tief); }
.chip[aria-pressed="true"] { background: var(--gelb); }
.chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tinte); }
.chip-zahl { font-weight: 400; opacity: .7; }
.suche-zeile { display: flex; align-items: center; gap: .7rem; flex: 0 1 18rem; min-width: 12rem; }
#suche {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px; /* unter 16 px zoomt Safari auf dem iPhone beim Antippen heran */
  padding: .4rem .65rem;
  border: 2px solid var(--tinte);
  border-radius: 0;
  background: var(--karte);
  color: var(--tinte);
}
#suche:focus { outline: none; box-shadow: 3px 3px 0 var(--gelb); }
.zaehler { color: var(--grau); font-size: .74rem; white-space: nowrap; }

/* Tage */
.tag h2 {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 2rem 0 .3rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tag h2::after { content: none; }
.tag h2 + .liste { border-top: 3px solid var(--tinte); }
.tag-zahl { font-weight: 400; color: var(--grau); letter-spacing: .05em; }
.liste { list-style: none; margin: 0; padding: 0; }

/* Meldungen */
.m { padding: .85rem 0 .9rem; border-bottom: 1px solid var(--linie); position: relative; }
.m.neu::before {
  content: "";
  position: absolute;
  left: -.9rem;
  top: 1.1rem;
  width: .45rem;
  height: .45rem;
  background: var(--fuchsia);
}
.m-kopf {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
  display: flex;
  flex-wrap: nowrap;
  gap: .1rem .6rem;
  align-items: center;
  min-width: 0;
}
.m-kopf > * { flex: none; }
.m-zeit { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* Gesamtansicht: Kategorie als Label, führt in die Kategorie; am Telefon die Kurzform */
.m-kategorie {
  font-size: .58rem; letter-spacing: .1em; color: var(--tinte); text-decoration: none; white-space: nowrap;
  border: 1.5px solid var(--tinte); background: var(--karte); padding: .02rem .3rem;
}
.m-kategorie:hover { background: var(--gelb); }
.m-kategorie .kurz { display: none; }
@media (max-width: 44rem) {
  .m-kategorie .lang { display: none; }
  .m-kategorie .kurz { display: inline; }
}
/* Bündel: mehrere Texte zu einem Anlass in einer Kachel, die übrigen zum Aufklappen */
.buendel { border-bottom: 1px solid var(--linie); padding-bottom: .6rem; }
.buendel .m { border-bottom: 0; }
.m-fuehrung { padding-bottom: .4rem; }
.b-weitere summary {
  display: inline-block; cursor: pointer; list-style: none; font-size: .76rem; font-weight: 700; color: var(--ultramarin);
  padding: .28rem .65rem; background: var(--karte); border: 1px solid var(--linie);
}
.b-weitere summary::-webkit-details-marker { display: none; }
.b-weitere summary::before { content: "▸ "; }
.b-weitere[open] summary::before { content: "▾ "; }
.b-weitere summary:hover { background: var(--gelb); color: var(--tinte); }
.b-liste { list-style: none; margin: .45rem 0 .2rem; padding: 0 0 0 .8rem; border-left: 2px solid var(--linie); }
.m-teil { padding: .45rem 0; }
.m-teil .m-titel { font-size: 1.02rem; }
/* Weitere Meldungen: lädt beim Scrollen von selbst, der Knopf ist der Rückfall */
.nachladen {
  display: block; margin: 1.6rem auto 0; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte); background: var(--karte); border: 2px solid var(--tinte); box-shadow: 3px 3px 0 var(--tinte); padding: .4rem .9rem; cursor: pointer;
}
.nachladen:hover { background: var(--gelb); }
.nachladen:disabled { cursor: default; color: var(--grau); background: var(--karte); }
/* Lange Quellennamen werden schmaler und laufen aus, statt die Zeile zu sprengen */
.m-kopf > .m-quelle { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.ausblenden {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent);
}
.art-branche { color: var(--branche); }
.art-pressestelle { color: var(--pressestelle); }
.art-international { color: var(--international); }
.art-konkurrenz { color: var(--konkurrenz); }
.m-eigen {
  font-size: .6rem;
  letter-spacing: .1em;
  border: 1.5px solid currentColor;
  padding: 0 .3rem;
  color: var(--tinte);
}
.m-titel {
  display: block;
  overflow-wrap: break-word;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration: none;
  margin: .25rem 0 .25rem;
  font-variation-settings: "SOFT" 40, "opsz" 36;
}
.m-titel:hover { text-decoration: underline; text-decoration-color: var(--fuchsia); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.m-titel:visited { color: var(--tinte-weich); opacity: .62; }
.m-anr {
  margin: 0;
  font-size: .88rem;
  color: var(--tinte-weich);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.m-anr.offen { -webkit-line-clamp: unset; display: block; }

/* Quellenauswahl: Gruppen mit Kästchen, rechts der Pfeil zu den einzelnen Quellen */
.auswahl { border-top: 3px solid var(--tinte); position: relative; }
.auswahl summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .6rem;
  padding: .65rem 0 .5rem;
}
.auswahl summary::-webkit-details-marker { display: none; }
.auswahl-titel { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ultramarin); }
.auswahl-titel::after {
  content: ""; display: inline-block; width: .38rem; height: .38rem; margin: 0 0 .12em .55rem;
  border-right: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transform: rotate(45deg);
}
.auswahl:not([open]) .auswahl-titel::after { transform: rotate(-45deg); margin-bottom: 0; }
/* Stand nur im zugeklappten Zustand, offen zeigen es die Kästchen */
.auswahl-stand { font-size: .72rem; color: var(--grau); }
.auswahl[open] .auswahl-stand { display: none; }
.auswahl.gefiltert .auswahl-stand { color: var(--konkurrenz); font-weight: 700; }
/* „alle“ oben rechts in der Kopfzeile */
.auswahl-knoepfe { position: absolute; top: .45rem; right: 0; display: flex; gap: .35rem; }
.auswahl-knoepfe button, .filter-hinweis button {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--tinte); background: var(--karte); padding: .15rem .45rem; cursor: pointer;
  box-shadow: 2px 2px 0 var(--tinte); color: var(--tinte);
}
.auswahl-knoepfe button:hover, .filter-hinweis button:hover { background: var(--gelb); }
.gruppen, .quellen-wahl { list-style: none; margin: 0; padding: 0; }
.gruppe { border-bottom: 1px solid var(--linie); }
.gruppe:first-child { border-top: 1px solid var(--linie); }
.zeile { display: flex; align-items: center; gap: .35rem; min-height: 2.1rem; }
/* Häkchen = ein- und ausblenden; Klick auf den Namen = nur diese Gruppe bzw. Quelle zeigen */
.zeile .haken { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: .3rem; margin: 0 -.2rem 0 -.3rem; cursor: pointer; }
.zeile .name {
  -webkit-appearance: none; appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; flex: 1; display: flex; align-items: center; gap: .45rem; cursor: pointer; min-width: 0; align-self: stretch;
}
.zeile .name span { overflow: hidden; white-space: nowrap; min-width: 0; }
.zeile .name:hover span, .zeile .name:focus-visible span {
  text-decoration: underline; text-decoration-color: var(--fuchsia); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.gruppe > .zeile .name { font-weight: 700; font-size: .88rem; }
.quellen-wahl .zeile { min-height: 1.85rem; }
.quellen-wahl .zeile .name { font-size: .82rem; }
.zeile input[type=checkbox] { accent-color: var(--tinte); width: 1rem; height: 1rem; margin: 0; flex: none; }
.zeile .zahl { font-size: .74rem; color: var(--grau); font-variant-numeric: tabular-nums; min-width: 1.8rem; text-align: right; }
.zeile .logo { margin-right: 0; }
/* Pfeil rechts: zeigt nach rechts, geöffnet nach unten */
.aufklappen {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; cursor: pointer; width: 1.8rem; height: 2rem; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tinte);
}
.aufklappen::before {
  content: ""; width: .5rem; height: .5rem; margin-left: -.25rem;
  border-right: 2.5px solid var(--tinte); border-bottom: 2.5px solid var(--tinte);
  transform: rotate(-45deg); transition: transform .15s ease, margin .15s ease;
}
.gruppe.offen .aufklappen::before { transform: rotate(45deg); margin: -.3rem 0 0; }
.aufklappen:hover::before { border-color: var(--fuchsia); }
/* Die Quellen einer Gruppe eine Stufe eingerückt, mit Linie unter dem Gruppenkästchen */
.quellen-wahl {
  display: none; margin: 0 0 .5rem .45rem; padding: .1rem 2.15rem .1rem 1rem;
  border-left: 2px solid rgba(14, 14, 14, .3);
}
.gruppe.offen .quellen-wahl { display: block; }
.gruppe.gedimmt > .zeile .name { color: var(--grau); font-weight: 500; }
/* „Von Stefan“: eine Zeile wie die anderen Gruppen, nur an Tagen mit neuem Eintrag in der Farbe seiner Notizen hinterlegt.
   Ohne Pfeil, daher rechts dessen Breite als Abstand, damit die Zahl in der Flucht steht. */
.gruppe.gruppe-stefan { margin: 0 -.4rem; padding: 0 calc(1.8rem + .4rem) 0 .4rem; }
.gruppe.gruppe-stefan.heute { background: #fff3b0; }
.gruppe.gruppe-stefan.heute.gedimmt { background: none; }
.filter-hinweis { margin: 0; font-size: .78rem; color: var(--konkurrenz); font-weight: 700; display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; }
.filter-hinweis[hidden] { display: none; }

/* Stern: leer als Umriss, gesammelt gelb mit schwarzer Kontur */
.stern {
  margin-left: auto;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  margin-top: -.45rem;
  margin-bottom: -.45rem;
  margin-right: -.4rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--grau);
  transition: transform .12s ease;
}
.stern:hover { -webkit-text-stroke-color: var(--tinte); transform: scale(1.12); }
.stern[aria-pressed="true"] { color: var(--gelb); -webkit-text-stroke: 1.5px var(--tinte); }
.stern:focus-visible { outline: 2px solid var(--ultramarin); outline-offset: 1px; }
.stern.fehlschlag { -webkit-text-stroke-color: var(--konkurrenz); animation: wackeln .3s ease 2; }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
.m.geht { opacity: 0; transition: opacity .25s ease; }
.sammlung-zahl {
  display: inline-block; min-width: 1.3em; margin-left: .35rem; padding: 0 .3rem; text-align: center;
  background: var(--gelb); color: var(--tinte); border: 1.5px solid var(--tinte); font-size: .7rem; letter-spacing: 0;
}
.sammlung-zahl:empty { display: none; }

/* Logos auf weißem Grund mit dünner Kontur */
.logo {
  display: inline-block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  background: #fff;
  outline: 1px solid var(--linie);
  margin-right: .4rem;
  flex: none;
}
.logo-leer { background: var(--papier-tief); }
.chip .logo { width: 14px; height: 14px; vertical-align: -2px; margin-right: .35rem; }

.einleitung, .hinweis { color: var(--tinte-weich); font-size: .92rem; margin: 1.2rem 0; }
.hinweis.fehler { color: var(--konkurrenz); font-weight: 700; }
.wochen { display: flex; justify-content: space-between; margin: 2rem 0 0; }
.wochen a {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--tinte); padding: .35rem .7rem; background: var(--karte); box-shadow: 3px 3px 0 var(--tinte);
}

/* Quellen */
.tabelle-rahmen { overflow-x: auto; border: 3px solid var(--tinte); background: var(--karte); box-shadow: 6px 6px 0 var(--ultramarin); }
.quellen { width: 100%; border-collapse: collapse; font-size: .86rem; }
.quellen th {
  text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 3px solid var(--tinte); padding: .6rem .6rem .45rem;
}
.quellen td { border-bottom: 1px solid var(--linie); padding: .5rem .6rem; vertical-align: top; }
.quellen .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.quellen tr.aus { opacity: .45; }
.quellen .art { font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.q-name .logo { vertical-align: -3px; }
.q-name .m-eigen { margin-left: .4rem; }
.q-name a { text-decoration: none; font-weight: 500; }
.q-name a:hover { text-decoration: underline; }
.weg { color: var(--grau); font-size: .78rem; }
.gut { color: var(--gruen); }
.mittel { color: var(--ocker); }
.schlecht { color: var(--konkurrenz); font-weight: 700; }

.fuss { color: var(--grau); font-size: .74rem; padding: 2rem 1.25rem 3rem; text-align: center; letter-spacing: .04em; }

/* Aufbau „Seitenleiste“ (Stefans Wahl, 07.11.2026): Marke, Ausgabe, Ansichten und Tage stehen links
   und bleiben stehen, rechts hat die Liste die ganze Höhe. Auf dem Telefon wird die Leiste zum schmalen Kopf. */
.rahmen { max-width: 86rem; margin: 0 auto; padding: 0 1.5rem; }

@media (min-width: 64rem) {
  .rahmen { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); gap: 0 3rem; }
  .kopf {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    padding: 2rem 1.75rem 2rem 0;
    border-right: 3px solid var(--tinte);
    min-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .marke-gross { font-size: 2.85rem; }
  .reiter { display: flex; flex-direction: column; gap: .55rem; }
  .reiter a { display: block; font-size: .78rem; padding: .5rem .8rem; }
  .reiter a.reiter-sammlung { margin-top: .9rem; }
  .tage-nav { display: flex; flex-direction: column; border-top: 3px solid var(--tinte); }
  .tage-titel {
    font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ultramarin); padding: .6rem 0 .3rem;
  }
  .tage-nav a {
    display: flex; justify-content: space-between; padding: .38rem 0; font-size: .86rem; font-weight: 500;
    border-bottom: 1px solid var(--linie);
  }
  .tage-nav a:hover { color: var(--fuchsia); }
  .stand { margin-top: auto; }
  .inhalt { max-width: 56rem; padding-top: .6rem; }
  .m-titel { font-size: 1.32rem; }
}

@media (max-width: 63.99rem) {
  .kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marke" "reiter";
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0 1rem;
  }
  .marke-gross { grid-area: marke; font-size: 2.6rem; }
  .reiter { grid-area: reiter; display: flex; gap: .45rem; flex-wrap: nowrap; }
  .reiter a { flex: 1 1 auto; text-align: center; }
  .reiter a.reiter-sammlung { margin-left: .6rem; }
  /* Fünf lange Reiternamen passen erst ab der Leiste am Rechner, darunter die Kurzformen */
  .reiter .lang { display: none; }
  .reiter .kurz { display: inline; }
  .kopf > * { min-width: 0; }
  .auswahl {
    grid-column: 1 / -1; border: 2px solid var(--tinte); background: var(--karte);
    box-shadow: 4px 4px 0 var(--tinte); padding: 0 .85rem .3rem;
  }
  .auswahl-knoepfe { right: .85rem; top: .5rem; }
  .zeile .haken { padding: .5rem; margin: 0 -.4rem 0 -.5rem; }
  .zeile { min-height: 2.5rem; }
  .quellen-wahl .zeile { min-height: 2.2rem; }
  .tage-nav, .stand { display: none; }
}
@media (max-width: 44rem) {
  .rahmen { padding: 0 1rem; }
  .marke-gross { font-size: 2.2rem; }
  .reiter { gap: .4rem; }
  .reiter a { padding: .38rem .35rem; font-size: .66rem; letter-spacing: .08em; }
  .reiter .sammlung-zahl { margin-left: .25rem; padding: 0 .2rem; }
  .reiter a.reiter-sammlung { margin-left: 0; }
  .reiter .sammlung-wort { display: none; } /* am Telefon nur Stern und Zahl, sonst passen die fünf Reiter nicht in eine Zeile */
  .reiter .lang { display: none; }
  .reiter .kurz { display: inline; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; margin-right: -1rem; scrollbar-width: none; }
  .suche-zeile { flex: 1 1 100%; }
  .m.neu::before { left: -.7rem; }
}

/* Anmeldung: Zettel mit Kontur, Schlagschatten und Schräge wie auf Elenas Seite */
body.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.kasten {
  width: 100%; max-width: 26rem; background: var(--karte); border: 3px solid var(--tinte);
  box-shadow: 10px 10px 0 var(--fuchsia); transform: rotate(-1deg); padding: 1.8rem;
}
.kasten .marke { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ultramarin); }
.kasten h1 {
  font-family: var(--serif); font-size: 2.6rem; font-weight: 800; letter-spacing: -.035em; line-height: .95;
  margin: .4rem 0 1.4rem; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.kasten form { display: flex; gap: .6rem; flex-wrap: wrap; }
.kasten input[type=password] {
  flex: 1 1 11rem; font: inherit; font-size: 1rem; font-weight: 500; padding: .65rem .85rem;
  border: 2px solid var(--tinte); border-radius: 0; background: var(--papier); color: var(--tinte);
}
.kasten input[type=password]:focus { outline: none; box-shadow: 3px 3px 0 var(--gelb); }
.kasten button {
  font: inherit; font-size: 1rem; font-weight: 700; padding: .65rem 1.3rem; border: 2px solid var(--tinte);
  border-radius: 0; background: var(--gelb); color: var(--tinte); cursor: pointer; box-shadow: 3px 3px 0 var(--tinte);
}
.kasten button:hover { background: var(--fuchsia); color: #fff; }
.kasten button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }
.kasten .fehler { font-size: .88rem; font-weight: 700; color: var(--konkurrenz); margin: .9rem 0 0; }

/* Ausgaben: Hochladen und Liste der hochgeladenen Ausgaben */
.hochladen { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.2rem 0 2rem; }
.datei-wahl {
  display: inline-flex; align-items: center; gap: .5rem; border: 2px solid var(--tinte); background: var(--karte);
  box-shadow: 3px 3px 0 var(--tinte); padding: .45rem .7rem; cursor: pointer; max-width: 100%;
}
.datei-wahl input { font: inherit; font-size: .85rem; max-width: 16rem; }
.datei-wahl span { display: none; }
.hochladen button {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; border: 2px solid var(--tinte); background: var(--gelb); color: var(--tinte);
  padding: .5rem 1rem; cursor: pointer; box-shadow: 3px 3px 0 var(--tinte);
}
.hochladen button:hover { background: var(--fuchsia); color: #fff; }
.meldung-gut { border-left: 4px solid var(--gruen); padding: .5rem .8rem; background: var(--karte); font-size: .92rem; }
.ausgaben { list-style: none; margin: 0; padding: 0; }
.ausgabe { border-top: 3px solid var(--tinte); padding: .8rem 0 1.2rem; }
.ausgabe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ausgabe-kopf strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.ausgabe-stand { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ausgabe-zeile { margin: .2rem 0 0; font-size: .82rem; color: var(--grau); }
.stuecke { margin: .6rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid rgba(14, 14, 14, .3); list-style: none; }
.stuecke li { font-size: .9rem; padding: .18rem 0; }
.stueck-ressort { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--konkurrenz); margin-right: .3rem; }
.stueck-dach { color: var(--grau); font-size: .82rem; }

/* Kennzeichen für Meldungen mit Volltext */
.m-volltext {
  font-size: .6rem; letter-spacing: .1em; padding: .05rem .35rem; background: var(--gelb); color: var(--tinte);
  border: 1.5px solid var(--tinte);
}
.alle-artikel { margin-top: .7rem; }
.alle-artikel summary { cursor: pointer; font-size: .78rem; font-weight: 700; }
.stuecke a { text-decoration: none; border-bottom: 1px solid rgba(14, 14, 14, .3); }
.stuecke a:hover { border-bottom-color: var(--fuchsia); }

/* Lesefenster: Zettel mit Kontur und Schatten, am Telefon bildschirmfüllend */
html.leser-offen { overflow: hidden; }
.leser {
  padding: 0; border: 3px solid var(--tinte); background: var(--karte); color: var(--tinte);
  box-shadow: 10px 10px 0 var(--fuchsia);
  width: min(46rem, calc(100vw - 2.5rem)); max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain;
}
.leser::backdrop { background: rgba(14, 14, 14, .5); }
.leser-kopf {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--karte); border-bottom: 2px solid var(--tinte); padding: .55rem .6rem .55rem 1.6rem;
}
.leser-quelle { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ultramarin); }
.leser-zu {
  -webkit-appearance: none; appearance: none; border: 2px solid var(--tinte); background: var(--karte); color: var(--tinte);
  font: inherit; font-size: 1.3rem; line-height: 1; width: 2.2rem; height: 2.2rem; cursor: pointer; box-shadow: 2px 2px 0 var(--tinte);
}
.leser-zu:hover { background: var(--gelb); }
.leser-text { padding: 1.6rem 2.2rem 2.6rem; font-family: var(--serif); font-size: 1.12rem; line-height: 1.62; font-variation-settings: "opsz" 14; }
.leser-text h1 {
  font-size: 2.1rem; line-height: 1.08; font-weight: 750; letter-spacing: -.02em; margin: .2rem 0 .7rem;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 72;
}
.leser-dach { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--konkurrenz); margin: 0; }
.leser-unter { font-size: 1.22rem; font-style: italic; line-height: 1.4; margin: 0 0 .7rem; }
.leser-autor { font-family: var(--sans); font-size: .82rem; color: var(--grau); margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.leser-text p { margin: 0 0 .95rem; }
.leser-text h3 { font-size: 1.12rem; font-weight: 750; margin: 1.6rem 0 .5rem; }
.leser-text blockquote { margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--fuchsia); font-style: italic; }
.leser-laedt { font-family: var(--sans); color: var(--grau); }
.leser-fuss { font-family: var(--sans); font-size: .8rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
@media (max-width: 44rem) {
  .leser { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; box-shadow: none; }
  .leser-kopf { padding-left: 1rem; }
  .leser-text { padding: 1.2rem 1.1rem 2.4rem; font-size: 1.08rem; }
  .leser-text h1 { font-size: 1.7rem; }
}

/* Readwise: Herkunft im Kopf und Stefans Notiz als Zettel unter der Meldung */
.m-herkunft { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
/* Wird es eng, kürzt sich die Herkunft zuerst, der Quellenname bleibt stehen */
.m-kopf > .m-herkunft { flex: 0 100 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m-notiz {
  position: relative; margin: 1.1rem 0 0; padding: .85rem .8rem .55rem; background: #fff3b0; border: 1.5px solid var(--tinte);
  box-shadow: 3px 3px 0 var(--fuchsia); max-width: 44rem;
}
/* Label „Stefan“ als Reiter auf der oberen Kante, der Kommentar darunter als Ausspruch in » « */
.m-notiz-von {
  position: absolute; top: -.72rem; left: .6rem; background: var(--tinte); color: var(--papier);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: .12rem .5rem;
}
.m-notiz p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.45; }

/* Hochladen nur am Rechner (Layout mit Seitenleiste ab 64rem); darunter verschwinden Knopf, Link und Formular */
.nur-telefon { display: none; }
@media (max-width: 63.99rem) {
  .nur-rechner { display: none !important; }
  .nur-telefon { display: block; }
}

/* Wochenwechsel in der Leiste, unter der Tagesliste */
.tage-nav .wochen-wechsel { display: flex; justify-content: space-between; gap: .6rem; padding: .6rem 0 .2rem; }
.tage-nav .wochen-wechsel a {
  display: inline; border: 0; padding: 0; font-size: .76rem; font-weight: 700; text-decoration: none; color: var(--tinte);
}
.tage-nav .wochen-wechsel a:hover { color: var(--fuchsia); }
.tage-nav .wochen-wechsel .danach { margin-left: auto; }

/* Übersetzte Meldungen: die Originalüberschrift klein unter der deutschen */
.m-original { margin: .15rem 0 0; font-size: .82rem; font-style: italic; color: var(--grau); line-height: 1.35; }
.m-original-label { font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.flagge { width: 1.05em; height: .7em; vertical-align: -.02em; margin: 0 .1em; box-shadow: 0 0 0 .5px rgba(14, 14, 14, .45); }