/*
Theme Name: IBZ Custom Theme
Text Domain: ibz-custom-theme
Author: https://ann.ist
Version: 1.1-staging
License: Proprietary
Copyright: © 2025 602 Studio. All rights reserved.
*/
/* Layer-Order: Element-Regeln & Utility-Duplikate liegen in @layer elements
   (vor Tailwinds utilities) — so gewinnen Utility-Klassen im Markup. */
@layer theme, base, components, elements, utilities;

@view-transition {
  navigation:auto;
}

header.site-navbar {
  view-transition-name: main-header;
}

#mobileOverlay {
  view-transition-name: mobile-overlay;
}

@media (prefers-reduced-motion:reduce) {
@  view-transition {
    navigation: none;
  }
}

@font-face {
  font-family:Sarabun;src:url('assets/fonts/sarabun/sarabun-v17-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;size-adjust:105%;
}

@font-face {
  font-family:Sarabun;src:url('assets/fonts/sarabun/sarabun-v17-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;size-adjust:105%;
}

@font-face {
  font-family:Sarabun;src:url('assets/fonts/sarabun/sarabun-v17-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;size-adjust:105%;
}

@font-face {
  font-family:Sarabun;src:url('assets/fonts/sarabun/sarabun-v17-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;size-adjust:105%;
}

/* Poppins (display) — self-hosted, v24 latin */
@font-face {
  font-family:Poppins;src:url('assets/fonts/poppins/poppins-v24-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;size-adjust:100%;
}

@font-face {
  font-family:Poppins;src:url('assets/fonts/poppins/poppins-v24-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;size-adjust:100%;
}

@font-face {
  font-family:Poppins;src:url('assets/fonts/poppins/poppins-v24-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;size-adjust:100%;
}

@font-face {
  font-family:Poppins;src:url('assets/fonts/poppins/poppins-v24-latin-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;size-adjust:100%;
}

:root {
  /* === BRAND COLORS === */
  --brand-yellow: var(--wp--preset--color--brand-yellow, #f9c74f);
  --brand-blue: var(--wp--preset--color--brand-blue, #b9d0e31f);
  --brand-green: var(--wp--preset--color--brand-green, #43aa8b);
  --brand-orange: var(--wp--preset--color--brand-orange, #e8622c);
  --brand-orange-hover: var(--brand-orange-hover);

  /* === DEPARTMENT COLORS === */
  --dept-darkblue: var(--link-primary);
  --dept-red: #d7001c;
  --dept-darkgreen: #008767;
  --dept-lightgreen: #96ba3a;
  --dept-lightblue: #8fc7d6;
  --dept-mediumblue: #2baab8;
  --dept-yellow: #fed060;
  --dept-yellow-text: #7a5e00;
  --dept-orange: #e8622c;

  /* === TEXT COLORS === */
  --text-primary: var(--wp--preset--color--text-color, #1a1a1a);
  --text-secondary: #555555;
  --text-tertiary: #6b7280;
  --text-disabled: #9ca3af;
  --text-inverse: #ffffff;
  --text-muted: var(--text-muted);
  --text-icon-muted: var(--text-icon-muted);
  --text-close-btn: #666;

  /* === HEADING COLORS === */
  --heading-primary: var(--wp--preset--color--heading-color, #1a1a1a);
  --heading-secondary: #2e2e2e;
  --heading-color: var(--heading-primary);

  /* === LINK COLORS === */
  --link-primary: var(--wp--preset--color--link-color, #16294f);
  --link-hover: var(--wp--preset--color--link-hover-color, var(--link-hover));
  --link-hover-darker: var(--link-hover-darker);
  --link-visited: #6b4fb9;
  --link-color: var(--link-primary);
  --link-hover-color: var(--link-hover);

  /* === BACKGROUND COLORS === */
  --background-color: var(--wp--preset--color--background-color, #f7f3ea);
  --background-light: white;
  --background-blog: #f7f3ea;
  --background-light-blue: #8fc7d6;
  --background-close-hover: #f5f5f5;
  --footer-bg: #f4f4f4;
  --nav-back-color: #fc0000;

  /* === BORDERS === */
  --hover-color: rgba(211, 211, 211, 0.495);
  --border-color: rgba(211, 211, 211, 0.495);
  --border-light: #ddd;
  --border-medium: #e5e5e5;
  --border-scroll-up: #e5e7eb;
  --border-radius-sm: 2px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 25px;
  --border-radius-xxl: 30px;
  --border-radius-full: 999px;
  --border-radius-round: 50%;

  /* === SHADOWS === */
  --shadow-color: hsla(0deg, 0%, 0%, 0.4);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-btn-hover: 0 4px 12px rgba(22,41,79,.2);

  /* === TYPOGRAPHY === */
  --font-base: 'Poppins',sans-serif;
  --fs: 1rem;
  --font-xs: 0.875rem;
  --font-sm: 0.9rem;
  --font-md: 1rem;
  --font-lg: 1.2rem;
  --font-xl: 1.4rem;
  --font-2xl: clamp(1.6rem, 4vw, 2rem);
  --font-3xl: clamp(1.8rem, 5vw, 2.5rem);
  --font-nav: clamp(0.95rem, 2vw, 1.15rem);
  --font-nav-sub: clamp(0.9rem, 1.5vw, 1rem);
  --font-size-heading: clamp(1.4rem, 2vw, 1.5rem);
  --font-size-author: clamp(1.1rem, 2vw, 1.3rem);
  --line-base: 1.6;
  --line-tight: 1.2;
  --line-heading: 1.3;
  --line-message: 1.45;
  --para-spacing: 1.5;
  --letter-spacing-wide: .08em;

  /* === SPACING === */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3rem;
  --space-5xl: 5rem;

  --padding-small: var(--space-sm);
  --padding-medium: var(--space-lg);
  --padding-large: var(--space-2xl);
  --margin-section: clamp(2rem, 4vw, 3.5rem);

  /* === ELEVATION === */
  --lift-sm: translateY(-2px);
  --lift-md: translateY(-4px);
  --lift-lg: translateY(-8px);

  /* === TRANSITIONS === */
  --transition-speed: 500ms;
  --transition-duration: 0.6s;
  --easing: ease-in-out;
  --transition-base: all 0.3s ease;
  --transition-fast: all .2s ease;
  --transition-slow: all .6s ease;

  /* === FOCUS === */
  --focus-color: var(--brand-orange);
  --focus-width: 3px;
  --focus-offset: 2px;
  --focus-style: var(--focus-width) solid var(--focus-color);
  --focus-style-inset: inset 0 0 0 var(--focus-width) var(--focus-color);

  /* === SIZES === */
  --photo-size: 120px;
  --logo-height: 60px;
  --logo-height-mobile: 45px;
  --logo-max-width: 200px;
  --logo-max-width-mobile: 150px;
  --scroll-up-size: 48px;
  --close-btn-size: 44px;
  --icon-size-sm: 24px;
  --progress-bar-height: 3px;
  --dept-icon-max: 160px;


  /* === DEPARTMENT HOVER BACKGROUNDS === */
  --dept-darkblue-hover-bg: rgba(22,41,79,.2);
  --dept-orange-hover-bg: rgba(232,98,44,.15);
  --dept-darkgreen-hover-bg: rgba(0,135,103,.15);
  --dept-lightgreen-hover-bg: rgba(150,186,58,.15);
  --dept-lightblue-hover-bg: rgba(143,199,214,.3);
  --dept-mediumblue-hover-bg: rgba(43,170,184,.15);
  --dept-red-hover-bg: rgba(215,0,28,.15);
  --dept-yellow-hover-bg: rgba(254,208,96,.25);
  /* === Z-INDEX === */
  --z-scroll-up: 999;
  --z-progress: 9999;
}


*,::after,::before {
  box-sizing: border-box;
}

[role=button]:focus-visible,[tabindex]:not([tabindex='-1']):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}

[contenteditable],input,textarea {
  caret-color: var(--brand-orange);
}

.ts-wrapper .ts-control:focus-visible,.ts-wrapper input:focus-visible {
  outline: 0;
}

.filter-group input:focus-visible,.filter-group select:focus-visible {
  outline: 0;
}

@layer elements {
body,html {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  height: auto;
}

body {
  overflow-x: clip;
  scroll-behavior: smooth;
  font-family: var(--font-base);
  font-size: var(--font-md);
  line-height: var(--line-base);
  color: var(--text-primary);
  background: var(--background-color);
}
}

#aria-live-assertive,#aria-live-polite,#aria-live-status {
  inset-inline-start: -10000px!important;
  left: auto!important;
  right: auto!important;
}

@layer elements {
a {
  text-decoration: none;
}
}

[onclick],[role=button]:not([aria-disabled=true]),a[href]:not([aria-disabled=true]),button:not(:disabled),input[type=button]:not(:disabled),input[type=reset]:not(:disabled),input[type=submit]:not(:disabled),summary {
  cursor: pointer;
}

.swiper-button-disabled,[aria-disabled=true],button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled {
  cursor: not-allowed;
}

@layer elements {
.transition-base {
  transition: var(--transition-base);
}

.transition-300 {
  transition: all .3s ease;
}

.transition-600 {
  transition: var(--transition-slow);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

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

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}
}

@media (hover:hover) and (pointer:fine) {
  .lift-sm:hover {
    transform: var(--lift-sm);
  }

  .lift-md:hover {
    transform: var(--lift-md);
  }

  .lift-lg:hover {
    transform: var(--lift-lg);
  }
}

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

[data-lucide] {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.contact-item [data-lucide],.icon-svg [data-lucide],.team-contact-sidebar [data-lucide] {
  vertical-align: -.5em;
}

[data-lucide] svg {
  display: block;
}

.contact-item svg,.icon-svg svg,.team-contact-sidebar svg {
  display: inline-block;
  vertical-align: -.5em;
  width: 1em;
  height: 1em;
  line-height: 1;
}

@layer elements {
h1,h2,h3 {
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  font-size: var(--font-3xl);
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  margin-bottom: var(--padding-large);
}

h1 b,h1 em,h1 i,h1 strong {
  color: inherit;
  font-size: inherit;
  font-style: normal;
}

h2 {
  font-size: var(--font-2xl);
  font-weight: 700;
  line-height: var(--line-tight);
  margin-bottom: var(--space-md);
}

h2 b,h2 em,h2 i,h2 strong,h3 b,h3 em,h3 i,h3 strong {
  color: inherit;
  font-size: inherit;
  font-style: normal;
}
}

.elegant-header.style-1 {
  text-align: start;
  margin: var(--padding-large) 0 var(--padding-medium) 0;
}

.elegant-header.style-1 h2 {
  font-size: clamp(1.15rem, 3.5vw + .5rem, 2rem);
  font-weight: 600;
  color: var(--heading-color,#2e2e2e);
  
  letter-spacing: .08em;
  margin: 0;
  position: relative;
  padding-bottom: var(--space-lg);
  display: inline-block;
  max-width: 100%;
}

.elegant-header.style-1 h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: var(--brand-yellow,#f9c74f);
  border-radius: var(--border-radius-sm);
  transition: width .3s ease;
}

@layer elements {
p {
  font-size: var(--fs);
  line-height: var(--para-spacing);
}
}

.btn {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius-xxl);
  cursor: pointer;
  transition: var(--transition-base);
  text-align: center;
  text-decoration: none;
}

.btn:active {
  transform: scale(.97);
}

.btn-primary {
  background: var(--link-primary);
  color: var(--text-inverse);
}

.btn-secondary {
  background: var(--background-color);
  color: var(--heading-color);
  border: 2px solid var(--border-color);
}

.btn-load-more {
  padding: var(--space-md) var(--space-2xl);
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  background-color: var(--link-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--border-radius-full);
  text-decoration: none;
  text-align: center;
  transition: var(--transition-fast);
  display: inline-block;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

[hidden] {
  display: none!important;
}

.btn-load-more.is-loading {
  opacity: .75;
  cursor: wait;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-load-more:focus-visible {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}

.btn-load-more:active {
  transform: translateY(0);
}



.events-archive-link-container {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-medium);
  border-bottom: 1px solid var(--border-medium);
  display: flex;
  justify-content: center;
  align-items: center;
}

.ibz-empty-state {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-md);
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: 0 0;
  box-shadow: none;
  color: var(--text-muted);
}

.ibz-empty-state :is(.ibz-empty-state__icon,.no-events-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  color: var(--text-icon-muted);
  background: 0 0;
  border-radius: 0;
}

.ibz-empty-state :is(.ibz-empty-state__icon,.no-events-icon) svg {
  width: 1.65rem;
  height: 1.65rem;
  stroke-width: 1.8;
  opacity: .95;
}

.ibz-empty-state :is(.ibz-empty-state__message,.no-events-message) {
  margin: 0;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  overflow-wrap: anywhere;
}

.ibz-empty-state--centered {
  justify-content: center;
  margin-inline: auto;
  text-align: left;
}

.search-results-container .search-no-results.ibz-empty-state {
  margin-top: var(--space-sm);
  padding: 0;
  background: 0 0;
  border-radius: 0;
  box-shadow: none;
}

.department-unified-feed .department-feed-empty-state.ibz-empty-state {
  margin-top: .35rem;
}

.events-empty-state.ibz-empty-state {
  padding: 0;
}

.events-archive-grid .events-empty-state.ibz-empty-state {
  grid-column: 1/-1;
  justify-self: center;
}

.no-events-container.ibz-empty-state {
  justify-content: flex-start;
  width: auto;
  padding-right: 0;
}

@media (max-width:768px) {
  .ibz-empty-state {
    gap: .55rem;
  }

  .ibz-empty-state :is(.ibz-empty-state__icon,.no-events-icon) {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  .ibz-empty-state :is(.ibz-empty-state__icon,.no-events-icon) svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .ibz-empty-state :is(.ibz-empty-state__message,.no-events-message) {
    font-size: .95rem;
  }
}

.submit-button {
  background: var(--link-primary);
  color: var(--text-inverse);
  padding: 0.875rem var(--space-3xl);
  font-size: var(--font-lg);
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius-xxl);
  cursor: pointer;
  transition: var(--transition-base);
}

.submit-button:active {
  transform: translateY(0);
}

.load-map-btn {
  padding: var(--space-md) var(--space-2xl);
  background: var(--link-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--border-radius-xl);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--transition-base);
  margin-bottom: 1rem;
}

.scroll-up {
  background: var(--background-light);
  border: 2px solid var(--border-scroll-up);
  border-radius: var(--border-radius-round);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  color: var(--link-primary);
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

@media (min-width:769px) {
  .scroll-up {
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    z-index: var(--z-scroll-up);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .3s ease;
  }

  .scroll-up.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }@  media (prefers-reduced-motion:reduce) {
    .scroll-up{transition: opacity .3s ease,visibility .3s ease;
    transform: none;
  }

  .scroll-up.visible {
    transform: none;
  }
}}

.ibz-close-btn {
  background: 0 0;
  border: none;
  color: var(--text-close-btn);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s,color .2s;
  width: 44px;
  height: 44px;
}

.ibz-close-btn:focus-visible {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}

.ibz-close-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.container {
  max-width: 1152px;
  margin: 0 auto;
  padding: var(--padding-small);
}

.section-wrapper {
  max-width: 1100px;
  border-bottom: none;
  border-top: none;
  position: relative;
  padding-inline: 1rem;
  padding: var(--padding-medium);
  margin: 0 auto;
}

.page-title-fallback {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-sm);
  max-width: 900px;
  margin: 0 auto;
}

.section-wrapper h1 {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-sm);
}

.form-group input,.form-group select,.form-group textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-md);
  font-size: 1rem;
  transition: border-color var(--transition-base),box-shadow var(--transition-base);
}

.form-group input:focus-visible,.form-group select:focus-visible,.form-group textarea:focus-visible {
  outline: 0;
  border-color: var(--focus-color);
  box-shadow: 0 0 0 var(--focus-width) color-mix(in srgb,var(--focus-color) 20%,transparent);
}

.logo {
  position: relative;
  z-index: 11;
}

.custom-logo {
  width: auto!important;
  height: 60px!important;
  max-width: 200px!important;
}

@media (max-width:768px) {
  .custom-logo {
    height: 45px!important;
    max-width: 150px!important;
  }
}

.menu {
  all: unset;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  cursor: pointer;
}

.menu span {
  display: block;
  height: 3px;
  background: var(--text-primary);
  border-radius: var(--border-radius-sm);
  transition: transform .3s ease;
}

nav>a:active {
  background-color: var(--hover-color);
  color: var(--link-hover-color);
}

nav>a:focus-visible {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--brand-orange);
  z-index: var(--z-progress);
}

@media (hover:hover) and (pointer:fine) {
  .elegant-header.style-1:hover h2::after {
    width: 80px;
  }

  .btn:hover {
    transform: var(--lift-sm);
  }

  .btn-primary:hover {
    background: var(--link-hover);
  }

  .btn-secondary:hover {
    background: var(--background-light);
    border-color: var(--heading-color);
    box-shadow: var(--shadow-md);
  }

  .btn-load-more:hover {
    background-color: var(--link-hover-darker);
    box-shadow: var(--shadow-btn-hover);
    transform: translateY(-2px);
  }

  .submit-button:hover {
    background: var(--link-hover);
    transform: var(--lift-sm);
  }

  .load-map-btn:hover {
    background: var(--link-hover);
    transform: var(--lift-sm);
  }

  .scroll-up:hover {
    background: var(--link-primary);
    color: var(--text-inverse);
    border-color: var(--link-primary);
    transform: var(--lift-sm);
    box-shadow: var(--shadow-btn-hover);
  }

  .ibz-close-btn:hover {
    background-color: var(--background-close-hover);
    color: var(--brand-orange-hover);
  }

  .nav-orange:hover {
    background-color: var(--dept-orange-hover-bg);
    color: var(--dept-orange);
  }

  .nav-darkgreen:hover {
    background-color: var(--dept-darkgreen-hover-bg);
    color: var(--dept-darkgreen);
  }

  .nav-lightgreen:hover {
    background-color: var(--dept-lightgreen-hover-bg);
    color: var(--dept-lightgreen);
  }

  .nav-lightblue:hover {
    background-color: var(--dept-lightblue-hover-bg);
    color: var(--link-primary);
  }

  .nav-mediumblue:hover {
    background-color: var(--dept-mediumblue-hover-bg);
    color: var(--dept-mediumblue);
  }

  .nav-red:hover {
    background-color: var(--dept-red-hover-bg);
    color: var(--dept-red);
  }

  .nav-yellow:hover {
    background-color: var(--dept-yellow-hover-bg);
    color: var(--dept-yellow-text);
  }

  .nav-darkblue:hover {
    background-color: var(--dept-darkblue-hover-bg);
    color: var(--link-primary);
  }

  nav>a:hover {
    background-color: var(--hover-color);
    color: var(--link-hover-color);
  }
}

@media (max-width:768px) {
  .content-card h3 {
    font-size: var(--font-lg);
  }

  .sidebar-layout {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .content-column,.sidebar-column.left,.sidebar-column.right {
    width: 100%;
    padding: 1rem 1.2rem;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .event-tab-layout {
    display: grid;
    gap: 1rem;
  }

  .event-tab-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    gap: .5rem;
  }

  .event-tab-btn {
    flex: 1 1 auto;
    border-radius: var(--border-radius-lg);
    justify-content: center;
    text-align: center;
  }
}

@media (max-width:900px) {
  .tab-panel.active {
    grid-template-columns: 1fr;
  }
}

@media (max-width:610px) {
  .article {
    flex: 1 1 100%;
  }
}

@media (max-width:480px) {
  .container {
    padding: var(--padding-medium);
  }
}

@media (max-width:375px) {
  .event-card {
    max-width: 270px;
  }
}

@media (max-width:800px) {
  .article {
    flex: 1 1 48%;
  }
}

@media (max-width:1069px) {
  .event-tab-layout .sidebar-column.right {
    display: none;
  }

  .sidebar-layout {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion:reduce) {
  svg path {
    animation: none!important;
    opacity: 1!important;
    transform: none!important;
  }

  .form-group input,.form-group textarea,.submit-button {
    transition: none;
  }

  .site-main.contact-page::after,.site-main.contact-page::before {
    animation: none!important;
  }

  .site-main.contact-page::before {
    transform: translateX(-50%) translateX(-50px);
  }

  .site-main.contact-page::after {
    transform: translateX(-50%) translateX(50px);
  }

  .hero-section {
    transition: none;
  }
}

@media (prefers-contrast:high) {
  .form-section {
    border-width: 3px;
  }

  .form-group input,.form-group textarea {
    border-width: 3px;
  }

  .submit-button {
    border: 3px solid var(--text-inverse);
  }
}

.fp-dept-icon {
  width: 100%;
  max-width: 160px;
  max-height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.rapidmail-form-section iframe {
  min-height: 750px!important;
  overflow: hidden!important;
}

@media (max-width:768px) {
  .rapidmail-form-section iframe {
    min-height: 1000px!important;
  }
}

#mobileNav a:focus-visible,#mobileNav button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-style-inset);
}

#desktop-search-field:focus {
  outline: 0;
}

#desktop-search-field:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.social-links-bar--desktop-left {
  display: none;
  position: fixed;
  left: var(--padding-medium,2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 94px;
  min-height: 120px;
}

@media (min-width:1025px) {
  .social-links-bar--desktop-left {
    display: flex;
  }
}

.social-mobile-container {
  display: none;
  position: fixed;
  bottom: 20px;
  left: var(--padding-medium,2rem);
  z-index: 1000;
  width: 50px;
  height: 50px;
}

@media (max-width:1024px) {
  .social-mobile-container {
    display: block;
  }
}

/* Eye-Able — hide default widget (shadow DOM can't be styled), show custom trigger */
#eyeAble_container_ID {
  display: none !important;
}

/* ── Logo swap (ACF-responsive) ── */
body:not(.use-compact-logo) .custom-logo--compact { display: none; }
body:not(.use-compact-logo) .custom-logo--desktop { display: inline-block; }
body.use-compact-logo .custom-logo--desktop { display: none; }
body.use-compact-logo .custom-logo--compact { display: inline-block; }

/* ── Accordion toggle icon rotation (about-page house groups) ── */
.group-toggle[aria-expanded=true] .toggle-icon { transform: rotate(45deg); }

/* ── Mobile social bar toggle ── */
.social-mobile-expanded {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.social-mobile-expanded.is-active {
  opacity: 1;
  visibility: visible;
}

/* ───────────────────────────────────────────────────────────
   Formulare: JS-Zustände & Spezialregeln (Anmeldung/Kontakt)
   ─────────────────────────────────────────────────────────── */
#iban {
  
  letter-spacing: 0.05em;
  font-family: monospace;
}

.submit-button.loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}

.checkbox-wrapper.has-error {
  outline: 2px solid #d7001c;
  outline-offset: 2px;
}

@media print {
  .form-section {
    page-break-inside: avoid;
  }

  .submit-button,
  .mobile-filter-trigger {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .submit-button,
  .step-badge,
  .team-member-card,
  .mobile-filter-trigger,
  .course-grid .course-card-wrapper.ajax-enter,
  .course-grid .integration-course-card.ajax-enter,
  #course-filters {
    transition: none !important;
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  .form-section {
    border-width: 2px;
  }
}

/* ---------------------------------------------------------
   Page Transition Overlay + Homepage Preloader
   --------------------------------------------------------- */
#ibz-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf7f2;
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
  pointer-events: none;
}

#ibz-transition-overlay.is-preloader,
#ibz-transition-overlay.is-active {
  transform: none;
  pointer-events: auto;
}

#ibz-transition-overlay.is-leaving {
  transform: translateY(-101%);
}

#ibz-transition-overlay.is-instant {
  transition: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Preloader (edition 2): Logo-Build + Brand-Progressbar + elegante Exit-Choreo
   ═══════════════════════════════════════════════════════════════════════ */

.ibz-transition-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.ibz-transition-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: min(52vw, 552px); /* exakt so breit wie das Preloader-Logo */
}

@media (max-width: 1023px) {
  .ibz-transition-stage {
    width: min(80vw, 48vh);
  }
}

/* Logo: Layer bauen sich federnd auf, danach sanftes Atmen */
.ibz-transition-logo {
  width: 100%;
  animation: ibz-preloader-breathe 2.6s ease-in-out 1.1s infinite;
}

.ibz-transition-logo svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(22, 41, 79, 0.12));
}

/* Gestaffeltes Layer-Reveal (Lottie-Look) mit den IBZ-Logo-Shapes */
.ibz-transition-logo .ibz-logo-layer {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ibz-pre-layer-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--ibz-i, 0) * 0.06s + 0.15s);
}

.ibz-transition-logo .ibz-logo-layer--1 { --ibz-i: 0; }
.ibz-transition-logo .ibz-logo-layer--2 { --ibz-i: 1; }
.ibz-transition-logo .ibz-logo-layer--3 { --ibz-i: 2; }
.ibz-transition-logo .ibz-logo-layer--4 { --ibz-i: 3; }
.ibz-transition-logo .ibz-logo-layer--5 { --ibz-i: 4; }
.ibz-transition-logo .ibz-logo-layer--6 { --ibz-i: 5; }
.ibz-transition-logo .ibz-logo-layer--7 { --ibz-i: 6; }
.ibz-transition-logo .ibz-logo-layer--8 { --ibz-i: 7; }
.ibz-transition-logo .ibz-logo-layer--9 { --ibz-i: 8; }
.ibz-transition-logo .ibz-logo-layer--10 { --ibz-i: 9; }
.ibz-transition-logo .ibz-logo-layer--11 { --ibz-i: 10; }

@keyframes ibz-pre-layer-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.72);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ibz-preloader-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Progressbar: Brand-Gradient + Shimmer */
.ibz-transition-bar {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 9999px;
  background: rgba(22, 41, 79, 0.1);
  overflow: hidden;
}

