/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  font-size: 1rem;
  line-height: 1.5;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-light-gray);
  border-color: var(--color-light-gray);
  color: var(--color-dark);
}

.btn-secondary {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background-color: transparent;
  border-color: var(--color-text);
  color: var(--color-dark);
}

.btn-sm {
  padding: var(--btn-padding-sm);
  font-size: 0.875rem;
}
.btn-lg {
  padding: var(--btn-padding-lg);
  font-size: 1.125rem;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}

.section-sm {
  padding-top: var(--section-spacing-sm);
  padding-bottom: var(--section-spacing-sm);
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Typografie
   ========================================================================== */

.heading-lg {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

.heading-md {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.heading-sm {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}

.text-sm {
  font-size: 0.875rem;
}
.text-meta {
  font-size: 0.8125rem;
  color: var(--color-secondary);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 16px 20px;
}
.card-body {
  padding: 20px;
}
.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Formulare
   ========================================================================== */

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(251, 94, 28, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-error {
  color: #dc3545;
  font-size: 0.8125rem;
  margin-top: 4px;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* ==========================================================================
   Breadcrumb (in Hero) — globale Base-Styles, damit alle Page-Templates
   den gleichen Look bekommen ohne training.css conditional zu laden.
   ========================================================================== */

.breadcrumb-hero {
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.breadcrumb-hero a,
.breadcrumb-hero span {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.breadcrumb-hero a:hover {
  color: var(--color-white);
}

.breadcrumb-hero .breadcrumb-current {
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-hero .breadcrumb-sep {
  margin: 0 8px;
}

/* Tags / Labels */
.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-secondary);
}

.tag-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.tag-accent {
  background: var(--color-accent);
  color: var(--color-white);
}

.tag-light {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}

.mb-1 {
  margin-bottom: 8px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mb-4 {
  margin-bottom: 32px;
}

/* ==========================================================================
   Page Header (reusable)
   ========================================================================== */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.page-header-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.page-header-desc {
  font-size: 0.875rem;
  color: var(--color-secondary);
  margin: 6px 0 0;
  max-width: 560px;
  line-height: 1.5;
}

.page-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Wishlist
   ========================================================================== */

.wishlist-header {
  margin-bottom: 32px;
}

.wishlist-header .text-meta {
  margin-top: 4px;
}

.wishlist-empty {
  text-align: center;
  padding: 80px 20px;
}

.wishlist-empty-icon {
  font-size: 3rem;
  color: var(--color-border);
  margin-bottom: 16px;
}

.wishlist-empty .heading-sm {
  margin-bottom: 8px;
}

.wishlist-empty p {
  color: var(--color-secondary);
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.training-card-wrap {
  position: relative;
  display: flex;
  /* align-self: stretch ist Default in Grid (Archive) und Flex (Slider) —
     dadurch füllt der Wrap immer die volle Reihen-/Track-Höhe. */
  align-self: stretch;
}

.wishlist-toggle-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--color-secondary);
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.wishlist-toggle-btn:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.wishlist-toggle-btn.is-bookmarked {
  color: var(--color-primary);
}

.wishlist-toggle-btn.is-bookmarked i {
  font-weight: 900;
}

.wishlist-remove-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

.wishlist-remove-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-secondary);
}

.wishlist-remove-btn:hover {
  box-shadow: var(--shadow-md);
}

.wishlist-remove-btn:hover .wishlist-remove-label {
  color: var(--color-primary);
}

/* ==========================================================================
   Training Card (reusable component)
   ========================================================================== */

.training-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.training-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}

.training-card-image {
  aspect-ratio: 21 / 9;
  overflow: hidden;
}

.training-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.training-card-placeholder {
  background: linear-gradient(
    135deg,
    var(--color-dark) 0%,
    var(--color-secondary) 100%
  );
}

.training-card .card-body {
  flex: 1;
}

.training-card .tag {
  margin-bottom: 12px;
}

.training-card-title {
  margin-bottom: 8px;
}

.training-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-secondary);
  line-height: 1.6;
  margin: 0;
}

.training-card-footer.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.training-card-meta {
  font-size: 0.8125rem;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.training-card-meta i {
  color: var(--color-primary);
}

.training-card-price {
  color: var(--color-primary);
  font-size: 0.9375rem;
}

/* ==========================================================================
   Contact Modal (global)
   ========================================================================== */

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.contact-modal[hidden] {
    display: none;
}

.contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.contact-modal-content {
    position: relative;
    background: #fff;
    border-radius: 0;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    animation: contactModalIn 0.25s ease-out;
}

@keyframes contactModalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.contact-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt, #f8f9fa);
}

.contact-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.contact-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-bg-alt);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-secondary);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.contact-modal-close:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.contact-modal-body {
    padding: 32px;
}

