/* ============================================================
   UNAIT – KI Governance  |  Corporate Design + Scroll Experience
   Schrift: Montserrat (max semibold 600)
   Akzent:  #EF4F3E  |  Dunkel: #1E1F23  |  Beige: #EBE7D9
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

/* ── Variables ────────────────────────────────────────────── */
:root {
  --white:       #FFFFFF;
  --gray-light:  #F4F4F4;
  --gray-mid:    #D8D8D8;
  --beige:       #EBE7D9;
  --dark:        #232322;
  --black:       #000000;
  --charcoal:    #1E1F23;
  --accent:      #EF4F3E;
  --accent-dark: #d43d2d;
  --accent-bg:   #fdf1f0;
  --green:       #228000;

  --font:        'Montserrat', sans-serif;
  --radius:      3px;
  --radius-lg:   6px;
  --shadow:      0 2px 16px rgba(0,0,0,.07);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.12);
  --nav-h:       68px;
  --max-w:       1160px;

  /* Alias variables used in inline styles */
  --bg:          #FFFFFF;
  --bg-soft:     #F4F4F4;
  --border:      #D8D8D8;
  --text-muted:  #5a5a58;
  --accent-light: rgba(239,79,62,.09);
  --primary:     #232322;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

#main { scroll-margin-top: var(--nav-h); }
#main:focus { outline: none; }

/* ── Layout ───────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }
.section    { padding: 100px 0; }
.section--soft  { background: var(--gray-light); }
.section--beige { background: var(--beige); }
.section--dark  { background: var(--charcoal); color: var(--white); }
.section--black { background: var(--black); color: var(--white); }

/* ── Typography ───────────────────────────────────────────── */
.label {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.section-sub {
  font-size: .9375rem;
  font-weight: 400;
  color: #5a5a58;
  max-width: 560px;
  margin-bottom: 52px;
  line-height: 1.75;
}
.section--dark  .section-sub,
.section--black .section-sub { color: rgba(255,255,255,.55); }
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

.divider {
  width: 40px; height: 2px;
  background: var(--accent);
  margin-bottom: 24px;
}
.center .divider { margin-left: auto; margin-right: auto; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: all .2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  appearance: none;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(239,79,62,.3);
}
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: var(--black); }

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.5);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--charcoal);
  border-color: var(--white);
}
.btn-outline-dark {
  background: transparent;
  color: var(--dark);
  border: 1.5px solid var(--dark);
}
.btn-outline-dark:hover { background: var(--dark); color: var(--white); }

.btn-outline-accent {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-outline-accent:hover { background: var(--accent); color: var(--white); }

.btn-sm { padding: 9px 20px; font-size: .75rem; }

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--charcoal);
  z-index: 1000;
  transition: background .3s;
}
.nav.scrolled { background: rgba(30,31,35,.97); backdrop-filter: blur(10px); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo: UN + AI(orange) + T — font-weight 500, never semibold/bold */
.nav__logo {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--white);
  text-transform: uppercase;
}
.nav__logo .ai { color: var(--accent); font-weight: 500; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  color: rgba(255,255,255,.65);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--radius);
  transition: color .15s;
}
.nav__links a:hover { color: var(--white); }
.nav__links a.active {
  color: var(--white);
  position: relative;
}
.nav__links a.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 13px; right: 13px;
  height: 1.5px;
  background: var(--accent);
}
.nav__cta { margin-left: 10px; }
.nav__demo-cta { margin-left: 16px; }

/* Kompaktere Nav-Buttons, damit die Menülinks nicht umbrechen */
.nav__demo-cta.btn,
.nav__cta.btn {
  padding: 8px 14px;
  font-size: .6875rem;
  letter-spacing: .04em;
}
.nav__links a { white-space: nowrap; }

/* Burger */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav__burger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--white);
  transition: all .25s;
}
/* Mobile nav */
.nav__mobile {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: var(--charcoal);
  padding: 16px 28px 28px;
  z-index: 999;
}
.nav__mobile.open { display: flex; }
.nav__mobile a {
  color: rgba(255,255,255,.7);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav__mobile .btn { margin-top: 18px; justify-content: center; }

/* ── Dropdown Navigation ───────────────────────────────── */
.nav__item--drop { position: relative; list-style: none; }
.nav__dropbtn {
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.65); font-size: .75rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--radius);
  background: none; border: none; cursor: pointer; font-family: var(--font);
  transition: color .15s; white-space: nowrap;
}
.nav__dropbtn:hover,
.nav__item--drop.active .nav__dropbtn { color: var(--white); }
.nav__item--drop.active .nav__dropbtn { position: relative; }
.nav__item--drop.active .nav__dropbtn::after {
  content: ''; position: absolute; bottom: 0; left: 13px; right: 13px;
  height: 1.5px; background: var(--accent);
}
.nav__chevron { font-size: .55rem; opacity: .55; transition: transform .2s; display: inline-block; }
.nav__item--drop:hover .nav__chevron { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: 100%; left: 0;
  padding-top: 10px; /* Abstand zum Button – kein Hover-Gap */
  background: transparent;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .18s, transform .18s; z-index: 1001;
  min-width: 240px;
}
.nav__drop::before {
  content: ''; position: absolute; top: 10px; left: 0; right: 0; bottom: 0;
  background: #26272c; border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: -1;
}
.nav__item--drop:hover .nav__drop { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__drop-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 4px; text-decoration: none;
  transition: background .12s;
}
.nav__drop-item:hover { background: rgba(255,255,255,.07); }
.nav__drop-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
}
.nav__drop-text { display: flex; flex-direction: column; gap: 1px; }
.nav__drop-text strong {
  font-size: .92rem; font-weight: 500; color: var(--white);
  text-transform: none; letter-spacing: 0;
}
.nav__drop-text span {
  display: none; font-size: .72rem; color: rgba(255,255,255,.5);
  line-height: 1.4; text-transform: none; letter-spacing: 0;
}
.nav__drop-divider { height: 1px; background: rgba(255,255,255,.09); margin: 6px 0; }
.nav__drop-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 4px; text-decoration: none;
  transition: background .12s;
}
.nav__drop-cta:hover { background: rgba(239,79,62,.1); }
.nav__drop-cta span:first-child {
  font-size: .78rem; font-weight: 600; color: var(--accent);
  text-transform: none; letter-spacing: 0;
}
.nav__drop-cta span:last-child { font-size: .78rem; color: var(--accent); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__login-link {
  font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.52);
  text-decoration: none; padding: 7px 10px; letter-spacing: .04em;
  transition: color .15s;
}
.nav__login-link:hover { color: var(--white); }
.nav__sep {
  width: 1px; height: 18px; background: rgba(255,255,255,.09);
  display: inline-block; margin: 0 2px; vertical-align: middle;
}