.ibz-transition-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00b2c0, #16294f 55%, #e2622c);
  position: relative;
  transition: width 0.16s ease;
}

.ibz-transition-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ibz-bar-shimmer 1.6s linear infinite;
}

@keyframes ibz-bar-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -90% 0; }
}

/* Meta: Status + Prozent */
.ibz-transition-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.ibz-transition-status {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #16294f;
  opacity: 0.85;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ibz-transition-status.is-swapping {
  opacity: 0;
  transform: translateY(4px);
}

.ibz-transition-pct {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #00b2c0;
  opacity: 0;
  animation: ibz-preloader-fade-in 0.8s ease both 1.4s;
}

/* Exit-Choreo: Stage schwebt auf, waehrend der Overlay hochfaehrt */
#ibz-transition-overlay.is-leaving .ibz-transition-stage {
  animation: ibz-pre-exit 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero-Logo: Preloader-Build als langsamer Endlos-Loop (Startseite)
   ═══════════════════════════════════════════════════════════════════════ */

.ibz-hero-logo {
  position: relative;
  z-index: 0;
}

/* Full-Bleed-Hintergrund: Animation deckt den gesamten Hero ab */
.ibz-hero-logo--back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;             /* Desktop: vertikal zentriert (war perfekt) */
  justify-content: flex-end;       /* Desktop: rechts */
  padding-right: clamp(1rem, 6vw, 7rem);
  pointer-events: none;
}

