/* =========================================================
   box__optionen – FINAL PATCH (put into a11y-patch.css)
   Must be loaded AFTER all other CSS files
   ========================================================= */

/* ---------- Header Button (WCAG, looks like before) ---------- */
#box--optionen button.box__header-btn{
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;          /* .box__header liefert Layout (height/padding/border) */
  width: 100% !important;
  text-align: left !important;
  font: inherit !important;
  color: inherit !important;
}

/* Focus sichtbar */
#box--optionen button.box__header-btn:focus{
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
}


/* =========================================================
   DESKTOP (>= 641px): Optionen nebeneinander + Einzug links
   ========================================================= */
@media (min-width: 641px){

  /* Globales nowrap (aus .box__wrapper * {white-space:nowrap}) NUR hier aufheben,
     sonst werden Labels abgeschnitten / zerlegt */
  #box--optionen .options__holder,
  #box--optionen .options__holder *{
    white-space: normal !important;
  }

  /* Linken Einzug wie vorher */
  #box--optionen .options__holder{
    margin-left: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;     /* uk-padding-small neutralisieren */
  }

  /* Falls responsive.css .options__holder auf 0 setzt: überschreiben */
  .options__holder{
    margin-left: 40px !important;
  }

  /* Fieldset als horizontale Reihe */
  #box--optionen fieldset.options__fieldset{
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-inline-size: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 25px !important;
    align-items: center !important;
  }

  /* Labels nebeneinander, ohne mobile "Kachel"-Style */
  #box--optionen label.options__label{
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;     /* Labeltext bleibt kompakt */
  }

  /* killt responsive.css: .options__holder>label { padding:6px; background...; margin:6px 0 } */
  #box--optionen .options__holder > label,
  #box--optionen .options__holder > label.options__label{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Legend unsichtbar ohne Layout-Effekt */
  #box--optionen fieldset.options__fieldset > legend{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}


/* =========================================================
   MOBILE (<= 640px): nichts erzwingen – responsive.css darf wirken
   (Optional: Fokus auch hier ok)
   ========================================================= */
@media (max-width: 640px){
  #box--optionen button.box__header-btn:focus{
    outline-offset: 2px !important;
  }
}


/* box--optionen: Optionen immer untereinander */
#box--optionen fieldset.options__fieldset{
  display: block !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-inline-size: 0 !important;
}

#box--optionen label.options__label{
  display: flex !important;
  align-items: center !important;
  margin: 0px 0 !important;
  padding: 2px 0 !important;
  white-space: normal !important; /* darf umbrechen */
}

/* Optional: etwas „Kachel“-Look wie dein altes responsive.css */
#box--optionen .options__holder > label.options__label{
  background-color: rgba(255,255,255,0.41) !important;
  padding: 6px !important;
  margin: 6px 0 !important;
}
#box--optionen .box__header{
  padding: 0 15px !important;
}

/* Ausbildungsauswahl: Button wie vorheriges List-Item aussehen lassen */
.big-select__item-btn{
  all: unset;                 /* Button-Defaults weg */
  display: block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;

  /* übernimmt Optik vom alten li */
  padding: 8px;
  text-align: center;
  position: relative;
}

/* rechter "ok" Bereich wie früher .btn__big-select */
.big-select__item-action{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 80px;              /* wie dein altes .btn__big-select */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;               /* wie vorher: erst bei hover/active sichtbar */
  transition: all 600ms ease;
}

/* hover wie vorher */
.big-select li:hover .big-select__item-btn{
  background-color: #f68b1f;
  color: #333;
  font-weight: bold;
}
.big-select li:hover .big-select__item-action{
  opacity: 1;
  background-color: #f68b1f;
  color: #000;
}

/* active wie vorher */
.big-select li.active .big-select__item-btn{
  background-color: #fcc188;
  color: #333;
  font-weight: bold;
}
.big-select li.active .big-select__item-action{
  opacity: 1;
  background-color: #f68b1f;
  color: #333;
}

/* Fokus sichtbar (WCAG) */
.big-select__item-btn:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}


button.results__item:hover {
   
  color: #000;
}

.results__item-body {
   background-color: #cce9f9;
	height: 100%;
}

