/* ─── NEXLANE MEDIA — CARBON, SEITENSPEZIFISCH ────────────────────
   Setzt auf ../../carbon.css auf (Tokens, Typo, Buttons, Header,
   Mobile-Panel, Cookie-Banner) und formt hier die Bausteine der
   Media-Seite: Hero, Bento-Grid, USPs, Testimonials, Pakete,
   Kontaktformular, Footer.

   Muss als letztes Stylesheet geladen werden — es überschreibt
   styles.css, theme.css, mobile-nav.css und magic-bento.css.
─────────────────────────────────────────────────────────────────── */

body { counter-reset: nx-section; }

/* ═══ 1 · LAYOUT & SEKTIONEN ═════════════════════════════════════ */
/* Der Shell-Header trägt ebenfalls .container, bleibt aber randlos —
   deshalb hier ausgenommen (siehe ../../carbon.css, .nav-inner). */
.container:not(.nav-inner) { max-width: 1312px; padding: 0 var(--sp-05); }

@media (min-width: 672px)  { .container:not(.nav-inner) { padding: 0 var(--sp-07); } }
@media (min-width: 1584px) { .container:not(.nav-inner) { padding: 0 var(--sp-09); } }

body > section { padding: clamp(56px, 6vw, 88px) 0; }
#usps, #testimonials, #pakete, #kontakt { padding: clamp(56px, 6vw, 88px) 0; }
#about { padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }

/* ═══ 2 · SEKTIONS-KOPF (Carbon Eyebrow + Regel) ═════════════════ */
.section-header,
.mb-section-heading,
.contact-left {
  text-align: left;
  margin-bottom: 0;
  padding: var(--sp-06) 0 0;
  border-top: 1px solid var(--cds-border-subtle);
}

.mb-section-heading { padding-bottom: 0; }

.section-header,
.mb-section-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-05);
  margin-bottom: var(--sp-09);
}

@media (min-width: 900px) {
  .section-header,
  .mb-section-heading {
    grid-template-columns: 4fr 8fr;
    gap: var(--sp-07);
    align-items: start;
  }
}

.section-header h2,
.mb-section-heading h2,
.contact-left h2 {
  font-size: clamp(28px, 3.4vw, 48px);   /* Carbon fluid-heading-04/05 */
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--cds-text-primary);
  margin-top: 0;
  max-width: 20ch;
}

/* Eyebrow mit laufender Sektionsnummer */
.section-header > .tag,
.mb-section-heading > .tag,
.contact-left > .tag {
  padding-top: var(--sp-02);
}

.section-header > .tag::before,
.mb-section-heading > .tag::before,
.contact-left > .tag::before {
  counter-increment: nx-section;
  content: counter(nx-section, decimal-leading-zero) " / ";
  color: var(--cds-accent-text);
}

.contact-left p {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--cds-text-secondary);
  margin-top: var(--sp-06);
  max-width: 48ch;
}

/* ═══ 3 · HERO ═══════════════════════════════════════════════════ */
.hero-content { padding-top: clamp(140px, 20vw, 200px); }

.hero-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.32px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--cds-text-secondary);
  padding-top: var(--sp-04);
  border-top: 1px solid rgba(244, 244, 244, 0.28);
  display: inline-block;
  margin-bottom: var(--sp-06);
  animation: fadeUp .8s ease both;
}

h1.headline {
  font-size: clamp(40px, 5.5vw, 76px);   /* Carbon fluid-display-01 */
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--cds-text-primary);
  max-width: 16ch;
}

h1.headline em { color: var(--cds-text-secondary); }

.hero-sub {
  margin-top: var(--sp-06);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--cds-text-secondary);
  max-width: 44ch;
}

.hero-actions { margin-top: var(--sp-09); gap: 1px; }

/* Carbon stellt Button-Paare fugenlos nebeneinander */
@media (min-width: 600px) {
  .hero-actions .btn { min-width: 240px; }
}

/* ═══ 4 · BENTO-KARTEN ═══════════════════════════════════════════ */
.mb-card-grid {
  gap: var(--sp-05);
  padding: 0;
  max-width: none;
  margin-top: 0;
}

