/* ============================================================
   WEBSITE · Startseite (Scope .hps, Praefix hp-) · 29.10.2026
   Andy 29.10.: «lass uns mal mit der Startseite anfangen im CSS design».
   Responsive statt flicken (fm-design fundament.md 1 + 4, Andy 24.10.):
   Groessen als clamp() an der Breite der Seite (cqw) und der Hoehe (svh),
   keine Regel fuer ein einzelnes Geraet, kein Geraetename im Code.
   Layout-Schwellen nur, wo der Inhalt nicht mehr nebeneinander passt,
   als Container-Abfrage auf .hps.
   Herkunft: templates/_partials/home-styles.twig (02.09., Hero 13.10.,
   Fotofolge 29.10.); Aussehen und Inhalt wie abgenommen.
   BRANDING 2026-08-27: Navy #151A31 Grund, Gold #E4B56A kroent (nie
   auf Knoepfen), Textgold #845A0B, Magenta #B31F66 nur Handlung.
   NAMENSRAUM: app.css belegt global .hero/.wrap/.btn/.nav, deshalb
   alle Klassen mit hp- und alle Selektoren unter .hps.
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/fonts/bricolage/bricolage-grotesque-latin-var.woff2') format('woff2');
  font-weight:300 600;font-display:swap;
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.hps{
  --navy:#151A31;
  --paper:#F8F8F8;
  --stone:#F0EBE6;
  --warm:#F5F3F0;
  --gold:#E4B56A;
  --gold-paper:#845A0B;
  --magenta:#B31F66;
  --magenta-hover:#9C1A58;
  --ink:#151A31;
  --body:#4B5168;
  --muted:#5D6278;
  --on-navy:#EDEEF4;
  --on-navy-soft:#A9AEC4;
  --line-paper:#DED8D0;
  --line-navy:#2A3052;
  --dsp:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --txt:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  container:hps / inline-size;
  background:var(--navy);color:var(--body);
  font-family:var(--txt);font-size:17px;line-height:1.65;text-align:left;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.hps *{box-sizing:border-box;margin:0;padding:0}
.hps img{max-width:100%;height:auto;display:block}
.hps a{color:inherit;text-decoration:none}
.hps b,.hps strong{font-weight:600}
.hps .hp-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4cqw,48px)}

.hps h1,.hps h2,.hps .hp-quote{font-family:var(--dsp);font-weight:600;color:inherit;text-wrap:balance}
.hps h1{font-size:clamp(42px,3.4cqw + 16px,68px);line-height:1;letter-spacing:-.025em}
.hps h2{font-size:clamp(34px,4.6cqw,60px);line-height:1.04;letter-spacing:-.02em}
.hps h3{font-family:var(--txt);font-weight:600;font-size:19px;line-height:1.3}
.hps .hp-num{font-family:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hps .hp-au{color:var(--gold)}
.hps .hp-gp{color:var(--gold-paper)}

.hps .hp-eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.hps .hp-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.hps .hp-on-navy{color:var(--gold)}
.hps .hp-on-paper{color:var(--gold-paper)}
.hps .hp-lede{font-size:19px;line-height:1.6;max-width:50ch}
.hps .hp-lede b{color:inherit}

/* ---------- Knopf: Pille, Pfeil im eigenen Kreis ---------- */
.hps .hp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--txt);font-weight:600;font-size:16px;line-height:1;
  padding:13px 13px 13px 28px;border-radius:999px;border:none;cursor:pointer;
  color:#fff;background:var(--magenta);min-height:56px;
  transition:background .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 18px 40px -18px rgba(179,31,102,.55);
}
.hps .hp-arr{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);transition:transform .5s var(--ease),background .5s var(--ease)}
.hps .hp-arr svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hps .hp-btn:hover{background:var(--magenta-hover);transform:translateY(-1px)}
.hps .hp-btn:hover .hp-arr{transform:translate(2px,-1px) scale(1.06);background:rgba(255,255,255,.26)}
.hps .hp-btn:active{transform:scale(.98)}
.hps .hp-btn-ghost{background:transparent;color:var(--on-navy);border:1px solid rgba(237,238,244,.32);box-shadow:none}
.hps .hp-btn-ghost .hp-arr{background:transparent;border:1px solid rgba(237,238,244,.32)}
.hps .hp-btn-ghost:hover{background:rgba(237,238,244,.06);border-color:rgba(237,238,244,.6);box-shadow:none}
.hps .hp-btn-ghost-ink{background:transparent;color:var(--ink);border:1px solid var(--line-paper);box-shadow:none}
.hps .hp-btn-ghost-ink .hp-arr{background:transparent;border:1px solid var(--line-paper)}
.hps .hp-btn-ghost-ink:hover{background:rgba(21,26,49,.04);border-color:var(--ink);box-shadow:none}
.hps .hp-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.hps a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hps .hp-note{margin-top:14px;font-size:14px;color:var(--muted)}

