@charset "UTF-8";
/*!
 * ABP Kurse – gemeinsames Stylesheet für die Kufer-webbasys-Sichten
 * 12 (Kursübersicht), 13 (Kursdetails), 59 (Warenkorb), 232 (Demnächst),
 * 234 (Highlights), 430 (Unterkurse), 440 (Benutzerprofil), 504 (Anmeldung)
 * sowie 108, 218, 219, 235, 236, 241, 285, 482, 483, 503, 505, 506, 508,
 * 509 (Login, Profil, Anmeldestrecke, Merkliste, Dozenten – Abschnitt 7).
 *
 * Abschnitte 1–5 sind unverändert aus dem Mockup übernommen
 * (Mockup/src/Global, Kurse/Single, Buttons, Kurse/GridxList, Kurse/Slider).
 * Abschnitt 6 enthält die Erweiterungen, die für die dynamischen Sichten
 * nötig sind (Meta-Zeile, Datums-Badge, Zeilen-Listen, Detailseite, Warenkorb).
 *
 * Zielpfad: /wp-content/kuferweb/webbasys/layout/css/abp-kurse.css
 */

/* =========================================================================
   1. Globale Design-Tokens (Mockup/src/Global/style.scss)
   ========================================================================= */

:root {
  --abp--global--shadow: 0 10px 16px rgba(0, 0, 0, 0.05);
  --abp--global--shadow-hover: 0 18px 40px rgba(0, 21, 56, 0.16);
  --abp--global--border-radius: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --abp--global--spacing: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --abp--global--spacing-tight: calc(var(--abp--global--spacing) * 0.35);
  --abp--global--spacing-xs: calc(var(--abp--global--spacing) * 0.55);
  --abp--global--spacing-sm: calc(var(--abp--global--spacing) * 0.75);
  --abp--global--spacing-md: var(--abp--global--spacing);
  --abp--global--spacing-lg: calc(var(--abp--global--spacing) * 1.1);
  --abp--global--spacing-xl: calc(var(--abp--global--spacing) * 1.25);
  --abp--global--spacing-2xl: calc(var(--abp--global--spacing) * 1.5);
  --abp--global--spacing-3xl: calc(var(--abp--global--spacing) * 2.25);
  --abp--global--spacing-4xl: calc(var(--abp--global--spacing) * 3);
  --abp--global--font-family: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --abp--global--color--offwhite: #FCFDFF;
  --abp--global--color--primary: #001538;
  --abp--global--border-color: #e5e5e5;
  --abp--course-card--content-padding: var(--abp--global--spacing-md);

  --wp--preset--font-size--small: clamp(11px, calc(11px + 2 * ((100vw - 320px) / 1600)), 13px);
  --wp--preset--font-size--normal: clamp(16px, calc(14px + 2 * ((100vw - 320px) / 1600)), 16px);
  --wp--preset--font-size--medium: clamp(20px, calc(18px + 2 * ((100vw - 320px) / 1600)), 20px);
  --wp--preset--font-size--large: clamp(32px, calc(32px + 4 * ((100vw - 320px) / 1600)), 36px);
  --wp--preset--font-size--x-large: clamp(38px, calc(38px + 4 * ((100vw - 320px) / 1600)), 42px);
  --wp--preset--font-size--huge: clamp(48px, calc(48px + 4 * ((100vw - 320px) / 1600)), 52px);
}

/* =========================================================================
   2. Kurs-Karte (Mockup/src/Kurse/Single/style.scss)
   ========================================================================= */

:root {
  --abp--card--background-color: #fff;
  --abp--card--border-color: #e5e5e5;
  --abp--course-card--image-spacing: var(--abp--global--spacing-2xl);
  --abp--course-card--title-spacing: var(--abp--global--spacing-md);
}

.abp--course-card {
  width: 100%;
}
.abp--course-card__inner {
  position: relative;
  width: 100%;
}
.abp--course-card__content {
  background-color: var(--abp--card--background-color);
  border-color: var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  border-style: solid;
  border-width: 1px;
  padding: var(--abp--course-card--content-padding);
  margin: 0;
  margin-bottom: var(--abp--global--spacing);
}
.abp--course-card__image {
  display: block;
  margin: 0 0 var(--abp--course-card--image-spacing) 0;
  padding: 0;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  overflow: hidden;
}
.abp--course-card__image a,
.abp--course-card__image img,
.abp--course-card__image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abp--course-card__title {
  margin: 0 0 var(--abp--course-card--title-spacing) 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 600;
  line-height: 1.3;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.abp--course-card__title a {
  text-decoration: none;
  color: inherit;
}
.abp--course-card__excerpt {
  color: var(--abp--global--color--primary);
  opacity: 0.5;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}

/* =========================================================================
   3. Buttons (Mockup/src/Buttons/style.scss)
   ========================================================================= */

:root {
  --abp--button--item-gap: var(--abp--global--spacing-sm);
  --abp--button--link-padding: var(--abp--global--spacing-3xl) var(--abp--global--spacing-md) var(--abp--global--spacing-md) var(--abp--global--spacing-md);
  --abp--button--icon-offset: var(--abp--global--spacing-md);
}

.wp-block-buttons {
  display: flex;
}
.wp-block-buttons .wp-block-button:not(:first-child) {
  margin-right: var(--abp--button--item-gap);
  margin-top: var(--abp--button--item-gap);
}
.wp-block-buttons .wp-block-button .wp-block-button__link {
  display: block;
  position: relative;
  background-color: white;
  border-radius: var(--abp--global--border-radius);
  border: 1px solid var(--abp--global--border-color);
  padding: var(--abp--button--link-padding);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--abp--global--color--primary);
  font-size: calc(var(--wp--preset--font-size--normal) * 0.8);
  font-weight: 600;
}
.wp-block-buttons .wp-block-button .wp-block-button__link:before {
  content: "↗︎";
  display: block;
  position: absolute;
  right: var(--abp--button--icon-offset);
  top: var(--abp--button--icon-offset);
  font-size: calc(var(--wp--preset--font-size--normal) * 1.25);
  line-height: 1;
}
.wp-block-buttons .wp-block-button.wp-block-button__width-100 {
  width: 100%;
}
.wp-block-buttons .wp-block-button.wp-block-button__width-75 {
  width: 75%;
}
.wp-block-buttons .wp-block-button.wp-block-button__width-50 {
  width: 50%;
}
.wp-block-buttons .wp-block-button.wp-block-button__width-25 {
  width: 25%;
}

/* =========================================================================
   4. Grid-x-List (Mockup/src/Kurse/GridxList/style.scss) – Sicht 12
   ========================================================================= */

:root {
  --abp--course-gridxlist--min-card-width: 280px;
  --abp--course-gridxlist--gap: var(--abp--global--spacing-md);
  --abp--course-gridxlist--button-height: calc(var(--abp--global--spacing) * 2.5);
  --abp--course-gridxlist--button-padding-inline: calc(var(--abp--global--spacing) * 0.8);
  --abp--course-gridxlist--list-image-width: calc(var(--abp--global--spacing) * 10);
  --abp--course-gridxlist--list-cta-padding: var(--abp--global--spacing-md) var(--abp--global--spacing-3xl) var(--abp--global--spacing-md) var(--abp--global--spacing-lg);
}