.ibz-hero-logo--back .ibz-hero-logo-main {
  width: min(52vw, 552px); /* +20% groesser (war 44vw/460px) */
  max-width: 100%;
}

/* Mobil (Hochformat): Groesse an der Viewport-HOEHE ausrichten,
   sonst wird die Animation viel zu klein */
@media (max-width: 1023px) {
  #hero {
    min-height: 88vh; /* Hero hoeher auf Mobile */
  }

  /* Mobile: Animation oben, 25% nach rechts, ohne Deko-Extras; Text nach unten */
  .ibz-hero-logo--back {
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
    transform: translateX(25vw);
  }

  #hero .ibz-hero-logo .ibz-hero-logo-extra {
    display: none;
  }

  #hero div.max-w-3xl {
    margin-top: 17vh;
  }

  .ibz-hero-logo--back .ibz-hero-logo-main {
    width: min(80vw, 48vh);
  }
}



.ibz-hero-logo svg {
  overflow: visible;
}

/* Hauptlogo atmet sanft waerend des Build-Halts (kein statischer Moment) */
.ibz-hero-logo-main {
  animation: ibz-preloader-breathe 3.4s ease-in-out infinite;
}


/* Preloader nutzt die Hero-Animation: exakt gleiche Logo-Groesse wie der Hero */
.ibz-transition-stage .ibz-hero-logo--preloader {
  width: 100%;
  transform: translateX(7%); /* NUR die Animation versetzen, nicht den Text */
}

