/* =====================================================================
   PFEIL DESIGN – gemeinsames Aussehen für Dashboard, Kalender, Kalkulator
   Diese Datei wird in allen drei Werkzeugen zuletzt geladen und hat
   deshalb das letzte Wort. Sie enthält nur Gestaltung, keine Logik –
   ein Fehler hier kann höchstens die Optik stören, nie die Funktion.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow+Semi+Condensed:wght@500;600&family=Barlow:wght@400;500;600&display=swap');


/* ---------------------------------------------------------------
   1. GRUNDFARBEN – hier ändern und es gilt überall
   --------------------------------------------------------------- */
:root {
  --tinte:   #0E0E0E;
  --signal:  #F1C400;
  --beton:   #EFEEEB;
  --papier:  #FFFFFF;
  --alarm:   #C42B1C;
  --fertig:  #1E7A46;
  --linie:   #D4D3CE;
  --matt:    #7A7975;

  --r-gross: 16px;
  --r-mittel:11px;
  --r-klein: 8px;
  --schatten:      0 1px 2px rgba(14,14,14,.05), 0 8px 24px rgba(14,14,14,.06);
  --schatten-tief: 0 2px 6px rgba(14,14,14,.08), 0 18px 40px rgba(14,14,14,.10);
  --uebergang: .16s cubic-bezier(.4,0,.2,1);

  /* Die alten Kalenderfarben – von dunkel auf hell umgestellt */
  --bg:     #EFEEEB;
  --card:   #FFFFFF;
  --hdr:    #0E0E0E;
  --border: #D4D3CE;
  --b2:     #E2E1DD;
  --y:      #F1C400;
  --m:      #7A7975;
  --m2:     #4A4944;
  --w:      #0E0E0E;
}

/* =====================================================================
   GRUNDLAGE – gilt für alle drei, damit nichts auseinanderläuft
   ===================================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0 !important; padding: 0 !important;
  background: var(--beton); overflow-x: hidden;
}
body { min-width: 0; }

/* Kopfzeile in allen drei exakt gleich */
.pfeilkopf, .schiene {
  height: 52px !important; min-height: 52px !important;
  padding: 0 20px !important; display: flex; align-items: center; gap: 18px;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
}
.pfeilkopf::-webkit-scrollbar, .schiene::-webkit-scrollbar { display: none; }
.marke, .pfeilmarke { font-size: 21px !important; }
.pfeilnav a, .schiene .pfeilnav a { padding: 6px 14px !important; font-size: 12.5px !important; }
.pfeiluhr, .schiene .rest { margin-left: auto; }


/* ---------------------------------------------------------------
   2. KOPFZEILE – in allen drei Werkzeugen gleich
   --------------------------------------------------------------- */
