/* Layout für bewertung.php (Monitoring Hohendeicher See) */
  :root { --teal:#0f766e; --teal-d:#115e59; --slate:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#f1f5f9; --red:#991b1b; --red-l:#fee2e2; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--slate); background:var(--bg);
         overflow-x:hidden; }
  .wrap { max-width: none; margin: 0; padding: 24px 20px 48px; }
  header { display:flex; align-items:center; gap:18px; margin-bottom:28px; }

  /* Sidebar-Layout (analog Admin) */
  .shell { display:flex; gap:24px; align-items:flex-start; }
  .sidebar {
    width:220px; flex-shrink:0; position:sticky; top:16px;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:16px 14px;
    /* Falls die Sidebar (Bereich + Aktion/Extra + Konto) höher ist als das
       Fenster: eigener Scroll statt starr über den sichtbaren Bereich
       hinauszuragen (sticky allein hält sie ja an top:16px fest – ohne das
       hier wäre der untere Teil bei kurzen Fenstern nicht erreichbar). */
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .sidebar .nav-group { margin-bottom:18px; }
  .sidebar .nav-group:last-child { margin-bottom:0; }
  .sidebar .nav-label {
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted); margin:0 0 6px 10px;
  }
  .sidebar nav a {
    display:flex; align-items:center; gap:8px;
    padding:9px 11px; border-radius:8px; font-size:14px; font-weight:600;
    color:#475569; text-decoration:none; margin-bottom:2px;
  }
  .sidebar nav a:hover  { background:var(--bg); color:var(--slate); }
  .sidebar nav a.active { background:var(--bg); color:var(--teal); }

  /* Eingerückte Unterpunkte innerhalb einer Nav (z. B. "Freigegeben"/
     "Warteschlange"/"Abgelehnt" unter "Messwerte" in admin.php) – mehr
     Innenabstand links, damit sie sichtbar unter dem übergeordneten Link
     stehen. */
  .sidebar nav a.nav-indent { padding-left:28px; }

  /* Konto-Aktionen (Passwort ändern/Abmelden/Angemeldet als): eigener,
     nicht klickbarer Info-Text am Ende der Sidebar (siehe layout.php). */
  .sidebar nav .nutzer-info {
    display:block; padding:6px 11px 2px; font-size:12px; color:var(--muted);
  }
  .sidebar nav .nutzer-info strong { color:var(--slate); }
  .main-content { flex:1; min-width:0; max-width:100%; }
  @media (max-width: 760px) {
    .shell { flex-direction:column; gap:16px; }
    .sidebar { width:auto; position:static; align-self:stretch;
               display:flex; flex-wrap:wrap; gap:8px 20px; }
    .sidebar .nav-group { margin-bottom:0; }
  }
  .logo {
/*    width:108px; height:108px; border-radius:16px; background:#fff;*/
    width:110px; height:110px; 
/*    display:flex; align-items:center; justify-content:center; color:#fff;*/
    display:flex; align-items:center; justify-content:center;
    font-size:22px; overflow:hidden; flex-shrink:0;
/*    border:1px solid var(--line); box-shadow:0 1px 3px rgba(15,23,42,.08);*/
  }
  .logo img { width:100%; height:100%; object-fit:cover; display:block; }
  h1 { font-size:35px; line-height:1.2; margin:0; font-weight:700; letter-spacing:-.01em; }
  header h2 { font-size:25px; line-height:1.3; margin:2px 0 0; font-weight:600; color:var(--muted); }
  .sub { color:var(--muted); font-size:15px; font-weight:700; margin-top:4px; }
  @media (max-width: 520px) {
    header { gap:14px; }
    .logo { width:80px; height:80px; border-radius:14px; }
    h1 { font-size:22px; }
    header h2 { font-size:14px; }
    .sub { font-size:13px; }
  }
  .card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; margin-bottom:20px; max-width:100%; }

  /* Scroll-Container für breite Tabellen (z. B. Bögen mit vielen Spalten,
     Nutzerverwaltung): ohne Höhenbegrenzung sitzt der horizontale Scrollbalken
     ganz unten unter allen Zeilen und ist bei langen Tabellen erst nach viel
     Scrollen erreichbar. Mit max-height + eigenem Scroll bleibt er in der Nähe
     des sichtbaren Bereichs; die Kopfzeile bleibt dabei sticky oben stehen. */
  .tabelle-scroll { max-height:60vh; overflow:auto; }
  .tabelle-scroll thead th { position:sticky; top:0; z-index:1; }
  .card h2 { font-size:16px; margin:0 0 14px; }
  label { display:block; font-size:13px; font-weight:600; color:#334155; margin:0 0 4px; }
  select, input { width:100%; padding:8px 10px; font-size:14px; border:1px solid #cbd5e1; border-radius:8px; }
  select:focus, input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.15); }
  .grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
  .row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
  button, .btn { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; font-size:14px; font-weight:600; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none; }
  .btn-primary { background:var(--teal); color:#fff; } .btn-primary:hover { background:var(--teal-d); }
  .btn-ghost { background:#fff; color:#334155; border-color:#cbd5e1; } .btn-ghost:hover { background:#f8fafc; }
  table { width:100%; border-collapse:collapse; font-size:14px; }
  th, td { text-align:left; padding:9px 10px; border-top:1px solid var(--line); }
  th a { color:#475569; text-decoration:none; } th a:hover { color:var(--slate); }
  thead th { border-top:none; background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#64748b; }
  .num { text-align:right; font-variant-numeric: tabular-nums; }
  .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
  .b-frei { background:#dcfce7; color:#166534; } .b-offen { background:#fef3c7; color:#92400e; }
  .pill { font-size:12px; color:var(--muted); }
  .flash { padding:10px 14px; border-radius:8px; font-size:14px; margin-bottom:16px; }
  .flash-ok { background:#dcfce7; color:#166534; } .flash-err { background:#fee2e2; color:#991b1b; }
  .flash-warn { background:#fef3c7; color:#92400e; }
  .stat-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:4px 0; color:var(--muted); }
  .stat-row strong { color:var(--slate); font-size:15px; }
  footer { color:var(--muted); font-size:12px; margin-top:8px; line-height:1.6; }
  /* Beobachtungsgruppen-Eingabe (Tab „Bogen erfassen"): eine Tabelle je Gruppe,
     Zeilen = Arten, Spalten = Teilflächen (+ "Gesamt") – analog zur Anzeige
     (.gruppe-block weiter unten). overflow-x:auto wie dort, aus demselben Grund
     (bis zu 10 Teilflächen-Spalten + "Gesamt"). Aufgebaut von bogen.js
     (beobGruppenAufbauen()). */
  .beob-tabelle-wrap { overflow-x:auto; }
  .beob-tabelle { width:100%; border-collapse:collapse; font-size:13px; min-width:max-content; }
  .beob-tabelle th, .beob-tabelle td { padding:5px 8px; border-top:none; border-bottom:1px solid rgba(0,0,0,.08); text-align:center; }
  .beob-tabelle td:first-child { text-align:left; }
  /* Art-Kopfzelle: eigene Klasse statt :first-child, weil bei mehreren
     Teilflächen die zweite Kopfzeile (nur Nummern) selbst kein Art-<th> mehr
     hat (rowspan) – ihr jeweils erstes <th> ist dann schon "Teilfläche 1". */
  .beob-tabelle th.sp-art { text-align:left; }
  /* Gemeinsame "Teilfläche"-Kopfzeile über den Teilflächen-Spalten (Zeile 1 von
     2): keine Trennlinie zur Nummern-Zeile darunter, die zusammengehören. */
  .beob-tabelle th.sp-tf-oben { border-bottom:none; }
  .beob-tabelle thead th { background:transparent; border-bottom:1px solid rgba(0,0,0,.15); }
  .beob-tabelle .menge-sel { width:100%; min-width:56px; padding:4px 6px; font-size:13px; }
  /* Freitext-Zeile (zusätzliche, frei benannte Art): Artname-Zelle enthält
     Texteingabe + Entfernen-Button nebeneinander. */
  .beob-tabelle td.frei-art-zelle { display:flex; align-items:center; gap:6px; }
  .beob-tabelle .frei-art-zelle input { flex:1; min-width:100px; padding:6px 8px; font-size:13px; }
  .beob-tabelle .btn-rm { flex:0 0 auto; padding:6px 10px; font-size:16px; line-height:1;
                           background:#fff; border:1px solid #cbd5e1; border-radius:8px;
                           cursor:pointer; color:var(--muted); }
  .beob-tabelle .btn-rm:hover { background:var(--red-l); color:var(--red); border-color:#fecaca; }

  /* Moduswahl "Alle möglichen Arten" / "Nur ausgewählte Arten" (Tab „Bogen
     erfassen", oberhalb der Beobachtungsgruppen-Tabellen). */
  .beob-modus-schalter {
    display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center;
    margin-bottom:14px; font-size:13px;
  }
  .beob-modus-schalter strong { font-size:13px; }
  .beob-modus-schalter label {
    display:inline-flex; align-items:center; gap:6px;
    font-weight:400; font-size:13px; margin:0; cursor:pointer;
  }
  .beob-modus-schalter input[type=radio] { width:auto; margin:0; }

  /* "+ weitere Art"-Auswahlliste im Kompakt-Modus: optisch wie der
     Freitext-Button (.btn-add-zeile) darüber/daneben, nur als <select>. */
  .btn-add-zeile-waehler {
    margin-top: 6px;
    font-size: 12px;
    padding: 6px 10px;
    width: auto;
    background: rgba(255,255,255,.7);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
  }
  .btn-add-zeile-waehler:hover { background:#fff; }
  /* Doppelter Zeitbereich-Schieberegler */
  .range-wrap { position:relative; padding: 8px 0 28px; margin-top:4px; }
  .range-wrap input[type=range] {
    position:absolute; left:0; width:100%;
    -webkit-appearance:none; appearance:none;
    height:4px; background:transparent; pointer-events:none;
    outline:none; margin:0;
  }
  .range-wrap input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; border-radius:50%;
    background:var(--teal); border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    cursor:pointer; pointer-events:all;
    position:relative; z-index:2;
  }
  .range-wrap input[type=range]::-moz-range-thumb {
    width:18px; height:18px; border-radius:50%;
    background:var(--teal); border:2px solid #fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    cursor:pointer; pointer-events:all;
  }
  .range-track {
    position:absolute; top:15px; left:0; right:0;
    height:4px; background:var(--line); border-radius:2px;
  }
  .range-fill {
    position:absolute; top:0; height:4px;
    background:var(--teal); border-radius:2px;
  }
  .range-labels {
    position:absolute; bottom:0; left:0; right:0;
    display:flex; justify-content:space-between;
    font-size:12px; color:var(--muted);
  }
  .range-label-von, .range-label-bis {
    background:#fff; padding:0 3px; border-radius:3px;
    font-weight:600; color:var(--teal);
  }
  .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; }
  .toolbar .grow { flex:1; }

  /* Tabs */
  .tabs-nav {
    display:flex; gap:0; margin-bottom:24px;
    border-bottom:2px solid var(--line);
  }
  .tab-btn {
    padding:10px 24px; font-size:14px; font-weight:600;
    color:var(--muted); background:none; border:none;
    border-bottom:3px solid transparent; margin-bottom:-2px;
    cursor:pointer; text-decoration:none; display:inline-block;
    transition:color .15s;
  }
  .tab-btn:hover { color:var(--slate); }
  .tab-btn.active { color:var(--teal); border-bottom-color:var(--teal); }
  .tab-panel { display:none; }
  .tab-panel.active { display:block; }

/* Gruppenfarben (ausgelagert aus config.php beobachtungsgruppen) */
.gruppe-block, .beob-gruppe { background: #f8fafc; }
.gruppe-grundrasen    { background: #dcfce7; }  /* hellgrün */
.gruppe-lrt_art       { background: #e0f2fe; }  /* hellblau */
.gruppe-eutrophierung { background: #ffcc99; }  /* hellorange */
.gruppe-weitere_arten { background: #ffffcc; }  /* hellgelb */
.gruppe-tiere         { background: #ffffff; }  /* weiß */
.gruppe-GR            { background: #6dd900; }  /* GR, 3150 */
.gruppe-TF            { background: #ccccff; }  /* TF, 3150 */
.gruppe-SD            { background: #ffff00; }  /* SD, 3150 */
.gruppe-SR            { background: #ffffcc; }  /* SR, 3150 */
.gruppe-SM            { background: #ff99cc; }  /* SM, 3150 */
.gruppe-hypertrophierung_3150 { background: #ff0000; }  /* hypertrophierung, 3150 */


/* Beobachtungsgruppen-Box im Eingabeformular (Bewertungsbogen).
   Einzige Quelle für dieses Aussehen – wird sowohl von bewertung.php (PHP-Template,
   Erstaufbau) als auch vom JS in beobGruppenAufbauen() (Neuaufbau bei Änderung
   der Teilflächen-Anzahl) per Klasse referenziert, damit beide Varianten
   garantiert gleich aussehen. */
.beob-gruppe {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.07);
}
.beob-gruppe-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  display: block;
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.btn-add-zeile {
  margin-top: 6px;
  font-size: 12px;
  background: rgba(255,255,255,.7);
}

/* Teilflächen: fasst die Abschnitte (Teilfläche 1..N + Gesamtergebnis) einer
   Beobachtungsgruppe visuell zusammen. */
.beob-gruppe-set {
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,.15);
}
.beob-gruppe-set-titel {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

/* Beobachtungsgruppen-Box in der Bogen-Vorschau/Moderation (bewertung.php).
   overflow-x:auto, weil die Tabelle je Gruppe inzwischen eine Spalte pro
   Teilfläche hat (bis zu 10 + "Gesamt") und auf schmalen Bildschirmen sonst
   das Layout sprengen würde. */
.gruppe-block {
  margin-bottom: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.07);
  overflow-x: auto;
}
.gruppe-block table { min-width: max-content; }
.gruppe-block-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  margin-bottom: 10px;
}

/* Leerzustand (keine Einträge) – gemeinsam genutzt von bewertung.php und admin.php. */
.empty { color:var(--muted); font-size:13px; padding:20px 0; text-align:center; }

/* Passwort-Felder: Augen-Umschalter (anzeigen/verbergen) – identisch zu admin.css */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px; }
.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  padding: 2px 4px; margin: 0; font-size: 16px; line-height: 1;
  color: #64748b; border-radius: 6px;
}
.pw-eye:hover { color: #334155; background: rgba(0,0,0,.05); }

/* Sortierbare Spaltenköpfe (tabelleInitSort in tabelle.js) */
.sort-th { all:unset; cursor:pointer; font:inherit; font-weight:600;
            display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.sort-th:hover { color:var(--teal); }
.sort-th::after { content:'⇅'; font-size:.75em; opacity:.35; }
.sort-th[data-dir=asc]::after  { content:'▲'; opacity:1; color:var(--teal); }
.sort-th[data-dir=desc]::after { content:'▼'; opacity:1; color:var(--teal); }

/* Karten-Container (Leaflet-Boxen). Bewusst als Klassen in style.css statt als
   Inline-Styles in bewertung.php: nur so kann die Overlay-Regel weiter unten das
   4:3 per Spezifität aufheben. Ein Inline-aspect-ratio wäre nicht überschreibbar
   und würde die vergrößerte Karte im „Karte vergrößern"-Overlay auf 4:3 stauchen,
   statt sie den Overlay-Kasten füllen zu lassen (dort setzt bogen.js height:100%
   -> definite Höhe + aspect-ratio => Breite würde aus dem Verhältnis abgeleitet).
   Gilt auch für #bogen-karte in bogen_fenster.php (eigenständiges Fenster) –
   dieselbe Klasse, damit die Karte dort ebenfalls im 4:3-Verhältnis erscheint
   statt in einer festen Höhe. */
.karte-box { border-radius:10px; border:1px solid var(--line); }
/* Anzeige-Karte + Pfad-Zeichenkarte + Fenster-Ansicht: 4:3 als Basis-Verhältnis.
   Die Begrenzung auf max. 90% der Fensterhöhe (bei Bedarf NUR die Höhe, ohne
   die Breite zu verändern) übernimmt bewusst NICHT CSS max-height (das
   Zusammenspiel mit aspect-ratio ist je nach Layout nicht zuverlässig,
   manche Browser leiten daraus doch wieder eine schmalere Breite ab),
   sondern gezielt JS – siehe kartenHoeheAnpassen() weiter unten / in
   bewertung.php (initBogenKarte). */
.karte-box--4zu3 { aspect-ratio: 4 / 3; }

/* Handy/schmale Screens: KEIN festes 4:3 – sonst wird die Karte (volle Breite
   × ¾) sehr hoch, geht „über den Bildschirm" und erschwert das Scrollen (die
   Leaflet-Karte fängt zudem Touch-Gesten ab). Stattdessen aspect-ratio aus und
   eine moderate feste Höhe. Bewusst NACH der Basisregel oben, damit diese
   gleich­spezifische Regel per Quellreihenfolge gewinnt. Das Vergrößern-Overlay
   (#bogen-pfad-karte in .karte-overlay-inhalt) bleibt über die höhere Spezifität
   unberührt und füllt weiter den Kasten. */
@media (max-width: 760px) {
  .karte-box--4zu3 { aspect-ratio: auto; height: 260px; }
}

/* Großflächiges Karten-Overlay (z. B. Teilflächen-Pfad-Karte beim Bogen
   bearbeiten – siehe pfadKarteOverlayUmschalten() in bogen.js). Der
   eigentliche Karten-Container wird per DOM-Move hierher verschoben und beim
   Schließen wieder zurück; das Overlay selbst ist reine Präsentation. */
.karte-overlay {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(15,23,42,.6);
  align-items:center; justify-content:center; padding:20px;
}
.karte-overlay.aktiv { display:flex; }
.karte-overlay-box {
  background:#fff; border-radius:12px; width:100%; max-width:1100px; height:88vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.karte-overlay-kopf {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.karte-overlay-kopf strong { font-size:15px; }
.karte-overlay-werkzeuge {
  display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  padding:10px 16px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.karte-overlay-werkzeuge:empty { display:none; }
.karte-overlay-werkzeuge #tf-anzahl-block { margin-bottom:0 !important; }
.karte-overlay-inhalt { flex:1; min-height:0; }
.karte-overlay-inhalt #bogen-pfad-karte { aspect-ratio:auto; height:100%; border-radius:0; border:0; }

/* Drag-&-Drop-Anfasser zum Anordnen von Tabellenzeilen (tabelleInitDrag in
   tabelle.js), z. B. im Tab „Bögen zusammenfügen". */
.drag-handle {
  cursor: grab; user-select: none; -webkit-user-select: none;
  color: var(--muted); font-size: 16px; line-height: 1;
  padding: 2px 6px; display: inline-block;
}
.drag-handle:active { cursor: grabbing; }
tr.zieht { opacity: .5; background: var(--bg); }

/* Foto-Lightbox in der Anzeige (fotoviewer.js): zeigt ein Bogen-Foto in
   maximal für das Fenster darstellbarer Größe, mit Bildunterschrift,
   Teilflächen-Angabe und nummerierten Links zu allen Fotos des Bogens. */
.foto-viewer-overlay {
  display:none; position:fixed; inset:0; z-index:2100;
  background:rgba(15,23,42,.85);
  align-items:center; justify-content:center; padding:20px;
}
.foto-viewer-overlay.aktiv { display:flex; }
.foto-viewer-box {
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
}
.foto-viewer-bildbox {
  flex:1; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  /* Die Bildbox selbst fängt keine Klicks ab (sonst liegt sie – da im DOM nach
     dem Schließen-Button – im Klick-Stapel über den absolut positionierten
     Buttons und blockiert deren Klicks, obwohl sie transparent ist und die
     Buttons sichtbar bleiben). Bild und Pfeile holen sich Klicks gezielt zurück. */
  pointer-events:none;
}
.foto-viewer-bildbox img {
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  display:block; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5);
  pointer-events:auto;
}
.foto-viewer-pfeil {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,.9); border:0; border-radius:50%;
  width:44px; height:44px; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate); box-shadow:0 2px 8px rgba(0,0,0,.3);
  pointer-events:auto;
}
.foto-viewer-pfeil:hover { background:#fff; }
.foto-viewer-pfeil--prev { left:8px; }
.foto-viewer-pfeil--next { right:8px; }
.foto-viewer-schliessen {
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(255,255,255,.9); border:0; border-radius:8px;
  padding:8px 12px; font-size:16px; cursor:pointer; color:var(--slate);
}
.foto-viewer-schliessen:hover { background:#fff; }
.foto-viewer-info { flex-shrink:0; text-align:center; color:#fff; max-width:700px; }
.foto-viewer-gruppe {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#cbd5e1; margin-bottom:2px;
}
.foto-viewer-unterschrift { font-size:14px; }
/* Position (left/width/top) wird per JS (fotoviewer.js) exakt auf die
   tatsächliche Größe/Position des Fotos gesetzt, da dieses per
   object-fit:contain in Größe und Lage variiert. So steht der Text
   immer bündig am rechten Rand des Fotos, direkt darunter. */
.foto-viewer-fotograf {
  position:absolute; font-size:12px; color:#cbd5e1;
  text-align:right; white-space:nowrap; pointer-events:none;
}
.foto-viewer-zaehler { font-size:12px; color:#94a3b8; margin-top:2px; }
.foto-viewer-links {
  flex-shrink:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:90%; max-height:60px; overflow-y:auto;
}
.foto-viewer-links button {
  min-width:28px; height:28px; padding:0 6px; border-radius:6px; border:0;
  background:rgba(255,255,255,.15); color:#e2e8f0; font-size:12px; cursor:pointer;
}
.foto-viewer-links button:hover { background:rgba(255,255,255,.3); }
.foto-viewer-links button.aktiv { background:var(--teal); color:#fff; font-weight:700; }

/* Thumbnails in der Anzeige-Fotogalerie sind jetzt Buttons für die Lightbox,
   kein normaler Link mehr – Cursor entsprechend anpassen. */
.foto-thumb { cursor:zoom-in; }

/* -----------------------------------------------------------------------------
   Druckansicht "Bogen ansehen" (bewertung.php): der Detailinhalt eines Bogens
   wird beim Drucken in #bogen-druck eingehüllt. Beim Drucken wird NUR dieser
   Bereich angezeigt (Topbar/Sidebar/Tabs/Buttons der Hauptseite werden
   ausgeblendet) – unabhängig vom genauen Aufbau von layout.php. Elemente mit
   der Klasse "druck-ausblenden" (z. B. die Export-/Fenster-Buttons) werden
   zusätzlich beim Drucken entfernt.
   ----------------------------------------------------------------------------- */
@media print {
  /* Bekannte Layout-Bereiche aus layout_template.html direkt ausblenden –
     robuster als sich nur auf den generischen visibility-Trick weiter unten
     zu verlassen, und vermeidet unnötigen Leerraum durch den Header/die
     Sidebar-Breite. */
  header, .sidebar, footer { display: none !important; }
  .wrap { padding: 0; max-width: none; }
  .shell { display: block; }
  .main-content { width: 100% !important; margin: 0 !important; }

  /* Zusätzlich generisch abgesichert: innerhalb von .main-content ist beim
     Drucken NUR der Inhalt von #bogen-druck relevant (nicht z. B. die
     Bögen-Liste/Formulare, die auf derselben Seite mit ausgegeben werden). */
  body * { visibility: hidden; }
  #bogen-druck, #bogen-druck * { visibility: visible; }
  #bogen-druck { position: absolute; left: 0; top: 0; width: 100%; }
  #bogen-druck .druck-ausblenden { display: none !important; }

  /* Karten-Bedienelemente machen beim Ausdruck keinen Sinn. */
  .leaflet-control-zoom, .leaflet-control-attribution { display: none !important; }

  /* 4:3 erzwingen: hoeheAnpassen() (karte.js) setzt bei kleinen Fensterhöhen
     ein Inline-height + aspect-ratio:auto, um die Karte auf max. 90% der
     Bildschirmhöhe zu deckeln – das gilt aber nur für den Bildschirm, nicht
     für den Ausdruck. !important überschreibt dieses Inline-Style gezielt
     nur innerhalb der Druckansicht; siehe auch invalidateSize() auf
     'beforeprint' in karte.js, damit Leaflet passend neu zeichnet. */
  #bogen-druck .karte-box--4zu3 {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }

  /* Bewertungsfarben (Ampel-Badges) werden von Browsern standardmäßig NICHT
     mitgedruckt – ohne diese Regel wäre die Bewertung farblos. */
  #bogen-druck * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Kein Abschneiden von Karten mitten auf der Seite. */
  #bogen-druck .card { break-inside: avoid; page-break-inside: avoid; }

  /* Beobachtungsgruppen-Tabellen: statt horizontal zu scrollen (wie am
     Bildschirm), alle Teilflächen-Spalten auf die Seitenbreite pressen. */
  .gruppe-block { overflow-x: visible !important; }
  .gruppe-block table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
  .gruppe-block th, .gruppe-block td { width: auto !important; white-space: normal !important; word-break: break-word; }
  .gruppe-block th.sp-art, .gruppe-block td.sp-art { width: 34% !important; }
}

/* Linkliste (links.php): Baumdarstellung für Anzeige + Verwaltung. */
.linkbaum { list-style:none; margin:0; padding:0; }
.linkbaum .linkbaum { padding-left:20px; border-left:2px solid var(--line); margin:6px 0 0; }
.linkbaum > li { margin:0 0 10px; }
.link-titel, .link-ordner { font-weight:600; }
.link-kommentar { color:var(--muted); font-size:13px; margin:2px 0 0; }
.link-zeile { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.link-actions { display:inline-flex; gap:4px; margin-left:auto; }
.link-actions form { display:inline-flex; }
.link-edit-form {
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:#f8fafc; border:1px solid var(--line); border-radius:8px;
  padding:12px; margin:4px 0;
}
.link-edit-form > div { min-width:140px; }
/* Info-Chips im Link-Bearbeiten-Formular: zeigen (nur lesend), in welchen
   Ordnern der Link aktuell liegt. Die eigentliche Verwaltung der Ablage läuft
   über den Baum (Drag&Drop / 🗑). */
.platz-chips { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0; }
.platz-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border:1px solid var(--line); border-radius:999px;
  background:#f1f5f9; font-size:12px; white-space:nowrap;
}
.platz-chip-leer { color:var(--muted); background:none; border-style:dashed; }

/* Auf-/Zuklappen von Ordnern (Anzeige + Bearbeiten), siehe links.js.
   Der Toggle-Pfeil dreht sich per aria-expanded, die Kind-Liste eines
   eingeklappten Ordners wird nur ausgeblendet (bleibt im DOM erhalten). */
.ordner-zeile { display:inline-flex; align-items:center; gap:4px; }
.ordner-toggle {
  background:none; border:none; cursor:pointer; padding:0 4px;
  font-size:.8em; line-height:1; color:var(--muted);
  transform:rotate(0deg); transition:transform .15s ease;
}
.ordner-toggle:hover { color:var(--slate); }
.ordner-toggle[aria-expanded="false"] { transform:rotate(-90deg); }
.linkbaum li.eingeklappt > ul { display:none; }

/* Nur für Screenreader/Formularlogik vorhanden, visuell unsichtbar (z. B.
   das versteckte Drag&Drop-Formular in links.php). */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Drag & Drop beim Verschieben von Ordnern/Links (links.js) ------------ */

/* Griff-Symbol vor jeder Zeile, signalisiert die Ziehbarkeit. */
.dnd-handle {
  cursor:grab; color:var(--muted); font-size:14px; line-height:1;
  padding:0 2px; user-select:none;
}
.dnd-zeile { cursor:grab; }
.dnd-zeile:active { cursor:grabbing; }

/* Zeile, die gerade gezogen wird. */
.dnd-dragging { opacity:0.4; }

/* Gültiges Drop-Ziel unter dem Mauszeiger. */
.dnd-drop-hover {
  outline:2px dashed var(--teal); outline-offset:2px;
  background:#eef4ff; border-radius:6px;
}

/* Wie oben, aber im Kopier-Modus (Link mit gedrückter Strg/Alt/⌘-Taste
   gezogen) – grün statt blau, damit Kopieren klar vom Verschieben unterscheidbar ist. */
.dnd-drop-copy {
  outline-color:var(--teal-d); background:#ecfdf5;
}

/* Ordner, der als Drop-Ziel ungültig ist (der gezogene Ordner selbst oder
   einer seiner eigenen Unterordner) – wird beim Drag optisch ausgegraut. */
.dnd-drop-invalid { opacity:0.35; cursor:not-allowed; }

/* Permanente Wurzel-Drop-Zone ("auf die oberste Ebene verschieben"): im
   Ruhezustand dezent, während eines laufenden Drags (body.dnd-aktiv, von
   links.js gesetzt) deutlicher hervorgehoben. */
.dnd-root-drop {
  margin:0 0 12px; padding:8px 12px; border:2px dashed var(--line);
  border-radius:8px; text-align:center; font-size:13px; color:var(--muted);
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
body.dnd-aktiv .dnd-root-drop {
  border-color:var(--teal); color:var(--slate);
}

/* --- Linkcheck ------------------------------------------------------------ */

/* Statusfarben (auch für Punkte und Badges genutzt). */
:root {
  --sp-ok:#16a34a; --sp-weiterleitung:#0284c7; --sp-warnung:#d97706;
  --sp-fehler:#dc2626; --sp-ungeprueft:#cbd5e1; --sp-unpruefbar:#94a3b8;
}

/* Kleiner Statuspunkt vor einer Link-Zeile. */
.status-punkt {
  display:inline-block; width:10px; height:10px; border-radius:50%;
  flex:0 0 auto; vertical-align:middle; background:var(--sp-ungeprueft);
}
.status-punkt.sp-ok            { background:var(--sp-ok); }
.status-punkt.sp-weiterleitung { background:var(--sp-weiterleitung); }
.status-punkt.sp-warnung       { background:var(--sp-warnung); }
.status-punkt.sp-fehler        { background:var(--sp-fehler); }
.status-punkt.sp-ungeprueft    { background:var(--sp-ungeprueft); }
.status-punkt.sp-unpruefbar    { background:var(--sp-unpruefbar); }

/* Zusammenfassung als farbige Badges. */
.lc-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.lc-badge {
  font-size:12px; padding:3px 10px; border-radius:999px; color:#fff;
  background:var(--sp-ungeprueft); white-space:nowrap;
}
.lc-badge.sp-ok            { background:var(--sp-ok); }
.lc-badge.sp-weiterleitung { background:var(--sp-weiterleitung); }
.lc-badge.sp-warnung       { background:var(--sp-warnung); }
.lc-badge.sp-fehler        { background:var(--sp-fehler); }
.lc-badge.sp-ungeprueft    { background:var(--sp-unpruefbar); }
.lc-badge.sp-unpruefbar    { background:var(--sp-unpruefbar); }

.lc-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.lc-info { font-size:12px; color:var(--muted); }

/* Fortschrittsbalken. */
.lc-progress { margin-top:12px; }
.lc-bar { height:8px; background:var(--line); border-radius:4px; overflow:hidden; }
.lc-bar-fill { height:100%; width:0; background:var(--teal); transition:width .25s; }
.lc-progress-text { font-size:12px; color:var(--muted); margin-top:5px; }

/* Problemliste. */
.lc-probleme { margin-top:14px; }
.lc-probleme > summary { cursor:pointer; font-weight:600; }
.lc-tabelle { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
.lc-tabelle th { font-size:12px; color:var(--muted); }
.lc-tabelle td, .lc-tabelle th { border-top:1px solid var(--line); padding:7px 8px; vertical-align:top; }
.lc-hinweis { color:var(--muted); }
.lc-zeilen-aktion { white-space:nowrap; text-align:right; }

/* Kopfzeile eines Tab-Panels: Überschrift links, Aktion (z. B. Seiten-Wechsel
   Bearbeiten <-> Linkcheck) rechts. */
.tab-panel-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.tab-panel-kopf h2 { margin:0; }