.abp--course-gridxlist {
  position: relative;
  padding: var(--abp--global--spacing-md);
}
.abp--course-gridxlist__toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: var(--abp--global--spacing-md);
}
.abp--course-gridxlist__view-toggle {
  display: flex;
  gap: var(--abp--global--spacing-xs);
}
.abp--course-gridxlist__button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 6.5rem;
  height: var(--abp--course-gridxlist--button-height);
  padding: 0 var(--abp--course-gridxlist--button-padding-inline);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
  font-weight: 600;
  cursor: pointer;
  opacity: 0.5;
}
.abp--course-gridxlist__button[aria-pressed=true] {
  background-color: #fff;
  opacity: 1;
}
.abp--course-gridxlist__track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--abp--course-gridxlist--min-card-width), 1fr));
  gap: var(--abp--course-gridxlist--gap);
  align-items: start;
}
.abp--course-gridxlist[data-view=list] .abp--course-gridxlist__track {
  grid-template-columns: 1fr;
}
.abp--course-gridxlist[data-view=list] .abp--course-card {
  max-width: none;
  width: 100%;
}
.abp--course-gridxlist[data-view=list] .abp--course-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--abp--course-gridxlist--gap);
  align-items: center;
}
.abp--course-gridxlist[data-view=list] .abp--course-card__content {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-areas: "image title" "image excerpt";
  gap: 0 var(--abp--global--spacing-md);
  align-items: center;
  margin: 0;
  padding: var(--abp--course-card--content-padding);
}
.abp--course-gridxlist[data-view=list] .abp--course-card__image {
  grid-area: image;
  align-self: center;
  margin: 0;
  width: var(--abp--course-gridxlist--list-image-width);
  aspect-ratio: 16/10;
}
.abp--course-gridxlist[data-view=list] .abp--course-card__title {
  grid-area: title;
  align-self: end;
  margin: 0 0 var(--abp--global--spacing-tight) 0;
}
.abp--course-gridxlist[data-view=list] .abp--course-card__excerpt {
  grid-area: excerpt;
  align-self: start;
  margin: 0;
}
.abp--course-gridxlist[data-view=list] .wp-block-buttons {
  margin: 0;
  align-self: stretch;
}
.abp--course-gridxlist[data-view=list] .wp-block-button {
  height: 100%;
}
.abp--course-gridxlist[data-view=list] .wp-block-buttons .wp-block-button__link {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: calc(var(--abp--global--spacing) * 11);
  padding: var(--abp--course-gridxlist--list-cta-padding);
  background-color: var(--abp--global--color--primary);
  color: #fff;
}

.abp--course-gridxlist__overlay {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
}
.abp--course-gridxlist__overlay .abp--course-card {
  width: 100%;
  max-width: none;
}
.abp--course-gridxlist__overlay .abp--course-card__content {
  box-shadow: var(--abp--global--shadow-hover);
}

@media (hover: hover) {
  .abp--course-gridxlist:not([data-view=list]) .abp--course-card__excerpt,
  .abp--course-gridxlist:not([data-view=list]) .abp--course-card .wp-block-buttons {
    display: none;
  }
}
@media (max-width: 900px) {
  .abp--course-gridxlist__toolbar {
    justify-content: center;
  }
  .abp--course-gridxlist[data-view=list] .abp--course-card__inner {
    grid-template-columns: 1fr;
  }
  .abp--course-gridxlist[data-view=list] .abp--course-card__content {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "title" "excerpt";
  }
  .abp--course-gridxlist[data-view=list] .abp--course-card__image {
    margin: 0 0 var(--abp--global--spacing-2xl) 0;
  }
  .abp--course-gridxlist[data-view=list] .abp--course-card__title {
    align-self: start;
  }
  .abp--course-gridxlist[data-view=list] .wp-block-buttons {
    margin-top: var(--abp--global--spacing-md);
  }
}
@media (max-width: 768px) {
  .abp--course-gridxlist:not([data-view=list]) .abp--course-card__excerpt {
    display: block;
  }
  .abp--course-gridxlist .wp-block-buttons {
    display: none;
  }
}
@media (max-width: 600px) {
  .abp--course-gridxlist:not([data-view=list]) .abp--course-gridxlist__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================================
   5. Slider (Mockup/src/Kurse/Slider/style.scss) – Sichten 232 / 234
   ========================================================================= */

:root {
  --abp--course-slider--card-width: 280px;
  --abp--course-slider--gap: var(--abp--global--spacing-md);
  --abp--course-slider--dot-border: rgba(46, 104, 214, 0.65);
  --abp--course-slider--footer-margin-top: var(--abp--global--spacing-xl);
  --abp--course-slider--dots-gap: var(--abp--global--spacing-xs);
  --abp--course-slider--controls-gap: var(--abp--global--spacing-sm);
  --abp--course-slider--dot-width: calc(var(--abp--global--spacing) * 2);
  --abp--course-slider--dot-height: calc(var(--abp--global--spacing) * 0.5);
  --abp--course-slider--button-size: calc(var(--abp--global--spacing) * 3);
}

.abp--course-slider {
  position: relative;
  overflow: visible;
  -webkit-user-select: none;
  user-select: none;
}
.abp--course-slider img,
.abp--course-slider a,
.abp--course-slider h1,
.abp--course-slider h2,
.abp--course-slider h3,
.abp--course-slider h4,
.abp--course-slider h5,
.abp--course-slider h6,
.abp--course-slider p,
.abp--course-slider span,
.abp--course-slider button {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
.abp--course-slider.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}
.abp--course-slider.is-dragging .abp--course-slider__viewport {
  cursor: grabbing;
  scroll-snap-type: none;
}
.abp--course-slider__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  cursor: grab;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: var(--abp--global--spacing-md);
}
.abp--course-slider__viewport::-webkit-scrollbar {
  display: none;
}
@media (hover: hover) {
  .abp--course-slider__viewport .abp--course-card__excerpt,
  .abp--course-slider__viewport .abp--course-card .wp-block-buttons {
    display: none;
  }
}
@media (max-width: 768px) {
  .abp--course-slider__viewport .abp--course-card__excerpt {
    display: block;
  }
  .abp--course-slider__viewport .wp-block-buttons {
    display: none;
  }
}
@media (hover: none), (pointer: coarse) {
  .abp--course-slider__viewport {
    cursor: auto;
    touch-action: manipulation;
    scroll-snap-type: x proximity;
  }
}
.abp--course-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--abp--course-slider--card-width);
  gap: var(--abp--course-slider--gap);
  align-items: start;
  overflow: visible;
}
.abp--course-slider__track::before,
.abp--course-slider__track::after {
  content: "";
  display: block;
  width: var(--abp--global--spacing-md);
  height: 1px;
  flex: 0 0 auto;
}
.abp--course-slider__footer {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--abp--course-slider--gap);
  margin-top: var(--abp--course-slider--footer-margin-top);
  padding: 0 var(--abp--global--spacing-md);
}
.abp--course-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--abp--course-slider--dots-gap);
}
.abp--course-slider__dot {
  width: var(--abp--course-slider--dot-width);
  height: var(--abp--course-slider--dot-height);
  padding: 0;
  border: 1px solid var(--abp--course-slider--dot-border);
  border-radius: var(--abp--global--border-radius);
  background-color: transparent;
  cursor: pointer;
}
.abp--course-slider__dot[aria-current=true] {
  border-color: var(--abp--global--color--primary);
  background-color: var(--abp--global--color--primary);
}
.abp--course-slider__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--abp--course-slider--controls-gap);
}
@media (max-width: 900px) {
  .abp--course-slider__controls {
    justify-content: space-between !important;
  }
}
.abp--course-slider__button {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: var(--abp--global--spacing-4xl);
  height: var(--abp--global--spacing-4xl);
  padding: 0;
  border: 1px solid rgba(229, 229, 229, 0.9);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  color: var(--abp--global--color--primary);
  cursor: pointer;
}
@media (max-width: 900px) {
  .abp--course-slider__button {
    width: 25%;
    margin-top: var(--abp--global--spacing-lg);
  }
}
.abp--course-slider__button[data-slider-prev] {
  transform: rotate(180deg);
}
.abp--course-slider__button:disabled {
  opacity: 0.45;
  cursor: default;
}
/* Gefilterte Karten (Präsenz/Webinar-Pills, Sicht 234) */
.abp--course-card.abp--is-filtered {
  display: none !important;
}
/* Filter-Pills über dem Slider */
.abp--slider-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abp--global--spacing-sm);
  margin: var(--abp--global--spacing-lg) 0 var(--abp--global--spacing-md);
}
.abp--slider-filter__pill {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--abp--global--color--primary);
  border-radius: 999px;
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 600;
  line-height: 1;
  padding: 0.75em 1.6em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.abp--slider-filter__pill:hover:not(:disabled),