@media (max-width: 1023px) {
  .ibz-transition-stage .ibz-hero-logo--preloader {
    width: min(80vw, 48vh);
  }
}

/* Extra-Illustrations-Shapes (Group, abstract-63, shapes-2, m-co-illu-6/7)
   erscheinen nur in der Collage-Runde (JS setzt Transform + Opacity) */
.ibz-hero-logo .ibz-hero-logo-extra {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3; /* Illus liegen UEBER den Geo-Shapes */
  pointer-events: none;
  transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1), top 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}

.ibz-hero-logo .ibz-hero-logo-extra svg {
  display: block;
  width: 100%;
  height: auto;
  transform-box: fill-box;
  transform-origin: center;
  animation: ibz-collage-drift var(--ibz-drift-dur, 5s) infinite;
  animation-delay: var(--ibz-drift-delay, 0s);
}

.ibz-hero-logo .ibz-logo-layer {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ibz-hero-layer-cycle var(--ibz-cycle, 5s) linear infinite;
  animation-delay: calc(var(--ibz-i, 0) * var(--ibz-stagger, 0.22s));
}

.ibz-hero-logo .ibz-logo-layer--1 { --ibz-i: 0; }
.ibz-hero-logo .ibz-logo-layer--2 { --ibz-i: 1; }
.ibz-hero-logo .ibz-logo-layer--3 { --ibz-i: 2; }
.ibz-hero-logo .ibz-logo-layer--4 { --ibz-i: 3; }
.ibz-hero-logo .ibz-logo-layer--5 { --ibz-i: 4; }
.ibz-hero-logo .ibz-logo-layer--6 { --ibz-i: 5; }
.ibz-hero-logo .ibz-logo-layer--7 { --ibz-i: 6; }
.ibz-hero-logo .ibz-logo-layer--8 { --ibz-i: 7; }
.ibz-hero-logo .ibz-logo-layer--9 { --ibz-i: 8; }
.ibz-hero-logo .ibz-logo-layer--10 { --ibz-i: 9; }
.ibz-hero-logo .ibz-logo-layer--11 { --ibz-i: 10; }