.mb-card {
  border-radius: 0;
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  padding: var(--sp-05);
  transition: background .11s var(--cds-ease-productive),
              border-color .11s var(--cds-ease-productive);
}

.mb-card:not(.mb-card--expanded):hover {
  transform: none;
  border-color: var(--cds-border-strong);
}

.mb-card--border-glow:hover { box-shadow: none; }

.mb-card__title {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cds-text-primary);
  margin-bottom: var(--sp-02);
}

.mb-card__description {
  font-size: 14px;
  line-height: 1.43;
  font-weight: 400;
  color: var(--cds-text-secondary);
}

.mb-card__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
}

/* Slider- und Expand-Bedienelemente: Quadrate statt Kreise */
.ms-slide-badge,
.mb-card-expand-arrow {
  border-radius: 0;
  background: rgba(22, 22, 22, 0.7);
  border-color: var(--cds-border-subtle);
  color: var(--cds-text-secondary);
  width: 32px;
  height: 32px;
  top: auto;
  bottom: var(--sp-04);
  right: var(--sp-04);
}
.ms-slide-badge { top: var(--sp-04); bottom: auto; }

.ms-dot { border-radius: 0; height: 4px; width: 8px; background: rgba(244,244,244,.35); }
.ms-dot--active { width: 24px; background: var(--cds-text-primary); }

/* Requisiten in den Karten: rechte Winkel */
.polaroid, .doc, .polaroid-photo { border-radius: 0; }
.mac-window { border-radius: 0; }
.mac-titlebar { background: var(--cds-layer-02); }
.mac-urlbar { border-radius: 0; font-family: 'IBM Plex Mono', monospace; }
.doc-line, .doc-line--title { border-radius: 0; }
.doc-accent-strip { background: var(--cds-interactive); }
.mb-card__visual-overlay {
  background: linear-gradient(to bottom, rgba(38, 38, 38, 0.86) 0%, transparent 42%);
}

/* ═══ 5 · USP- & TESTIMONIAL-KACHELN ═════════════════════════════ */
.usp-grid { gap: var(--sp-05); }

.usp-card,
.testi-card,
.package-card,
.founder-banner,
.border-glow-card {
  --border-radius: 0;
  border-radius: 0;
}

.usp-card {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  padding: var(--sp-06);
  transition: border-color .11s var(--cds-ease-productive);
}
.usp-card:hover { transform: none; border-color: var(--cds-border-strong); }

.usp-emoji { font-size: 24px; color: var(--cds-text-primary); margin-bottom: var(--sp-09); }
.usp-emoji .nx-icon { stroke-width: 1.5; }

.usp-card h3 {
  font-size: 18px;
  font-weight: 400;
  color: var(--cds-text-primary);
  margin-bottom: var(--sp-03);
}
.usp-card p { font-size: 14px; line-height: 1.43; font-weight: 400; color: var(--cds-text-secondary); }

.testi-grid { gap: var(--sp-05); }

.testi-card {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  padding: var(--sp-06);
}
.testi-card:hover { transform: none; }

.testi-quote { display: none; }               /* Carbon kennt kein Zier-Ornament */
.testi-stars { color: var(--cds-accent-text); letter-spacing: 3px; margin-bottom: var(--sp-05); }
.testi-text { font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--cds-text-primary); }
.testi-author { margin-top: var(--sp-07); padding-top: var(--sp-05); border-top: 1px solid var(--cds-border-subtle); }
.testi-avatar {
  border-radius: 0;
  width: 40px; height: 40px;
  background: var(--cds-interactive);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
}
.testi-name { font-size: 14px; font-weight: 600; color: var(--cds-text-primary); }
.testi-role { font-size: 12px; color: var(--cds-text-helper); }

/* ═══ 6 · PAKETE ═════════════════════════════════════════════════ */
.packages-grid { gap: var(--sp-05); margin-top: 0; }

.package-card {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  transition: border-color .11s var(--cds-ease-productive);
}
.package-card:hover { transform: none; box-shadow: none; border-color: var(--cds-border-strong); }
.package-card.featured { border-color: var(--cds-interactive); box-shadow: none; }

