/* ============================================================
   Digitales Notenarchiv – Erscheinungsbild
   Farbwelt übernommen aus dem Design-System der Homepage
   (jakober-musi.at): Siegelrot, Messing, Trachtenblau, warmes
   Papier. Zum Anpassen nur die Werte in :root ändern.
   ============================================================ */

/* Schriften der Homepage (liegen in assets/fonts/ bei) */
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-normal-300-900-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-italic-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --primaer:        #ae0118;   /* Siegelrot der Jakober Musi */
  --primaer-dunkel: #7a0f14;   /* Bordeaux – dunkle Akzente */
  --primaer-hell:   #981a16;   /* Hover/gedrückt */
  --akzent:         #b0863c;   /* Messing (Instrumente) */
  --akzent-hell:    #efe2c8;
  --papier:         #f7f3ed;   /* warmes Papier wie die Homepage */
  --karte:          #ffffff;
  --tinte:          #1a1410;   /* warmes Fast-Schwarz */
  --tinte-leise:    #6b625a;
  --linie:          #ddd6cc;
  --ok:             #2e6b34;
  --ok-hell:        #e2efe3;
  --warn:           #8f6a2c;   /* dunkles Messing */
  --warn-hell:      #efe2c8;
  --fehler:         #981a16;
  --fehler-hell:    #f7dcdc;
  --info-hell:      #dde4ec;   /* Trachtenblau hell */
  --info:           #3a5168;   /* Trachtenblau */
  --radius:         10px;   /* Karten (radius-md der Homepage) */
  --radius-klein:   6px;    /* Knöpfe, Felder (radius-sm) */
  --schatten:       0 2px 8px rgba(26, 20, 16, .07);          /* shadow-sm */
  --schatten-gross: 0 8px 24px rgba(26, 20, 16, .10);         /* shadow-md */
  --balken:         6px;    /* Signatur-Balken der Homepage */
  --dauer:          140ms;
  --kurve:          cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Archivo', "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinte);
  background:
    radial-gradient(1200px 400px at 80% -100px, rgba(176, 134, 60, .10), transparent 60%),
    var(--papier);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Kopfleiste (Edel-Variante der Homepage: Papier + Blur,
   feine Linie, Rot nur als Akzent) ---------- */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 237, .92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--tinte);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  max-width: 1320px;   /* etwas breiter als der Inhalt, damit alles in eine Zeile passt */
  margin: 0 auto;
  padding: .55rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.marke {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--tinte);
  text-decoration: none;
}
.marke-logo { height: 46px; width: 46px; display: block; }
.marke-note {
  font-size: 1.9rem;
  line-height: 1;
  color: var(--primaer);
}
.marke-text { display: flex; flex-direction: column; line-height: 1.08; }
.marke-text strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tinte);
}
.marke-text small {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primaer);
  margin-top: 3px;
  max-width: 280px;       /* sehr lange Vereinsnamen umbrechen statt schieben */
  white-space: normal;
}

/* Eine Zeile wie der Homepage-Header: Marke links, Menü rechts.
   Auf mittleren Breiten rückt das Menü in eine eigene Zeile,
   unter 920px übernimmt das Burger-Menü. */