/* ── Demo-anfragen page ────────────────────────────────── */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.choice-card {
  border: 1.5px solid var(--gray-mid); border-radius: var(--radius-lg);
  padding: 18px 20px; cursor: pointer; transition: border-color .15s, background .15s;
  display: block;
}
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card:has(input:checked) { border-color: var(--accent); background: #fdf1f0; }
.choice-card h3 {
  font-size: .9rem; font-weight: 600; margin-bottom: 5px;
  display: flex; align-items: center; gap: 9px;
}
.choice-card p { font-size: .78rem; color: var(--text-muted); line-height: 1.55; }
.choice-check {
  width: 17px; height: 17px; border: 1.5px solid var(--gray-mid);
  border-radius: 3px; display: inline-flex; align-items: center;
  justify-content: center; font-size: .65rem; color: transparent; flex-shrink: 0;
}
.choice-card:has(input:checked) .choice-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.choice-hint { font-size: .75rem; color: var(--text-muted); margin-bottom: 24px; }

.demo-info {
  display: none; background: #f0f7ee; border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: .8rem; color: #2a4a24; line-height: 1.6; margin-bottom: 24px;
}
.anfrage-form:has(#cbDemo:checked) .demo-info { display: block; }

.angebot-block { display: none; border-top: 1px solid var(--gray-mid); padding-top: 24px; margin-top: 4px; }
.anfrage-form:has(#cbAngebot:checked) .angebot-block { display: block; }

.module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.module-card {
  border: 1.5px solid var(--gray-mid); border-radius: var(--radius-lg);
  padding: 15px 17px; cursor: pointer; display: block; transition: border-color .15s, background .15s;
}
.module-card input { position: absolute; opacity: 0; pointer-events: none; }
.module-card:has(input:checked) { border-color: var(--accent); background: #fdf1f0; }
.module-card h4 { font-size: .88rem; font-weight: 600; margin-bottom: 3px; }
.module-card p { font-size: .74rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 7px; }
.module-link { font-size: .73rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.module-link:hover { text-decoration: underline; }

.schulung-addon {
  border: 1.5px solid var(--gray-mid); border-radius: var(--radius-lg);
  padding: 13px 17px; cursor: pointer; display: flex;
  align-items: flex-start; gap: 11px; transition: border-color .15s, background .15s;
  margin-bottom: 14px;
}
.schulung-addon input { position: absolute; opacity: 0; pointer-events: none; }
.schulung-addon:has(input:checked) { border-color: var(--accent); background: #fdf1f0; }
.optional-tag {
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: #fdf1f0; border: 1px solid rgba(239,79,62,.25);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; margin-top: 1px; flex-shrink: 0;
}
.schulung-addon:has(input:checked) .optional-tag { background: var(--accent); color: #fff; border-color: var(--accent); }
.schulung-text h4 { font-size: .86rem; font-weight: 600; margin-bottom: 2px; }
.schulung-text p { font-size: .74rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 6px; }
.schulung-personen { display: none; }
.anfrage-form:has(#cbSchulung:checked) .schulung-personen { display: block; }

.size-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.size-pill {
  border: 1.5px solid var(--gray-mid); border-radius: 999px;
  padding: 8px 16px; font-size: .8rem; font-weight: 600;
  color: var(--dark); cursor: pointer; transition: border-color .15s, background .15s;
}
.size-pill input { position: absolute; opacity: 0; pointer-events: none; }
.size-pill:has(input:checked) { border-color: var(--accent); background: #fdf1f0; color: var(--dark); }

.docs-info {
  background: #f5f3ff; border-left: 3px solid #7c5cbf;
  border-radius: var(--radius); padding: 13px 17px;
  font-size: .8rem; color: #3a2f5a; line-height: 1.6; margin-top: 16px;
}
.docs-info strong { display: block; margin-bottom: 5px; font-size: .78rem; }
.docs-info ul { padding-left: 16px; margin: 0; }
.docs-info ul li { margin-bottom: 2px; }

.consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .77rem; color: var(--text-muted); margin-bottom: 24px;
}
.consent-row input { margin-top: 3px; flex-shrink: 0; }

.submit-label { display: none; }
.anfrage-form:has(#cbDemo:checked):not(:has(#cbAngebot:checked)) #sl-demo { display: inline; }
.anfrage-form:has(#cbAngebot:checked):not(:has(#cbDemo:checked)) #sl-angebot { display: inline; }
.anfrage-form:has(#cbDemo:checked):has(#cbAngebot:checked) #sl-beides { display: inline; }
.anfrage-form:not(:has(#cbDemo:checked)):not(:has(#cbAngebot:checked)) #sl-none { display: inline; }

.meeting-cta {
  background: var(--charcoal); padding: 56px 0; text-align: center;
}
.meeting-cta__box {
  max-width: 520px; margin: 0 auto;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  padding: 28px 32px; color: var(--white);
}
.meeting-cta__box h3 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.meeting-cta__box p { font-size: .85rem; color: rgba(255,255,255,.52); margin-bottom: 20px; line-height: 1.6; }

@media (max-width: 680px) {
  .choice-grid { grid-template-columns: 1fr; }
  .module-grid  { grid-template-columns: 1fr; }
}

/* ── Coming-soon / disabled buttons ── */
.btn-soon { opacity: .4; cursor: not-allowed !important; pointer-events: none; }
.btn-soon-link { opacity: .4; cursor: not-allowed; pointer-events: none; }
.cta-band.btn-soon { cursor: not-allowed; pointer-events: none; }

/* ── Demo-Counter ── */
.demo-counter {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.8rem; color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.12); border-radius:20px;
  padding:5px 14px; margin-bottom:8px;
}
.demo-counter__num { font-weight:700; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums; }

/* ── Demo-Modal ── */
.demo-modal { display:none; position:fixed; inset:0; z-index:2000; align-items:center; justify-content:center; padding:16px; }
.demo-modal.open { display:flex; }
.demo-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); }
.demo-modal__card {
  position:relative; z-index:1; background:#1E1F23; border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:36px 32px; max-width:520px; width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,.6); max-height:90vh; overflow-y:auto;
}
.demo-modal__close {
  position:absolute; top:14px; right:16px; background:none; border:none;
  color:rgba(255,255,255,.4); font-size:1.4rem; cursor:pointer; line-height:1; padding:4px 8px;
}
.demo-modal__close:hover { color:var(--white); }
.demo-modal__badge {
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); border:1px solid rgba(239,79,62,.35);
  border-radius:4px; padding:3px 10px; margin-bottom:16px;
}
.demo-modal__card h2 { font-size:1.25rem; font-weight:600; color:var(--white); margin-bottom:10px; }
.demo-modal__intro { font-size:.84rem; color:rgba(255,255,255,.6); line-height:1.65; margin-bottom:24px; }
.demo-modal__hint { font-size:.72rem; color:rgba(255,255,255,.35); text-align:center; margin-top:12px; }
.demo-modal__card .form-group { margin-bottom:14px; }
.demo-modal__card .form-group label { display:block; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:5px; }
.demo-modal__card input[type=text],
.demo-modal__card input[type=email] {
  width:100%; padding:9px 12px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:6px;
  color:var(--white); font-size:.87rem; box-sizing:border-box;
}
.demo-modal__card input:focus { outline:none; border-color:var(--accent); }
.demo-modal__card .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.demo-modal__card .consent-row { font-size:.78rem; color:rgba(255,255,255,.6); margin:18px 0; }
.demo-modal__card .consent-row a { color:var(--accent); }
@media(max-width:520px) {
  .demo-modal__card { padding:24px 18px; }
  .demo-modal__card .form-grid { grid-template-columns:1fr; }
}

/* scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--accent);
  width: 0%;
  z-index: 1001;
  transform-origin: left;
}

/* ── Hero – pinned scroll sequence ───────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  position: relative;
  overflow: hidden;
}
/* Background accent glow */
.hero__bg-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 40%, rgba(239,79,62,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(239,79,62,.04) 0%, transparent 50%);
  pointer-events: none;
}
/* Large background letter – design accent */
.hero__bg-letter {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(18rem, 28vw, 32rem);
  font-weight: 600;
  color: rgba(255,255,255,.025);
  letter-spacing: -.05em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 80px 0;
}
.hero__kicker {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  opacity: 0; /* animated by GSAP */
}
/* Title split into lines for scroll animation */
.hero__title {
  margin-bottom: 24px;
  overflow: hidden;
}
.hero__title-line {
  display: block;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.02em;
  opacity: 0;  /* animated by GSAP */
  transform: translateY(60px);
}
.hero__title-line em {
  color: var(--accent);
  font-style: normal;
}
.hero__sub {
  font-size: .9375rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 460px;
  opacity: 0;
  transform: translateY(30px);
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}

/* Hero panel (right side) */
.hero__panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 36px;
  opacity: 0;
  transform: translateX(40px);
}
.hero__panel-label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 28px;
}
.hero__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.hero__stat {
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
}
.hero__stat-num {
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.hero__stat-num span { color: var(--accent); }
.hero__stat-label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.hero__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 400;
  color: rgba(255,255,255,.65);
}
.hero__check::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(239,79,62,.4);
  background: rgba(239,79,62,.12);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23EF4F3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

/* Scroll indicator */
.hero__scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  opacity: 0;
  animation: hint-fade 2s ease 1.5s forwards;
}
@keyframes hint-fade { to { opacity: 1; } }
.hero__scroll-arrow {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(239,79,62,.6), transparent);
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: scaleY(1); opacity: .6; }
  50% { transform: scaleY(0.7); opacity: 1; }
}

/* ── Reveal animation classes (set by JS) ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* stagger delay siblings */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .1s; }
.stagger > *:nth-child(3) { transition-delay: .2s; }
.stagger > *:nth-child(4) { transition-delay: .3s; }
.stagger > *:nth-child(5) { transition-delay: .4s; }
.stagger > *:nth-child(6) { transition-delay: .5s; }

/* ── Page headers ─────────────────────────────────────────── */
.page-header {
  background: var(--charcoal);
  padding: calc(var(--nav-h) + 56px) 0 64px;
  color: var(--white);
}
.page-header .label { color: var(--accent); }
.page-header h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin-bottom: 18px;
}
.page-header p { font-size: .9375rem; color: rgba(255,255,255,.55); max-width: 560px; line-height: 1.75; }

/* ── Feature grid ─────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-card {
  background: var(--white);
  padding: 36px 28px;
  border-right: 1px solid var(--gray-mid);
  border-bottom: 1px solid var(--gray-mid);
  transition: background .2s;
}
.feature-grid > .feature-card:nth-child(3),
.feature-grid > .feature-card:nth-child(6) { border-right: none; }
.feature-grid > .feature-card:nth-child(4),
.feature-grid > .feature-card:nth-child(5),
.feature-grid > .feature-card:nth-child(6) { border-bottom: none; }
.feature-card:hover { background: var(--beige); }

.feature-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.feature-card p { font-size: .8125rem; color: #5a5a58; line-height: 1.7; }

/* ── Products ─────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.product-grid--three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1024px) {
  .product-grid--three {
    grid-template-columns: 1fr 1fr;
  }
  .product-grid--three .product-card:last-child {
    grid-column: 1 / -1;
    min-height: auto;
  }
}
@media (max-width: 768px) {
  .product-grid--three {
    grid-template-columns: 1fr;
  }
  .product-grid--three .product-card:last-child {
    grid-column: auto;
  }
}
.product-card {
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  min-height: 650px;
}
.product-card--light {
  background: var(--gray-light);
  border: 1px solid var(--gray-mid);
}
.product-card--dark { background: var(--charcoal); color: var(--white); }

.product-badge {
  display: inline-block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.product-card--light .product-badge { background: var(--accent-bg); color: var(--accent); }
.product-card--dark  .product-badge { background: rgba(239,79,62,.15); color: var(--accent); }

.product-name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
.product-desc { font-size: .875rem; line-height: 1.75; margin-bottom: 24px; }
.product-card--light .product-desc { color: #5a5a58; }
.product-card--dark  .product-desc { color: rgba(255,255,255,.6); }

.product-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.product-feature  { display: flex; align-items: flex-start; gap: 10px; font-size: .8125rem; font-weight: 400; }
.product-card--dark .product-feature { color: rgba(255,255,255,.75); }
.pf-dot {
  flex-shrink: 0;
  margin-top: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* product-tag = alias for product-badge (used on loesungen.html) */
.product-tag {
  display: inline-block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.product-card--light .product-tag { background: var(--accent-bg); color: var(--accent); }
.product-card--dark  .product-tag { background: rgba(239,79,62,.15); color: var(--accent); }

/* pf-icon: SVG checkmark used in loesungen.html product features */
.pf-icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  fill: var(--accent);
  margin-top: 2px;
}

.product-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239,79,62,.12);
  border: 1px solid rgba(239,79,62,.25);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ── Stats band ───────────────────────────────────────────── */