.pfeilkopf {
  background: rgba(14,14,14,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  color: #fff; padding: 11px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 900;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: 'Barlow', Arial, sans-serif;
}
.pfeilmarke {
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800;
  font-size: 22px; text-transform: uppercase; letter-spacing: -.005em;
  line-height: 1; white-space: nowrap; color: #fff;
}
.pfeilnav { display: flex; gap: 3px; }
.pfeilnav a {
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: #9C9B96; text-decoration: none; padding: 7px 15px;
  border-radius: 999px; transition: background var(--uebergang), color var(--uebergang);
}
.pfeilnav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.pfeilnav a.an    { background: var(--signal); color: #000; }
.pfeiluhr {
  margin-left: auto; font-family: 'Barlow Semi Condensed', Arial, sans-serif;
  font-size: 14px; color: var(--signal); font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .pfeilkopf { padding: 9px 13px; gap: 11px; }
  .pfeilnav a { padding: 6px 11px; font-size: 12px; }
  .pfeilmarke { font-size: 19px; }
}

/* ---------------------------------------------------------------
   3. KALENDER – vom dunklen auf das helle Aussehen umgestellt
   --------------------------------------------------------------- */
body { font-family: 'Barlow', Arial, sans-serif; -webkit-font-smoothing: antialiased; }

.hdr {
  background: var(--papier); border-bottom: 1px solid var(--linie);
  height: 58px; box-shadow: var(--schatten);
}
.hdr-brand, .hdr-sub { color: var(--tinte); }
.hdr-brand { font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; }
.hdr-sub   { color: var(--matt); }

.tbtn {
  background: rgba(14,14,14,.06); border: 1px solid transparent; color: #26251F;
  border-radius: 999px; padding: 7px 15px; font-size: 11px; font-weight: 600;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; letter-spacing: .06em;
  transition: background var(--uebergang), color var(--uebergang);
}
.tbtn:hover { background: rgba(14,14,14,.13); color: #000; }

.vtab {
  border: 1px solid transparent; background: rgba(14,14,14,.05); color: var(--matt);
  border-radius: 999px; padding: 7px 17px; font-weight: 600;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif;
}
.vtab:hover { background: rgba(14,14,14,.11); color: var(--tinte); }
.vtab.on    { background: var(--tinte); color: #fff; border-color: transparent; }

.search-bar   { background: transparent; }
.search-input {
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte);
  border-radius: 999px; padding: 10px 17px; font-family: 'Barlow', Arial, sans-serif;
}
.search-input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(241,196,0,.28); }
.search-clear { color: var(--matt); }

/* Jobkarten im Wochenraster */
.jc {
  border-radius: var(--r-mittel); box-shadow: var(--schatten);
  border-left-width: 4px; background: var(--papier); color: var(--tinte);
}
.jc:hover { box-shadow: var(--schatten-tief); }
.jc.done  { opacity: .5; }
.jc-time-big { font-family: 'Barlow Semi Condensed', Arial, sans-serif; }

/* Listen- und Wochenansicht */
.li, .wo-item {
  background: var(--papier); border-bottom: 1px solid rgba(14,14,14,.05);
  color: var(--tinte);
}
.li:hover, .wo-item:hover { background: rgba(14,14,14,.02); }
.wo-item { border-radius: var(--r-mittel); box-shadow: var(--schatten); margin-bottom: 6px; }
.wkw { font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; color: var(--tinte); }
.wl, .wdr { color: var(--matt); }

/* Spalten- und Tagesköpfe */
.dh, .dhdr, .dsh, .dn, .cbg {
  background: var(--papier); color: var(--tinte); border-color: var(--linie);
}
.dn.tn, .dh.tc { color: var(--signal); }
.nb, .ab, .obt {
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(14,14,14,.06); color: #26251F;
}
.nb:hover, .ab:hover, .obt:hover { background: rgba(14,14,14,.13); color: #000; border-color: transparent; }

/* Eingabefelder im Kalender */
.fi, .dur-input {
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte);
  border-radius: var(--r-klein); font-family: 'Barlow', Arial, sans-serif;
}
.fi:focus, .dur-input:focus { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(241,196,0,.28); outline: none; }
.dur-btn { border-radius: 999px; background: rgba(14,14,14,.06); border: none; color: #26251F; }

/* Fenster über der Seite */
.mcl { color: var(--matt); }
#jcTooltip {
  background: var(--tinte); color: #fff; border-radius: var(--r-mittel);
  box-shadow: var(--schatten-tief); font-family: 'Barlow', Arial, sans-serif;
}


/* ---------------------------------------------------------------
   3b. KALENDER – Reste des dunklen Aussehens
   --------------------------------------------------------------- */
.view-tabs { background: var(--papier); border-bottom: 1px solid var(--linie); }
.search-bar, .cbg, .mb, .db { background: var(--papier); }
.fi input, .fi textarea, .d-notiz, .dur-input, .search-input {
  background: var(--papier); color: var(--tinte); border: 1px solid var(--linie);
}
.d-notiz:focus, .fi input:focus, .fi textarea:focus {
  border-color: var(--signal); box-shadow: 0 0 0 3px rgba(241,196,0,.28); outline: none;
}
.jc.done { background: #F2F1ED !important; }
.dh.tc   { background: #FDF8E0; }
.sync-toast { background: var(--tinte); color: #fff; border-radius: var(--r-mittel); }
.nb:hover, .gb.on, .dur-btn:hover { background: rgba(14,14,14,.11); color: var(--tinte); }
#jcTooltip .tt-title, #jcTooltip .tt-notiz, #jcTooltip .tt-empty { background: transparent; }

/* Fenster über der Seite */
.mb, .db, .mcont, .dcont, .modal, .dialog {
  background: var(--papier); color: var(--tinte);
  border-radius: var(--r-gross); box-shadow: var(--schatten-tief);
}
.dhdr, .mhdr { background: var(--papier); border-bottom: 1px solid var(--linie); color: var(--tinte); }

/* Grün einheitlich auf Pfeil-Grün */
.jc-done-btn.is-done, .sync-dot, .jc-cb.checked,
.cb-row.on .cb-box, .dintern.on .dintern-box { background: var(--fertig) !important; }
.jc-cb, .cb-box, .dintern-box { border-color: var(--fertig); }
.cb-row.on .cb-label, .dintern.on .dintern-txt { color: var(--fertig); }

/* ---------------------------------------------------------------
   4. KALKULATOR – Farben und Rundungen angleichen
   --------------------------------------------------------------- */
#calcApp {
  --schwarz: var(--tinte);
  --schwarz-soft: #1D1D1B;
  --gelb: var(--signal);
  --gelb-dunkel: #D2AB00;
  --bg: var(--beton);
  --ink: var(--tinte);
  --ink-soft: var(--matt);
  --line: var(--linie);
  --ok: var(--fertig);
  --sans: 'Barlow', Arial, sans-serif;
  font-family: 'Barlow', Arial, sans-serif;
}
#calcApp header {
  background: var(--papier); border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
}
#calcApp header .logo {
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800;
  text-transform: uppercase; color: var(--tinte); letter-spacing: -.005em;
}
#calcNav button {
  border-radius: 999px; border: 1px solid transparent;
  background: rgba(14,14,14,.05); color: var(--matt);
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600;
  letter-spacing: .05em; padding: 7px 15px;
  transition: background var(--uebergang), color var(--uebergang);
}
#calcNav button:hover  { background: rgba(14,14,14,.11); color: var(--tinte); }
#calcNav button.active { background: var(--tinte); color: #fff; }

#calcApp .btn, #calcApp .btn-primary, #calcApp .btn-gelb, #calcApp .admin-btn {
  border-radius: 999px; border: 1px solid transparent; font-weight: 600;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; letter-spacing: .05em;
  transition: background var(--uebergang), color var(--uebergang);
}
#calcApp .btn        { background: rgba(14,14,14,.06); color: #26251F; }
#calcApp .btn:hover  { background: rgba(14,14,14,.13); color: #000; }
#calcApp .btn-primary, #calcApp .btn-gelb { background: var(--signal); color: #000; }
#calcApp .btn-primary:hover, #calcApp .btn-gelb:hover { background: #E4B900; }
#calcApp .admin-btn  { background: rgba(14,14,14,.06); color: #26251F; }