.package-visual {
  height: 120px;
  background: var(--cds-layer-02);
  border-bottom: 1px solid var(--cds-border-subtle);
  font-size: 28px;
  color: var(--cds-text-primary);
  justify-content: flex-start;
  padding: 0 var(--sp-06);
}
.package-visual .nx-icon { stroke-width: 1.5; }

.package-body { padding: var(--sp-06); }

.package-name {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cds-text-primary);
}

.package-target {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
  margin-top: var(--sp-02);
}

.package-features {
  margin-top: var(--sp-06);
  gap: 0;
  border-top: 1px solid var(--cds-border-subtle);
}

.pkg-feat {
  align-items: flex-start;
  gap: var(--sp-04);
  padding: var(--sp-04) 0;
  font-size: 14px;
  line-height: 1.43;
  color: var(--cds-text-secondary);
  border-bottom: 1px solid var(--cds-border-subtle);
}
.pkg-feat::before { color: var(--cds-accent-text); font-weight: 400; line-height: 1.43; }

.package-cta { margin-top: var(--sp-07); }
.package-cta .btn { justify-content: flex-start; }

.package-badge,
.price-pill,
.founder-badge {
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  letter-spacing: 0.32px;
  text-transform: none;
}

.package-badge { background: var(--cds-interactive); font-size: 12px; padding: var(--sp-02) var(--sp-03); }
.price-pill { background: rgba(123, 47, 255, .16); border-color: var(--cds-interactive); color: var(--cds-accent-text); padding: var(--sp-03) var(--sp-05); }

/* Early Partner — Carbon Inline Notification */
.founder-banner { margin-top: var(--sp-05); }
.founder-banner .border-glow-inner {
  background: var(--cds-layer-01);
  border-left: 3px solid var(--cds-interactive);
}
/* Icon links neben dem Text — .border-glow-inner erzwingt sonst eine Spalte */
.founder-banner .founder-inner {
  flex-direction: row;
  padding: var(--sp-06);
  gap: var(--sp-05);
  align-items: flex-start;
}
.founder-icon { font-size: 20px; color: var(--cds-accent-text); line-height: 1.5; }
.founder-body h3 { font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--cds-text-primary); margin-bottom: var(--sp-03); }
.founder-body p { font-size: 14px; line-height: 1.43; font-weight: 400; color: var(--cds-text-secondary); margin-bottom: var(--sp-05); }
.founder-badge {
  background: transparent;
  border: 1px solid var(--cds-border-strong);
  color: var(--cds-text-secondary);
  font-size: 12px;
  padding: var(--sp-02) var(--sp-03);
}

/* ═══ 7 · KONTAKTFORMULAR (Carbon Fields) ════════════════════════ */
/* Die Haarlinie läuft über beide Spalten, nicht nur über den Text */
.contact-wrap {
  gap: var(--sp-10);
  padding-top: var(--sp-06);
  border-top: 1px solid var(--cds-border-subtle);
}
.contact-left { border-top: 0; padding-top: 0; }

.contact-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.form-row { gap: var(--sp-05); }
.form-group { gap: var(--sp-02); margin-bottom: var(--sp-06); }

.form-group label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.32px;
  font-weight: 400;
  text-transform: none;
  color: var(--cds-text-secondary);
}

/* Carbon-Feld: gefüllte Fläche, nur unten eine Linie, keine Rundung */
.form-group input,
.form-group textarea,
.form-group select {
  background: var(--cds-field);
  border: 0;
  border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0;
  padding: 0 var(--sp-05);
  height: 48px;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: var(--cds-text-primary);
  transition: background .11s var(--cds-ease-productive);
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { background: var(--cds-field-hover); }

.form-group textarea {
  height: auto;
  min-height: 128px;
  padding: var(--sp-04) var(--sp-05);
  line-height: 1.43;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--cds-text-helper); }

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Select: Carbon-Chevron ergänzt (vorher unsichtbar durch appearance:none) */
.form-group select {
  padding-right: var(--sp-08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23f4f4f4'%3E%3Cpath d='M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-05) center;
  background-size: 16px;
}
.form-group select option { background: var(--cds-layer-01); color: var(--cds-text-primary); }

