/* =============================================================================
   QUESAP® Lernwelten 2026 – Stylesheet
   -----------------------------------------------------------------------------
   Basis: QUESAP_Mastertemplate_Landingpage.html
   Farben, Typografie, Radien, Schatten, Abstände und Containerbreiten sind
   unverändert aus dem Seminar-Template übernommen. Neue Komponenten sind aus
   den vorhandenen Bausteinen abgeleitet (.inhalt-card, .detail-item, .feature,
   .btn-cta, .section-label).

   Aufbau: Mobile First. Media Queries erweitern nach oben.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1  RESET  (aus dem Template)
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* -----------------------------------------------------------------------------
   2  DESIGN-TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* CI-Farben – unverändert aus dem Template */
  --blue: #014a75;
  --blue-dark: #013355;
  --red: #a9171f;
  --light-blue: #dbe5f1;
  --gray: #707173;
  --white: #ffffff;

  /* Abgeleitete Werte */
  --red-dark: #8a1219;          /* Hover-Zustand, im Template als #8a1219 gesetzt */
  --blue-soft: #eef3f9;         /* hellere Tönung für große Flächen */
  --border: #d4dde8;
  --muted-bg: #e7eaee;
  --muted-fg: #5a5c5f;

  /* Fließtext: dunkler als --gray, damit auf --light-blue WCAG AA erreicht wird
     (--gray erreicht dort nur 3,84:1). Auf Weiß optisch nahezu identisch. */
  --text: #4d4e50;

  /* Schrift – unverändert aus dem Template */
  --font-head: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;

  /* Struktur */
  --nav-h: 56px;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 2px 20px rgba(0, 0, 0, 0.08);
  --shadow-media: 0 8px 30px rgba(0, 0, 0, 0.12);
  --container: 960px;
}

@media (min-width: 900px) {
  :root { --nav-h: 68px; }
}

/* -----------------------------------------------------------------------------
   3  BASIS
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--blue);
  line-height: 1.3;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

ul, ol { list-style: none; }

a { color: var(--blue); }

/* Sichtbare Fokus-Zustände, auch auf dunklen Flächen */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.offer-band :focus-visible { outline-color: var(--white); }

/* Fließtext-Links in Randbereichen etwas größer antippbar machen */
.raffle-terms a,
.cta-hint a,
.site-footer a { display: inline-block; padding: 3px 0; }

/* Nur für Screenreader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--red);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0.8rem; }

[hidden] { display: none !important; }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .card-hover:hover,
  .btn:hover { transform: none !important; }
}

/* -----------------------------------------------------------------------------
   4  LAYOUT
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
}

section {
  padding: 3rem 1.5rem;
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

@media (min-width: 600px) {
  section { padding: 5rem 2rem; }
}

.section--tint { background: var(--light-blue); }
.section--soft { background: var(--blue-soft); }

.section-label {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--red);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

section h2 {
  font-size: clamp(1.5rem, 4.2vw, 2.2rem);
  margin-bottom: 1.2rem;
}

section h3 { font-size: 1.15rem; }

section p { margin-bottom: 1.2rem; }
section p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.02rem, 2.4vw, 1.15rem);
  color: var(--blue);
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.55;
}

.note {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Quellenangabe unter Statistiken – Kleinsatz, aber kontraststark genug */
.source-note {
  font-size: 0.78rem;
  line-height: 1.55;
  margin-top: 1rem;
  color: var(--text);
}
.source-note a { color: var(--blue); }

/* Abstands-Utilities – ersetzen Inline-Styles, damit die Content-Security-Policy
   ohne 'unsafe-inline' für Styles auskommt. */
.mt-m { margin-top: 1rem; }
.mt-l { margin-top: 2rem; }
.mt-xl { margin-top: 2.5rem; }
.link-inherit { color: inherit; }

.grid { display: grid; gap: 1.25rem; margin-top: 2rem; }