.contact-modal-body iframe {
    width: 100%;
    min-height: 400px;
    border: 0;
}

/* ==========================================================================
   XRM Contact Form (Dynamics 365) — styles for form injected by FormLoader
   ========================================================================== */

.ums-contact-form {
    font-family: var(--font-body);
    color: var(--color-text);
}

.ums-contact-form > div,
.ums-contact-form form {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

.ums-contact-form label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
}

.ums-contact-form input[type="text"],
.ums-contact-form input[type="email"],
.ums-contact-form input[type="tel"],
.ums-contact-form input[type="url"],
.ums-contact-form input[type="number"],
.ums-contact-form select,
.ums-contact-form textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    font-family: var(--font-body) !important;
    color: var(--color-text) !important;
    background: var(--color-white) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

.ums-contact-form input[type="text"]:focus,
.ums-contact-form input[type="email"]:focus,
.ums-contact-form input[type="tel"]:focus,
.ums-contact-form input[type="url"]:focus,
.ums-contact-form input[type="number"]:focus,
.ums-contact-form select:focus,
.ums-contact-form textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(251, 94, 28, 0.15) !important;
}

.ums-contact-form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

.ums-contact-form input[type="checkbox"],
.ums-contact-form input[type="radio"] {
    accent-color: var(--color-primary);
    margin-right: 8px;
}

.ums-contact-form button[type="submit"],
.ums-contact-form input[type="submit"] {
    display: inline-block !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-radius) !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity var(--transition-fast) !important;
    margin-top: 8px !important;
}

.ums-contact-form button[type="submit"]:hover,
.ums-contact-form input[type="submit"]:hover {
    opacity: 0.9 !important;
}

.ums-contact-form .error,
.ums-contact-form [class*="error"] {
    color: #dc3545 !important;
    font-size: 0.8125rem !important;
    margin-top: -10px !important;
    margin-bottom: 12px !important;
}

.ums-contact-form .success,
.ums-contact-form [class*="success"] {
    padding: 16px !important;
    background: rgba(81, 137, 94, 0.1) !important;
    color: var(--color-green) !important;
    border-radius: var(--radius-sm) !important;
}

/* Dynamics 365 Marketing Form — spezifische Klassen, die der FormLoader injiziert */
.ums-contact-form [data-editorblocktype="Field"],
.ums-contact-form .lp-form-field,
.ums-contact-form .marketing-field {
    margin-bottom: 18px !important;
}

.ums-contact-form .lp-form-fieldLabel,
.ums-contact-form [data-editorblocktype="Field"] label,
.ums-contact-form .marketing-field-label {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 6px !important;
}

/* Required-Asterisk in Primärfarbe */
.ums-contact-form .lp-required,
.ums-contact-form .required-mark,
.ums-contact-form span[class*="required"] {
    color: var(--color-primary) !important;
    margin-left: 2px !important;
}