.field-error {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: var(--cds-support-error);
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  outline: 2px solid var(--cds-support-error);
  outline-offset: -2px;
  border-bottom-color: transparent;
  box-shadow: none;
}

.contact-form .btn { width: 100%; }

.form-note { font-size: 12px; line-height: 16px; color: var(--cds-text-helper); text-align: left; margin-top: var(--sp-05); }
.form-note a { color: var(--cds-accent-text); }
.form-note a:hover { color: var(--cds-text-primary); }

.form-status {
  border-radius: 0;
  font-size: 14px;
  padding: var(--sp-05);
  border-left-width: 3px;
}
.form-status.success { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle); border-left: 3px solid var(--cds-support-success); color: var(--cds-text-primary); }
.form-status.error   { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle); border-left: 3px solid var(--cds-support-error);   color: var(--cds-text-primary); }

/* ═══ 8 · FOOTER ═════════════════════════════════════════════════ */
footer {
  background: var(--cds-background);
  border-top: 1px solid var(--cds-border-subtle);
  padding: var(--sp-11) 0 var(--sp-07);
}

.footer-grid { gap: var(--sp-07); padding-bottom: var(--sp-10); border-bottom: 1px solid var(--cds-border-subtle); }

.footer-brand .tagline { font-size: 14px; line-height: 1.43; font-weight: 400; color: var(--cds-text-secondary); max-width: 26ch; }

.footer-col h5 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
  margin-bottom: var(--sp-05);
}

.footer-col ul { gap: var(--sp-03); }
.footer-col ul li a,
.contact-entry a { font-size: 14px; color: var(--cds-text-secondary); }
.footer-col ul li a:hover,
.contact-entry a:hover { color: var(--cds-text-primary); text-decoration: underline; }

.contact-entry .cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32px;
  text-transform: none;
  color: var(--cds-text-helper);
}

.social-row { gap: 1px; }
.social-btn {
  width: 48px; height: 48px;
  border-radius: 0;
  background: var(--cds-layer-01);
  border-color: var(--cds-border-subtle);
  color: var(--cds-text-secondary);
}
.social-btn:hover {
  background: var(--cds-layer-02);
  border-color: var(--cds-border-strong);
  color: var(--cds-text-primary);
  transform: none;
}

.footer-bottom {
  padding-top: var(--sp-06);
  margin-top: 0;
  font-size: 12px;
  color: var(--cds-text-helper);
}

/* ═══ 9 · MOTION ═════════════════════════════════════════════════ */
.reveal { transform: translateY(16px); transition: opacity .4s var(--cds-ease-expressive), transform .4s var(--cds-ease-expressive); }

/* ═══ 10 · RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .section-header h2,
  .mb-section-heading h2,
  .contact-left h2 { max-width: none; }
  .contact-wrap { gap: var(--sp-09); }
}

@media (max-width: 768px) {
  /* Der Shell-Header ist nur noch 48px hoch — der Hero darf entsprechend höher rücken */
  .hero-content { padding-top: clamp(88px, 16vw, 128px); }
  /* Die Zeilenumbrüche im Titel sind fest gesetzt — die Box darf sie
     schmaler Viewports wegen nicht abschneiden */
  h1.headline { font-size: clamp(28px, 7.6vw, 42px); max-width: none; }
  .hero-sub { font-size: 16px; }
  .founder-banner .founder-inner { flex-direction: column; }
}

@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .footer-grid { gap: var(--sp-08); }
}

@media (max-width: 480px) {
  h1.headline { font-size: clamp(26px, 7.4vw, 32px); }
}

/* ═══ 11 · LIGHT THEME — seitenspezifische Ergänzungen ═══════════ */
html.light .usp-card,
html.light .testi-card,
html.light .package-card,
html.light .mb-card { background: var(--cds-layer-01) !important; border-color: var(--cds-border-subtle) !important; }