/* Atkinson Hyperlegible, vom Braille Institute für Lesbarkeit entworfen.
   SIL Open Font License 1.1, deshalb mitgeliefert statt von einem fremden
   Server geladen — das spart einen Fremdzugriff und funktioniert auch, wenn
   der Besucher Schriftdienste blockiert. Der Zeichensatzausschnitt ist
   "latin", enthält also Umlaute und ß. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/atkinson-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/atkinson-bold.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-w: 340px;
  /* Warmes Papier statt Nachtblau. Alle Paarungen sind gegen WCAG AA
     gerechnet: Text 13,4:1 · gedämpft 5,3:1 · Akzent 5,1:1 · Weiß auf
     Akzent 5,4:1. */
  --bg: #faf7f2;
  --bg-light: #f2ece2;
  --text: #2d2a26;
  --text-muted: #6f665b;
  --accent: #2b6cb0;
  --border: #e4dad0;
  --badge-bg: #eae0d4;
  --gut: #1a7a46;
  --schlecht: #b4232a;
  --warnung: #9a6508;
  --schatten: 0 1px 3px rgba(60, 48, 36, 0.10), 0 4px 14px rgba(60, 48, 36, 0.08);
  --schatten-stark: 0 2px 6px rgba(60, 48, 36, 0.14), 0 10px 28px rgba(60, 48, 36, 0.12);
}

html, body, #app { height: 100%; width: 100%; overflow: hidden; }
body {
  font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#map { position: absolute; inset: 0; z-index: 0; }

/* Sidebar */
#sidebar {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w); max-width: 85vw;
  background: var(--bg); border-right: 1px solid var(--border);
  /* Ueber den Werkzeugknoepfen (1001): sonst schweben Schnitt, Flug und
     Dreieck auf dem Telefon ueber der geoeffneten Leiste. */
  z-index: 1002; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.25s ease;
}
#sidebar.open { transform: translateX(0); }

#sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
#sidebar-header h1 { font-size: 16px; font-weight: 600; }
#sidebar-close {
  background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}

#sidebar-content {
  flex: 1; overflow-y: auto; padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

#sidebar-content section,
#sidebar-content .side-section { padding: 8px 16px; border-bottom: 1px solid var(--border); }
#sidebar-content h2,
#sidebar-content .side-section > summary { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* Aufklappbare Bereiche. Das eigene Dreieck des Browsers wird ersetzt, damit es
   links steht und sich mitdreht. list-style auf none braucht Safari, das
   ::-webkit-details-marker zusaetzlich. */
#sidebar-content .side-section > summary {
  cursor: pointer; padding: 4px 0; margin: 0; list-style: none;
  user-select: none; -webkit-user-select: none;
}
#sidebar-content .side-section > summary::-webkit-details-marker { display: none; }
#sidebar-content .side-section > summary::before {
  content: '\25B8'; font-size: 11px; color: var(--text-muted);
  transition: transform 0.12s ease; display: inline-block; width: 10px;
}
#sidebar-content .side-section[open] > summary::before { transform: rotate(90deg); }
#sidebar-content .side-section > summary:hover { color: var(--text); }
#sidebar-content .side-section[open] > summary { margin-bottom: 8px; }

#sidebar-footer { padding: 8px 16px; border-top: 1px solid var(--border); }
#sidebar-footer .meta { font-size: 11px; color: var(--text-muted); }

/* Toggle button */
/* Der Menueknopf muss immer erreichbar sein — ueber der Seitenleiste und ueber
   den Werkzeugknoepfen. Vorher lagen alle drei auf 1001, dann entschied die
   Reihenfolge im Dokument, und Schnitt/Flug/Dreieck gewannen. */
#sidebar-toggle {
  position: absolute; top: 10px; left: 10px; z-index: 1003;
  width: 40px; height: 40px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--schatten);
}

