/* Schriften liegen lokal auf diesem Server. Kein Aufruf an Google,
   keine IP-Adresse eines Besuchers verlaesst diesen Server.
   Alle drei Familien stehen unter der SIL Open Font License 1.1,
   siehe schriften/LIZENZ.txt */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('schriften/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('schriften/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('schriften/sourceserif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('schriften/sourceserif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --grund: #F5F2E8;
  --karte: #FFFDF7;
  --tinte: #143C42;
  --tinte-leise: #5F7C80;
  --linie: #DFD7C5;
  --linie-stark: #C9BFA8;
  --signal: #D4472C;
  --hell: #7AA0A5;
  --feld: #EDE8DA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0E1D1F;
    --karte: #16292B;
    --tinte: #EDE7D8;
    --tinte-leise: #9DB3B5;
    --linie: #27403F;
    --linie-stark: #375251;
    --signal: #F4785F;
    --hell: #7AA0A5;
    --feld: #1E3234;
  }
}
:root[data-theme="dark"] {
  --grund: #0E1D1F;
  --karte: #16292B;
  --tinte: #EDE7D8;
  --tinte-leise: #9DB3B5;
  --linie: #27403F;
  --linie-stark: #375251;
  --signal: #F4785F;
  --hell: #7AA0A5;
  --feld: #1E3234;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, .platz, .etikett, .knopf, .zahl {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}
.einordnung-etikett, .marke, .thema-marke {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

.rahmen { max-width: 900px; margin: 0 auto; padding-inline: 20px; padding-block: 0 64px; }

/* Kopfzeile der Startseite */
header.titel {
  border-bottom: 2px solid var(--tinte);
  padding-block: 30px 22px;
  margin-bottom: 28px;
}
header.titel h1 a { color: inherit; text-decoration: none; }
header.titel h1 a:hover { color: var(--signal); }
header.titel h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1;
  text-wrap: balance;
}
.claim {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 10px;
}
.vorspann {
  max-width: 58ch; margin: 14px 0 0; color: var(--tinte-leise); font-size: 1.02rem;
}
.vorspann strong { color: var(--tinte); font-weight: 600; }
.abo { margin: 16px 0 0; }
.abo a {
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--tinte); color: var(--grund); text-decoration: none;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem; font-weight: 600; padding: 9px 16px; border-radius: 2px;
}
.abo a:hover { background: var(--signal); }
.abo-zeichen { font-size: 0.8em; }
.abo-leise { font-weight: 400; opacity: 0.85; }
.stand-kopf {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--tinte-leise); margin: 12px 0 0;
}

/* Das Logo fuehrt auf jeder Unterseite zurueck zur Startseite. */
.logo {
  display: inline-block;
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.5rem, 4vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1;
  color: var(--tinte); text-decoration: none;
  margin-bottom: 14px;
}
.logo:hover { color: var(--signal); }
header.kurz { padding-block: 22px 16px; margin-bottom: 26px; }
header.kurz .logo { margin-bottom: 0; }

/* Leiste oben auf der Startseite: Suche, Video, Themen.
   Seit 18.09.2026 statt der Filterspalte links. */
.leiste {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--grund); margin-bottom: 18px;
}
@media (min-width: 700px) {
  /* Bleibt beim Scrollen oben stehen, damit man mitten in der Liste das Thema wechseln kann. */
  .leiste { position: sticky; top: 0; z-index: 5; padding-top: 12px; }
}
.suchzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.suchfeld { position: relative; flex: 1 1 280px; }
.suchfeld .lupe {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tinte-leise); pointer-events: none;
}
.suchfeld input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinte);
  background: var(--karte); border: 1px solid var(--linie-stark); border-radius: 2px;
  padding: 9px 12px 9px 38px; -webkit-appearance: none; appearance: none;
}
.suchfeld input::placeholder { color: var(--tinte-leise); opacity: 0.8; }
.suchfeld input:focus { border-color: var(--tinte); outline: 2px solid var(--signal); outline-offset: 1px; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.umschalter { display: flex; border: 1px solid var(--linie-stark); border-radius: 2px; }
.umschalter button {
  font: inherit; font-family: "Bricolage Grotesque", sans-serif; font-size: 0.86rem;
  background: transparent; color: var(--tinte); border: 0; border-left: 1px solid var(--linie-stark);
  padding: 8px 13px; cursor: pointer; white-space: nowrap;
}
.umschalter button:first-child { border-left: 0; }
.umschalter button:hover { background: var(--feld); }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); }
@media (max-width: 520px) {
  .umschalter { flex: 1 1 100%; }
  .umschalter button { flex: 1; padding-inline: 6px; }
}

