/* ------------------------------------------------------------------
   SiteCare-Dienst - Stilvorlage
   Angelegt am 19.09.2026 fuer Runde 1.

   Alle Werte stammen aus websites/it-schniering.de/build/assets/css/stil.css
   (Farben, Schriften, Abstaende, Kartenstil, Kopfzeile, Knoepfe). Nichts
   davon ist neu erfunden. Vorbild fuer das Vorgehen ist
   projects/check-it-schniering-de-site/assets/style.css - dort wurde die
   gleiche Angleichung schon einmal gemacht.

   Neu sind nur die Bausteine, die es auf der Hauptseite nicht gibt:
   Datentabelle, Anmeldekarte, Rollen-/Art-Etiketten. Sie benutzen
   ausschliesslich die Variablen von oben.
   ------------------------------------------------------------------ */

:root {
  --blau: #008cbb;
  --blau-dunkel: #005f8c;
  --blau-zart: #eaf7fc;
  --gold: #ffb000;
  --tinte: #17313b;
  --gedaempft: #526b75;
  --linie: #cfe6ef;
  --flaeche: #f7fbfd;
  --weiss: #ffffff;
  --nacht: #122a34;
  --nacht-linie: rgba(255, 255, 255, 0.16);
  --nacht-text: #d2e8f0;
  --gruen: #1f7a4f;
  --rot: #9f2323;
  --schatten: 0 24px 70px rgba(18, 42, 52, 0.14);
  --rand: clamp(18px, 5vw, 72px);
  --bahn: 1240px;
}

/* --- Schriften, lokal ausgeliefert. Keine Verbindung zu Google. --- */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/schriften/Quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, 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;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/schriften/Quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/schriften/Rajdhani-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, 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;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/schriften/Rajdhani-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/schriften/Rajdhani-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, 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;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/schriften/Rajdhani-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Grundgeruest --- */

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

html {
  -webkit-text-size-adjust: 100%;
  accent-color: var(--blau);
  caret-color: var(--blau-dunkel);
  scrollbar-color: #9dc7d8 var(--blau-zart);
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  overflow-x: hidden;
  color: var(--tinte);
  background: var(--weiss);
  font-family: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: proportional-nums;
}

::selection {
  color: var(--nacht);
  background: #ffe2a1;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blau-dunkel);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  h1,
  h2,
  h3,
  h4 {
    hyphens: auto;
  }
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

h3 {
  font-size: 1.5rem;
  line-height: 1.15;
}

h4 {
  font-size: 1.14rem;
  line-height: 1.2;
}

p,
li,
dd,
td,
th,
summary {
  overflow-wrap: anywhere;
}

p {
  margin: 0 0 16px;
}

p:last-child {
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  color: var(--weiss);
  background: var(--blau-dunkel);
  font-weight: 700;
}

.sprungmarke:focus {
  left: 8px;
  top: 8px;
}

/* --- Kopfbereich --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px max(var(--rand), (100% - var(--bahn)) / 2);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(16px);
}

.marke {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.marke img {
  width: 46px;
  height: auto;
}

.marke strong {
  display: block;
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.24rem;
  line-height: 1;
}

.marke small {
  display: block;
  color: var(--gedaempft);
  font-size: 0.78rem;
}

.hauptmenue {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.97rem;
  font-weight: 700;
}

.hauptmenue a,
.hauptmenue button {
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  color: #29424c;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.hauptmenue a:hover,
.hauptmenue button:hover {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
}

.hauptmenue a[aria-current='page'] {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  box-shadow: inset 0 -3px var(--gold);
}

.kopf-person {
  color: var(--gedaempft);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Bausteine --- */

.bereich {
  width: 100%;
  max-width: var(--bahn);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 58px) var(--rand);
}

.bereich-flaeche {
  max-width: none;
  padding-inline: 0;
  background: var(--flaeche);
  border-block: 1px solid var(--linie);
}