/* Badges */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--badge-bg);
  font-size: 11px; font-weight: 600;
}
.badge-red { background: #fae3e2; color: var(--schlecht); }
.badge-green { background: #dcf1e4; color: var(--gut); }

/* Source & rule items */
.toggle-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; cursor: pointer; user-select: none;
}
.toggle-item input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  width: 16px; height: 16px; accent-color: var(--accent);
}
.toggle-item label { cursor: pointer; flex: 1; min-width: 0; }
.toggle-item .item-name { font-size: 13px; display: block; }
.toggle-item .item-desc { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; }
.toggle-item .item-badge {
  flex-shrink: 0; margin-top: 2px;
}

.source-group { margin-bottom: 6px; }
.source-group-title { font-size: 11px; color: var(--accent); font-weight: 600; margin: 8px 0 4px; }

.source-group-buttons { display: flex; gap: 6px; margin-bottom: 8px; }
.source-group-header { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }

.tier-btn {
  min-height: 34px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-light); color: var(--text); font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.tier-btn:hover { background: var(--border); }
.tier-btn-sm { min-height: 30px; padding: 4px 10px; font-size: 11px; }

.source-search {
  width: 100%; min-height: 38px; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-light); color: var(--text); font-size: 14px;
}
.source-search::placeholder { color: var(--text-muted); }
.source-search:focus { outline: none; border-color: var(--accent); }

/* Filter */
.filter-block { margin-bottom: 14px; }
.filter-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
#floor-slider { width: 100%; accent-color: var(--accent); height: 28px; }
#class-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.class-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-light); font-size: 12px; cursor: pointer; user-select: none;
}
.class-chip input { accent-color: var(--accent); width: 14px; height: 14px; }
.class-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }


/* Stats */
#stats { font-size: 13px; }
#stats .stat-row { display: flex; justify-content: space-between; padding: 3px 0; }
#stats .stat-label { color: var(--text-muted); }

/* Removed list */
#removed-list { max-height: 300px; overflow-y: auto; }
.removed-item { font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.removed-item .removed-name { font-weight: 500; }
.removed-item .removed-reason { color: var(--text-muted); font-size: 11px; }

/* Baselayer radio */
.radio-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.radio-item input { accent-color: var(--accent); }
.radio-item label { cursor: pointer; font-size: 13px; }

/* Loading */
#loading { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Leaflet overrides */
.leaflet-popup-content-wrapper { background: var(--bg-light); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.leaflet-popup-tip { background: var(--bg-light); }
.leaflet-popup-content { font-size: 13px; line-height: 1.5; }
.leaflet-popup-content b { color: var(--text); font-weight: 700; }
.leaflet-popup-content .popup-row { display: flex; justify-content: space-between; gap: 12px; }
.leaflet-popup-content .popup-label { color: var(--text-muted); }
.leaflet-popup-content .popup-count { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.leaflet-popup-content .popup-airspace {
  border-left: 4px solid var(--border); padding-left: 8px; margin-bottom: 8px;
}
.leaflet-popup-content .popup-airspace:last-child { margin-bottom: 0; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-muted); }

/* Rueckmeldung: gut sichtbar unten rechts, ueber der Quellenangabe der Karte.
   Liegt unten ein Schnitt- oder Flugfenster, tritt der Knopf zurueck. */
#fb-open {
  position: absolute; right: 12px; bottom: 30px; z-index: 1001;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 22px;
  background: var(--accent); color: #fff; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--schatten-stark);
}
#fb-open:hover { filter: brightness(1.08); }
#fb-open:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
#app:has(#profile-panel:not([hidden])) #fb-open { display: none; }

/* Schnittprofil */
#profile-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 1001;
  min-height: 40px; padding: 8px 14px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; cursor: pointer; box-shadow: var(--schatten);
}
#profile-toggle.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#map.drawing { cursor: crosshair; }

/* Leaflet verschiebt die Karte ueber ein transform auf .leaflet-map-pane. Ein
   Transform erzeugt einen eigenen Stapelkontext, aus dem ein Popup per z-index
   nicht herauskommt — es bleibt zwangslaeufig unter diesen Schaltflaechen.
   Also weichen die Schaltflaechen aus, und zwar nur dann, wenn sie das
   Infofenster tatsaechlich ueberdecken. */