@media (min-width: 600px) {
  .grid { gap: 1.5rem; }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.stack-cta {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 2rem;
}

@media (min-width: 600px) {
  .stack-cta { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

.stack-cta--center { align-items: stretch; }
@media (min-width: 600px) {
  .stack-cta--center { justify-content: center; align-items: center; }
}

/* -----------------------------------------------------------------------------
   5  BUTTONS  (abgeleitet aus .btn-cta und nav a.nav-cta)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;                 /* großes Touch-Ziel */
  padding: 0.85rem 1.8rem;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.2s;
}

@media (min-width: 600px) {
  .btn { font-size: 1.05rem; padding: 0.95rem 2.2rem; }
}

.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); transform: translateY(-2px); }

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

.on-dark .btn--secondary,
.offer-band .btn--secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.65);
}
.on-dark .btn--secondary:hover,
.offer-band .btn--secondary:hover {
  background: var(--white);
  color: var(--blue);
}

.offer-band .btn--primary { background: var(--white); color: var(--red); }
.offer-band .btn--primary:hover { background: var(--light-blue); color: var(--red-dark); }

.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn--block { width: 100%; }
@media (min-width: 600px) { .btn--block { width: auto; } }

/* Platzhalter-Zustand: externe URL liegt noch nicht vor.
   Wird von config.js automatisch aufgehoben, sobald eine URL eingetragen ist. */
.btn[aria-disabled='true'] {
  background: var(--muted-bg);
  color: var(--muted-fg);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}
.on-dark .btn[aria-disabled='true'],
.offer-band .btn[aria-disabled='true'] {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

.cta-placeholder-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.35rem;
  color: var(--muted-fg);
}
.on-dark .cta-placeholder-note,
.offer-band .cta-placeholder-note { color: rgba(255, 255, 255, 0.85); }

.cta-group { display: flex; flex-direction: column; }

/* -----------------------------------------------------------------------------
   6  NAVIGATION
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: var(--shadow-nav);
  z-index: 100;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--nav-h);
}

@media (min-width: 900px) {
  .site-nav { padding: 0.8rem 2rem; gap: 1.5rem; }
}

.nav-logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.nav-logo .ques { color: var(--blue); }
.nav-logo .ap { color: var(--red); }
/* Das QUESAP-Logo ist eine Wortmarke im Verhältnis 6:1. Deshalb ueber die
   Breite steuern und die Höhe folgen lassen – so bleibt es unverzerrt und
   passt auch bei 320 px neben CTA und Burger-Menü. */
.nav-logo img {
  display: block;
  width: 148px;
  height: auto;
}

@media (min-width: 900px) {
  .nav-logo { font-size: 1.5rem; }
  .nav-logo img { width: 226px; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

.nav-links a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { border-bottom-color: var(--red); }
.nav-links a[aria-current='true'] { border-bottom-color: var(--red); color: var(--red); }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Nav-CTA – Maße aus dem Template übernommen */
.nav-cta {
  background: var(--red);
  color: var(--white);
  padding: 0.5rem 1rem;
  min-height: 40px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.3s;
}
.nav-cta:hover { background: var(--red-dark); }
.nav-cta[aria-disabled='true'] { background: var(--muted-bg); color: var(--muted-fg); cursor: not-allowed; }

@media (min-width: 900px) {
  .nav-cta { padding: 0.5rem 1.5rem; font-size: 0.9rem; }
}

/* Sehr schmale Geräte (ab 320 px): Navigation kompakter, damit Logo,
   Demo-CTA und Burger-Menü nebeneinander vollständig Platz haben. */
@media (max-width: 379px) {
  .site-nav { padding: 0.5rem 0.7rem; gap: 0.45rem; }
  .nav-cta { padding: 0.5rem 0.7rem; font-size: 0.75rem; }
  .nav-cta-word { display: none; }
  .nav-logo { font-size: 1.1rem; }
  .nav-logo img { width: 124px; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 100%;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-nav);
  z-index: 99;
  padding: 0.5rem 1rem 1.5rem;
}

@media (min-width: 900px) {
  .mobile-menu { display: none !important; }
}

.mobile-menu a {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blue);
  text-decoration: none;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: var(--red); }

/* Sticky Bottom-CTA auf Mobile */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
  padding: 0.55rem 1rem;
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(115%);
  transition: transform 0.25s ease;
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { width: 100%; min-height: 50px; }

@media (min-width: 900px) {
  .mobile-cta { display: none; }
}

@media (max-width: 899px) {
  body { padding-bottom: 76px; }
}

/* -----------------------------------------------------------------------------
   7  HERO
   -------------------------------------------------------------------------- */
.hero {
  margin-top: var(--nav-h);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--white);
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
}

