/* ============================================================
   VelutinaFinder Portal — Design-System
   Markenwelt aus der App (App/lib/config/theme.dart):
   Tiefblau, Akzentblau, Glas-Flächen. Signalfarbe der Hornisse:
   Bernstein (Thorax der Vespa velutina ist dunkel, die Beine gelb
   — daher „gelbfüßig": Gelb/Bernstein als Fund-Farbe).
   ============================================================ */

:root {
  /* Marke (aus der App) */
  --tiefblau:      #06183C;
  --marke:         #0B2A5B;
  --marke-mittel:  #1457B5;
  --akzent:        #2F8BFF;
  --akzent-hell:   #E6F0FF;

  /* Fund/Warnung — die Hornissen-Achse */
  --fund:          #FFB300;   /* Bernstein: eigene Meldungen */
  --fund-dunkel:   #B87400;
  --warn:          #E5484D;

  /* Import-Quellen (zurückhaltend, kühl) */
  --q-gbif:        #6FA8DC;
  --q-inat:        #74C69D;
  --q-obs:         #B39DDB;

  /* Flächen */
  --papier:        #F6F8FC;
  --tinte:         #0E1A2B;
  --tinte-2:       #52607A;
  --tinte-3:       #8A95A8;
  --glas:          rgba(255, 255, 255, .88);
  --glas-rand:     rgba(11, 42, 91, .14);
  --glas-dunkel:   rgba(6, 24, 60, .82);

  /* Typografie */
  --schrift-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif;
  --schrift-text:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Maße */
  --radius:        14px;
  --radius-klein:  9px;
  --schatten:      0 10px 30px rgba(6, 24, 60, .18), 0 2px 8px rgba(6, 24, 60, .10);
  --schatten-tief: 0 24px 60px rgba(6, 24, 60, .30);
  --fokus:         0 0 0 3px rgba(47, 139, 255, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--schrift-text);
  color: var(--tinte);
  background: var(--tiefblau);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   Vollbild-Karte als Bühne
   ------------------------------------------------------------ */
div#karte {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, #10305F 0%, var(--tiefblau) 60%);
}

/* Vignette, damit die schwebenden Panels Halt haben */
.buehne-rand {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(6,24,60,.38) 0, transparent 110px),
    linear-gradient(to top,    rgba(6,24,60,.30) 0, transparent 130px);
}

/* ------------------------------------------------------------
   Kopfzeile — Glas über der Karte
   ------------------------------------------------------------ */