.behind-popup { opacity: 0 !important; pointer-events: none !important; }
#igc-toggle, #profile-toggle, #tri-toggle { transition: opacity 0.12s ease; }

/* Flugdatei: gleiche Optik wie die Schnitt-Schaltflaeche, direkt links daneben.
   Die Breite von "Schnitt" plus Abstand ergibt den Versatz. */
#igc-toggle {
  position: absolute; top: 10px; right: 94px; z-index: 1001;
  min-height: 40px; padding: 8px 14px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; cursor: pointer; box-shadow: var(--schatten);
}
#igc-toggle.active { background: var(--schlecht); border-color: var(--schlecht); color: #fff; }
#map.igc-drop { outline: 3px dashed var(--accent); outline-offset: -3px; }

/* Dreiecksplaner. Die Schaltflaeche sitzt links neben "Flug", das Bedienfeld
   darunter — schmal genug, dass die Karte daneben nutzbar bleibt. */
#tri-toggle {
  position: absolute; top: 10px; right: 170px; z-index: 1001;
  min-height: 40px; padding: 8px 14px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; cursor: pointer; box-shadow: var(--schatten);
}
#tri-toggle.active { background: var(--gut); border-color: var(--gut); color: #fff; }

#tri-panel {
  position: absolute; top: 58px; right: 10px; z-index: 1001; width: 280px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; line-height: 1.45;
  box-shadow: var(--schatten-stark);
}
#tri-panel[hidden] { display: none; }
.tri-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tri-head strong { font-size: 13px; }
.tri-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
/* Ohne das sticht display:flex das hidden-Attribut aus und die Zeile bliebe sichtbar. */
.tri-row[hidden] { display: none; }
.tri-row > label { color: var(--text-muted); flex-shrink: 0; }
.tri-row input[type=number] { width: 64px; }
.tri-shares input[type=number] { width: 48px; }
#tri-panel input[type=number], #tri-panel select {
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: 3px 5px; font-size: 12px;
}
#tri-panel input[type=range] { width: 130px; }
.tri-check { display: flex; align-items: center; gap: 6px; margin: 8px 0; cursor: pointer; }
#tri-readout { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
#tri-readout .tri-line { display: flex; justify-content: space-between; gap: 10px; }
#tri-readout .tri-line span:first-child { color: var(--text-muted); }
#tri-readout .tri-wp span:last-child { font-variant-numeric: tabular-nums; font-size: 11px; }
#tri-readout .tri-ok { color: #22c55e; }
#tri-readout .tri-bad { color: #ef4444; }
.tri-actions { display: flex; gap: 6px; margin-top: 6px; }
/* Richtungspfeile auf den Schenkeln. Als Marker gezeichnet, damit sie beim
   Zoomen ihre Groesse behalten — in Kartenkoordinaten waeren sie herausgezoomt
   unsichtbar und hereingezoomt riesig. */
.tri-arrow {
  width: 0; height: 0; margin: 5px 0 0 3px;
  border-left: 8px solid rgba(22, 163, 74, 0.95);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.tri-arrow.anflug { border-left-color: rgba(245, 158, 11, 0.95); }
.leaflet-div-icon.tri-arrow-icon { background: none; border: none; }
.tri-actions button { flex: 1; }
.tri-actions button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#tri-note { font-size: 10px; color: var(--text-muted); margin-top: 6px; }

/* Kurzfassung: eine Zeile mit dem, worauf es beim Schieben ankommt. */
#tri-kurz {
  border-top: 1px solid var(--border); margin-top: 8px; padding-top: 7px;
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums;
}
#tri-kurz b { font-weight: 600; }
#tri-kurz .tri-ok { color: var(--gut); }
#tri-kurz .tri-bad { color: var(--schlecht); }

/* Der Rest klappt auf. Zugeklappt als Standard, sonst deckt das Feld auf dem
   Telefon die halbe Karte zu, waehrend man das Dreieck schiebt. */
