/* ==========================================================================
   LSGS – Ergänzungen: Bildsektionen, Personen mit Foto, Captcha und der
   komplette Mitgliederbereich (Wetter, Webcams, Weight & Balance).
   Baut auf site.css auf.
   ========================================================================== */

/* ------------------------------------------------ Abschnitt mit Bildgrund */

.section-bild {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(3rem, 2.5rem + 4vw, 5.5rem);
}
.section-bild__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.section-bild__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(1, 42, 92, .9) 0%, rgba(1, 61, 134, .68) 100%);
  z-index: -1;
}
.section-bild__inner { max-width: 46rem; }
.section-bild h2 { color: #fff; }
.section-bild p { color: rgba(255, 255, 255, .93); margin-bottom: 0; }

/* ------------------------------------------------------ Personen mit Foto */

.person__foto {
  grid-row: 1 / 3;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grau-200);
}

/* --------------------------------------------------------- Chronikbilder */

.chronik__bild { margin: 1rem 0 0; }
.chronik__bild img {
  width: 100%;
  max-width: 28rem;
  border-radius: var(--radius);
}

.bildreihe--klein { margin-top: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.bildreihe--klein img { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------- Captcha */

.field--captcha { max-width: 24rem; }
.captcha__bild {
  margin-bottom: .5rem;
  display: inline-block;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grau-50);
  line-height: 0;
}
.captcha__frage {
  margin: 0 0 .5rem;
  padding: .6rem .8rem;
  background: var(--grau-50);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  font-family: var(--schrift-kopf);
  font-weight: 600;
}
.field--captcha input[type="text"] { max-width: 12rem; }

/* ==================================================== Mitgliederbereich == */

.intern-menue {
  background: var(--blau-dunkel);
  position: sticky;
  top: var(--kopfhoehe);
  z-index: 40;
}
.intern-menue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.intern-menue a {
  display: inline-block;
  padding: .85rem 1rem;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 3px solid transparent;
}
.intern-menue a:hover { color: #fff; }
.intern-menue a.ist-aktiv { color: #fff; border-bottom-color: var(--gold); }

/* Sieben Reiter (mit „Aufgaben“, derzeit ausgeblendet) brauchen rund
   1.010 px; zwischen 1024 und 1199 px wird der Innenabstand knapper, damit
   sie in eine Zeile passen. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .intern-menue ul { gap: 0; }
  .intern-menue a { padding-inline: .75rem; }
}

/* Unter 1024 px: Die Reiter brächen ohnehin um und wären als lose
   Textzeilen kaum auseinanderzuhalten. Deshalb eigenständige Schaltflächen,
   jede mit Fläche und Rand; die aktive Seite füllt sich gold – auf dem
   Tablet drei, auf dem Handy zwei je Zeile (bei sieben Punkten Tablet vier).
   Das Menü klebt dann nicht mehr,
   weil es mit mehreren Zeilen zu viel vom Bildschirm belegen würde. */
@media (max-width: 1023px) {
  .intern-menue { position: static; padding-block: .85rem; }
  .intern-menue ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
  }
  .intern-menue li { display: flex; min-width: 0; }
  .intern-menue a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem .6rem;
    hyphens: auto;
    font-size: .9rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius);
  }
  .intern-menue a:hover { background: rgba(255, 255, 255, .16); }
  .intern-menue a.ist-aktiv {
    color: var(--blau-dunkel);
    background: var(--gold);
    border-color: var(--gold);
  }
}
@media (max-width: 640px) {
  .intern-menue ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ungerade Zahl: der letzte Punkt nimmt die ganze Zeile */
  .intern-menue li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Unter 360px passt "Bordbuchrechner" sonst nicht in die halbe Breite */
@media (max-width: 359px) {
  .intern-menue a { padding-inline: .4rem; font-size: .8rem; }
}

.intern-block {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
}
.intern-block h2 { font-size: 1.25rem; }
.intern-block__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.intern-block__kopf h2 { margin-bottom: .5rem; }
.intern-block__stand { font-size: .88rem; color: var(--gedaempft); margin: 0 0 .75rem; }
.intern-block__fuss {
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--grau-100);
  font-size: .85rem;
  color: var(--gedaempft);
}

.intern-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.75rem;
}
@media (min-width: 960px) {
  .intern-raster { grid-template-columns: 1fr 1.2fr; }
}

/* ----------------------------------------------------------- Platzwetter */

.wetter-piste {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blau);
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}