.bereich-flaeche > * {
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Damit der dunkle Fuss auf kurzen Seiten unten anliegt und dazwischen
   kein weisser Streifen bleibt (gesehen am 19.09.2026 auf der Anmeldeseite). */
.inhalt > .anmeldung {
  flex: 1;
}

.einleitung {
  max-width: 62ch;
  margin-top: 18px;
  color: #344f5b;
  font-size: clamp(1.05rem, 2vw, 1.24rem);
}

.fliesstext {
  max-width: 70ch;
  color: #3f5b66;
  font-size: 1.06rem;
}

.hinweis {
  color: var(--gedaempft);
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Knoepfe --- */

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.knopf {
  display: inline-flex;
  white-space: nowrap;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.knopf:hover {
  transform: translateY(-2px);
}

.knopf:active {
  transform: translateY(0);
}

.knopf-haupt {
  color: var(--weiss);
  background: var(--blau);
  box-shadow: 0 16px 34px rgba(0, 95, 140, 0.2);
}

.knopf-haupt:hover {
  background: var(--blau-dunkel);
}

.knopf-neben {
  color: var(--blau-dunkel);
  background: var(--weiss);
  border-color: var(--linie);
}

.knopf-neben:hover {
  border-color: var(--blau);
}

.knopf[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* --- Eingabefelder --- */

input,
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid #a9cfde;
  border-radius: 6px;
  font: inherit;
}

input::placeholder {
  color: #63808b;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blau);
  outline: 3px solid rgba(0, 140, 187, 0.24);
}

label {
  display: grid;
  align-content: start;
  gap: 6px;
  color: #2f424b;
  font-weight: 800;
}

/* --- Karten --- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  margin-top: 30px;
}

.karten article {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--weiss);
}

.karten article > p {
  margin-top: 12px;
  color: var(--gedaempft);
}

.karten article > :last-child {
  margin-bottom: 0;
}

.karten .wert {
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blau-dunkel);
}

.karten .bezeichnung {
  color: var(--gedaempft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* --- Anmeldung ---
   Eine Karte in der Mitte, gleicher Kartenstil wie oben. --- */

.anmeldung {
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vw, 90px) var(--rand);
  background: var(--flaeche);
}

.anmeldung form {
  display: grid;
  gap: 16px;
  width: min(100%, 420px);
  padding: 30px;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--weiss);
  box-shadow: var(--schatten);
}

.anmeldung h1 {
  font-size: 2.2rem;
}

.anmeldung .knopf {
  width: 100%;
}

/* --- Meldungen --- */

.fahne {
  margin: 0 0 18px;
  padding: 11px 14px;
  background: #eaf6f0;
  color: #14603d;
  font-weight: 800;
}

.fahne-rot {
  background: #fbeaea;
  color: var(--rot);
}

.fahne-gold {
  background: #fff4dc;
  color: #6f4c00;
}

/* --- Datentabelle ---
   Eigener Baustein, es gibt auf der Hauptseite keine Tabelle. Rahmen,
   Linienfarbe und der blaue Deckel sind vom Kartenstil uebernommen. --- */

.tabellenrahmen {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--weiss);
}