.abp--slider-filter__pill.is-active {
  background-color: var(--abp--global--color--primary);
  color: #fff;
}
.abp--slider-filter__pill:disabled {
  opacity: 0.45;
  cursor: default;
}
.abp--course-slider__overlay {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
}
.abp--course-slider__overlay .abp--course-card {
  width: 100%;
  max-width: none;
}
.abp--course-slider__overlay .abp--course-card__content {
  box-shadow: var(--abp--global--shadow-hover);
}
.abp--course-slider .abp--course-card {
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  :root {
    --abp--course-slider--card-width: min(320px, 72vw);
  }
  .abp--course-slider__footer {
    grid-template-columns: 1fr;
  }
  .abp--course-slider__dots,
  .abp--course-slider__controls {
    justify-content: center;
  }
}

/* =========================================================================
   6. Erweiterungen für die dynamischen webbasys-Sichten
   ========================================================================= */

/* --- 6.1 Fallback, falls das Theme kein .visually-hidden liefert --------- */

.visually-hidden {
  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;
}

/* --- 6.2 Karten-Zusätze: Meta-Zeile, Kursnummer, Datums-Badge ------------
   Die Meta-Zeile (Datum/Ort) ersetzt in den Sichten den statischen
   Mockup-Excerpt. Sie nutzt bewusst NICHT die Klasse __excerpt, damit sie
   im Grid/Slider immer sichtbar bleibt (Hover blendet nur __excerpt aus). */

.abp--course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abp--global--spacing-tight) var(--abp--global--spacing-sm);
  margin: 0;
  color: var(--abp--global--color--primary);
  opacity: 0.65;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.abp--course-card__kicker {
  margin: 0 0 var(--abp--global--spacing-tight) 0;
  color: var(--abp--global--color--primary);
  opacity: 0.45;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.abp--course-card__date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--abp--global--spacing) * 4);
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-sm);
  margin: 0 0 var(--abp--course-card--title-spacing) 0;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--global--color--primary);
  color: #fff;
  text-decoration: none;
}
.abp--course-card__date-badge-day {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.1;
}
.abp--course-card__date-badge-month {
  font-size: var(--wp--preset--font-size--small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Karten ohne Kursbild: In der Listenansicht entfällt das Bild-Raster des
   Mockups, damit die 160px-Bildspalte nicht leer stehen bleibt. Karten MIT
   Bild (Modifier .abp--course-card--bild aus Sicht 12) nutzen das Raster. */
.abp--course-gridxlist[data-view=list] .abp--course-card__content {
  display: block;
}
.abp--course-gridxlist[data-view=list] .abp--course-card--bild .abp--course-card__content {
  display: grid;
}
/* Kursbilder in Übersicht (Sicht 12, Kachelansicht) und Highlight-Slider
   (Sicht 234) einheitlich beschneiden, damit die Kartenhöhen ruhig bleiben */
.abp--course-gridxlist .abp--course-card__image,
.abp--course-slider .abp--course-card__image {
  aspect-ratio: 16 / 10;
}

/* --- 6.3 Toolbar Sicht 12 --------------------------------------------------
   Sortierung und Buchbar-Filter wurden entfernt; die Toolbar enthält nur noch
   den Ansichts-Umschalter und nutzt die zentrierte Mockup-Ausrichtung. */

.abp--course-gridxlist__toolbar {
  flex-wrap: wrap;
  gap: var(--abp--global--spacing-sm);
}

/* Umschalt-Buttons: Text sauber vertikal zentrieren (die feste Höhe des
   Mockups ließ die Beschriftung unten aus dem Button laufen) */
.abp--course-gridxlist__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: var(--abp--course-gridxlist--button-height);
  padding-top: var(--abp--global--spacing-tight);
  padding-bottom: var(--abp--global--spacing-tight);
  line-height: 1.2;
}

/* --- 6.4 Zeilen-Liste (kompakte Kartenzeile) – Sichten 430 und 59 --------
   Entspricht der Listen-Variante des GridxList-Mockups, aber statisch
   (ohne Umschalter) und ohne Bildspalte. */

.abp--course-rowlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abp--course-gridxlist--gap);
}
.abp--course-rowlist .abp--course-card {
  max-width: none;
  width: 100%;
}
.abp--course-rowlist .abp--course-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--abp--course-gridxlist--gap);
  align-items: stretch;
}
.abp--course-rowlist .abp--course-card__content {
  margin: 0;
}
.abp--course-rowlist .abp--course-card__title {
  margin: 0 0 var(--abp--global--spacing-tight) 0;
}
.abp--course-rowlist .wp-block-buttons {
  margin: 0;
  align-self: stretch;
}
.abp--course-rowlist .wp-block-button {
  height: 100%;
}
.abp--course-rowlist .wp-block-buttons .wp-block-button__link {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: calc(var(--abp--global--spacing) * 11);
  padding: var(--abp--course-gridxlist--list-cta-padding);
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
@media (max-width: 900px) {
  .abp--course-rowlist .abp--course-card__inner {
    grid-template-columns: 1fr;
  }
  .abp--course-rowlist .wp-block-buttons .wp-block-button__link {
    align-items: center;
    padding: var(--abp--global--spacing-md) var(--abp--global--spacing-3xl) var(--abp--global--spacing-md) var(--abp--global--spacing-lg);
  }
}

/* --- 6.5 Kursdetails – Sicht 13 ------------------------------------------ */

.abp--course-detail__title {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--abp--global--spacing-2xl) 0;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.abp--course-detail h2 {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}
.abp--course-detail__facts {
  display: grid;
  gap: var(--abp--global--spacing-xs);
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  padding: var(--abp--course-card--content-padding);
  margin: 0 0 var(--abp--global--spacing-2xl) 0;
}
.abp--course-detail__facts p {
  margin: 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.5;
}
.abp--course-detail__text {
  color: var(--abp--global--color--primary);
  line-height: 1.6;
}
.abp--course-detail__actions .wp-block-buttons {
  display: block;
}
.abp--course-detail__actions .wp-block-button:not(:first-child) {
  margin: 0;
}
.abp--course-detail__actions > * + * {
  margin-top: var(--abp--global--spacing-sm);
}

/* --- 6.6 Warenkorb – Sicht 59 --------------------------------------------- */

.abp--course-cart__price {
  margin: var(--abp--global--spacing-sm) 0 0 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
}
.abp--course-cart__price small {
  font-size: inherit;
}
.abp--course-cart__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.abp--course-cart__remove {
  display: grid;
  place-items: center;
  width: var(--abp--global--spacing-4xl);
  height: var(--abp--global--spacing-4xl);
  border: 1px solid rgba(229, 229, 229, 0.9);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  text-decoration: none;
}
@media (max-width: 900px) {
  .abp--course-cart__actions {
    justify-content: flex-start;
  }
}
.abp--course-cart__footer {
  margin-top: var(--abp--global--spacing-2xl);
}
.abp--course-cart__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--abp--global--spacing-sm);
}
.abp--course-cart__buttons .wp-block-button:not(:first-child) {
  margin: 0;
}
.abp--course-cart__buttons .abp--push-end {
  margin-left: auto;
}
@media (max-width: 600px) {
  .abp--course-cart__buttons .wp-block-button {
    width: 100%;
  }
  .abp--course-cart__buttons .abp--push-end {
    margin-left: 0;
  }
}