/* ---------- Doppelrahmen ---------- */
.hps .hp-bezel{padding:6px;border-radius:28px;background:rgba(21,26,49,.05);border:1px solid rgba(21,26,49,.08)}
.hps .hp-bezel>.hp-core{border-radius:22px;overflow:hidden;background:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 40px 70px -40px rgba(21,26,49,.35)}
.hps .hp-bezel-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.hps .hp-bezel-dark>.hp-core{background:var(--navy);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 50px 90px -40px rgba(0,0,0,.6)}
.hps .hp-phone{padding:6px;border-radius:34px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.hps .hp-phone>.hp-core{border-radius:28px;overflow:hidden;background:var(--navy)}
.hps .hp-phone img{width:100%;height:auto}

/* ---------- Reveal ---------- */
.hps.hp-js .hp-r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hps.hp-js .hp-r.hp-d1{transition-delay:.1s}
.hps.hp-js .hp-r.hp-d2{transition-delay:.2s}
.hps.hp-js .hp-r.hp-d3{transition-delay:.3s}
.hps.hp-js .hp-r.hp-vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hps.hp-js .hp-r{opacity:1;transform:none;transition:none}
  .hps .hp-btn,.hps .hp-arr{transition:none}
  .hps .hp-hero-bild img,.hps.hp-js .hp-hero-bild img{transform:none;transition:none}
  .hps .hp-hero-bild{transition:none}
}

/* ---------- Hero: Fotofolge, Text links auf der Platte, Session-Ticket, Kennzahlen ----------
   Muster «Bild-Hero mit Textplatte» (Website-Regeln 26.08.): das Foto bleibt hell, die Platte
   hinter dem Text traegt die Schrift. Zweiklang 300 Cream / 600 Gold.
   Jedes Bild bringt seinen Fokuspunkt mit (--fx, --fy = Lage des Gesichts im Bild, 0 bis 1)
   und sein Seitenverhaeltnis (--ar). Daraus rechnet EINE Regel fuer jede Breite:
   breit: das Bild steht in voller Hoehe der Flaeche in seinem eigenen Seitenverhaeltnis (nicht
          mehr auf die ganze Breite gezogen, Andy 29.10.: «auf meinem 27 zoll screen sehen die
          menschen riesig aus»), das Gesicht bei --zx zwischen Text und Ticket, die Raender laufen
          weich ins Navy aus;
   schmal: das Bild liegt als Band oben, das Gesicht steht bei --hb-t ueber der Platte
           (hoechstens 80px nach unten, der Spalt bleibt unter der Kopfleiste). */
.hps .hp-hero{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden;
  --zx:calc(225px + 46.4cqw);
  --hb-t:clamp(150px,30cqw + 32px,290px)}
