/* Gegenanflug – Pilot (index.html) und Anmeldung. Nur Token aus /brand/tokens.css; Bausteine aus app.css.
   Rahmen der Seiten Heute | Flugbuch | Profil | Dienste; am PC eine Arbeitsfläche, am Handy eine Spalte mit Leiste unten.
   Karten von „Heute“, Flugbuch und Seitenpanel: heute.css. */
.pilot .seite { padding-top: 12px; }
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.knopfzeile .knopf { flex: 0 0 auto; }

/* Teile je Seite (body[data-seite], gesetzt von pilot.js): Heute | Flugbuch | Profil | Dienste */
.pilot [data-teil] { display: none; }
body[data-seite="start"] [data-teil~="start"], body[data-seite="flugbuch"] [data-teil~="flugbuch"],
body[data-seite="profil"] [data-teil~="profil"], body[data-seite="dienste"] [data-teil~="dienste"] { display: grid; }
body:not([data-seite="start"]) .pilot-flaeche { display: none; }
.pilot-flaeche { display: grid; gap: var(--s4); max-width: 720px; margin: 0 auto; padding: var(--s3) var(--s4); align-items: start; }
.pilot-flaeche > * { min-width: 0; }
.pilot-melden, .pilot-heute, .pilot-status { gap: var(--s3); align-content: start; }

/* Meine Dienste (Flugleiterdienst) */
.dienste { display: grid; gap: 16px; align-items: start; min-width: 0; }
.pilot-seite > * { min-width: 0; }
.dienste-karte { gap: 10px; min-width: 0; }
.dienste-karte h2 { font-size: var(--fs-lead); margin: 0; }
.dienste-karte tr.eigen td { background: var(--brand-soft); }
.dienste-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dienste-liste li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 6px 0; border-bottom: 1px solid var(--rule); }
.dienste-liste li:last-child { border-bottom: 0; }
.dienste-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: end; }
.dienste-form .feld:nth-child(3) { grid-column: 1 / -1; }
.dienste-tausch { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dienste-tausch input { min-width: 0; flex: 1 1 140px; }
.dienste-tausch select { min-width: 0; flex: 1 1 200px; max-width: 100%; }
.dienste-tausch p { flex: 1 1 100%; margin: 0; }
.dienste-spalte { display: grid; gap: 16px; align-items: start; min-width: 0; }
.dienste-unter { font: 600 var(--fs-klein)/1.3 var(--f-body); margin: var(--s3) 0 0; color: var(--text); }
.dienste-aktion { min-width: 0; }
.dienste-aktion > summary { cursor: pointer; font-weight: 600; color: var(--brand-fg); padding: 4px 0; white-space: nowrap; }
.dienste-aktion[open] { display: grid; gap: 10px; padding: 8px 10px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sunken); }
.dienste-aufgaben { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dienste-meine td:last-child { min-width: 0; }

@media (max-width: 760px) {
  /* Meine Dienste: Zeilen untereinander statt Tabelle */
  .dienste-meine thead { display: none; }
  .dienste-meine, .dienste-meine tbody, .dienste-meine tr, .dienste-meine td { display: block; }
  .dienste-meine tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  table.liste.dienste-meine td { border: 0; padding: 0; }
  .dienste-meine td:last-child { grid-column: 1 / -1; }
  .dienste-meine td:last-child:empty { display: none; }
  #erinnerungen:empty, #status-ampel:empty { display: none; }
}

/* PC/Tablet: Arbeitsfläche statt Leiste unten (5.2): links Für dich + Melden, Mitte „Heute am Platz“, rechts Platz */
@media (min-width: 761px) {
  .pilot__inhalt { padding-bottom: 24px; }
  .pilot-flaeche { max-width: 1280px; padding: var(--s4) clamp(16px, 2vw, 24px); gap: var(--s4) var(--s5);
    grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.4fr); grid-template-areas: "melden heute" "status heute"; grid-template-rows: auto 1fr; }
  .pilot-melden { grid-area: melden; }
  .pilot-heute { grid-area: heute; }
  .pilot-status { grid-area: status; }
  .pilot-seite { max-width: 1200px; padding: var(--s4) clamp(16px, 2vw, 24px); }
  .dienste { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
/* Drei Spalten erst, wenn die Schrift Platz lässt: Containerabfrage in rem wächst mit A+/A++ und der Browser-Schrift
   (68,75 rem = 1100 px bei 16 px, 1375 px bei A++) – sonst zwei Spalten ohne waagerechtes Scrollen (P3). */
.pilot__inhalt { container-type: inline-size; }
@container (min-width: 68.75rem) {
  .pilot-flaeche { grid-template-columns: minmax(20rem, 23.75rem) minmax(0, 1fr) minmax(15rem, 17.5rem);
    grid-template-areas: "melden heute status"; grid-template-rows: auto; }
}

.zaehler--klein { grid-template-columns: var(--tap) 1fr var(--tap); }
.zaehler--klein button { min-height: var(--tap); font-size: 1.375rem; }
.zaehler--klein output { font-size: 1.75rem; }

/* Profil: SEP-Fortschritt */
.fortschritt { display: grid; grid-template-columns: 11em 1fr auto; gap: 8px; align-items: center; font-size: var(--fs-klein); }
.fortschritt__balken { height: 10px; border-radius: 99px; background: var(--sunken); border: 1px solid var(--rule-strong); overflow: hidden; }
.fortschritt__balken i { display: block; height: 100%; background: var(--brand); }
.fortschritt--ok .fortschritt__balken i { background: var(--ok); }
.fortschritt--ok > span:first-child { color: var(--ok); font-weight: 600; }
.belege { padding-left: 18px; }
.warteliste { padding-left: 18px; display: grid; gap: 6px; }
details.karte summary, details.klein summary { cursor: pointer; min-height: 2rem; }

@media (max-width: 420px) {
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fortschritt { grid-template-columns: 1fr auto; }
  .fortschritt__balken { grid-column: 1 / -1; grid-row: 2; }
}
/* Anmelden: zentrierte Karte */
.anmelden-seite { max-width: 30rem; }
@media (min-width: 761px) { .anmelden-seite { margin-top: 6vh; } .anmelden-seite h1 { font-size: 1.375rem; } }
.anmelden-seite details.karte { gap: 6px; }
.dienste-zeiten { display: block; white-space: normal; min-width: 12em; }
.dienste-hinweis { display: block; margin-top: 4px; color: var(--warn-ink); }