/* eddy-mobile-below.css — Sprint 30: below-fold styles (async) */
/* ===== HERO TITLE ===== */
.hero-title { text-align: center; padding: 60px 60px 0; }
.hero-title h1 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 44px; font-weight: 300; color: #000; line-height: 1.2; margin: 0; }

/* ===== SUBTITLE ===== */
.section-subtitle { text-align: center; padding: 20px 60px 0; }
.section-subtitle h2 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 300; color: #000; }

/* ===== FEATURE COLUMNS (2-Spalten Text) ===== */
.product-text-section { margin-top: 60px; padding: 0 36px; text-align: center; }
.product-headline { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 300; color: #000; margin-bottom: 60px; }
.feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 0 auto; text-align: left; }
.feature-col h2 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 30px; font-weight: 300; color: #0a0a0a; margin-bottom: 16px; }
.feature-col p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 24px; color: #0a0a0a; }

/* ===== PRODUCT CARD (mit Bild, Farbwahl, Preis, Button) ===== */
.product-card-section { margin-top: 120px; padding: 0 60px; }
.product-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  max-width: var(--max-w); margin: 0 auto; align-items: center;
}
.product-card-images { display: flex; gap: 16px; }
.product-card-img {
  flex: 1; height: 400px; background: #d8d8d8; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 13px;
}
.product-card-info { display: flex; flex-direction: column; gap: 16px; }
.product-card-info h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 500; }
.product-card-subtitle { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; color: #666; }
.color-selector { display: flex; gap: 12px; align-items: center; }
.color-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e0e0e0; cursor: pointer; }
.color-dot.active { border-color: #0a0a0a; }
.product-card-price { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 700; }
.product-card-btn {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; color: #fff;
  background: #0a0a0a; border: none; padding: 14px 40px; border-radius: 4px;
  cursor: pointer; transition: opacity .2s; align-self: flex-start;
}
.product-card-btn:hover { opacity: .85; }

/* ===== FULLWIDTH IMAGE SECTION ===== */
.section-fullimg {
  width: 100vw; margin-left: calc(-50vw + 50%);
  height: 600px; background: #d8d8d8;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 16px; font-family: "Manrope", "Manrope Fallback", sans-serif;
  margin-top: 120px;
}

/* ===== CONNECTIVITY ICONS BAR ===== */
.connectivity-bar {
  margin-top: 80px; padding: 40px 60px;
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; align-items: center;
}
.conn-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.conn-icon { width: 48px; height: 48px; background: #e0e0e0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #555; font-size: 11px; }
.conn-label { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 13px; font-weight: 400; color: #0a0a0a; text-align: center; }

/* ===== VIDEO SECTION ===== */
.section-video {
  width: 100vw; margin-left: calc(-50vw + 50%);
  height: 500px; background: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  color: #666; font-size: 16px; font-family: "Manrope", "Manrope Fallback", sans-serif;
  margin-top: 80px; position: relative;
}
.section-video .pause-btn {
  position: absolute; bottom: 24px; right: 24px;
  background: rgba(255,255,255,.2); border: none; color: #fff;
  padding: 8px 16px; border-radius: 4px; font-size: 13px; cursor: pointer;
}

/* ===== TEXT BLOCK (zentriert, volle Breite) ===== */
.section-text-block {
  max-width: 900px; margin: 120px auto 0; padding: 0 60px; text-align: center;
}
.section-text-block h2 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #000;
  margin-bottom: 24px; line-height: 1.3;
}
.section-text-block p {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a;
  margin-bottom: 16px;
}

/* ===== TEXT BLOCK MIT BILD DANEBEN ===== */
.section-text-image {
  max-width: var(--max-w); margin: 120px auto 0; padding: 0 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.section-text-image.reversed { direction: rtl; }
.section-text-image.reversed > * { direction: ltr; }
.section-text-image .text-side h2 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #000;
  margin-bottom: 24px; line-height: 1.3;
}
.section-text-image .text-side p {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a;
  margin-bottom: 16px;
}
.section-text-image .img-side {
  height: 500px; background: #d8d8d8; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 13px;
}

/* ===== MEHR ERFAHREN BUTTON ===== */
.mehr-btn {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500;
  background: none; border: 1px solid #0a0a0a; color: #0a0a0a;
  padding: 12px 32px; border-radius: 4px; cursor: pointer; transition: all .2s;
  margin-top: 16px; display: inline-block;
}
.mehr-btn:hover { background: #0a0a0a; color: #fff; }

/* ===== TECH CARDS (3er Grid) ===== */
.tech-cards {
  max-width: var(--max-w); margin: 120px auto 0; padding: 0 60px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px;
}
.tech-card {
  background: #fff; border-radius: 8px; padding: 40px; text-align: left;
}
.tech-card-icon {
  width: 64px; height: 64px; background: #e8e8e8; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 11px; margin-bottom: 24px;
}
.tech-card h3 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 500; color: #0a0a0a;
  margin-bottom: 12px;
}
.tech-card p {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 300; line-height: 22px; color: #0a0a0a;
}

/* ===== AUFFÄLLIG UNAUFFÄLLIG (volle Breite Bild + Text) ===== */
.section-split-hero {
  width: 100vw; margin-left: calc(-50vw + 50%);
  margin-top: 120px;
}
.split-hero-img {
  width: 100%; height: 600px; background: #d8d8d8;
  display: flex; align-items: center; justify-content: center;
  color: #555; font-size: 16px;
}
.split-hero-text {
  max-width: 900px; margin: 60px auto 0; padding: 0 60px; text-align: center;
}
.split-hero-text h2 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #000;
  margin-bottom: 24px; line-height: 1.3;
}
.split-hero-text p {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a;
}

/* ===== APP LINKS ===== */
.app-links { display: flex; gap: 16px; margin-top: 20px; }
.app-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; color: #0a0a0a;
  border: 1px solid #0a0a0a; padding: 10px 20px; border-radius: 4px;
  transition: all .2s;
}
.app-link:hover { background: #0a0a0a; color: #fff; }

/* ===== CROSS-SELL SECTION ===== */
.section-crosssell {
  width: 100vw; margin-left: calc(-50vw + 50%);
  margin-top: 120px; background: #0a0a0a; padding: 80px 60px;
}
.crosssell-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.crosssell-img {
  height: 400px; background: #333; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #666; font-size: 13px;
}
.crosssell-text h2 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 32px; font-weight: 300; color: #fff;
  margin-bottom: 20px; line-height: 1.3;
}
.crosssell-text p {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #ccc;
  margin-bottom: 24px;
}
.crosssell-btn {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; color: #fff;
  border: 1px solid #fff; background: none; padding: 12px 32px; border-radius: 4px;
  cursor: pointer; transition: all .2s; display: inline-block;
}
.crosssell-btn:hover { background: #fff; color: #0a0a0a; }

/* ===== UNIVERSUM LINKS (3er) ===== */
.section-universum {
  max-width: var(--max-w); margin: 120px auto 0; padding: 0 60px; text-align: center;
}
.section-universum h2 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #000;
  margin-bottom: 60px;
}
.universum-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.universum-card {
  background: #fff; border-radius: 8px; padding: 40px; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  transition: box-shadow .2s;
}
.universum-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.universum-card span { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 500; color: #0a0a0a; }
.universum-card .arrow { font-size: 20px; color: #555; }

/* ===== S2: ZWEI KARTEN ===== */
.two-cards { margin-top: 60px; padding: 0 36px; }
.two-cards-inner {
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.card-left {
  width: 100%; height: 468px; background: #fff; border-radius: 8px;
  display: flex; flex-direction: column; overflow: hidden;
}
.card-left-img {
  width: 509px; height: 240px; margin: 24px auto 0;
  display: none; /* Platzhalter unsichtbar bis Bild */
}
.card-left-info { padding: 24px 40px; }
.card-left-name { display: block; font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 16px; font-weight: 700; color: #0a0a0a; }
.card-left-sub { display: block; font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 300; color: #0a0a0a; margin-top: 4px; }
.card-left-colors { display: flex; gap: 8px; margin-top: 16px; }
.card-left-colors .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e0e0e0; cursor: pointer; }
.card-left-colors .dot.active { border-color: #0a0a0a; }
.card-left-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.card-left-color-name { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; color: #0a0a0a; }
.card-left-price { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 16px; font-weight: 700; color: #0a0a0a; }
.card-left-btn {
  display: block; width: 100%; margin-top: 16px; padding: 14px; text-align: center;
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500;
  color: #fff; background: #0a0a0a; border-radius: 4px; cursor: pointer;
}
.card-left-btn:hover { opacity: .85; }
.card-right {
  width: 100%; height: 468px; border-radius: 8px; overflow: hidden;
  display: none; /* Platzhalter unsichtbar bis Bild */
}

/* ===== S2b: CONNECTIVITY ICONS ===== */
.conn-bar { margin-top: 60px; padding: 0 36px; }
.conn-bar-inner {
  height: 156px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border-radius: 8px; padding: 0 40px;
}
.conn-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.conn-icon { font-size: 28px; color: #0a0a0a; }
.conn-label { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 13px; font-weight: 400; color: #0a0a0a; text-align: center; }

/* ===== S3: MUSIC FROM ANYWHERE ===== */
.music-section { margin-top: 113px; padding: 0 36px; text-align: center; }
.music-section-inner { margin: 0 auto; }
.music-heading { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; color: #0a0a0a; margin: 0 0 25px 0; }
.music-text { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a; max-width: 900px; margin: 0 auto; }
.music-card {
  margin-top: 124px; padding: 0 36px;
}
.music-card-inner {
  height: 649px; margin: 0 auto;
  background: #fff; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 100px 36px;
}
.music-card-text { width: 449px; }
.music-card-text h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; color: #0a0a0a; margin-bottom: 20px; }
.music-card-text p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a; }
.music-card-imgs {
  width: 560px; height: 445px;
  display: flex; flex-direction: row; gap: 12px;
}
.music-card-img {
  flex: 1; height: 100%;
  border-radius: 6.656px;
  display: none; /* Platzhalter unsichtbar bis Bild */
  overflow: hidden;
}

/* ===== S4: DIE GRENZEN (2 Spalten, bg #f4f4f4) ===== */
.grenzen-section { margin-top: 76px; padding: 0 36px; }
.grenzen-inner {
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  align-items: flex-start;
}
.grenzen-heading { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; color: #0a0a0a; margin: 0; }
.grenzen-text { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a; margin: 0; }

/* ===== S5: TECH CARDS 1 — 3 weiße Karten (radius 10px, padding 60px) ===== */
.tech-strip { margin-top: 100px; padding: 0 36px; }
.tech-strip-inner {
  margin: 0 auto;
  display: flex; gap: 16px;
}
.tech-strip-col {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 60px;
  box-sizing: border-box;
}
.tech-strip-col h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 500; color: #0a0a0a; margin-bottom: 16px; }
.tech-strip-col p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a; }

/* ===== S6: AUFFÄLLIG UNAUFFÄLLIG — dunkler Block (2 Hälften + schwarzer Balken rechts) ===== */
.auff-section { margin-top: 100px; padding: 0 36px; }
.auff-inner {
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 57px; gap: 0;
  min-height: 957px; border-radius: 8px; overflow: hidden;
}
.auff-left {
  background: #1a1a1a;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 60px; text-align: center;
}
.auff-left h2 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #fff; margin-bottom: 0; line-height: 1.3; }
.auff-left h2 strong { font-weight: 700; }
/* Zwei Kopfzeilen (P7): fester zweizeiliger Block, klare erste/zweite Zeile */
.auff-left h2.auff-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  line-height: 1.35;
}
.auff-headline-lead,
.auff-headline-sub {
  display: block;
  max-width: 100%;
}
.auff-headline-sub { font-weight: 700; }
.auff-right {
  min-height: 0;
  display: none; /* Platzhalter unsichtbar bis Bild */
}
.auff-bar { background: #000; min-height: 957px; }

/* ===== S7: ERLEBEN — schwarze Karte (radius 8px) ===== */
.erleben-card { margin-top: 200px; padding: 0 36px; }
.erleben-inner {
  height: 488px; margin: 0 auto;
  background: #000; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px;
}
.erleben-inner h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; color: #fff; margin-bottom: 24px; }
.erleben-inner p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: rgba(255,255,255,0.8); max-width: 900px; }

/* ===== S8: TECH CARDS 2 — 3 farbige Karten (Gradient, radius 10px, padding 60px, gap 16px) ===== */
.tech-strip2 { margin-top: 200px; padding: 0 36px; }
.tech-strip2-inner {
  margin: 0 auto;
  display: flex; gap: 16px;
}
.tech-strip2-col {
  flex: 1; border-radius: 10px; padding: 60px; box-sizing: border-box;
}
.tech-strip2-col:nth-child(1) { background: linear-gradient(135deg, #8EC7CB, #6A9FA1); }
.tech-strip2-col:nth-child(2) { background: linear-gradient(135deg, #BCDBEC, #8FB3C7); }
.tech-strip2-col:nth-child(3) { background: linear-gradient(0deg, #F4F4F4, #FFFFFF); }
.tech-strip2-col h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 500; color: #0a0a0a; margin-bottom: 16px; }
.tech-strip2-col p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #0a0a0a; }

/* ===== S9: APP SECTION — schwarzer Block, Bild + weißer Text ===== */
.app-section { margin-top: 119px; padding: 0 36px; }
.app-inner {
  margin: 0 auto; background: #000; border-radius: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
  padding: 0;
}
.app-img {
  width: 100%; height: 575px;
  border-radius: 0 8px 8px 0;
  display: none; /* Platzhalter unsichtbar bis Bild */
}
.app-text { padding: 60px; }
.app-text h2 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 36px; font-weight: 300; color: #fff; margin-bottom: 24px; }
.app-text p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; color: #fff; margin-bottom: 24px; }
.app-links { display: flex; gap: 16px; }
.app-link-btn {
  font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500;
  color: #0a0a0a; border: 1px solid #0a0a0a; background: none;
  padding: 12px 24px; border-radius: 4px; cursor: pointer; transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.app-link-btn:hover { background: #0a0a0a; color: #fff; }

/* ===== TAKE TEXT — zentrierter Text unter App ===== */
.take-text {
  margin-top: 100px; padding: 0 36px; text-align: center;
}
.take-text h3 {
  font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 300; color: #000;
}

/* ===== CTA PRO — BLAUPAUSE (gleich breit wie App-Box) ===== */
.cta-pro {
  max-width: var(--max-w); margin: 100px auto 0;
  background: #000; border-radius: 8px; padding: 100px 60px;
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cta-pro h3 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; color: #fff; margin-bottom: 16px; line-height: 36px; }
.cta-pro a { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.cta-pro a svg { width: 22px; height: 22px; }

/* ===== SERVICE ICONS BAR ===== */
.service-bar {
  margin-top: 80px; padding: 60px;
  display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; align-items: flex-start;
}
.service-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 200px; }
.service-icon {
  width: 48px; height: 48px; background: #e8e8e8; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: #555; font-size: 11px;
}
.service-label { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 13px; font-weight: 500; color: #0a0a0a; text-transform: uppercase; }

/* ===== S10: FEATURES — wie eddair-template-v3.html ===== */
.section-gap { margin-bottom: 0; }
.section-gap--feat { margin-bottom: 0; }
.box-outer { width: 100%; padding: 0; }
.box-outer--wide { padding: 0; }
.box-inner { max-width: var(--max-w); margin: 0 auto; }
.feat-box { background: #fff; padding: 100px 40px; border-radius: 8px; min-height: 340px; display: flex; align-items: center; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; }
.feat-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.feat-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; color: #b08968; }
.feat-icon svg { width: 56px; height: 56px; }
.feat-label { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: normal; color: #0a0a0a; margin: 0; }
@media (max-width: 768px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-box { padding: 60px 24px; min-height: 0; }
  .nl-card { grid-template-columns: 1fr; }
  .nl-input, .nl-btn { width: 100%; }
  .nl-outer { padding: 40px 20px; }
}

/* ===== Newsletter — BLAUPAUSE ===== */
.nl-section { padding: 0; margin-top: 60px; margin-bottom: 0; }
.nl-outer { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 60px 60px; background-color: #000; background-image: url('img/optimized/newsletter-bg-400.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 0; overflow: hidden; min-height: 399px; display: flex; align-items: center; justify-content: center; position: relative; }
@media (min-width: 768px) {
  .nl-outer { background-image: url('img/optimized/newsletter-bg-800.webp'); }
}
.nl-card { max-width: 1230px; width: 100%; margin: 0 auto; background: #fff; padding: 60px; display: grid; grid-template-columns: 55% 45%; gap: 32px; align-items: center; min-height: 279px; }
.nl-label { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 26px; font-weight: 500; text-transform: uppercase; letter-spacing: normal; color: #0a0a0a; margin: 0 0 12px 0; }
.nl-sub { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; color: #0a0a0a; line-height: 1.5; }
.nl-right { display: flex; flex-direction: column; gap: 10px; }
.nl-input { width: 346px; height: 52px; border: 1px solid gray; padding: 0 16px; font-size: 16px; font-family: "Manrope", "Manrope Fallback", sans-serif; background: #fff; outline: none; border-radius: 5px; }
.nl-input:focus { border-color: #0a0a0a; }
.nl-btn { width: 346px; height: 52px; background: var(--black); color: #fff; border: none; font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .2s; border-radius: 4px; }
.nl-btn:hover { opacity: .85; }
.nl-disclaimer { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 11px; font-weight: 500; color: #0a0a0a; line-height: 1.5; grid-column: 1 / -1; margin-top: -8px; }
.nl-disclaimer a { color: #595959; text-decoration: underline; font-weight: 500; }
.nl-consent { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 / -1; margin-top: -4px; }
.nl-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: #0a0a0a; cursor: pointer; flex-shrink: 0; }
.nl-consent label { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 12px; font-weight: 500; color: #0a0a0a; line-height: 1.5; cursor: pointer; }
.nl-consent label a { color: #595959; text-decoration: underline; font-weight: 500; }
.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; }

/* ===== FOOTER — BLAUPAUSE ===== */
.footer__contact-bar { background: #fff; border-bottom: 1px solid #e0e0e0; padding: 0; height: 74px; display: flex; justify-content: center; align-items: center; margin-top: 120px; }
.footer__contact-bar-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer__contact-link { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 16px; font-weight: 300; color: #0a0a0a; display: inline-flex; align-items: center; gap: 8px; }
.footer__contact-link:hover { opacity: .7; }
.footer__contact-link svg { width: 20px; height: 20px; flex-shrink: 0; }
footer { background: transparent; }
.footer__main { background: #f0f0f0; padding: 60px; }
.footer__grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px; }
.footer__heading { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 20px; font-weight: 500; color: #0a0a0a; margin: 0 0 24px 0; }
.footer__links { list-style: none; }
.footer__links li { margin: 0 0 8px 0; }
.footer__link { font-size: 16px; font-weight: 300; color: #0a0a0a; transition: color .2s; }
.footer__link:hover { color: #0a0a0a; }
.footer__bottom { background: #0a0a0a; padding: 24px 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 88px; }
.footer__copyright { font-size: 16px; font-weight: 300; color: #fff; }
.footer__legal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer__sep { color: #fff; font-size: 16px; opacity: 0.5; }
.footer__legal-link { font-size: 16px; font-weight: 300; color: #fff; transition: opacity .2s; }
.footer__legal-link:hover { opacity: 0.7; }
.footer__social { display: flex; align-items: center; gap: 12px; }
.footer__icon { color: #fff; transition: opacity .2s; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 300; }
.footer__icon:hover { opacity: .7; }
.footer__icon svg { width: 20px; height: 20px; stroke: #fff; }

/* ===== COOKIE SETTINGS MODAL ===== */
.cs-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5); overflow-y: auto; }
.cs-overlay.show { display: flex; justify-content: center; padding: 40px 20px; }
.cs-modal { background: #fff; max-width: 600px; width: 100%; border-radius: 8px; padding: 40px; position: relative; max-height: fit-content; }
.cs-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; color: #0a0a0a; line-height: 1; }
.cs-close:hover { opacity: 0.5; }
.cs-modal h2 { font-family: "Montserrat", "Montserrat Fallback", sans-serif; font-size: 22px; font-weight: 500; margin: 0 0 8px 0; }
.cs-modal p { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 300; line-height: 1.6; color: #555; margin: 0 0 24px 0; }
.cs-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid #eee; }
.cs-item-info { flex: 1; }
.cs-item-title { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 15px; font-weight: 500; color: #0a0a0a; }
.cs-item-desc { font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 13px; font-weight: 300; color: #595959; margin-top: 4px; }
.cs-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; margin-left: 16px; }
.cs-toggle input { opacity: 0; width: 0; height: 0; }
.cs-slider { position: absolute; inset: 0; background: #ccc; border-radius: 24px; cursor: pointer; transition: 0.3s; }
.cs-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s; }
.cs-toggle input:checked + .cs-slider { background: #0a0a0a; }
.cs-toggle input:checked + .cs-slider:before { transform: translateX(20px); }
.cs-toggle input:disabled + .cs-slider { opacity: 0.6; cursor: default; }
.cs-save { width: 100%; margin-top: 24px; padding: 14px; background: #0a0a0a; color: #fff; border: none; font-family: "Manrope", "Manrope Fallback", sans-serif; font-size: 14px; font-weight: 500; border-radius: 4px; cursor: pointer; transition: opacity 0.2s; }
.cs-save:hover { opacity: 0.7; }

/* ===== SECTION LABELS (sichtbare Markierung für Review) ===== */
.section-label {
  background: #ff6600; color: #fff; font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 4px 12px; border-radius: 3px; display: inline-block;
  margin-bottom: 12px; letter-spacing: .5px;
}

.mobile-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #0a0a0a;
  text-decoration: none;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s;
}
.mobile-sticky-cta:hover { opacity: 0.92; color: #fff; }
@media (max-width: 767px) {
  .mobile-sticky-cta { display: block; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}