#tri-mehr > summary {
  cursor: pointer; list-style: none; padding: 7px 0 2px;
  color: var(--text-muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; user-select: none; -webkit-user-select: none;
}
#tri-mehr > summary::-webkit-details-marker { display: none; }
#tri-mehr > summary::before {
  content: '\25B8'; display: inline-block; width: 12px;
  transition: transform 0.12s ease;
}
#tri-mehr[open] > summary::before { transform: rotate(90deg); }
#tri-mehr > summary:hover { color: var(--text); }
#tri-note.warn { color: var(--warnung); }
#map.tri-grab { cursor: move; }
#draw-actions, #igc-actions { display: flex; gap: 6px; }
#draw-actions[hidden], #igc-actions[hidden] { display: none; }
.tier-btn-sm.active { background: var(--accent); border-color: var(--accent); color: #fff; }

#profile-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: 240px; background: var(--bg); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 8px 10px 4px;
  box-shadow: var(--schatten-stark);
}
#profile-panel[hidden] { display: none; }
#profile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#profile-info { font-size: 12px; color: var(--text-muted); }
.profile-actions { display: flex; gap: 6px; flex-shrink: 0; }
#profile-plot { position: relative; flex: 1; min-height: 0; }
/* touch-action: none, sonst scrollt das Telefon die Seite statt zu zoomen. */
#profile-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#profile-tip {
  position: absolute; z-index: 5; max-width: 280px; max-height: 90%;
  display: flex; flex-direction: column;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45;
  box-shadow: var(--schatten-stark);
  /* Bedienbar, sonst laesst sich die Liste bei mehreren Luftraeumen nicht
     scrollen und die Schliessen-Schaltflaeche nimmt keine Klicks an. */
  pointer-events: auto; overscroll-behavior: contain;
}
/* Nur der Inhalt scrollt — das Kreuz bleibt stehen, sonst waere es bei einer
   langen Luftraumliste nach oben weggescrollt und nicht mehr erreichbar. */
#profile-tip-body { overflow-y: auto; min-height: 0; }
#profile-tip[hidden] { display: none; }
#profile-tip-close {
  align-self: flex-end; flex-shrink: 0; margin: -4px -4px 4px 0;
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 16px; cursor: pointer;
}
#profile-tip-close:hover { color: var(--text); }
#profile-tip b { color: var(--text); }
#profile-tip .popup-row { display: flex; justify-content: space-between; gap: 12px; }
#profile-tip .popup-label { color: var(--text-muted); }
#profile-note { font-size: 10px; color: var(--text-muted); min-height: 13px; }

@media (min-width: 768px) {
  #profile-panel { left: var(--sidebar-w); }
}
@media (max-width: 767px) {
  #profile-panel { height: 45vh; }
  #profile-info { font-size: 11px; }
  /* Auf dem Telefon sitzen beide Schaltflaechen unter dem Menuknopf, damit sie
     den Titel nicht verdecken. */
  #igc-toggle { right: 10px; top: 58px; }
  #tri-toggle { right: 10px; top: 106px; }
  /* Auf dem Telefon unten ueber die ganze Breite, sonst deckt das Feld die
     halbe Karte zu, waehrend man das Dreieck schiebt. */
  #tri-panel {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
  }
}

/* Download */
#download-buttons { margin-bottom: 10px; }
.footer-zeile { display: flex; align-items: center; justify-content: space-between; }
.footer-zeile a { color: var(--accent); }
#settings-reset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 16px; min-height: 30px;
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  font: inherit; font-size: 12px; cursor: pointer;
}
#settings-reset:hover { color: var(--text); border-color: var(--text-muted); }
.download-main {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; text-align: left; box-shadow: var(--schatten);
}
.download-main:hover { filter: brightness(1.08); }
.download-main:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.download-main span { display: flex; flex-direction: column; gap: 2px; }
.download-main strong { font-size: 14px; }
.download-main small { font-size: 11px; opacity: 0.9; }
.download-alt { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--text-muted); }

.leaflet-control-attribution { font-size: 10px !important; background: rgba(250,247,242,0.85) !important; color: var(--text-muted) !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }

