/* ==========================================================================
   HausChat.de — Über uns
   Wird nur von ueber-uns.html nach styles.css geladen. Ruhige Seite: ein
   Farbton pro Abschnitt, Fotos statt Mockups, viel Luft. Ein Satz, ein
   Zitat, zwei Köpfe, eine Geschichte, drei Grundsätze.
   ========================================================================== */

/* ── Einblenden beim Scrollen: 200ms, 8px, einmal ─────────────────────── */
.rv{opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ── Vision — heller Grund, ein weicher Petrol-Fleck, Zitat mit Foto ──── */
.vision{--t-500:var(--teal-500);--t-700:var(--teal-700);position:relative;overflow:hidden;
  padding:calc(112px + var(--nav-height)) 0 96px;
  --fleck-y:44%;--fleck-h:26%;
  background:
    linear-gradient(to top,var(--page) 0,rgba(250,249,247,0) 300px),
    radial-gradient(130% var(--fleck-h) at 50% var(--fleck-y),rgba(47,106,34,.30),rgba(47,106,34,.13) 45%,rgba(47,106,34,0) 78%),
    linear-gradient(180deg,var(--teal-100) 0px,var(--teal-200) 40%,var(--teal-200) 100%)}
.vision__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.vision .eyebrow{color:var(--teal-700)}
.vision h1{font-size:clamp(38px,5.2vw,68px);line-height:1.05;letter-spacing:var(--ls-display);color:var(--ink);max-width:14em;margin:14px 0 18px}
.vision__lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--teal-700);max-width:32em}

/* Das Zitat steht frei, ohne Karte. Liter, groß, darunter Foto und Name. */
.vquote{margin:56px 0 0;max-width:30em}
.vquote p{font-family:var(--font-heading);font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.3;color:var(--ink)}
.vquote footer{display:inline-flex;align-items:center;gap:12px;margin-top:22px;text-align:left}
.vquote img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top}
.vquote strong{display:block;font-size:15px;color:var(--ink)}
.vquote small{font-size:14px;color:var(--teal-700)}

/* ── Team — zwei Karten, ein Farbton in zwei Stufen ────────────────────── */
.team{background:var(--page)}
.team .sec-head h2{font-size:40px}
.team__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:960px;margin:0 auto}
.tcard{display:grid;grid-template-columns:200px 1fr;overflow:hidden;border-radius:24px;background:var(--card);border:1px solid var(--teal-100)}
.tcard img{width:100%;height:100%;min-height:260px;object-fit:cover;object-position:top}
.tcard__copy{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:28px}
.tcard__copy strong{font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1.2;color:var(--ink)}
.tcard__role{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-500);margin-bottom:8px}
.tcard__copy p{font-size:15px;line-height:1.55;color:var(--teal-700)}

/* ── Warum — Violett, Foto links, Geschichte rechts ────────────────────── */
.story{--t-500:var(--violet-500);--t-700:var(--violet-700);
  background:linear-gradient(180deg,var(--page) 0,var(--violet-50) 260px,var(--violet-50) calc(100% - 260px),var(--page) 100%)}
.story__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.story__visual img{width:100%;height:auto;border-radius:24px;border:1px solid var(--violet-100)}
.story__copy{display:flex;flex-direction:column;gap:16px;max-width:36em}
.story__copy .eyebrow{color:var(--violet-500)}
.story__copy h2{font-size:40px;line-height:1.12;letter-spacing:var(--ls-heading);color:var(--ink);margin-bottom:6px}
.story__copy p{font-size:17px;line-height:1.65;color:var(--violet-700)}
.story__copy p strong{color:var(--ink)}

/* ── Grundsätze — hell, drei weiße Karten. Unten mehr Abstand, weil der
   Petrol-Schleier des nächsten Abschnitts 120px hineinreicht. ─────────── */
.principles{--t-500:var(--teal-500);--t-700:var(--teal-700);background:var(--page);
  padding-bottom:calc(var(--section-py-web) + 120px)}