/* --- 6.7 Zustands-Modifier für wp-block-button__link ----------------------
   (Warenkorb-/Anmelde-Buttons der Detailseite und des Warenkorbs) */

.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-primary {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-danger {
  background-color: #fdecec;
  border-color: #f5c2c7;
  color: #842029;
}
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-warning {
  background-color: #fff8e1;
  border-color: #ffe08a;
  color: #664d03;
}
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-disabled:before {
  content: "";
}

/* --- 6.8 Pagination (Sicht 12, Bootstrap-Markup bleibt erhalten) ---------- */

.kw-paginationleiste .page-link {
  color: var(--abp--global--color--primary);
}
.kw-paginationleiste .page-item.active .page-link {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
}

/* --- 6.9 Pfeil-Freiraum für wp-block-button__link -------------------------
   Das ↗-Icon sitzt absolut in der rechten oberen Ecke. Damit Beschriftungen
   (rechtsbündig, zentriert oder einzeilig-kompakt) nie unter das Icon laufen,
   wird rechts immer ein Korridor in Icon-Breite freigehalten. */

:root {
  --abp--button--icon-size: calc(var(--wp--preset--font-size--normal) * 1.25);
  --abp--button--icon-clearance: calc(var(--abp--button--icon-offset) + var(--abp--button--icon-size) + var(--abp--global--spacing-xs));
}

.wp-block-buttons .wp-block-button .wp-block-button__link {
  padding-right: max(var(--abp--global--spacing-md), var(--abp--button--icon-clearance));
}
.abp--course-gridxlist[data-view=list] .wp-block-buttons .wp-block-button__link,
.abp--course-rowlist .wp-block-buttons .wp-block-button__link {
  padding-right: max(var(--abp--global--spacing-3xl), var(--abp--button--icon-clearance));
}

/* Kompakte Button-Variante (einzeilig, Pfeil vertikal zentriert) –
   z. B. für das Warenkorb-Dropdown (Sicht 146) */
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-compact {
  padding: var(--abp--global--spacing-sm) max(var(--abp--global--spacing-md), var(--abp--button--icon-clearance)) var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
}
.wp-block-buttons .wp-block-button .wp-block-button__link.abp--is-compact:before {
  top: 50%;
  transform: translateY(-50%);
}

/* Detail-Sidebar: Labels linksbündig wie im Mockup
   (der Altbestand setzt dort Bootstrap "text-end") */
.abp--course-detail__actions .wp-block-buttons .wp-block-button__link {
  text-align: left;
}

/* --- 6.10 Warenkorb-Menü / Dropdown im Header – Sicht 146 ------------------
   Bootstrap-Dropdown-Mechanik bleibt erhalten, nur die Optik wird auf die
   Mockup-Kartensprache gebracht. */

.abp--cart-menu {
  position: relative;
  font-family: var(--abp--global--font-family);
}
.abp--cart-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--abp--global--spacing-xs);
  color: inherit;
  text-decoration: none;
}
.abp--cart-menu__toggle::after {
  display: none; /* Bootstrap-Caret ausblenden */
}
.abp--cart-menu__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  background-color: var(--abp--global--color--primary);
  color: #fff;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1;
}
/* Panel fest rechtsbündig unter dem Warenkorb-Icon verankern.
   Die ID im Selektor plus !important sind nötig, um sowohl Theme-Regeln
   auf #kw-wk-menu-content als auch Popper-Inline-Styles zu überstimmen. */
#kw-wk-menu-content.abp--cart-menu__panel,
.abp--cart-menu .dropdown-menu {
  position: absolute !important;
  top: calc(100% + var(--abp--global--spacing-xs)) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  float: none !important;
  z-index: 1050;
  width: auto !important;
  min-width: min(22rem, calc(100vw - 2 * var(--abp--global--spacing-md))) !important;
  max-width: calc(100vw - 2 * var(--abp--global--spacing-md));
  padding: var(--abp--course-card--content-padding) !important;
  border: 1px solid var(--abp--card--border-color) !important;
  border-radius: var(--abp--global--border-radius) !important;
  background-color: var(--abp--card--background-color) !important;
  box-shadow: var(--abp--global--shadow-hover) !important;
}
/* Caret-/Dreieck-Dekorationen des Themes am Panel entfernen */
#kw-wk-menu-content.abp--cart-menu__panel::before,
#kw-wk-menu-content.abp--cart-menu__panel::after,
.abp--cart-menu .dropdown-menu::before,
.abp--cart-menu .dropdown-menu::after {
  display: none !important;
}
.abp--cart-menu__heading {
  margin: 0 0 var(--abp--global--spacing-sm) 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 600;
  line-height: 1.3;
}
.abp--cart-menu__heading b {
  font-weight: 600;
}
.abp--cart-menu__list {
  display: block;
  max-height: min(50vh, 20rem);
  overflow-y: auto;
  margin: 0 0 var(--abp--global--spacing-md) 0;
  border: 0;
  border-radius: 0;
}
.abp--cart-menu__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abp--global--spacing-sm);
  padding: var(--abp--global--spacing-sm) 0;
  border: 0;
  border-bottom: 1px solid var(--abp--global--border-color);
  background-color: transparent;
}
.abp--cart-menu__item:last-child {
  border-bottom: 0;
}
.abp--cart-menu__item-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.abp--cart-menu__remove {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(var(--abp--global--spacing) * 2.2);
  height: calc(var(--abp--global--spacing) * 2.2);
  border: 1px solid rgba(229, 229, 229, 0.9);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  color: #842029;
  text-decoration: none;
}
.abp--cart-menu__remove:hover,
.abp--cart-menu__remove:focus-visible {
  background-color: #fdecec;
  border-color: #f5c2c7;
}
.abp--cart-menu__cta {
  margin: 0;
}
.abp--cart-menu__cta .wp-block-button__link {
  text-align: center;
}
/* Weiße Schrift des "zum Warenkorb"-CTA gegen Theme-Linkfarben durchsetzen,
   die per ID-Selektor auf #kw-wk-menu-content greifen */