@keyframes ibz-hero-layer-cycle {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.7) rotate(var(--ibz-r, 0deg));
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  11%, 70% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--ibz-r, 0deg));
    animation-timing-function: ease-in-out;
  }
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.92) rotate(var(--ibz-r, 0deg));
  }
}

/* Collage-Modus: Layer schweben als geometrische Komposition (JS-Transitions) */
.ibz-hero-logo.is-collage .ibz-logo-layer {
  animation: none !important;
  opacity: 0;
  transform: translate(0px, 0px) rotate(0deg) scale(0.25);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ibz-hero-logo .ibz-logo-layer {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Nav-Modus (Seitenwechsel): nur Logo-Build, ohne Bar/Status */
#ibz-transition-overlay.is-nav .ibz-transition-bar,
#ibz-transition-overlay.is-nav .ibz-transition-meta,
#ibz-transition-overlay.is-nav .ibz-transition-status {
  display: none;
}

#ibz-transition-overlay.is-nav .ibz-transition-stage {
  gap: 0;
}

@keyframes ibz-pre-exit {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-42px) scale(1.05); }
}

@keyframes ibz-preloader-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ibz-transition-overlay,
  #ibz-transition-overlay.is-preloader,
  #ibz-transition-overlay.is-active {
    display: none;
  }
}