#calcApp input, #calcApp select, #calcApp textarea {
  border-radius: var(--r-klein); border: 1px solid var(--linie);
  font-family: 'Barlow', Arial, sans-serif;
}
#calcApp input:focus, #calcApp select:focus, #calcApp textarea:focus {
  outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(241,196,0,.28);
}
#calcApp .card, #calcApp .panel, #calcApp .modul, #calcApp .box {
  border-radius: var(--r-gross); border: 1px solid rgba(14,14,14,.07);
  box-shadow: var(--schatten); background: var(--papier);
}
#calcApp .section-title {
  font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; color: var(--tinte);
}
#calcApp .modal { border-radius: var(--r-gross); box-shadow: var(--schatten-tief); }
#calcApp .toast { border-radius: 999px; box-shadow: var(--schatten-tief); }
#calcApp .adjust-bar { border-radius: 999px; }

/* Der Kalkulator ist eine eigene Seite, kein Fenster über dem Kalender */
#calcOverlay { position: static; display: block; background: none; }
#calcApp     { min-height: calc(100vh - 52px); }
#calcBackBtn { display: none; }


/* =====================================================================
   NACHBESSERUNGEN – einheitliche Kopfzeile, runde Formen, lesbare Schrift
   ===================================================================== */

/* --- Kopfzeile in allen drei Werkzeugen gleich --- */
.pfeilkopf, .schiene { padding: 11px 20px; min-height: 52px; }
.marke, .pfeilmarke {
  font-family: 'Barlow Condensed', Arial, sans-serif !important; font-weight: 800 !important;
  font-size: 22px !important; text-transform: uppercase !important;
  letter-spacing: -.005em; line-height: 1; color: #fff;
}
.schiene .pfeilnav a { font-size: 13px; }

