/* ============================================================
   home-hub.css — Phase-4-ERGÄNZUNGEN der Startseite (Hub-Ausbau).
   Bewusst getrennt von home.css (= abgenommene 1:1-Extraktion,
   bleibt unangetastet). Lädt NACH home.css.
   Neu: Scroll-Cue (Hero-Ende) · 4 Säulen-Teaser (creme).
   (Trust-Strip war hier — 2026-07-25 auf Inhaber-Wunsch entfernt.)
   Designsprache: 1:1 Rezepte aus home.css (Karten wie .example-card,
   Kicker Cormorant italic, Type-Stufen wie Content-Sektionen).
   ============================================================ */

/* ---------- Scroll-Cue (dezent, am Hero-Ende) ---------- */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  z-index:2;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.55);
  transition:color 0.2s ease;
  animation:cueFloat 2.6s ease-in-out infinite;
}
.scroll-cue:hover{ color:rgba(255,255,255,0.9); }
.scroll-cue svg{ display:block; }

@keyframes cueFloat{
  0%, 100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(7px); }
}

/* ---------- Säulen-Teaser (creme Lese-Sektion) ---------- */
.hub-teaser{ padding:112px 0 96px; }

/* ============================================================
   Hub-Karten = „Tuer-Karten"-Rezept der App (Quelle: lobby.html,
   Stand 62bc42f — Inhaber-Lieferung 2026-07-12, Werte 1:1):
   Hochformat 173/245 (eiserne Regel 8) · tiefes Blau #13283F als
   Grund · hauchduenne Orange-Flaeche rgba(231,150,90,.085) nach
   Muster der linken Tuer (Hover .13) · dezenter Orange-Akzent-Rand
   rgba(227,122,45,.3) (Hover .78) · Lesbarkeits-Verlauf unten ·
   Hover hebt 6px, Klick federt ein (translateY(-2px) scale(.985)).
   Bilder spaeter als <img> in den Slot: object-fit:cover —
   FOTO-REGEL: nie verzerren. Kartenbreite bleibt 322px (Grid).
   Farb-Hexwerte hier bewusst 1:1 aus der Vorlage (Token-Ausnahme).
   ============================================================ */

.hub-teaser-header{
  text-align:center;
  margin-bottom:56px;
}
.hub-teaser-kicker{
  font-family:"Cormorant", serif;
  font-weight:600;
  font-style:italic;
  font-size:1.12rem;
  color:var(--orange-deep);
  margin:0 0 8px;
}
.hub-teaser-title{
  font-family:"Montserrat", sans-serif;
  font-weight:760;
  font-size:2.0rem;
  color:var(--blue);
  margin:0;
  line-height:1.2;
}

.hub-teaser-grid{
  display:grid;
  grid-template-columns:322px 322px 322px 322px;
  gap:24px;
  justify-content:center;
  align-items:start;          /* Regel: nie center */
}

.hub-card{
  position:relative;
  overflow:hidden;                       /* Bild fuellt die Karte, Ecken bleiben rund */
  aspect-ratio:173 / 245;                /* Hochformat — eiserne Regel 8 der App */
  background-color:#13283F;              /* tiefer App-Grund */
  border:1px solid rgba(227,122,45,.3);  /* dezenter Orange-Akzent-Rand */
  border-radius:18px;                    /* App: clamp(18px,1.6vw,24px) — hier fix (kein clamp) */
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;              /* Beschriftung unten, ueber dem Verlauf */
  transition:transform .28s, border-color .28s, background-color .28s;
}
/* hauchduenne Orange-Flaeche (Muster linke Tuer) — liegt auch ueber spaeteren Bildern */
.hub-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-color:rgba(231,150,90,.085);
  transition:background-color .28s;
}
/* Lesbarkeits-Verlauf unten (tiefes Blau) */
.hub-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(19,40,63,.05) 30%, rgba(19,40,63,.72) 85%);
}
.hub-card:hover{
  transform:translateY(-6px);
  border-color:rgba(227,122,45,.78);
}
.hub-card:hover::before{ background-color:rgba(231,150,90,.13); }
.hub-card:active{
  transform:translateY(-2px) scale(.985); /* federt beim Klick kurz ein */
}

/* Bild-Ebene (war Icon-Slot): fuellt die GANZE Karte, liegt hinter
   Orange-Hauch und Verlauf. Screenshots/Fotos kommen spaeter als <img>
   hier hinein (App-Screenshot, markierter Huf, 2 offen — Inhaber liefert). */
.hub-card-icon{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
}
.hub-card-icon img{
  width:100%;
  height:100%;
  object-fit:cover;              /* FOTO-REGEL: nie verzerren */
  display:block;
}

/* Beschriftung unten, ueber dem Verlauf (z-index 3 > Hauch 1 + Verlauf 2) */
.hub-card-label{
  position:relative;
  z-index:3;
  font-size:0.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--orange);           /* Orange-Variante fuer dunkle Flaechen (tokens) */
  margin:0 0 6px;
}

.hub-card-title{
  position:relative;
  z-index:3;
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  font-size:15.5px;              /* Rezept-Wert Tuer-Karte */
  color:rgba(255,255,255,.95);
  margin:0;
}

