/* ==================================================================
   Sofraya — gemeinsamer Stil der Personalseiten
   ------------------------------------------------------------------
   Warum eine eigene Datei in einem Projekt, das sonst jede Seite für
   sich hält: Farben, Schrift und die Grundbausteine (Kopf, Karte,
   Knopf, Feld, Dialog, Meldung) standen vorher in zehn Kopien — und
   jede war ein bisschen anders. Hier stehen sie einmal. Was nur eine
   Seite braucht, bleibt in ihrer Datei.

   Dieselbe Sprache wie Start- und Gastseite: Papier, Kupfer, Vollkorn.
   Die alten Namen (--ink, --bg, --card, --akzent …) zeigen auf die
   neuen Töne. So bekommt jede Seite Papier, Kupfer und den
   Dunkelmodus, ohne dass jede ihrer Regeln umgeschrieben werden muss.

   Fehlt die Datei, bleibt jede Seite bedienbar — nur eben ungestaltet.
   ================================================================== */

/* Die Schrift liegt im Haus (SIL OFL 1.1, schriften/OFL.txt). Ziffern in
   Vollkorn nur mit lining-nums: Die Schrift setzt sonst Mediävalziffern,
   und „Tisch 12" liest sich wie „Tisch ı2". */
@font-face{
  font-family:'Vollkorn';
  src:url('/schriften/vollkorn.woff2?v=1') format('woff2');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0100-024F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --papier:#FBF6EE; --papier-2:#FFFFFF; --papier-3:#F4ECE1;
  --linie:#E8DECF; --linie-2:#D6C9B7;
  --tinte:#1C1917; --tinte-2:#57534E; --tinte-3:#736B66;
  --kupfer:#C4703A; --kupfer-tief:#9C5226; --kupfer-soft:#F6E4D3;

  /* Zustände: -soft für Flächen, -voll für laute Flächen, -auf für die
     Schrift darauf. Im Dunkeln kippt -auf auf dunkle Schrift, weil Weiß
     auf hellem Amber nicht mehr lesbar wäre. */
  --amber:#B45309; --amber-soft:#FEF3C7; --amber-linie:#FCD34D; --amber-hauch:#FFFBF0;
  --amber-voll:#B45309; --amber-auf:#FFFFFF;
  --gruen:#15803D; --gruen-soft:#DCFCE7; --gruen-linie:#A7E5BE; --gruen-voll:#15803D; --gruen-auf:#FFFFFF;
  --rot:#B91C1C; --rot-soft:#FEE2E2; --rot-linie:#FCA5A5; --rot-hauch:#FFF7F6;
  --rot-voll:#B91C1C; --rot-auf:#FFFFFF;
  --blau:#1D4ED8; --blau-soft:#DBEAFE;
  --haupt:#1C1917; --haupt-auf:#FFFFFF;

  --schatten:0 1px 2px rgba(60,38,20,.05), 0 10px 28px -22px rgba(60,38,20,.45);
  --schatten-hoch:0 2px 6px rgba(60,38,20,.07), 0 18px 36px -22px rgba(60,38,20,.5);
  --schleier:rgba(28,22,17,.42);

  --serif:'Vollkorn',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --weich:cubic-bezier(.22,.8,.3,1);
  --r:20px; --r-innen:14px;
  --kopf:64px;
  --rand:clamp(12px,2.4vw,28px);
  --breit:1560px;

  /* Alte Namen der Seiten, jetzt nur noch Verweise */
  --akzent:var(--kupfer-tief); --akzent-soft:var(--kupfer-soft);
  --ink:var(--tinte); --ink-2:var(--tinte-2); --ink-3:var(--tinte-3);
  --bg:var(--papier); --card:var(--papier-2); --line:var(--linie); --slate:var(--papier-3);
  --green:var(--gruen); --green-soft:var(--gruen-soft);
  --red:var(--rot); --red-soft:var(--rot-soft);
  --orange:var(--amber); --orange-soft:var(--amber-soft);
  --blue:var(--blau); --blue-soft:var(--blau-soft);

  color-scheme:light;
}
html[data-theme="dark"]{
  --papier:#14100D; --papier-2:#1C1713; --papier-3:#28211B;
  --linie:rgba(255,232,208,.11); --linie-2:rgba(255,232,208,.2);
  --tinte:#F7EFE4; --tinte-2:#CFC2B2; --tinte-3:#A39584;
  --kupfer:#E39A62; --kupfer-tief:#E8A676; --kupfer-soft:#3A2618;
  --amber:#F2B25C; --amber-soft:#382810; --amber-linie:#6E4D17; --amber-hauch:#211910;
  --amber-voll:#E9A23B; --amber-auf:#1A1206;
  --gruen:#5ED68A; --gruen-soft:#12301D; --gruen-linie:#23573A; --gruen-voll:#3FB871; --gruen-auf:#07170E;
  --rot:#F58B8B; --rot-soft:#3A1616; --rot-linie:#6E2626; --rot-hauch:#221211;
  --rot-voll:#E25555; --rot-auf:#1C0808;
  --blau:#93B4F8; --blau-soft:#172A4D;
  --haupt:#F7EFE4; --haupt-auf:#14100D;
  --schatten:0 1px 0 rgba(255,232,208,.03);
  --schatten-hoch:0 14px 30px -18px rgba(0,0,0,.75);
  --schleier:rgba(0,0,0,.58);
  color-scheme:dark;
}

