.obs-course-choice { box-sizing: border-box; width: 100%; color: #202738; container-name: obs-course-choice; container-type: inline-size; }
.obs-course-choice *, .obs-course-choice *::before, .obs-course-choice *::after { box-sizing: border-box; }
.obs-course-choice__header { margin-bottom: 0; }
.obs-course-choice__heading, .obs-course-choice > .wp-block-heading:first-child { margin-top: 0; }
.obs-course-choice__subtitle { margin-top: .75rem; font-style: italic; }
.obs-course-choice__grid { display: grid; grid-template-columns: repeat(var(--obs-course-grid-columns, 4), minmax(0, 1fr)); gap: clamp(.65rem, 1.2vw, 1rem); align-items: start; }

.obs-course-card { position: relative; display: grid; min-width: 0; min-height: 0; aspect-ratio: var(--obs-course-card-ratio, 4 / 5); perspective: 1200px; container-type: inline-size; }
.obs-course-card__inner { position: relative; display: grid; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; transition: transform .65s cubic-bezier(.2, .7, .2, 1); }
.obs-course-card__face { position: relative; grid-area: 1 / 1; min-height: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.obs-course-card__front { z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; transform: rotateY(0deg); -webkit-transform: rotateY(0deg); background: #858574; color: #fff; }
.obs-course-card__visual { position: relative; min-height: 0; overflow: hidden; background: #5e625a; }
.obs-course-card__image { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.obs-course-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #73786d, #454b45); }
.obs-course-card__shade { position: absolute; inset: 0; background: rgb(15 22 29 / 38%); }
.obs-course-card__title { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: clamp(.65rem, 7cqi, 1.4rem); overflow-wrap: normal; color: #fff; font-size: var(--obs-course-front-title-size, clamp(1rem, 10cqi, 2rem)); font-weight: 700; line-height: 1.16; text-align: center; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__footer { display: grid; min-height: calc(2.5em + 2 * clamp(.6rem, 5cqi, .9rem)); place-items: center; padding: clamp(.6rem, 5cqi, .9rem); overflow-wrap: normal; background: #858574; color: #fff; font-size: var(--obs-course-footer-size, clamp(.78rem, 7.5cqi, 1.3rem)); font-weight: 700; line-height: 1.25; text-align: center; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__contact-caption { display: none; }
.obs-course-card__toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
.obs-course-card__toggle:focus-visible { outline: 4px solid #9bcf4a; outline-offset: 4px; }

.obs-course-card__back { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(.45rem, 4cqi, .9rem); padding: clamp(.7rem, 6cqi, 1.4rem); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); background: var(--obs-course-back-background, #e7e6e2); color: var(--obs-course-back-color, #202738); pointer-events: none; }
.obs-course-card__description { flex: 1 1 auto; margin: clamp(1.2rem, 9cqi, 1.9rem) 0 0; overflow: visible; overflow-wrap: normal; font-size: var(--obs-course-back-text-size, clamp(.68rem, 6cqi, 1rem)); line-height: 1.25; word-break: normal; hyphens: none; -webkit-hyphens: none; }
.obs-course-card__description > :first-child { margin-top: 0; }
.obs-course-card__description > :last-child { margin-bottom: 0; }
.obs-course-card__button { display: block; width: 100%; margin-top: auto; padding: clamp(.55rem, 5cqi, .8rem); border-radius: 0; background: #83bb26; color: #fff; font-size: var(--obs-course-button-size, clamp(.68rem, 6cqi, .95rem)); font-weight: 400; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.obs-course-card__button:hover, .obs-course-card__button:focus-visible { background: #6fa31e; color: #fff; }
.obs-course-card__button.is-disabled { color: #fff; }
.obs-course-card__contact-trigger--front { display: none; }
.obs-course-card__close { position: absolute; top: .4rem; right: .5rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--obs-course-back-color, #202738); font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.obs-course-card__close:hover, .obs-course-card__close:focus-visible { background: rgb(32 39 56 / 10%); }

/* Bild-Flipkarten: rechteckiges Bild mit Titel auf der Vorderseite. */
.obs-course-choice.is-mode-image { --obs-course-grid-columns: 3; --obs-course-card-ratio: 3 / 2; }
.obs-course-choice.is-mode-image.is-image-ratio-portrait { --obs-course-card-ratio: 4 / 5; }
.obs-course-choice.is-mode-image.is-image-ratio-square { --obs-course-card-ratio: 1 / 1; }
.obs-course-choice.is-mode-image { padding-inline: var(--obs-image-horizontal-inset, 0%); }
.obs-course-choice.is-mode-image .obs-course-choice__grid { gap: clamp(2rem, 6vw, 5.5rem); }
.obs-course-choice.is-mode-image .obs-course-card__footer { display: none; }

/* Kontaktkarten: Porträtbild und klarer, dunkelblauer Namensbereich. */
.obs-course-choice.is-mode-contact { --obs-course-grid-columns: 3; --obs-course-card-ratio: 3 / 4; }
.obs-course-choice.is-mode-contact { padding-inline: var(--obs-contact-horizontal-inset, 0%); }
.obs-course-choice.is-mode-contact .obs-course-choice__grid { gap: clamp(1.5rem, 5vw, 4.5rem); }
.obs-course-choice.is-mode-contact .obs-course-card__title,
.obs-course-choice.is-mode-contact .obs-course-card__contact-trigger--front { display: none; }
.obs-course-choice.is-mode-contact .obs-course-card__shade { display: none; }
.obs-course-choice.is-mode-contact .obs-course-card__image { object-position: var(--obs-course-image-x, 50%) var(--obs-course-image-y, 50%); }
.obs-course-choice.is-mode-contact .obs-course-card__footer { display: none; }
.obs-course-choice.is-mode-contact .obs-course-card__contact-caption { display: grid; gap: .2rem; padding: clamp(.75rem, 6cqi, 1.2rem); background: #202738; color: #fff; }
.obs-course-choice.is-mode-contact .obs-course-card__contact-name { margin: 0; color: inherit; font-size: var(--obs-contact-card-name-size, clamp(1rem, 8cqi, 1.45rem)); font-weight: 700; line-height: 1.15; }
.obs-course-choice.is-mode-contact .obs-course-card__contact-role { margin: 0; color: inherit; font-size: var(--obs-contact-card-role-size, clamp(.78rem, 5.5cqi, 1rem)); line-height: 1.35; }
.obs-course-choice.is-mode-contact .obs-course-card__back { background: var(--obs-course-back-background, #e7e6e2); }
.obs-course-card__contact-details { display: grid; gap: clamp(.7rem, 5cqi, 1.1rem); }
.obs-course-card__contact-heading { margin: clamp(1.2rem, 9cqi, 1.9rem) 0 0; font-size: var(--obs-course-back-text-size, clamp(.75rem, 6cqi, 1rem)); font-weight: 700; line-height: 1.3; }
.obs-course-card__responsibilities { display: grid; gap: .35em; margin: 0; padding-left: 1.15em; font-size: var(--obs-course-back-text-size, clamp(.75rem, 6cqi, 1rem)); line-height: 1.3; }

.obs-course-card.is-flipped .obs-course-card__inner,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.obs-course-card.is-flipped .obs-course-card__front,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__front { z-index: 1; pointer-events: none; }
.obs-course-card.is-flipped .obs-course-card__back,
.obs-course-card:has(.obs-course-card__back:focus-within) .obs-course-card__back { z-index: 2; pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
    .obs-course-card:hover .obs-course-card__inner { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
    .obs-course-card:hover .obs-course-card__front { z-index: 1; pointer-events: none; }
    .obs-course-card:hover .obs-course-card__back { z-index: 2; pointer-events: auto; }
}

@media (max-width: 800px) {
    .obs-course-choice { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}

@media (max-width: 600px) {
    .obs-course-card { width: min(100%, 27rem); margin-inline: auto; }
}

@container obs-course-choice (max-width: 760px) {
    .obs-course-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container obs-course-choice (max-width: 480px) {
    .obs-course-choice__grid { grid-template-columns: minmax(0, 1fr); }
    .obs-course-card { width: min(100%, 27rem); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .obs-course-card__inner { transition: none; }
}