@media (min-width: 600px) {
  .hero { padding: 4.5rem 2rem 4rem; }
}

.hero .badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.78rem;
  line-height: 1.45;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.4px;
}

@media (min-width: 600px) {
  .hero .badge { font-size: 0.85rem; padding: 0.4rem 1.2rem; margin-bottom: 2rem; }
}

.hero h1 {
  color: var(--white);
  font-size: clamp(1.55rem, 5.6vw, 3rem);
  max-width: 820px;
  margin: 0 auto 1rem;
  font-weight: 700;
}

.hero .claim {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  letter-spacing: 0.3px;
  margin: 0 auto 1rem;
  color: var(--white);
}

.hero .subtitle {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  max-width: 720px;
  margin: 0 auto 1.75rem;
  opacity: 0.92;
  line-height: 1.6;
}

.hero .stack-cta { margin-top: 0; }
@media (min-width: 600px) { .hero .stack-cta { justify-content: center; } }

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

@media (min-width: 600px) {
  .hero-meta { flex-direction: row; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  opacity: 0.92;
}
.hero-meta-item svg { flex-shrink: 0; }

/* Live-Hinweis während des Kongresses */
.live-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.85rem 1.25rem;
  margin-top: var(--nav-h);
}
.live-banner:not([hidden]) + .hero { margin-top: 0; }
.live-banner .live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--white);
  flex-shrink: 0;
}
.live-banner .live-place { font-weight: 600; opacity: 0.95; }

/* -----------------------------------------------------------------------------
   8  KARTEN – Basis aus .inhalt-card
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--blue);
}

@media (min-width: 600px) { .card { padding: 1.8rem; } }

.card-hover { transition: transform 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

.card h3 { margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }

.card--red { border-left-color: var(--red); }

/* StatCard */
.stat-card {
  background: var(--white);
  border-radius: var(--radius-card);
  border-top: 5px solid var(--red);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

@media (min-width: 600px) { .stat-card { padding: 2rem 1.8rem; } }

.stat-card .stat-value {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(2.1rem, 9vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.stat-card .stat-text { font-size: 0.98rem; margin-bottom: 0; }

/* SystemCard – PLAN / DO / CHECK & ACT */
.system-card { display: flex; flex-direction: column; }

.system-card .card-eyebrow {
  display: inline-block;
  align-self: flex-start;
  background: var(--light-blue);
  color: var(--blue);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.9rem;
}

.system-card .card-benefit {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blue);
  border-top: 1px solid var(--border);
}

/* ChoiceCard – Selbstselektion, ganze Karte klickbar */
.choice-card { position: relative; display: flex; flex-direction: column; }

.choice-card .choice-key {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--light-blue);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.choice-card .choice-link {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.choice-card .choice-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
.choice-card:hover .choice-link { text-decoration: underline; }
.choice-card:focus-within { box-shadow: var(--shadow-card-hover); }

/* ProductCard */
.product-card { display: flex; flex-direction: column; }

.product-card .product-audience {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.product-card h3 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.product-card .product-claim {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue);
  font-size: 1.02rem;
  margin-bottom: 1rem;
}
/* Festes Seitenverhältnis für beide Produktbilder. Das hat zwei Gründe:
   die Karten bleiben gleich hoch, obwohl die Screenshots unterschiedliche
   Formate haben – und der Browser reserviert den Platz schon vor dem Laden,
   sodass beim Nachladen nichts verspringt. Die Mockups stehen auf weißem
   Grund, deshalb fällt "contain" nicht als Rand auf. */
.product-card .product-shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.2rem;
}
.product-card .product-proof {
  font-size: 0.88rem;
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
}
.product-card .cta-group { margin-top: auto; }

/* Vorteilsliste mit Haken */
.check-list { display: grid; gap: 0.7rem; margin-bottom: 1.2rem; }
.check-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.96rem;
  line-height: 1.55;
}
.check-list li::before {
  content: '';
  width: 20px; height: 20px;
  margin-top: 0.28rem;
  background-color: var(--blue);
  -webkit-mask: var(--check-icon) center / contain no-repeat;
  mask: var(--check-icon) center / contain no-repeat;
}
:root {
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* TopicCard – Akademie */
.topic-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--red);
  padding: 1.25rem 1.4rem;
}
.topic-card h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.topic-card p { font-size: 0.9rem; margin-bottom: 0; }