/* Sub-/Hilfetexte unter Feldern */
.ums-contact-form .lp-form-fieldDescription,
.ums-contact-form .marketing-field-description {
    font-size: 0.8125rem !important;
    color: var(--color-secondary) !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

/* Submit-Container & Submit-Button */
.ums-contact-form [data-editorblocktype="SubmitButton"],
.ums-contact-form .lp-form-buttonContainer {
    margin-top: 8px !important;
}

.ums-contact-form .lp-form-button,
.ums-contact-form button.formButton {
    display: inline-block !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-radius) !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity var(--transition-fast) !important;
    width: auto !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ums-contact-form .lp-form-button:hover,
.ums-contact-form button.formButton:hover {
    opacity: 0.9 !important;
    background: var(--color-primary) !important;
}

/* Validation-Errors */
.ums-contact-form .lp-form-fieldValidation,
.ums-contact-form .lp-form-error,
.ums-contact-form .marketing-field-validation-error {
    color: #dc3545 !important;
    font-size: 0.8125rem !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Erfolgs-/Bestätigungstext nach Submit */
.ums-contact-form .formSubmissionThankYou,
.ums-contact-form [data-editorblocktype="ThankYouBlock"] {
    padding: 20px !important;
    background: rgba(81, 137, 94, 0.1) !important;
    color: var(--color-green) !important;
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Checkbox/Radio-Container — saubere Ausrichtung */
.ums-contact-form [data-editorblocktype*="Checkbox"] label,
.ums-contact-form [data-editorblocktype*="Radio"] label {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
}

/* Container-Padding/Margins von Dynamics zurücksetzen, damit nichts überläuft */
.ums-contact-form * {
    box-sizing: border-box !important;
}

/* Dynamics rendert das Outer-Layout mit verschachtelten Tabellen + 10px Padding
   pro Zelle. Wir machen NUR die Layout-Container-Klassen block (containerWrapper,
   columnContainer, inner, etc.) — generische table/tr/td INNERHALB der Form
   bleiben Tabellen, damit CAPTCHA & Validation-Container ihren Layout-Mechanik
   behalten (sonst werden hidden tr's sichtbar). */
.ums-contact-form .containerWrapper,
.ums-contact-form .tbContainer,
.ums-contact-form .columnContainer,
.ums-contact-form .inner,
.ums-contact-form .columns-equal-class,
.ums-contact-form .wrap-section,
.ums-contact-form .emptyContainer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    vertical-align: top !important;
    height: auto !important;
    text-align: left !important;
}

/* Dynamics rendert .outer TABLE mit inline display:block — dadurch
   kollabieren tbody/tr/th auf Content-Breite. Wir machen alle direkten
   Layout-Tabellen-Elemente zu Blocks. ".ms_captcha_holder > table" bleibt
   unangetastet, da wir nur direkte Kinder targeten. */
.ums-contact-form table.outer,
.ums-contact-form table.outer > tbody,
.ums-contact-form table.outer > tbody > tr,
.ums-contact-form table.outer > tbody > tr > td,
.ums-contact-form table.outer > tbody > tr > th,
.ums-contact-form table.containerWrapper > tbody,
.ums-contact-form table.containerWrapper > tbody > tr,
.ums-contact-form table.containerWrapper > tbody > tr > td,
.ums-contact-form table.containerWrapper > tbody > tr > th,
.ums-contact-form .columnContainer > table,
.ums-contact-form .columnContainer > table > tbody,
.ums-contact-form .columnContainer > table > tbody > tr,
.ums-contact-form .columnContainer > table > tbody > tr > td,
.ums-contact-form .columnContainer > table > tbody > tr > th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    text-align: left !important;
}

/* Field-Container (Dynamics nennt sie z.B. textFormFieldBlock, emailFormFieldBlock,
   optionSetFormFieldBlock, submitButtonBlock) — Dynamics setzt da intern 20px 30px
   Padding drauf, das überschreiben wir komplett, plus einheitlicher vertikaler Abstand. */
.ums-contact-form [data-editorblocktype$="FormField"],
.ums-contact-form [data-editorblocktype="SubmitButton"],
.ums-contact-form [class$="FormFieldBlock"],
.ums-contact-form .textFormFieldBlock,
.ums-contact-form .dateTimeFormFieldBlock,
.ums-contact-form .twoOptionFormFieldBlock,
.ums-contact-form .optionSetFormFieldBlock,
.ums-contact-form .multiOptionSetFormFieldBlock,
.ums-contact-form .lookupFormFieldBlock,
.ums-contact-form .submitButtonBlock {
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: block !important;
}

/* Labels die direkt im FieldBlock liegen */
.ums-contact-form [data-editorblocktype$="FormField"] label,
.ums-contact-form [class$="FormFieldBlock"] label {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 6px !important;
}

/* Submit-Block linksbündig, Button nicht volle Breite */
.ums-contact-form .submitButtonBlock,
.ums-contact-form [data-editorblocktype="SubmitButton"] {
    text-align: left !important;
    margin-top: 8px !important;
}

.ums-contact-form .submitButtonBlock button,
.ums-contact-form [data-editorblocktype="SubmitButton"] button {
    width: auto !important;
}

/* Phone-Feld: Dynamics rendert einen extra Wrapper .phoneCountryCode
   mit ggf. eigener Border. Wrapper transparent machen, input bekommt
   die Border. */
.ums-contact-form .phoneCountryCode {
    display: flex !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.ums-contact-form .phoneCountryCodeLabel {
    display: none !important;
}

.ums-contact-form .phoneCountryCode input[type="tel"] {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

/* CAPTCHA: Image unter den Text, Reload-Links sauber davor.
   Dynamics setzt 20px 70px Padding auf den Outer-Container — komplett wegnehmen. */
.ums-contact-form .captchaContainer,
.ums-contact-form [data-editorblocktype="Captcha"] {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

/* Innere Tabelle des Captcha darf Tabelle bleiben, aber linksbündig und
   ohne fest gesetzte Spaltenbreite */
.ums-contact-form [data-editorblocktype="Captcha"] table,
.ums-contact-form .captchaContainer table {
    width: auto !important;
    margin: 0 !important;
}

.ums-contact-form [data-editorblocktype="Captcha"] td,
.ums-contact-form .captchaContainer td {
    padding: 0 !important;
}

/* NUR das Captcha-Image, nicht die Lade-/Error-Indicator-GIFs */
.ums-contact-form [data-editorblocktype="Captcha"] img[src*="captcha"],
.ums-contact-form [data-editorblocktype="Captcha"] img[src*="challenge"],
.ums-contact-form .captchaContainer img[src*="captcha"],
.ums-contact-form .captchaContainer img[src*="challenge"] {
    display: block !important;
    max-width: 200px !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid var(--color-border) !important;
    padding: 4px !important;
    margin: 8px 0 !important;
}

/* Lade-Spinner + Error-Icons: Inline style="display: none" respektieren */
.ums-contact-form img[src*="progcircle"],
.ums-contact-form img[src*="icon_err"] {
    display: none !important;
}

/* CAPTCHA Input nicht volle Breite */
.ums-contact-form .captchaContainer input[type="text"],
.ums-contact-form [data-editorblocktype="Captcha"] input[type="text"] {
    max-width: 280px !important;
    margin-top: 8px !important;
}

.ums-contact-form .captchaContainer a,
.ums-contact-form [data-editorblocktype="Captcha"] a {
    font-size: 0.875rem !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.ums-contact-form .captchaContainer a:hover,
.ums-contact-form [data-editorblocktype="Captcha"] a:hover {
    text-decoration: underline !important;
}

/* Datenschutz-Checkbox Text: kompakter Block mit Checkbox links.
   Dynamics setzt inline padding: 4px 30px — wegschneiden für Linksbündigkeit.
   Innerer Wrapper-Div hat align-items: center — auf flex-start zwingen,
   damit die Checkbox oben sitzt, nicht mittig zum mehrzeiligen Text. */
.ums-contact-form [data-editorblocktype="Consent"],
.ums-contact-form .consentBlock {
    display: block !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: var(--color-secondary) !important;
}

.ums-contact-form [data-editorblocktype="Consent"] > div,
.ums-contact-form .consentBlock > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ums-contact-form [data-editorblocktype="Consent"] input[type="checkbox"],
.ums-contact-form .consentBlock input[type="checkbox"] {
    flex: 0 0 auto !important;
    margin: 3px 0 0 !important;
}

.ums-contact-form [data-editorblocktype="Consent"] label,
.ums-contact-form .consentBlock label {
    margin: 0 !important;
    font-weight: 400 !important;
    color: var(--color-secondary) !important;
}

/* Radio-Gruppen (z.B. Anrede: Herr / Frau / Divers) in einer Zeile.
   Dynamics nutzt Container .radiobuttons (block) mit Kindern .radiobuttons > div
   (jeweils flex-row für input + label). Wir machen den Wrapper selbst zu flex-row. */
.ums-contact-form .optionSetFormFieldBlock .radiobuttons,
.ums-contact-form .twoOptionFormFieldBlock .radiobuttons,
.ums-contact-form [data-editorblocktype="OptionSetFormField"] .radiobuttons,
.ums-contact-form [data-editorblocktype="TwoOptionFormField"] .radiobuttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px 24px !important;
    margin-top: 6px !important;
    width: 100% !important;
}

/* Einzelne Radio-Items: flex-row mit kleinem Gap zwischen Input + Label */
.ums-contact-form .radiobuttons > div {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

.ums-contact-form .radiobuttons > div label {
    display: inline !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-size: 0.9375rem !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
}

.ums-contact-form .radiobuttons input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Text-Blöcke (Heading "Kontaktformular" + Intro-Text) komplett ausblenden —
   die Page selbst liefert Überschrift & Intro vor dem Embed. */
.ums-contact-form [data-editorblocktype="Text"] {
    display: none !important;
}

/* ==========================================================================
   Bullet-Style: eckig statt rund (Ticket 29)
   Greift auf alle Content-ULs ohne eigene Klasse — Cards, Nav, etc. behalten
   ihr `list-style: none`.
   ========================================================================== */
ul:not([class]),
.entry-content ul,
.faq-answer ul,
.training-section ul {
  list-style: square;
}


/* ==========================================================================
   Card-Slider Shell (Ticket 55 Folge): Arrows halb-verdeckt mittig
   Greift für Themenfeld-, Inhouse-Single-, Cases-Slider — alle drei haben
   die gleiche Shell-Struktur: .X-slider-shell > arrow + viewport + arrow.
   ========================================================================== */
.thema-slider-shell,
.inhouse-slider-shell,
.cases-slider-shell {
  position: relative;
}

/* Shared Arrow-Styling (mittig auf Card-Höhe, halb über Cards ragend) */
.thema-slider-arrow,
.inhouse-slider-arrow,
.cases-slider-arrow {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.thema-slider-prev,
.inhouse-slider-prev,
.cases-slider-prev {
  left: 0;
  transform: translate(-62%, -50%);
}

.thema-slider-next,
.inhouse-slider-next,
.cases-slider-next {
  right: 0;
  transform: translate(62%, -50%);
}

.thema-slider-arrow:hover:not(:disabled),
.inhouse-slider-arrow:hover:not(:disabled),
.cases-slider-arrow:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 6px 20px rgba(251, 94, 28, 0.35);
}

/* User-Wunsch: Arrows immer voll sichtbar, nicht ausgegraut.
   Disabled-State: dezenter Farb-Indikator statt Opacity. */
.thema-slider-arrow:disabled,
.inhouse-slider-arrow:disabled,
.cases-slider-arrow:disabled {
  cursor: not-allowed;
  color: #c0c0c0;
}

/* Mobil: Arrows kleiner + näher am Rand (nicht halb-verdeckt sondern voll sichtbar) */
@media (max-width: 768px) {
  .thema-slider-arrow,
  .inhouse-slider-arrow,
  .cases-slider-arrow {
    width: 44px;
    height: 44px;
  }
  .thema-slider-prev,
  .inhouse-slider-prev,
  .cases-slider-prev {
    left: 8px;
    transform: translateY(-50%);
  }
  .thema-slider-next,
  .inhouse-slider-next,
  .cases-slider-next {
    right: 8px;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   Page Video Block (wiederverwendbar auf Kontakt, Über die Academy, etc.)
   Überschrift + 16:9 YouTube-Embed.
   ========================================================================== */
.page-video-block {
  padding: var(--section-spacing, 80px) 0;
}

.page-video-block-heading {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  margin: 0 0 24px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.page-video-block-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: var(--radius-md);
}

.page-video-block-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .page-video-block-heading {
    font-size: 1.375rem;
  }
}