/* Rudel-Admin (admin/index.html, seit 09.11.2026) nach stil.css. Der letzte Teil gilt in der eingebetteten Seite: admin.js hängt
   diese Datei dort ein und setzt html.rudel-bearbeiten. Kein ::after an Links, die Knöpfe der Seite brauchen es für ihre Platte.
   Aufbau (User 09.11.2026: „die funktionen übersichtlicher gestalten“): Kopf oben, Seitenleiste links, rechts die Seite im
   Rahmen (Texte) oder eine Ansicht (Kader, Termine, Listen, Papierkorb). */

/* ----------------------------------------------------------------- Kopf, Anmeldung */
.a-kopf {
  position: fixed; inset: 0 0 auto; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--linie); background: rgba(5, 8, 12, .97);
}
.a-marke { display: inline-flex; align-items: center; gap: .5rem; color: var(--silber-hell); text-decoration: none;
  font: 700 1rem/1 var(--wappen); letter-spacing: .1em; text-transform: uppercase; }
.a-marke img { width: 22px; }
.a-knopf {
  padding: .45rem .8rem; border: 1px solid var(--linie); border-radius: 3px; background: var(--stein); color: var(--silber);
  font: 600 .92rem/1 var(--klein); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.a-knopf:hover:not(:disabled) { border-color: var(--tuerkis); color: #fff; }
.a-haupt { border-color: var(--tuerkis); background: var(--tuerkis-tief); color: #fff; }
.a-haupt:not(:disabled) { box-shadow: 0 0 0 2px rgba(158, 240, 236, .18); }
.a-knopf:disabled { opacity: .45; cursor: default; }
.a-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-left: auto; }
.a-wer, .a-zuletzt { color: var(--leise); font-size: .88rem; }
.a-wer b { color: var(--silber-hell); }
.a-status { color: var(--silber-hell); font-weight: 600; font-size: .92rem; }
.a-status.gut { color: var(--benutzen); }
.a-status.fehler { color: #ff9d8f; }

.a-start { display: grid; place-items: center; min-height: 100vh; padding: 5rem 1rem 2rem; }
.a-karte { width: min(560px, 100%); padding: 2rem 1.6rem; border: 1px solid var(--linie); background: var(--stein); text-align: center; }
.a-karte h1 { margin: 0 0 1rem; color: var(--silber-hell); font: 900 1.8rem/1.1 var(--wappen); letter-spacing: .06em; text-transform: uppercase; }
.a-karte .fehler { color: #ff9d8f; }
.a-klein { color: var(--leise); font-size: .92rem; }
.a-klein a { color: var(--tuerkis-hell); }
.admin [hidden] { display: none !important; }

/* ----------------------------------------------------------------- Seitenleiste und Bühne (--a-kopf setzt admin.js) */
.a-leiste { position: fixed; top: var(--a-kopf, 4rem); bottom: 0; left: 0; z-index: 4; width: 14.5rem; overflow-y: auto;
  padding: .4rem .6rem 2rem; border-right: 1px solid var(--linie); background: rgba(5, 8, 12, .97); }
.a-gruppe-titel { margin: .95rem .5rem .3rem; color: var(--leise); font: 600 .72rem/1 var(--klein); letter-spacing: .16em; text-transform: uppercase; }
.a-leiste button { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .42rem .6rem; border: 1px solid transparent;
  border-radius: 3px; background: none; color: var(--silber); font: 600 .95rem/1.2 var(--klein); text-align: left; cursor: pointer; }
.a-leiste button:hover { border-color: var(--linie); color: #fff; }
.a-leiste button[aria-current="page"] { border-color: var(--tuerkis); background: var(--stein); color: var(--tuerkis-hell); }
.a-zahl { margin-left: auto; color: var(--leise); font-size: .85rem; }
/* der Spielname vor Texte, Kader, Termine: am PC nur für Screenreader (fünfmal „Texte“ wäre sonst nicht zu unterscheiden) */
.a-schmal { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* gelb = Ungespeichertes in diesem Bereich, rot = Fehler beim Speichern; der Text darin ist für Screenreader */
.a-punkt { display: none; flex: none; width: .5rem; height: .5rem; overflow: hidden; border-radius: 50%; color: transparent; font-size: 0; }
.a-punkt.geaendert { display: inline-block; background: #ffd36b; }
.a-punkt.fehler { display: inline-block; background: #ff5b4d; }
.a-buehne { position: fixed; top: var(--a-kopf, 4rem); right: 0; bottom: 0; left: 14.5rem; display: flex; flex-direction: column; }
.a-hilfe { margin: 0; padding: .4rem 1rem; border-bottom: 1px solid var(--linie); color: var(--leise); font-size: .85rem; }
.a-hilfe:empty { display: none; }
.a-buehne iframe { display: block; flex: 1; width: 100%; border: 0; background: var(--nacht); }
.a-ansicht { flex: 1; overflow: auto; padding: 1.2rem 1.6rem 3rem; }

@media (max-width: 860px) {
  /* schmal: die Leiste wird eine Zeile unter dem Kopf, die Spielnamen stehen dann vor den Einträgen */
  .a-leiste { right: 0; bottom: auto; display: flex; gap: .3rem; width: auto; height: 3.2rem; overflow: auto hidden; padding: .35rem .5rem;
    border-right: 0; border-bottom: 1px solid var(--linie); white-space: nowrap; scrollbar-width: thin; }
  .a-gruppe { display: contents; }
  .a-gruppe-titel { display: none; }
  .a-leiste button { flex: none; width: auto; }
  .a-schmal { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--leise); }
  .a-zahl { margin-left: 0; }
  .a-buehne { top: calc(var(--a-kopf, 4rem) + 3.2rem); left: 0; }
  .a-ansicht { padding: 1rem .8rem 3rem; }
  .a-zuletzt, .a-wer { display: none; }
}

/* ----------------------------------------------------------------- Ansichten: Kader, Termine, Listen, Papierkorb */
.a-ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.a-ansicht-kopf h1 { margin: 0 auto 0 0; color: var(--silber-hell); font: 700 1.35rem/1.2 var(--wappen); letter-spacing: .05em; text-transform: uppercase; }
.a-ansicht h2 { margin: 0 0 .8rem; color: var(--silber-hell); font: 700 1.05rem/1.2 var(--wappen); letter-spacing: .05em; text-transform: uppercase; }
.a-leer { color: var(--leise); font-style: italic; }
.a-ansicht input, .a-ansicht select, .a-ansicht textarea { width: 100%; padding: .42rem .55rem; border: 1px solid var(--linie); border-radius: 3px;
  background: var(--nacht); color: var(--text); font: 400 .95rem/1.3 var(--schrift); }
@media (max-width: 860px) {
  /* nach der Grundregel, sonst gewönne deren font: unter 16 px vergrößert Safari beim Antippen */
  .a-ansicht input, .a-ansicht select, .a-ansicht textarea { font-size: 1rem; }
}
.a-ansicht input:focus, .a-ansicht select:focus, .a-ansicht textarea:focus { border-color: var(--tuerkis); outline: none; }
.a-ansicht input[type="checkbox"] { width: auto; }
.a-fehlertext { min-height: 1.2em; margin: .6rem 0 0; color: #ff9d8f; }
.a-fehlertext:empty { min-height: 0; margin: 0; }   /* bleibt im Baum, sonst sagt ein Screenreader die Meldung oft nicht an */
.a-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.a-weg { border-color: rgba(255, 91, 77, .45); }
.a-weg:hover:not(:disabled) { border-color: #ff5b4d; }

/* Kader als Tabelle; am Handy seitlich verschiebbar */
.a-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--linie); }
.a-tabelle { width: 100%; min-width: 48rem; border-collapse: collapse; }
.a-tabelle th { padding: .5rem .5rem; border-bottom: 1px solid var(--linie); background: var(--stein); color: var(--leise);
  font: 600 .75rem/1.2 var(--klein); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.a-tabelle td { padding: .35rem .4rem; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.a-tabelle td:last-child { width: 1%; white-space: nowrap; }
.a-tabelle tr.a-geaendert td { background: rgba(255, 211, 107, .07); }
.a-tabelle tr.a-geaendert td:first-child { box-shadow: inset 3px 0 #ffd36b; }
.a-tabelle tr.a-fehler td:first-child { box-shadow: inset 3px 0 #ff5b4d; }
.a-tabelle tr.a-geloescht td { color: var(--leise); }
.a-tabelle tr.a-geloescht s { color: var(--silber); }
.a-wahl { display: flex; align-items: center; gap: .35rem; }
.a-farbe { flex: none; width: .7rem; height: .7rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.a-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Termine und Listen: Auswahl links, Formular rechts */
.a-zweispaltig { display: grid; grid-template-columns: minmax(14rem, 21rem) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.a-auswahl { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.a-auswahl-titel { margin: .7rem 0 .1rem; color: var(--leise); font: 600 .72rem/1 var(--klein); letter-spacing: .16em; text-transform: uppercase; }
.a-auswahl-titel:first-child { margin-top: 0; }
.a-auswahl button { display: grid; gap: .15rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 3px;
  background: var(--stein); color: var(--silber); font: 400 .95rem/1.25 var(--schrift); text-align: left; cursor: pointer; }
.a-auswahl button:hover { border-color: var(--tuerkis); }
.a-auswahl button[aria-current="true"] { border-color: var(--tuerkis); background: var(--stein-hell); color: #fff; }
.a-auswahl b { color: var(--silber-hell); font-weight: 700; }
.a-auswahl small { color: var(--leise); }
.a-auswahl button.a-geaendert { box-shadow: inset 3px 0 #ffd36b; }
.a-auswahl button.a-fehler, .a-auswahl button.a-unfertig { box-shadow: inset 3px 0 #ff5b4d; }
.a-auswahl button.a-geloescht b { text-decoration: line-through; color: var(--leise); }
.a-marke-klein { justify-self: start; padding: .1rem .4rem; border: 1px solid var(--linie); border-radius: 3px; color: var(--leise);
  font: 600 .7rem/1.2 var(--klein); letter-spacing: .1em; text-transform: uppercase; }
.a-formular { padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--linie); background: var(--stein); }
.a-block { min-width: 0; margin: 0 0 1rem; padding: .8rem .9rem .3rem; border: 1px solid var(--linie); border-radius: 3px; }
.a-block > legend { padding: 0 .35rem; color: var(--tuerkis-hell); font: 600 .78rem/1 var(--klein); letter-spacing: .14em; text-transform: uppercase; }
.a-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 .8rem; }
.a-feld { display: grid; gap: .25rem; margin-bottom: .7rem; }
.a-feld > span, .a-feld > legend { color: var(--leise); font: 600 .78rem/1.2 var(--klein); letter-spacing: .1em; text-transform: uppercase; }
fieldset.a-feld { min-width: 0; margin: 0 0 .7rem; padding: 0; border: 0; }
.a-feld > legend { margin-bottom: .25rem; padding: 0; }
.a-tage { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.a-tage label { display: inline-flex; align-items: center; gap: .3rem; }
.a-slots { display: grid; gap: .4rem; margin-bottom: .7rem; }
.a-slot { display: grid; grid-template-columns: 1fr 1fr auto; gap: .4rem; align-items: center; }
.a-listenzeile { display: grid; grid-template-columns: .9rem minmax(8rem, 1fr) 8.5rem auto auto auto; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.a-korbzeile { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--linie); }
.a-korbzeile small { grid-column: 1; color: var(--leise); }
.a-korbzeile .a-knopf { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1120px) {
  .a-zweispaltig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* schmal: Name über die ganze Breite, Farbe und Knöpfe darunter */
  .a-listenzeile { grid-template-columns: .9rem minmax(0, 1fr) auto auto auto; }
  .a-listenzeile input { grid-column: 2 / -1; }
  .a-listenzeile select { grid-column: 2; }
}

/* ----------------------------------------------------------------- In der eingebetteten Seite */
.rudel-bearbeiten .kopf-admin { display: none; }   /* man ist ja schon im Admin */
/* Rahmen nur beim Drüberfahren (User 09.11.2026), Geändertes bleibt gelb, Fehler rot */
.rudel-bearbeiten [data-feld] { outline: 1px dashed transparent; outline-offset: 3px; cursor: text; }
.rudel-bearbeiten [data-feld]:hover { outline-color: rgba(158, 240, 236, .8); }
.rudel-bearbeiten [data-feld]:focus { outline: 2px solid var(--tuerkis-hell); background: rgba(5, 8, 12, .55); }
.rudel-bearbeiten a[data-link] { cursor: alias; }
.rudel-bearbeiten a[data-link]:hover { outline: 2px dotted rgba(255, 211, 107, .85); outline-offset: 5px; }
.rudel-bearbeiten .a-geaendert, .rudel-bearbeiten [data-feld].a-geaendert { outline: 2px solid #ffd36b; }
.rudel-bearbeiten .a-fehler, .rudel-bearbeiten [data-feld].a-fehler { outline: 2px solid #ff5b4d; }
/* Kader und Termine sind in der Seite nur zu sehen; der Knopf führt in ihre Ansicht */
.a-sprung { display: block; margin: 0 0 .6rem; padding: .4rem .7rem; border: 1px solid rgba(158, 240, 236, .55); border-radius: 3px;
  background: rgba(5, 8, 12, .88); color: var(--tuerkis-hell, #9ef0ec); font: 700 .85rem/1 var(--klein, sans-serif); letter-spacing: .06em; cursor: pointer; }
.a-sprung:hover { border-color: #fff; color: #fff; }
.th-raster > .a-sprung, .timer-tafel > .a-sprung { grid-column: 1 / -1; justify-self: start; margin: .4rem; }