/* ToolCard – Werkzeuge am Stand */
.tool-card { display: flex; flex-direction: column; gap: 0.5rem; }
.tool-card .tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  background: var(--light-blue);
  color: var(--blue);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 50px;
  margin-bottom: 0.4rem;
}
.tool-card h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.tool-card p { font-size: 0.93rem; margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   8b  WEITERENTWICKLUNG + KUNDENSTATEMENT
   -----------------------------------------------------------------------------
   Läuft quer unter beiden Produktkarten. Bewusst ruhiger als der
   Messevorteil-Banner und ohne die Merkmale einer Produktkarte (kein roter
   Balken links, keine weiße Fläche) – damit es nicht wie eine dritte Karte
   wirkt und die Symmetrie der beiden Karten erhalten bleibt.
   -------------------------------------------------------------------------- */
.innovation {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

@media (min-width: 600px) {
  .innovation { padding: 2rem; gap: 2rem; margin-top: 2rem; }
}

@media (min-width: 900px) {
  .innovation {
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

/* Grid-Elemente schrumpfen standardmäßig nicht unter ihre längste
   unbrechbare Textfolge (min-width: auto). Lange Angaben wie
   "Göppingen/Stuttgart/Tübingen" sprengen dadurch bei 320 px den Block.
   min-width: 0 hebt das auf, der Umbruch regelt den Rest. */
.innovation > *,
.testimonial-quelle,
.testimonial-person { min-width: 0; }

.testimonial-name,
.testimonial-rolle,
.testimonial-firma { overflow-wrap: break-word; }

.innovation-label {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--red);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.innovation-text h3 {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  margin-bottom: 0.9rem;
}

.innovation-text p { font-size: 0.96rem; margin-bottom: 0.9rem; }
.innovation-text p:last-child { margin-bottom: 0; }

/* Das Statement selbst: weiße Fläche, damit es sich vom Blockhintergrund
   abhebt, aber ohne die Produktkarten-Signatur. */
.testimonial {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.3rem;
}

@media (min-width: 600px) { .testimonial { padding: 1.6rem; } }

.testimonial-quote { margin-bottom: 1.2rem; }
.testimonial-quote p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.testimonial-quote p:first-child::before { content: '„'; }
.testimonial-quote p:last-child::after { content: '“'; }
.testimonial-quote p:last-child { margin-bottom: 0; }

.testimonial-quelle {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.9rem;
  align-items: center;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.testimonial-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* Kopfbereich des freigestellten Portraits zeigen */
  object-fit: cover;
  object-position: 50% 6%;
  background: var(--blue-soft);
}

.testimonial-person { display: flex; flex-direction: column; line-height: 1.4; }

.testimonial-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--blue);
}
.testimonial-rolle,
.testimonial-firma { font-size: 0.88rem; }
.testimonial-firma { font-weight: 600; }

.testimonial-logo {
  grid-column: 2;
  max-width: 132px;
  max-height: 44px;
  width: auto;
  height: auto;
  margin-top: 0.6rem;
}

/* -----------------------------------------------------------------------------
   9  OFFER-BANNER  (Software-Messevorteil)
   -------------------------------------------------------------------------- */
.offer-band {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
}
.offer-band h2, .offer-band h3 { color: var(--white); }

.offer-band .section-label { color: rgba(255, 255, 255, 0.85); }

.offer-highlight {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 8.5vw, 3.2rem);
  line-height: 1.1;
  margin: 0.5rem 0 1.25rem;
}

.offer-steps {
  display: grid;
  gap: 0.9rem;
  counter-reset: offer-step;
  margin: 1.5rem 0;
}
.offer-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.55;
}
.offer-steps li::before {
  counter-increment: offer-step;
  content: counter(offer-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
}

.offer-scope {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-card);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.offer-scope strong { font-family: var(--font-head); }
.offer-scope ul { display: grid; gap: 0.3rem; margin-top: 0.5rem; }
.offer-scope li::before { content: '– '; }

.offer-reassurance {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.95;
  margin-top: 1.5rem;
  max-width: 640px;
}

/* -----------------------------------------------------------------------------
   10  DISCOUNT-CARDS  (Seminar-Messevorteile)
   -------------------------------------------------------------------------- */
.discount-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-top: 5px solid var(--red);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) { .discount-card { padding: 1.8rem; } }

