/* ============================================================
   VelutinaFinder — Stil für Inhaltsseiten (Wissen, App, Forschung).
   Ergänzt portal.css; die Karte bleibt dort, hier zählt Lesbarkeit.
   ============================================================ */

/* ============================================================
   Grundregel: hidden schlägt jede Anzeige-Art.
   Ohne diese Zeile machen display:flex und display:grid das
   hidden-Merkmal wirkungslos — leere Bänder blieben sichtbar.
   ============================================================ */
[hidden] { display: none !important; }

html:has(body.inhalt) { background: var(--papier); height: auto; }
body.inhalt {
  background: var(--papier);
  color: var(--tinte);
  height: auto;
  min-height: 100%;
}

/* Screenshots der App — feste Darstellungsbreite, Seitenverhältnis erhalten */
.schirmbild {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten);
}
figure.geraet {
  margin: 1.6rem 0 0;
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
figure.geraet figcaption {
  font-size: .9rem;
  color: var(--tinte-2);
  max-width: 34ch;
  padding-top: .3rem;
}

/* Kopfzeile: hier fest im Fluss statt schwebend über der Karte */
body.inhalt .kopf {
  position: sticky;
  top: 0;
  left: auto; right: auto;
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  margin: 0;
  animation: none;
}

/* ------------------------------------------------------------
   Titelblock
   ------------------------------------------------------------ */
.titel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 78% 0%, #14356E 0%, var(--tiefblau) 70%);
  color: #fff;
  padding: clamp(2.6rem, 7vw, 5rem) 1.2rem clamp(2.2rem, 5vw, 3.4rem);
}
/* Wabenraster als Textur — ruhig, nicht dekorativ-laut */
.titel::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'>\
<path d='M28 0l28 16v33L28 65 0 49V16z' fill='none' stroke='%232F8BFF' stroke-width='1.4'/>\
<path d='M28 65l28 16v33L28 130 0 114V81z' fill='none' stroke='%232F8BFF' stroke-width='1.4'/>\
</svg>");
}
.titel > * { position: relative; }
.titel .innen { max-width: 940px; margin: 0 auto; }
.titel .augenbraue {
  font: 700 .82rem/1 var(--schrift-text);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fund);
  margin: 0 0 .9rem;
}
.titel h1 {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(2rem, 5.2vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .8rem;
}
.titel p {
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.6;
  color: #C3D8F7;
  max-width: 62ch;
  margin: 0;
}

/* ------------------------------------------------------------
   Textkörper
   ------------------------------------------------------------ */
.blatt {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.4rem) 1.2rem 4rem;
}
.blatt h2 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  color: var(--marke);
  letter-spacing: -.01em;
  margin: 2.6rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--akzent-hell);
}
.blatt h2:first-child { margin-top: 0; }
.blatt h3 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--tinte);
  margin: 1.8rem 0 .5rem;
}
.blatt p, .blatt li {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--tinte);
  max-width: 68ch;
}
.blatt ul { padding-left: 1.15rem; }
.blatt li { margin: .3rem 0; }
.blatt li::marker { color: var(--akzent); }
.blatt a { color: var(--marke-mittel); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.blatt a:hover { color: var(--akzent); }

/* Inhaltsverzeichnis */
.wegweiser {
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius-klein);
  padding: 1rem 1.2rem;
  margin-bottom: 2.4rem;
}
.wegweiser strong {
  display: block;
  font-family: var(--schrift-display);
  color: var(--marke);
  margin-bottom: .5rem;
  font-size: .95rem;
}
.wegweiser ol {
  margin: 0; padding-left: 1.1rem;
  columns: 2; column-gap: 2rem;
}
.wegweiser li { font-size: .93rem; margin: .18rem 0; break-inside: avoid; }
@media (max-width: 620px) { .wegweiser ol { columns: 1; } }

/* ------------------------------------------------------------
   Funktions-Karten (App-Dokumentation)
   ------------------------------------------------------------ */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 .6rem;
}
.karte-f {
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 1px 3px rgba(6,24,60,.06);
  transition: transform .18s, box-shadow .18s;
}
.karte-f:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.karte-f h3 {
  margin: 0 0 .45rem;
  font-family: var(--schrift-display);
  font-size: 1.06rem;
  color: var(--marke);
  display: flex; align-items: center; gap: .55rem;
}
.karte-f .marke-icon {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  background: var(--akzent-hell);
  border-radius: 8px;
  color: var(--marke-mittel);
  font-size: .95rem;
}
.karte-f p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tinte-2); max-width: none; }
.karte-f ul { margin: .55rem 0 0; padding-left: 1.05rem; }
.karte-f li { font-size: .92rem; line-height: 1.55; color: var(--tinte-2); max-width: none; }

