/* Farben und Schriften aus der Unternehmenspräsentation „Die Parkerei GmbH 2026 & More“:
   Smaragdgrün als Signalfarbe, sehr dunkles Tannengrün als Fläche, Pink als sparsamer Akzent,
   Überschriften in Impact. Keine externen Schriften (nichts wird von Dritten geladen). */
:root {
  --smaragd: #00bf6f;          /* Flächen und Akzente */
  --smaragd-text: #00854c;     /* Text auf Weiß (Kontrast 4,7:1) */
  --smaragd-gross: #00a05b;    /* nur für große Überschriften auf Weiß (3,4:1) */
  --tanne: #0f2727;            /* dunkle Flächen */
  --tanne-2: #173636;          /* Karten auf dunklem Grund, leicht heller */
  --pink: #ff0086;
  --pink-hell: #ffe6f3;
  --pink-dunkel: #a1004f;
  --amber: #f5b700;
  --seite: #f4f8f6;
  --karte: #ffffff;
  --rand: #cfdcd8;
  --text: #0f2727;
  --leise: #4d6360;
  --auf-dunkel: #c4d6d2;
  --schrift: "Source Sans Pro", "Source Sans 3", Calibri, Carlito, system-ui, sans-serif;
  --schrift-gross: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
body { font-family: var(--schrift); font-size: 16px; line-height: 1.45; margin: 0; color: var(--text); background: var(--seite); }
body.dunkel { background: radial-gradient(120% 90% at 85% 0%, #14403a 0%, var(--tanne) 55%); min-height: 100vh; }

a { color: var(--smaragd-text); }
a:hover { color: var(--pink-dunkel); }

/* Kopfzeile */
header { background: var(--tanne); color: #fff; display: flex; align-items: center; gap: 2rem; padding: .5rem 1.5rem .5rem .8rem; min-height: 4.5rem; flex-wrap: wrap; border-bottom: 4px solid var(--smaragd); }
header .logo { display: block; line-height: 0; }
header .logo img { height: 54px; width: auto; }
header a { color: #fff; text-decoration: none; }
header nav { display: flex; gap: 1.4rem; flex: 1; }
header nav a { padding: .35rem 0; border-bottom: 3px solid transparent; font-weight: 600; }
header nav a:hover { border-bottom-color: var(--pink); color: #fff; }
header nav a[aria-current="page"] { border-bottom-color: var(--smaragd); }
header .benutzer { display: flex; gap: .9rem; align-items: center; font-size: .92rem; }
header .benutzer a { color: var(--auf-dunkel); }
header .benutzer a:hover { color: #fff; }

/* Titelband */
.band { background: var(--tanne); color: #fff; padding: 1.6rem 0 1.8rem; background-image: linear-gradient(100deg, transparent 55%, rgba(0, 191, 111, .16) 100%); }
.band-innen { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.band h1 { font-family: var(--schrift-gross); font-weight: 400; font-size: 2.6rem; letter-spacing: .03em; text-transform: uppercase; margin: 0; line-height: 1.05; }
.band h1::after { content: ""; display: block; width: 3.5rem; height: 5px; background: var(--smaragd); margin-top: .6rem; }
.band p { margin: .7rem 0 0; color: var(--auf-dunkel); max-width: 46rem; }

main { max-width: 1100px; margin: 1.6rem auto; padding: 0 1.5rem; }
h2 { font-family: var(--schrift-gross); font-weight: 400; font-size: 1.55rem; letter-spacing: .02em; color: var(--smaragd-gross); margin: 2rem 0 .8rem; }
h3 { font-size: 1.1rem; margin: 0; }

/* Tabellen */
table { border-collapse: collapse; width: 100%; background: var(--karte); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 var(--rand); }
th, td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e3ece9; }
th { background: var(--tanne); color: #fff; font-weight: 600; border-bottom: 3px solid var(--smaragd); }
tbody tr:nth-child(even) { background: #f7fbf9; }

/* Karten, Hinweise */
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 1.2rem 1.4rem; margin: 1rem 0; }
.fehler { background: var(--pink-hell); border: 1px solid var(--pink); border-left-width: 6px; color: var(--pink-dunkel); padding: .7rem 1rem; margin: 1rem 0; border-radius: 4px; }
.hinweis { background: #e6f8ef; border: 1px solid var(--smaragd); border-left-width: 6px; padding: .7rem 1rem; margin: 1rem 0; border-radius: 4px; }
.leise { color: var(--leise); font-size: .9rem; }

/* Formulare und Knöpfe */
form.inline { display: inline; }
label { display: block; margin: .6rem 0 .2rem; font-size: .9rem; font-weight: 600; }
input, select { font: inherit; padding: .45rem .6rem; border: 1px solid #9db3ae; border-radius: 4px; max-width: 100%; background: #fff; color: var(--text); }
input[type=text], input[type=password], input[type=email], select { width: 100%; max-width: 24rem; }
button, a.knopf { font: inherit; font-weight: 700; background: var(--smaragd); color: var(--tanne); border: 0; border-radius: 2rem; padding: .5rem 1.3rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, a.knopf:hover { background: #12d584; color: var(--tanne); }
button.sekundaer, a.knopf.sekundaer { background: transparent; color: var(--tanne); border: 2px solid var(--tanne); padding: .4rem 1.2rem; }
button.sekundaer:hover, a.knopf.sekundaer:hover { background: var(--tanne); color: #fff; }
button.link { background: none; color: var(--auf-dunkel); padding: 0; border-radius: 0; font-weight: 400; text-decoration: underline; }
button.link:hover { background: none; color: #fff; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
summary { cursor: pointer; color: var(--smaragd-text); font-weight: 600; }

/* Dienstkarten */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; }
.kachel { background: var(--tanne); color: #fff; border-radius: 8px; padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; border-top: 4px solid var(--smaragd); box-shadow: 0 6px 18px rgba(15, 39, 39, .18); }
.kachel.fehler-zustand { border-top-color: var(--pink); }
.kachel.veraltet { border-top-color: var(--amber); }
.kachel.unbekannt { border-top-color: #5b7471; }
.kachel .kopf { display: flex; gap: .9rem; align-items: center; }
.kachel .status-text { display: block; font-size: .9rem; color: var(--auf-dunkel); }
.kachel p { margin: 0; color: var(--auf-dunkel); font-size: .95rem; flex: 1; }
.kachel .meldung { color: #ffb3da; font-size: .9rem; flex: 0; }
.kachel .fuss { min-height: 2.6rem; display: flex; align-items: center; }
.kachel a.knopf { background: var(--smaragd); color: var(--tanne); }
.kachel a.knopf:hover { background: #fff; }

/* Statuskreis wie die Symbole in der Präsentation */
.ring { flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 3px solid var(--smaragd); display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; line-height: 1; color: var(--smaragd); background: rgba(0, 191, 111, .1); }
.ring::after { content: "✓"; }
.ring.fehler-zustand { border-color: var(--pink); color: var(--pink); background: rgba(255, 0, 134, .12); }
.ring.fehler-zustand::after { content: "!"; }
.ring.veraltet { border-color: var(--amber); color: var(--amber); background: rgba(245, 183, 0, .12); }
.ring.veraltet::after { content: "?"; }
.ring.unbekannt { border-color: #5b7471; color: #9fb5b1; background: transparent; }
.ring.unbekannt::after { content: "–"; }

/* Kennzahlen-Hinweis */
.ausblick { position: relative; background: var(--smaragd); color: var(--tanne); border-radius: 8px; padding: 1.4rem 1.6rem; }
.ausblick p { margin: 0; max-width: 48rem; font-size: 1.05rem; font-weight: 600; }
.ausblick .marke { position: absolute; top: -.9rem; right: 1.2rem; transform: rotate(-3deg); background: var(--pink); color: #fff; font-family: var(--schrift-gross); font-size: 1.25rem; letter-spacing: .03em; padding: .15rem 1rem; border-radius: 2rem; }

.zeile-form { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.zeile-form > div { min-width: 12rem; }
.gesperrt { color: #6d807d; }
.rolle { background: #e1f5ec; color: var(--smaragd-text); padding: .1rem .7rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; }

/* Anmeldeseite */
.anmeldung { max-width: 26rem; margin: 3rem auto; padding: 0 1.2rem; }
.anmeldung .karte { border: 0; border-top: 5px solid var(--smaragd); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.anmeldung h1 { font-family: var(--schrift-gross); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: 2.2rem; color: #fff; margin: 0 0 1rem; }

@media (max-width: 640px) {
  header { gap: .8rem; }
  header nav { order: 3; flex-basis: 100%; }
  .band h1 { font-size: 2rem; }
  main { padding: 0 1rem; }
  .band-innen { padding: 0 1rem; }
  table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .kachel { transition: transform .15s ease; }
  .kachel:hover { transform: translateY(-2px); }
}