.stats-band { background: var(--black); padding: 72px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
/* Variant for pages with only 3 stats (e.g. ueber-uns): without this,
   the 4-column grid leaves the 4th track empty and the row looks off-center */
.stats-grid--three { grid-template-columns: repeat(3, 1fr); }
.stat-item {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.stat-num em { color: var(--accent); font-style: normal; }
.stat-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* ── Steps ────────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step {
  padding: 36px 28px;
  border-right: 1px solid var(--gray-mid);
  background: var(--white);
}
.step:last-child { border-right: none; }
.step-num {
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -.03em;
}
.step h3 { font-size: .875rem; font-weight: 600; letter-spacing: .03em; margin-bottom: 10px; }
.step p { font-size: .8125rem; color: #5a5a58; line-height: 1.7; }

/* ── Team ─────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  text-align: center;
  transition: box-shadow .2s;
  overflow: hidden;
}
.team-card:hover { box-shadow: var(--shadow-lg); }
.team-avatar {
  width: calc(100% + 56px);
  margin: -36px -28px 20px;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: var(--charcoal);
  display: block;
  overflow: hidden;
}
.team-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-name { font-size: .9375rem; font-weight: 600; margin-bottom: 4px; }
.team-role { font-size: .6875rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px; }
.team-bio  { font-size: .8125rem; color: #5a5a58; line-height: 1.7; }

/* ── Blog ─────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .2s;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.blog-thumb {
  height: 170px;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
/* Real image inside blog-thumb */
.blog-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }

/* Hero background image overlay */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.08;
  filter: grayscale(100%);
  pointer-events: none;
  z-index: 0;
}

/* Story image (ueber-uns) */
.story-img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  margin-bottom: 16px;
}