#kw-wk-menu-content.abp--cart-menu__panel .wp-block-button__link.abp--is-primary,
#kw-wk-menu-content.abp--cart-menu__panel .wp-block-button__link.abp--is-primary:hover,
#kw-wk-menu-content.abp--cart-menu__panel .wp-block-button__link.abp--is-primary:focus,
.abp--cart-menu__cta .wp-block-button__link.abp--is-primary,
.abp--cart-menu__cta .wp-block-button__link.abp--is-primary:hover,
.abp--cart-menu__cta .wp-block-button__link.abp--is-primary:focus {
  color: #fff !important;
}

/* --- 6.11 Dozenten – Sicht 178 (eingebettet in die Kursdetails) ------------ */

.abp--doz-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--abp--course-gridxlist--gap);
  align-items: start;
  margin-top: var(--abp--global--spacing-md);
}
.abp--doz-card {
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  padding: var(--abp--course-card--content-padding);
}
.abp--doz-card__photo {
  display: block;
  margin: 0 0 var(--abp--global--spacing-md) 0;
  padding: 0;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.abp--doz-card__photo a,
.abp--doz-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abp--doz-card__name {
  margin: 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 600;
  line-height: 1.3;
}
.abp--doz-card__name a {
  color: inherit;
  text-decoration: none;
}
.abp--doz-card .kontakt {
  margin: var(--abp--global--spacing-sm) 0 0 0;
  color: var(--abp--global--color--primary);
  opacity: 0.65;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.abp--doz-card .kontakt a {
  color: inherit;
}

/* --- 6.12 Dozenten-Kursliste – Sicht 223 ----------------------------------- */

.abp--doz-courses__title {
  margin: 0 0 var(--abp--global--spacing-md) 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
}
.abp--doz-courses__title strong {
  font-weight: inherit;
}

/* --- 6.13 Anmeldung & Benutzerprofil – Sichten 504 und 440 -----------------
   Scope-Klasse .abp--anm liegt auf dem Formular bzw. den Kopf-/Fußbereichen
   der beiden Sichten, .abp--anm-title auf deren H1-Überschriften. Ziel:
   dieselbe Kartensprache wie die Kurslisten (weiße Karten, #001538,
   runde Ecken, dezente Schatten). */

.abp--anm,
.abp--anm-title {
  font-family: var(--abp--global--font-family);
  color: var(--abp--global--color--primary);
}

h1.abp--anm-title {
  margin: 0 0 var(--abp--global--spacing-2xl) 0;
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
}

.abp--anm h2 {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
}
.abp--anm h2 a {
  color: inherit;
}

/* Bereichsüberschriften (Kontakt, Presseausweis, ...) als Abschnitts-Balken:
   Offwhite-Fläche mit Navy-Akzent links – die Felder darunter lesen sich
   dadurch klar als Teil des Bereichs. Die .h1-Überschriften der Login-/
   Registrierungsspalten (Sichten 482/285) bleiben außen vor. */
.abp--anm h2:not(.h1) {
  margin-top: var(--abp--global--spacing-2xl) !important;
  margin-bottom: var(--abp--global--spacing-md) !important;
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
  background-color: var(--abp--global--color--offwhite);
  border: 1px solid var(--abp--global--border-color);
  border-left: 4px solid var(--abp--global--color--primary);
  border-radius: calc(var(--abp--global--border-radius) * 0.6);
}

/* Login/Registrierung (Sicht 482): die beiden Bereiche als Karten im Stil
   der Kurskarten; ihre Überschriften bekommen den gleichen Abschnitts-
   Balken wie die Bereichsüberschriften der Anmeldeformulare. */
.abp--login-card {
  height: 100%;
  padding: var(--abp--global--spacing-xl);
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
}
.abp--login-card h1,
.abp--login-card .h1 {
  margin: 0 0 var(--abp--global--spacing-lg) !important;
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
  background-color: var(--abp--global--color--offwhite);
  border: 1px solid var(--abp--global--border-color);
  border-left: 4px solid var(--abp--global--color--primary);
  border-radius: calc(var(--abp--global--border-radius) * 0.6);
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .abp--login-card {
    height: auto;
    margin-bottom: var(--abp--global--spacing-lg);
  }
}

/* Konto-Schnellzugriff nach dem Login (Sichten 482/285): die Bootstrap-
   list-group als Karten-Zeilen im Stil der übrigen Karten - weiße Fläche,
   Navy-Akzent links, Hover-Schatten wie in der Dozentenübersicht. */
.kw-login-actions-list {
  display: grid;
  gap: var(--abp--global--spacing-sm);
  max-width: 480px;
  margin: var(--abp--global--spacing-xl) auto 0;
  padding: 0;
  list-style: none;
}
.kw-login-actions-list .list-group-item {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.kw-login-actions-list .list-group-item a {
  display: block;
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-left: 4px solid var(--abp--global--color--primary);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  color: var(--abp--global--color--primary);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.kw-login-actions-list .list-group-item a:hover,
.kw-login-actions-list .list-group-item a:focus-visible {
  background-color: var(--abp--global--color--offwhite);
  box-shadow: var(--abp--global--shadow-hover);
}

/* Die früheren <hr>-Trenner zwischen den Bereichen sind durch die
   Abschnitts-Balken überflüssig. */
form.abp--anm hr,
.abp--anm form hr {
  display: none;
}

/* Seitenkopf mit Titel und Zurück-Button (Sicht 440) */
.abp--page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abp--global--spacing-sm);
  margin-bottom: var(--abp--global--spacing-lg);
}
.abp--page-head .abp--anm-title {
  margin: 0;
}

/* Zahlplan-/Preisauswahl (Sicht 504): Select, Info-Icon und Betrag in einer
   Zeile. Das Info-Icon (a.anm-preisinfo) fügt anmeldung_helper.js direkt
   hinter dem Select ein. */
.abp--anm .abp--zahlplan-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--abp--global--spacing-sm);
}
.abp--anm .abp--zahlplan-zeile select.form-control-zahlplan {
  flex: 0 1 auto;
  width: auto;
  min-width: 14rem;
  max-width: 100%;
}
.abp--anm .abp--zahlplan-zeile .anm-preisinfo {
  display: inline-flex;
  align-items: center;
  margin-left: 0 !important; /* Inline-Abstand aus anmeldung_helper.js neutralisieren */
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1;
  text-decoration: none;
}
.abp--anm .abp--zahlplan-zeile .anm-preisinfo:hover,
.abp--anm .abp--zahlplan-zeile .anm-preisinfo:focus-visible {
  color: #16294d;
}
.abp--anm .abp--zahlplan-preis {
  color: var(--abp--global--color--primary);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .abp--anm .abp--zahlplan-zeile select.form-control-zahlplan {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* AGB-/Datenschutz-Checkboxen (Sicht 504): Links in der Kartensprache */
.abp--anm .checkbox {
  color: var(--abp--global--color--primary);
}
.abp--anm .checkbox a {
  color: var(--abp--global--color--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.abp--anm .checkbox a:hover,
.abp--anm .checkbox a:focus-visible {
  color: #16294d;
}

/* Warenkorb (Sicht 59): Info-Icon neben den J-/P-Preisen, wenn Zahlpläne
   hinterlegt sind */
.abp--course-cart__price .anm-preisinfo {
  display: inline-block;
  margin-left: var(--abp--global--spacing-tight);
  color: var(--abp--global--color--primary);
  line-height: 1;
  text-decoration: none;
}
.abp--course-cart__price .anm-preisinfo:hover,
.abp--course-cart__price .anm-preisinfo:focus-visible {
  color: #16294d;
}

/* Hinweisbox "Bitte Benutzerprofil vervollständigen" (Sichten 504, 482, 285):
   Offwhite-Karte mit Navy-Akzent in der Kartensprache statt Bootstrap-Warngelb */
.abp--profil-hinweis {
  margin: 0 0 var(--abp--global--spacing-lg);
  padding: var(--abp--course-card--content-padding);
  border: 1px solid var(--abp--global--border-color);
  border-left: 4px solid var(--abp--global--color--primary);
  border-radius: var(--abp--global--border-radius);
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
  font-family: var(--abp--global--font-family);
}
.abp--profil-hinweis p {
  margin: 0 0 var(--abp--global--spacing-sm);
  color: inherit;
  line-height: 1.5;
}
.abp--profil-hinweis p:last-child {
  margin-bottom: 0;
}
.abp--profil-hinweis .fa-exclamation-circle {
  margin-right: var(--abp--global--spacing-tight);
}

/* Scope-unabhängiger Navy-Button: für Buttons, die außerhalb von .hauptseite
   liegen oder deren Farbe das Theme mit höherer Priorität überstimmt
   ("Benutzerprofil vervollständigen", "ausloggen" auf den Login-Seiten). */
.btn.abp--btn-primary {
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-lg);
  border: 1px solid var(--abp--global--color--primary) !important;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--global--color--primary) !important;
  color: #fff !important;
  font-weight: 600;
}
.btn.abp--btn-primary:hover,
.btn.abp--btn-primary:focus {
  background-color: #16294d !important;
  border-color: #16294d !important;
  color: #fff !important;
}

.abp--anm hr {
  margin: var(--abp--global--spacing-2xl) 0;
  border: 0;
  border-top: 1px solid var(--abp--global--border-color);
}

.abp--anm label {
  color: var(--abp--global--color--primary);
  font-weight: 400;
}
.abp--anm .kw-anmeldung-label label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.4;
}
.abp--anm input[type=radio],
.abp--anm input[type=checkbox] {
  accent-color: var(--abp--global--color--primary);
}

.abp--anm .form-control {
  height: auto;
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-sm);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  color: var(--abp--global--color--primary);
  box-shadow: none;
}
.abp--anm .form-control:focus {
  border-color: var(--abp--global--color--primary);
  box-shadow: 0 0 0 3px rgba(0, 21, 56, 0.08);
  outline: 0;
}
.abp--anm .form-control[readonly],
.abp--anm .form-control[disabled] {
  background-color: var(--abp--global--color--offwhite);
  opacity: 0.75;
}
.abp--anm .form-control::placeholder {
  color: var(--abp--global--color--primary);
  opacity: 0.35;
}