.hauptnav {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex-wrap: wrap;
  margin-left: auto;
}
@media (max-width: 1359px) and (min-width: 921px) {
  .hauptnav {
    order: 10;
    flex-basis: 100%;
    margin-left: 0;
    padding-top: .15rem;
  }
}
.hauptnav > a, .nav-mehr > summary {
  color: #3d352f;                 /* Tinte, wie die Homepage-Navigation */
  text-decoration: none;
  padding: .5rem .7rem;
  font-size: .94rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dauer) var(--kurve);
}
.hauptnav > a:hover, .nav-mehr > summary:hover { color: var(--tinte); }
.hauptnav > a.aktiv,
.nav-mehr > summary.aktiv {
  color: var(--primaer-hell);
  box-shadow: inset 0 -2px 0 var(--primaer);  /* rote Aktiv-Unterstreichung */
}
.nav-mehr { position: relative; }
.nav-mehr > summary { cursor: pointer; list-style: none; }
.nav-mehr > summary::-webkit-details-marker { display: none; }
.nav-mehr > summary::after { content: " ▾"; font-size: .8em; }
.nav-mehr-liste {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--primaer);       /* rote Oberkante wie die Homepage-Dropdowns */
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 20px 48px rgba(26, 20, 16, .14);
  display: flex;
  flex-direction: column;
  min-width: 185px;
  padding: .4rem;
  z-index: 50;
}
.nav-mehr-liste a {
  color: #3d352f;
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: var(--radius-klein);
  font-size: .9rem;
  font-weight: 600;
}
.nav-mehr-liste a:hover { background: #fbeeee; color: var(--primaer-hell); }
.nav-mehr-liste a.aktiv { background: #fbeeee; color: var(--primaer-hell); }
/* Das letzte Dropdown (Verwaltung) klappt rechtsbündig auf */
.hauptnav details.nav-mehr:last-of-type .nav-mehr-liste { left: auto; right: 0; }

.kopf-benutzer {
  display: flex;
  align-items: center;
  gap: .6rem;
}
@media (max-width: 1359px) {
  .kopf-benutzer { margin-left: auto; }
}
.benutzername {
  font-size: .9rem;
  opacity: .9;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inline-form { display: inline; }

/* Burger-Knopf – nur auf schmalen Bildschirmen sichtbar */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid #b8b0a6;
  border-radius: var(--radius-klein);
  color: #3d352f;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  padding: .35rem .6rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--primaer); color: var(--primaer); }

/* ---------- Inhalt ---------- */
.inhalt {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.4rem 1rem 3rem;
}

/* Überschriften wie die Homepage: Archivo versal, weit gesperrt,
   darunter die Messing-Haarlinie als Signatur */
h1 {
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: .2rem 0 1rem;
  color: var(--tinte);
}
h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--akzent);
  margin-top: .45rem;
}
h2 {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 1.4rem 0 .6rem;
  color: var(--tinte);
}
a { color: var(--primaer); transition: color var(--dauer) var(--kurve); }
a:hover { color: var(--primaer-hell); }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.1rem;
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .9rem;
  margin-bottom: 1.1rem;
}
.kachel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--tinte);
  display: block;
}
.kachel:hover { border-left-color: var(--primaer); }
.kachel .zahl { font-size: 1.7rem; font-weight: 700; color: var(--primaer); line-height: 1.1; }
.kachel .label { font-size: .88rem; color: var(--tinte-leise); }