/* Themen als Reiter, wie in der Leiste einer Nachrichtenseite. Am Handy
   wischt man seitlich, statt dass die Reihe in drei Zeilen umbricht. */
.themen {
  display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 2px solid var(--tinte);
}
.themen::-webkit-scrollbar { display: none; }
@media (max-width: 699px) {
  /* Rechts ausblenden, damit man sieht: Da geht es weiter. Der Innenabstand
     laesst den letzten Reiter ganz aus der Blende herausrollen. */
  .themen {
    padding-right: 36px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
}
.thema-knopf {
  flex: none; font: inherit; font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.96rem; font-weight: 600; white-space: nowrap;
  background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 9px 0 7px; margin-bottom: -2px; color: var(--tinte-leise); cursor: pointer;
}
.thema-knopf:hover { color: var(--tinte); }
.thema-knopf[aria-pressed="true"] { color: var(--tinte); border-bottom-color: var(--signal); }

/* Ergebniszeile */
.ergebnis {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; letter-spacing: 0.05em;
  color: var(--tinte-leise); margin: 0 0 16px;
}
.zuruecksetzen {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.84rem; letter-spacing: 0;
  background: none; border: none; border-bottom: 1px solid var(--signal);
  color: var(--signal); padding: 0 0 1px; cursor: pointer;
}
.zuruecksetzen[hidden] { display: none; }

/* Treffer, die nur noch im Archiv stehen */
.archivtreffer { margin-top: 30px; }
.archivtreffer[hidden] { display: none; }
.etikett {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinte-leise); margin: 0;
}
.archivtreffer .etikett { margin: 0 0 12px; }

/* Meldungen auf der Startseite */
.liste { display: flex; flex-direction: column; gap: 18px; }
.meldung {
  background: var(--karte); border: 1px solid var(--linie);
  padding: 22px 24px 18px; border-radius: 2px;
}
.meldung[hidden] { display: none; }
.kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 9px; }
.platz {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--hell);
}
.marke {
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px;
}
.marke-folge { background: var(--tinte); color: var(--grund); }
.marke-folge-bald { border: 1px solid var(--tinte); color: var(--tinte); }
.marke-vorbehalt { border: 1px solid var(--signal); color: var(--signal); }
.marke-bericht { background: var(--hell); color: #0E1D1F; }
.marke-rueckblick { border: 1px solid var(--linie-stark); color: var(--tinte-leise); }

.meldung h2 {
  font-size: 1.28rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em;
  margin: 0 0 10px; text-wrap: balance;
}
.meldung h2 a { color: inherit; text-decoration: none; }
.meldung h2 a:hover { color: var(--signal); }
.anriss { margin: 0 0 14px; color: var(--tinte); max-width: 66ch; }
.weiterlesen {
  display: inline-block; margin: 0 0 14px;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.88rem; font-weight: 600;
  color: var(--signal); text-decoration: none; border-bottom: 1px solid transparent;
}
.weiterlesen:hover { border-bottom-color: var(--signal); }
.einordnung {
  border-left: 3px solid var(--signal); padding-left: 14px; margin-bottom: 16px;
}
.einordnung-etikett {
  display: block; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 3px;
}
.einordnung p { margin: 0 0 0.7em; font-size: 0.97rem; color: var(--tinte-leise); max-width: 62ch; }
.einordnung p:last-child { margin-bottom: 0; }
.meldung footer, .einzel .belege {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  border-top: 1px solid var(--linie); padding-top: 11px;
}
.quellen { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.quellen-etikett {
  font-family: "IBM Plex Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise);
}
.quelle {
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.85rem;
  color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-stark);
}
.quelle:hover { color: var(--signal); border-color: var(--signal); }
.quelle-primaer { border-bottom-style: double; border-bottom-width: 3px; }
.quelle-primaer::after {
  content: "\00a0◆"; font-size: 0.55em; vertical-align: 0.35em; color: var(--hell);
}
.thema-marke { font-size: 0.72rem; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
.thema-marke { margin-left: auto; }

.leer { border: 1px dashed var(--linie-stark); padding: 40px 24px; text-align: center; color: var(--tinte-leise); }
.leer[hidden] { display: none; }
.archiv-hinweis { margin: 22px 0 0; font-size: 0.92rem; color: var(--tinte-leise); }
.archiv-hinweis a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal); }

