/*
Theme Name: IVIP Institut
Theme URI: https://ivip-institut.at
Author: Custom Development
Description: Minimalistisches Custom-Theme für das IVIP Institut. Schwarz-weiß Design mit konfigurierbarem Mega-Menü, mobilem Slide-In Menü und anpassbarem Header.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: Private
Text Domain: ivip
*/

/* ============================================================
   CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-black: #0a0a0a;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-mid: #e0e0e0;
  --font-main: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --header-height: 120px;
  --transition-speed: 0.35s;
  --transition-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-main);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-speed) var(--transition-ease);
}

a:hover {
  opacity: 0.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.2;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease);
}

.site-header.scrolled {
  border-color: var(--color-gray-mid);
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}

.header-inner {
  width: 100%;
  max-width: 1500px;
  margin: 20px auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 60px;
}

/* ============================================================
   LOGO
   ============================================================ */
.site-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo a {
  display: flex;
  align-items: center;
}

/* Inline SVG logo — height drives size, width auto from viewBox */
.site-logo svg {
  height: 150px;
  width: auto;
  display: block;
  fill: var(--color-black);
}

/* Custom logo via WP (img tag) */
.site-logo .custom-logo-link img {
  height: 56px;
  width: auto;
  display: block;
}

/* Text fallback */
.site-logo .logo-text-main {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--color-black);
  line-height: 1;
}

.site-logo .logo-text-sub {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-black);
  line-height: 1;
  margin-top: 2px;
}

/* ============================================================
   PRIMARY NAVIGATION (DESKTOP)
   ============================================================ */
.primary-nav {
  flex: 1;
  display: flex;
  align-items: center;
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
}

.primary-nav > ul > li {
  position: relative;
  max-width: 100%;
}

.primary-nav > ul > li > a {
  display: block;
  padding: 8px 20px;
  font-family: var(--font-main);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-black);
  letter-spacing: 0;
  white-space: normal; /* allow wrap */
}

.primary-nav > ul > li > a:hover {
  opacity: 0.5;
}

/* ============================================================
   HAMBURGER BUTTON (DESKTOP) — custom SVG icon
   ============================================================ */
.burger-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: opacity var(--transition-speed);
  position: relative;
}

.burger-btn:hover {
  opacity: 0.5;
}

/* SVG open icon */
.burger-icon--open {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

.burger-icon--open svg {
  width: 22px;
  height: auto;
  fill: var(--color-black);
  display: block;
}

/* × close icon – hidden by default */
.burger-icon--close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  line-height: 0;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.burger-icon--close svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: var(--color-black);
}

/* Active state: hide SVG, show × */
.burger-btn.is-active .burger-icon--open {
  opacity: 0;
  transform: scale(0.6);
}

.burger-btn.is-active .burger-icon--close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   MEGA MENU (DESKTOP EXPANDED) - full viewport width, covers logo
   ============================================================ */
.mega-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--color-white);
  transform: translateY(-100%);
  transition: transform var(--transition-speed) var(--transition-ease);
  width: 100%;
}

.mega-menu-overlay.is-open {
  transform: translateY(0);
}

.mega-menu-inner {
  padding: 0 120px;
}

/* ---- Top row: close button aligned right, same height as header ---- */
.mega-menu-top {
  display: flex;
  align-items: flex-start;
  padding-top: 28px;
  padding-bottom: 28px;
  position: relative;
}

/* 5-column grid for primary nav items */
.mega-menu-top ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  flex: 1;
  list-style: none;
  width: calc(100% - 48px); /* leave room for × button */
}

.mega-menu-top ul li {
  max-width: 150px;
  padding-bottom: 60px;
}

.mega-menu-top ul li a {
  display: block;
  padding: 4px 0 0 0;
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  white-space: normal;
  line-height: 1.3;
  color: var(--color-black);
  letter-spacing: 0;
}

.mega-menu-top ul li a:hover {
  opacity: 0.5;
}

.mega-menu-close {
  position: absolute;
  top: 24px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  color: var(--color-black);
  transition: opacity var(--transition-speed);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.mega-menu-close svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: var(--color-black);
}

.mega-menu-close:hover {
  opacity: 0.4;
}