#ibz-scroll-down svg {
  animation: ibz-bounce 2s ease-in-out infinite;
}

/* ---------------------------------------------------------
   Custom Accessibility Toolbar
   --------------------------------------------------------- */
#ibz-a11y-toolbar {
  position: fixed;
  left: 1.5rem;
  bottom: 5.5rem;
  z-index: 99998;
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--brand-orange);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 1rem;
  font-family: 'Sarabun', system-ui, sans-serif;
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

#ibz-a11y-toolbar[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.ibz-a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.ibz-a11y-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ibz-a11y-close-btn {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 0.25rem;
}

.ibz-a11y-close-btn:hover {
  color: var(--brand-orange);
}

.ibz-a11y-group {
  margin-bottom: 0.75rem;
}

.ibz-a11y-group--bordered {
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
  margin-bottom: 0;
}

.ibz-a11y-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.ibz-a11y-font-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ibz-a11y-btn-sm {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-color);
  background: #faf7f2;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ibz-a11y-btn-sm:hover {
  background: var(--brand-orange);
  color: #fff;
  border-color: var(--brand-orange);
}

.ibz-a11y-font-val {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ibz-a11y-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border-color);
  background: #faf7f2;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.ibz-a11y-toggle-btn:hover {
  background: #f1ece1;
}

