/* ==========================================================================
   HausChat — Funktionen-Seite
   Wird nur von funktionen.html nach styles.css geladen. Drei Abschnitte in
   den drei Website-Farben (Petrol, Violett, Blau), je ein Farbton pro
   Abschnitt, weiche Farbflecken statt harter Kanten. Die Mockups darin
   folgen dem Produkt-Regelwerk: Weiß auf Seitenfarbe, Haarlinien, Blau nur
   für Aktionen, Statusfarben streng nach Bedeutung.
   ========================================================================== */

/* ── Hero — heller Grund, drei weiche Farbflecken in den drei Farben.
   Bewusste Abweichung vom Ein-Farbton-Verlauf: die Startseite jedes
   Abschnitts darunter hat wieder nur eine Farbe. ────────────────────────── */
.fhero{--t-500:var(--teal-500);--t-700:var(--teal-700);position:relative;overflow:hidden;
  /* 88px Abstand plus die Leiste, die über dem Hero liegt. */
  padding:calc(88px + var(--nav-height)) 0 0;
  background:
    linear-gradient(to top,var(--page) 0,rgba(250,249,247,0) 320px),
    radial-gradient(56% 46% at 14% 6%,rgba(201,227,174,.95),rgba(201,227,174,0) 70%),
    radial-gradient(50% 44% at 56% 0%,rgba(210,195,251,.95),rgba(210,195,251,0) 70%),
    radial-gradient(52% 46% at 94% 14%,rgba(185,203,252,.95),rgba(185,203,252,0) 70%),
    var(--page)}
.fhero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.fhero .eyebrow{color:var(--teal-700)}
.fhero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.05;letter-spacing:var(--ls-display);color:var(--ink);max-width:15em;margin:14px 0 18px}
.fhero__lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--teal-700);max-width:34em;margin-bottom:28px}
.fhero .waitform{border-color:var(--violet-200)}

.fhero__app{width:100%;max-width:1180px;margin:56px auto 0;padding-bottom:0}

/* ── Dunkler Abschnitt nach dem Hero: drei Wege durch die Seite ────────── */
.pillars{--t-100:var(--teal-100);--t-200:var(--teal-200);--t-300:var(--teal-300);
  background:linear-gradient(160deg,var(--teal-900),#12300C)}
.pillars .sec-head h2{font-size:40px}
.pillar{position:relative;display:flex;flex-direction:column;gap:12px;padding:32px;min-height:240px;text-decoration:none;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.05);
  border-radius:20px;-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);
  transition:background-color var(--dur-fast) var(--ease-out)}
.pillar:hover{background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.09))}
.pillar h3{font-size:24px;line-height:1.25;color:#FFFFFF}
.pillar p{font-size:15px;line-height:1.55;color:var(--teal-100);max-width:26em}
.pillar__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-weight:700;font-size:14px;color:#FFFFFF}
.pillar__more .icon{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease-out)}
.pillar:hover .pillar__more .icon{transform:translateX(3px)}

/* ── Breiten ───────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .fhero{padding-top:calc(64px + var(--nav-height))}
  .fhero__app{margin-top:40px}
  .pillars .sec-head h2{font-size:32px}
  .pillar{min-height:0}
}
@media (max-width:640px){
  .fhero h1{font-size:34px}
  .fhero__lead{font-size:17px}
}

/* ── Alle Funktionen: Stand je Funktion ─────────────────────────────────
   Dieselben Chips wie im Ausblick der Preisseite (.rchip), hier eine Stufe
   kleiner. Keine Statusfarben: Ampelfarben heißen im Produkt „Frist nah“
   und „überfällig“. Läuft = hell gefüllt, Geplant = Glas, Später = gestrichelt. */
.rchip{display:inline-flex;align-items:center;height:22px;padding:0 9px;flex:0 0 auto;
  border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);color:#FFFFFF;
  font-weight:var(--fw-bold);font-size:11px;line-height:1;white-space:nowrap;
  letter-spacing:var(--ls-label);text-transform:uppercase}
.rchip--jetzt{background:var(--teal-100);border-color:transparent;color:var(--teal-900)}
.rchip--spaeter{background:transparent;border-style:dashed;color:var(--teal-100)}
.alle__legende{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:6px;font-size:14px;color:var(--teal-100)}
.alle__legende li{display:inline-flex;align-items:center;gap:8px}
.alle__txt{flex:1;min-width:0}
.alle__col li .rchip{margin-top:0}
.alle .alle__note{max-width:var(--measure-prose);margin:36px auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--teal-200)}

/* Kalender in der breiten Karte: der heutige Tag bleibt ein Kreis statt Oval. */
.cal__grid span.is-today{justify-self:center;width:28px}