/* ---- Secondary row: same 5-col grid ---- */
.mega-menu-secondary {
  display: flex;
  align-items: flex-start;
}

.mega-menu-secondary ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  list-style: none;
  width: 100%;
}

.mega-menu-secondary ul li {
  max-width: 150px;
  padding-bottom: 60px;
}

.mega-menu-secondary ul li a {
  display: block;
  padding: 4px 0 0 0;
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  white-space: normal;
  line-height: 1.3;
  color: var(--color-black);
  letter-spacing: 0;
}

.mega-menu-secondary ul li a:hover {
  opacity: 0.5;
}

/* ---- Footer: image natural size + slogan centered ---- */
.mega-menu-footer {
  display: flex;
  align-items: center;
  padding-bottom: 40px;
  gap: 32px;
}

.mega-menu-footer-image {
  flex-shrink: 0;
  /* No width/height — image renders at natural size */
  overflow: hidden;
  border-radius: 0;
}

.mega-menu-footer-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.mega-menu-footer-slogan {
  flex: 1;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--color-black);
  line-height: 1.55;
  align-self: center;
}

/* ============================================================
   MOBILE HEADER
   ============================================================ */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--color-white);
  height: 80px;
  align-items: center;
  padding: 0 30px 0 0;
  justify-content: space-between;
}

.mobile-logo {
  display: flex;
  align-items: center;
}

.mobile-logo a {
  display: flex;
  align-items: center;
}

/* Inline SVG — "ivip" without subtext */
.mobile-logo svg {
  height: 120px;
  width: auto;
  display: block;
  fill: var(--color-black);
}

.mobile-logo .logo-image {
  height: 36px;
  width: auto;
  display: block;
}

.mobile-logo .logo-text {
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  color: var(--color-black);
  position: relative;
  transition: opacity var(--transition-speed);
}

.mobile-menu-toggle:hover {
  opacity: 0.5;
}

/* Reuse burger-icon classes — defined in desktop burger section */
/* The .burger-icon--open and .burger-icon--close classes handle open/close state */
.mobile-menu-toggle .burger-icon--open svg {
  width: 22px;
  height: auto;
  fill: var(--color-black);
  display: block;
}

.mobile-menu-toggle.is-active .burger-icon--open {
  opacity: 0;
  transform: scale(0.6);
}

.mobile-menu-toggle.is-active .burger-icon--close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   MOBILE FULL-SCREEN MENU
   ============================================================ */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-speed) var(--transition-ease);
  overflow-y: auto;
  padding: 80px 30px 40px;
}

.mobile-nav-overlay.is-open {
  transform: translateX(0);
}

.mobile-nav-overlay nav ul {
  list-style: none;
}

.mobile-nav-overlay nav > ul > li {
  border-bottom: 1px solid var(--color-gray-mid);
}

.mobile-nav-overlay nav > ul > li > a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-main);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-black);
}

.mobile-nav-secondary {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid var(--color-black);
}

.mobile-nav-secondary ul {
  list-style: none;
}

.mobile-nav-secondary ul li a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-black);
  opacity: 0.7;
}

/* Mobile mega menu footer */
.mobile-menu-footer {
  padding-top: 30px;
}

.mobile-menu-footer-image {
  width: 160px;
  height: 60px;
  overflow: hidden;
  border-radius: 0; /* eckig */
  margin-bottom: 16px;
}

.mobile-menu-footer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-menu-footer-slogan {
  font-family: var(--font-main);
  font-size: 18px;
  font-style: italic;
  color: var(--color-black);
  line-height: 1.5;
}

/* ============================================================
   HERO / HEADER IMAGE AREA
   ============================================================ */
.site-hero {
  padding-top: var(--header-height);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.site-content {
  padding-top: var(--header-height);
  min-height: 50vh;
}

.content-area {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 40px;
}

/* ============================================================
   SVG DIVIDER
   ============================================================ */
.footer-divider {
  width: 100%;
  display: block;
  overflow: hidden;
  line-height: 0;
  margin-bottom: 0;
}

.footer-divider svg {
  height: auto;
  width: auto;
  display: block;
  margin: 200px 150px 0 150px;
}

.footer-divider path {
  fill: var(--color-black);
  stroke: none;
}

/* ============================================================
   SITE FOOTER — 3-column
   ============================================================ */
.site-footer {
  padding: 50px 40px 40px;
}

.footer-menus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}