.hub-card-text{
  position:relative;
  z-index:3;
  font-size:12px;                /* Rezept: Unterzeile */
  line-height:1.5;
  color:rgba(255,255,255,.62);
  margin:4px 0 0;                /* Rezept: margin-top 4px */
  min-height:3.2em;              /* Slot-Reservierung (Inhalts-Phase) */
}

.hub-card-link{
  position:relative;
  z-index:3;
  margin-top:12px;
  font-weight:600;
  font-size:0.9rem;
  color:rgba(255,255,255,.85);
}
.hub-card:hover .hub-card-link{ color:var(--orange); }

/* Insider-Karte: Kohle-Sketch als Motiv (Inhaber 24.07., Vorlage avatar_kohle_1).
   Blau-Look = Rezept des /insider-Heros (Zeichnung gedimmt ueber Dunkelblau,
   dort opacity .18); grayscale neutralisiert den warmen Papierton des Originals,
   Deckkraft auf der kleinen Karte leicht kraeftiger — Feinwert auf Zuruf. */
.hub-card--insider .hub-card-icon img{
  filter:grayscale(1);
  opacity:.22;
  object-position:center 22%;    /* Gesicht sitzt im oberen Kartendrittel */
}

/* App-Karte: Lobby-Screen (Inhaber 24.07.) — Hochformat, Ausschnitt oben
   haelt Wortmarke + Solar-Huf im Bild; Hauch + Verlauf liegen wie ueberall
   drueber. Methode-Karte (markiertes Solar-Foto) kommt mit den Defaults aus. */
.hub-card--app .hub-card-icon img{
  object-position:center top;
}

/* Buch-Karte (Inhaber-Feinschliff 24.07. abends): Cover-Entwurf auf 80 %
   im dunkelblauen Passepartout (voll deckend haette die Cover-Unterzeile
   mit „Mehr erfahren" kollidiert) + grosses ROTES „PREVIEW" quer drueber
   (Rot statt Orange, sonst Verwechslung mit dem BUCH-Label unten links;
   Rot-Wert #e04040 = Drei-Farben-Punkt-Rot der .app, CI-konform). */
.hub-card--book .hub-card-icon{
  background:#13283F;             /* Cover „sitzt drinne" im Marken-Dunkelblau */
}
.hub-card--book .hub-card-icon img{
  width:80%;
  height:auto;
  object-fit:unset;
  display:block;
  margin:16px auto 0;
  border-radius:6px;              /* weiche Kante im Passepartout — Veto = 1 Wort */
}
.hub-card-preview{
  position:absolute;
  top:45%; left:50%;
  transform:translate(-50%,-50%) rotate(-24deg);
  z-index:3;
  font-family:"Montserrat", sans-serif;
  font-size:42px;                 /* ~4x der feinen Erstfassung */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:#e04040;
  opacity:.92;
  white-space:nowrap;
  pointer-events:none;
}

/* Trust-Strip-Stile (.hub-trust*) am 2026-07-25 mit der Sektion entfernt
   (Inhaber-Wunsch; Kennzahl-Band untertrieb + missverstaendlich). */

/* ============================================================
   Sprachfelder oben links (Inhaber 22.07.) — Rezept 1:1 aus
   base.css .lang-switch (dort Z.222–245). base.css wird auf der
   Startseite bewusst NICHT geladen (fixe Praesentations-Optik),
   darum hier gekapselte Kopie; Tokens (--orange, --ink-invert,
   --font-head) kommen aus tokens.css. Aktiv = oranger TEXT,
   kein Flaechen-Orange (V2 §1.3). Feinposition auf Zuruf.
   ============================================================ */
.header-inner .lang-switch{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.header-inner .lang-switch button{
  background:transparent;
  border:none;
  min-height:48px;                /* Touch-Target */
  min-width:44px;
  padding:0 6px;
  color:rgba(255,255,255,0.62);
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.08em;
  transition:color 0.18s ease;
}
.header-inner .lang-switch button:hover{ color:var(--ink-invert); }
.header-inner .lang-switch button.is-active{ color:var(--orange); }

/* Kicker DE: „Hör auf" braucht mehr Luft zum Folgewort — das kursive
   Faux-Italic-f frisst den normalen Wortabstand (Inhaber-Zuruf 22.07.,
   „halbes Leerzeichen"). Nur DE (render() stempelt html[lang]);
   Wert auf Zuruf tunbar. EN bleibt unangetastet. */
html[lang="de"] .hero-kicker .kicker-highlight{ margin-right:0.16em; }

/* Treppe DE (Inhaber-Zuruf 22.07.): „Lass" weiß, „Hufe" orange —
   „gesunde Hufe" wird das Orange-Paar. Werte = Bestand-Rezepte der
   jeweils anderen Wortfarbe (home.css .hero-word.*). Farben setzt das
   Panel NICHT inline — CSS-Schicht reicht. EN unverändert. */
html[lang="de"] .hero-word.start{ color:rgba(255,255,255,0.80); }
html[lang="de"] .hero-word.working{ color:var(--orange); }