/* ---------- Meldungen ---------- */
.meldung {
  padding: .7rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.meldung-ok     { background: var(--ok-hell);     color: var(--ok);     border-color: #c6dfc8; }
.meldung-fehler { background: var(--fehler-hell); color: var(--fehler); border-color: #e7c1c1; }
.meldung-info   { background: var(--info-hell);   color: var(--info);   border-color: #c4d4e2; }

/* ---------- Tabellen ---------- */
.tabellen-scroll { overflow-x: auto; }
table.liste {
  width: 100%;
  border-collapse: collapse;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  font-size: .95rem;
}
table.liste th, table.liste td {
  padding: .5rem .65rem;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
table.liste thead th {
  background: var(--akzent-hell);
  color: var(--primaer-dunkel);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.liste thead th a { color: inherit; text-decoration: none; }
table.liste thead th a:hover { text-decoration: underline; }
table.liste tbody tr:hover { background: #f4eee5; }
table.liste tbody tr:last-child td { border-bottom: none; }
td.rechts, th.rechts { text-align: right; }
td.schmal, th.schmal { white-space: nowrap; }

/* ---------- Badges / Chips ---------- */
.chip {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip-analog  { background: var(--info-hell); color: var(--info); }
.chip-digital { background: var(--ok-hell);   color: var(--ok); }
.chip-mappe   { background: var(--akzent-hell); color: #8f6a2c; }
.chip-leihe   { background: var(--warn-hell); color: var(--warn); }
.chip-frei    { background: #eee9e2; color: var(--tinte-leise); }
.chip-fehlt   { background: var(--fehler-hell); color: var(--fehler); }
.chip a { color: inherit; }

/* ---------- Formulare ---------- */
label { display: block; font-size: .88rem; color: var(--tinte-leise); margin-bottom: .15rem; }
input[type=text], input[type=search], input[type=password], input[type=date],
input[type=number], input[type=url], input[type=email], select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--tinte);
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(174, 1, 24, .35);
  outline-offset: 0;
  border-color: var(--primaer);
}
:focus-visible { outline: 3px solid rgba(174, 1, 24, .55); outline-offset: 2px; }
textarea { min-height: 5.5rem; resize: vertical; }

.formzeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-bottom: .8rem;
}
.formzeile-schmal { max-width: 640px; }
.feld { min-width: 0; }

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: end;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--schatten);
}
.filterleiste .feld { flex: 1 1 160px; }
.filterleiste .feld-schmal { flex: 0 1 130px; }
.filterleiste .knoepfe { display: flex; gap: .5rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--primaer);
  background: var(--primaer);
  color: #fff;
  font: inherit;
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}
.knopf:hover { background: var(--primaer-hell); color: #fff; }
.knopf-zweit {
  background: #fff;
  color: var(--primaer);
}
.knopf-zweit:hover { background: var(--akzent-hell); color: var(--primaer-dunkel); }
.knopf-gefahr {
  background: #fff;
  border-color: var(--fehler);
  color: var(--fehler);
}
.knopf-gefahr:hover { background: var(--fehler); color: #fff; }
.knopf-leise {
  background: transparent;
  border-color: #b8b0a6;
  color: #3d352f;
  padding: .3rem .7rem;
  font-size: .85rem;
  font-weight: 600;
}
.knopf-leise:hover { background: #fbeeee; border-color: var(--primaer); color: var(--primaer); }
.knopf-klein { padding: .25rem .6rem; font-size: .85rem; }

/* ---------- Blättern ---------- */
.blaettern {
  display: flex;
  gap: .35rem;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.blaettern a, .blaettern span {
  padding: .3rem .7rem;
  border-radius: 7px;
  border: 1px solid var(--linie);
  background: var(--karte);
  text-decoration: none;
  font-size: .9rem;
}
.blaettern .aktuell { background: var(--primaer); color: #fff; border-color: var(--primaer); }

/* ---------- Login ---------- */
.login-buehne {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.login-karte {
  width: 100%;
  max-width: 400px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: var(--balken) solid var(--primaer);  /* Signatur-Balken */
  border-radius: var(--radius);
  box-shadow: var(--schatten-gross);
  padding: 2rem 2.2rem;
  text-align: center;
}
.login-karte .marke-note { font-size: 3rem; color: var(--primaer); }
.login-karte .login-logo { height: 76px; width: 76px; margin: 0 auto .4rem; display: block; }
.login-karte h1 { margin: .4rem 0 .1rem; font-size: 1.25rem; }
.login-karte h1::after { margin-left: auto; margin-right: auto; }
.login-karte .verein {
  font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--primaer-hell);
  margin-bottom: 1.4rem;
}
.login-karte form { text-align: left; }
.login-karte .feld { margin-bottom: .9rem; }
.login-karte .knopf { width: 100%; margin-top: .4rem; }

/* ---------- Schrankplan ---------- */
.schrank-raster {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.schrank {
  background: var(--karte);
  border: 2px solid var(--primaer);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.schrank h3 {
  margin: 0;
  background: var(--primaer);
  color: #fff;
  padding: .45rem .8rem;
  font-size: 1rem;
}
.schrank .fach {
  border-top: 1px solid var(--linie);
  padding: .45rem .8rem;
  font-size: .88rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.schrank .fach a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.schrank .fach .beschr { color: var(--tinte-leise); text-align: right; }

/* ---------- Programm-Editor ---------- */
.programm-eintrag td { vertical-align: middle; }
.pos-knoepfe { display: flex; gap: .2rem; }
.pos-knoepfe button {
  border: 1px solid var(--linie);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  padding: .1rem .45rem;
}
.pos-knoepfe button:hover { background: var(--akzent-hell); }

/* ---------- Autocomplete ---------- */
.ac-huelle { position: relative; }
.ac-liste {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 0 0 8px 8px;
  box-shadow: var(--schatten);
  z-index: 60;
  max-height: 270px;
  overflow-y: auto;
}
.ac-liste div { padding: .45rem .7rem; cursor: pointer; font-size: .92rem; }
.ac-liste div:hover, .ac-liste div.markiert { background: var(--akzent-hell); }
.ac-liste small { color: var(--tinte-leise); }

/* ---------- Sonstiges ---------- */
.leer-hinweis {
  text-align: center;
  color: var(--tinte-leise);
  padding: 2.2rem 1rem;
}
.werkzeuge {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.werkzeuge .abstand { margin-left: auto; }
.hilfetext { color: var(--tinte-leise); font-size: .88rem; }
.trennlinie { border: 0; border-top: 1px solid var(--linie); margin: 1.2rem 0; }
dl.detail { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: 0; }
dl.detail dt { color: var(--tinte-leise); }
dl.detail dd { margin: 0; }

.fussleiste {
  text-align: center;
  color: var(--tinte-leise);
  font-size: .84rem;
  padding: 1rem;
  border-top: 1px solid var(--linie);
}

/* ---------- Mobil ---------- */

/* Navigation: unterhalb von 920px als aufklappbares Menü (Burger) */
@media (max-width: 920px) {
  .nav-toggle { display: inline-block; }
  .hauptnav {
    display: none;
    order: 10;            /* aufgeklappt: eigene Zeile in voller Breite */
    flex-basis: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .4rem 0 .6rem;
  }
  .hauptnav.offen { display: flex; }
  .hauptnav > a, .nav-mehr > summary { padding: .68rem .75rem; }  /* Touch-Ziele */
  .hauptnav > a.aktiv {
    background: #fbeeee;
    box-shadow: inset 3px 0 0 var(--primaer);
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  }
  .nav-mehr-liste {
    position: static;
    background: #fff;
    border: 1px solid var(--linie);
    border-top: 3px solid var(--primaer);
    box-shadow: none;
    border-radius: 0 0 var(--radius-klein) var(--radius-klein);
    min-width: 0;
  }
  .nav-mehr-liste a { padding: .62rem 1rem; }
}

@media (max-width: 760px) {
  .kopf-innen { gap: .5rem; }
  .kopf-benutzer .benutzername { display: none; }
  .inhalt { padding-top: 1rem; }
  h1 { font-size: 1.18rem; }
  .karte { padding: .9rem 1rem; }
  table.liste { font-size: .88rem; }
  table.liste th, table.liste td { padding: .5rem .5rem; }
  dl.detail { grid-template-columns: 1fr; }
  dl.detail dt { margin-top: .4rem; }
  .kacheln { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .kachel .zahl { font-size: 1.4rem; }
  .filterleiste { padding: .7rem .8rem; }
  .filterleiste .feld, .filterleiste .feld-schmal { flex: 1 1 100%; }
  .filterleiste .knoepfe { width: 100%; }
  .filterleiste .knoepfe .knopf { flex: 1; text-align: center; }
  .formzeile { grid-template-columns: 1fr; }
  .knopf { padding: .65rem 1.2rem; }         /* größere Touch-Ziele */
  .knopf-klein { padding: .45rem .8rem; }
  .knopf-leise { padding: .4rem .8rem; }
  .pos-knoepfe button { padding: .35rem .7rem; }
  .login-karte { padding: 1.5rem 1.3rem; }
}

/* ---------- Druck ---------- */
@media print {
  .kopfleiste, .fussleiste, .filterleiste, .werkzeuge, .blaettern,
  .knopf, .pos-knoepfe, form.inline-form { display: none !important; }
  body { background: #fff; }
  .karte, table.liste { box-shadow: none; border-color: #999; }
  .inhalt { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}