/* Einzelseite einer Meldung */
.einzel { max-width: 70ch; }
.einzel h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em;
  margin: 4px 0 10px; text-wrap: balance;
}
.datum {
  font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; letter-spacing: 0.05em;
  color: var(--tinte-leise); margin: 0 0 22px;
}
.bild { margin: 0 0 24px; }
.bild img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 2px; }
.bild figcaption {
  font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--tinte-leise); margin-top: 6px;
}
.einzel .anriss { font-size: 1.1rem; }
.bericht-text { margin: 0 0 22px; }
.bericht-text p { margin: 0 0 0.9em; }
.bericht-text p:last-child { margin-bottom: 0; }
.videolink { margin: 0 0 20px; }
.videolink[hidden] { display: none; }
.videolink a {
  display: inline-flex; gap: 8px; align-items: baseline;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.92rem; font-weight: 600;
  color: var(--tinte); text-decoration: none;
  border: 1px solid var(--tinte); border-radius: 2px; padding: 7px 14px;
}
.videolink a:hover { background: var(--tinte); color: var(--grund); }
.teilen {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--linie);
}
.teilen-etikett {
  font-family: "IBM Plex Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-leise); margin-right: 4px;
}
.teilen-knopf {
  font: inherit; font-family: "Bricolage Grotesque", sans-serif; font-size: 0.86rem;
  background: transparent; color: var(--tinte); text-decoration: none; cursor: pointer;
  border: 1px solid var(--linie-stark); border-radius: 2px; padding: 6px 12px;
}
.teilen-knopf:hover { border-color: var(--tinte); }
.teilen-knopf[hidden] { display: none; }
.weiter {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 34px;
  font-family: "Bricolage Grotesque", sans-serif; font-size: 0.92rem;
}
.weiter a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-stark); }
.weiter a:hover { color: var(--signal); border-color: var(--signal); }

/* Archiv */
.seitentitel {
  font-size: clamp(1.8rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; margin: 0 0 8px;
}
.unterzeile { color: var(--tinte-leise); margin: 0 0 26px; max-width: 62ch; }
.archivliste { list-style: none; padding: 0; margin: 0; max-width: 72ch;
  display: flex; flex-direction: column; gap: 14px; }
.archivliste li { border-bottom: 1px solid var(--linie); padding-bottom: 12px; }
.archivliste a {
  color: var(--tinte); text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 1.05rem;
}
.archivliste a:hover { color: var(--signal); }
.archivliste .meta {
  display: block; margin-top: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: var(--tinte-leise);
}

/* Textseiten: Impressum, Datenschutz, So arbeiten wir */
.rechtstext { max-width: 68ch; padding-block: 8px 0; }
.rechtstext h2 {
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0.01em;
  margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--linie);
}
.rechtstext h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.rechtstext p { margin: 0 0 0.9em; }
.rechtstext address { font-style: normal; margin: 0 0 0.9em; }
.rechtstext ul { margin: 0 0 0.9em; padding-left: 1.1em; }
.rechtstext li { margin-bottom: 0.2em; }
.rechtstext a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal); }
.rechtstext .hervor {
  border-left: 3px solid var(--hell); padding-left: 14px; color: var(--tinte);
}
.stand { font-family: "IBM Plex Mono", monospace; font-size: 0.74rem; color: var(--tinte-leise); }

/* Fuss */
footer.fuss {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--linie);
  font-size: 0.82rem; color: var(--tinte-leise); max-width: 62ch;
  display: flex; flex-direction: column; gap: 10px;
}
footer.fuss p { margin: 0; }
footer.fuss strong { color: var(--tinte); font-weight: 600; }
.raute { color: var(--hell); }
.spende {
  border-left: 3px solid var(--hell); padding-left: 13px; color: var(--tinte);
}
.spende a { color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal); }
.rechtliches { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; line-height: 1.9; }
.rechtliches a { color: var(--tinte-leise); text-decoration: none; border-bottom: 1px solid var(--linie-stark); }
.rechtliches a:hover { color: var(--signal); border-color: var(--signal); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }