/* carbo-acb — Gestaltung.
   Aufbau: erst die Grundlagen (mobil), am Ende die Erweiterungen für breite
   Schirme. Am Platz wird die Seite auf dem Telefon gelesen; der Rechner ist
   der Sonderfall, nicht umgekehrt.

   Farben aus der Vereinsseite aeroclub-bamberg.de. */
:root{
  --grund:#141827; --grund2:#1b2035; --linie:#2a3150; --karte:#171c2e;
  --schrift:#e8ecf6; --leise:#96a0bd; --akzent:#4a63ff; --akzent-hell:#7f92ff;
  --gold:#d3be90; --warn:#e0a44a; --gruen:#4ec08a; --rot:#ff8f8f;
  --rand:12px;
  --schriftfamilie:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--schrift);font-family:var(--schriftfamilie);
     font-size:15px;line-height:1.45;overflow-x:hidden}
a{color:var(--akzent-hell);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1180px;margin:0 auto;padding:12px var(--rand) 48px}
h2,h3{margin:0}

/* ---------- Kopf: eine Zeile, auch auf dem Telefon ---------- */
.kopf{display:flex;align-items:center;gap:10px;padding:8px var(--rand);
      background:#10131f;border-bottom:1px solid var(--linie);
      position:sticky;top:0;z-index:900;padding-top:max(8px,env(safe-area-inset-top))}
.marke{display:flex;align-items:center;gap:9px;color:var(--schrift);flex-shrink:0}
.marke:hover{text-decoration:none}
.marke img{border-radius:6px;width:30px;height:30px}
.markentext strong{display:block;font-size:14px;line-height:1.2;white-space:nowrap}
.markentext small{display:block;color:var(--leise);font-size:11px}
/* Auf sehr schmalen Schirmen bleibt nur das Wappen — der Name kostet dort den
   Platz, den das Menü braucht. */
@media (max-width:430px){.markentext{display:none}}
.menue{display:flex;gap:2px;align-items:center;margin-left:auto;overflow-x:auto;
       scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menue::-webkit-scrollbar{display:none}
.menue a{padding:6px 10px;border-radius:8px;color:var(--leise);font-weight:600;
         font-size:13px;white-space:nowrap}
.menue a.an{background:var(--akzent);color:#fff}
.menue a.abmelden{font-size:15px;padding:5px 8px;color:var(--leise)}

/* ---------- Anmeldung ---------- */
.anmeldung{max-width:380px;margin:6vh auto;text-align:center;background:var(--grund2);
           border:1px solid var(--linie);border-radius:16px;padding:28px 22px}
.anmeldung h1{font-size:20px;margin:12px 0 4px}
.anmeldung form{display:grid;gap:11px;margin-top:18px;text-align:left}
.anmeldung label{display:grid;gap:4px;font-size:12.5px;color:var(--leise)}
input,select{background:var(--grund);border:1px solid var(--linie);border-radius:9px;
             padding:10px 12px;color:var(--schrift);font-size:16px;/* <16px zoomt iOS beim Tippen */
             font-family:inherit;width:100%;color-scheme:dark}
input:focus,select:focus{outline:2px solid var(--akzent);border-color:transparent}
button{background:var(--akzent);color:#fff;border:0;border-radius:9px;padding:10px 14px;
       font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
button:hover{background:var(--akzent-hell)}
button.klein{padding:6px 11px;font-size:13px;border-radius:8px}
button.gefahr{background:#3a2030;color:var(--rot);border:1px solid rgba(255,143,143,.3)}
.fehler{color:var(--rot);font-size:14px}
.fehler.kasten{background:rgba(255,143,143,.1);border:1px solid rgba(255,143,143,.35);
               border-radius:9px;padding:9px 13px}
.meldung{background:rgba(78,192,138,.12);border:1px solid rgba(78,192,138,.4);
         color:var(--gruen);border-radius:9px;padding:9px 13px;font-size:14px}
.hinweis{background:var(--grund);border:1px dashed var(--linie);border-radius:9px;
         padding:10px;font-size:13px;color:var(--leise)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--gold)}

/* ---------- Filter- und Zeitleiste ---------- */
.filterleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* Kopfzeile („Anzeigen" / „Zeitraum" plus Lagemeldung) über dem Inhalt: Der
   Titel neben dem ersten Kästchen sah aus wie ein weggerutschtes Etikett. */
.filterkasten,.zeitleiste{display:grid;gap:8px;
    background:var(--grund2);border:1px solid var(--linie);border-radius:var(--rand);
    padding:9px 12px;width:100%}
.leistenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kaestchenreihe{display:flex;align-items:center;gap:9px 16px;flex-wrap:wrap}
.zeitleiste{margin-bottom:14px}
.filtertitel{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--leise);
             font-weight:700;flex:0 0 auto}
.kaestchen{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;cursor:pointer;
           user-select:none}
.kaestchen input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--akzent);cursor:pointer}
.kaestchen small{color:var(--leise);font-size:11.5px}
.filterlage{font-size:12px;color:var(--gold);font-weight:600;text-align:right}
.filterweg{font-size:12px}
.filterkasten button,.zeitleiste button{background:var(--linie);color:var(--schrift)}
.filterkasten button:hover,.zeitleiste button:hover{background:var(--akzent)}
.schalter{display:inline-flex;background:var(--grund);border:1px solid var(--linie);
          border-radius:10px;padding:3px;gap:2px;overflow-x:auto;max-width:100%;
          scrollbar-width:none}