/* =========================================
   content-box__single-result – Footer Fix
   ========================================= */

/* Buttons sollen sich wie die alten Divs verhalten */
.event-detail__footer-btn{
  background-color: #f68b1f;  /* gleiche Farbe wie vorher */
  border: 0;
  margin: 0;
  padding: 10px;
  color: #000;
  font-weight: 700;
  cursor: pointer;

  display: block;
  width: 100%;
  box-sizing: border-box;

  text-align: center;
}

/* Grid-Breite beibehalten */
.uk-width-1-3.event-detail__footer-btn{
  width: 33.333%;
}

.uk-width-2-3.event-detail__footer-btn{
  width: 66.666%;
}

/* Hover wie vorher */
.event-detail__footer-btn:hover{
  background-color: #f68b1f;   /* oder deine Hover-Farbe */
  color: #000;
}

/* Fokus sichtbar (WCAG) */
.event-detail__footer-btn:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Linker "Zurück"-Button optisch wie vorher */
.event-detail__footer-back{
  border-right: 1px solid #fff;
  opacity: 0.8;
}

.event-detail__footer-back:hover{
  opacity: 1;
}
/* =========================================
   WCAG: Sichtbarer Fokus für Formfelder
   ========================================= */

/* Inputs/Selects/Textareas: sichtbarer Fokus */
.event-detail__form input:focus,
.event-detail__form select:focus,
.event-detail__form textarea:focus,
.download__form input:focus,
.download__form select:focus,
.download__form textarea:focus,
.rueckruf__form input:focus,
.rueckruf__form select:focus,
.rueckruf__form textarea:focus{
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;

  /* falls UIkit/du Hintergrund/Shadow killt */
  box-shadow: none !important;
}

/* Checkbox/Radio: ebenfalls Fokus sichtbar */
.event-detail__form input[type="checkbox"]:focus,
.event-detail__form input[type="radio"]:focus,
.download__form input[type="checkbox"]:focus,
.download__form input[type="radio"]:focus,
.rueckruf__form input[type="checkbox"]:focus,
.rueckruf__form input[type="radio"]:focus{
  outline: 3px solid #000 !important;
  outline-offset: 3px !important;
}

/* box__ausbildung: Button soll wie alter klick-div Header aussehen */
#box--ausbildung .box__header-btn{
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;          /* Layout bleibt über .box__header */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

/* Fokus sichtbar */
#box--ausbildung .box__header-btn:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* =========================================
   download-registration-form (Modal) – WCAG Patch
   ========================================= */

/* Error-Summary Fokus sichtbar */
.download-registration-form .event-detail__error-line:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Sichtbarer Fokus für Felder im Download-Formular */
.download-registration-form .download__form input:focus,
.download-registration-form .download__form select:focus,
.download-registration-form .download__form textarea:focus{
  outline: 3px solid #000 !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Checkbox/Radio Fokus */
.download-registration-form .download__form input[type="checkbox"]:focus,
.download-registration-form .download__form input[type="radio"]:focus{
  outline: 3px solid #000 !important;
  outline-offset: 3px !important;
}

/* Footer Buttons im Modal: vollflächig klickbar + konsistent */
.download-registration-form .download__form-footer .event-detail__footer{
  padding: 0 !important;
}

.download-registration-form .download__form-footer .event-detail__footer-btn{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  min-height: 56px;
  box-sizing: border-box;

  background: #056973;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.download-registration-form .download__form-footer .event-detail__footer-back{
  border-right: 1px solid #fff;
  opacity: 0.85;
}

.download-registration-form .download__form-footer .event-detail__footer-btn:hover{
  background: #f68b1f;
}

.download-registration-form .download__form-footer .event-detail__footer-btn:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Close-Button oben rechts: Fokus sichtbar */
.download-registration-form .uk-modal-close-default:focus{
  outline: 3px solid #000;
  outline-offset: 2px;
}

#box--optionen button.box__header-btn {
	width: 90% !important;
}

.download__form-header {line-height: 20px; padding: 10px 0;}

.event-detail__footer:hover .event-detail__footer-btn {
	color: #000;
}

.box__wrapper .btn__select .select__arrow polyline {
	stroke: #333;
}