.hps .hp-hero-img{position:absolute;inset:0;overflow:hidden}
.hps .hp-hero-bild{position:absolute;top:0;display:block;opacity:0;transition:opacity 1.6s var(--ease);
  height:min(100%,100svh);aspect-ratio:var(--ar,1);left:var(--zx);transform:translateX(calc(var(--fx,.5) * -100%));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,#000 70%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,#000 70%,transparent);
  mask-composite:intersect}
.hps .hp-hero-bild.ist-an{opacity:1}
.hps .hp-hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 6s var(--ease)}
.hps.hp-js .hp-hero-bild.ist-an img{transform:scale(1)}
.hps .hp-hero-img::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(21,26,49,.5) 0%,rgba(21,26,49,.18) 30%,rgba(21,26,49,.06) 55%,rgba(21,26,49,.3) 100%),
    linear-gradient(180deg,rgba(21,26,49,.2) 0%,rgba(21,26,49,0) 25%,rgba(21,26,49,.6) 72%,rgba(21,26,49,.94) 86%);
}
/* Text und Ticket nebeneinander, solange beide Platz haben; sonst rutscht das Ticket unter den Text */
.hps .hp-hero-grid{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:clamp(21px,5cqw,89px);
  padding:clamp(109px,18svh,164px) 0 clamp(34px,6svh,55px);min-height:min(880px,94svh)}
.hps .hp-hero-txt{position:relative;flex:1 1 30rem;max-width:min(580px,44cqw)}
.hps .hp-hero-txt::before{content:"";position:absolute;z-index:-1;inset:-144px -144px -89px -50vw;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,26,49,.94) 0,rgba(21,26,49,.94) calc(100% - 420px),rgba(21,26,49,.82) calc(100% - 260px),rgba(21,26,49,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 144px);mask-image:linear-gradient(180deg,transparent 0,#000 144px)}
.hps .hp-hero h1{font-weight:300;color:var(--on-navy)}
.hps .hp-hero h1 .hp-lift{display:block;font-family:var(--dsp);font-weight:600;font-size:clamp(26px,2.2cqw + 17px,42px);line-height:1.04;letter-spacing:-.02em;color:var(--gold);margin-top:13px}
.hps .hp-hero .hp-antwort{margin-top:21px;font-size:clamp(16px,3.4svh - 2px,21px);font-weight:500;color:var(--on-navy);line-height:1.45;max-width:40ch;text-wrap:pretty}
.hps .hp-hero .hp-antwort b{color:var(--on-navy)}
.hps .hp-hero .hp-lede{margin-top:13px;font-size:clamp(14px,2.6svh - 1px,16px);color:var(--on-navy-soft);max-width:48ch}
.hps .hp-hero-ctas{display:flex;flex-wrap:wrap;gap:clamp(8px,1cqw,13px);margin-top:clamp(21px,4svh,34px)}
.hps .hp-ticket{flex:0 1 22rem;min-width:min(100%,320px);max-width:min(100%,420px)}
.hps .hp-ticket .hp-core{padding:21px}
.hps .hp-tk-kick{display:block;font-size:13px;font-weight:600;color:var(--on-navy);margin-bottom:8px}
.hps .hp-tk-row{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;border-top:1px solid rgba(237,238,244,.14);padding:13px 0}
.hps .hp-tk-row .hp-num{display:block;font-family:var(--txt);font-size:26px;line-height:1;color:var(--on-navy);min-width:2.1ch}
.hps .hp-tk-row small{display:block;font-size:13px;font-weight:600;color:var(--on-navy)}
.hps .hp-tk-row span{display:block;margin-top:3px;font-size:13px;color:var(--on-navy-soft)}
.hps .hp-tk-foot{margin-top:3px;padding-top:13px;border-top:1px solid rgba(237,238,244,.14);font-size:13px;color:var(--on-navy-soft);line-height:1.5}
.hps .hp-tk-foot b{color:var(--on-navy)}
/* Kennzahlen-Band: vier Spalten, wenn der Inhalt breiter als 1000px ist, sonst zwei (nie drei,
   nie ueber die Mitte); die Trennlinie am Zeilenanfang liegt ausserhalb und wird abgeschnitten */
.hps .hp-facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(25%,(1000px - 100%) * 999,50%),1fr));border-top:1px solid rgba(237,238,244,.16);padding-bottom:34px;overflow:hidden}
.hps .hp-fact{padding:21px 8px 8px clamp(13px,1.5cqw,21px);margin-left:-1px;border-left:1px solid rgba(237,238,244,.12)}
.hps .hp-fact .hp-num{display:block;font-family:var(--dsp);font-weight:600;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--gold)}
.hps .hp-fact .hp-num small{font-family:var(--txt);font-weight:500;font-size:13px;letter-spacing:0;color:var(--on-navy-soft);margin-right:8px}
.hps .hp-fact b{display:block;font-weight:500;color:var(--on-navy-soft);font-size:13px;margin-top:8px;line-height:1.4}
/* Schmal (Text und Gesicht passen nicht mehr nebeneinander): das Gesicht als Band oben,
   darunter die Platte mit dem Text. Das Bild liegt in voller Breite in seinem eigenen
   Seitenverhaeltnis, so hoch geschoben, dass das Gesicht bei --hb-t steht. */
