/* ============================
   Standard CSS & Variablen
   ============================ */
@import url('/App_Themes/global/standard.css');

/* Info, feste Farbnamen: https://www.w3.org/TR/css-color-3/#svg-color */

:root {
  /* Basis-Einstellungen */

  /* Größen */
  --text-size: 16px;              /* 1rem Basis */
  --page-width: 1280px;           /* iFrame-Breite */
  --tile-width: 300px;            /* Kartengröße */
  --tile-height: 300px;           /* Karten-Höhe */
  --tile-img-height: 200px;       /* Kartenbild-Höhe */

  /* Farben */
  --primary-color: #004A7D;             /* Buttons, H1 */
  --secondary-color: #2b639a;           /* Tabellenkopf, Hover, H2 */
  --primary-text-color: #1F2D3D;        /* Fließtext */
  --secondary-text-color: #FFFFFF;      /* Alternative Textfarbe (z. B. Buttons) */
  --alternating-bgcolor: #F4F7FA;       /* alternierender Hintergrund */
  --border-color: #B4C9DC;              /* Rahmenfarbe */

  /* Eckigkeit */
  --button-border-radius: 6px;
  --inputfield-border-radius: 6px;
  --box-border-radius: 8px;
  --img-radius: 4px;

  /* Seiten-Einstellungen */
  --page-bgcolor: #FFFFFF;              /* Hintergrund iFrame */
  --mainblock-padding: 1.5rem;          /* Abstand Hauptblöcke */
  --navigation-bgcolor: var(--primary-color);
  --footer-bgcolor: var(--primary-color);

  /* Text-Einstellungen */
  --text-lineheight: 1.6em;
  --text-font-family: Segoe UI,system-ui,sans-serif;
  --text-warning-color: #D8000C;

  /* Feldbeschriftungen */
  --outputfield-label-color: var(--primary-color);
  --outputfield-label-fontweight: 600;
  --outputfield-label-fontsize: var(--text-size);
  --outputfield-label-lineheight: 2rem;

  /* große Überschriften */
  --bigheader-fontweight: bold;
  --bigheader-fontsize: 2.25rem;
  --bigheader-color: var(--primary-color);

  /* kleine Überschriften */
  --smallheader-fontweight: 600;
  --smallheader-fontsize: 1.25rem;
  --smallheader-color: var(--primary-text-color);

  /* Seminartitel */
  --seminartitle-fontweight: 500;
  --seminartitle-fontsize: 1.875rem;
  --seminartitle-color: var(--primary-color);
  --seminar-subtitle-color: var(--secondary-color);

  /* Bilder */
  --thbild-width: 21rem;               /* Themenbild Breite */
  --thbild-display: inline;            /* in Th-Details anzeigen */
  --thbild-regform-display: none;      /* im Anmeldeformular anzeigen? */
  --thkopfbild-display: inline-block;  /* Kopfbild in Treeview */
  --trbild-width: 4.5rem;              /* Trainerbild Breite */
  --trbild-display: block;             /* Anzeigeart */
  --trbild-float: none;                /* Float-Einstellung */
  --header-logo-left-width: 20rem;     /* Header links */
  --header-logo-right-width: 20rem;    /* Header rechts */

  /* Eingabefelder */
  --inputfield-textcolor: var(--primary-text-color);
  --inputfield-fontweight: normal;
  --inputfield-bgcolor: white;
  --inputfield-border: 1px solid var(--border-color);
  --inputfield-width: 15rem;
  --inputlabel-width: 11rem;
  --inputfield-focus-outline: none;
  --inputfield-focus-border-top: 1px solid var(--primary-color);
  --searchfield-hover-color: var(--secondary-color);

  /* Tabellen & Boxen */
  --box-indent: 1rem;
  --box-heading-bgcolor: var(--secondary-color);
  --box-heading-color: var(--primary-text-color);
  --box-border: 1px solid var(--border-color);
  --box-header-border: var(--box-border);
  --boxcell-padding-right: 1.3rem;
  --boxcell-padding-topbottom: 0.25rem;
  --boxcell-valign: middle;         /* Treeview/Karten: top, middle, bottom */
  --boxcell-chrono-valign: center;  /* chrono: flex-start, center, flex-end */
  --grid-month-bgcolor: white;
  --grid-month-textsize: 2rem;
  --grid-month-textcolor: var(--primary-text-color);
  --grid-month-height: 5rem;
  --grid-invisible-columns: 0;
  --regform-gridhead-border-bottom: var(--box-border);
  --history-bgcolor: var(--alternating-bgcolor);

  /* Symbole */
  --bulletpoint-color: black;
  --checked-definitive-color: green;
  --regform-open-icon: url(/App_Themes/global/open_icon.png);
  --regform-close-icon: url(/App_Themes/global/close_icon.png);

  /* Buttons & Links */
  --button-bgcolor: var(--primary-color);
  --button-textcolor: var(--secondary-text-color);
  --button-textsize: 1rem;
  --button-border: none;
  --hover-button-bgcolor: #2b639a;
  --hover-button-textcolor: white;
  --hover-button-border: none;
  --link-text-color: var(--primary-color);

  /* Ampel */
  --trafficlight-red-image: url('/App_Themes/seminare.akademie-fuer-handrehabilitation.de/rot.png');
  --trafficlight-yellow-image: url('/App_Themes/seminare.akademie-fuer-handrehabilitation.de/gelb.png');
  --trafficlight-green-image: url('/App_Themes/seminare.akademie-fuer-handrehabilitation.de/gruen.png');
  --trafficlight-size: 2.6rem;
  --trafficlight-radius: 0.66rem;

  /* Kartenansicht */
  --tile-bgcolor: white;
  --tile-title-fontweight: bold;
  --tile-title-fontsize: var(--smallheader-fontsize);
  --tile-title-color: var(--primary-text-color);
  --tile-transform: scale(1.02, 1.02);
  --description-indent: 1.25rem;
  --description-border: var(--box-border);

  /* Treeview */
  --treeview-transform: scale(1.002, 1.002);
}

