/* Gastkontor -- Grundstile und Grundbausteine (Entwurf O1, 5.4, 5.5, 6.2).
   Voraussetzung: tokens.css ist VORHER eingebunden. Diese Datei benutzt nur
   Zwecktokens (--gk-grund, --gk-text, ...) und Masstokens, nie einen Hexwert. */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url("schrift/inter-latin-wght-normal.woff2") format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--gk-grund);
  color:var(--gk-text);
  font-family:var(--gk-schrift);
  font-size:var(--gk-groesse-text);
  line-height:var(--gk-zeile-text);
}

/* Schrift */
.gk-lesetext{font-size:var(--gk-groesse-lesetext)}
h1,h2,h3{font-weight:600;line-height:var(--gk-zeile-titel);text-wrap:balance;margin:0 0 var(--gk-a3)}
h1{font-size:var(--gk-groesse-h1);letter-spacing:-0.01em}
h2{font-size:var(--gk-groesse-h2);letter-spacing:-0.005em}
h3{font-size:var(--gk-groesse-h3)}
.gk-schau{font-size:var(--gk-groesse-schau);font-weight:600;line-height:var(--gk-zeile-titel);letter-spacing:-0.015em;margin:0 0 var(--gk-a4)}
p{margin:0 0 var(--gk-a4)}
a{color:var(--gk-akzent);text-underline-offset:0.15em}
a:hover{text-decoration-thickness:2px}
.gk-still{color:var(--gk-text-still)}
.gk-klein{font-size:var(--gk-groesse-klein)}
.gk-zahl{font-variant-numeric:tabular-nums}
.gk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gk-fokus);outline-offset:2px}

/* Signet inline (36 px und groesser; bis 32 px die Kleinfassung) */
.gk-signet{display:block;flex:none}
.gk-signet__gitter{fill:none;stroke:var(--gk-signet-gitter);stroke-width:11}
.gk-signet__feld{fill:var(--gk-signet-feld)}

/* Kopfzeile (Homepage) */
.gk-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gk-a4);padding:var(--gk-a3) var(--gk-a4);background:var(--gk-kopf);color:var(--gk-text);border-bottom:1px solid var(--gk-rand)}
.gk-kopf__marke{display:flex;align-items:center;gap:var(--gk-a3);color:inherit;text-decoration:none;font-size:var(--gk-groesse-h3);font-weight:600;letter-spacing:-0.01em}
.gk-kopf__nav{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gk-a4)}
.gk-kopf__nav a:not(.gk-knopf){color:var(--gk-text-still);text-decoration:none}
.gk-kopf__nav a:not(.gk-knopf):hover{color:var(--gk-text)}

/* Seitenleiste (Mandantenbereich) */
.gk-leiste{display:flex;flex-direction:column;gap:var(--gk-a1);padding:var(--gk-a4);background:var(--gk-flaeche);border-right:1px solid var(--gk-rand)}
.gk-leiste__marke{display:flex;align-items:center;gap:var(--gk-a2);font-size:var(--gk-groesse-h3);font-weight:600;margin:0 0 var(--gk-a4)}
.gk-leiste__punkt{display:flex;align-items:center;gap:var(--gk-a2);min-height:var(--gk-hoehe-bedien);padding:0 var(--gk-a3);border-radius:var(--gk-radius-mittel);color:var(--gk-text);text-decoration:none}
.gk-leiste__punkt:hover{background:var(--gk-neutral-grund)}
.gk-leiste__punkt[aria-current="page"]{background:var(--gk-neutral-grund);font-weight:600;box-shadow:inset 3px 0 0 var(--gk-akzent)}

/* Knoepfe */
.gk-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--gk-a2);min-height:var(--gk-hoehe-bedien);padding:0 var(--gk-a5);border:1px solid transparent;border-radius:var(--gk-radius-mittel);font:inherit;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color var(--gk-dauer),border-color var(--gk-dauer),color var(--gk-dauer)}
.gk-knopf--haupt{background:var(--gk-knopf);color:var(--gk-knopf-text)}
.gk-knopf--haupt:hover{background:var(--gk-knopf-schwebe)}
.gk-knopf--zweit{background:var(--gk-flaeche);color:var(--gk-text);border-color:var(--gk-rand-feld)}
.gk-knopf--zweit:hover{border-color:var(--gk-text)}
.gk-knopf--leise{background:transparent;color:var(--gk-akzent);padding:0 var(--gk-a3)}
.gk-knopf--leise:hover{text-decoration:underline}
.gk-knopf--gefahr{background:var(--gk-gefahr);color:var(--gk-gefahr-text)}
.gk-knopf[aria-busy="true"]{cursor:progress}
.gk-knopf[aria-busy="true"]::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gk-drehen 800ms linear infinite}
@keyframes gk-drehen{to{transform:rotate(360deg)}}