@media (min-width: 1024px) {
  .site-footer {
    padding: 20px 150px 0;
  }

  .footer-menus {
    margin-bottom: 0;
  }

  .footer-bottom {
    align-items: center;
  }
}

.footer-menu-col ul {
  list-style: none;
}

.footer-menu-col ul li {
  margin-bottom: 6px;
}

.footer-menu-col ul li a {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0;
}

.footer-menu-col ul li a:hover {
  opacity: 0.5;
}

.footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-copyright {
  font-family: var(--font-main);
  font-size: 18px;
  font-style: italic;
  color: var(--color-black);
  line-height: 1.5;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.footer-logo a {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-logo .footer-logo-image {
  height: 150px;
  width: auto;
}

/* Desktop: zeige Institut-Logo, verstecke mobiles Logo */
.footer-logo-desktop {
  display: inline-flex;
}

.footer-logo-desktop svg {
  height: 150px;
  width: auto;
  display: block;
  fill: var(--color-black);
}

.footer-logo-mobile {
  display: none;
}

.footer-logo-mobile svg {
  height: 80px;
  width: auto;
  display: block;
  fill: var(--color-black);
}

.footer-logo .footer-logo-text-main {
  font-family: var(--font-main);
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--color-black);
  line-height: 1;
}

.footer-logo .footer-logo-text-sub {
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--color-black);
  line-height: 1;
  margin-top: 3px;
}

/* ============================================================
   UTILITY
   ============================================================ */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 24px;
    gap: 30px;
    margin-top: 20px;
  }

  .primary-nav > ul > li > a {
    padding: 8px 12px;
    font-size: 16px;
  }

  .mega-menu-inner {
    padding: 0 60px;
  }

  /* 3 columns on tablet */
  .mega-menu-top ul,
  .mega-menu-secondary ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .mega-menu-top ul li,
  .mega-menu-secondary ul li {
    max-width: none;
    padding-bottom: 40px;
  }

  .mega-menu-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .mega-menu-footer-image {
    flex: none;
    width: 100%;
  }

  .site-footer {
    padding: 50px 24px 30px;
  }

  .footer-menus {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .site-header {
    display: none;
  }

  .mobile-header {
    display: flex;
  }

  .mobile-nav-overlay {
    display: block;
  }

  .site-content {
    padding-top: 80px;
  }

  .site-hero {
    padding-top: 80px;
  }

  /* Footer: 1 column on mobile */
  .footer-menus {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
    padding-left: 25px;
  }

  .footer-copyright {
    padding-left: 25px;
  }

  .site-footer {
    padding: 40px 20px 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-logo {
    display: none;
  }

  /* Mobile: Institut-Logo verstecken, kurzes ivip-Logo zeigen */
  .footer-logo-desktop {
    display: none;
  }

  .footer-logo-mobile {
    display: inline-flex;
  }
}


/* ============================================================
   KOLIBRI + ZITAT BLOCK — nur Startseite (front-page.php)
   ============================================================ */

:root {
  --kolibri-size: 300px;
}

/* ---- Mobile nav font size ---- */
.mobile-nav-overlay nav > ul > li > a {
  font-size: 20px;
}

.mobile-menu-footer-slogan {
  font-size: 18px;
}

/* ---- Mobile footer divider ---- */
@media (max-width: 768px) {
  .footer-divider svg {
    margin: 0;
  }
}

/* ---- Hero block: zentrierte 50%-Spalte ---- */
.hero-kolibri-block {
  position: relative;
  padding: 360px 0 0 0;
  margin: auto;
  width: 50%;
  overflow: unset;
  box-sizing: border-box;
}

/* ============================================================
   KOLIBRI FLIGHT WRAPPER — handles diagonal flight position
   ============================================================ */
.kolibri-flight-wrap {
  position: absolute;
  top: 60%;
  left: calc(-1 * var(--kolibri-size));   /* startet links NEBEN dem Schriftzug */
  width: var(--kolibri-size);
  height: var(--kolibri-size);
  transform: translateY(-50%);
  z-index: 2;
  /* 1.5s delay, dann schneller 0.4s Diagonalflug */
  animation: kolibri-flight 0.4s 1.5s ease-in-out forwards;
}

@keyframes kolibri-flight {
  0%   { top: 60%; left: calc(-1 * var(--kolibri-size)); }
  100% { top: 95%; left: calc(115% - var(--kolibri-size)); }
}

/* After flight: .landed freezes the wrapper */
.kolibri-flight-wrap.landed {
  animation: none;
  top: 95%;
  left: calc(115% - var(--kolibri-size));
}

/* ============================================================
   KOLIBRI FLIP WRAPPER — handles scaleX turn at mid-flight
   Delay = flight delay (1.5s) + half flight duration (0.2s) = 1.7s
   ============================================================ */
.kolibri-flip-wrap {
  width: 100%;
  height: 100%;
  /* flip starts at exact mid-flight point */
  animation: kolibri-flip 0.12s 1.7s ease-in-out forwards;
}

@keyframes kolibri-flip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(0); }
  100% { transform: scaleX(-1); }
}

