/* Ergänzungen zu Pico CSS (klassenlos). Klassen: karte, knopfleiste, zweitrangig, feldtabelle, liste, reiter (siehe CLAUDE.md) */

/* Farben, Abstände, Schriften */
:root {
  --pico-font-size: 87.5%;
  --pico-line-height: 1.35;
  --pico-spacing: .5rem;
  --pico-typography-spacing-vertical: .5rem;
  --pico-typography-spacing-top: 1rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-form-element-spacing-vertical: .4rem;
  --pico-form-element-spacing-horizontal: .6rem;
  --schrift-h1: 1.4rem;
  --schrift-h2: 1.15rem;
  --schrift-h3: 1rem;
  --schrift-druck: 10pt;
  --farbe-linie: var(--pico-muted-border-color);
  --farbe-meldung: var(--pico-mark-background-color);
  --breite-seite: 70rem;
  --breite-navigation: 13em;
  --breite-formular: 24rem;
  --breite-beschriftung: 16em;
  --abstand-inhalt: 1.5em;
  --abstand-navigation: 1em;
  --abstand-anmelden-oben: 4rem;
  --abstand-zelle: .15rem .4rem;
  --hoehe-logo: 40px;
  --schrift-kalender: .85em;
  --breite-jahr: 6em;
  --hoehe-kalenderknopf: 2.25em;
}

h1 { --pico-font-size: var(--schrift-h1); }
h2 { --pico-font-size: var(--schrift-h2); }
h3 { --pico-font-size: var(--schrift-h3); --pico-typography-spacing-top: 0; }
th, td { padding: var(--abstand-zelle); }

/* Rahmen: Kopf über allem, Navigation links, Inhalt rechts */
body:has(> nav) { display: grid; grid-template-columns: var(--breite-navigation) 1fr; max-width: var(--breite-seite); margin-inline: auto; }
body:has(> nav) > header { grid-column: 1 / -1; }
body > header { padding: var(--abstand-navigation) var(--abstand-navigation) 0; max-width: var(--breite-seite); margin-inline: auto; }
body > header img { height: var(--hoehe-logo); vertical-align: middle; margin-right: var(--abstand-navigation); }
body:has(> nav) > main { padding-inline: var(--abstand-inhalt); max-width: none; }
nav { flex-direction: column; justify-content: flex-start; padding: var(--abstand-navigation);
      border-right: 1px solid var(--farbe-linie); }
nav p { font-weight: bold; margin-bottom: .5em; }
nav ul:only-of-type { flex-direction: column; align-items: flex-start; margin: 0; }
nav li { padding: .25em 0; }
nav li a:not(:hover) { text-decoration: underline; }

/* Anmelden, Passwort ändern: Überschrift und Formular als ein Block; Anmelden (ohne Navigation) mit Abstand oben */
main:has(> form input[type=password]) > :is(h1, form) { max-width: var(--breite-formular); margin-inline: auto; }
body:not(:has(> nav)) > main { padding-top: var(--abstand-anmelden-oben); }

.meldung { background: var(--farbe-meldung); padding: .5em; }
.knopfleiste { margin-bottom: var(--pico-spacing); }
table.feldtabelle th { width: var(--breite-beschriftung); vertical-align: top; }
table.feldtabelle td { white-space: pre-wrap; vertical-align: top; }

/* Suchformular: Radio-Buttons als kompakte Liste, Ja/Nein in einer Zeile, Häkchen direkt neben der Beschriftung */
table.feldtabelle td:has([type=radio], [type=checkbox]) { white-space: normal; }
table.feldtabelle label:has([type=radio]) { margin: 0; }
table.feldtabelle label:has([name=archiviert]) { display: inline-block; margin-inline-end: 1em; }
table.feldtabelle tr:has(> td > [type=checkbox]) { display: flex; }
table.feldtabelle tr:has(> td > [type=checkbox]) th { width: auto; }

/* Kalender (FullCalendar): KW, Jahr, „aktualisieren“ untereinander und schmal; Termin in drei Zeilen */
form:has([name=kw]) select { width: auto; display: block; }
form:has([name=kw]) input[name=jahr] { width: var(--breite-jahr); }
#kalender { font-size: var(--schrift-kalender); }
#kalender .fc-event-title { white-space: pre-line; }
/* Knöpfe ‹ › und „Heute“ gleich hoch, Inhalt mittig (statt Pico-Innenabstand) */
#kalender .fc-button { display: inline-flex; align-items: center; justify-content: center;
                       height: var(--hoehe-kalenderknopf); padding-block: 0; line-height: 1; }
/* Pfeile mittig: Pico vererbt vertical-align an ::before, FullCalendar setzt am Icon middle */
#kalender .fc-button :is(.fc-icon, .fc-icon::before) { line-height: 1; vertical-align: baseline; }

/* Bearbeiten: vier Reiter auf einer Seite, umgeschaltet über die Adresse (#allgemein …); ohne Angabe allgemeine Daten */
section.reiter:not(:target) { display: none; }
body:not(:has(section.reiter:target)) #allgemein { display: block; }
p.reiter a { margin-inline-end: var(--abstand-navigation); }
body:not(:has(section.reiter:target)) a[href="#allgemein"], body:has(#allgemein:target) a[href="#allgemein"],
body:has(#redaktionell:target) a[href="#redaktionell"], body:has(#format:target) a[href="#format"],
body:has(#dateien:target) a[href="#dateien"] { font-weight: bold; text-decoration: none; }
/* Kategorien-Popup: Häkchen untereinander, nur so breit wie der Inhalt */
dialog label { display: block; }
dialog > article { width: auto; }

/* Druckvorlage: wie die Detailansicht, ohne Navigation und Knöpfe */
@media print {
  nav, .knopfleiste { display: none; }
  body:has(> nav) { display: block; }
  body { font-size: var(--schrift-druck); }
  body > main { padding: 0; max-width: none; }
}