.discount-card h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }

.discount-value {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(1.9rem, 7.5vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.discount-meta {
  display: grid;
  gap: 0.75rem;
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}
.discount-meta .meta-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  display: block;
}
.discount-meta .meta-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue);
}
.discount-meta .code {
  display: inline-block;
  background: var(--white);
  border: 2px dashed var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  padding: 0.35rem 0.85rem;
}

.discount-card .cta-group { margin-top: auto; padding-top: 0.5rem; }

/* Seminarliste als Accordion (<details>) */
.seminar-list { border-top: 1px solid var(--border); margin-bottom: 1.25rem; }

.seminar-list > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.85rem 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blue);
  list-style: none;
}
.seminar-list > summary::-webkit-details-marker { display: none; }
.seminar-list > summary::after {
  content: '';
  width: 16px; height: 16px;
  flex-shrink: 0;
  background-color: var(--blue);
  -webkit-mask: var(--chevron-icon) center / contain no-repeat;
  mask: var(--chevron-icon) center / contain no-repeat;
  transition: transform 0.2s;
}
.seminar-list[open] > summary::after { transform: rotate(180deg); }
:root {
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.seminar-list .seminar-items { display: grid; gap: 0.9rem; padding-bottom: 1rem; }
.seminar-list .seminar-items li { border-left: 3px solid var(--light-blue); padding-left: 0.85rem; }
.seminar-list .seminar-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--blue);
  line-height: 1.4;
}
.seminar-list .seminar-date { font-size: 0.88rem; color: var(--text); }

.topic-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem; }
.topic-chips li {
  background: var(--light-blue);
  color: var(--blue);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 50px;
}

/* -----------------------------------------------------------------------------
   10b  WER HINTER QUESAP STEHT – Vertrauensblock
   -------------------------------------------------------------------------- */
.person { display: grid; gap: 1.5rem; }