/* Formular */
.gk-feld{display:grid;gap:var(--gk-a1);margin:0 0 var(--gk-a4)}
.gk-feld__beschriftung{font-weight:500}
.gk-feld__hilfe{font-size:var(--gk-groesse-klein);color:var(--gk-text-still)}
.gk-feld__fehler{font-size:var(--gk-groesse-klein);color:var(--gk-fehler);font-weight:500}
.gk-eingabe{width:100%;min-height:var(--gk-hoehe-bedien);padding:0 var(--gk-a3);border:1px solid var(--gk-rand-feld);border-radius:var(--gk-radius-mittel);background:var(--gk-flaeche);color:var(--gk-text);font:inherit}
textarea.gk-eingabe{padding:var(--gk-a2) var(--gk-a3);min-height:110px;resize:vertical}
.gk-eingabe::placeholder{color:var(--gk-text-still)}
.gk-eingabe[aria-invalid="true"]{border-color:var(--gk-fehler);box-shadow:inset 0 0 0 1px var(--gk-fehler)}
.gk-ankreuz{display:flex;align-items:center;gap:var(--gk-a2);min-height:var(--gk-hoehe-bedien)}
.gk-ankreuz input{width:20px;height:20px;margin:0;accent-color:var(--gk-knopf)}

/* Karte, Hinweisband, Statusmarke */
.gk-karte{background:var(--gk-flaeche);border:1px solid var(--gk-rand);border-radius:var(--gk-radius-gross);padding:var(--gk-a5)}
.gk-hinweis{display:grid;gap:var(--gk-a1);padding:var(--gk-a3) var(--gk-a4);border:1px solid;border-radius:var(--gk-radius-mittel);color:var(--gk-text);margin:0 0 var(--gk-a3)}
.gk-hinweis strong{font-weight:600}
.gk-hinweis--info{background:var(--gk-neutral-grund);border-color:var(--gk-neutral)}
.gk-hinweis--erfolg{background:var(--gk-erfolg-grund);border-color:var(--gk-erfolg)}
.gk-hinweis--achtung{background:var(--gk-offen-grund);border-color:var(--gk-offen)}
.gk-hinweis--fehler{background:var(--gk-fehler-grund);border-color:var(--gk-fehler)}
.gk-marke{display:inline-flex;align-items:center;gap:var(--gk-a1);padding:2px var(--gk-a2);border-radius:var(--gk-radius-klein);font-size:var(--gk-groesse-klein);font-weight:500;line-height:1.5}
.gk-marke--erfolg{background:var(--gk-erfolg-grund);color:var(--gk-erfolg)}
.gk-marke--offen{background:var(--gk-offen-grund);color:var(--gk-offen)}
.gk-marke--fehler{background:var(--gk-fehler-grund);color:var(--gk-fehler)}
.gk-marke--neutral{background:var(--gk-neutral-grund);color:var(--gk-neutral)}

/* Tabelle */
.gk-tabelle-rahmen{overflow-x:auto}
.gk-tabelle{width:100%;border-collapse:collapse}
.gk-tabelle th{text-align:left;font-size:var(--gk-groesse-klein);font-weight:500;color:var(--gk-text-still);padding:var(--gk-a2) var(--gk-a3);border-bottom:1px solid var(--gk-rand-feld)}
.gk-tabelle td{padding:var(--gk-a3);border-bottom:1px solid var(--gk-rand)}
.gk-tabelle th,.gk-tabelle td{white-space:nowrap}
.gk-rechts,.gk-tabelle th.gk-rechts{text-align:right}

/* Belegungszelle und Kalender: voll = belegt, Schraffur unten rechts = angefragt,
   leer mit Rand = frei. Die Form traegt den Zustand zusaetzlich zur Farbe. */
.gk-kalender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gk-a1);max-width:360px}
.gk-kalender__tag{font-size:var(--gk-groesse-klein);color:var(--gk-text-still);text-align:center}
.gk-zelle{position:relative;min-height:var(--gk-hoehe-bedien);padding:3px 5px;border:1px solid var(--gk-zelle-rand);border-radius:var(--gk-radius-klein);background:var(--gk-flaeche);color:var(--gk-text);font-size:var(--gk-groesse-klein);font-variant-numeric:tabular-nums}
.gk-zelle--frei{background:var(--gk-flaeche)}
.gk-zelle--belegt{background:var(--gk-zelle-belegt);border-color:var(--gk-zelle-belegt);color:var(--gk-zelle-belegt-text)}
.gk-zelle--angefragt{background-color:var(--gk-offen-grund);border-color:var(--gk-zelle-angefragt);color:var(--gk-offen);background-image:repeating-linear-gradient(135deg,var(--gk-zelle-angefragt) 0 2px,transparent 2px 6px);background-size:50% 50%;background-position:right bottom;background-repeat:no-repeat}
.gk-zelle--leer{border-color:transparent;background:transparent}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}