.schalter::-webkit-scrollbar{display:none}
.schalter a{padding:5px 11px;border-radius:7px;color:var(--leise);font-size:13px;
            font-weight:600;white-space:nowrap}
.schalter a.an{background:var(--akzent);color:#fff}
.schalter a:hover{text-decoration:none;color:var(--schrift)}
.eigener-zeitraum{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.eigener-zeitraum input{width:auto;min-width:0;flex:1 1 auto;padding:6px 8px;font-size:13px}
.bis{color:var(--leise)}
.zurueck{font-size:13px;margin-left:auto}

/* ---------- Tageskarten und Flugliste ---------- */
.tag{background:var(--grund2);border:1px solid var(--linie);border-radius:var(--rand);
     margin-bottom:14px;overflow:hidden}
.tag>header{padding:11px 13px;border-bottom:1px solid var(--linie);
            background:linear-gradient(180deg,#1e2440,#1b2035)}
.tag h2{font-size:15.5px;letter-spacing:.2px}
.tagszahlen{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:4px;font-size:12.5px;
            color:var(--leise)}
.tagszahlen b{color:var(--schrift)}
.wert-zahl{white-space:nowrap;font-variant-numeric:tabular-nums}
.zeit{white-space:nowrap;font-variant-numeric:tabular-nums}
.leise{color:var(--leise)}
.r{text-align:right}
.leer{padding:18px;color:var(--leise);text-align:center}
.blaettern{display:flex;justify-content:space-between;margin:4px 0 20px}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
   color:var(--leise);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--linie);
   white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid rgba(42,49,80,.5);font-size:13.5px}
tbody tr.flug{cursor:pointer}
tbody tr.flug:hover{background:#1f2540}
tr.flug.offen{background:#232a49}
tr.verein td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
tr.fehlzeile td{color:var(--rot)}
.kennung{font-weight:600;white-space:nowrap}
.kennung a{color:inherit}
.kennung a:hover{color:var(--akzent-hell)}
.muster{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12ch}
.typ{display:inline-block;min-width:48px;text-align:center;font-size:10.5px;font-weight:700;
     padding:2px 5px;border-radius:5px;margin-right:6px;letter-spacing:.3px;
     background:#2a3150;color:var(--leise);vertical-align:1px}
.typ.t1{background:rgba(78,192,138,.16);color:var(--gruen)}
.typ.t2{background:rgba(74,99,255,.2);color:var(--akzent-hell)}
.typ.t3{background:rgba(211,190,144,.16);color:var(--gold)}
.wett{color:var(--gold);font-size:11.5px}
.marke-klein{display:inline-block;font-size:10.5px;color:var(--warn);white-space:nowrap;
             border:1px solid rgba(224,164,74,.4);border-radius:4px;padding:0 4px}
.inderluft{color:var(--gruen);font-weight:600;font-size:12.5px;white-space:nowrap}
.unklar{color:var(--leise);font-style:italic;font-size:12.5px;white-space:nowrap;
        border-bottom:1px dotted var(--linie)}

/* ---------- Tabellen als Karten (schmale Schirme) ----------
   Jede Zeile wird ein kleiner Block, jede Zelle bekommt ihre Überschrift aus
   `data-spalte` vorangestellt. Ohne das bricht eine achtspaltige Tabelle auf
   dem Telefon Wort für Wort um — genau das war der Zustand vorher. */
@media (max-width:760px){
  .karten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* ⚠ `display:block` schlägt sonst das hidden-Attribut: die eingeklappte
     Detailzeile stand als leere Karte zwischen den Flügen. */
  .karten tbody tr[hidden]{display:none}
  /* Beschriftung klein über dem Wert, drei Werte je Reihe. Label links und
     Wert rechts nebeneinander lässt acht Zeilen zu Fließtext verschwimmen —
     genau das war auf dem iPhone nicht mehr lesbar. */
  .karten tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
                   gap:9px 10px;padding:11px 12px;border-bottom:1px solid var(--linie)}
  .karten tbody td:first-child{grid-column:1/-1;font-size:16px;font-weight:700;
                               border-bottom:1px solid rgba(42,49,80,.7);
                               padding-bottom:6px;margin-bottom:1px}
  .karten tbody td:first-child::before{display:none}
  .karten tbody tr:last-child{border-bottom:0}
  .karten td{display:block;border:0;padding:0;font-size:14px;font-weight:600;
             overflow-wrap:anywhere}
  .karten td.r{text-align:left}
  .karten td::before{content:attr(data-spalte);display:block;color:var(--leise);
                     font-size:9.5px;font-weight:600;text-transform:uppercase;
                     letter-spacing:.5px;margin-bottom:1px}
  .karten td:empty{display:none}
  .karten td[colspan]{display:block;text-align:center}
  .karten td[colspan]::before{content:none}
  .karten tr.verein td:first-child{box-shadow:none}
  .karten tr.verein{border-left:3px solid var(--gold);padding-left:9px}

  /* Die Flugliste bekommt eine dichtere Anordnung als die übrigen Tabellen:
     Zeiten und Dauer in einer Kopfzeile, darunter das Luftfahrzeug. */
  .fluege tbody tr.flug{display:grid;grid-template-columns:auto auto 1fr;
                        gap:2px 10px;align-items:baseline}
  /* ⚠ Muss die allgemeine Kartenregel (`td:first-child` über die ganze Breite)
     überstimmen — sonst legt sich die Startzeit über die Landezeit. */
  .fluege tbody tr.flug td:first-child{grid-column:1;grid-row:1;border:0;margin:0;
      padding:0;font-size:13.5px;font-weight:600}
  .fluege tbody tr.flug td{display:block;padding:0}
  .fluege td::before{content:none}
  .fluege td:nth-child(1){grid-column:1;grid-row:1;font-weight:600}
  .fluege td:nth-child(1)::after{content:"→";color:var(--leise);margin:0 2px 0 6px}
  .fluege td:nth-child(2){grid-column:2;grid-row:1;font-weight:600}
  .fluege td:nth-child(3){grid-column:3;grid-row:1;text-align:right;color:var(--gold)}
  .fluege td:nth-child(4){grid-column:1/3;grid-row:2}
  .fluege td:nth-child(5){grid-column:3;grid-row:2;text-align:right;font-size:12.5px}
  .fluege td:nth-child(6),.fluege td:nth-child(7){grid-row:3;font-size:12px;
       color:var(--leise);text-align:left}
  .fluege td:nth-child(6){grid-column:1/3}
  .fluege td:nth-child(7){grid-column:3;text-align:right}
  .fluege td:nth-child(6):not(:empty)::before{content:"max. Höhe ü. NN ";color:var(--leise);
       text-transform:none;letter-spacing:0;font-size:12px}
  .fluege td:nth-child(7):not(:empty)::before{content:"Strecke ";color:var(--leise);
       text-transform:none;letter-spacing:0;font-size:12px}
  .muster{max-width:none}
  /* Ein Feld, in dem nur „—" steht, kostet auf dem Telefon eine ganze Zeile
     für nichts. Auf breiten Schirmen bleibt die Spalte sichtbar, damit das
     Raster nicht springt. */
  .fluege tbody tr.flug td[data-leer]{display:none}
}

/* ---------- Detailbereich eines Fluges ---------- */
.detailzeile>td{padding:0!important;background:#161b2c}
.detail{display:grid;gap:14px;padding:14px}
.detailkarte{height:260px;border-radius:10px;overflow:hidden;background:var(--karte)}
.hoehenprofil{margin-top:8px;background:var(--grund2);border:1px solid var(--linie);
              border-radius:10px;padding:6px}
.detailwerte{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;
             align-content:start}
.wert{background:var(--grund2);border:1px solid var(--linie);border-radius:10px;padding:8px 10px}
.wert b{display:block;font-size:15px;white-space:nowrap}
.wert span{font-size:11px;color:var(--leise);text-transform:uppercase;letter-spacing:.3px}
.detailhinweis{font-size:12.5px;color:var(--leise)}

/* ---------- Kalender ---------- */
.kalender{background:var(--grund2);border:1px solid var(--linie);border-radius:var(--rand);
          padding:10px 12px;margin-bottom:16px}
.kalender>summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none}
.kalender>summary::-webkit-details-marker{display:none}
.kalender>summary::before{content:"▸ ";color:var(--leise)}
.kalender[open]>summary::before{content:"▾ "}
.jahreswahl{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.jahreswahl a{font-size:12px;padding:3px 9px;border-radius:6px;background:var(--grund);
              color:var(--leise)}
.jahreswahl a.an{background:var(--akzent);color:#fff}
#kalenderfeld{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.monat b{font-size:10.5px;color:var(--leise);text-transform:uppercase;letter-spacing:.5px}
.monatsgitter{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5px;margin-top:3px}
.monatsgitter a,.monatsgitter span{aspect-ratio:1;border-radius:2px;background:#1e2338;
   display:block;font-size:0;max-width:14px}
.monatsgitter a:hover{outline:2px solid var(--akzent-hell)}
.k1{background:rgba(74,99,255,.28)!important}
.k2{background:rgba(74,99,255,.5)!important}
.k3{background:rgba(74,99,255,.72)!important}
.k4{background:var(--akzent)!important}
.legende{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--leise);margin:8px 0 0}
.legende span{width:11px;height:11px;border-radius:3px;background:#1e2338;display:inline-block}

/* ---------- Kacheln, Blöcke, Diagramme ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;
         margin-bottom:16px}
.kachel{background:var(--grund2);border:1px solid var(--linie);border-radius:var(--rand);
        padding:11px 13px}
.kachel b{display:block;font-size:21px;letter-spacing:-.4px;white-space:nowrap;
          font-variant-numeric:tabular-nums}
.kachel span{font-size:11.5px;color:var(--leise);line-height:1.3;display:block;margin-top:2px}
.block{background:var(--grund2);border:1px solid var(--linie);border-radius:var(--rand);
       padding:13px;margin-bottom:14px}
.block h3{font-size:14.5px;margin-bottom:10px}
.block>.tabelle{margin:0 -13px}
.block>.tabelle td:first-child,.block>.tabelle th:first-child{padding-left:13px}
.block>.tabelle td:last-child,.block>.tabelle th:last-child{padding-right:13px}
.zweispaltig{display:grid;gap:14px}
.klein-text{font-size:12px;margin:0 0 10px}
.balken{display:flex;align-items:flex-end;gap:4px;height:130px;margin-bottom:6px}
.klein-balken{height:80px;gap:2px}
.balken-eintrag{flex:1;max-width:110px;display:flex;flex-direction:column;
                justify-content:flex-end;align-items:center;height:100%;gap:4px}
.saeule{width:100%;background:linear-gradient(180deg,var(--akzent-hell),var(--akzent));
        border-radius:4px 4px 0 0;min-height:3px}
.balken-eintrag span{font-size:10px;color:var(--leise)}
.nebensache{margin-top:12px;border-top:1px solid var(--linie);padding-top:10px}
.nebensache>summary{cursor:pointer;font-size:13px;color:var(--leise);font-weight:600}
.nebensache>summary:hover{color:var(--schrift)}
.titelzeile{margin:0;font-size:19px}
.marke-gold{font-size:10.5px;color:var(--gold);border:1px solid rgba(211,190,144,.4);
            border-radius:5px;padding:2px 7px;vertical-align:middle;margin-left:6px;
            white-space:nowrap}
.kontoform{display:grid;gap:10px;max-width:420px}
.kontoform label{display:grid;gap:4px;font-size:12.5px;color:var(--leise)}
form.inline{display:inline}

/* ---------- Breite Schirme ---------- */
@media (min-width:761px){
  body{font-size:15px}
  main{padding:20px 18px 60px}
  .kopf{padding:11px 18px;gap:16px}
  .marke img{width:40px;height:40px}
  .markentext strong{font-size:16px}
  .markentext small{font-size:12px}
  .menue a{padding:7px 13px;font-size:14px}
  .spalten{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
  .seitenspalte{position:sticky;top:78px}
  .kalender{margin-bottom:0}
  #kalenderfeld{grid-template-columns:repeat(3,1fr)}
  .zweispaltig{grid-template-columns:1fr 1fr;gap:18px}
  .detail{grid-template-columns:minmax(0,1fr) 290px}
  .detailkarte{height:330px}
  .detailhinweis{grid-column:1/-1}
  .tag{margin-bottom:18px}
  .tag h2{font-size:17px}
  td{font-size:14px;padding:10px 12px}
  .kachel b{font-size:23px}
}
@media (min-width:1000px){
  .kacheln{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
}

/* Sortierbare Spalten */
th.klickbar{cursor:pointer;user-select:none}
th.klickbar:hover{color:var(--schrift)}
th.klickbar::after{content:"";display:inline-block;width:9px;color:var(--leise)}
th.klickbar[data-richtung="1"]::after{content:"▲";color:var(--akzent-hell)}
th.klickbar[data-richtung="-1"]::after{content:"▼";color:var(--akzent-hell)}
.sortierwahl{display:none;margin:0 0 10px;font-size:13px;padding:7px 10px}
@media (max-width:760px){
  /* Ohne sichtbare Kopfzeile braucht es einen anderen Griff zum Sortieren. */
  .sortierwahl{display:block}
}

/* Teilweise aufgezeichnete Routen: das „≥" sagt, dass der Weg länger war. */
.unvollstaendig{color:var(--warn);font-weight:700;cursor:help}