@media (min-width: 768px) {
  .person {
    grid-template-columns: 300px 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.person-media img {
  width: 100%;
  /* Das Original ist ein Hochformat 2:3. Auf dem Handy wuerde es sonst den
     halben Bildschirm fuellen, deshalb dort ein ruhigerer Ausschnitt. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-media);
}

@media (min-width: 768px) {
  .person-media img { aspect-ratio: 4 / 5; }
}

.person-text h2 { margin-bottom: 0.2rem; }

.person-role {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--red);
  margin-bottom: 1.25rem;
}

.person-quote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.02rem, 2.6vw, 1.15rem);
  line-height: 1.5;
  color: var(--blue);
  border-left: 4px solid var(--red);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin-bottom: 1.25rem;
}
.person-quote::before { content: '„'; }
.person-quote::after { content: '“'; }

/* -----------------------------------------------------------------------------
   11  GEWINNSPIEL
   -------------------------------------------------------------------------- */
.raffle-card {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-media);
  text-align: center;
}

@media (min-width: 600px) { .raffle-card { padding: 2.75rem 2.5rem; } }

.raffle-card h2, .raffle-card h3 { color: var(--white); }
.raffle-card .section-label { color: rgba(255, 255, 255, 0.85); }
.raffle-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1.2rem; opacity: 0.95; }
.raffle-card p { opacity: 0.95; max-width: 620px; margin-left: auto; margin-right: auto; }

.raffle-facts {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem auto;
  max-width: 620px;
}

@media (min-width: 600px) { .raffle-facts { grid-template-columns: repeat(3, 1fr); } }

.raffle-facts li {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.raffle-terms { font-size: 0.85rem; margin-top: 1rem; }
.raffle-terms a { color: var(--white); }

.raffle-closed {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  max-width: 620px;
  margin: 1.5rem auto 0;
}

/* -----------------------------------------------------------------------------
   12  MEDIEN-PLATZHALTER UND LIGHTBOX
   -------------------------------------------------------------------------- */
.media-frame { margin: 2rem 0 0; }

.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  background: var(--white);
  border: 2px dashed rgba(1, 74, 117, 0.4);
  border-radius: var(--radius-card);
  color: var(--blue);
}
.media-placeholder--4x3 { aspect-ratio: 4 / 3; }
.media-placeholder svg { color: var(--blue); opacity: 0.55; }
.media-placeholder .ph-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.4;
}
.media-placeholder .ph-hint {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 34ch;
}
.media-placeholder .ph-code {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--red);
}

.media-frame img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-media);
}

/* -----------------------------------------------------------------------------
   PDCA-Kreislauf (Inline-SVG)
   -------------------------------------------------------------------------- */
.pdca { max-width: 560px; margin: 0 auto; }

.pdca-svg { display: block; width: 100%; height: auto; }

.pdca-name,
.pdca-sub,
.pdca-mitte {
  font-family: var(--font-head);
  text-anchor: middle;
}

.pdca-name { font-size: 36px; font-weight: 700; fill: var(--white); letter-spacing: 1px; }
.pdca-sub  { font-size: 15px; font-weight: 600; fill: rgba(255, 255, 255, 0.92); }
.pdca-mitte { font-size: 17px; font-weight: 600; fill: var(--blue); }

/* Auf schmalen Geräten wären die Unterzeilen nur noch wenige Pixel hoch.
   Dann bleiben die vier Phasennamen stehen – erklärt sind sie ohnehin in
   den drei Karten darüber. */
@media (max-width: 600px) {
  .pdca-sub { display: none; }
  /* Ohne Unterzeile säße der Name zu hoch im Segment – mittig nachrücken. */
  .pdca-name { font-size: 46px; transform: translateY(12px); }
}

.media-caption {
  font-size: 0.82rem;
  margin-top: 0.7rem;
  color: var(--text);
  text-align: center;
}

.media-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-card);
}

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1200px);
  max-height: 94dvh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(1, 51, 85, 0.9); }
.lightbox img { width: 100%; height: auto; border-radius: var(--radius-card); }
.lightbox-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--red);
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
   13  STANDORT / LERNWELTEN
   -------------------------------------------------------------------------- */
.fact-grid { display: grid; gap: 1rem; margin-top: 2rem; }

@media (min-width: 600px) {
  .fact-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
}