.blog-thumb-inner {
  font-size: 3rem;
  font-weight: 600;
  color: rgba(255,255,255,.07);
  letter-spacing: -.03em;
  line-height: 1;
  user-select: none;
}
.blog-thumb .blog-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 3px 9px;
  border-radius: var(--radius);
}
.blog-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.blog-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #8a8a88;
  margin-bottom: 12px;
}
.blog-meta .dot { width: 3px; height: 3px; background: var(--gray-mid); border-radius: 50%; }
.blog-title { font-size: .9375rem; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.blog-excerpt { font-size: .8125rem; color: #5a5a58; line-height: 1.7; flex: 1; }
.blog-link {
  margin-top: 18px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Community box ────────────────────────────────────────── */
.community-box {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 56px 52px;
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.community-box h2 { font-size: 1.625rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.community-box p { font-size: .9rem; color: rgba(255,255,255,.55); max-width: 480px; }
.newsletter-form { display: flex; gap: 10px; margin-top: 24px; }
.newsletter-input {
  flex: 1; padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-family: var(--font); font-size: .875rem;
  outline: none;
  transition: border-color .2s;
  min-width: 200px;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-input:focus { border-color: var(--accent); }

/* ── Contact ──────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.contact-info h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; }
.contact-info p { color: #5a5a58; line-height: 1.75; margin-bottom: 32px; }
.contact-detail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.contact-detail-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  background: var(--gray-light); border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.contact-detail-icon svg { width: 17px; height: 17px; color: var(--accent); }
.contact-detail-label { font-size: .625rem; font-weight: 600; color: #8a8a88; text-transform: uppercase; letter-spacing: .09em; }
.contact-detail-value { font-size: .9rem; font-weight: 500; }

.form-card { background: var(--white); border: 1px solid var(--gray-mid); border-radius: var(--radius-lg); padding: 40px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 11px 14px;
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  font-family: var(--font); font-size: .875rem;
  color: var(--dark); background: var(--white);
  outline: none; transition: border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-required { color: var(--accent); }

/* ── Product card 2-page slider ─────────────────────────── */
/* Slides wrapper grows to fit the active slide's content (no clipping/scrollbar);
   flex:1 lets it absorb the extra height when the grid stretches this card to
   match its taller sibling, keeping the CTA/nav (.pc-bottom) aligned across cards. */
.pc-slides-wrapper {
  flex: 1 1 auto;
  min-height: 500px;
}
.pc-slide { display: none; }
.pc-slide--active { display: block; }

/* Fixed bottom area: CTA + nav bar, always at card bottom */
.pc-bottom {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.product-card--light .pc-bottom { border-color: var(--gray-mid); }
.product-card--dark  .pc-bottom { border-color: rgba(255,255,255,.1); }
/* CTA in bottom: full width */
.pc-bottom > .btn { width: 100%; justify-content: center; }

/* Nav bar inside pc-bottom — no top border (pc-bottom handles it) */
.pc-nav-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
}

.pc-prev, .pc-next {
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all .2s; flex-shrink: 0;
}
.product-card--light .pc-prev,
.product-card--light .pc-next { border: 1.5px solid var(--gray-mid); color: var(--dark); }
.product-card--light .pc-prev:hover,
.product-card--light .pc-next:hover { border-color: var(--accent); color: var(--accent); }
.product-card--dark .pc-prev,
.product-card--dark .pc-next { border: 1.5px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); }
.product-card--dark .pc-prev:hover,
.product-card--dark .pc-next:hover { border-color: var(--accent); color: var(--accent); }

.pc-dots { display: flex; gap: 6px; align-items: center; }
.pc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  transition: all .2s; flex-shrink: 0;
}
.product-card--light .pc-dot { background: var(--gray-mid); }
.product-card--light .pc-dot--active { background: var(--accent); width: 18px; border-radius: 3px; }
.product-card--dark  .pc-dot { background: rgba(255,255,255,.2); }
.product-card--dark  .pc-dot--active { background: var(--accent); width: 18px; border-radius: 3px; }

/* Detail page content */
.pc-detail-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; padding: 0 12px; }
.pc-detail-item h5 {
  font-size: .875rem; font-weight: 600; margin-bottom: 5px; line-height: 1.3;
}
.pc-detail-item p { font-size: .8125rem; line-height: 1.75; }
.product-card--light .pc-detail-item h5 { color: var(--dark); }
.product-card--light .pc-detail-item p  { color: #5a5a58; }
.product-card--dark  .pc-detail-item h5 { color: var(--white); }
.product-card--dark  .pc-detail-item p  { color: rgba(255,255,255,.62); }

/* "Ideal für" note — icon + italic text, no coloured box */
.product-ideal {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .8125rem; font-style: italic;
  line-height: 1.65;
  background: none; border: none; padding: 12px; margin-bottom: 0;
}
.product-ideal-icon {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px;
}
.product-card--light .product-ideal { color: #5a5a58; }
.product-card--light .product-ideal-icon { color: var(--accent); }
.product-card--dark  .product-ideal { color: rgba(255,255,255,.55); }
.product-card--dark  .product-ideal-icon { color: var(--accent); }

/* ── Ihr Mehrwert section ─────────────────────────────────── */
.mehrwert-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 60px; align-items: start;
}
.mehrwert-intro-text {
  font-size: .9375rem; color: rgba(255,255,255,.65);
  line-height: 1.75; margin-bottom: 16px;
}
.mehrwert-stat {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0;
}
.mehrwert-stat-num {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 600; color: var(--accent);
  letter-spacing: -.04em; flex-shrink: 0; line-height: 1;
}
.mehrwert-stat-text {
  font-size: .9375rem; color: rgba(255,255,255,.55); line-height: 1.5; max-width: 320px;
}
.mehrwert-bullets { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mehrwert-bullet {
  display: flex; align-items: center; gap: 12px;
  font-size: .9375rem; color: rgba(255,255,255,.85); font-weight: 500;
}
.mehrwert-bullet::before {
  content: ''; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(239,79,62,.4);
  background: rgba(239,79,62,.12)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23EF4F3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 10px;
}
.datenschutz-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.datenschutz-card h3 { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 12px; }
.datenschutz-card p { font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 16px; }
.datenschutz-bullets { display: flex; flex-direction: column; gap: 9px; }
.datenschutz-bullet {
  font-size: .8125rem; color: rgba(255,255,255,.65);
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.5;
}
.datenschutz-bullet::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
@media (max-width: 1024px) { .mehrwert-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ── Book Online ──────────────────────────────────────────── */
.book-card { max-width: 660px; margin: 0 auto; border: 1px solid var(--gray-mid); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.book-header { background: var(--charcoal); padding: 36px 40px; color: var(--white); display: flex; align-items: center; gap: 22px; }
.book-icon { width: 52px; height: 52px; background: rgba(239,79,62,.15); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.book-icon svg { width: 26px; height: 26px; color: var(--accent); }
.book-header h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.book-header p { font-size: .875rem; color: rgba(255,255,255,.55); }
.book-body { padding: 40px; background: var(--white); }
.book-detail { display: flex; align-items: center; gap: 11px; font-size: .875rem; color: #5a5a58; margin-bottom: 13px; }
.book-detail svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.book-detail strong { color: var(--dark); font-weight: 600; }

/* ── Article ──────────────────────────────────────────────── */
.article-header { background: var(--charcoal); padding: calc(var(--nav-h) + 56px) 0 64px; color: var(--white); }
.article-meta { display: flex; align-items: center; gap: 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 18px; flex-wrap: wrap; }
.article-meta .separator { color: var(--accent); }
.article-title { font-size: clamp(1.625rem, 3.5vw, 2.5rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin-bottom: 18px; }
.article-status { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius); }

.article-content { max-width: 720px; margin: 64px auto; padding: 0 24px; }
.article-content h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin-top: 48px; margin-bottom: 14px; color: var(--dark); border-left: 2px solid var(--accent); padding-left: 14px; }
.article-content h3 { font-size: .9375rem; font-weight: 600; margin-top: 26px; margin-bottom: 10px; color: var(--dark); }
.article-content p { margin-bottom: 16px; line-height: 1.8; color: var(--dark); }
.article-content ul { margin: 0 0 18px; }
.article-content ul li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 7px; font-size: .9rem; color: var(--dark); line-height: 1.65; }
.article-content ul li::before { content: '→'; color: var(--accent); font-weight: 600; flex-shrink: 0; margin-top: 1px; }

.article-table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: .875rem; border: 1px solid var(--gray-mid); border-radius: var(--radius); overflow: hidden; }
.article-table th { background: var(--charcoal); color: rgba(255,255,255,.75); padding: 11px 16px; text-align: left; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.article-table td { padding: 11px 16px; border-bottom: 1px solid var(--gray-mid); color: var(--dark); }
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:nth-child(even) td { background: var(--gray-light); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item { border: 1px solid var(--gray-mid); border-radius: var(--radius); margin-bottom: 6px; overflow: hidden; }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; font-size: .875rem; font-weight: 600; cursor: pointer; gap: 16px; transition: background .15s; }
.faq-question:hover { background: var(--gray-light); }
.faq-toggle { width: 26px; height: 26px; border: 1.5px solid var(--gray-mid); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; color: var(--dark); transition: all .2s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--accent); color: var(--white); border-color: var(--accent); }
.faq-answer { display: none; padding: 0 22px 18px; font-size: .875rem; color: #5a5a58; line-height: 1.75; }
.faq-item.open .faq-answer { display: block; }

/* ── Prüfdokumente-Bibliothek (loesungen.html) ────────────── */
.doclib-grid { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.doclib-cat { border: 1px solid var(--gray-mid); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.doclib-cat-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; gap: 16px; transition: background .15s; }
.doclib-cat-header:hover { background: var(--gray-light); }
.doclib-cat-title { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; color: var(--dark); }
.doclib-cat-count { font-size: .6875rem; font-weight: 700; color: var(--accent); background: var(--accent-bg); padding: 2px 9px; border-radius: 999px; flex-shrink: 0; }
.doclib-cat-toggle { width: 26px; height: 26px; border: 1.5px solid var(--gray-mid); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; color: var(--dark); transition: all .2s; }
.doclib-cat.open .doclib-cat-toggle { transform: rotate(45deg); background: var(--accent); color: var(--white); border-color: var(--accent); }
.doclib-cat-body { display: none; padding: 0 22px 20px; }
.doclib-cat.open .doclib-cat-body { display: block; }
.doclib-doc-list { display: flex; flex-direction: column; gap: 7px; }
.doclib-doc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--gray-light); border-radius: 8px; font-size: .8125rem; }
.doclib-doc-name { color: var(--dark); font-weight: 500; }
.doclib-doc-ref { font-size: .6875rem; color: #9CA3AF; font-weight: 600; white-space: nowrap; flex-shrink: 0; }

/* ── CTA band ─────────────────────────────────────────────── */
.cta-band { display: block; background: var(--accent); padding: 80px 0; text-align: center; color: var(--white); text-decoration: none; transition: filter .2s; }
.cta-band:hover { filter: brightness(1.08); }
.cta-band h2 { font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; }
.cta-band p { font-size: .9375rem; color: rgba(255,255,255,.8); max-width: 480px; margin: 0 auto; line-height: 1.7; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.cta-band .btn-white { background: var(--charcoal); color: #ffffff; }
.cta-band .btn-white:hover { background: #2d2e33; color: #ffffff; }

/* ── Prose ────────────────────────────────────────────────── */
.prose { max-width: 740px; margin: 72px auto; padding: 0 32px; }
.prose h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 32px; color: var(--dark); }
.prose h2 { font-size: .9375rem; font-weight: 600; margin-top: 32px; margin-bottom: 10px; color: var(--dark); border-left: 2px solid var(--accent); padding-left: 12px; }
.prose p  { margin-bottom: 14px; color: var(--dark); line-height: 1.8; }
.prose a  { color: var(--accent); text-decoration: underline; }
.prose ul { padding-left: 0; margin-bottom: 14px; }
.prose ul li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; color: var(--dark); line-height: 1.65; font-size: .9rem; }
.prose ul li::before { content: '→'; color: var(--accent); font-weight: 600; flex-shrink: 0; }

/* ── btn-white (for colored / accent backgrounds) ─────────── */
.btn-white {
  background: var(--white);
  color: var(--accent);
}
.btn-white:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ── Risk callout (Warum UNAIT section) ───────────────────── */
.risk-callout {
  background: rgba(239,79,62,.04);
  border: 1px solid rgba(239,79,62,.15);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 24px 28px;
  margin-bottom: 52px;
}
.risk-callout__teaser {
  font-size: .9375rem;
  color: var(--dark);
  line-height: 1.75;
}
.risk-callout__expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease;
}
.risk-callout__expandable.open { max-height: 500px; }
.risk-callout__expandable p {
  color: #5a5a58;
  font-size: .9375rem;
  line-height: 1.75;
  margin-top: 16px;
}
.risk-callout__fine-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(239,79,62,.06);
  border: 1px solid rgba(239,79,62,.18);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.risk-callout__fine-amount {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -.03em;
  flex-shrink: 0;
  line-height: 1;
}
.risk-callout__fine-text {
  font-size: .875rem;
  color: #5a5a58;
  line-height: 1.5;
}
.risk-callout__footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.risk-callout__toggle {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  transition: opacity .15s;
}
.risk-callout__toggle:hover { opacity: .7; }
.risk-callout__arrow {
  display: inline-block;
  transition: transform .3s ease;
  font-style: normal;
}
.risk-callout__arrow.rotated { transform: rotate(180deg); }
.risk-callout__link {
  font-size: .8125rem;
  font-weight: 500;
  color: #5a5a58;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.2);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.risk-callout__link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Pain Slider ─────────────────────────────────────────── */
.pain-section { background: var(--charcoal); padding: 100px 0; overflow: hidden; }
.pain-header   { text-align: center; margin-bottom: 56px; }
.pain-slider-wrap { overflow: hidden; }
.pain-track {
  display: flex;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.pain-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}
.pain-slide__img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 60px rgba(239,79,62,.08);
}
.pain-slide__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s ease;
}
.pain-slide__img-wrap:hover img { transform: scale(1.03); }
.pain-slide__kicker {
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.pain-slide__heading {
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 600; color: var(--white);
  line-height: 1.2; letter-spacing: -.02em; margin-bottom: 20px;
}
.pain-slide__text {
  font-size: .9375rem; color: rgba(255,255,255,.55);
  line-height: 1.75; margin-bottom: 14px;
}
.pain-slide__subhead {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  margin-bottom: 12px; margin-top: 4px;
}
.pain-checklist {
  list-style: none; display: flex; flex-direction: column;
  gap: 9px; margin-bottom: 28px;
}
.pain-checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .875rem; color: rgba(255,255,255,.6); line-height: 1.5;
}
.pain-checklist li::before {
  content: ''; flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(239,79,62,.4);
  background: rgba(239,79,62,.1)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23EF4F3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 9px;
}
.pain-controls {
  display: flex; align-items: center; gap: 14px; margin-top: 36px;
}
.pain-nav-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.18);
  background: transparent; color: rgba(255,255,255,.65);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-family: var(--font); transition: all .2s; flex-shrink: 0;
}
.pain-nav-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(239,79,62,.06); }
.pain-dots-row { display: flex; gap: 7px; align-items: center; }
.pain-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.18); cursor: pointer; transition: all .25s;
}
.pain-dot--active { background: var(--accent); width: 22px; border-radius: 3px; }

/* ── Image Break ─────────────────────────────────────────── */
.image-break {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; overflow: hidden;
}
.image-break__bg { position: absolute; inset: 0; }
.image-break__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-break__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,31,35,.92) 0%, rgba(30,31,35,.78) 100%);
}
.image-break__inner {
  position: relative; z-index: 1; padding: 80px 40px;
  max-width: var(--max-w); margin: 0 auto; width: 100%;
}
.image-break__quote {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400; font-style: italic;
  color: rgba(255,255,255,.88); line-height: 1.55;
  max-width: 680px; margin-bottom: 16px;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
}
.image-break__cite {
  display: block; font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 48px;
  padding-left: 24px; font-style: normal;
}
.image-break__heading {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600; color: var(--white);
  line-height: 1.1; letter-spacing: -.025em;
}
.image-break__heading em { color: var(--accent); font-style: normal; }