/* ============================================================
   KOLIBRI IMAGE — handles continuous bob only
   ============================================================ */
.kolibri-gif {
  width: var(--kolibri-size);
  height: var(--kolibri-size);
  object-fit: contain;
  display: block;
  transform-origin: center center;
  animation: kolibri-bob 2.4s ease-in-out infinite;
}

/* Bob animation (transform on img only = translateY, no scaleX conflict) */
@keyframes kolibri-bob {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* .flipped class kept for mobile override compatibility */
.kolibri-gif.flipped {
  /* no-op on desktop — flip handled by .kolibri-flip-wrap */
}

/* ---- Desktop Zitat ---- */
.zitat-wrap--desktop {
  display: block;
  padding-left: unset;
}

.zitat-wrap--desktop svg {
  width: 100%;
  max-width: unset;
  height: auto;
  display: block;
  fill: var(--color-black);
  margin: auto;
}

/* ---- Mobile Zitat — nur mobile sichtbar ---- */
.zitat-wrap--mobile {
  display: none;
}

/* ---- seit-Text — zentriert unterhalb des Zitats ---- */
.seit-text {
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-black);
  margin-top: 60px;
  padding-left: 0;
  text-align: center;
}

/* ============================================================
   MOBILE: Kolibri statisch links-schauend, Mobile-Zitat darunter
   ============================================================ */
@media (max-width: 768px) {

  .hero-kolibri-block {
    padding: 50px 25px 40px;
    min-height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Wrapper: kein Flug auf Mobile */
  .kolibri-flight-wrap {
    position: static;
    transform: none;
    animation: none;
    width: var(--kolibri-size);
    height: var(--kolibri-size);
    top: auto;
    left: auto;
    margin: 100px auto 0;
  }

  .kolibri-flight-wrap.landed {
    position: static;
    transform: none;
    top: auto;
    left: auto;
  }

  /* Flip-wrap: statisch nach links auf Mobile */
  .kolibri-flip-wrap {
    animation: none;
    transform: scaleX(-1);  /* immer nach links */
    width: 100%;
    height: 100%;
  }

  /* Kolibri: sanftes Bobben */
  .kolibri-gif {
    animation: kolibri-bob 2.4s ease-in-out infinite;
    display: block;
    margin: 0 auto;
  }

  .kolibri-gif.flipped {
    animation: kolibri-bob 2.4s ease-in-out infinite;
  }

  /* Desktop Zitat ausblenden */
  .zitat-wrap--desktop {
    display: none;
  }

  /* Mobile Zitat einblenden */
  .zitat-wrap--mobile {
    display: block;
    width: 100%;
    margin-top: 30px;
  }

  .zitat-wrap--mobile svg {
    width: 100%;
    height: auto;
    display: block;
    fill: var(--color-black);
  }

  .seit-text {
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
  }

  /* Trennlinie nach seit-Text auf Mobile */
  .hero-divider-mobile {
    margin-top: 40px;
  }

  .hero-divider-mobile svg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }

  /* Desktop Trennlinie auf Mobile ausblenden (mobile hat eigene im Zitat-Block) */
  .hero-divider:not(.hero-divider-mobile) {
    display: none;
  }
}