/* Zweite Zeile im Kalender ruhiger */
.hdr { height: 54px; box-shadow: none; border-bottom: 1px solid var(--linie); }
.hdr-brand { font-size: 15px; }
.view-tabs { padding: 9px 18px; gap: 6px; }

/* --- Kalender: kräftigere Jobfarben --- */
.jc { border-left-width: 5px; }

/* Der zweite Haken war unsichtbar */
.jc-done-btn {
  width: 19px; height: 19px; border-radius: 999px;
  border: 2px solid var(--linie); background: var(--papier);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 11px; line-height: 1;
}
.jc-done-btn:hover { border-color: var(--fertig); background: #EAF3EE; color: var(--fertig); }
.jc-done-btn.is-done { background: var(--fertig) !important; border-color: var(--fertig); color: #fff; }
.jc-cb { border-radius: 5px; border: 2px solid var(--linie); background: var(--papier); }
.jc-cb.checked { background: var(--fertig) !important; border-color: var(--fertig); }

/* Alle Knöpfe im Kalender rund */
.tbtn, .vtab, .nb, .ab, .obt, .dur-btn, .ddup, .sv, .gb, .mcl,
.mb button, .db button, .dbt, .dbtn, .d-btn {
  border-radius: 999px !important; border: 1px solid transparent;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600;
  letter-spacing: .05em;
}
.mb button, .db button, .dbt, .dbtn, .d-btn {
  background: rgba(14,14,14,.06); color: #26251F; padding: 8px 16px;
}
.mb button:hover, .db button:hover, .dbt:hover, .dbtn:hover, .d-btn:hover {
  background: rgba(14,14,14,.13); color: #000;
}
.mcl { width: 30px; height: 30px; background: rgba(14,14,14,.06); color: var(--matt); }
.mcl:hover { background: rgba(14,14,14,.13); color: var(--tinte); }

/* Formularfelder im Job-Fenster: runder, dunklerer Text, keine Doppelkontur */
.fi { border: none !important; padding: 0 !important; background: none !important; }
.fi label, .flabel, .dlbl {
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--matt); margin-bottom: 5px; display: block;
}
.fi input, .fi textarea, .fi select, .d-notiz, .dur-input, .search-input,
.mb input, .mb textarea, .mb select, .db input, .db textarea, .db select {
  border-radius: var(--r-mittel) !important; border: 1px solid var(--linie) !important;
  background: var(--papier) !important; color: var(--tinte) !important;
  font-family: 'Barlow', Arial, sans-serif !important; font-size: 14px; padding: 11px 14px;
}
.fi input::placeholder, .fi textarea::placeholder,
.mb input::placeholder, .mb textarea::placeholder { color: #A9A8A3 !important; }
.fi input:focus, .fi textarea:focus, .fi select:focus,
.mb input:focus, .mb textarea:focus, .mb select:focus {
  border-color: var(--signal) !important; box-shadow: 0 0 0 3px rgba(241,196,0,.28); outline: none;
}
.search-input { border-radius: 999px !important; }

/* Auswahl der Jobart oben im Fenster */
.gb { padding: 9px 18px; background: rgba(14,14,14,.05); color: var(--matt); }
.gb.on { background: var(--tinte) !important; color: #fff; }

/* --- Kalkulator --- */
#calcApp { background: var(--beton); border: none; }
#calcOverlay { border: none; padding: 0; }

/* Modulwahl: runde Pillen, lesbar */
#calcApp header { background: var(--papier); border-bottom: 1px solid var(--linie); height: 54px; }
#calcApp header .logo { color: var(--tinte) !important; }
#calcApp header nav button {
  border-radius: 999px !important; color: var(--matt) !important;
  background: transparent !important; padding: 7px 15px;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600; letter-spacing: .05em;
}
#calcApp header nav button:hover {
  background: rgba(14,14,14,.08) !important; color: var(--tinte) !important;
}
#calcApp header nav button.active {
  background: var(--tinte) !important; color: #fff !important;
}
#calcApp header .admin-btn {
  border-radius: 999px !important; border: 1px solid transparent;
  background: rgba(14,14,14,.06); color: #26251F;
}
#calcApp header .admin-btn:hover { background: var(--tinte); color: #fff; }