/* ---------------- Grund ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papier); color:var(--tinte); font-family:var(--sans); font-size:15px;
     line-height:1.5; -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
button:disabled{opacity:.55; cursor:default}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--kupfer); outline-offset:2px}
.ic{width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round}

/* ---------------- Kopf der Personalseiten ---------------- */
.top{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
     flex-wrap:wrap; gap:10px 14px; min-height:var(--kopf); padding:10px var(--rand);
     border-bottom:1px solid var(--linie);
     background:var(--papier); background:color-mix(in srgb, var(--papier) 86%, transparent);
     -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px)}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.mark{display:block; flex-shrink:0; width:36px; height:36px; border-radius:50%; text-decoration:none}
.mark svg{display:block; width:100%; height:100%}
.t1{font-family:var(--serif); font-weight:600; font-size:19px; line-height:1.15; letter-spacing:-.005em;
    font-variant-numeric:lining-nums}
.t2{font-size:12px; color:var(--tinte-3)}
.nav{display:flex; align-items:center; flex-wrap:wrap; gap:8px}

/* ---------------- Knöpfe ---------------- */
.b, .lnk, .b-line, .b-dark, .b-rot{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 14px;
  border-radius:12px; border:1px solid var(--linie); background:var(--papier-2); color:var(--tinte);
  font-size:13px; font-weight:650; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:border-color .15s, background-color .15s, opacity .15s}
.b:hover, .lnk:hover, .b-line:hover{border-color:var(--linie-2); background:var(--papier-3)}
.b-dark{background:var(--haupt); border-color:var(--haupt); color:var(--haupt-auf)}
.b-dark:hover{opacity:.88}
.b-rot{color:var(--rot); border-color:var(--rot-linie)}
.b-rot:hover{background:var(--rot-soft)}
.b .ic, .lnk .ic{width:16px; height:16px}

/* ---------------- Seite und Karten ---------------- */
.wrap{max-width:1180px; margin:0 auto; padding:22px var(--rand) 60px}
.card{margin-bottom:18px; overflow:hidden; background:var(--papier-2); border:1px solid var(--linie);
      border-radius:var(--r); box-shadow:var(--schatten)}
.card-h{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 12px;
        padding:16px 20px 14px; border-bottom:1px solid var(--linie)}
.card-t{font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.2; letter-spacing:-.005em;
        font-variant-numeric:lining-nums}
/* Der Untertitel steht unter dem Titel, auch wenn der Kopf sonst eine Zeile ist. */
.card-s{flex-basis:100%; font-size:13px; color:var(--tinte-3)}
.card-h > div > .card-s{margin-top:2px}
.card-b{padding:16px 20px 20px}

/* ---------------- Felder ----------------
   Ohne Gewicht (:where), damit jede Seite ihre Felder weiter selbst
   formen kann. */
label{display:block; margin:0 0 6px; font-size:12.5px; font-weight:700; color:var(--tinte-2)}
:where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea){
  width:100%; min-height:44px; padding:10px 13px; border:1px solid var(--linie-2); border-radius:12px;
  background:var(--papier); color:var(--tinte); font:inherit; font-size:15px; outline:none;
  transition:border-color .15s, box-shadow .15s}
:where(input, select, textarea):focus{border-color:var(--kupfer);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--kupfer) 20%, transparent)}
:where(textarea){min-height:88px; line-height:1.5}
::placeholder{color:var(--tinte-3); opacity:.85}
input[type=checkbox], input[type=radio]{accent-color:var(--kupfer)}

/* ---------------- Hinweise, Leeres, Meldungen ---------------- */
.hint, .hinw{font-size:12.5px; line-height:1.55; color:var(--tinte-3)}
.leer{padding:40px 16px; text-align:center; color:var(--tinte-3)}
.leer-i{font-size:30px; opacity:.45}
.leer-t{margin-top:10px; font-size:14.5px; font-weight:650; color:var(--tinte-2)}
.leer-s{margin-top:3px; font-size:13px}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:200;
       max-width:min(440px, calc(100vw - 32px)); padding:12px 18px; border-radius:14px;
       background:var(--haupt); color:var(--haupt-auf); font-size:14px; font-weight:600;
       box-shadow:0 14px 34px -14px rgba(0,0,0,.45);
       opacity:0; transform:translate(-50%,16px); pointer-events:none; transition:opacity .25s, transform .3s var(--weich)}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.warn{background:var(--rot-voll); color:var(--rot-auf)}

/* ---------------- Dialoge der Unterseiten (.modal) ---------------- */
.modal{position:fixed; inset:0; z-index:110; display:none; place-items:center; padding:20px; background:var(--schleier)}
.modal.on{display:grid}
.modal-c{width:100%; max-width:520px; max-height:88vh; overflow:auto; padding:22px; border-radius:18px;
         border:1px solid var(--linie); background:var(--papier-2); color:var(--tinte); box-shadow:var(--schatten-hoch)}
.modal.on .modal-c{animation:aufklappen .2s var(--weich)}
.modal-t{margin:0 0 6px; font-family:var(--serif); font-weight:600; font-size:22px; line-height:1.2;
         font-variant-numeric:lining-nums}
.modal-s{margin:0 0 14px; font-size:13.5px; color:var(--tinte-2)}
.modal-f{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:16px}
@keyframes aufklappen{from{transform:translateY(-8px) scale(.98); opacity:0}}

@media (max-width:640px){
  .t1{font-size:17px}
  .card-h{padding:14px 16px 12px}
  .card-b{padding:14px 16px 16px}
  .modal{padding:0; place-items:end stretch}
  .modal-c{max-width:none; max-height:92dvh; border-radius:22px 22px 0 0; border-width:1px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none!important; transition:none!important}
}