.wetter-kacheln {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: .9rem;
}
.wetter-kacheln li {
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  text-align: center;
}
.wetter-kacheln__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.wetter-kacheln__wert {
  display: block;
  font-family: var(--schrift-kopf);
  font-size: 1.6rem;
  color: var(--blau);
  line-height: 1.2;
}
.wetter-kacheln__einheit { display: block; font-size: .82rem; color: var(--gedaempft); }

.werte-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.werte-tabelle th,
.werte-tabelle td {
  text-align: left;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--grau-100);
  font-weight: 400;
}
.werte-tabelle thead th {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gedaempft);
  background: var(--grau-50);
}
.werte-tabelle tbody th { font-weight: 600; color: var(--headline); }
.werte-tabelle tfoot td,
.werte-tabelle tfoot th {
  border-top: 2px solid var(--grau-300);
  font-weight: 600;
  color: var(--headline);
}
.werte-tabelle tr.ist-fest { color: var(--gedaempft); }
.tabelle-scroll { overflow-x: auto; position: relative; }

/* --------------------------------------------------------------- Webcams */

.webcams { display: grid; gap: 1rem; }
.webcam { margin: 0; }
.webcam img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--grau-200);
}
.webcam figcaption { margin-top: .4rem; font-size: .88rem; color: var(--gedaempft); }

/* ------------------------------------------------------ Weight & Balance */