table.liste {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.liste th,
table.liste td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

table.liste thead th {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

table.liste tbody tr:last-child th,
table.liste tbody tr:last-child td {
  border-bottom: 0;
}

table.liste tbody tr:hover {
  background: var(--flaeche);
}

table.liste td.leise {
  color: var(--gedaempft);
}

/* Datum und Dauer duerfen nicht mitten in der Zahl umbrechen - sonst steht
   dort "19.09.2 026," (gesehen am 19.09.2026). */
table.liste td.ganz {
  white-space: nowrap;
}

table.liste .kunde-name {
  min-width: 13ch;
  font-weight: 800;
  /* Domains duerfen an Punkt und Bindestrich umbrechen, aber nicht mitten
     im Wort - sonst steht dort "intouchyoga.d e" (19.09.2026). */
  overflow-wrap: break-word;
  word-break: normal;
}

table.liste .kunde-name a {
  text-decoration: none;
}

table.liste ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Etiketten fuer Art und Rolle --- */

.etikett {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--blau-zart);
  color: var(--blau-dunkel);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.etikett-wordpress {
  background: var(--blau-zart);
  color: var(--blau-dunkel);
}

.etikett-basis {
  background: #fff4dc;
  border-color: #f1dcae;
  color: #6f4c00;
}

.etikett-aus {
  background: #f0f3f4;
  border-color: #dde4e6;
  color: var(--gedaempft);
}

/* --- Ampel ---
   Runde 2. Dieselbe Pillenform wie die Etiketten oben, nur mit den drei
   Zustandsfarben. Gruen und Rot sind die Variablen aus Runde 1, Gelb ist
   die Goldnote der Hauptseite. Die Farbe steht nie allein: daneben steht
   immer das Wort. --- */

.ampel {
  display: inline-block;
  padding: 4px 12px 4px 26px;
  position: relative;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.ampel::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: currentColor;
}

.ampel-gruen {
  background: #eaf6f0;
  border-color: #bfe0ce;
  color: #14603d;
}

.ampel-gelb {
  background: #fff4dc;
  border-color: #f1dcae;
  color: #6f4c00;
}

.ampel-rot {
  background: #fbeaea;
  border-color: #eec9c9;
  color: var(--rot);
}

.ampel-leer {
  background: #f0f3f4;
  border-color: #dde4e6;
  color: var(--gedaempft);
}

.meldung {
  margin-bottom: 4px;
}

.meldung:last-child {
  margin-bottom: 0;
}

/* --- Filterleiste ueber der Lauf-Liste --- */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: #29424c;
  background: var(--weiss);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.filter:hover {
  border-color: var(--blau);
  background: var(--blau-zart);
}

.filter-aktiv {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  border-color: var(--blau);
  box-shadow: inset 0 -3px var(--gold);
}

.filter-zahl {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: 0.78rem;
}

.filter-aktiv .filter-zahl {
  background: var(--weiss);
  color: var(--blau-dunkel);
}

/* --- Kleiner Knopf fuer die Tabellenzeile --- */

.knopf-klein {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

/* --- Eckdaten eines Laufs ---
   Gleiche Rahmung wie die Karten, nur als Begriff-Wert-Liste. --- */

.eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  margin: 30px 0 0;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--linie);
}

.eckdaten > div {
  padding: 16px 20px;
  background: var(--weiss);
}

.eckdaten .breit {
  grid-column: 1 / -1;
}

.eckdaten dt {
  color: var(--gedaempft);
  font-size: 0.82rem;
  font-weight: 800;
}

.eckdaten dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.eckdaten .pfad {
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* --- Protokoll ---
   Eigener Baustein. Rahmen und Linienfarbe wie bei der Tabelle. --- */

.schritt {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--blau);
  background: var(--weiss);
}

.schritt h3 {
  font-size: 1.16rem;
  color: var(--blau-dunkel);
}

pre.protokoll {
  margin: 10px 0 0;
  padding: 0;
  overflow-x: auto;
  background: transparent;
  font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.protokoll .z {
  display: block;
  padding: 1px 8px;
  border-left: 3px solid transparent;
}

pre.protokoll .z-gruen {
  border-left-color: #1f7a4f;
  background: #f2faf5;
}

pre.protokoll .z-gelb {
  border-left-color: var(--gold);
  background: #fffaf0;
}

pre.protokoll .z-rot {
  border-left-color: var(--rot);
  background: #fdf2f2;
  font-weight: 700;
}

pre.protokoll-leise {
  color: var(--gedaempft);
  font-size: 0.82rem;
}

.mehr {
  margin-top: 12px;
}

.mehr > summary {
  cursor: pointer;
  color: var(--blau-dunkel);
  font-size: 0.88rem;
  font-weight: 800;
}

/* --- Fussbereich --- */

.fuss {
  padding: clamp(30px, 4vw, 48px) var(--rand) 24px;
  color: var(--nacht-text);
  background: var(--nacht);
}

.fuss-abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  max-width: var(--bahn);
  margin-inline: auto;
  font-size: 0.9rem;
}

.fuss a {
  color: var(--weiss);
}

.quellenzeile {
  margin-top: 18px;
}

/* ------------------------------------------------------------------
   Runde 3 - Betrieb

   Wieder nur vorhandene Variablen. Neu sind drei Bausteine, die es
   bisher nicht gab: die Schalterleiste, das kleine Formularfeld in der
   Tabellenzeile und die Ampelfarbe fuer "laeuft gerade".
   ------------------------------------------------------------------ */

/* --- Ampel: laufender Lauf ---
   Blau statt Gruen/Gelb/Rot, damit klar ist: das ist kein Ergebnis,
   sondern ein Zustand. Der Punkt links pulsiert langsam. --- */

.ampel-laeuft {
  background: var(--blau-zart);
  border-color: var(--blau);
  color: var(--blau-dunkel);
  text-decoration: none;
}

.ampel-laeuft::before {
  animation: pulsschlag 1.6s ease-in-out infinite;
}

@keyframes pulsschlag {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Wer Bewegung nicht mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .ampel-laeuft::before { animation: none; }
}

/* --- Fahne in Blau, fuer Zustandsmeldungen --- */

.fahne-blau {
  background: var(--blau-zart);
  color: var(--blau-dunkel);
}

/* --- Schalterleiste ---
   Gleiche Rahmung wie die Kennzahlkarten, nur dreispaltig und mit
   Erklaertext darunter. --- */

.schalterleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 22px 0 0;
}