.abp--anm .btn {
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-lg);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.abp--anm .btn:hover,
.abp--anm .btn:focus {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.abp--anm .btn-theme,
.abp--anm .btn-mainColor,
.abp--anm .btn-success {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.abp--anm .btn-theme:hover,
.abp--anm .btn-theme:focus,
.abp--anm .btn-mainColor:hover,
.abp--anm .btn-mainColor:focus,
.abp--anm .btn-success:hover,
.abp--anm .btn-success:focus {
  background-color: #16294d;
  border-color: #16294d;
  color: #fff;
}
.abp--anm .btn-danger {
  background-color: #fdecec;
  border-color: #f5c2c7;
  color: #842029;
}
.abp--anm .btn-danger:hover,
.abp--anm .btn-danger:focus {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}
.abp--anm .btn[disabled],
.abp--anm .btn.disabled {
  opacity: 0.55;
  box-shadow: none;
}

.abp--anm .alert {
  border: 1px solid var(--abp--global--border-color);
  border-radius: var(--abp--global--border-radius);
}
.abp--anm .alert-info,
.abp--anm .alert-default {
  background-color: var(--abp--global--color--offwhite);
  border-color: var(--abp--global--border-color);
  color: var(--abp--global--color--primary);
}
.abp--anm .alert-warning {
  background-color: #fff8e1;
  border-color: #ffe08a;
  color: #664d03;
}
.abp--anm .alert-danger {
  background-color: #fdecec;
  border-color: #f5c2c7;
  color: #842029;
}
.abp--anm .alert-success {
  background-color: #e7f5ec;
  border-color: #a3cfbb;
  color: #0a3622;
}

/* Editor-Box "weitere Teilnehmende" (Sicht 504) als Karte */
.abp--anm .box {
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  box-shadow: var(--abp--global--shadow);
  padding: var(--abp--course-card--content-padding);
}

/* Teilnehmer-Zeile unter einem Kurs (Sicht 504) */
.abp--anm .tn-list-item {
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
}

.abp--anm .text-info {
  color: var(--abp--global--color--primary) !important;
  opacity: 0.6;
}

/* =========================================================================
   7. Login, Profil, Anmeldestrecke, Merkliste & Dozenten
      (Sichten 108, 218, 235, 236, 241, 285, 482, 483, 503, 505, 506,
       508, 509) – plus Basis-Feinschliff für alle webbasys-Seiten
   ========================================================================= */

/* --- 7.1 Basis für alle webbasys-Seiten (Wrapper .hauptseite) --------------
   Überträgt die Mockup-Grundsprache (Sora, #001538, Kartenradius) auf
   Standard-Bootstrap-Bausteine, die in den Sichten überall vorkommen.
   Die Kurskarten/Buttons des Mockups (wp-block-*) sind davon unberührt. */

.hauptseite {
  font-family: var(--abp--global--font-family);
  color: var(--abp--global--color--primary);
}
.hauptseite h1,
.hauptseite .h1 {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  line-height: 1.2;
}
.hauptseite h2 {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
}
.hauptseite h3,
.hauptseite h4 {
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 600;
  line-height: 1.3;
}
.hauptseite hr {
  margin: var(--abp--global--spacing-2xl) 0;
  border: 0;
  border-top: 1px solid var(--abp--global--border-color);
}
.hauptseite img {
  max-width: 100%;
  height: auto;
}
.hauptseite .text-info {
  color: var(--abp--global--color--primary) !important;
  opacity: 0.6;
}
.hauptseite input[type=radio],
.hauptseite input[type=checkbox] {
  accent-color: var(--abp--global--color--primary);
}

.hauptseite .form-control {
  height: auto;
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-sm);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  color: var(--abp--global--color--primary);
  box-shadow: none;
}
.hauptseite .form-control:focus {
  border-color: var(--abp--global--color--primary);
  box-shadow: 0 0 0 3px rgba(0, 21, 56, 0.08);
  outline: 0;
}
.hauptseite .form-control[readonly],
.hauptseite .form-control[disabled] {
  background-color: var(--abp--global--color--offwhite);
  opacity: 0.75;
}
.hauptseite .form-control::placeholder {
  color: var(--abp--global--color--primary);
  opacity: 0.35;
}

.hauptseite .btn {
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-lg);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.hauptseite .btn-sm {
  padding: var(--abp--global--spacing-tight) var(--abp--global--spacing-sm);
}
.hauptseite .btn:hover,
.hauptseite .btn:focus {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.hauptseite .btn-theme,
.hauptseite .btn-mainColor,
.hauptseite .btn-success {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.hauptseite .btn-theme:hover,
.hauptseite .btn-theme:focus,
.hauptseite .btn-mainColor:hover,
.hauptseite .btn-mainColor:focus,
.hauptseite .btn-success:hover,
.hauptseite .btn-success:focus {
  background-color: #16294d;
  border-color: #16294d;
  color: #fff;
}
.hauptseite .btn-outline-main {
  background-color: #fff;
  border-color: var(--abp--global--border-color);
  color: var(--abp--global--color--primary);
}
.hauptseite .btn-outline-main:hover,
.hauptseite .btn-outline-main:focus {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.hauptseite .btn-danger {
  background-color: #fdecec;
  border-color: #f5c2c7;
  color: #842029;
}
.hauptseite .btn-danger:hover,
.hauptseite .btn-danger:focus {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}
.hauptseite .btn[disabled],
.hauptseite .btn.disabled {
  opacity: 0.55;
  box-shadow: none;
}

.hauptseite .alert {
  border: 1px solid var(--abp--global--border-color);
  border-radius: var(--abp--global--border-radius);
}
.hauptseite .alert a {
  color: inherit;
  text-decoration: underline;
}
.hauptseite .alert-info,
.hauptseite .alert-default {
  background-color: var(--abp--global--color--offwhite);
  border-color: var(--abp--global--border-color);
  color: var(--abp--global--color--primary);
}
.hauptseite .alert-warning {
  background-color: #fff8e1;
  border-color: #ffe08a;
  color: #664d03;
}
.hauptseite .alert-danger {
  background-color: #fdecec;
  border-color: #f5c2c7;
  color: #842029;
}
.hauptseite .alert-success {
  background-color: #e7f5ec;
  border-color: #a3cfbb;
  color: #0a3622;
}

/* --- 7.2 Login, Registrierung & Profil (Sichten 482, 285, 241, 483) ------- */

.hauptseite .input-group .btn {
  box-shadow: none;
  margin: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.hauptseite .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.hauptseite .kw-pw-rules {
  margin-top: var(--abp--global--spacing-xs);
  color: var(--abp--global--color--primary);
  opacity: 0.6;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.hauptseite .well {
  background-color: var(--abp--card--background-color);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  padding: var(--abp--course-card--content-padding);
  box-shadow: none;
}

/* Aktions-Liste auf der "Herzlich willkommen"-Seite */
.kw-login-actions-list {
  display: grid;
  gap: var(--abp--global--spacing-sm);
  max-width: 24rem;
  margin: var(--abp--global--spacing-lg) auto 0;
  padding: 0;
  list-style: none;
}
.kw-login-actions-list .list-group-item {
  border: 1px solid var(--abp--card--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--card--background-color);
  padding: 0;
}
.kw-login-actions-list .list-group-item a {
  display: block;
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
  color: var(--abp--global--color--primary);
  font-weight: 600;
  text-decoration: none;
}
.kw-login-actions-list .list-group-item:hover {
  box-shadow: var(--abp--global--shadow);
}

/* --- 7.3 Login-Menü im Header (Sicht 108) ---------------------------------- */

.tn-login-menu .dropdown-menu {
  min-width: min(20rem, calc(100vw - 2 * var(--abp--global--spacing-md)));
  padding: var(--abp--global--spacing-sm);
  border: 1px solid var(--abp--card--border-color);
  border-radius: var(--abp--global--border-radius);
  background-color: var(--abp--card--background-color);
  box-shadow: var(--abp--global--shadow-hover);
}
.tn-login-menu .dropdown-item {
  border-radius: calc(var(--abp--global--border-radius) * 0.6);
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-sm);
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.tn-login-menu .dropdown-item:hover,
.tn-login-menu .dropdown-item:focus {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.tn-login-menu .input-group-text {
  border: 1px solid var(--abp--global--border-color);
  border-right: 0;
  border-radius: calc(var(--abp--global--border-radius) * 0.8) 0 0 calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.tn-login-menu .input-group .form-control {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: calc(var(--abp--global--border-radius) * 0.8);
  border-bottom-right-radius: calc(var(--abp--global--border-radius) * 0.8);
}

/* Das Login-Menü liegt im Header, also AUSSERHALB von .hauptseite –
   Farben, Felder und Buttons brauchen deshalb eigene Regeln. */
.tn-login-menu {
  position: relative;
  font-family: var(--abp--global--font-family);
}
.tn-login-menu .dropdown-menu {
  position: absolute !important;
  top: calc(100% + var(--abp--global--spacing-xs)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 1050;
  color: var(--abp--global--color--primary);
}
/* Auf sehr schmalen Screens rechtsbündig am Icon verankern, damit das
   zentrierte Panel nicht über den Viewport hinausragt */
@media (max-width: 480px) {
  .tn-login-menu .dropdown-menu {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
}
/* Der von webbasys in den Header-Menüpunkt injizierte Klickpfad ist dort
   funktionslos, verbreitert aber das <li> und verschiebt dadurch den
   Bezugsrahmen des Login-Menüs */
.kw-menu-item .hauptseite_clickpfad {
  display: none;
}
.tn-login-menu .dropdown-menu p,
.tn-login-menu .dropdown-menu b {
  color: var(--abp--global--color--primary);
}
.tn-login-menu .dropdown-menu a {
  color: var(--abp--global--color--primary);
}
.tn-login-menu .form-control {
  height: auto;
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-sm);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  color: var(--abp--global--color--primary);
  box-shadow: none;
}
.tn-login-menu .form-control:focus {
  border-color: var(--abp--global--color--primary);
  box-shadow: 0 0 0 3px rgba(0, 21, 56, 0.08);
  outline: 0;
}
.tn-login-menu .form-control::placeholder {
  color: var(--abp--global--color--primary);
  opacity: 0.35;
}
.tn-login-menu .btn {
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-lg);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.tn-login-menu .btn-theme {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.tn-login-menu .btn-theme:hover,
.tn-login-menu .btn-theme:focus {
  background-color: #16294d;
  border-color: #16294d;
  color: #fff;
}
.abp--login-menu__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.3em;
  border-radius: 999px;
  background-color: var(--abp--global--color--primary);
  color: #fff;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1;
}

/* --- 7.4 Kontroll- & Bestätigungsseiten (Sichten 505, 506, 508, 509) ------ */

.kw-best-label {
  padding-top: var(--abp--global--spacing-tight);
  padding-bottom: var(--abp--global--spacing-tight);
  color: var(--abp--global--color--primary);
  opacity: 0.65;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.5;
}
.kw-best-data {
  padding-top: var(--abp--global--spacing-tight);
  padding-bottom: var(--abp--global--spacing-tight);
  color: var(--abp--global--color--primary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.kw-best-nn {
  opacity: 0.45;
  font-style: italic;
}
.kw-anm-best a {
  color: inherit;
}
.wtn-best {
  margin-top: var(--abp--global--spacing-md);
}

/* --- 7.5 Merkliste (Sicht 503) – Kartenliste wie Kursübersicht/Warenkorb --- */

.abp--table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.abp--merkliste {
  margin-top: var(--abp--global--spacing-md);
}
.abp--merkliste .abp--course-card__title a {
  text-decoration: none;
}
.abp--merkliste .abp--course-card__title a.text-muted {
  opacity: 0.45;
}
.abp--merkliste__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--abp--global--spacing-sm);
}
.abp--merkliste__add {
  display: grid;
  place-items: center;
  width: var(--abp--global--spacing-4xl);
  height: var(--abp--global--spacing-4xl);
  border: 1px solid rgba(229, 229, 229, 0.9);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  color: var(--abp--global--color--primary);
  text-decoration: none;
}
.abp--merkliste__add:hover,
.abp--merkliste__add:focus-visible {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
@media (max-width: 900px) {
  .abp--merkliste__actions {
    justify-content: flex-start;
  }
}

/* --- 7.6 Dozenten (Sichten 218, 235, 236) ---------------------------------- */

/* Buchstabenleiste & Seitenauswahl: umbrechende Karten-Chips */
.hauptseite .pagination,
.abp--doz-alpha .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abp--global--spacing-tight);
  padding: 0;
  margin: var(--abp--global--spacing-sm) 0;
}
.hauptseite .pagination .page-item,
.abp--doz-alpha .pagination .page-item {
  margin: 0;
}
.hauptseite .page-link,
.abp--doz-alpha .page-link {
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.6) !important;
  background-color: #fff;
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.hauptseite .page-link:hover,
.hauptseite .page-link:focus,
.abp--doz-alpha .page-link:hover,
.abp--doz-alpha .page-link:focus {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.hauptseite .page-item.active .page-link,
.abp--doz-alpha .page-item.active .page-link {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.hauptseite .page-link.doz-buchstabe-leer,
.abp--doz-alpha .page-link.doz-buchstabe-leer {
  opacity: 0.35;
}

/* Die Dozenten-Sichten werden teils per Shortcode AUSSERHALB von .hauptseite
   eingebettet – Buttons dort explizit in der Kartensprache stylen
   (Zurück-Button der Details, Blätterpfeile der Übersicht) */
.kw-dozdetails .btn,
.kw-paginationleiste .btn {
  padding: var(--abp--global--spacing-xs) var(--abp--global--spacing-lg);
  border: 1px solid var(--abp--global--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  color: var(--abp--global--color--primary);
  font-weight: 600;
}
.kw-dozdetails .btn:hover,
.kw-dozdetails .btn:focus,
.kw-paginationleiste .btn:hover,
.kw-paginationleiste .btn:focus {
  background-color: var(--abp--global--color--offwhite);
  color: var(--abp--global--color--primary);
}
.kw-dozdetails .btn-theme {
  background-color: var(--abp--global--color--primary);
  border-color: var(--abp--global--color--primary);
  color: #fff;
}
.kw-dozdetails .btn-theme:hover,
.kw-dozdetails .btn-theme:focus {
  background-color: #16294d;
  border-color: #16294d;
  color: #fff;
}

/* Blätterleiste: Floats durch flexibles Layout ersetzen */
.kw-paginationleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abp--global--spacing-sm);
}
.kw-paginationleiste .float-start { order: 1; }
.kw-paginationleiste .text-center { order: 2; flex: 1 1 auto; }
.kw-paginationleiste .float-end { order: 3; }

/* Dozentenliste als responsives Karten-Raster */
.kw-doz-uebersicht ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--abp--global--spacing-sm);
  margin: var(--abp--global--spacing-md) 0 0;
  padding: 0;
  list-style: none;
  /* Karten nicht auf Zeilenhöhe strecken: Dozenten ohne Foto behalten
     ihre kompakte Box, auch wenn daneben eine Foto-Karte steht */
  align-items: start;
}
.kw-doz-uebersicht li {
  margin: 0 !important;
}
.kw-doz-uebersicht li a {
  display: block;
  height: 100%;
  padding: var(--abp--global--spacing-sm) var(--abp--global--spacing-md);
  border: 1px solid var(--abp--card--border-color);
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  background-color: var(--abp--card--background-color);
  color: var(--abp--global--color--primary);
  font-weight: 600;
  text-decoration: none;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.kw-doz-uebersicht li a:hover,
.kw-doz-uebersicht li a:focus-visible {
  box-shadow: var(--abp--global--shadow-hover);
}
/* Portrait über dem Namen (Sicht 218, nur falls ein Foto hinterlegt ist) */
.abp--doz-uebersicht__foto {
  display: block;
  margin-bottom: var(--abp--global--spacing-sm);
}
.abp--doz-uebersicht__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
}
.abp--doz-uebersicht__name {
  display: block;
}

/* Buchstaben-Überschrift der gruppierten Übersicht */
.kw-doz-uebersicht-gruppiert .doz_buchstabe {
  margin: var(--abp--global--spacing-2xl) 0 var(--abp--global--spacing-sm);
  padding-bottom: var(--abp--global--spacing-xs);
  border-bottom: 1px solid var(--abp--global--border-color);
  color: var(--abp--global--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
}
/* Dozentendetails (Sicht 219) – Aufbau wie die Kursdetailseite (Sicht 13):
   Titel + gedimmte Berufszeile, Texte als __text, Tätigkeit/Qualifikationen/
   Profil in der Fakten-Karte, Fotos als abgerundete Karten-Figuren. */
.abp--doz-detail .abp--course-detail__title {
  margin-bottom: var(--abp--global--spacing-xs);
}
.abp--doz-detail__subtitle {
  margin: 0 0 var(--abp--global--spacing-lg);
  color: var(--abp--global--color--primary);
  opacity: 0.6;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.4;
}
.abp--doz-detail__info {
  margin: 0 0 var(--abp--global--spacing-lg);
}
/* Freitext aus dem KuferSQL-Editor: jeder Absatz/Span bringt eigene
   Inline-Styles mit (font-family Aptos, 12pt, #000, line-height 1.15).
   Inline-Styles schlagen normale Regeln, daher per !important auf die
   Seitenschrift heben - fett/kursiv der Spans bleibt dabei erhalten. */
.abp--doz-detail__info p,
.abp--doz-detail__info li,
.abp--doz-detail__info span {
  font-family: var(--abp--global--font-family) !important;
  font-size: var(--wp--preset--font-size--normal) !important;
  color: var(--abp--global--color--primary) !important;
  line-height: 1.6 !important;
}
/* Ladeanzeige der Dozenten-Kursliste (Sicht 223, RK-Kurse via JSON) */
.abp--doz-courses__loading {
  display: flex;
  align-items: center;
  gap: var(--abp--global--spacing-xs);
  margin: var(--abp--global--spacing-md) 0;
  color: var(--abp--global--color--primary);
  opacity: 0.7;
  font-size: var(--wp--preset--font-size--small);
}
.abp--doz-detail__media {
  margin-bottom: var(--abp--global--spacing-md);
}
.abp--doz-detail__photo {
  display: block;
  margin: 0 0 var(--abp--global--spacing-xs);
  padding: 0;
  border-radius: calc(var(--abp--global--border-radius) * 0.8);
  overflow: hidden;
}
.abp--doz-detail__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.kw-dozdetails .doz-foto-caption {
  margin: 0 0 var(--abp--global--spacing-md);
  color: var(--abp--global--color--primary);
  opacity: 0.6;
  font-size: var(--wp--preset--font-size--small);
}
.abp--doz-detail__courses {
  margin: var(--abp--global--spacing-2xl) 0;
}

/* --- 7.7 Responsive Feinschliff -------------------------------------------- */

@media (max-width: 600px) {
  .hauptseite .kw-buttonleiste .btn,
  .hauptseite .anmeldeformular_but .btn,
  .hauptseite #backform .btn,
  .abp--anm .text-end .btn,
  .abp--anm .text-right .btn {
    display: block;
    width: 100%;
    margin-bottom: var(--abp--global--spacing-xs);
  }
  .hauptseite .anmeldeformular_but {
    float: none;
    width: 100%;
  }
  .kw-login-actions-list {
    max-width: 100%;
  }
}