/* Hero */
.angebot-hero {
    display: grid;
    grid-template-columns: 60% 40%;  /* Bild 60%, Content 40% */
    gap: 0;                           /* kein Gap, Bild soll bündig sein */
    background: #e8f9f5;
    align-items: stretch;             /* beide Spalten gleich hoch */
    width: 70%;
    margin: 160px auto 40px auto;
    overflow: hidden;
}

/* Grafik-Bereich – füllt volle Höhe */
.angebot-hero__grafik {
    height: 100%;
}

.angebot-hero__grafik img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Bild füllt den Bereich ohne Verzerrung */
    display: block;
}

/* Content-Bereich */
.angebot-hero__content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.angebot-hero__titel {
    font-size: 2rem;
    margin: 0 0 1rem 0;
}

.angebot-hero__text {
    color: #333;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.angebot-hero__buttons {
    display: flex;
    gap: 1rem;
	font-size: 1.25rem;
}

.btn--outline {
    border: 1px solid #333;
    padding: 0.5rem 3rem;
    border-radius: 9999px;
    background: transparent;
    text-decoration: none;
    color: #333;
    transition: background 0.2s, color 0.2s;
}

.btn--outline:hover {
    background: #333;
    color: #fff;
}

@media (max-width: 768px) {
    .angebot-hero {
        grid-template-columns: 1fr;   /* untereinander */
        width: 100%;
        margin: 80px auto 40px auto;
    }

    .angebot-hero__grafik {
        height: 280px;                /* feste Höhe für Bild */
    }

    .angebot-hero__content {
        padding: 2rem;
    }

    .angebot-hero__titel {
        /*font-size: 1.6rem;*/
    }
}

/* Trainer */
.angebot-trainer {
    padding: 0rem;
    width: 70%;
    margin: 0 auto;
}

.angebot-trainer h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.trainer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.trainer-card {
    text-align: center;
    width: 280px;
}

.trainer-card__foto {
    width: 250px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 0rem;
}

.trainer-card__name {
    font-size: 1.5rem;
    margin: 0;
    line-height: normal;
}

/* Tablet – 768px */
@media (max-width: 768px) {
    .angebot-trainer {
        width: 100%;
        padding: 0rem 1.5rem;
    }

    .trainer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;  /* exakt 2 Spalten */
        gap: 1rem;
    }

    .trainer-card {
        width: 100%;                     /* volle Spaltenbreite */
    }

    .trainer-card__foto {
        width: 100%;                     /* Foto füllt Kartenbreite */
        aspect-ratio: 1 / 1;             /* quadratisch → rund durch border-radius */
    }

    .trainer-card__name {
        font-size: 1.4rem;
    }
}

/* Individuelle Inhalte */
.angebot-inhalt {
    padding: 3rem 2rem;
    scroll-margin-top: 80px; /* damit Anchor nicht unter Header verschwindet */
}

/* Angebote Grid – 2 Spalten */
.angebote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
	align-items: stretch;
}

/* Karte */
.angebot-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
	height: 100%;
	background-color: #fff;
}

/* Bild füllt die volle Kartenbreite */
.angebot-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* Text-Bereich */
.angebot-card__body {
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;     
}

/* Kategorie-Label */
.angebot-card__kat {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    display: block;
    margin-bottom: 10px;
}