/* Eingaben rund und lesbar */
#calcApp input, #calcApp select, #calcApp textarea {
  border-radius: var(--r-mittel) !important; border: 1px solid var(--linie) !important;
  color: var(--tinte) !important; background: var(--papier) !important;
  padding: 11px 14px; font-size: 14px;
}
#calcApp input[type=checkbox] { border-radius: 5px !important; padding: 0; }
#calcApp select { padding-right: 34px; background-position: right 13px center; }
#calcApp input:focus, #calcApp select:focus, #calcApp textarea:focus {
  outline: none !important; border-color: var(--signal) !important;
  box-shadow: 0 0 0 3px rgba(241,196,0,.28);
}
#calcApp label { color: #4A4944 !important; font-size: 12px; letter-spacing: .04em; }
#calcApp .hint { color: #6A6965 !important; }
#calcApp .card h2 { color: var(--tinte) !important; }
#calcApp .card { border-radius: var(--r-gross); border-color: rgba(14,14,14,.07); box-shadow: var(--schatten); }
#calcApp .btn, #calcApp .btn-sm { border-radius: 999px !important; padding: 8px 17px; }
#calcApp .btn-sm { padding: 6px 14px; }

/* Ergebnisfeld rechts */
#calcApp .result { border-radius: var(--r-gross); }
#calcApp .adjust-bar button { border-radius: 999px !important; padding: 8px 6px; }
#calcApp .endpreis { border-radius: var(--r-gross); }
#calcApp .copy-area { border-radius: var(--r-mittel); }
#calcApp .pos-line .lbl { color: #C9C9C5; }
#calcApp .pos-detail { color: #97968F !important; }
#calcApp .result h2 { color: #B5B4AF; }
#calcApp .badge { border-radius: 999px; }
#calcApp table th { border-radius: 0; }


/* =====================================================================
   RUNDE ZWEI – Kontraste, Hover, Rahmen
   ===================================================================== */