.schalter {
  padding: 16px 18px;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--gedaempft);
  background: var(--weiss);
}

.schalter-an {
  border-top-color: var(--gruen);
}

.schalter-aus {
  border-top-color: var(--gold);
}

.schalter strong {
  display: block;
  color: var(--blau-dunkel);
  font-size: 0.95rem;
}

.schalter > span {
  display: block;
  margin: 2px 0 8px;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.schalter-an > span { color: var(--gruen); }
.schalter-aus > span { color: #6f4c00; }

.schalter small {
  display: block;
  color: var(--gedaempft);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* --- Zeitplan-Formular in der Tabellenzeile --- */

.zeitform {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.feldchen {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feldchen > span {
  color: var(--gedaempft);
  font-size: 0.75rem;
  font-weight: 700;
}

.feldchen select,
.feldchen input[type='time'] {
  padding: 6px 8px;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
  font-size: 0.86rem;
}

.feldchen-haken {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
}

.feldchen-haken > span {
  font-size: 0.8rem;
  /* Sonst bricht "eingeplant" in der engen Spalte zu "eing epla nt" um -
     derselbe Fehler wie bei "Öffnen" in Runde 2. */
  white-space: nowrap;
}

/* Die Zeitplan-Spalte braucht Platz, sonst quetscht die Tabelle sie. */
.zeitform > * {
  flex: 0 0 auto;
}

/* Was fuer ein Lauf war das: Wartung, Pruefung oder Probelauf. Steht als
   zweites Etikett unter dem Namen der Website - eine eigene Spalte hat
   die Tabelle nicht mehr hergegeben. */
.etikett-was {
  background: var(--flaeche);
  color: var(--gedaempft);
  border-color: var(--linie);
}

/* Die Kurzfassung ist die einzige Spalte mit ganzen Saetzen. Ohne
   Mindestbreite quetscht die Tabelle sie so weit zusammen, dass mitten im
   Wort umgebrochen wird ("abgebroche n", gesehen am 19.09.2026). */
table.liste td.kurz {
  min-width: 20ch;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Zwei Knoepfe nebeneinander in einer Tabellenzeile. */
.aktionen-eng {
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------
   Runde 4 - Kunden anlegen und aendern, Passwort wechseln

   Wieder ausschliesslich die Variablen von oben. Neu sind zwei
   Bausteine: das Kundenformular und zwei weitere Etiketten.
   ------------------------------------------------------------------ */

/* --- Etiketten ---
   "von Hand" markiert ein Feld, das gegen den Einlesevorgang geschuetzt
   ist. Gold wie die Hervorhebung der Hauptseite, damit es auffaellt,
   ohne nach Fehler auszusehen. --- */

.etikett-hand {
  background: #fff4dc;
  border-color: #f1dcae;
  color: #6f4c00;
}

/* In einem <label> ist alles ein Rasterfeld und wird auf volle Breite
   gezogen - das Etikett sah dadurch aus wie ein leeres Eingabefeld
   (gesehen am 19.09.2026 auf dem Bildschirmfoto). */
label > .etikett {
  justify-self: start;
  width: fit-content;
}

/* Freigabe: gruen wie die Ampel "in Ordnung". */
.etikett-frei {
  background: #eaf6f0;
  border-color: #bfe0ce;
  color: #14603d;
}

/* --- Kundenformular ---
   Gleiche Rahmung wie die Karten. Zwei Spalten, sobald Platz da ist;
   auf dem Telefon eine. --- */

.kundenform {
  margin-top: 26px;
  /* Unten Luft lassen: sonst klebt der Hinweistext am Speichern-Knopf und
     dessen Schatten liegt darueber (gesehen am 19.09.2026). */
  margin-bottom: 34px;
}

.kundenform fieldset {
  margin: 0 0 22px;
  padding: 20px 24px 24px;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--blau);
  background: var(--weiss);
}

.kundenform legend {
  padding: 0 8px;
  margin-left: -8px;
  color: var(--blau-dunkel);
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
}

.formgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px 22px;
}

.formgitter > .breit {
  grid-column: 1 / -1;
}

.formgitter small,
.hakenfeld small {
  color: var(--gedaempft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.formgitter input[disabled] {
  color: var(--gedaempft);
  background: var(--flaeche);
  cursor: not-allowed;
}

.formgitter textarea {
  resize: vertical;
  font-size: 0.95rem;
}

/* Haekchen: das Feld selbst darf nicht die volle Breite bekommen,
   sonst steht ein kilometerlanges Kaestchen neben dem Text. */

.hakenfeld {
  display: grid;
  align-content: start;
  gap: 6px;
}

.haken {
  display: flex;
  align-items: center;
  gap: 10px;
}

.haken input[type='checkbox'] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
}

.haken > span {
  font-weight: 800;
}

/* Die Freigabe steht etwas ab, damit sie nicht mit dem Haekchen
   darueber verschwimmt - es sind zwei verschiedene Aussagen. */
.haken-freigabe {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

/* --- Kopfzeile: der eigene Name fuehrt jetzt zum Passwortwechsel --- */

a.kopf-person {
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
}

a.kopf-person:hover {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
}

a.kopf-person[aria-current='page'] {
  color: var(--blau-dunkel);
  background: var(--blau-zart);
  box-shadow: inset 0 -3px var(--gold);
}

/* Die Spalte "Ändern" traegt zwei Knoepfe nebeneinander und darf
   deshalb nicht umbrechen - sonst steht dort "Stillleg en". */
table.liste .knopf-klein {
  white-space: nowrap;
}

/* Ordner- und Pfadangaben duerfen an / und - umbrechen, aber nicht mitten
   im Wort. Mit der Spalte "Ändern" wurde die Kundentabelle enger, und
   prompt stand dort "it-schniering.d e/SiteCare" und "tobiaslennar t.de"
   (gesehen am 19.09.2026 - dieselbe Familie wie "Öffn en" in Runde 2). */
/* Die Listenpunkte muessen mit genannt werden: die allgemeine Regel
   "li { overflow-wrap: anywhere }" weiter oben ist genauer und wuerde
   sonst gewinnen - dann stuende dort "/impressum.htm l". */
table.liste td.pfadzelle,
table.liste td.pfadzelle li,
table.liste td.pfadzelle span {
  min-width: 12ch;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Die Zeile mit Kimai-Name und -Nummer gehoert zusammen: der Name
   bekommt den Platz, die Nummer bleibt schmal. */
.paar {
  display: grid;
  grid-template-columns: 1fr 8ch;
  gap: 12px;
  align-items: start;
}

/* --- Zugangsdaten (Runde 5) ---
   Zwei neue Etiketten fuer das Ergebnis von "Zugang testen". Sie nehmen
   dieselben Farben wie die Ampel, damit gruen und rot ueberall dasselbe
   heissen. Eigene Werte werden bewusst nicht erfunden. --- */

.etikett-gruen {
  background: #eaf6f0;
  border-color: #bfe0ce;
  color: #14603d;
}

.etikett-rot {
  background: #fbeaea;
  border-color: #eec9c9;
  color: var(--rot);
}

/* Die Spalte "Zuletzt getestet" traegt einen ganzen Satz. Ohne eine
   Mindestbreite quetscht die Tabelle ihn in zwei Buchstaben je Zeile -
   dieselbe Umbruchfamilie wie "Öffn en" in Runde 2. */
table.liste td .hinweis {
  overflow-wrap: break-word;
  word-break: normal;
}

.zugangstabelle td:nth-child(4) {
  min-width: 22ch;
}