/* Titel */
.angebot-card__body .angebot-card__titel  {    
    font-size: 1.5rem;
	margin: 0 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* Beschreibung */
.angebot-card__body p {        
    margin: 0 0 10px 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    width: 100%;
	flex: 1;
}

/* Button */
.angebot-card__body .btn {
    display: inline-block;    
    padding: 0.4rem 0.8rem;
    text-decoration: none;        
    margin-top: 20px;    
	width: 180px;
	text-align: center;	
	align-self: center; 
	font-size: 1.2rem;
}

/* Responsive – 1 Spalte auf Mobilgeräten */
@media (max-width: 768px) {
    .angebote-grid {
        grid-template-columns: 1fr;
    }
}

/* ── PERSON HERO ─────────────────────────── */
.person-hero {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0;
    align-items: stretch;
    width: 70%;
    margin: 160px auto 60px auto;
    overflow: hidden;
    background: #e8f9f5;
}

.person-hero__foto {
    height: 100%;
}

.person-hero__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.person-hero__content {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.person-hero__titel {
    font-size: 2rem;
    margin: 0;
}

.person-hero__about {
    color: #333;
    line-height: 1.7;
    margin: 0;
}

.person-hero__buttons {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Personen Grid */
.personen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 Spalten Desktop */
    gap: 2rem;
}

/* Person Card */
.person-card {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}

.person-card:hover .person-card__bild {
    opacity: 0.85;
    transition: opacity 0.2s;
}

/* Profilbild */
.person-card__bild-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    margin: 0 auto 0.75rem auto;
    max-width: 180px;
}

.person-card__bild {
    width: 250px;    
    object-fit: cover;
    display: block;
}

.person-card__bild-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
}

/* Name & Position */
.person-card__name {
    font-size: 1.5rem;    
    margin: 0 0 0.25rem 0;
}

.person-card__position {
    font-size: 1rem;    
	text-transform: uppercase;
    margin: 0;
}

/* Tablet – 768px */
@media (max-width: 768px) {
    .personen-grid {
        grid-template-columns: repeat(2, 1fr);   /* 2 Spalten */
        gap: 1.5rem;
    }

    .person-card__bild-wrap {
        max-width: 140px;
    }
}

/* Mobil – 480px */
@media (max-width: 480px) {
    .personen-grid {
        gap: 1rem;
    }

    .person-card__bild-wrap {
        max-width: 110px;
    }

    .person-card__name {
        font-size: 0.9rem;
    }

    .person-card__position {
        font-size: 0.8rem;
    }
}

/* ── ANGEBOTE BEREICH ────────────────────── */
.person-angebote {
    width: 70%;
    margin: 0 auto 60px auto;
}

.person-angebote__titel {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

/* Grid – bis 3 Angebote */
.angebote-grid--person {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Angebot Item – Grid & Slider */
.angebot-item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.angebot-item__bild {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.angebot-item__titel {
    font-size: 1.5rem;
    margin: 0.75rem 0 0 0;
    text-align: center;
}

.angebot-item:hover .angebot-item__bild {
    opacity: 0.85;
    transition: opacity 0.2s;
}

/* Swiper Anpassungen */
.person-swiper {
    padding-bottom: 3rem !important;  /* Platz für Pagination */
}

/* Pagination – schwarze Punkte */
.person-swiper .swiper-pagination-bullet {
    background: #333;
    opacity: 0.3;
}

.person-swiper .swiper-pagination-bullet-active {
    background: #333;
    opacity: 1;
}

/* Pfeile */

.person-swiper .swiper-button-next::after,
.person-swiper .swiper-button-prev::after {
    display: none;            /* Standard-Pfeil entfernen */
}

.person-swiper .swiper-button-next img,
.person-swiper .swiper-button-prev img {
    width: 75%;
    height: 75%;
    object-fit: contain;	
	margin-top: -100px;
}

.person-swiper .swiper-button-next img:hover,
.person-swiper .swiper-button-prev img:hover {
	opacity: 0.5 !important;
    transition: opacity 0.2s !important;	
}

/* Pfeil ausblenden wenn kein weiteres Angebot */
.person-swiper .swiper-button-disabled {
    display: none !important;
}

/* Mobil – 768px */
@media (max-width: 768px) {
	   .person-hero {
        grid-template-columns: 1fr;   /* 1 Spalte */
        width: 100%;
        margin-top: 80px;
    }

    .person-hero__foto {
        width: 100%;
        height: 400px;                /* volle Breite, feste Höhe */
    }

    .person-hero__foto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .person-hero__content {
        padding: 2rem;
    }

    .person-hero__titel {
        font-size: 1.8rem;
    }

    .person-angebote {
        width: 100%;
        padding: 0 1.5rem;
    }

    .angebote-grid--person {
        grid-template-columns: 1fr;   /* ← 1 Spalte */
    }
	
	.angebot-item__titel {
        font-size: 1.4rem;
    }
}