/* --- Kalender: Knöpfe deutlich sichtbar --- */
.tbtn {
  background: var(--tinte) !important; color: #fff !important;
  border: none !important; padding: 8px 16px; font-size: 11px;
}
.tbtn:hover { background: #2A2A27 !important; color: #fff !important; }
.hdr .tbtn.kalk, .tbtn[onclick*="kalkulator"] {
  background: var(--signal) !important; color: #000 !important;
}
.hdr .tbtn.kalk:hover, .tbtn[onclick*="kalkulator"]:hover { background: #E4B900 !important; }

.vtab {
  background: #E4E3DF !important; color: #4A4944 !important; border: none !important;
  padding: 8px 18px; font-size: 11.5px;
}
.vtab:hover { background: #D6D5D0 !important; color: var(--tinte) !important; }
.vtab.on { background: var(--tinte) !important; color: #fff !important; }

.nb, .ab, .obt, .dur-btn {
  background: #E4E3DF !important; color: #26251F !important; border: none !important;
}
.nb:hover, .ab:hover, .obt:hover, .dur-btn:hover { background: #D0CFCA !important; color: #000 !important; }

/* --- Tagesköpfe: kein schwarzer Balken beim Überfahren --- */
.dhdr { background: var(--papier); border-bottom: 1px solid var(--linie); }
.dh   { border-left: 1px solid var(--linie); }
.dh:hover { background: #F5F4F0 !important; }
.dh.tc { background: #FDF8E0 !important; }
.dn { border-radius: 999px; }
.dn.tn { background: var(--signal); color: #000 !important; }
.cbg { border-left: 1px solid var(--linie); }
.dsh { color: var(--matt); }

/* --- Jobkarten: beim Überfahren satter statt heller --- */
.jc:hover { filter: none !important; box-shadow: inset 0 0 0 999px rgba(0,0,0,.06), var(--schatten-tief); }
.jc { transition: box-shadow .16s; }

/* --- Fenster: Knöpfe klar unterscheidbar --- */
.ddo, .ded, .ddup, .ddl, .sv, .ca, .obt {
  border-radius: 999px !important; border: none !important;
  font-family: 'Barlow Semi Condensed', Arial, sans-serif; font-weight: 600;
  letter-spacing: .05em; padding: 10px 16px !important;
}
.ddo { background: var(--signal) !important; color: #000 !important; font-weight: 700 !important; }
.ddo:hover { background: #E4B900 !important; }
.ddo.dun { background: #E4E3DF !important; color: #26251F !important; }
.ded, .ddup { background: #E4E3DF !important; color: #26251F !important; }
.ded:hover, .ddup:hover { background: #D0CFCA !important; color: #000 !important; }
.ddl { background: #FBE9E7 !important; color: var(--alarm) !important; min-width: 46px; }
.ddl:hover { background: var(--alarm) !important; color: #fff !important; }
.sv { background: var(--signal) !important; color: #000 !important; font-weight: 700 !important; padding: 13px 20px !important; }
.sv:hover { background: #E4B900 !important; }
.ca { background: #E4E3DF !important; color: #26251F !important; padding: 13px 20px !important; }
.ca:hover { background: #D0CFCA !important; }

/* --- Kalkulator: kein weißer Rahmen, gleiche Kopfhöhe --- */
html, body { background: var(--beton); }
#calcOverlay { display: block !important; background: none !important; border: none !important;
  padding: 0 !important; margin: 0 !important; }
#calcApp { background: var(--beton) !important; border: none !important; box-shadow: none !important;
  margin: 0 !important; }
#calcApp header { height: 52px !important; padding: 0 20px !important; }
#calcApp header .logo { font-size: 16px; }

/* Eingaben im Kalkulator pillenförmig */
#calcApp input:not([type=checkbox]), #calcApp select {
  border-radius: 999px !important; padding: 11px 17px !important;
}
#calcApp select { padding-right: 36px !important; background-position: right 15px center; }
#calcApp textarea, #calcApp .copy-area { border-radius: var(--r-mittel) !important; }
#calcApp input[type=number] { text-align: right; padding-right: 17px !important; }

/* ---------------------------------------------------------------
   5. Kleinigkeiten für alle
   --------------------------------------------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #D4D3CE; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #B4B3AE; }
::-webkit-scrollbar-track { background: transparent; }

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

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

/* ---------------------------------------------------------------
   6. Kopfzeile mit vier Reitern – am Handy seitlich wischen statt umbrechen
   --------------------------------------------------------------- */
.pfeilkopf, .schiene { flex-wrap: nowrap !important; }
.pfeilnav, .pfeilmarke { flex-shrink: 0; }