/* ueber-uns.css — seiten-spezifisches Sektions-Layout.
   Tokens, Typografie, Buttons, Nav und Footer kommen zentral aus base.css (eine Wahrheit). */

    /* ══════════════════════════════════════════
       UEBER UNS — V2-Struktur + V5-Optik
       ══════════════════════════════════════════ */

    /* ── PAGE HERO ── */
    .page-hero {
      position: relative;
      min-height: 70vh;
      background: var(--warm-900);
      overflow: hidden;
    }
    .page-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.4;
    }
    .page-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(26,25,23,0.1) 0%, rgba(26,25,23,0.7) 100%);
    }
    .page-hero-content {
      position: absolute;
      bottom: 72px;
      left: 0; right: 0;
      padding: 0 80px;
      z-index: 5;
    }
    .page-hero-content .label { color: var(--orange); margin-bottom: 16px; }
    .page-hero-title {
      font-family: var(--font-display);
      font-size: 80px;
      font-weight: 800;
      line-height: 0.95;
      letter-spacing: -3px;
      color: var(--white);
      text-transform: uppercase;
    }
    .page-hero-title span { color: var(--warm-400); font-weight: 600; }
    .page-hero-desc {
      font-size: 17px;
      line-height: 1.7;
      color: rgba(255,255,255,0.55);
      max-width: 480px;
      margin-top: 20px;
    }


    /* ── STORY ── */
    .story {
      padding: 160px 80px 120px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .story-left .label { margin-bottom: 16px; }
    .story-left .t-xl { max-width: 420px; margin-bottom: 32px; }
    .story-left .t-editorial { max-width: 440px; }
    .story-right {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding-top: 60px;
    }
    .story-right p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--warm-500);
    }
    .story-right .story-highlight {
      font-family: var(--font-serif);
      font-size: 24px;
      font-style: italic;
      line-height: 1.5;
      color: var(--warm-700);
      padding-left: 24px;
      border-left: 3px solid var(--orange);
    }
    .story-image {
      margin: 0 80px 0;
      border-radius: var(--radius-xl);
      overflow: hidden;
      height: 480px;
    }


    /* ── TIMELINE ── */
    .timeline-section {
      padding: 120px var(--pad);
      background: var(--sand);
      margin: 80px var(--pad) 0;
      border-radius: var(--radius-xl);
    }
    .timeline-header {
      text-align: center;
      margin-bottom: 80px;
    }
    .timeline-header .label { margin-bottom: 12px; }
    .timeline-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      padding: 0 40px;
    }
    .timeline-item {
      text-align: center;
      position: relative;
    }
    .timeline-year {
      font-family: var(--font-display);
      font-size: 56px;
      font-weight: 800;
      color: var(--warm-200);
      line-height: 1;
      margin-bottom: 16px;
    }
    .timeline-item h4 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      color: var(--warm-900);
      margin-bottom: 8px;
    }
    .timeline-item p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--warm-500);
      max-width: 220px;
      margin: 0 auto;
    }
    .timeline-item::after {
      content: '';
      position: absolute;
      top: 28px;
      right: -20px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--orange);
    }
    .timeline-item:last-child::after { display: none; }


    /* ── TEAM ── */
    .team {
      padding: 140px 80px 120px;
    }
    .team-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 60px;
    }
    .team-header-left .label { margin-bottom: 12px; }
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .team-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      height: 400px;
    }
    .team-card img {
      transition: transform 0.6s ease;
    }
    .team-card:hover img {
      transform: scale(1.04);
    }
    .team-card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 28px;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    }
    .team-card-name {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      color: var(--white);
    }
    .team-card-role {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      margin-top: 4px;
    }
    /* Wide team card spanning 2 columns — gleiche Höhe wie .team-card,
       sonst entsteht in der unteren Reihe ein sichtbarer Versatz */
    .team-card-wide {
      grid-column: span 2;
    }


    /* ── VALUES ── */
    .values {
      margin: 0 var(--pad);
      background: var(--warm-900);
      border-radius: var(--radius-xl);
      padding: 100px 80px;
      position: relative;
      overflow: hidden;
    }
    .values-watermark {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: 200px;
      font-weight: 800;
      text-transform: uppercase;
      color: rgba(255,255,255,0.025);
      letter-spacing: -8px;
      white-space: nowrap;
      pointer-events: none;
    }
    .values-header {
      text-align: center;
      margin-bottom: 72px;
      position: relative;
      z-index: 2;
    }
    .values-header .label { color: var(--orange); margin-bottom: 12px; }
    .values-header .t-lg { color: var(--white); }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      position: relative;
      z-index: 2;
    }
    .value-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-lg);
      padding: 40px 28px;
      text-align: center;
      transition: background 0.3s ease;
    }
    .value-card:hover {
      background: rgba(255,255,255,0.08);
    }
    .value-icon {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-sm);
      background: rgba(230,117,8,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }
    .value-icon svg {
      width: 26px;
      height: 26px;
      stroke: var(--orange);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .value-card h3 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 10px;
    }
    .value-card p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--warm-400);
    }


    /* ── SOCIAL WALL (Flockler) ──
       Heller Block zwischen Werte und CTA: bricht bewusst die dunkle Kette
       Werte → CTA → Footer (#34), daher darf die Werte-Sektion dunkel bleiben. */
    .social-wall {
      padding: 120px var(--pad);
      background: var(--white);
    }
    .social-header {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 56px;
    }
    .social-header .label { margin-bottom: 12px; }
    .social-header .social-desc {
      font-size: 17px;
      line-height: 1.7;
      color: var(--warm-500);
      margin-top: 16px;
    }
    .social-embed {
      border-radius: var(--radius-xl);
      overflow: hidden;
    }
    .social-embed iframe {
      display: block;
      width: 100%;
      border: 0;
    }
    /* Platzhalter, solange kein Flockler-Code hinterlegt ist */
    .social-placeholder {
      max-width: 620px;
      margin: 0 auto;
      border: 1.5px dashed var(--warm-200);
      border-radius: var(--radius-lg);
      background: var(--sand);
      padding: 72px 32px;
      text-align: center;
      color: var(--warm-400);
      font-size: 15px;
      line-height: 1.7;
    }


    /* ── CTA BAND ── */
    .cta-band { margin-top: 80px; margin-bottom: 80px; }


    /* ══════════════════════════════════════════
       RESPONSIVE — Ueber uns (Desktop unveraendert)
       ══════════════════════════════════════════ */
    @media (max-width: 900px) {
      body { width: 100%; }

      /* PAGE HERO */
      .page-hero { min-height: 420px; }
      .page-hero-content { bottom: 40px; padding: 0 24px; }
      .page-hero-title { font-size: 48px; letter-spacing: -1.5px; }

      /* STORY-Zweispalter -> 1 Spalte */
      .story { grid-template-columns: 1fr; gap: 40px; padding: 100px 24px 60px; }
      .story-left .t-xl { font-size: 48px; }
      .story-right { padding-top: 0; gap: 24px; }
      .story-image { margin: 0 20px; height: 320px; }

      /* TIMELINE -> gestapelt */
      .timeline-section { padding: 80px 24px; margin: 60px 20px 0; }
      .timeline-header { margin-bottom: 48px; }
      .timeline-track { grid-template-columns: 1fr; gap: 40px; padding: 0; }
      .timeline-item::after { display: none; }
      .timeline-item p { max-width: none; }

      /* TEAM-Grid -> 1 Spalte */
      .team { padding: 80px 20px; }
      .team-header { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
      .team-header .t-xl { font-size: 44px; }
      .team-header p { text-align: left !important; max-width: 100% !important; }
      .team-grid { grid-template-columns: 1fr; }
      .team-card-wide { grid-column: auto; height: 300px; }

      /* WERTE */
      .values { margin: 0 20px; padding: 60px 24px; }
      .values-header { margin-bottom: 48px; }
      .values-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
      .values-watermark { font-size: 130px; }

      /* SOCIAL WALL */
      .social-wall { padding: 72px 24px; }
      .social-header { margin-bottom: 40px; }
      .social-placeholder { padding: 48px 24px; }

      /* CTA-Band */

      /* Footer */
      .footer { padding: 60px 28px 32px; margin: 0 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px; }
      .footer-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
    }

    @media (max-width: 640px) {
      /* Skaliert mit statt fixer 44px (Jakob 17.07.) — "Haustechnik" wurde
         unter 390px stumm gekappt. */
      .t-lg { font-size: clamp(30px, 10.5vw, 44px); }
      .page-hero-title { font-size: 36px; }
      .story-left .t-xl { font-size: 38px; }
      .team-header .t-xl { font-size: 38px; }
      .values-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    }

/* CTA-Band „Projekt geplant?" — vertikaler Seitenabstand dieser Seite (Bauteil: _cta-band.css) */
@media (max-width: 900px) { .cta-band { margin-top: 60px; margin-bottom: 60px; } }