.ibz-a11y-toggle-btn[aria-pressed="true"] {
  background: var(--brand-orange);
  color: #fff;
  border-color: var(--brand-orange);
}

.ibz-a11y-reset-btn {
  width: 100%;
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 8px;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.ibz-a11y-reset-btn:hover {
  color: var(--brand-orange);
  border-color: var(--brand-orange);
}

/* ---------------------------------------------------------
   Accessibility toolbar feature modes.
   NOTE: we avoid filter: contrast()/invert() on body — a filter on an
   ancestor creates a new containing block for position:fixed descendants,
   which makes the fixed toolbar fly off-viewport. Instead we override
   actual colors where possible, and only apply filters to a wrapper
   element when a pure color override isn't feasible.
   --------------------------------------------------------- */

/* 1. High contrast */
html.a11y-contrast {
  --text-primary: #000000 !important;
  --text-secondary: #000000 !important;
  --text-muted: #000000 !important;
  --link-primary: #0000ee !important;
  --link-hover: #551a8b !important;
  --link-color: #0000ee !important;
  --background-color: #ffffff !important;
  --brand-orange: #000000 !important;
  --border-color: #000000 !important;
  --dept-orange: #000000 !important;
}

html.a11y-contrast body,
html.a11y-contrast #main-content,
html.a11y-contrast .site-content {
  color: #000000 !important;
  background-color: #ffffff !important;
}

html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span {
  color: #000000 !important;
  background-color: transparent !important;
}

html.a11y-contrast a {
  color: #0000ee !important;
  text-decoration: underline !important;
}
html.a11y-contrast a:hover, html.a11y-contrast a:focus {
  color: #551a8b !important;
}

html.a11y-contrast header, html.a11y-contrast footer, html.a11y-contrast nav,
html.a11y-contrast section, html.a11y-contrast article, html.a11y-contrast aside,
html.a11y-contrast .card {
  background-color: #ffffff !important;
  border-color: #000000 !important;
}

html.a11y-contrast :is(a, button, input, textarea, select) {
  outline: 2px solid #000000 !important;
  outline-offset: 2px;
}

/* 2. Dark / inverted theme.
   Using filter on html is acceptable here because the a11y-toolbar itself
   inherits it too and we re-paint the toolbar to stay readable. */
html.a11y-invert {
  filter: invert(1) hue-rotate(180deg);
  background: #000;
}
html.a11y-invert img,
html.a11y-invert picture,
html.a11y-invert video,
html.a11y-invert svg,
html.a11y-invert .ibz-mark {
  filter: invert(1) hue-rotate(180deg);
}
html.a11y-invert #ibz-a11y-toolbar {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
  color: #000;
}

/* 3. Grayscale */
html.a11y-grayscale {
  filter: grayscale(1);
}
html.a11y-grayscale img,
html.a11y-grayscale picture,
html.a11y-grayscale video {
  filter: grayscale(1);
}

/* 4. Underline links */
html.a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* 5. Highlight links */
html.a11y-highlight-links a {
  background-color: #ffff00 !important;
  color: #000000 !important;
  text-decoration: underline !important;
}

/* 6. Highlight headings */
html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4,
html.a11y-highlight-headings h5,
html.a11y-highlight-headings h6 {
  background-color: #ffff00 !important;
  color: #000000 !important;
  box-shadow: 0 0 0 4px #ffff00 !important;
}

/* 7. Letter spacing */
html.a11y-letter-spacing body,
html.a11y-letter-spacing p,
html.a11y-letter-spacing li,
html.a11y-letter-spacing a,
html.a11y-letter-spacing h1,
html.a11y-letter-spacing h2,
html.a11y-letter-spacing h3,
html.a11y-letter-spacing h4,
html.a11y-letter-spacing h5,
html.a11y-letter-spacing h6 {
  letter-spacing: 0.12em !important;
}

/* 8. Line height */
html.a11y-line-height body,
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height span {
  line-height: 1.9 !important;
}

/* 9. Focus ring */
html.a11y-focus-ring :is(a, button, input, textarea, select, summary, [tabindex]) {
  outline: 3px solid #0000ee !important;
  outline-offset: 3px !important;
}

/* 10. Big cursor */
html.a11y-big-cursor * {
  cursor: auto !important;
}
html.a11y-big-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M5 2l22 13-10 2-4 8z" fill="black" stroke="white" stroke-width="2"/></svg>') 4 2, auto;
}

/* 11. Reading guide (line marker) */
.a11y-reading-guide-el {
  position: fixed;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 213, 79, 0.35);
  border-top: 2px solid #ffd54f;
  border-bottom: 2px solid #ffd54f;
  pointer-events: none;
  z-index: 99990;
  display: none;
}
.a11y-reading-guide-el.is-active {
  display: block;
}

/* 12. Pause animations */
html.a11y-no-animation *,
html.a11y-no-animation *::before,
html.a11y-no-animation *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* 13. Dyslexia font */
html.a11y-dyslexia,
html.a11y-dyslexia body,
html.a11y-dyslexia p,
html.a11y-dyslexia a,
html.a11y-dyslexia h1,
html.a11y-dyslexia h2,
html.a11y-dyslexia h3,
html.a11y-dyslexia h4,
html.a11y-dyslexia h5,
html.a11y-dyslexia h6,
html.a11y-dyslexia li,
html.a11y-dyslexia span,
html.a11y-dyslexia button,
html.a11y-dyslexia input,
html.a11y-dyslexia select,
html.a11y-dyslexia textarea {
  font-family: 'OpenDyslexic', 'Sarabun', system-ui, sans-serif !important;
}