/* ── Fallbeispiele Slider ────────────────────────────────── */
.examples-section { background: var(--beige); padding: 100px 0; overflow: hidden; }
.examples-track-wrap { overflow: hidden; }
.examples-track {
  display: flex; gap: 20px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.example-card {
  min-width: calc(33.333% - 14px);
  background: var(--white); border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg); padding: 32px 28px;
  flex-shrink: 0; transition: box-shadow .2s, transform .2s;
}
.example-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.example-card__icon {
  width: 44px; height: 44px; background: var(--accent-bg);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 18px;
}
.example-card__icon svg { width: 22px; height: 22px; }
.example-card__heading {
  font-size: .9375rem; font-weight: 600; color: var(--dark);
  margin-bottom: 12px; line-height: 1.3;
}
.example-card__text { font-size: .875rem; color: #5a5a58; line-height: 1.7; }
.examples-controls {
  display: flex; align-items: center;
  justify-content: center; gap: 12px; margin-top: 28px;
}
.examples-nav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--gray-mid); background: transparent;
  color: var(--dark); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-family: var(--font); transition: all .2s;
}
.examples-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.examples-dots { display: flex; gap: 6px; align-items: center; }
.examples-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gray-mid); cursor: pointer; transition: all .2s;
}
.examples-dot--active { background: var(--accent); width: 20px; border-radius: 3px; }

/* ── Warum UNAIT — Pinned crossfade sequence ──────────────── */
/* Section is 100vh — GSAP pin adds scroll space automatically */
.warum-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Background fills the section (not sticky — whole section is pinned) */
.warum-sticky-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.warum-sticky-bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.warum-sticky-bg__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,31,35,.92) 0%, rgba(30,31,35,.78) 100%);
}

/* Slide layer sits on top of background */
.warum-content-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Each slide fills the section, stacked on top of each other */
.warum-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0; /* GSAP controls this */
}
/* Slide 0 (quote) is visible at entry */
#warumSlide0 { opacity: 1; }