.flugzeugwahl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .75rem;
}
.flugzeugwahl a {
  display: block;
  padding: .9rem 1rem;
  border: 2px solid var(--grau-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.flugzeugwahl a:hover { border-color: var(--grau-400); }
.flugzeugwahl a.ist-aktiv { border-color: var(--blau); background: var(--grau-50); }
.flugzeugwahl strong { display: block; font-family: var(--schrift-kopf); color: var(--blau); }
.flugzeugwahl span { display: block; font-size: .85rem; color: var(--gedaempft); }

.wb-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
@media (min-width: 900px) {
  .wb-raster { grid-template-columns: 20rem minmax(0, 1fr); }
}

.wb-eingabe .field { margin-bottom: 1rem; }
/* Flex statt float: Bei langen Beschriftungen rutschte die Grenze sonst
   unter die Zeile und drückte das Eingabefeld daneben schmaler. */
.wb-eingabe .field > label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}
.wb-eingabe .field__grenze {
  flex-shrink: 0;
  font-weight: 400;
  font-size: .82rem;
  color: var(--gedaempft);
}
.field__mit-einheit { display: flex; align-items: stretch; }
.field__mit-einheit input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.field__einheit {
  display: flex;
  align-items: center;
  padding: 0 .8rem;
  background: var(--grau-100);
  border: 1px solid var(--grau-300);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem;
  color: var(--gedaempft);
}
.wb-eingabe__reset { text-align: center; font-size: .88rem; margin-top: .75rem; }

.wb-status {
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.wb-status p { margin-bottom: .35rem; font-size: .95rem; }
.wb-status p:last-child { margin-bottom: 0; }
.wb-status__titel {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 1.1rem;
}
.wb-status--ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.wb-status--warnung { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.wb-status--fehler { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

.wb-kennzahlen {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: .9rem;
}
.wb-kennzahlen li {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.wb-kennzahlen span {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.wb-kennzahlen strong {
  display: block;
  font-family: var(--schrift-kopf);
  font-size: 1.45rem;
  color: var(--blau);
  line-height: 1.25;
}
.wb-kennzahlen small { display: block; font-size: .8rem; color: var(--gedaempft); }

.wb-skala {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.wb-skala h3 { font-size: 1rem; margin-bottom: 1rem; }
.wb-skala__balken {
  position: relative;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #bbf7d0 0%, #86efac 50%, #bbf7d0 100%);
  border: 1px solid var(--grau-300);
}
.wb-skala__marke {
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -.5rem;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
}
.wb-skala__marke--start { background: var(--blau); }
.wb-skala__marke--trocken { background: var(--gold); }
.wb-skala__grenzen {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  font-size: .8rem;
  color: var(--gedaempft);
}
.wb-skala__legende {
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--gedaempft);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.wb-punkt {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  margin-left: .75rem;
}
.wb-punkt--start { background: var(--blau); margin-left: 0; }
.wb-punkt--trocken { background: var(--gold); }

.wb-details {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.wb-details summary {
  cursor: pointer;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--blau);
}
.wb-details[open] summary { margin-bottom: 1rem; }

/* ------------------------------------------- Gebührenordnung im Adminteil */

.gebuehren-tabelle input[type="text"],
.gebuehren-tabelle input[type="number"] {
  width: 100%;
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--grau-300);
  border-radius: 6px;
}
.gebuehren-tabelle__betrag { width: 9rem; }
.gebuehren-tabelle__sort { width: 8rem; }
.gebuehren-tabelle__weg { width: 5rem; text-align: center; }

.gebuehren-neu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--grau-100);
}

/* --------------------------------------------- Wetter & Flugplanung ----- */

.warnhinweis {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-gross);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
}
.warnhinweis h2 { font-size: 1.1rem; color: #78350f; margin-bottom: .6rem; }
.warnhinweis p, .warnhinweis li { color: #78350f; font-size: .95rem; }
.warnhinweis ul { margin: 0 0 .8rem; }
.warnhinweis a { color: #7c2d12; }

.rohmeldung {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92rem;
  line-height: 1.6;
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.taf { margin-bottom: 1rem; }
.taf__kopf {
  font-size: .9rem;
  color: var(--gedaempft);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--grau-200);
}
.taf__abschnitt { padding: .9rem 0; border-bottom: 1px solid var(--grau-100); }
.taf__abschnitt:last-child { border-bottom: 0; }
.taf__abschnitt h4 {
  font-size: .95rem;
  color: var(--blau);
  margin-bottom: .4rem;
}
.taf__zeit {
  font-family: var(--schrift-text);
  font-weight: 400;
  color: var(--gedaempft);
}
.taf__abschnitt ul { margin: 0; padding-left: 1.2em; font-size: .96rem; }
.taf__abschnitt li + li { margin-top: .2em; }
.taf__unbekannt {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--gedaempft);
}
.taf__unbekannt span { font-family: var(--schrift-text); font-size: .85rem; }

.gafor-gebiete {
  list-style: none;
  margin: 1rem 0 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .75rem;
}
.gafor-gebiete li {
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}
.gafor-gebiete strong {
  display: block;
  font-family: var(--schrift-kopf);
  font-size: 1.3rem;
  color: var(--blau);
  line-height: 1.2;
}
.gafor-gebiete span { display: block; font-size: .95rem; }
.gafor-gebiete small { display: block; font-size: .8rem; color: var(--gedaempft); }

.quelle-kasten {
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--grau-50);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  font-size: .94rem;
}
.quelle-kasten code {
  background: var(--grau-200);
  padding: .1em .35em;
  border-radius: 3px;
  font-size: .9em;
}
.quelle-kasten__aktionen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ----------------------------------------------------- Flugregel-Marker */

.flugregel {
  display: inline-block;
  font-family: var(--schrift-kopf);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  padding: .1em .7em;
  border-radius: 999px;
  vertical-align: middle;
  margin-right: .5rem;
  /* !important, damit keine Regel fuer umgebende Ueberschriften die
     Schriftfarbe ueberschreibt - das hatte den Marker unlesbar gemacht. */
  color: #fff !important;
  background: var(--grau-400);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.flugregel--vfr  { background: #15803d; }
.flugregel--mvfr { background: #1d4ed8; }
.flugregel--ifr  { background: #b3261e; }
.flugregel--lifr { background: #86198f; }

.datenliste--metar { margin-bottom: 1.5rem; }

/* ------------------------------------------------ Schwerpunktdiagramm --- */

.wb-diagramm { margin: 0 0 1.25rem; }
.wb-diagramm svg {
  width: 100%;
  height: auto;
  max-width: 34rem;
  display: block;
}
.wb-diagramm figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--gedaempft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
}

.datenliste--grenzen {
  margin-top: 1.25rem;
  padding-top: .5rem;
  border-top: 1px solid var(--grau-100);
}

.wb-export {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1.5rem;
}
.wb-export span { font-size: .88rem; color: var(--gedaempft); }

/* ------------------------------------------------------- Bordbuchrechner */

.bb-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
@media (min-width: 900px) {
  .bb-raster { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
  .bb-bilanz { position: sticky; top: calc(var(--kopfhoehe) + 1rem); }
}
.bb-raster [hidden] { display: none; }

.bb-seite { margin-bottom: 0; }
.bb-seite .intern-block__stand b { color: var(--headline); font-weight: 600; }

/* Eingaben und Summen teilen sich dasselbe Spaltenraster, damit die
   Zahlen im Summenblock unter ihren Eingabespalten stehen. */
.bb-tabelle,
.bb-summen table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.bb-tabelle thead th:nth-child(2), .bb-summen thead th:nth-child(2) { width: 30%; }
.bb-tabelle thead th:nth-child(3), .bb-summen thead th:nth-child(3) { width: 38%; }

.bb-tabelle thead th,
.bb-summen thead th {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gedaempft);
  text-align: right;
  padding: 0 .6rem .5rem;
}
.bb-tabelle th[scope="row"] {
  text-align: left;
  font-weight: 600;
  font-size: .9rem;
  color: var(--gedaempft);
  padding-right: .5rem;
}
.bb-tabelle th[scope="row"] label { display: block; padding: .5rem 0; cursor: pointer; }
.bb-tabelle td { padding: .2rem 0 .2rem .5rem; }
.bb-tabelle tbody tr + tr { border-top: 1px solid var(--grau-100); }

.bb-uebertrag th[scope="row"] { color: var(--headline); }
.bb-uebertrag tr { border-bottom: 2px solid var(--grau-300); }
.bb-uebertrag td { padding-bottom: .5rem; }
[data-bb-zeilen] tr:first-child td { padding-top: .5rem; }

.bb-feld {
  width: 100%;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--headline);
  min-height: 2.75rem;
  padding: .45rem .6rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--grau-50);
}
.bb-feld::placeholder { color: var(--gedaempft); font-weight: 400; }
.bb-feld:focus { border-color: var(--blau); background: #fff; }
.bb-uebertrag .bb-feld { background: #fff; border-color: var(--grau-400); }

.bb-seite__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin: 1rem 0 0;
}

.bb-summen {
  background: var(--blau);
  color: #fff;
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem 1rem;
}
.bb-summen thead th { color: rgba(255, 255, 255, .7); padding-bottom: .35rem; }
.bb-summen th[scope="row"] {
  text-align: left;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.bb-summen td {
  text-align: right;
  padding: .25rem .6rem;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bb-summen__seite td { font-size: 1.3rem; color: var(--gold); }
.bb-summen__gesamt { border-top: 1px solid rgba(255, 255, 255, .25); }
.bb-summen__gesamt th[scope="row"] { color: #fff; }
.bb-summen__gesamt td { font-size: 1.75rem; padding-top: .5rem; }
.bb-summen__dezimal {
  margin: .6rem 0 0;
  font-size: .85rem;
  color: rgba(255, 255, 255, .7);
}

.bb-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.bb-knoepfe .btn--accent { flex: 1 1 12rem; }
.bb-meldung {
  min-height: 1.5em;
  margin: .6rem 0 0;
  font-size: .9rem;
  color: var(--gruen);
}
.bb-hinweis { margin-top: .75rem; font-size: .92rem; }
.bb-hinweis p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .bb-seite { padding: 1.25rem 1rem; }
  .bb-summen { padding: 1rem; }
  .bb-feld { font-size: 1rem; padding-inline: .45rem; }
  .bb-tabelle thead th,
  .bb-summen thead th { font-size: .68rem; letter-spacing: .02em; padding-inline: .4rem; }
  .bb-tabelle thead th:nth-child(2), .bb-summen thead th:nth-child(2) { width: 34%; }
  .bb-summen__gesamt td { font-size: 1.45rem; }
  .bb-summen td { padding-inline: .4rem; }
  .bb-summen th[scope="row"] { font-size: .7rem; letter-spacing: .02em; white-space: nowrap; }
  .bb-summen thead th:nth-child(2) { width: 28%; }
  .bb-knoepfe .btn--accent { flex-basis: 9rem; }
}

/* ------------------------------------------------------ Aufgabenbörse -- */

.aufgaben-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .25rem;
  background: var(--grau-100);
  border-radius: 999px;
}
.aufgaben-filter a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .92rem;
  color: var(--headline);
  text-decoration: none;
}
.aufgaben-filter a:hover { background: #fff; }
.aufgaben-filter a.ist-aktiv { background: var(--blau); color: #fff; }
.aufgaben-filter__zahl {
  min-width: 1.6em;
  padding: .05em .45em;
  border-radius: 999px;
  background: #fff;
  color: var(--headline);
  font-size: .8rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.aufgaben-filter a.ist-aktiv .aufgaben-filter__zahl { background: rgba(255, 255, 255, .2); color: #fff; }

@media (max-width: 640px) {
  .aufgaben-filter { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--radius); }
  .aufgaben-filter a { justify-content: center; border-radius: 8px; padding-inline: .5rem; }
}

.aufgaben .leer-hinweis { margin-top: 1.5rem; }

.aufgabenliste {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.aufgabe {
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1.25rem 1.5rem;
  /* html hat bereits scroll-padding-top; hier nur Platz fuer das klebende Menue */
  scroll-margin-top: 4rem;
}
.aufgabe--meine { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); }
/* Ziel eines Links aus der Rundmail oder der Erinnerung */
.aufgabe:target { box-shadow: 0 0 0 3px var(--gold); border-color: var(--gold-dunkel); }

.aufgabe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
}
.aufgabe__titel { font-size: 1.2rem; margin: 0; }

.aufgabe__zustand {
  flex: none;
  font-family: var(--schrift-kopf);
  font-size: .78rem;
  font-weight: 600;
  padding: .25em .75em;
  border-radius: 999px;
}
.aufgabe__zustand--offen    { background: #fff1d6; color: #6b4500; }
.aufgabe__zustand--vergeben { background: var(--grau-100); color: #475569; }
.aufgabe__zustand--meine    { background: var(--blau); color: #fff; }

.aufgabe__frist { margin: .4rem 0 0; font-size: .95rem; }
.aufgabe__frist time { font-weight: 600; color: var(--headline); }
.aufgabe__rest { color: var(--gedaempft); }
.aufgabe__rest::before { content: '· '; }
.aufgabe__rest.ist-knapp { color: #8a5a00; font-weight: 600; }
.aufgabe__rest.ist-ueberfaellig { color: var(--rot); font-weight: 600; }

.aufgabe__text { margin-top: .75rem; max-width: 70ch; }
.aufgabe__text p { margin: 0 0 .6em; }
.aufgabe__text p:last-child { margin-bottom: 0; }

.aufgabe__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grau-100);
}
.aufgabe__wer { margin: 0; font-size: .92rem; color: var(--gedaempft); }
.aufgabe__wer strong { color: var(--headline); font-weight: 600; }
.aufgabe__fuss form { margin: 0; }
.aufgabe__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 640px) {
  .aufgabe { padding: 1.1rem 1.15rem; scroll-margin-top: .75rem; }
  .aufgabe__fuss > form,
  .aufgabe__knoepfe,
  .aufgabe__knoepfe form { flex: 1 1 100%; }
  .aufgabe__fuss .btn { width: 100%; }
}

.aufgaben-erledigt {
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  padding: 1rem 1.5rem;
}
.aufgaben-erledigt summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--blau);
}
.aufgaben-erledigt summary .aufgaben-filter__zahl { background: var(--grau-100); }
.aufgaben-erledigt ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.aufgaben-erledigt li { padding: .65rem 0; border-top: 1px solid var(--grau-100); }
.aufgaben-erledigt__titel { display: block; color: var(--headline); }
.aufgaben-erledigt__meta { display: block; font-size: .88rem; color: var(--gedaempft); }

/* ------------------------------------------- Aufgabenbörse: Serien -- */

.aufgabe__zustand--serie { background: #e6eefa; color: var(--blau); }
.aufgabe__frist strong { color: var(--headline); font-weight: 600; }
.aufgabe__serie-knopf { margin: 1rem 0 0; }

.terminliste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--grau-100);
}
.termin {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: .35rem 1.25rem;
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--grau-100);
  scroll-margin-top: 4rem;
}
.termin--meine { background: #f2f6fc; }
.termin:target { box-shadow: 0 0 0 3px var(--gold); border-radius: 6px; }
.termin__datum { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; min-height: 2.75rem; padding-left: 2rem; }
.termin__wer { margin: 0; font-size: .92rem; color: var(--gedaempft); }
.termin__wer strong { color: var(--headline); font-weight: 600; }
.termin__ich { color: var(--blau); font-weight: 600; }
.termin .aufgabe__knoepfe { justify-content: flex-end; }

.terminliste__mehr { margin-top: .25rem; }
.terminliste__mehr summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: .92rem;
  color: var(--blau);
}
.terminliste__mehr .terminliste { margin-top: 0; }

@media (max-width: 760px) {
  .termin { grid-template-columns: 1fr; padding-inline: .25rem; }
  .termin .aufgabe__knoepfe { justify-content: flex-start; }
  .aufgabe__knoepfe--paar { display: grid; grid-template-columns: 1fr 1fr; }
  .aufgabe__knoepfe--paar .btn { width: 100%; }
  .termin__wer { padding-left: 2rem; }
}

/* Ankreuzfeld mit Beschriftung: die ganze Zeile ist die Tippfläche. */
.auswahl-box {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.auswahl-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 .4rem;
  min-height: 2.75rem;
  padding-left: 2rem;
  cursor: pointer;
}
.auswahl-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -.625rem;
  border: 2px solid var(--grau-400);
  border-radius: 5px;
  background: #fff;
}
.auswahl-box:checked + .auswahl-label::before {
  border-color: var(--blau);
  background: var(--blau);
  /* Haken als Hintergrundgrafik – kein Inline-Style, CSP-tauglich */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.auswahl-box:focus-visible + .auswahl-label::before {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.auswahl-label:hover::before { border-color: var(--blau); }
.aufgabe__auswahl .auswahl-label { font-size: .92rem; font-weight: 600; color: var(--headline); }

/* Leiste für die Sammelauswahl – klebt am unteren Rand, sobald etwas
   angekreuzt ist. */
.auswahl-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  margin-top: 1.25rem;
  padding: .9rem 1.25rem;
  background: var(--grau-50);
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
}
.auswahl-leiste__text { margin: 0; font-size: .95rem; color: var(--gedaempft); }
.auswahl-leiste.ist-aktiv {
  position: sticky;
  bottom: .75rem;
  z-index: 30;
  background: var(--blau-dunkel);
  border-color: var(--blau-dunkel);
  box-shadow: var(--schatten-tief);
}
.auswahl-leiste.ist-aktiv .auswahl-leiste__text { color: #fff; font-weight: 600; }
.auswahl-leiste .btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 640px) {
  .auswahl-leiste .btn { width: 100%; }
}

/* -------------------------------------------- Aufgabenbörse: Anhänge -- */

.anhaenge { margin-top: 1rem; }
.anhaenge__bilder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.anhaenge__bilder a { display: block; border-radius: var(--radius); overflow: hidden; line-height: 0; }
.anhaenge__bilder img {
  width: 10rem;
  height: 7.5rem;
  object-fit: cover;
  background: var(--grau-100);
  transition: transform .2s ease;
}
.anhaenge__bilder a:hover img { transform: scale(1.03); }
.anhaenge__dateien { list-style: none; margin: .6rem 0 0; padding: 0; }
.anhaenge__dateien li + li { margin-top: .35rem; }
.anhaenge__dateien a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6rem;
  min-height: 2.75rem;
  align-content: center;
}
.anhaenge__name { font-weight: 600; }
.anhaenge__meta { font-size: .85rem; color: var(--gedaempft); }

@media (max-width: 480px) {
  .anhaenge__bilder img { width: 8.5rem; height: 6.4rem; }
}

/* ------------------------------------------------------------ Ortung -- */

.ortung-hinweis { margin-top: 0; }

.ortungskarte {
  position: relative;
  margin: 1.5rem 0 0;
}
.ortungskarte__rahmen { position: relative; }
.ortungskarte__flaeche {
  position: relative;
  height: clamp(24rem, 68vh, 44rem);
  overflow: hidden;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  background: var(--grau-100);
  cursor: grab;
  /* Vor dem ersten Antippen gehört senkrechtes Wischen der Seite; danach (und im
     Vollbild) übernimmt die Karte alle Gesten selbst. */
  touch-action: pan-y;
  user-select: none;
}
.ortungskarte__flaeche.ist-gezogen { cursor: grabbing; }
.ortungskarte__flaeche.ist-messen { cursor: crosshair; }
.ortungskarte__flaeche:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ortungskarte__kacheln,
.ortungskarte__marken,
.ortungskarte__messebene { position: absolute; inset: 0; }
.ortungskarte__messebene { width: 100%; height: 100%; pointer-events: none; }
.ortungskarte__marken { pointer-events: none; }
.ortungskarte__marken .ortung-marke { pointer-events: auto; }
.ortungskarte__kachel {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
}
.ortungskarte__quelle { margin-top: .4rem; font-size: .82rem; color: var(--gedaempft); }

/* Werkzeuge oben links: Zoom, EDKB, Messen, Vollbild */
.ortungskarte__werkzeuge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}
.ortungskarte__gruppe {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grau-200);
  box-shadow: var(--schatten);
}
.ortungskarte__gruppe button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .7rem;
  border: 0;
  background: #fff;
  color: var(--blau);
  font: 600 .82rem/1 var(--schrift-kopf);
  cursor: pointer;
}
.ortungskarte__gruppe button[data-karte-zoom] { font-size: 1.35rem; }
.ortungskarte__gruppe button:hover { background: var(--grau-100); }
.ortungskarte__gruppe button:disabled { color: var(--grau-300); cursor: default; }
.ortungskarte__gruppe button[aria-pressed="true"] { background: var(--blau); color: #fff; }

/* Maßstab unten links, Zeigerposition unten rechts */
.ortungskarte__massstab {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  height: .5rem;
  border: 2px solid var(--blau-dunkel);
  border-top: 0;
  background: rgba(255, 255, 255, .6);
  pointer-events: none;
}
.ortungskarte__massstab span {
  position: absolute;
  left: 0;
  bottom: .7rem;
  padding: .05rem .35rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  font: 600 .74rem/1.3 var(--schrift-kopf);
  color: var(--blau-dunkel);
  white-space: nowrap;
}
.ortungskarte__zeiger {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .1rem .45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  font: .78rem/1.4 var(--schrift-text);
  font-variant-numeric: tabular-nums;
  color: var(--headline);
  pointer-events: none;
}
.ortungskarte__zeiger:empty { display: none; }

/* Messung: Strecke in Magenta wie Routen auf VFR-Karten, mit heller Kontur */
.messlinie {
  fill: none;
  stroke: #c2007a;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);
}
.messpunkt { fill: #fff; stroke: #c2007a; stroke-width: 3; }

.ortungskarte__messung {
  margin-top: .75rem;
  padding: .85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius);
}
.ortungskarte__messhilfe { margin: 0; font-size: .9rem; color: var(--gedaempft); }
.ortungskarte__strecken { margin: 0; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }
.ortungskarte__strecken:empty { display: none; }
.ortungskarte__summe { margin: .35rem 0 0; font-weight: 600; color: var(--headline); }
.ortungskarte__summe:empty { display: none; }
.ortungskarte__messknoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Vollbild ohne Fullscreen-API – funktioniert auch auf dem iPhone */
.ortungskarte.ist-vollbild {
  position: fixed;
  inset: 0;
  z-index: 300;
  margin: 0;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.ortungskarte.ist-vollbild .ortungskarte__rahmen { flex: 1; min-height: 0; }
.ortungskarte.ist-vollbild .ortungskarte__flaeche { height: 100%; }
.ortungskarte.ist-vollbild .ortungskarte__messung { max-height: 30vh; overflow-y: auto; }
html.karte-vollbild,
html.karte-vollbild body { overflow: hidden; }

/* Markierung: Symbol mittig auf der Position, Beschriftung daneben */
.ortung-marke {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .3rem;
  transform: translate(-.75rem, -50%);
  text-decoration: none;
  white-space: nowrap;
}
/* Flugzeug als Pfeilspitze, zeigt in Flugrichtung (Drehung per JS). Die Form
   sitzt im Pseudo-Element, der Schatten am Elternteil – filter wird vor
   clip-path angewandt und würde sonst mit abgeschnitten. */
.ortung-marke__symbol {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  filter: drop-shadow(0 0 1.5px var(--blau-dunkel)) drop-shadow(0 0 1px var(--blau-dunkel));
}
.ortung-marke__symbol::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  clip-path: polygon(50% 0, 90% 100%, 50% 78%, 10% 100%);
}
.ortung-marke--boden .ortung-marke__symbol,
.ortung-marke--zuletzt .ortung-marke__symbol {
  width: 1rem;
  height: 1rem;
  margin-left: .25rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blau);
  filter: none;
}
.ortung-marke--boden .ortung-marke__symbol::before,
.ortung-marke--zuletzt .ortung-marke__symbol::before { content: none; }
.ortung-marke--zuletzt .ortung-marke__symbol { border-color: var(--gedaempft); }
.ortung-marke__text {
  padding: .15rem .45rem;
  border-radius: 6px;
  background: var(--blau-dunkel);
  color: #fff;
  font: 600 .78rem/1.3 var(--schrift-kopf);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}
.ortung-marke--zuletzt .ortung-marke__text { background: #fff; color: var(--headline); }
.ortung-marke.ist-draussen .ortung-marke__text { opacity: .85; }
.ortung-marke:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Aus der Liste gewählt: drei Sekunden hervorgehoben (site.js) */
.ortung-marke.ist-gewaehlt { z-index: 1; }
.ortung-marke.ist-gewaehlt .ortung-marke__text { outline: 3px solid var(--gold); outline-offset: 1px; }

@media (max-width: 640px) {
  .ortungskarte__flaeche { height: clamp(22rem, 62vh, 32rem); }
}

/* Liste */
.ortung-inhalt { margin-top: 1.5rem; }
.ortung-stand { margin: 0 0 1rem; color: var(--gedaempft); }
.ortung-stand strong { color: var(--headline); font-weight: 600; }
/* Höhenbezug direkt unter dem Stand, als Teil desselben Absatzblocks */
.ortung-stand:has(+ .ortung-stand--hoehe) { margin-bottom: .35rem; }
.ortung-stand--hoehe { font-size: .92rem; }

.ortung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ortung-flugzeug {
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--grau-200);
  border-radius: var(--radius-gross);
  scroll-margin-top: 4rem;
}
.ortung-flugzeug--luft { border-color: var(--gold-dunkel); box-shadow: 0 0 0 1px var(--gold-dunkel); }
.ortung-flugzeug:target { box-shadow: 0 0 0 3px var(--gold); }
.ortung-flugzeug--nie,
.ortung-flugzeug--ohne_adresse { background: var(--grau-50); }

.ortung-flugzeug__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1rem;
}
.ortung-flugzeug__name { margin: 0; font-size: 1.1rem; }
.ortung-flugzeug__name span { font-family: var(--schrift-text); font-weight: 400; font-size: .95rem; color: var(--gedaempft); }
/* Maschinen in der Luft: Klick zentriert die Karte (site.js). Die Kennung
   wird dafür zum Knopf, damit es auch per Tastatur geht. */
.ortung-flugzeug.ist-zeigbar { cursor: pointer; }
.ortung-flugzeug.ist-zeigbar:hover { background: var(--grau-50); }
.ortung-flugzeug__zeigen {
  font: inherit;
  color: var(--blau);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.ortung-flugzeug__zeigen:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.ortung-flugzeug__text { margin: .4rem 0 0; font-size: .92rem; color: var(--gedaempft); max-width: 70ch; }

.ortung-zustand {
  font: 600 .78rem/1 var(--schrift-kopf);
  padding: .35em .75em;
  border-radius: 999px;
  background: var(--grau-100);
  color: #475569;
}
.ortung-zustand--luft { background: var(--gold); color: #3d2a00; }
.ortung-zustand--boden { background: #e6eefa; color: var(--blau); }

.ortung-werte {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: .65rem 0 0;
}
.ortung-werte dt { font-size: .78rem; color: var(--gedaempft); }
.ortung-werte dd { margin: 0; font-weight: 600; color: var(--headline); font-variant-numeric: tabular-nums; }
.ortung-werte dd span { font-weight: 400; color: var(--gedaempft); }

.ortung-quellen { margin-top: 1.5rem; font-size: .85rem; color: var(--gedaempft); }
/* Rechte Kartenhälfte: Beschriftung links vom Symbol */
.ortung-marke.ist-links { flex-direction: row-reverse; transform: translate(calc(-100% + .75rem), -50%); }
.ortung-marke--boden.ist-links,
.ortung-marke--zuletzt.ist-links { transform: translate(calc(-100% + .75rem), -50%); }
.ortungskarte__radhinweis {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: .6rem 1rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  background: rgba(1, 42, 92, .88);
  color: #fff;
  font: 600 .9rem/1.3 var(--schrift-kopf);
  text-align: center;
  pointer-events: none;
}
.ortungskarte__flaeche.ist-aktiv,
.ortungskarte.ist-vollbild .ortungskarte__flaeche { touch-action: none; }

/* --------------------------------------------------------------------------
   Hinweis "Mitgliederbereich als App" (nur iOS/Android, siehe site.js).
   Bewusst ohne farbige Kante – Hervorhebung nur über Schatten und Lage.
   -------------------------------------------------------------------------- */
.app-hinweis {
  position: fixed;
  z-index: 240;               /* unter dem Cookie-Hinweis (250) */
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 26rem;
  margin-inline: auto;
  padding: 1rem 1.1rem .9rem;
  background: #fff;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-tief);
  font-size: .95rem;
  animation: app-hinweis-ein .25s ease-out;
}
.app-hinweis p { margin: 0 0 .5rem; }
.app-hinweis__titel {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  color: var(--headline);
}
.app-hinweis__zusatz { font-size: .88rem; color: var(--gedaempft); }
.app-hinweis .app-hinweis__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin: .75rem 0 0;
}
@keyframes app-hinweis-ein {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-hinweis { animation: none; }
}