/* Hinweiskasten */
.hinweis {
  background: linear-gradient(180deg, #FFF8E6 0%, #FFF3D6 100%);
  border: 1px solid #F0DBA8;
  border-radius: var(--radius-klein);
  padding: .95rem 1.15rem;
  margin: 1.6rem 0;
}
.hinweis p { margin: 0; font-size: .95rem; color: #5A4200; max-width: none; }
.hinweis strong { color: #3A2500; }

/* ------------------------------------------------------------
   Store-Block
   ------------------------------------------------------------ */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.4rem 0 .4rem;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--marke);
  color: #fff;
  text-decoration: none;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(11,42,91,.28);
  transition: transform .15s, background .15s;
}
.store:hover { background: var(--marke-mittel); transform: translateY(-2px); color: #fff; }
.store small { display: block; font-weight: 400; font-size: .74rem; opacity: .8; }
.store svg { width: 22px; height: 22px; flex: none; fill: currentColor; }

/* Zurück-zur-Karte-Leiste am Seitenende */
.zurueck {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--glas-rand);
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
}
.zurueck a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; text-decoration: none;
  color: var(--marke); background: var(--akzent-hell);
  padding: .6rem 1.1rem; border-radius: 999px;
}
.zurueck a:hover { background: #D5E6FF; }

/* ------------------------------------------------------------
   Fußzeile
   ------------------------------------------------------------ */
.fuss {
  background: var(--tiefblau);
  color: #93AFD8;
  padding: 2.2rem 1.2rem;
  font-size: .9rem;
}
.fuss .innen {
  max-width: 940px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center;
}
.fuss a { color: #C3D8F7; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .rechts { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
@media (max-width: 620px) { .fuss .rechts { margin-left: 0; } }

/* ------------------------------------------------------------
   Forschungsseiten: Wertetabellen, Belege, Merksätze
   ------------------------------------------------------------ */
.tabelle-huelle { overflow-x: auto; margin: 1.3rem 0 1.8rem; }

table.werte {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein);
  overflow: hidden;
  font-size: .97rem;
}
table.werte caption {
  caption-side: top;
  text-align: left;
  font-size: .87rem;
  color: var(--tinte-2);
  padding: 0 0 .5rem;
}
table.werte th, table.werte td {
  padding: .68rem .9rem;
  border-bottom: 1px solid rgba(11,42,91,.09);
  text-align: left;
  vertical-align: top;
}
table.werte thead th {
  background: var(--marke);
  color: #fff;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: .92rem;
  border-bottom: 0;
}
table.werte tbody th {
  font-weight: 600;
  color: var(--tinte);
  background: rgba(11,42,91,.03);
  width: 46%;
}
table.werte tr:last-child th, table.werte tr:last-child td { border-bottom: 0; }
table.werte tr.hervor { background: #FFFAEF; }
table.werte tr.hervor td, table.werte tr.hervor th { background: #FFFAEF; }
table.werte .zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
table.werte .zahl.gut     { color: #1B7A46; }
table.werte .zahl.mittel  { color: #A96A00; }
table.werte .zahl.schlecht{ color: #B3261E; }

/* Belegverweis [1] */
a.beleg {
  display: inline-block;
  font-size: .74em;
  font-weight: 700;
  vertical-align: super;
  color: var(--marke-mittel);
  text-decoration: none;
  padding: 0 .12em;
  border-radius: 3px;
}
a.beleg:hover { background: var(--akzent-hell); color: var(--marke); }

/* Merksatz */
blockquote.merksatz {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--akzent-hell);
  border-left: 5px solid var(--akzent);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--tinte);
}
blockquote.merksatz.warnung {
  background: #FFF3F2;
  border-left-color: var(--warn);
}

/* Nummerierte Kernaussagen */
ol.fazit { counter-reset: f; list-style: none; padding: 0; margin: 1.4rem 0; }
ol.fazit li {
  counter-increment: f;
  position: relative;
  padding: .7rem 0 .7rem 3rem;
  border-bottom: 1px solid var(--glas-rand);
  max-width: 72ch;
}
ol.fazit li:last-child { border-bottom: 0; }
ol.fazit li::before {
  content: counter(f);
  position: absolute; left: 0; top: .62rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  background: var(--marke); color: #fff;
  border-radius: 50%;
  font-family: var(--schrift-display);
  font-weight: 700; font-size: .92rem;
}

/* Quellenverzeichnis */
ol.quellenliste { padding-left: 1.4rem; }
ol.quellenliste li {
  margin: .7rem 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--tinte-2);
  max-width: 76ch;
}
ol.quellenliste i { color: var(--tinte); }

@media (max-width: 620px) {
  table.werte { font-size: .9rem; }
  table.werte tbody th { width: auto; }
}

/* ============================================================
   Sender-Seite: Kennzahl-Kacheln, SVG-Grafiken, Empfangswege
   ============================================================ */

/* Titelblock mit Bernstein-Akzent statt reinem Blau */
.titel-sender {
  background:
    radial-gradient(70% 100% at 88% 0%, #1B4A8F 0%, transparent 60%),
    radial-gradient(90% 120% at 10% 100%, #123163 0%, var(--tiefblau) 70%);
}

/* Statusband „In Entwicklung" */
.stand-band {
  display: inline-flex;
  align-items: flex-start;
  gap: .95rem;
  margin-top: 1.8rem;
  padding: .85rem 1.35rem .85rem 1.1rem;
  background: rgba(255, 179, 0, .13);
  border: 1px solid rgba(255, 179, 0, .5);
  border-radius: var(--radius);
  max-width: 62ch;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stand-band strong {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--fund);
  letter-spacing: .01em;
}
.stand-band span:not(.stand-punkt) {
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  color: #C3D8F7;
  margin-top: .18rem;
}
.stand-punkt {
  width: 12px; height: 12px; flex: none;
  margin-top: .38rem;
  border-radius: 50%;
  background: var(--fund);
  box-shadow: 0 0 0 5px rgba(255, 179, 0, .22);
  animation: standpuls 2.4s ease-in-out infinite;
}
@keyframes standpuls {
  50% { box-shadow: 0 0 0 10px rgba(255, 179, 0, .06); }
}
@media (prefers-reduced-motion: reduce) { .stand-punkt { animation: none; } }

/* Kennzahl-Kacheln */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .9rem;
  margin: 1.5rem 0 .9rem;
}
.kachel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--marke) 0%, var(--tiefblau) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.2rem;
  box-shadow: var(--schatten);
}
.kachel::after {
  content: "";
  position: absolute;
  right: -34px; top: -34px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(47, 139, 255, .22);
}
.kachel strong {
  display: block;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 2.15rem;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--fund);
}
.kachel .einheit {
  font-size: .92rem;
  font-weight: 600;
  color: #C3D8F7;
  letter-spacing: 0;
}
.kachel-name {
  display: block;
  margin-top: .55rem;
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
}
.kachel-hinweis {
  display: block;
  margin-top: .18rem;
  font-size: .8rem;
  line-height: 1.4;
  color: #9DBBE6;
}
.unter-kacheln { margin-top: 1.1rem; }

/* SVG-Grafiken */
.grafik-huelle {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.3rem;
  margin: 1.5rem 0 2rem;
  box-shadow: 0 1px 3px rgba(6, 24, 60, .06);
}
svg.grafik {
  display: block;
  width: 100%;
  min-width: 480px;
  height: auto;
}
svg.grafik .svg-titel {
  font-family: var(--schrift-display);
  font-size: 17px;
  font-weight: 700;
  fill: var(--marke);
}
svg.grafik .svg-label {
  font-family: var(--schrift-text);
  font-size: 14px;
  font-weight: 600;
  fill: var(--tinte-2);
}
svg.grafik .svg-wert {
  font-family: var(--schrift-text);
  font-size: 15px;
  font-weight: 700;
  fill: var(--tinte);
}
svg.grafik .svg-wert.stark {
  font-size: 19px;
  font-weight: 800;
  fill: var(--fund-dunkel);
}
svg.grafik .svg-fuss {
  font-family: var(--schrift-text);
  font-size: 12.5px;
  fill: var(--tinte-3);
}

/* Breites Foto mit Bildunterschrift daneben */
.bild-breit {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten);
}
figure.foto-sender { flex-direction: column; align-items: flex-start; gap: .7rem; }
figure.foto-sender figcaption { max-width: 62ch; padding-top: 0; }