.warum-slide__inner {
  width: 100%;
  max-width: 820px;
  padding: 0 40px;
  margin: 0 auto;
}

/* Scroll-Hinweis (nur Slide 0): oranger Balken mit Pfeilspitze nach unten */
.warum-scroll-hint {
  position: absolute;
  left: 40px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  animation: warum-hint-bounce 1.8s ease-in-out infinite;
}
.warum-scroll-hint__label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.warum-scroll-hint__bar {
  width: 3px; height: 30px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(239,79,62,.35));
}
.warum-scroll-hint__tip {
  width: 10px; height: 10px;
  margin-top: -7px;
  border-right: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(45deg);
}
@keyframes warum-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* Panel — transparent, left accent border, styled like the quote */
.warum-panel {
  background: transparent;
  border: none;
  border-left: 3px solid var(--accent);
  padding: 0 0 0 28px;
  color: var(--white);
}
/* Override GSAP initial states when panel is inside a slide
   (the slide itself handles opacity — panel is always full opacity) */
.warum-slide .warum-panel {
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 0;
}

.warum-panel__label {
  font-size: .5625rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.warum-panel__heading {
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 600; line-height: 1.2;
  letter-spacing: -.02em; margin-bottom: 20px;
  color: var(--white);
}
/* Same font size as the quote */
.warum-panel__text {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
}
/* Stat line */
.warum-panel__stat {
  display: flex; align-items: baseline; gap: 18px;
  margin-top: 28px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  flex-wrap: wrap;
}
.warum-panel__stat-num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600; color: var(--accent);
  letter-spacing: -.04em; flex-shrink: 0; line-height: 1;
  font-style: normal;
}
.warum-panel__stat-text {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: rgba(255,255,255,.7); line-height: 1.45;
  font-style: italic;
}
/* Features — same size as quote, clean lines */
.warum-panel__features {
  display: flex; flex-direction: column; margin-top: 4px;
}
.warum-panel__feature {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: rgba(255,255,255,.82); line-height: 1.55;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.warum-panel__feature:last-child { border-bottom: none; }
.warum-panel__feature strong { color: var(--white); font-weight: 600; font-style: normal; }

/* ── Audience Tabs (Für wen?) ────────────────────────────── */
.audience-section { background: var(--beige); padding: 100px 0; }
.audience-tabs { max-width: 900px; margin: 0 auto; }
.audience-tab-bar {
  display: flex; border-bottom: 1.5px solid var(--gray-mid);
  margin-bottom: 40px; flex-wrap: wrap;
  justify-content: center;
}
.audience-tab {
  padding: 12px 28px; font-family: var(--font);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: #8a8a88; background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1.5px;
  transition: color .15s, border-color .15s;
}
.audience-tab:hover { color: var(--dark); }
.audience-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.audience-panel { display: none; }
.audience-panel--active {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 52px; align-items: start;
  min-height: 420px;
}
.audience-panel__desc {
  font-size: .9375rem; color: #5a5a58;
  line-height: 1.75; margin-bottom: 24px;
}
.audience-panel__link {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
  transition: gap .15s;
}
.audience-panel__link:hover { gap: 10px; }
.audience-features { display: flex; flex-direction: column; gap: 11px; }
.audience-feature {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .875rem; color: var(--dark); line-height: 1.55;
}
.audience-feature::before {
  content: ''; flex-shrink: 0; margin-top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(239,79,62,.3);
  background: rgba(239,79,62,.08)
    url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-4.5' stroke='%23EF4F3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 9px;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer { background: var(--black); color: rgba(255,255,255,.4); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer__logo { font-size: 1.375rem; font-weight: 500; color: var(--white); letter-spacing: .02em; margin-bottom: 14px; }
.footer__logo .ai { color: var(--accent); }
.footer__desc { font-size: .8125rem; line-height: 1.7; color: rgba(255,255,255,.35); max-width: 260px; margin-bottom: 20px; }
.footer__social { display: flex; gap: 8px; }
.footer__social a { width: 34px; height: 34px; background: rgba(255,255,255,.06); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); transition: all .15s; }
.footer__social a:hover { background: var(--accent); color: var(--white); }
.footer__social svg { width: 15px; height: 15px; }
.footer__col-title { font-size: .5625rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.25); margin-bottom: 14px; }
.footer__col a { display: block; font-size: .8125rem; color: rgba(255,255,255,.4); padding: 4px 0; transition: color .15s; }
.footer__col a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.2); flex-wrap: wrap; gap: 12px; }
.footer__bottom-links { display: flex; gap: 18px; }
.footer__bottom-links a { color: rgba(255,255,255,.25); }
.footer__bottom-links a:hover { color: rgba(255,255,255,.6); }

/* ── "NEU" badge for product feature lists ────────────────── */
.feat-new {
  display: inline-block;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(239,79,62,.12);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid rgba(239,79,62,.2);
}