/* Basis: .detail-item aus dem Template */
.fact-item {
  background: var(--white);
  padding: 1.25rem;
  border-radius: var(--radius-card);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.fact-item .fact-label {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.4rem;
}
.fact-item .fact-value {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--blue);
  font-size: 1.25rem;
  line-height: 1.3;
}
.fact-item .fact-sub { font-size: 0.85rem; margin-top: 0.3rem; }

.booth-list { display: grid; gap: 0.7rem; margin: 2rem 0 1.5rem; }
.booth-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.98rem;
}
.booth-list li::before {
  content: '';
  width: 20px; height: 20px;
  margin-top: 0.28rem;
  background-color: var(--red);
  -webkit-mask: var(--check-icon) center / contain no-repeat;
  mask: var(--check-icon) center / contain no-repeat;
}

.callout {
  background: var(--light-blue);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 1.5rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--blue); font-family: var(--font-head); }

.highlight-box {
  background: var(--white);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 1.75rem 0;
  box-shadow: var(--shadow-card);
}
.highlight-box p {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--blue);
  font-size: 1.02rem;
  line-height: 1.5;
}

.claim-line {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--red);
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  text-align: center;
  margin-top: 2.5rem;
}

/* -----------------------------------------------------------------------------
   14  NACHLESE
   -------------------------------------------------------------------------- */
.recap-teaser { display: grid; gap: 0.7rem; margin: 1.5rem 0 0; }
.recap-teaser li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 0.8rem;
  align-items: start;
  font-size: 0.98rem;
}
.recap-teaser li::before {
  content: '';
  width: 8px; height: 8px;
  margin-top: 0.7rem;
  border-radius: 50%;
  background: var(--red);
}

.recap-blocks { display: grid; gap: 1.5rem; margin-top: 2rem; }
.recap-block h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.recap-block p { margin-bottom: 0.9rem; }
.recap-block p:last-child { margin-bottom: 0; }

.recap-quote {
  background: var(--white);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-card);
}
.recap-quote blockquote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--blue);
}
.recap-quote figcaption { font-size: 0.88rem; margin-top: 0.6rem; }

.recap-links { display: grid; gap: 0.6rem; }
.recap-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--blue);
}
.recap-links .link-meta { font-family: var(--font-body); font-weight: 400; font-size: 0.85rem; color: var(--text); }

.recap-gallery { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 600px) {
  .recap-gallery { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.recap-gallery img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; }

/* -----------------------------------------------------------------------------
   14b  HÄUFIGE FRAGEN
   -------------------------------------------------------------------------- */
.faq { margin-top: 2rem; }

.faq-item {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border-left: 4px solid var(--blue);
  margin-bottom: 0.9rem;
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 1rem 1.3rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--blue);
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--red);
  -webkit-mask: var(--chevron-icon) center / contain no-repeat;
  mask: var(--chevron-icon) center / contain no-repeat;
  transition: transform 0.2s;
}
.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item[open] { border-left-color: var(--red); }

.faq-answer { padding: 0 1.3rem 1.2rem; }
.faq-answer p { font-size: 0.96rem; margin-bottom: 0.8rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   15  FINAL CTA  (Basis: .cta-section aus dem Template)
   -------------------------------------------------------------------------- */
.cta-section {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  color: var(--white);
  text-align: center;
}
.cta-section h2 { color: var(--white); font-size: clamp(1.5rem, 4.2vw, 2.3rem); margin-bottom: 1rem; }
.cta-section p { max-width: 620px; margin-left: auto; margin-right: auto; opacity: 0.93; font-size: 1.05rem; }
.cta-section .claim {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  opacity: 1;
  margin: 1.5rem auto 0;
}
.cta-hint { margin-top: 1.25rem; font-size: 0.85rem; opacity: 0.8; }
.cta-hint a { color: inherit; }

/* -----------------------------------------------------------------------------
   16  FOOTER  (aus dem Template)
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--blue-dark);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.85rem;
  line-height: 1.7;
}
.site-footer a { color: rgba(255, 255, 255, 0.92); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .footer-claim { display: block; margin-top: 0.5rem; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; }