@container hps (width < 900px){
  .hps .hp-hero-grid{display:grid;grid-template-columns:1fr;align-items:start;padding:calc(var(--hb-t) + 100px) 0 34px;min-height:0;gap:34px}
  .hps .hp-hero-img{inset:0 0 auto 0;height:calc(var(--hb-t) + 400px)}
  .hps .hp-hero-bild{left:0;width:100%;height:calc(100cqw / var(--ar,1));aspect-ratio:auto;transform:none;
    top:min(80px, var(--hb-t) - var(--fy,.25) * 100cqw / var(--ar,1));-webkit-mask-image:none;mask-image:none}
  .hps .hp-hero-img::after{background:linear-gradient(180deg,rgba(21,26,49,.2) 0%,rgba(21,26,49,0) 20%,rgba(21,26,49,.2) 45%,rgba(21,26,49,.9) 100%)}
  .hps .hp-hero-txt{max-width:none;margin-top:21px}
  .hps .hp-hero-txt::before{inset:-89px -50vw -89px -50vw;background:rgba(21,26,49,.94);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 89px,#000 calc(100% - 89px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 89px,#000 calc(100% - 89px),transparent 100%)}
  .hps .hp-ticket{max-width:520px}
}
/* Text, Gesicht und Ticket passen nicht nebeneinander: das Ticket rutscht unter den Text,
   das Gesicht steht mitten in der freien Flaeche rechts */
@container hps (900px <= width < 1100px){
  .hps .hp-hero{--zx:calc(50cqw + 230px)}
  .hps .hp-ticket{flex-basis:100%}
}
/* Bricolage nur ab 32px: wird der zweite Titelsatz kleiner, traegt ihn Jakarta */
@container hps (width < 680px){
  .hps .hp-hero h1 .hp-lift{font-family:var(--txt);line-height:1.18;letter-spacing:-.01em;margin-top:8px}
}

/* ---------- Sektionen ---------- */
.hps section{padding:clamp(96px,12vh,168px) 0}
.hps .hp-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6cqw,104px);align-items:start}
.hps .hp-split-head{position:sticky;top:110px}
.hps .hp-split-head .hp-eyebrow{margin-bottom:22px}
.hps .hp-split-head .hp-lede{margin-top:22px;font-size:18px}
.hps .hp-sec-head{max-width:720px}
.hps .hp-sec-head .hp-eyebrow{margin-bottom:22px}
.hps .hp-sec-head .hp-lede{margin-top:22px;font-size:18px}
@container hps (width <= 900px){.hps .hp-split{grid-template-columns:1fr;gap:40px}.hps .hp-split-head{position:static}}