/* ============================
   Formulare & Eingabefelder
   ============================ */

/* Motion dezent – respektiert Systempräferenz */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Basis-Styling an Checkboxen angelehnt (zusammengeführt) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  color: var(--inputfield-textcolor);
  background-color: var(--inputfield-bgcolor);
  border: 2px solid var(--border-color);      /* vereinheitlicht */
  border-radius: 4px;                          /* vereinheitlicht */
  font-weight: var(--inputfield-fontweight);
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.55rem 0.75rem;
  width: var(--inputfield-width);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}

/* Hover */
input:hover,
select:hover,
textarea:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 4px rgba(53, 117, 178, 0.4);
}

/* Fokus – Tastatur & Maus */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-color: var(--primary-color);
}

/* Fokus sichtbar nur per Tastatur */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Platzhalter */
input::placeholder,
textarea::placeholder { color: #8a99a8; }

/* Disabled/Readonly */
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  background-color: var(--alternating-bgcolor);
  color: #687787;
  cursor: not-allowed;
  opacity: 0.9;
}

/* Fehlerzustand */
input:invalid,
select:invalid,
textarea:invalid,
.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--text-warning-color);
  box-shadow: 0 0 4px rgba(216, 0, 12, 0.35);
}

/* Label & Feld-Hilfetext (zusammengeführt) */
label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: var(--outputfield-label-fontweight);
  color: var(--outputfield-label-color);
  font-size: var(--outputfield-label-fontsize);
  line-height: var(--outputfield-label-lineheight);
}
.field { margin-bottom: 1rem; }
.field__hint {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: #687787;
}
.field--error .field__hint { color: var(--text-warning-color); }

