/* ---------------------------------------------------------------------------
   James — gemeinsame Grundlage für Website, Login, Konto und Betreiber-Konsole.
   Palette 2b "Honig & Himmelblau", helle Variante.

   Hier stehen NUR Tokens, Reset und Bausteine, die auf mehreren Seiten
   vorkommen. Alles Seitenspezifische gehört in home.css / login.css /
   admin.css. Grund: Die Bildmarke war einmal falsch und musste sonst an
   vier Stellen korrigiert werden.
   --------------------------------------------------------------------------- */

:root {
  /* Farben als Rollen. #2E3138 ist ausschliesslich Text- und Markenfarbe -
     niemals Flaeche. Es gibt keine dunklen Sektionen und keine Verlaeufe. */
  --tinte:        #2E3138;
  --text-2:       #565B63;
  --text-3:       #6E747C;
  --text-4:       #7C8189;
  --text-5:       #9AA0A8;
  --text-bubble:  #3F454D;

  --honig:        #E0A33E;
  --honig-dunkel: #D6982F;
  --honig-text:   #B07D25;
  --blau:         #5B8DB8;
  --blau-dunkel:  #4E7CA6;

  --papier:       #FAF8F3;
  --karte:        #FFFFFF;
  --kuehl:        #EDEFF2;
  --warm:         #F5F4F0;
  --warm-hell:    #FCFBF7;
  --cta:          #E9EFF5;

  --rahmen:         #E2E0DA;
  --rahmen-leise:   #EBE9E3;
  --rahmen-kuehl:   #D6DAE0;
  --rahmen-kuehl-2: #C9CFD6;

  --erfolg:          #3F7F6B;
  --warnung:         #C4643F;
  --warnung-flaeche: #FDF6EC;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rand: 64px;                     /* Seitenrand Desktop */
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden muss immer gewinnen. Ohne diese Zeile ueberstimmt jede eigene
   display-Regel das Attribut (gleiche Spezifitaet, spaeter notiert) und
   vermeintlich versteckte Bereiche stehen sichtbar da. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: Archivo, system-ui, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--blau-dunkel); text-decoration: none; transition: color 140ms ease-out; }
a:hover { color: var(--tinte); }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--blau-dunkel); outline-offset: 2px; }

/* --- Typografie ------------------------------------------------------------ */

.kicker {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.kicker.blau  { color: var(--blau-dunkel); }
.kicker.honig { color: var(--honig-text); }
.kicker.tarif { letter-spacing: .14em; }

.mono {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.mono.blau { color: var(--blau-dunkel); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: 42px; }
h2 { font-size: 38px; line-height: 1.12; }
h3 { font-size: 23px; letter-spacing: -.02em; }
p  { margin: 0; }

.lead   { font-size: 19px; line-height: 1.6; color: var(--text-4); max-width: 52ch; text-wrap: pretty; }
.text   { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.text-s { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.text-s.leise { color: var(--text-4); }
.meta   { font-size: 13px; color: var(--text-2); }

/* --- Knoepfe ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 1px solid transparent; border-radius: 2px;
  padding: 15px 26px;
  font-size: 15px; font-weight: 600; text-align: center;
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.btn.honig       { background: var(--honig); color: var(--tinte); }
.btn.honig:hover { background: var(--honig-dunkel); color: var(--tinte); }
.btn.linie       { border-color: var(--rahmen-kuehl-2); color: var(--tinte); font-weight: 500; }
.btn.linie:hover { border-color: var(--tinte); color: var(--tinte); }
.btn.tinte       { border-color: var(--tinte); color: var(--tinte); }
.btn.tinte:hover { background: var(--tinte); color: var(--papier); }
.btn.sm          { padding: 10px 18px; font-size: 14px; }
.btn.block       { display: block; width: 100%; }
.btn[disabled]   { opacity: .55; cursor: default; }

/* --- Formularbausteine ------------------------------------------------------ */

.feld { display: flex; flex-direction: column; gap: 7px; }
.feld > span, .feld > label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.eingabe {
  width: 100%; min-width: 0;
  background: var(--karte); border: 1px solid var(--rahmen); border-radius: 0;
  padding: 13px 14px;
  font-family: inherit; font-size: 14px; color: var(--tinte);
  transition: border-color 140ms ease-out;
}
.eingabe::placeholder { color: var(--text-4); }
.eingabe:hover { border-color: var(--rahmen-kuehl); }
.eingabe.fehler { border-color: var(--warnung); }

.wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.wahl button {
  background: none; border: 1px solid var(--rahmen); border-radius: 0;
  padding: 8px 13px; font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
.wahl button:hover { border-color: var(--rahmen-kuehl-2); color: var(--tinte); }
.wahl button.aktiv { background: var(--honig); border-color: var(--honig); color: var(--tinte); font-weight: 600; }

/* Platz erst reservieren, wenn wirklich eine Meldung dasteht */
.msg { font-size: 13px; min-height: 18px; }
.msg:empty { min-height: 0; }
.msg.err { color: var(--warnung); }
.msg.ok  { color: var(--erfolg); }

/* --- Bildmarke: eine Komponente, eine Datei ----------------------------------
   Form und Farben stecken in logo-mark.svg bzw. logo-mark-mono.svg.
   Hier steht nur noch die Groesse. Markup ueberall: <span class="marke"></span>
   ---------------------------------------------------------------------------- */

.marke {
  --w: 37px;
  width: var(--w);
  aspect-ratio: 1;
  flex: none;
  background: url("/logo-mark.svg") center / contain no-repeat;
}
.marke.mono { background-image: url("/logo-mark-mono.svg"); }
.marke.klein { --w: 27px; }
.marke.mini  { --w: 22px; }

.brand { display: flex; align-items: center; gap: 13px; color: var(--tinte); }
.brand:hover { color: var(--tinte); }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

/* Icon-Squircle: Kachel mit der Marke darin.
   Radius 23.4 % der Kante, Blasenbreite 46 % der Kante, mittig. */
.icon {
  width: 40px; aspect-ratio: 1; border-radius: 23.4%; flex: none;
  display: grid; place-items: center;
}
.icon .marke { --w: 60%; }
.icon.blau  { background: var(--blau); }
.icon.kuehl { background: var(--kuehl); }
.icon.linie { border: 1px solid var(--rahmen); }

/* --- Seitenrand -------------------------------------------------------------- */

.wrap { padding-left: var(--rand); padding-right: var(--rand); }

@media (max-width: 1023px) {
  :root { --rand: 24px; }
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .lead { font-size: 17px; }
}