/* Mobile: Hamburger verstecken wenn Sidebar offen, Titel einrücken als Fallback */
@media (max-width: 767px) {
  #app:has(#sidebar.open) #sidebar-toggle { display: none; }
  #sidebar-header { padding-left: 56px; }

  /* Fingerbediente Trefferflächen (Richtwert 44px) */
  .tier-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .tier-btn-sm { min-height: 40px; padding: 8px 14px; font-size: 12px; }
  .source-search { min-height: 44px; font-size: 16px; }
  .toggle-item { padding: 9px 0; }
  .toggle-item input[type="checkbox"] { width: 22px; height: 22px; }
  .download-main { min-height: 52px; }
  .download-main small { font-size: 12px; }
  .download-alt { font-size: 13px; padding: 8px 0; }
  #sidebar-close { width: 44px; height: 44px; font-size: 26px; }
  #sidebar-toggle { width: 46px; height: 46px; }
  .radio-item { padding: 9px 0; }
  .radio-item input { width: 20px; height: 20px; }
  .class-chip { padding: 9px 12px; font-size: 13px; }
  .class-chip input { width: 18px; height: 18px; }
  #floor-slider { height: 40px; }
  /* Popup darf den Schirm nicht füllen */
  .leaflet-popup-content { max-height: 45vh; overflow-y: auto; }
}

/* Desktop */
@media (min-width: 768px) {
  #sidebar { transform: translateX(0); }
  #sidebar-toggle { display: none; }
  #map { left: var(--sidebar-w); transition: left 0.25s ease; }
  /* Eingeklappt: Leiste raus, Karte ueber die ganze Breite, Menueknopf da. */
  #app.leiste-zu #sidebar { transform: translateX(-100%); }
  #app.leiste-zu #map { left: 0; }
  #app.leiste-zu #sidebar-toggle { display: flex; }
  #app.leiste-zu #profile-panel { left: 0; }
}
#sidebar-close .nur-breit { display: none; }
@media (min-width: 768px) {
  #sidebar-close .nur-schmal { display: none; }
  #sidebar-close .nur-breit { display: inline; font-size: 24px; color: var(--text-muted); }
  #sidebar-close:hover .nur-breit { color: var(--text); }
}

.source-group-buttons { flex-wrap: wrap; }

/* Klassenfilter-Gruppen */
.class-group { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; }
.class-group > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 10px; font-size: 12px; list-style: none;
}
.class-group > summary::-webkit-details-marker { display: none; }
.class-group > summary > span:first-child { flex: 1; }
.class-group-n { color: var(--text-muted); font-size: 11px; }
.class-group-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }

/* ─── Rückmeldeformular ─────────────────────────────────────────────────────
   Als <dialog> mit showModal(): das landet im Top-Layer des Browsers und liegt
   damit über Karte und Seitenleiste, ohne dass es z-index-Schieberei braucht.
   Die Luftraumfenster von Leaflet können das nicht, weil die Kartenebene ein
   transform trägt und damit einen eigenen Stapelkontext aufspannt. */
#fb-dialog {
  width: min(440px, 92vw);
  /* Der globale Reset oben setzt margin: 0 auf alles und nimmt dem Dialog damit
     das margin: auto des Browsers — ohne diese Zeile klebt er oben links. */
  margin: auto;
  max-height: 90vh; overflow-y: auto;
  padding: 0; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 14px;
}
#fb-dialog::backdrop { background: rgba(45, 42, 38, 0.38); }
#fb-form { padding: 14px 16px 16px; display: flex; flex-direction: column; }

.fb-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: -2px -4px 10px 0;
}
.fb-head strong { font-size: 15px; font-weight: 600; }
#fb-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px;
}
#fb-close:hover { color: var(--text); }