/* Die vier Empfangswege */
.wege { display: grid; gap: .9rem; margin: 1.5rem 0 .6rem; }
.weg {
  display: flex;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem 1.25rem 1.1rem;
  box-shadow: 0 1px 3px rgba(6, 24, 60, .06);
  transition: transform .18s, box-shadow .18s, border-left-color .18s;
}
.weg:hover {
  transform: translateY(-2px);
  box-shadow: var(--schatten);
  border-left-color: var(--fund);
}
.weg-nr {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: var(--akzent-hell);
  color: var(--marke);
  border-radius: 50%;
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1.12rem;
}
.weg-inhalt { min-width: 0; }
.weg h3 {
  margin: .1rem 0 .45rem;
  font-family: var(--schrift-display);
  font-size: 1.1rem;
  color: var(--marke);
  display: flex; align-items: center; gap: .55rem;
}
.weg-icon { font-size: 1.05rem; }
.weg p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--tinte-2); max-width: 62ch; }
.weg ul { margin: .6rem 0 0; padding-left: 1.05rem; }
.weg li { font-size: .92rem; line-height: 1.55; color: var(--tinte-2); max-width: none; }

/* Hinweiskasten „Stand der Entwicklung" — kräftiger als der Standard */
.hinweis.hinweis-stand {
  border-left: 5px solid var(--fund);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

/* Hinweis, dass eine breite Grafik/Tabelle seitlich verschiebbar ist */
.schiebe-hinweis {
  display: none;
  align-items: center;
  gap: .4rem;
  margin: -.9rem 0 1.4rem;
  font-size: .84rem;
  color: var(--tinte-3);
}
.schiebe-hinweis::before { content: "↔"; font-size: 1rem; color: var(--akzent); }

@media (max-width: 720px) {
  .schiebe-hinweis { display: flex; }
  /* Beschriftung in den Grafiken vergrößern, damit sie beim Schieben lesbar bleibt */
  svg.grafik .svg-titel { font-size: 21px; }
  svg.grafik .svg-label { font-size: 18px; }
  svg.grafik .svg-wert  { font-size: 19px; }
  svg.grafik .svg-wert.stark { font-size: 24px; }
  svg.grafik .svg-fuss  { font-size: 16px; }
}

@media (max-width: 620px) {
  .stand-band { gap: .7rem; padding: .75rem 1rem .75rem .9rem; }
  .kachel strong { font-size: 1.85rem; }
  .weg { flex-direction: column; gap: .7rem; }
  .weg-nr { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
  .grafik-huelle { padding: .9rem .9rem 1rem; }
}

/* ============================================================
   Anmeldeseite und Formulare
   ============================================================ */
body.konto-seite { background: var(--tiefblau); }
html:has(body.konto-seite) { background: var(--tiefblau); }

.konto-buehne {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(80% 100% at 75% 0%, #14356E 0%, var(--tiefblau) 70%);
  position: relative;
  overflow: hidden;
}
.konto-buehne::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .10;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'>\
<path d='M28 0l28 16v33L28 65 0 49V16z' fill='none' stroke='%232F8BFF' stroke-width='1.4'/>\
<path d='M28 65l28 16v33L28 130 0 114V81z' fill='none' stroke='%232F8BFF' stroke-width='1.4'/>\
</svg>");
}
.konto-karte {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--schatten-tief);
  padding: 2rem 1.9rem 1.5rem;
}
.konto-marke {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-bottom: 1.1rem;
  font-family: var(--schrift-display); font-weight: 700;
  font-size: 1.16rem; color: var(--marke);
}
.konto-marke b { color: var(--akzent); font-weight: 700; }
.konto-hinweis-oben {
  font-size: .89rem; line-height: 1.5; color: var(--tinte-2);
  background: var(--akzent-hell);
  border-radius: var(--radius-klein);
  padding: .7rem .85rem; margin: 0 0 1.4rem;
}
.konto-form h1 {
  font-family: var(--schrift-display); font-weight: 800;
  font-size: 1.55rem; color: var(--tinte); margin: 0 0 1.1rem;
  letter-spacing: -.01em;
}
.konto-info { font-size: .93rem; color: var(--tinte-2); margin: -.5rem 0 1.1rem; line-height: 1.55; }

/* Anbieter-Knöpfe */
.anbieter { display: grid; gap: .6rem; }
.anbieter-knopf {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; padding: .82rem 1rem;
  font: 600 .97rem var(--schrift-text);
  border-radius: 11px; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.anbieter-knopf:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(6,24,60,.18); }
.anbieter-knopf.google { background: #fff; color: #1F1F1F; border: 1.5px solid #DADCE0; }
.anbieter-knopf.google:hover { background: #F8F9FA; }
.anbieter-knopf.apple { background: #000; color: #fff; border: 1.5px solid #000; }
.anbieter-knopf.apple:hover { background: #1A1A1A; }

.trenner {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0 1.1rem;
  color: var(--tinte-3); font-size: .84rem;
}
.trenner::before, .trenner::after {
  content: ""; flex: 1; height: 1px; background: var(--glas-rand);
}

/* Felder — auch vom Kontakt- und Meldeformular genutzt */
.feld { margin-bottom: 1rem; }
.feld label {
  display: block; font-weight: 600; font-size: .9rem;
  color: var(--tinte); margin-bottom: .35rem;
}
.feld .freiwillig {
  font-weight: 400; font-size: .78rem; color: var(--tinte-3);
  background: rgba(11,42,91,.06); border-radius: 999px; padding: .1rem .5rem;
  margin-left: .35rem;
}
.feld input, .feld select, .feld textarea {
  width: 100%;
  font: 400 1rem var(--schrift-text);
  color: var(--tinte);
  background: #fff;
  border: 1.5px solid #D5DCE8;
  border-radius: 10px;
  padding: .74rem .85rem;
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: var(--fokus);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--tinte-3); }
.feld-hilfe { display: block; font-size: .8rem; color: var(--tinte-3); margin-top: .3rem; }
.code-feld {
  font-family: var(--schrift-display) !important;
  font-size: 1.5rem !important;
  letter-spacing: .5em; text-align: center;
}
.pflicht { color: var(--warn); }
.feld-fallgrube { position: absolute; left: -9999px; }

.konto-knopf, .knopf-senden {
  display: block; width: 100%;
  font: 700 1rem var(--schrift-text);
  color: #fff; text-align: center; text-decoration: none;
  background: linear-gradient(160deg, var(--marke-mittel) 0%, var(--marke) 100%);
  border: 0; border-radius: 11px; padding: .88rem 1rem;
  cursor: pointer; margin-top: .4rem;
  box-shadow: 0 4px 14px rgba(11,42,91,.3);
  transition: transform .12s, box-shadow .12s, opacity .15s;
}
.konto-knopf:hover, .knopf-senden:hover {
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,42,91,.4); color: #fff;
}
.konto-knopf:disabled, .knopf-senden:disabled { opacity: .6; cursor: default; transform: none; }

.konto-fehler {
  display: none; margin: .2rem 0 .6rem;
  font-size: .89rem; line-height: 1.45;
  background: #FFF3F2; color: #A5211B;
  border-left: 3px solid var(--warn);
  border-radius: 0 8px 8px 0; padding: .6rem .75rem;
}
.konto-fehler.sichtbar { display: block; }
.konto-fehler.gut {
  background: #EDF8F1; color: #1B6B3E; border-left-color: #2E9E5B;
}

.konto-links {
  display: flex; flex-direction: column; gap: .5rem;
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--glas-rand);
}
.konto-links a {
  font-size: .9rem; color: var(--marke-mittel); text-decoration: none; font-weight: 600;
}
.konto-links a:hover { color: var(--akzent); text-decoration: underline; }

.haken {
  width: 56px; height: 56px; margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: #EDF8F1; color: #2E9E5B;
  border-radius: 50%; font-size: 1.8rem; font-weight: 700;
}
#f-fertig { text-align: center; }
#f-fertig .konto-links { align-items: center; }

.konto-fuss {
  margin: 1.4rem 0 0; text-align: center;
  font-size: .82rem; color: var(--tinte-3);
}
.konto-fuss a { color: var(--tinte-2); text-decoration: none; }
.konto-fuss a:hover { color: var(--marke); text-decoration: underline; }

/* Kontaktformular auf heller Seite */
.formular {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: 0 1px 3px rgba(6,24,60,.06); max-width: 620px;
}
.zaehler { display: block; text-align: right; font-size: .78rem; color: var(--tinte-3); margin-top: .25rem; }
.formular-recht { font-size: .84rem; line-height: 1.5; color: var(--tinte-2); margin: 1rem 0; }
.formular-meldung { display: none; margin-top: .9rem; font-size: .92rem; padding: .7rem .85rem; border-radius: 8px; }
.formular-meldung.erfolg { display: block; background: #EDF8F1; color: #1B6B3E; }
.formular-meldung.fehler { display: block; background: #FFF3F2; color: #A5211B; }

/* Rechtsseiten */
.titel.schmal { padding-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.rechtskarte {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  margin: 0 0 1.1rem; max-width: 620px;
}
.rechtskarte h2 {
  margin: 0 0 .7rem; padding: 0; border: 0;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-3); font-family: var(--schrift-text); font-weight: 700;
}
.imp-bild { display: inline-block; height: auto; max-width: 100%; }
.imp-bild.imp-block { display: block; }
.imp-zeile { margin: .2rem 0 .5rem; }
.imp-land { margin: 0; color: var(--tinte); font-size: 1.02rem; }
.imp-hinweis { font-size: .88rem; color: var(--tinte-2); margin: .6rem 0 0; }
.rechtsliste { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.rechtsliste dt { font-weight: 600; color: var(--tinte-2); font-size: .93rem; }
.rechtsliste dd { margin: 0; color: var(--tinte); font-size: .95rem; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .konto-karte { padding: 1.6rem 1.3rem 1.3rem; border-radius: 16px; }
  .konto-form h1 { font-size: 1.35rem; }
}

/* ============================================================
   Melde-Seite
   ============================================================ */
.melde-blatt { max-width: 780px; }

.melde-block {
  background: #fff;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 3px rgba(6,24,60,.06);
}
.melde-block h2 {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 .5rem; padding: 0; border: 0;
  font-family: var(--schrift-display); font-size: 1.22rem; color: var(--tinte);
}
.melde-block h2 .schritt {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--marke); color: #fff;
  border-radius: 50%; font-size: .92rem; font-weight: 700;
}
.melde-block h2 .freiwillig {
  font: 400 .74rem var(--schrift-text); color: var(--tinte-3);
  background: rgba(11,42,91,.06); border-radius: 999px; padding: .16rem .6rem;
}
.melde-hilfe {
  font-size: .93rem; line-height: 1.6; color: var(--tinte-2);
  margin: 0 0 1rem; max-width: none;
}

/* Ortssuche und Karte */
.suchzeile { display: flex; gap: .6rem; margin-bottom: .9rem; }
.suchzeile input {
  flex: 1; font: 400 1rem var(--schrift-text);
  border: 1.5px solid #D5DCE8; border-radius: 10px; padding: .7rem .85rem;
}
.suchzeile input:focus { outline: none; border-color: var(--akzent); box-shadow: var(--fokus); }
.suchzeile button {
  font: 600 .95rem var(--schrift-text); color: var(--marke);
  background: var(--akzent-hell); border: 0; border-radius: 10px;
  padding: .7rem 1.2rem; cursor: pointer;
}
.suchzeile button:hover { background: #D5E6FF; }

.melde-karte {
  height: 340px; border-radius: var(--radius-klein);
  overflow: hidden; border: 1px solid var(--glas-rand);
  background: var(--papier);
}
.melde-marke {
  width: 26px; height: 26px; cursor: grab;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--fund);
  border: 2.5px solid #3A2500;
  box-shadow: 0 3px 10px rgba(6,24,60,.35);
}
.ort-zeile {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .7rem .9rem;
  background: var(--papier); border-radius: var(--radius-klein);
}
.ort-kennung { font-size: .84rem; color: var(--tinte-3); font-weight: 600; }
.ort-wert {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--tinte-3); font-size: .98rem;
}
.ort-wert.gesetzt { color: var(--marke); }

/* Auswahlkarten für den Status */
.wahlkarten { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wahlkarte { cursor: pointer; }
.wahlkarte input { position: absolute; opacity: 0; }
.wahl-inhalt {
  display: block; height: 100%;
  padding: 1rem .95rem;
  border: 2px solid #DFE5EF; border-radius: var(--radius-klein);
  transition: border-color .15s, background .15s, transform .12s;
}
.wahlkarte:hover .wahl-inhalt { border-color: var(--akzent); transform: translateY(-1px); }
.wahlkarte input:checked + .wahl-inhalt {
  border-color: var(--fund); background: #FFFAEF;
  box-shadow: 0 0 0 3px rgba(255,179,0,.18);
}
.wahlkarte input:focus-visible + .wahl-inhalt { box-shadow: var(--fokus); }
.wahl-symbol { display: block; font-size: 1.5rem; margin-bottom: .3rem; }
.wahl-titel { display: block; font-weight: 700; color: var(--tinte); margin-bottom: .2rem; }
.wahl-text { display: block; font-size: .85rem; color: var(--tinte-2); line-height: 1.45; }

/* Fotos */
.foto-bereich { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foto-knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .96rem var(--schrift-text); color: var(--marke);
  background: var(--akzent-hell); border: 2px dashed var(--akzent);
  border-radius: var(--radius-klein); padding: .85rem 1.3rem; cursor: pointer;
  transition: background .15s;
}
.foto-knopf:hover { background: #D5E6FF; }
#m-fotowahl:disabled + .foto-zahl { color: var(--warn); }
.foto-zahl { font-size: .88rem; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.fotoliste { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.foto-kachel { position: relative; width: 104px; height: 104px; }
.foto-kachel img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-klein); border: 1px solid var(--glas-rand);
}
.foto-weg {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--warn); color: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Flugrichtung */
.richtungszeile { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.kompass {
  position: relative; width: 66px; height: 66px; flex: none;
  border: 2px solid var(--glas-rand); border-radius: 50%;
  background: #fff;
}
.kompass-n {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; color: var(--tinte-3);
}
.nadel {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 24px; margin-left: -1.5px; margin-top: -24px;
  background: linear-gradient(to top, var(--fund-dunkel), var(--fund));
  border-radius: 2px; transform-origin: 50% 100%;
  transition: transform .2s;
}
.nadel::after {
  content: ""; position: absolute; top: -5px; left: -3.5px;
  border: 5px solid transparent; border-bottom-color: var(--fund);
}
.richtung-regler { flex: 1; min-width: 200px; }
.richtung-regler input[type=range] { width: 100%; accent-color: var(--akzent); }
.richtung-text { display: block; font-size: .9rem; color: var(--tinte-2); margin-top: .3rem; }

.feld-paar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .feld-paar { grid-template-columns: 1fr; } }

.knopf-senden.gross { font-size: 1.08rem; padding: 1.05rem 1rem; }

/* Nach dem Absenden */
.fertig-block {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 2.2rem 1.7rem;
  text-align: center; box-shadow: var(--schatten);
}
.fertig-block h2 { border: 0; padding: 0; justify-content: center; }
.fertig-block p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.fertig-knoepfe {
  display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem;
}
.fertig-knoepfe .konto-knopf { width: auto; padding: .85rem 1.8rem; }
.knopf-zweit {
  display: inline-block; font-weight: 600; text-decoration: none;
  color: var(--marke); background: var(--akzent-hell);
  border-radius: 11px; padding: .85rem 1.6rem;
}
.knopf-zweit:hover { background: #D5E6FF; }

@media (max-width: 620px) {
  .melde-block { padding: 1.2rem 1.1rem; }
  .melde-karte { height: 300px; }
}

/* Quellen-Punkte in der Datenquellen-Tabelle */
.q-punkt {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 50%; margin-right: .5rem; vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(6,24,60,.25);
}
.q-punkt.eigene { background: #FFB300; border-radius: 3px; box-shadow: 0 0 0 2px rgba(255,179,0,.25); }
.q-punkt.gbif { background: #6FA8DC; }
.q-punkt.inat { background: #74C69D; }
.q-punkt.obs  { background: #B39DDB; }

/* ============================================================
   Warnungs-Seite: Standorte, Umkreis, Kanäle
   ============================================================ */
.stand-band {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1.1rem; margin-bottom: 1.2rem;
  border-radius: var(--radius-klein);
  font-size: .95rem; font-weight: 600;
}
.stand-band.aktiv  { background: #EDF8F1; color: #1B6B3E; }
.stand-band.wartet { background: #FFF8E6; color: #7A5A00; }

.warn-marke {
  width: 26px; height: 26px; cursor: grab;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--akzent); border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(6,24,60,.4);
}

.ortliste { display: grid; gap: .8rem; margin-top: 1rem; }
.leer-hinweis {
  font-size: .93rem; color: var(--tinte-2); background: var(--papier);
  border-radius: var(--radius-klein); padding: 1rem 1.1rem; margin: 0;
  border: 1px dashed var(--glas-rand);
}
.ort-karte {
  border: 1px solid var(--glas-rand); border-radius: var(--radius-klein);
  padding: .9rem 1rem; background: #fff;
}
.ort-kopf { display: flex; gap: .6rem; align-items: center; }
.ort-name {
  flex: 1; font: 600 .98rem var(--schrift-text); color: var(--tinte);
  border: 0; border-bottom: 1.5px solid var(--glas-rand);
  padding: .3rem 0; background: transparent;
}
.ort-name:focus { outline: none; border-bottom-color: var(--akzent); }
.ort-name::placeholder { font-weight: 400; color: var(--tinte-3); }
.ort-weg {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%;
  background: rgba(229,72,77,.1); color: var(--warn);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ort-weg:hover { background: var(--warn); color: #fff; }
.ort-koord {
  font-size: .84rem; color: var(--tinte-3);
  font-variant-numeric: tabular-nums; margin: .35rem 0 .7rem;
}
.radiuswahl { display: flex; gap: .4rem; flex-wrap: wrap; }
.radiuswahl button {
  font: 600 .86rem var(--schrift-text); color: var(--tinte-2);
  background: rgba(11,42,91,.06); border: 1.5px solid transparent;
  border-radius: 999px; padding: .4rem .9rem; cursor: pointer;
  transition: all .15s;
}
.radiuswahl button:hover { background: var(--akzent-hell); }
.radiuswahl button[aria-pressed="true"] {
  background: var(--marke); color: #fff; border-color: var(--marke);
}

/* Schalter für Push */
.schalterzeile { margin-top: .4rem; }
.schalter { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; }
.schalter-bahn {
  position: relative; flex: none; width: 48px; height: 28px; margin-top: 2px;
  background: #CBD4E2; border-radius: 999px; transition: background .18s;
}
.schalter-bahn::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s;
}
.schalter input:checked + .schalter-bahn { background: var(--akzent); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter-bahn { box-shadow: var(--fokus); }
.schalter input:disabled + .schalter-bahn { opacity: .45; }
.schalter-text b { display: block; color: var(--tinte); font-size: .98rem; }
.schalter-text small {
  display: block; color: var(--tinte-2); font-size: .86rem;
  line-height: 1.5; margin-top: .2rem; max-width: 46ch;
}
.push-stand { font-size: .88rem; color: var(--tinte-2); margin: .7rem 0 0; }
.push-stand.gut { color: #1B6B3E; }
.push-stand.schlecht { color: #A5211B; }

.abmelden-zeile { text-align: center; margin: 1.4rem 0 0; }
.knopf-schlicht {
  background: none; border: 0; cursor: pointer;
  font: 600 .9rem var(--schrift-text); color: var(--tinte-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.knopf-schlicht:hover { color: var(--warn); }

/* ============================================================
   Meine Meldungen
   ============================================================ */
.zahlenband {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  margin-bottom: 1.4rem;
}
.zahl-kachel {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 1.1rem .8rem; text-align: center;
}
.zahl-kachel b {
  display: block; font-family: var(--schrift-display); font-weight: 800;
  font-size: 1.9rem; color: var(--marke); font-variant-numeric: tabular-nums;
  line-height: 1;
}
.zahl-kachel span { display: block; font-size: .84rem; color: var(--tinte-2); margin-top: .3rem; }

.lade-hinweis { font-size: .92rem; color: var(--tinte-3); margin: 0 0 1rem; }

.meldungsliste { display: grid; gap: .9rem; }
.meldung-karte {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
}
.meldung-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.meldung-kopf b { font-family: var(--schrift-display); color: var(--tinte); font-size: 1.02rem; }
.meldung-kopf time { margin-left: auto; font-size: .84rem; color: var(--tinte-3); }
.status-punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.status-punkt.offen    { background: var(--fund); box-shadow: 0 0 0 3px rgba(255,179,0,.22); }
.status-punkt.nest     { background: var(--warn); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.status-punkt.erledigt { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); }

.meldung-zeile { display: flex; gap: .8rem; flex-wrap: wrap; margin: .5rem 0 0; }
.meldung-koord {
  font-size: .85rem; color: var(--tinte-3); font-variant-numeric: tabular-nums;
}
.meldung-merkmal {
  font-size: .8rem; color: var(--tinte-2);
  background: rgba(11,42,91,.06); border-radius: 999px; padding: .15rem .6rem;
}
.meldung-notiz {
  margin: .7rem 0 0; font-size: .93rem; color: var(--tinte-2);
  border-left: 3px solid var(--akzent-hell); padding-left: .8rem; max-width: none;
}
.meldung-fuss {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--glas-rand);
}
.pruef-band {
  font-size: .84rem; font-weight: 600; border-radius: 999px; padding: .25rem .8rem;
}
.pruef-band.gut      { background: #EDF8F1; color: #1B6B3E; }
.pruef-band.offen    { background: #FFF8E6; color: #7A5A00; }
.pruef-band.schlecht { background: #FFF3F2; color: #A5211B; }
.meldung-link {
  margin-left: auto; font-size: .88rem; font-weight: 600;
  color: var(--marke-mittel); text-decoration: none;
}
.meldung-link:hover { color: var(--akzent); text-decoration: underline; }

.leer-block {
  text-align: center; background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 2.6rem 1.6rem;
}
.leer-zeichen { color: var(--tinte-3); opacity: .5; margin-bottom: .8rem; }
.leer-block h2 { border: 0; padding: 0; margin: 0 0 .5rem; justify-content: center; }
.leer-block p { max-width: 46ch; margin: 0 auto 1.4rem; color: var(--tinte-2); }
.leer-block .konto-knopf { width: auto; display: inline-block; padding: .8rem 1.8rem; }

@media (max-width: 520px) {
  .zahlenband { gap: .5rem; }
  .zahl-kachel { padding: .9rem .4rem; }
  .zahl-kachel b { font-size: 1.5rem; }
}

/* ============================================================
   Wochenberichte — Kurzfassung, Zahlen, Artikellisten
   ============================================================ */
.kurzfassung {
  background: linear-gradient(180deg, #FFFAEF 0%, #FFF6E2 100%);
  border: 1px solid #F0DBA8;
  border-left: 5px solid var(--fund);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.6rem;
}
.kurzfassung h2 {
  margin: 0 0 .7rem; padding: 0; border: 0;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  color: #7A5A00; font-family: var(--schrift-text); font-weight: 700;
}
.kurzfassung ul { margin: 0; padding-left: 1.1rem; }
.kurzfassung li {
  font-size: 1.03rem; line-height: 1.6; color: #3A2500;
  margin: .35rem 0; max-width: 68ch;
}
.kurzfassung li::marker { color: var(--fund-dunkel); }

.lage-kacheln {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  margin: 0 0 1.6rem;
}
.lage-kachel {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein); padding: .9rem .7rem; text-align: center;
}
.lage-kachel b {
  display: block; font-family: var(--schrift-display); font-weight: 800;
  font-size: 1.5rem; color: var(--marke); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lage-kachel span { display: block; font-size: .78rem; color: var(--tinte-2); margin-top: .2rem; }

.lage-grafik { margin: 0 0 2rem; }
.lage-grafik svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--glas-rand); border-radius: var(--radius-klein);
}
.lage-grafik figcaption {
  font-size: .82rem; color: var(--tinte-3); margin-top: .5rem; line-height: 1.45;
}

.thema { margin: 1.8rem 0; }
.thema h3 {
  font-family: var(--schrift-display); font-size: 1.08rem; color: var(--marke);
  margin: 0 0 .6rem;
}
.artikelliste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.artikelliste li {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein); padding: .75rem .9rem; max-width: none;
}
.artikelliste a {
  display: block; font-weight: 600; font-size: .97rem; line-height: 1.45;
  color: var(--tinte); text-decoration: none;
}
.artikelliste a:hover { color: var(--marke-mittel); text-decoration: underline; }
.quelle-marke {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--tinte-3); margin-top: .3rem;
}
.quelle-marke i {
  font-style: normal; font-weight: 700; font-size: .7rem;
  background: var(--akzent-hell); color: var(--marke);
  border-radius: 4px; padding: .1rem .4rem;
}
.artikelliste.wissenschaft li { border-left: 3px solid var(--akzent); }

.laenderband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .6rem; margin: 1rem 0 1.6rem;
}
.land-kachel {
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein); padding: .7rem .5rem; text-align: center;
}
.land-kachel b {
  display: block; font-family: var(--schrift-display); font-weight: 700;
  font-size: 1.25rem; color: var(--marke);
}
.land-kachel span { display: block; font-size: .76rem; color: var(--tinte-2); }

.bericht-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin: 2.4rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--glas-rand);
}
.bericht-nav a {
  font-size: .92rem; font-weight: 600; color: var(--marke-mittel);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.bericht-nav a:hover { color: var(--akzent); }
.bericht-nav .mitte { color: var(--tinte-3); }

/* Übersicht */
.wochenliste { display: grid; gap: .9rem; }
.wochen-karte {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.wochen-karte:hover {
  transform: translateY(-2px); box-shadow: var(--schatten);
  border-color: var(--akzent);
}
.wochen-kopf {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--tinte-3); margin-bottom: .4rem;
}
.wochen-kw {
  font-weight: 700; color: var(--marke); font-variant-numeric: tabular-nums;
  background: var(--akzent-hell); border-radius: 999px; padding: .15rem .7rem;
}
.wochen-karte h3 {
  font-family: var(--schrift-display); font-size: 1.12rem; color: var(--tinte);
  margin: 0 0 .4rem;
}
.wochen-karte p {
  font-size: .94rem; color: var(--tinte-2); line-height: 1.55;
  margin: 0 0 .7rem; max-width: none;
}
.wochen-fuss {
  display: flex; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--tinte-3);
}
.wochen-fuss span {
  background: rgba(11,42,91,.05); border-radius: 999px; padding: .15rem .6rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .lage-kacheln { grid-template-columns: repeat(2, 1fr); }
  .kurzfassung { padding: 1.1rem 1.2rem; }
  .kurzfassung li { font-size: .98rem; }
}

/* Zitationsnetz — Verweise und Paare */
.verweisliste { list-style: none; padding: 0; margin: 1rem 0 1.8rem; display: grid; gap: .55rem; }
.verweisliste li {
  background: #fff; border: 1px solid var(--glas-rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein); padding: .8rem .95rem; max-width: none;
}
.verweis-titel { font-weight: 600; font-size: .97rem; line-height: 1.45; color: var(--tinte); }
.verweis-titel a { color: var(--tinte); text-decoration: none; }
.verweis-titel a:hover { color: var(--marke-mittel); text-decoration: underline; }
.verweis-fuss {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--tinte-3); margin-top: .35rem;
}
.zitatzahl {
  background: var(--akzent-hell); color: var(--marke);
  border-radius: 999px; padding: .1rem .55rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nutzung {
  background: #FFF8E6; color: #7A5A00;
  border-radius: 999px; padding: .1rem .55rem; font-weight: 600;
}

.paarliste { list-style: none; padding: 0; margin: 1rem 0 1.8rem; display: grid; gap: .5rem; }
.paarliste li {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--glas-rand);
  border-radius: var(--radius-klein); padding: .7rem .95rem; max-width: none;
}
.paar-zahl {
  flex: none; min-width: 44px; text-align: center;
  font-family: var(--schrift-display); font-weight: 800; font-size: 1.1rem;
  color: var(--marke); font-variant-numeric: tabular-nums;
}
.paar-text { font-size: .94rem; line-height: 1.5; color: var(--tinte-2); }
.paar-text b { color: var(--tinte); font-weight: 600; }