/* Stimmen: sechs Saetze als Zeilen mit Herkunft */
.hps .hp-stimmen{background:var(--paper);color:var(--body)}
.hps .hp-stimmen h2{color:var(--ink)}
.hps .hp-satz{display:grid;grid-template-columns:1fr 130px;gap:24px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line-paper)}
.hps .hp-satz:last-of-type{border-bottom:1px solid var(--line-paper)}
.hps .hp-satz p{font-size:clamp(19px,1.6cqw,22px);font-weight:500;color:var(--ink);line-height:1.4;text-wrap:pretty}
.hps .hp-satz span{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-paper);text-align:right}
.hps .hp-stimmen-cta{margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hps .hp-stimmen-cta .hp-note{margin:0}
@container hps (width <= 640px){.hps .hp-satz{grid-template-columns:1fr;gap:6px}.hps .hp-satz span{text-align:left}}

/* Catherine: ein Satz, sonst nichts */
.hps .hp-funke{background:var(--navy);color:var(--on-navy-soft);position:relative;overflow:hidden}
.hps .hp-funke::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 500px at 0% 0%,rgba(228,181,106,.1),transparent 60%)}
.hps .hp-funke .hp-wrap{position:relative}
.hps .hp-quote{font-size:clamp(30px,3.8cqw,56px);line-height:1.1;letter-spacing:-.02em;color:var(--on-navy);max-width:22ch;margin-top:22px}
.hps .hp-quote b{display:block;color:var(--gold);font-weight:600;margin-top:.2em}
.hps .hp-fschluss{margin-top:24px;font-size:21px;font-weight:500;color:var(--on-navy)}
.hps .hp-cite{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hps .hp-cite span{display:block;margin-top:6px;font-weight:500;letter-spacing:0;text-transform:none;font-size:14px;color:var(--on-navy-soft)}

/* Warum / Wo: zwei Fragen als Zeitachse, Grafik in der Karte */
.hps .hp-wo{background:var(--stone);color:var(--body)}
.hps .hp-wo h2{color:var(--ink)}
.hps .hp-fragen{position:relative;padding-left:34px}
.hps .hp-fragen::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--line-paper)}
.hps .hp-frage{position:relative;padding:6px 0 44px}
.hps .hp-frage::before{content:"";position:absolute;left:-34px;top:14px;width:11px;height:11px;border-radius:50%;background:var(--stone);border:1.5px solid var(--gold-paper)}
.hps .hp-frage.hp-hot::before{background:var(--gold-paper)}
.hps .hp-frage small{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-paper)}
.hps .hp-frage b{display:block;margin-top:10px;font-family:var(--dsp);font-size:clamp(28px,3cqw,38px);font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:-.02em}
.hps .hp-frage p{margin-top:12px;max-width:50ch}
.hps .hp-card .hp-core{padding:clamp(24px,3cqw,36px)}
.hps .hp-card .fmviz{margin:0}
.hps .hp-card .fmviz svg{width:100%;max-width:360px;height:auto;display:block}
.hps .hp-card-cap{margin-top:18px;font-size:15px;color:var(--on-navy-soft);max-width:40ch}
.hps .hp-card-cap b{color:var(--on-navy)}

/* Session-Mechanik: Koordinaten und die fuenf Moves in der Karte */
.hps .hp-mech{background:var(--paper);color:var(--body)}
.hps .hp-mech h2{color:var(--ink)}
.hps .hp-koor{padding:18px 0;border-top:1px solid rgba(237,238,244,.14)}
.hps .hp-koor:first-child{border-top:0;padding-top:0}
.hps .hp-kl{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hps .hp-kw{margin-top:8px;font-family:var(--dsp);font-size:clamp(28px,3cqw,36px);font-weight:600;color:var(--on-navy);line-height:1.05;letter-spacing:-.02em}
.hps .hp-ks{margin-top:6px;font-size:14.5px;color:var(--on-navy-soft)}
.hps .hp-moves{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:20px 0;border-top:1px solid rgba(237,238,244,.14)}
.hps .hp-move{display:flex;flex-direction:column;gap:8px;padding:12px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(237,238,244,.1)}
.hps .hp-move .hp-num{font-size:22px;line-height:1;color:var(--gold)}
.hps .hp-move span{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy)}
@container hps (width <= 520px){.hps .hp-moves{grid-template-columns:repeat(3,1fr)}}