.kopf {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.wortmarke {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--marke);
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.wortmarke .logo {
  width: 34px; height: 34px; flex: none;
  filter: drop-shadow(0 2px 4px rgba(6,24,60,.25));
}
.wortmarke .de { color: var(--akzent); }

.kopf nav {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}
.kopf nav a {
  color: var(--tinte-2);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  padding: 8px 13px;
  border-radius: var(--radius-klein);
  transition: background .15s, color .15s;
}
.kopf nav a:hover { background: var(--akzent-hell); color: var(--marke); }
.kopf nav a[aria-current="page"] { color: var(--marke); background: var(--akzent-hell); }

.knopf-melden {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(160deg, var(--fund) 0%, #FF9800 100%);
  color: #3A2500 !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(255, 152, 0, .45);
  transition: transform .15s, box-shadow .15s;
}
.knopf-melden:hover {
  background: linear-gradient(160deg, #FFC233 0%, #FFA726 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 152, 0, .55);
}

/* ------------------------------------------------------------
   Lage-Panel (links unten auf Desktop, unten auf Handy)
   ------------------------------------------------------------ */
.lage {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 10;
  width: min(340px, calc(100vw - 28px));
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.lage-kopf {
  padding: 14px 16px 10px;
}
.lage-kopf h1 {
  margin: 0;
  font-family: var(--schrift-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--marke);
  letter-spacing: .01em;
}
.lage-zahl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.lage-zahl strong {
  font-family: var(--schrift-display);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lage-zahl span { color: var(--tinte-2); font-size: .92rem; }

/* Zeitraum-Schalter */
.zeitwahl {
  display: flex;
  gap: 6px;
  padding: 4px 16px 12px;
}
.zeitwahl button {
  flex: 1;
  font: 600 .85rem var(--schrift-text);
  color: var(--tinte-2);
  background: rgba(11, 42, 91, .06);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 4px;
  cursor: pointer;
  transition: all .15s;
}
.zeitwahl button:hover { background: var(--akzent-hell); }
.zeitwahl button[aria-pressed="true"] {
  background: var(--marke);
  color: #fff;
  box-shadow: 0 3px 10px rgba(11, 42, 91, .35);
}
.zeitwahl button:focus-visible { outline: none; box-shadow: var(--fokus); }

/* Legende = zugleich Quellen-Filter */
.legende {
  border-top: 1px solid var(--glas-rand);
  padding: 10px 16px 13px;
  display: grid;
  gap: 4px;
}
.legende label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  color: var(--tinte-2);
  cursor: pointer;
  padding: 3px 0;
  user-select: none;
}
.legende input { position: absolute; opacity: 0; }
.legende .punkt {
  width: 13px; height: 13px; flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(6,24,60,.25);
  transition: transform .15s;
}
.legende .punkt.eigene {
  border-radius: 3px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .25), inset 0 0 0 1px rgba(6,24,60,.3);
}
.legende input:not(:checked) ~ .punkt { opacity: .25; transform: scale(.8); }
.legende input:not(:checked) ~ .name  { opacity: .45; text-decoration: line-through; }
.legende input:focus-visible ~ .punkt { box-shadow: var(--fokus); }
.legende .anzahl {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--tinte-3);
}

.lage-stand {
  padding: 0 16px 12px;
  font-size: .75rem;
  color: var(--tinte-3);
}

/* ------------------------------------------------------------
   Sichtungs-Popup auf der Karte
   ------------------------------------------------------------ */
.maplibregl-popup-content {
  font-family: var(--schrift-text);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  padding: 12px 14px;
}
.popup-quelle { font-weight: 700; color: var(--marke); font-size: .9rem; }
.popup-zeit   { color: var(--tinte-2); font-size: .84rem; margin-top: 2px; }

/* MapLibre-Bedienelemente ins Markenbild */
.maplibregl-ctrl-group {
  border-radius: var(--radius-klein) !important;
  box-shadow: var(--schatten) !important;
  overflow: hidden;
}
.maplibregl-ctrl-bottom-right { bottom: 8px; }

/* Attribution lesbar, aber dezent */
.maplibregl-ctrl-attrib {
  font-size: 11px;
  background: rgba(255,255,255,.75) !important;
  border-radius: 8px 0 0 0;
}

/* ------------------------------------------------------------
   Fußleiste (rechtliche Links) — dezent rechts oben unter Kopf
   ------------------------------------------------------------ */
.rechtliches {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9;
  display: flex;
  gap: 4px;
  background: var(--glas);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glas-rand);
  border-radius: 999px;
  padding: 4px 8px;
  box-shadow: var(--schatten);
}
.rechtliches a {
  color: var(--tinte-3);
  text-decoration: none;
  font-size: .76rem;
  padding: 4px 8px;
  border-radius: 999px;
}
.rechtliches a:hover { color: var(--marke); background: var(--akzent-hell); }

/* ------------------------------------------------------------
   Ladezustand
   ------------------------------------------------------------ */
.laden {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 70% 10%, #10305F 0%, var(--tiefblau) 60%);
  transition: opacity .5s;
}
.laden.fertig { opacity: 0; pointer-events: none; }
.laden .inner { text-align: center; color: #fff; }
.laden .inner svg { width: 72px; height: 72px; }
.laden .inner p {
  font-family: var(--schrift-display);
  font-weight: 600;
  letter-spacing: .04em;
  color: #A9C6F5;
  animation: pulsieren 1.6s ease-in-out infinite;
}
@keyframes pulsieren { 50% { opacity: .45; } }

/* Sanfter Einflug der Panels nach dem Laden */
.kopf, .lage, .rechtliches {
  animation: einfliegen .55s cubic-bezier(.2,.8,.25,1) both;
}
.lage        { animation-delay: .12s; }
.rechtliches { animation-delay: .22s; }
@keyframes einfliegen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kopf, .lage, .rechtliches { animation: none; }
}

/* ------------------------------------------------------------
   Handy
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .kopf { top: 10px; left: 10px; right: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .kopf nav { gap: 0; margin-left: 0; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .kopf nav a { padding: 7px 8px; font-size: .88rem; }
  .knopf-melden {
    order: 10;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 10px 14px !important;
    white-space: nowrap;
  }
  .wortmarke { font-size: 1.05rem; }
  .lage { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .lage-zahl strong { font-size: 1.7rem; }
  .rechtliches { display: none; }
}

/* ------------------------------------------------------------
   App-Hinweis auf der Karten-Startseite
   ------------------------------------------------------------ */
.app-hinweis {
  position: fixed;
  top: 78px;
  right: 14px;
  z-index: 10;
  width: 262px;
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 12px 14px 13px;
  animation: einfliegen .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: .3s;
}
.app-hinweis-kopf { display: flex; gap: 11px; align-items: center; }
.app-hinweis-kopf svg { width: 36px; height: 36px; flex: none; }
.app-hinweis-kopf strong {
  display: block;
  font-family: var(--schrift-display);
  font-size: .96rem;
  color: var(--marke);
  line-height: 1.25;
}
.app-hinweis-kopf span {
  display: block;
  font-size: .82rem;
  color: var(--tinte-2);
  line-height: 1.35;
  margin-top: 2px;
}
.app-hinweis-knopf {
  display: block;
  margin-top: 11px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: .89rem;
  color: var(--marke);
  background: var(--akzent-hell);
  border-radius: 999px;
  padding: 8px 10px;
  transition: background .15s, color .15s;
}
.app-hinweis-knopf:hover { background: var(--marke); color: #fff; }

@media (max-width: 900px) {
  .app-hinweis { display: none; }   /* auf schmalen Schirmen führt die Navigation zur App-Seite */
}
@media (prefers-reduced-motion: reduce) { .app-hinweis { animation: none; } }

/* ============================================================
   Werkzeug-Kopfzeile (Bauart wie BeeHiveMap): Titel links,
   Handlung und Icons rechts. Kein Werbeband über der Karte.
   ============================================================ */
.werkzeug-kopf { gap: 1rem; }

.wortmarke .marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke .marke-text b { font-weight: 700; font-size: 1.16rem; }
.wortmarke .marke-text small {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: .78rem;
  color: var(--tinte-2);
  letter-spacing: 0;
  margin-top: 2px;
}

.werkzeug-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.werkzeug-nav .icon-knopf {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  color: var(--tinte-2);
  border-radius: 11px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.werkzeug-nav .icon-knopf:hover { background: var(--akzent-hell); color: var(--marke); }
.werkzeug-nav .icon-knopf.angemeldet {
  color: var(--marke); background: var(--akzent-hell);
  box-shadow: inset 0 0 0 1.5px var(--akzent);
}
.werkzeug-nav .knopf-melden { margin-right: 6px; }

@media (max-width: 720px) {
  /* Eine Zeile, nichts bricht um: Marke links, Handlung und Icons rechts. */
  .werkzeug-kopf {
    flex-wrap: nowrap !important;
    gap: .4rem; padding: 7px 9px;
    top: 8px; left: 8px; right: 8px;
  }
  .wortmarke { gap: 7px; min-width: 0; flex: 1 1 auto; }
  .wortmarke .logo { width: 28px; height: 28px; }
  .wortmarke .marke-text small { display: none; }
  .wortmarke .marke-text b { font-size: .97rem; }
  /* Die ältere Regel .kopf nav (Umbruch, volle Breite) gilt hier NICHT. */
  .werkzeug-kopf .werkzeug-nav {
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: flex-end !important;
    gap: 0; flex: 0 0 auto; margin-left: auto;
  }
  .werkzeug-kopf .icon-knopf { width: 36px; height: 36px; border-radius: 9px; }
  .werkzeug-kopf .icon-knopf svg { width: 20px; height: 20px; }
  .werkzeug-kopf .knopf-melden {
    width: auto !important; margin: 0 4px 0 0 !important;
    padding: 8px 11px !important; gap: 0 !important;
    order: 0 !important; justify-content: center; flex: none;
  }
  .werkzeug-kopf .knopf-melden span { display: none; }
  .werkzeug-kopf .knopf-melden svg { width: 20px; height: 20px; }
  .lage { bottom: 10px; }
}

/* Ganz schmal: Datenquellen-Icon tritt zurück, Platz für das Wesentliche. */
@media (max-width: 400px) {
  .werkzeug-kopf a[href="/datenquellen.html"] { display: none; }
  .wortmarke .marke-text b { font-size: .9rem; }
}

/* ============================================================
   Zeitraffer der Ausbreitung — Play-Knopf und Zeitleiste
   ============================================================ */
.zeit-knopf {
  position: fixed;
  top: 82px; left: 14px;
  z-index: 11;
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 .95rem var(--schrift-text);
  color: #fff;
  background: linear-gradient(160deg, #D62814 0%, #9E0E0A 100%);
  border: 0; border-radius: 999px;
  padding: 11px 20px 11px 16px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(158,14,10,.45);
  transition: transform .15s, box-shadow .15s, opacity .15s;
  animation: einfliegen .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: .35s;
}
.zeit-knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(158,14,10,.55);
}
.zeit-knopf:disabled { opacity: .6; cursor: default; transform: none; }
.zeit-knopf svg { flex: none; }

.zeitleiste {
  position: fixed;
  left: 14px; bottom: 14px;
  z-index: 11;
  width: min(340px, calc(100vw - 28px));
  background: var(--glas);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 16px 12px;
  animation: einfliegen .4s cubic-bezier(.2,.8,.25,1) both;
}
.zeit-kopf { display: flex; align-items: center; gap: .9rem; }
.zeit-jahr {
  font-family: var(--schrift-display);
  font-weight: 800; font-size: 2.3rem; line-height: 1;
  color: #D62814; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.zeit-beschreibung b {
  display: block; font-size: .95rem; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.zeit-beschreibung small {
  display: block; font-size: .78rem; color: var(--tinte-2);
  line-height: 1.35; margin-top: 1px;
}
.zeit-zu {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(11,42,91,.07); color: var(--tinte-2);
  font-size: 1.2rem; line-height: 1;
}
.zeit-zu:hover { background: var(--warn); color: #fff; }

.zeit-fortschritt {
  height: 5px; border-radius: 999px; margin: 12px 0 8px;
  background: rgba(11,42,91,.1); overflow: hidden;
}
.zeit-fortschritt span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #FFD650, #FFA31A 45%, #D62814);
  border-radius: 999px; transition: width .35s linear;
}
.zeit-regler { width: 100%; accent-color: #D62814; margin: 0; }
.zeit-enden {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--tinte-3);
  font-variant-numeric: tabular-nums; margin-top: -2px;
}
.zeit-quelle {
  margin: .6rem 0 0; font-size: .72rem; color: var(--tinte-3); line-height: 1.4;
}

/* Läuft der Zeitraffer, tritt das Lage-Panel zurück — beide sitzen links unten
   und würden sich sonst überlagern. Das Lage-Panel zeigt die Gegenwart, der
   Zeitraffer die Geschichte; zwei Wahrheiten gleichzeitig verwirren nur. */
body:has(.zeitleiste:not([hidden])) .lage { display: none; }
body:has(.zeitleiste:not([hidden])) .zeit-knopf { top: auto; bottom: 232px; }

@media (max-width: 720px) {
  .zeit-knopf {
    top: auto; bottom: 14px; left: 10px; right: 10px;
    justify-content: center; padding: 12px 18px;
  }
  .zeitleiste { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .zeitleiste:not([hidden]) ~ .zeit-knopf { display: none; }
  .zeitleiste:not([hidden]) ~ .lage { display: none; }
  .zeit-jahr { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .zeit-knopf { animation: none; } }

/* ------------------------------------------------------------
   Menü — eine Leiste für ALLE Seiten, Startseite eingeschlossen
   Bis zum 25.08.2026 hatte die Startseite eine eigene Leiste aus
   unbeschrifteten Sinnbildern. Wer sie anklickte, wusste nicht, wohin er
   kommt; wer schlecht sieht, konnte sie gar nicht bedienen. Jede Schaltfläche
   trägt jetzt ihren Namen.
   ------------------------------------------------------------ */
.kopf.ueber-karte {
  /* Über der Karte braucht die Leiste mehr Deckkraft, sonst verschwindet
     die Schrift in Satellitenbildern und Waldflächen. */
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 6px 28px rgba(6, 24, 60, .22);
}

.menue-schalter {
  display: none;              /* am Rechner nicht nötig, dort steht alles */
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 9px 14px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein);
  background: #fff;
  color: var(--marke);
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.menue-schalter .balken {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menue-schalter .balken::before,
.menue-schalter .balken::after {
  content: "";
  position: absolute;
  left: 0; width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, top .18s ease;
}
.menue-schalter .balken::before { top: -6px; }
.menue-schalter .balken::after  { top: 6px; }
.menue-schalter[aria-expanded="true"] .balken { background: transparent; }
.menue-schalter[aria-expanded="true"] .balken::before { top: 0; transform: rotate(45deg); }
.menue-schalter[aria-expanded="true"] .balken::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .menue-schalter { display: inline-flex; }

  /* Verstecken nur, wenn der Schalter tatsächlich bedienbar ist. Ohne
     JavaScript bleibt das Menü offen — eine Seite, deren Navigation an einem
     Skript hängt, ist ohne dieses Skript unbrauchbar. */
  .mit-menueschalter .kopf nav {
    display: none;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--glas-rand);
  }
  .mit-menueschalter .kopf:has(.menue-schalter[aria-expanded="true"]) nav {
    display: flex;
  }
  .kopf nav a {
    padding: 13px 14px;       /* grosse Trefferflächen für den Daumen */
    font-size: 1.02rem;
    border-radius: var(--radius-klein);
  }
  .kopf .knopf-melden {
    order: 0;
    margin-top: 6px;
    width: 100%;
    justify-content: center;
  }
  .kopf { flex-wrap: wrap; }
}

/* Rückfallebene für Browser ohne :has() — dort bleibt das Menü immer sichtbar,
   lieber ein langes Menü als gar keins. */
@supports not (selector(:has(*))) {
  .mit-menueschalter .kopf nav { display: flex !important; }
  .menue-schalter { display: none !important; }
}

/* Name und Endung bilden ein Wort — nicht drei Flex-Kinder mit Abstand */
.wortmarke .name { display: inline; white-space: nowrap; }
.wortmarke .de { color: var(--akzent); margin-left: 0; }

/* Alle Wochenrückblicke — Archivband unter dem neuesten Artikel */
.artikel-archiv { margin: 34px 0 12px; }
.artikel-archiv h2 { margin-bottom: 6px; }
.artikel-archiv > p { color: var(--tinte-2); margin-bottom: 16px; max-width: 62ch; }
.artikelband { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.artikelband li { margin: 0; }
.artikelband a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein);
  background: #fff;
  text-decoration: none;
  color: var(--tinte);
  transition: border-color .15s, transform .15s;
}
.artikelband a:hover { border-color: var(--akzent); transform: translateX(3px); }
.artikelband b { font-weight: 700; line-height: 1.35; }
.artikelband span { color: var(--tinte-2); font-size: .88rem; }
@media (max-width: 720px) { .artikelband a { padding: 12px 13px; } }