#fb-form label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
#fb-form input[type="email"], #fb-form textarea {
  width: 100%; padding: 8px 10px; margin-bottom: 2px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-light); color: var(--text);
  font-family: inherit; font-size: 14px;
}
#fb-form textarea { resize: vertical; min-height: 96px; }
#fb-form input:focus, #fb-form textarea:focus {
  outline: none; border-color: var(--accent);
}
/* Erst nach einem Absendeversuch einfärben, nicht beim Tippen. */
#fb-form.fb-geprueft input:invalid, #fb-form.fb-geprueft textarea:invalid {
  border-color: var(--schlecht);
}

.fb-hint { font-size: 11px; color: var(--text-muted); margin: 0 0 12px; }

.fb-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px !important; color: var(--text) !important;
  margin-bottom: 6px !important; cursor: pointer;
}
.fb-check input { width: 16px; height: 16px; accent-color: var(--accent); }

#fb-tech-show { margin-bottom: 12px; }
#fb-tech-show > summary {
  cursor: pointer; list-style: none;
  font-size: 11px; color: var(--text-muted);
  text-decoration: underline; text-decoration-style: dotted;
}
#fb-tech-show > summary::-webkit-details-marker { display: none; }
#fb-tech-text {
  margin-top: 6px; padding: 8px; max-height: 150px; overflow: auto;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px;
  font-size: 11px; white-space: pre-wrap; word-break: break-word;
  color: var(--text-muted);
}

/* Aus dem Blickfeld, aber im Formular: Maschinen füllen es aus. */
.fb-trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

#fb-msg { font-size: 12px; margin: 0 0 10px; min-height: 0; }
#fb-msg:empty { display: none; }
#fb-msg.fb-fehler { color: var(--schlecht); }
#fb-msg.fb-gut { color: var(--gut); }

.fb-actions { display: flex; gap: 8px; justify-content: flex-end; }
.fb-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.fb-primary:hover { filter: brightness(1.1); }
.fb-primary:disabled { opacity: 0.6; cursor: default; filter: none; }

/* ─── Deckkraftregler in der Seitenleiste ──────────────────────────────────
   Derselbe Regler wie im Dreiecksplaner, nur hier erreichbar, ohne erst ein
   Werkzeug zu öffnen. Er entscheidet mehr über die Lesbarkeit der Karte als
   jede andere Einstellung: Füllungen liegen bei 18 % Deckkraft und addieren
   sich bei Überlagerung auf. */
.opacity-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px 2px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.opacity-row label { font-size: 12px; color: var(--text-muted); }
.opacity-ctl { display: flex; align-items: center; gap: 8px; }
.opacity-ctl input[type="range"] { width: 110px; accent-color: var(--accent); }
#map-opacity-val {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}

/* Hinweis, wenn die Quellensuche nichts findet. Ohne ihn sieht der leere
   Bereich aus, als sei er kaputt. */
.such-leer {
  margin: 2px 0 10px; padding: 8px 10px;
  font-size: 12px; color: var(--text-muted);
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 4px;
}

/* Datenstand: nach mehr als einem AIRAC-Zyklus (28 Tage) auffällig. */
#data-date.veraltet { color: var(--warnung); font-weight: 700; }

/* ─── Hervorhebung, Übersichtsknopf, Meldungen, Trefferflächen ────────────── */

/* B-005: zurück zum Ausgangsausschnitt, direkt unter den Zoomknöpfen. */
.uebersicht-control { margin-top: 6px !important; }
.uebersicht-control a {
  font-size: 15px; line-height: 26px; font-weight: 400;
}

/* B-010: Abzeichen nach dem Messen — zwei Zahlen statt einer. */
.abzeichen-gemessen { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }

/* B-015: Fehlermeldungen stehen jetzt im Werkzeugfeld statt in einem Dialog. */
#profile-info.profil-fehler { color: var(--schlecht); font-weight: 700; }

/* B-004: Einträge im Luftraumfenster reagieren auf das Zeigen, damit die
   Verbindung zum Umriss auf der Karte spürbar wird. */
.popup-airspace { cursor: default; border-radius: 3px; }
.popup-airspace:hover { background: var(--bg-light); }