/* Tueren: zwei Bildkarten mit Preiszeilen */
.hps .hp-doors{background:var(--navy);color:var(--on-navy-soft);position:relative;overflow:hidden}
.hps .hp-doors::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 600px at 100% 0%,rgba(228,181,106,.1),transparent 60%)}
.hps .hp-doors .hp-wrap{position:relative}
.hps .hp-doors h2{color:var(--on-navy)}
.hps .hp-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3cqw,40px);margin-top:clamp(40px,5cqw,64px)}
.hps .hp-door .hp-core{display:flex;flex-direction:column}
.hps .hp-dimg{position:relative;aspect-ratio:16/9;overflow:hidden}
.hps .hp-dimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hps .hp-door:hover .hp-dimg img{transform:scale(1.03)}
/* 29.10.: unter Kopfzeile und Titel der Karte deckt der Verlauf so dicht, dass auch die kleine
   Goldzeile auf hellem Bild 4.5:1 hat */
.hps .hp-dimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,26,49,.05) 25%,rgba(21,26,49,.9) 66%,rgba(21,26,49,.94) 100%)}
.hps .hp-dkopf{position:absolute;left:24px;right:24px;bottom:20px;z-index:1}
.hps .hp-dkopf span{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.hps .hp-dkopf b{display:block;font-family:var(--dsp);font-size:clamp(26px,2.6cqw,34px);font-weight:600;color:var(--on-navy);line-height:1.05;letter-spacing:-.02em}
.hps .hp-dtext{padding:22px 24px 8px}
.hps .hp-dtext p{font-size:15px;color:var(--on-navy-soft);max-width:48ch}
.hps .hp-dzeile{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:16px 24px;border-top:1px solid rgba(237,238,244,.12);transition:background .5s var(--ease)}
.hps .hp-dzeile:hover{background:rgba(255,255,255,.04)}
.hps .hp-dzeile b{display:block;font-size:16px;color:var(--on-navy)}
.hps .hp-dzeile small{display:block;margin-top:3px;font-size:13px;color:var(--on-navy-soft);line-height:1.5}
.hps .hp-dzeile .hp-preis{font-size:15px;font-weight:600;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.hps .hp-pill{display:inline-block;margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(228,181,106,.45);border-radius:999px;padding:3px 8px;vertical-align:middle}
.hps .hp-laender{margin-top:28px;font-size:14px;color:var(--on-navy-soft)}
@container hps (width <= 820px){.hps .hp-dgrid{grid-template-columns:1fr}}

/* Ausbildung: Mexico-Karte links, weitere Orte rechts */
.hps .hp-lernen{background:var(--paper);color:var(--body)}
.hps .hp-lernen h2{color:var(--ink)}
.hps .hp-lgrid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5cqw,80px);align-items:start;margin-top:clamp(40px,5cqw,64px)}
.hps .hp-mxcard{display:block}
.hps .hp-mxcard>.hp-core{display:flex;flex-direction:column;background:var(--navy);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 40px 70px -40px rgba(21,26,49,.5)}
.hps .hp-mximg{display:block;aspect-ratio:16/10;overflow:hidden}
.hps .hp-mximg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transition:transform 1.4s var(--ease)}
.hps .hp-mxcard:hover .hp-mximg img{transform:scale(1.03)}
.hps .hp-mxtxt{display:block;padding:22px 24px 24px}
.hps .hp-kl{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.hps .hp-mxort{display:block;margin-top:10px;font-family:var(--dsp);font-size:clamp(30px,3cqw,40px);font-weight:600;color:var(--on-navy);line-height:1.05;letter-spacing:-.02em}
.hps .hp-mxinfo{display:block;margin-top:8px;font-size:14.5px;color:var(--on-navy-soft);line-height:1.5}
.hps .hp-mxfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(237,238,244,.14);font-size:15px;font-weight:600;color:var(--gold)}
.hps .hp-mxfoot .hp-arr{background:transparent;border:1px solid rgba(237,238,244,.32);color:var(--on-navy);width:30px;height:30px}
.hps .hp-mxcard:hover .hp-mxfoot .hp-arr{transform:translate(2px,-1px);border-color:var(--on-navy)}
.hps .hp-tafelkopf{display:flex;justify-content:space-between;gap:16px;padding:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-paper)}
.hps .hp-tafelkopf.hp-zweit{margin-top:40px}
.hps .hp-lz{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line-paper)}
.hps .hp-lz:last-of-type{border-bottom:1px solid var(--line-paper)}
.hps .hp-lzt b{display:block;font-size:19px;font-weight:600;color:var(--ink);line-height:1.3}
.hps .hp-lzt small{display:block;margin-top:3px;font-size:14.5px;color:var(--body)}
.hps .hp-lz .hp-status{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.hps a.hp-lz{transition:background .5s var(--ease)}
.hps a.hp-lz .hp-status{color:var(--magenta)}
.hps a.hp-lz:hover{background:rgba(21,26,49,.03)}
@container hps (width <= 900px){.hps .hp-lgrid{grid-template-columns:1fr;gap:36px}.hps .hp-mxcard{max-width:560px}}
@container hps (width <= 520px){.hps .hp-lz{grid-template-columns:1fr;gap:4px}.hps .hp-lz .hp-status{white-space:normal}}

/* App: Telefon im Rahmen, Fakten als Zahlen, Stores */
.hps .hp-app{background:var(--stone);color:var(--body)}
.hps .hp-app h2{color:var(--ink)}
.hps .hp-app .hp-lede{color:var(--body)}
.hps .hp-zahlen{display:flex;flex-direction:column;margin-top:36px}
.hps .hp-zahl{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-paper)}
.hps .hp-zahl:last-child{border-bottom:1px solid var(--line-paper)}
.hps .hp-zahl .hp-num{font-size:clamp(44px,5cqw,72px);line-height:.95;color:var(--ink);min-width:2.2ch}
.hps .hp-zahl .hp-num small{font-size:.38em;font-weight:600;color:var(--gold-paper);letter-spacing:0;margin-left:.1em}
.hps .hp-zahl span{font-size:15.5px}
.hps .hp-appstage{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:clamp(24px,4cqw,48px);align-items:center}
.hps .hp-stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hps .hp-store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 22px 10px 16px;border-radius:999px;background:var(--navy);color:var(--on-navy);transition:transform .5s var(--ease),background .5s var(--ease)}
.hps .hp-store svg{width:22px;height:22px;fill:var(--on-navy);flex:0 0 auto}
.hps .hp-store .hp-si{display:flex;flex-direction:column;line-height:1.2}
.hps .hp-store .hp-s{font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--on-navy-soft)}
.hps .hp-store .hp-b{font-size:15.5px;font-weight:600}
.hps .hp-store:hover{transform:translateY(-1px);background:var(--line-navy)}
.hps .hp-applink{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-weight:600;color:var(--ink);min-height:44px}
.hps .hp-applink .hp-arr{width:30px;height:30px;border:1px solid var(--line-paper);background:transparent}
.hps .hp-applink:hover .hp-arr{transform:translate(2px,-1px);border-color:var(--ink)}
@container hps (width <= 640px){.hps .hp-appstage{grid-template-columns:1fr}.hps .hp-appstage .hp-phone{max-width:260px}}

