/* ============================================
   BASE — Reset, Typografie, Layout-Utilities
   ============================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--gray-text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  max-width: 1920px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  margin: 20px 0;
  line-height: 1.3;
}

h1 { font-size: clamp(40px, 4vw, 56px); }
h2 { font-size: clamp(28px, 2.8vw, 40px); }
h3, h4, h5, h6 { font-size: clamp(20px, 2vw, 28px); }

h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Hauptcontainer */
.section-inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 60px 20px;
  max-width: 900px;
}

@media only screen and (min-width: 1281px) {
  .section-inner { max-width: 1280px; padding: 60px; }
}

@media only screen and (min-width: 1441px) {
  .section-inner { max-width: 1440px; padding: 60px; }
}

.content-narrow {
  max-width: 730px;
  margin: 0 auto;
}

/* Einheitliches Padding für weiße Inhalts-Sektionen */
.cards-section,
.text-section,
.video-section,
.press-section,
.contact-section,
.cta-banner {
  background: var(--white);
  padding: var(--section-padding);
}

/* 16:9-Embed-Container (genutzt in split.css und components.css) */
.video-embed-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-embed-wrapper iframe,
.video-embed-wrapper .yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Fließtext auf dunklem Hintergrund — einheitliche Basis */
.body-on-dark {
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--text-on-dark);
  line-height: var(--text-sm-line);
  hyphens: auto;
}

/* Cover-Bild: füllt seinen Container */
.hero-image img,
.adrenalin-image img,
.card-image img,
.slide-image-wrap img,
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: Medien-Panels immer oben, Text-Panels unten */
@media (max-width: 900px) {
  [class*="-image"],
  [class*="-video"],
  [class*="-media"] { order: 1; }

  [class*="-content"],
  [class*="-text"]  { order: 2; }

  /* Innerhalb von Content-Containern: generische order-Regeln zurücksetzen */
  .adrenalin-content > *,
  .hero-content > *         { order: unset; }

  /* Button immer ans Ende */
  .adrenalin-content [class*="btn-"],
  .hero-content [class*="btn-"] { margin-top: auto; }
}

@media (max-width: 600px) {
  .cards-section,
  .text-section,
  .video-section,
  .press-section,
  .contact-section,
  .cta-banner { padding: var(--section-padding-mobile); }
}

/* ============================================
   LEGAL PAGES — Datenschutz / Impressum
   ============================================ */

.legal-section {
  background: var(--white);
  padding: 80px 24px 96px;
}

.legal-inner {
  max-width: 720px;
  margin: 0 auto;
}

.legal-heading {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  color: var(--gray-text);
  line-height: 1.2;
  margin-bottom: 40px;
}

.legal-subheading {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--gray-text);
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-body {
  font-size: var(--text-sm);
  color: var(--gray-text);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-body a,
.legal-list a {
  color: var(--gray-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-body a:hover,
.legal-list a:hover { color: var(--black); }

.legal-list {
  list-style: disc;
  padding-left: 1.4em;
  margin-bottom: 16px;
}

.legal-list li {
  font-size: var(--text-sm);
  color: var(--gray-text);
  line-height: 1.8;
  margin-bottom: 8px;
}

.legal-meta {
  font-size: 13px;
  color: var(--gray-text);
  opacity: 0.55;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-border);
}

/* ============================================
   GRADIENT TEXT — Markenfarbe als Textfüllung
   Alle Elemente, die --brand-gradient als Text nutzen
   ============================================ */

.hero-headline,
.hero-quote::before,
.bio-dark-bold::before,
.adrenalin-headline,
.services-quote-text,
.cta-banner-heading--gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}