/* Größen-Modifier & Breite */
.input--sm { padding: 0.4rem 0.6rem; font-size: 0.95rem; }
.input--lg { padding: 0.7rem 0.9rem; font-size: 1.05rem; }
.input--full { width: 100%; }

/* Textarea */
textarea { min-height: 6.5rem; resize: vertical; width: 100%; }

/* Number-Spins ausblenden */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Custom Select Arrow (kein Browserpfeil) */
select:not([multiple]):not([size]) {
  padding-right: 2.2rem; /* Platz für Pfeil */
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233575B2'>\
<path d='M7 10l5 5 5-5z'/></svg>");
}

/* High-Contrast/Windows-Ergonomie */
@media (forced-colors: active) {
  select:not([multiple]):not([size]) { background-image: none; }
  input, select, textarea {
    border: 1px solid CanvasText;
    outline-color: Highlight;
    box-shadow: none;
  }
}

/* Einheitliche Checkboxen */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0 0.4rem; /* oben/rechts/unten/links */
  box-sizing: border-box;
}
input[type="checkbox"]:hover {
  border-color: var(--primary-color);
  box-shadow: 0 0 4px rgba(53, 117, 178, 0.4);
}
input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
input[type="checkbox"]:checked::after {
  content: "✔";
  color: var(--secondary-text-color);
  font-size: 0.85rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
input[type="checkbox"]:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ============================
   Typografie & Layout
   ============================ */

[class^="ueberschrift_rasterzelle"],
.kartenansicht_themendetails_feldbeschriftung,
.treeview_themendetails_beschriftung,
.beschriftung_ausgabe,
.beschriftung_eingabe,
.filter_beschriftung_rahmen,
.suche_beschriftung_rahmen,
.beschriftung_ausgabe{
  font-size: 18px;
  font-variant: small-caps !important;
  color: var(--secondary-color) !important;
}

div.ausgabe_element_rahmen:not(:has(+ div.ausgabe_ve_Untertitel)) {
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.header_logo_links,
.header_text,
.header_logo_rechts,
.body_oben {
  display: none;
}

.body_mitte { padding-right: 1.3rem; }

/* ============================
   Chrono-/Karten-/Treeview
   ============================ */

.chrono_ansicht_zeile_ueberschrift,
.chrono_ansicht_monatsueberschrift {
  color: var(--seminartitle-color);
  font-size: 18px;
}

.chrono_ansicht_zeile_ueberschrift { font-weight: normal; }

.chrono_ansicht_monatsueberschrift {
  font-weight: bold;
  align-items: center !important;
  background-color: #E0E6ED;
  padding-left: 8px;
  padding-right: 8px;
  height: 50px;
}

.chrono_ansicht_header_spalte,
.kartenansicht_vedetails_header_spalte,
.treeview_vedetails_header_spalte {
  color: white;
}

.chrono_ansicht_keine_termine {
  margin-top: 2rem;
  display: block;
  width: 100%;
  clear: both;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}

/* Ansicht Treeview */
.treeview_thema {
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
}
.treeview_themendetails_bild { display: none; }

/* Seminartitel-Header */
#cph_body_mitte_lbl_ausgabe_Ve_Bezeichnung {
  font-variant: small-caps;
}

/* ============================
   Buttons & Links
   ============================ */

.button, a.button {
  padding: 10px 20px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: auto;
  max-width: max-content;
  background-color: var(--button-bgcolor);
  color: var(--button-textcolor);
  border: var(--button-border);
  border-radius: var(--button-border-radius);
  font-size: var(--button-textsize);
}
.button:hover {
  background-color: var(--hover-button-bgcolor);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: var(--hover-button-textcolor);
  border: var(--hover-button-border);
}
.button:active {
  background-color: #1e4e7a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
a { text-decoration: none !important;}
/* ============================
   Bereiche aus-/einblenden
   ============================ */

/* Loginbereich, Bildungshistorie – Filter ausblenden */
#Filterbildungshistorie_Ve_Bezeichnung,
#Filterbildungshistorie_Ve_OrtOrt,
#Filterbildungshistorie_Am_Status { display: none; }

/* Loginbereich, Stammdatenpflege */
#cph_body_oben_btnNeuePersonAnlegen { display: none; }
#cph_body_oben_chkFilterInaktivePersonenAnzeigen,
#cph_body_oben_lblFilterInaktivePersonenAnzeigen { display: none; }

.auf_warteliste_hinweis { font-weight: bold; }

/* Zusätzliche Ausgaben */
[id^="cph_body_mitte_lbl_ausgabe_ve_reihenteile"] {
  display: inline-block; /* damit margin wirkt */
  margin: 0.2rem 0;
}

/* ============================
   Responsive
   ============================ */

@media screen and (max-width: 800px) {
  /* Anpassung der Veranstaltungsliste für Smartphones */
  .chrono_ansicht_Ve_OrtName_spalte::before {
    content:"Veranstalter: ";
  }
}


/* Deaktivierte Checkboxen klar unterscheiden */
input[type="checkbox"]:disabled {
  background:
    repeating-linear-gradient(
      45deg,
      #eef2f6 0 6px,
      #dde6ef 6px 12px
    );
  border-color: #9fb3c8;
  cursor: not-allowed;
  opacity: 1;                /* nicht ausblenden, sondern klar zeigen */
  box-shadow: none;
}

/* Symbol bei deaktivierten, nicht angehakten Boxen */
input[type="checkbox"]:disabled:not(:checked)::after {
  content: "✖";
  color: #5f6c7b;
  font-size: 0.85rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* Bereits angehakte + deaktivierte Boxen etwas blasser darstellen */
input[type="checkbox"]:disabled:checked {
  background-color: #7f9fbe;
  border-color: #7f9fbe;
}
input[type="checkbox"]:disabled:checked::after {
  color: #eaf1f7;
}

/* Text neben deaktivierten Terminen abtönen */
input[type="checkbox"]:disabled + .wert_ausgabe,
input[type="checkbox"]:disabled + .wert_ausgabe a {
  color: #7a8898 !important;
  text-decoration: line-through;
}

/* Tastaturfokus nicht mehr anzeigen, wenn disabled */
input[type="checkbox"]:disabled:focus {
  outline: none;
}

/* Hoher Kontrast: klare Konturen ohne Schraffur */
@media (forced-colors: active) {
  input[type="checkbox"]:disabled {
    background: none;
    border: 1px solid GrayText;
  }
  input[type="checkbox"]:disabled:not(:checked)::after {
    content: "X";
    color: GrayText;
  }
}
/* Deaktivierte Checkboxen klar unterscheiden */
input[type="checkbox"]:disabled {
  background:
    repeating-linear-gradient(
      45deg,
      #eef2f6 0 6px,
      #dde6ef 6px 12px
    );
  border-color: #9fb3c8;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

input[type="checkbox"]:disabled:not(:checked)::after {
  content: "🚫";
  color: #5f6c7b;
  font-size: 0.85rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

input[type="checkbox"]:disabled:checked {
  background-color: #7f9fbe;
  border-color: #7f9fbe;
}
input[type="checkbox"]:disabled:checked::after {
  color: #eaf1f7;
}

input[type="checkbox"]:disabled + .wert_ausgabe,
input[type="checkbox"]:disabled + .wert_ausgabe a {
  color: #7a8898 !important;
  text-decoration: line-through;
}
input[type="checkbox"]:disabled:focus {
  outline: none;
}
<input type="checkbox"
       name="ctl00$cph_body_mitte$chkReihenteile2423"
       value="2423"
       disabled
       title="Ausgebucht">
@media (forced-colors: active) {
  input[type="checkbox"]:disabled {
    background: none;
    border: 1px solid GrayText;
  }
  input[type="checkbox"]:disabled:not(:checked)::after {
    content: "X";
    color: GrayText;
  }
}