/* ── Mobile accessibility toolbar ── */
@media (max-width: 768px) {
  /* Trigger button: move to bottom-right, circular */
  #ibz-a11y-trigger {
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    z-index: 99999 !important;
    width: 3rem;
    height: 3rem;
    border-radius: 50% !important;
    padding: 0 !important;
    justify-content: center;
    gap: 0;
  }

  #ibz-a11y-trigger > span {
    display: none;
  }

  #ibz-a11y-trigger svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* Toolbar: full-width bottom sheet */
  #ibz-a11y-toolbar {
    left: 0 !important;
    right: 0;
    bottom: 0 !important;
    top: auto;
    width: 100% !important;
    max-width: 100%;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1.25rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }

  #ibz-a11y-toolbar[aria-hidden="false"] {
    transform: translateY(0);
  }

  /* Toggle buttons: 2-column grid */
  .ibz-a11y-toggle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .ibz-a11y-toggle-grid .ibz-a11y-group {
    margin-bottom: 0;
  }

  .ibz-a11y-toggle-btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
    min-height: 44px;
  }

  .ibz-a11y-toggle-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* Reading guide full width */
  .a11y-reading-guide-el {
    left: 0;
    width: 100%;
  }

  /* Lock background scroll when sheet is open */
  body.ibz-a11y-sheet-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
}

@media (max-width: 480px) {
  #ibz-a11y-toolbar {
    max-height: 70vh;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .ibz-a11y-toggle-btn {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #ibz-a11y-toolbar {
    transition: none;
  }
}

@keyframes ibz-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

/* A11y toolbar credit */
.ibz-a11y-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted, #5c5c5c);
}

.ibz-a11y-credit a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.ibz-a11y-credit-logo,
.ibz-credit-logo {
  height: 0.875rem;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Backdrop overlay (mobile) */
.ibz-a11y-backdrop {
  display: none;
}

.ibz-a11y-backdrop[aria-hidden="false"] {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99997;
}

@media (min-width: 769px) {
  .ibz-a11y-backdrop {
    display: none !important;
  }
}

/* Drag handle (mobile bottom sheet) */
.ibz-a11y-drag-handle {
  display: none;
}

@media (max-width: 768px) {
  .ibz-a11y-drag-handle {
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: 2px;
    background: #d0d0d0;
    margin: 0 auto 0.75rem;
  }
}

/* ── IBZ logo layers: gestaffeltes Reveal + Atmen (Preloader) ──
   (Animationen fuer .ibz-logo-layer stehen im Preloader-Block oben.) */

@media (prefers-reduced-motion: reduce) {
  .ibz-logo-layer {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Override WP core's oversized lazy-load placeholder (3000x1500px).
   Our images use aspect-ratio / explicit dimensions, so let the layout
   use those instead of the giant intrinsic-size hint. */
@layer elements {
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: auto;
}
}

/* ── WordPress Gallery (wp-block-gallery): grosses Grid statt Winz-Flex ── */
.wp-block-gallery.has-nested-images {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 1rem !important;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
}

.wp-block-gallery.has-nested-images .wp-block-image {
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wp-block-gallery.has-nested-images .wp-block-image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
  box-shadow: var(--tw-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.wp-block-gallery.has-nested-images .wp-block-image:hover img {
  transform: scale(1.02);
}

/* ── Lightbox (IBZ-Style) ── */
.ibz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 41, 79, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ibz-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.ibz-lightbox__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
}

.ibz-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: ibz-lightbox-pop 0.28s ease;
}

@keyframes ibz-lightbox-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.ibz-lightbox__caption {
  color: #fff7e8;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  max-width: 70ch;
}

.ibz-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  color: #fff7e8;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.ibz-lightbox__btn:hover {
  background: #00b2c0;
  transform: scale(1.06);
}

.ibz-lightbox__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ibz-lightbox__prev {
  left: -4.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.ibz-lightbox__next {
  right: -4.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.ibz-lightbox__prev:hover,
.ibz-lightbox__next:hover {
  transform: translateY(-50%) scale(1.06);
}

.ibz-lightbox__close {
  top: 0;
  right: -4.5rem;
  background: #c2410c;
}

.ibz-lightbox__close:hover {
  background: #d94a12;
  transform: scale(1.06);
}

.ibz-lightbox__counter {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff7e8;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
  .ibz-lightbox__prev { left: 0.5rem; }
  .ibz-lightbox__next { right: 0.5rem; }
  .ibz-lightbox__close { top: 0.5rem; right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ibz-lightbox__img { animation: none; }
}

/* ── dept-hero: Defaults global (Pages nutzen page-hero.php, auch ohne dept-template-main.css) ── */
.dept-hero {
  --dept-hero-bg: #16294f;
  --dept-hero-fg: #ffffff;
  background-color: var(--dept-hero-bg);
}

/* Collage-Holder: Position/Bewegung auf HTML-Ebene (GPU-smooth, kein SVG-Transform-Jank).
   Das SVG-Kind traegt nur den sanften Drift. */
.ibz-hero-logo .ibz-collage-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1; /* Geo-Shapes unter den Illus */
  pointer-events: none;
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s ease; /* ease-in-out */
}

.ibz-hero-logo .ibz-collage-holder > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ibz-collage-drift var(--ibz-drift-dur, 4s) infinite;
  animation-delay: var(--ibz-drift-delay, 0s);
}

@keyframes ibz-collage-drift {
  0% {
    transform: translateY(0) rotate(0deg);
    animation-timing-function: ease-in; /* Beschleunigung */
  }
  45% {
    transform: translateY(var(--ibz-drift-amp, -8px)) rotate(var(--ibz-drift-rot, 3deg));
    animation-timing-function: ease-out; /* Abbremsen */
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}