/* B-017: Trefferflächen. Die Bereichsüberschriften der Seitenleiste sind der
   am häufigsten getroffene Teil der ganzen Seite — jeder Weg zu einer
   Einstellung führt über sie. 23 px Höhe sind dafür zu wenig. */
@media (hover: none), (max-width: 767px) {
  #settings-reset { min-height: 44px; font-size: 13px; }
  .side-section > summary { min-height: 44px; display: flex; align-items: center; }
  .class-group > summary { min-height: 40px; display: flex; align-items: center; }
  .source-group-header { min-height: 40px; }
  .tier-btn-sm { min-height: 36px; }
  /* Die Auswahlknöpfe der Basiskarte und die Kästchen der Quellen bekommen
     eine Zeile, die groß genug zum Tippen ist. */
  #sidebar label { min-height: 40px; display: flex; align-items: center; gap: 8px; }
  #sidebar input[type="radio"], #sidebar input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ─── B-018: Schriftgrößen auf kleinen Geräten ─────────────────────────────
   Gemessen waren rund 90 Prozent aller Texte 11 oder 12 px groß — auf dem
   Telefon genauso wie am Rechner. Die Seite war für kleine Geräte nicht
   gestaltet, sondern nur geschrumpft.

   Dieser Block hebt jede Regel, die 10, 11 oder 12 px setzt, um zwei Stufen
   an (10→12, 11→13, 12→14). Er ist aus der Datei selbst erzeugt, damit keine
   Regel übersehen wird; wer oben eine Schriftgröße ändert, muss hier
   nachziehen. */
@media (max-width: 767px) {
  #sidebar-content .side-section > summary::before { font-size: 13px; }
  #sidebar-footer .meta { font-size: 13px; }
  .badge { font-size: 13px; }
  .toggle-item .item-desc { font-size: 13px; }
  .source-group-title { font-size: 13px; }
  .tier-btn { font-size: 14px; }
  .tier-btn-sm { font-size: 13px; }
  .filter-label { font-size: 14px; }
  .class-chip { font-size: 14px; }
  .removed-item { font-size: 14px; }
  .removed-item .removed-reason { font-size: 13px; }
  .leaflet-popup-content .popup-count { font-size: 13px; }
  #tri-panel { font-size: 14px; }
  #tri-panel input[type=number], #tri-panel select { font-size: 14px; }
  #tri-readout .tri-wp span:last-child { font-size: 13px; }
  #tri-note { font-size: 12px; }
  #tri-mehr > summary { font-size: 13px; }
  #profile-info { font-size: 14px; }
  #profile-tip { font-size: 14px; }
  #profile-note { font-size: 12px; }
  .leaflet-control-attribution { font-size: 12px; }
  .class-group > summary { font-size: 14px; }
  .class-group-n { font-size: 13px; }
  #fb-form label { font-size: 14px; }
  .fb-hint { font-size: 13px; }
  #fb-tech-show > summary { font-size: 13px; }
  #fb-tech-text { font-size: 13px; }
  #fb-msg { font-size: 14px; }
  .opacity-row label { font-size: 14px; }
  #map-opacity-val { font-size: 13px; }
  .such-leer { font-size: 14px; }

  /* Der Dateiname neben dem Quellennamen reichte mit der groesseren Schrift
     bis an die Kante (gemessen 263 gegen 243 px). Er ist die zweitrangige
     Angabe und darf deshalb umbrechen, notfalls mitten im Wort. */
  .item-desc { overflow-wrap: anywhere; word-break: break-word; }
  .toggle-item { flex-wrap: wrap; }
}

/* Alter bzw. Störung einer Quelle, unter dem Dateinamen. */
.item-alter { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.item-alter.warn { color: var(--warnung); font-weight: 700; }

/* Drehgriffe am Dreieck: kleiner gebogener Doppelpfeil, gruen mit heller
   Fassung, damit er auf jedem Untergrund lesbar bleibt. */
.tri-drehgriff { color: #15803d; cursor: grab; }
.tri-drehgriff span { display: block; width: 36px; height: 24px; }
.tri-drehgriff svg {
  display: block;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff);
}