/* ── Showcase item 06 extras ──────────────────────────────── */
.showcase-new-tag {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(239,79,62,.15);
  color: var(--accent);
  border: 1px solid rgba(239,79,62,.3);
  margin-left: 8px;
  vertical-align: middle;
}
.showcase-trust-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.showcase-trust-row span,
.showcase-trust-row a {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border: 1px solid rgba(255,255,255,.12);
  padding: 4px 10px;
  border-radius: var(--radius);
}
.showcase-trust-link {
  color: var(--accent) !important;
  border-color: rgba(239,79,62,.35) !important;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.showcase-trust-link:hover {
  background: rgba(239,79,62,.12);
  border-color: var(--accent) !important;
}

/* ── KI-Assistent Feature Section (loesungen.html) ────────── */
.ki-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.ki-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.ki-feature-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 1.5px;
  background: var(--accent);
  flex-shrink: 0;
}
.ki-feature-bullets {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0 36px;
}
.ki-feature-bullet {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ki-feature-bullet-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-light);
  border: 1px solid rgba(239,79,62,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.ki-feature-bullet-icon svg { width: 17px; height: 17px; }
.ki-feature-bullet-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 3px;
}
.ki-feature-bullet-desc {
  font-size: .8125rem;
  color: #5a5a58;
  line-height: 1.65;
}
/* Chat card (right column, loesungen.html) */
.ki-chat-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.ki-chat-card-header {
  background: var(--charcoal);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ki-chat-card-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E07A2F, #C83A2C);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.ki-chat-card-title { font-size: .8125rem; font-weight: 600; color: var(--white); }
.ki-chat-card-sub   { font-size: .625rem; color: rgba(255,255,255,.4); margin-top: 1px; }
.ki-chat-card-badge {
  margin-left: auto;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(39,201,63,.15);
  border: 1px solid rgba(39,201,63,.25);
  color: #4ade80;
  flex-shrink: 0;
}
.ki-chat-card-context {
  background: rgba(239,79,62,.06);
  border-bottom: 1px solid rgba(239,79,62,.12);
  padding: 7px 18px;
  font-size: .6875rem;
  color: #5a5a58;
}
.ki-chat-card-context strong { color: var(--accent); }
.ki-chat-messages {
  padding: 16px 18px;
  background: var(--gray-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ki-chat-msg {
  display: flex;
  gap: 9px;
  max-width: 90%;
}
.ki-chat-msg--ai  { align-self: flex-start; }
.ki-chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.ki-chat-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background: linear-gradient(135deg, #E07A2F, #C83A2C);
}
.ki-chat-msg--user .ki-chat-dot { display: none; }
.ki-chat-bubble {
  font-size: .8125rem;
  line-height: 1.6;
  padding: 10px 13px;
  border-radius: 3px 10px 10px 10px;
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--gray-mid);
}
.ki-chat-msg--user .ki-chat-bubble {
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 10px 3px 10px 10px;
}
.ki-chat-card-footer {
  padding: 10px 18px;
  background: var(--white);
  border-top: 1px solid var(--gray-mid);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a8a88;
  text-align: center;
}

@media (max-width: 768px) {
  .ki-feature-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Live-Demo Embed (Startseite) ──────────────────────────── */
.demo-embed-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  text-align: center;
  background: var(--accent-bg);
  border: 1px solid rgba(239,79,62,.18);
  border-radius: var(--radius);
  padding: 12px 22px;
  margin-bottom: 24px;
  font-size: .8125rem;
  line-height: 1.5;
}
.demo-embed-notice strong {
  color: var(--accent);
  font-weight: 700;
}
.demo-embed-notice span {
  color: #5a5a58;
}
#live-demo { scroll-margin-top: 90px; }
.demo-embed-card {
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--white);
}
.demo-embed-placeholder {
  background: var(--gray-light);
  min-height: 360px;
  display: flex;
}
.demo-embed-placeholder__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 28px;
}
.demo-embed-placeholder__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 18px;
  padding-left: 4px; /* optical centering of ▶ */
}
.demo-embed-placeholder__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 10px;
}
.demo-embed-placeholder__text {
  font-size: .8125rem;
  color: #5a5a58;
  max-width: 420px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.demo-embed-placeholder__text a { color: var(--accent); text-decoration: underline; }

/* Mobile: lange Buttons umbrechen statt Layout sprengen; Grid-Items schrumpfbar */
@media (max-width: 600px) {
  .btn { white-space: normal; }
  .partner-intro-grid > *,
  .partner-cta-grid > *,
  .partner-modules-grid > * { min-width: 0; }
}

/* ── Story grid (ueber-uns) ───────────────────────────────── */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ── Approach items (ueber-uns) ───────────────────────────── */
.approach-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 32px;
  align-items: center;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pain-slide { grid-template-columns: 1fr; gap: 40px; }
  .audience-panel--active { grid-template-columns: 1fr; gap: 28px; }
  .example-card { min-width: calc(50% - 10px); }
}
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__panel { display: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2) { border-right: none; }
  .step:nth-child(3) { border-top: 1px solid var(--gray-mid); border-right: 1px solid var(--gray-mid); }
  .step:nth-child(4) { border-top: 1px solid var(--gray-mid); border-right: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .container { padding: 0 24px; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .nav__links, .nav__cta, .nav__demo-cta { display: none; }
  .nav__burger { display: flex; }
  .hero__grid { padding: 48px 0; }
  .hero__title-line { font-size: 2rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .community-box { grid-template-columns: 1fr; gap: 28px; }
  .newsletter-form { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .pain-slide { grid-template-columns: 1fr; gap: 28px; }
  .pain-section { padding: 72px 0; }
  .pain-slide__img-wrap { aspect-ratio: 16/9; }
  .image-break { min-height: 55vh; }
  .image-break__inner { padding: 60px 24px; }
  .examples-section { padding: 72px 0; }
  .example-card { min-width: 85%; }
  .audience-section { padding: 72px 0; }
  .audience-tab { padding: 10px 16px; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .cta-actions { flex-direction: column; align-items: center; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .product-card { padding: 32px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  /* Story grid collapses to single column.
     The inner award div (display:grid inline) creates auto tracks that size to the
     image's intrinsic width. Fix: force children to fill the track and cap the
     inner grid tracks at minmax(0, 1fr). */
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-grid > * { min-width: 0; width: 100%; overflow: hidden; }
  .story-grid > div[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .story-img { width: 100%; max-width: 100%; display: block; }
  /* Pain controls: wrap CTA onto its own line */
  .pain-controls { flex-wrap: wrap; }
  .pain-controls .btn { width: 100%; justify-content: center; margin-left: 0 !important; margin-top: 4px; }
}
@media (max-width: 480px) {
  .steps-grid { grid-template-columns: 1fr; }
  .step { border-right: none !important; border-top: 1px solid var(--gray-mid); }
  .step:first-child { border-top: none; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  /* Approach items collapse icon above text */
  .approach-item { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Responsive fixes ─────────────────────────────────────── */

/* Global: prevent horizontal scroll on any viewport */
html { overflow-x: hidden; }

/* ── Partner-Karten-Grid (Weitere Partner, vertikal gestapelt) */
.partner-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.partner-card-horiz {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.partner-card-content {
  display: flex;
  flex-direction: column;
}
.partner-card-content .btn {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 640px) {
  .partner-card-horiz {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Partner-Seite responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .partner-intro-grid  { gap: 40px !important; }
  .partner-features-grid { grid-template-columns: 1fr 1fr !important; }
  .partner-modules-grid  { gap: 20px !important; }
  .gwdg-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 960px) {
  .partner-intro-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .partner-modules-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .partner-features-grid { grid-template-columns: 1fr !important; }
  .partner-cta-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .gwdg-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .partner-keyfacts-grid { grid-template-columns: 1fr !important; }
}

/* Onboarding grid (loesungen.html) – replaces inline style */
.onboarding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 768px) {
  .onboarding-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Warum section CTA buttons: allow text to wrap on narrow screens */
@media (max-width: 600px) {
  .warum-panel .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .warum-slide__inner { padding: 0 20px; }
}

/* Mobile: Warum-Slides unter die fixe Launch-Bar + Nav schieben,
   damit der Inhalt (Zitat) oben nicht abgeschnitten wird; Inhalt kompakter. */
@media (max-width: 768px) {
  .warum-slide { padding-top: 168px; padding-bottom: 30px; }
  #warumSlide0 .image-break__quote { font-size: 1.0625rem; margin-bottom: 14px; }
  #warumSlide0 .image-break__cite { margin-bottom: 22px; }
  #warumSlide0 .image-break__heading { font-size: 1.8rem; }
  .warum-scroll-hint { left: 20px; bottom: 20px; }
  .warum-scroll-hint__label { display: none; }
}

/* Stats-grid: single column on very small screens (< 400px) */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(239,79,62,.15); }
  .stat-item:last-child { border-bottom: none; }
}

/* 3er-Stats-Variante: wenn das Grid auf 2 Spalten umbricht, letzte Kachel zentriert ueber volle Breite */
@media (max-width: 1024px) {
  .stats-grid--three .stat-item:last-child { grid-column: 1 / -1; }
}

/* ── Launch Countdown Bar (Pre-Launch, index.html) ────────── */
.launch-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  background: var(--dark);
  color: var(--white);
  padding: 9px 0;
}
.launch-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
}
.launch-bar__text {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.launch-bar__text strong { color: var(--accent); font-weight: 700; }
.launch-bar__countdown { display: flex; gap: 8px; }
.launch-bar__unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 3px 10px;
  min-width: 42px;
}
.launch-bar__num {
  font-size: .9375rem; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.launch-bar__label {
  font-size: .5rem; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.5);
}
@media (max-width: 640px) {
  .launch-bar__text { width: 100%; font-size: .75rem; }
  .launch-bar__countdown { gap: 5px; }
  .launch-bar__unit { min-width: 36px; padding: 3px 6px; }
}

/* ── Disabled booking links (Pre-Launch) ──────────────────── */
.is-disabled { cursor: not-allowed !important; }
a.btn.is-disabled,
a.btn.is-disabled:hover {
  background: var(--gray-mid) !important;
  color: #8a8a88 !important;
  border-color: var(--gray-mid) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
a.is-disabled:not(.btn) {
  color: inherit !important;
  text-decoration: none;
}

/* ============================================================
   SUPPORT / KUNDENPORTAL
   ============================================================ */

/* ── Nav Login-Button ─────────────────────────────────────── */
.nav__login { margin-left: 10px; }
.nav__login.btn {
  padding: 8px 14px;
  font-size: .6875rem;
  letter-spacing: .04em;
}
@media (max-width: 768px) {
  .nav__login { display: none; }
  .nav__mobile .nav__login { display: inline-flex; margin-left: 0; }
}

/* ── Passwort-Gate ────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 30%, rgba(239,79,62,.07) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 15% 80%, rgba(239,79,62,.05) 0%, transparent 55%);
  pointer-events: none;
}
.gate__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 48px 40px 40px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.gate__logo {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.gate__logo .ai { color: var(--accent); }
.gate__icon {
  width: 52px; height: 52px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(239,79,62,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.gate__icon svg { width: 22px; height: 22px; }
.gate__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}
.gate__text {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  margin-bottom: 28px;
}
.gate__form { display: flex; flex-direction: column; gap: 12px; }
.gate__input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--white);
  font-family: var(--font);
  font-size: .9375rem;
  letter-spacing: .04em;
  text-align: center;
  transition: border-color .2s, background .2s;
}
.gate__input::placeholder { color: rgba(255,255,255,.35); letter-spacing: .02em; }
.gate__input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.09); }
.gate__error {
  display: none;
  font-size: .75rem;
  color: #ff8a7d;
  margin-top: 2px;
}
.gate--shake .gate__card { animation: gateShake .4s ease; }
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.gate__hint {
  margin-top: 24px;
  font-size: .71875rem;
  color: rgba(255,255,255,.35);
  line-height: 1.6;
}
.gate__hint a { color: rgba(255,255,255,.6); text-decoration: underline; }
.gate__hint a:hover { color: var(--white); }
body.gate-locked { overflow: hidden; }
body.gate-locked .support-page { visibility: hidden; }

/* ── Support-Hero mit Suche ───────────────────────────────── */
.support-hero {
  background: var(--charcoal);
  padding: calc(var(--nav-h) + 72px) 0 88px;
  position: relative;
  overflow: hidden;
}
.support-hero__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 80% 20%, rgba(239,79,62,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 8% 90%, rgba(239,79,62,.05) 0%, transparent 55%);
  pointer-events: none;
}
.support-hero__inner { position: relative; z-index: 1; text-align: center; }
.support-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.support-hero p {
  font-size: .9375rem;
  color: rgba(255,255,255,.55);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.75;
}

/* Suchfeld */
.support-search {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
.support-search__box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 6px 8px 6px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.support-search__box svg { width: 18px; height: 18px; color: #8a8a88; flex-shrink: 0; }
.support-search__input {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: .9375rem;
  color: var(--dark);
  padding: 12px 0;
  min-width: 0;
}
.support-search__input:focus { outline: none; }
.support-search__input::placeholder { color: #9a9a98; }
.support-search__kbd {
  font-size: .625rem;
  color: #9a9a98;
  border: 1px solid var(--gray-mid);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  user-select: none;
}
/* Ergebnis-Dropdown */
.support-search__results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
  text-align: left;
  z-index: 50;
}
.support-search__results.open { display: block; }
.support-search-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-light);
  transition: background .12s;
  font-family: var(--font);
}
.support-search-result:last-child { border-bottom: none; }
.support-search-result:hover,
.support-search-result.is-active { background: var(--accent-bg); }
.support-search-result__q {
  font-size: .8438rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 3px;
}
.support-search-result__q mark {
  background: none;
  color: var(--accent);
}
.support-search-result__cat {
  font-size: .6875rem;
  color: #8a8a88;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.support-search__empty {
  padding: 22px 20px;
  font-size: .8438rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.support-search__empty a { color: var(--accent); font-weight: 600; }
/* Beliebte Suchbegriffe */
.support-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.support-chip {
  font-size: .71875rem;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: 6px 14px;
  transition: all .15s;
  cursor: pointer;
  background: none;
  font-family: var(--font);
}
.support-chip:hover { border-color: var(--accent); color: var(--white); background: rgba(239,79,62,.12); }

/* ── Themen-Kacheln ───────────────────────────────────────── */
.support-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.support-cat {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all .2s ease;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
}
.support-cat:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.support-cat__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.support-cat__icon svg { width: 20px; height: 20px; }
.support-cat__title { font-size: .9375rem; font-weight: 600; margin-bottom: 6px; color: var(--dark); }
.support-cat__desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; }
.support-cat__count {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Schulungs-Karten ─────────────────────────────────────── */
.training-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.training-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .2s ease;
}
.training-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.training-card__media {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.training-card__media::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 70% 20%, rgba(239,79,62,.14) 0%, transparent 60%);
}
.training-card__play {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  padding-left: 4px;
  box-shadow: 0 8px 30px rgba(239,79,62,.45);
  transition: transform .2s;
}
.training-card:hover .training-card__play { transform: scale(1.1); }
.training-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: 4px 11px;
  backdrop-filter: blur(4px);
}
.training-card__duration {
  position: absolute;
  bottom: 12px; right: 12px;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(0,0,0,.55);
  border-radius: var(--radius);
  padding: 3px 9px;
}
.training-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.training-card__title { font-size: .9375rem; font-weight: 600; margin-bottom: 8px; }
.training-card__desc { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; flex: 1; }
.training-card__cta {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.training-card__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.training-card__step {
  font-size: .6563rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--gray-light);
  border-radius: 100px;
  padding: 4px 10px;
}

/* ── Guideflow-Modal ──────────────────────────────────────── */
.gf-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(20,20,22,.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.gf-modal.open { display: flex; }
.gf-modal__inner {
  width: 100%;
  max-width: 1060px;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.gf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gf-modal__title { font-size: .8438rem; font-weight: 600; color: var(--white); }
.gf-modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: rgba(255,255,255,.6);
  font-size: 1.125rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.gf-modal__close:hover { background: rgba(255,255,255,.1); color: var(--white); }
.gf-modal__body { position: relative; }
/* Consent-Platzhalter im Modal (analog Live-Demo auf loesungen.html) */
.gf-consent {
  padding: 72px 40px;
  text-align: center;
}
.gf-consent__icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(239,79,62,.14);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  padding-left: 3px;
}
.gf-consent__title { font-size: 1.0625rem; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.gf-consent__text {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 24px;
}
.gf-consent__text a { color: var(--accent); text-decoration: underline; }
/* Noch kein Guideflow hinterlegt */
.gf-soon {
  padding: 80px 40px;
  text-align: center;
}
.gf-soon__title { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.gf-soon__text { font-size: .8125rem; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 420px; margin: 0 auto; }

/* ── FAQ-Bereich (Support) ────────────────────────────────── */
.support-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 44px;
}
.support-faq-tab {
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--gray-mid);
  border-radius: 100px;
  padding: 9px 18px;
  transition: all .15s;
}
.support-faq-tab:hover { border-color: var(--dark); color: var(--dark); }
.support-faq-tab--active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}
.support-faq-group { display: none; }
.support-faq-group.open { display: block; }
.support-faq-group__title {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  max-width: 740px;
  margin: 24px auto 16px;
}
/* Feedback unter jeder Antwort */
.faq-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-light);
  font-size: .71875rem;
  color: #8a8a88;
}
.faq-feedback button {
  font-family: var(--font);
  font-size: .71875rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--gray-mid);
  border-radius: 100px;
  padding: 4px 13px;
  transition: all .15s;
}
.faq-feedback button:hover { border-color: var(--dark); color: var(--dark); }
.faq-feedback button.voted {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  pointer-events: none;
}
.faq-feedback__thanks { display: none; color: var(--green); font-weight: 600; }
/* Suchtreffer-Hervorhebung */
.faq-item--highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(239,79,62,.15);
}

/* ── Support-Kontakt-Band ─────────────────────────────────── */
.support-contact {
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.support-contact::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 90% 10%, rgba(239,79,62,.12) 0%, transparent 60%);
  pointer-events: none;
}
.support-contact > * { position: relative; }
.support-contact h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.support-contact p {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
}
.support-contact__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}
.support-contact__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
  color: rgba(255,255,255,.7);
}
.support-contact__row svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.support-contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .support-cats { grid-template-columns: 1fr 1fr; }
  .training-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .support-cats { grid-template-columns: 1fr; }
  .training-grid { grid-template-columns: 1fr; }
  .support-contact { grid-template-columns: 1fr; padding: 40px 28px; gap: 32px; }
  .support-hero { padding: calc(var(--nav-h) + 48px) 0 60px; }
  .support-search__kbd { display: none; }
  .gate__card { padding: 36px 24px 32px; }
}