.principles .sec-head h2{font-size:40px}
.principles .sec-head .eyebrow{color:var(--teal-500)}
.principles .sec-head .lead{color:var(--teal-700)}
/* Petrol in zwei Stufen: Fläche 100, Text 700 — das Kartenpaar-Muster der Website. */
.pcard{display:flex;flex-direction:column;gap:12px;min-height:240px;padding:32px;border-radius:20px;
  background:linear-gradient(160deg,var(--teal-100),var(--teal-50));border:1px solid var(--teal-200)}
.pcard__n{font-family:var(--font-heading);font-weight:400;font-size:15px;color:var(--teal-500)}
.pcard h3{font-size:24px;line-height:1.25;color:var(--ink)}
.pcard p{font-size:15px;line-height:1.55;color:var(--teal-700)}

/* ── Behind the scenes — Petrol, weiche Einblende von oben, endet flach auf
   Petrol 900, damit die Naht zum Footer verschwindet. Zieht sich 120px in
   den Abschnitt davor. ─────────────────────────────────────────────────── */
.channels{--t-100:var(--teal-100);--t-200:var(--teal-200);--t-300:var(--teal-300);
  position:relative;margin-top:-120px;padding:420px 0 96px;
  background:
    radial-gradient(150% 480px at 14% -150px,rgba(250,249,247,.55),rgba(250,249,247,0) 70%),
    radial-gradient(130% 400px at 78% -120px,rgba(250,249,247,.45),rgba(250,249,247,0) 68%),
    linear-gradient(180deg,
      rgba(250,249,247,1) 0px,rgba(250,249,247,.980) 40px,rgba(250,249,247,.926) 80px,
      rgba(250,249,247,.844) 120px,rgba(250,249,247,.741) 160px,rgba(250,249,247,.624) 200px,
      rgba(250,249,247,.500) 240px,rgba(250,249,247,.376) 280px,rgba(250,249,247,.259) 320px,
      rgba(250,249,247,.156) 360px,rgba(250,249,247,.074) 400px,rgba(250,249,247,.020) 440px,
      rgba(250,249,247,0) 480px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
.channels .sec-head h2{font-size:40px}
.channels .sec-head .eyebrow{color:var(--teal-200)}
.channels__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:0 auto}
.channel{display:flex;align-items:center;gap:14px;min-height:80px;padding:18px 20px;border-radius:16px;
  background:var(--glass-fill);border:1px solid var(--glass-border);color:#FFFFFF;
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  transition:var(--transition-control)}
.channel:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:#FFFFFF}
.channel__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);color:#FFFFFF;flex:0 0 auto}
.channel__icon .icon{width:22px;height:22px}
.channel__copy{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.channel__copy strong{font-size:16px;color:#FFFFFF}
.channel__copy small{font-size:14px;color:var(--teal-200)}
.channel__go{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:#FFFFFF}
.channel__go .icon{width:14px;height:14px}

/* ── Breiten ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .team .sec-head h2,.story__copy h2,.principles .sec-head h2,.channels .sec-head h2{font-size:32px}
  .team__grid{grid-template-columns:1fr;max-width:560px}
  .story__grid{grid-template-columns:1fr;gap:32px}
  .story__visual{order:-1}
  .pcard{min-height:0}
  .principles{padding-bottom:calc(var(--section-py-web) + 70px)}
}
@media (max-width:640px){
  .vision{padding:calc(72px + var(--nav-height)) 0 72px}
  .vision h1{font-size:34px}
  .vision__lead{font-size:17px}
  .vquote{margin-top:40px}
  .tcard{grid-template-columns:1fr}
  .tcard img{max-height:320px}
  .channels__grid{grid-template-columns:1fr}
  .channels{margin-top:-70px;padding-top:260px;background:
    radial-gradient(150% 300px at 20% -100px,rgba(250,249,247,.5),rgba(250,249,247,0) 70%),
    linear-gradient(180deg,rgba(250,249,247,1) 0px,rgba(250,249,247,.9) 50px,rgba(250,249,247,.62) 110px,rgba(250,249,247,.3) 180px,rgba(250,249,247,.08) 240px,rgba(250,249,247,0) 290px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
  .story__copy p{font-size:16px}
}

/* Pilot-Karten ohne Link: kein Hover-Effekt, damit nichts klickbar wirkt. */
.channel--static:hover{background:var(--glass-fill);border-color:var(--glass-border)}