/* Mission + Fragen */
.hps .hp-schluss{background:var(--paper);color:var(--body)}
.hps .hp-schluss h2{color:var(--ink)}
.hps .hp-schluss h2 span{display:block;color:var(--gold-paper)}
.hps .hp-text{margin-top:22px;font-size:17px;max-width:50ch}
.hps .hp-text+.hp-text{margin-top:14px}
.hps .hp-andy{margin-top:36px;max-width:520px}
.hps .hp-andy .hp-core{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:14px;align-items:center}
.hps .hp-andy img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 15%;border-radius:16px}
.hps .hp-andy b{display:block;font-size:17px;color:var(--on-navy)}
.hps .hp-andy small{display:block;font-size:12px;color:var(--on-navy-soft);margin-top:2px}
.hps .hp-andy p{margin-top:10px;font-size:14px;color:var(--on-navy-soft);line-height:1.55}
.hps .hp-andy .hp-btn{margin-top:14px;min-height:46px;padding:9px 9px 9px 20px;font-size:14.5px}
.hps .hp-andy .hp-btn .hp-arr{width:28px;height:28px}
.hps .hp-faq-list{display:flex;flex-direction:column}
.hps details{border-top:1px solid var(--line-paper)}
.hps details:last-child{border-bottom:1px solid var(--line-paper)}
.hps summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-weight:600;font-size:17.5px;color:var(--ink);line-height:1.4}
.hps summary::-webkit-details-marker{display:none}
.hps summary .hp-ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-paper);position:relative;transition:transform .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.hps summary .hp-ico::before,.hps summary .hp-ico::after{content:"";position:absolute;top:50%;left:50%;background:var(--ink);transform:translate(-50%,-50%)}
.hps summary .hp-ico::before{width:12px;height:1.5px}
.hps summary .hp-ico::after{width:1.5px;height:12px}
.hps summary:hover .hp-ico{border-color:var(--ink)}
.hps details[open] summary .hp-ico{transform:rotate(45deg);background:var(--stone)}
.hps details p{padding:0 58px 24px 0;max-width:64ch;font-size:16px}
@container hps (width <= 520px){.hps .hp-andy .hp-core{grid-template-columns:1fr}.hps .hp-andy img{max-width:160px}}
/* ── Academy-Zeile unter den Orten (05.09.): Telefon links, Text rechts, zwei Wege ── */
.hps .hp-acad{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,4cqw,56px);align-items:center;margin-top:clamp(44px,6vh,72px);padding-top:clamp(36px,5vh,56px);border-top:1px solid var(--line-paper)}
.hps .hp-acad-phone{padding:7px;border-radius:32px;background:rgba(21,26,49,.06);border:1px solid rgba(21,26,49,.08);box-shadow:0 40px 80px -40px rgba(21,26,49,.45)}
.hps .hp-acad-phone img{display:block;width:100%;height:auto;border-radius:25px;box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.hps .hp-acad-txt h3{font-family:var(--txt);font-weight:600;font-size:clamp(24px,2.6cqw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:14px 0 0}
.hps .hp-acad-txt p{margin:18px 0 0;font-size:16.5px;line-height:1.75;color:var(--body);max-width:56ch}
.hps .hp-acad-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:28px}
.hps .hp-acad-ghost{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(21,26,49,.25);padding-bottom:2px}
.hps .hp-acad-ghost:hover{border-bottom-color:var(--ink)}
@container hps (width <= 820px){ .hps .hp-acad{grid-template-columns:1fr;gap:28px} .hps .hp-acad-phone{max-width:240px;margin:0 auto} }

/* Sprachlinks DE/EN in der Kopfleiste (29.10., Kontrast liefern): nav.twig setzt Deckkraft .45 = 4.38:1;
   auf der Startseite .55 (≥ 4.5:1). Gilt nur hier, weil die Kopfleiste auf allen Seiten steckt;
   global in nav.twig ist offen. */
html .fm-lang-link:not(.active):not(:hover){color:rgba(255,253,248,.55)!important}