/* ─────────────────────────────────────────────────────────────
   hppyppl Design System · Bold Utility / Neon Pop
   Geteilte Basis aller Landingpages: Tokens, Grundlagen, Kopf,
   Kontaktbox, Fuss.

   Ersetzt "soft.fact v4.0 · Meridian Light". Die Tokennamen sind
   bewusst dieselben geblieben — canvas.css und die vier Tools
   greifen darauf zu, ohne dass dort eine Zeile geaendert werden
   muss. Nur die Werte sind neu: warmes Off-White als Flaeche,
   fast-schwarze Schrift, drei Neons als Signal.

   Reihenfolge zaehlt: dieses Blatt wird VOR dem <style> der Seite
   geladen, ein Tool kann also bei gleicher Spezifitaet
   ueberschreiben.

   Zwischenspeicher: nginx gibt allen .css und Bildern ein Jahr
   "immutable" mit (nginx.conf). Der Dateiname bleibt gleich,
   deshalb haengt an jedem <link> ein ?v= — diese Zahl bei jeder
   Aenderung hier hochzaehlen (dieser Umbau: ?v=2), sonst sehen
   wiederkehrende Besucher die alte Fassung.
   ───────────────────────────────────────────────────────────── */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");

:root {
  /* ── Die vier Hauptfarben ─────────────────────────────────────
     1:1 aus dem Markenhandbuch (hppyppl_manual_rz.pdf, S. 11).
     Nicht nach Gefuehl anpassen — die Werte sind dort mit CMYK,
     RGB, Hex UND Pantone festgeschrieben:

       HPPYPPL TURQUOISE  #67D5DA  PANTONE 637 U
       BRIGHT YELLOW      #E1FF3C  PANTONE 923 U
       CORNFLOWER BLUE    #0084FF  PANTONE 300 U
       SIGNAL PINK        #FE72E5  PANTONE 907 U
       BACKGROUND GREY    #F4F2F0

     Die -50 und -100 sind die im Handbuch vorgeschriebenen
     Abstufungen in 20er-Stufen (20 % und 40 % Farbe auf Weiss).
     Die -dark/-deep sind KEINE Handbuchwerte: gedeckte Stufen
     Richtung Ink, noetig fuer Hover und fuer Text, der auf Weiss
     lesbar sein muss. Jeder dieser Werte ist auf 4,5:1 gerechnet.

     Kontraste der Hauptfarben gegen Weiss: Blau 3,66:1,
     Pink 2,40:1, Tuerkis 1,73:1, Gelb 1,13:1. Keine davon traegt
     dunkle Schrift auf Weiss — und keine traegt weisse Schrift.
     Auf allen vier steht Ink. */
  --kobalt: #0084FF; --kobalt-dark: #0374DC; --kobalt-50: #CCE6FF; --kobalt-100: #99CEFF;
  /* Zwei tiefere Stufen fuer Text: -tief traegt Links (4,5:1 auf Weiss
     UND auf Background Grey), -dunkler den Hover. */
  --kobalt-tief: #0763B9; --kobalt-dunkler: #0A5396;
  --chartreuse: #E1FF3C; --chartreuse-dark: #C3DC36; --chartreuse-50: #F9FFD8;
  --magenta: #FE72E5; --magenta-deep: #DB64C6; --magenta-50: #FFE3FA;
  --tuerkis: #67D5DA; --tuerkis-dark: #5BB8BD; --tuerkis-50: #E1F7F8;
  /* --muted war #8C8C8C und kam damit auf Weiss nur auf 3,36:1 — es
     traegt aber .label, .karte__rolle und .karte__hinweis, also echten
     Text. Der Wert muss auf ZWEI Gruenden bestehen: Weiss (Karten) und
     Background Grey (die Flaeche der Kontaktbox). #6E6E6E schafft
     5,10:1 bzw. 4,57:1 — das ist der hellste Ton, der beides packt.
     Nicht aufhellen. */
  --ink: #161616; --muted: #6E6E6E; --hairline: #ECECEC; --porcelain: #F4F2F0;

  /* ── Bruecke zu den bestehenden Klassen ───────────────────────
     Links der alte Name, rechts der Handbuchwert. Wer ein Tool
     aufraeumt, ersetzt die linke Spalte schrittweise durch die
     Namen oben; solange beide existieren, laeuft alles weiter.
     Die -deep-Werte tragen Text und sind darum abgedunkelt, bis
     sie auf ihrem Grund 4,5:1 erreichen — nicht heller setzen. */
  --ocean: #0084FF; --ocean-dark: #161616; --ocean-mid: #4B4B4B; --ocean-soft: #A6A6A6;
  --ocean-50: #CCE6FF;
  /* --teal-deep traegt Text auf ZWEI Gruenden: Weiss (Kacheln) und
     --teal-mist (Gruppenkarten). 45 % Richtung Ink reichten nur auf
     Weiss (4,57) und fielen auf dem Mist durch (4,10) — 50 % schafft
     beides (5,16 und 4,64). */
  --teal: #67D5DA; --teal-deep: #3E7678; --teal-soft: #C2EEF0; --teal-mist: #E1F7F8;
  --rose: #FE72E5; --rose-deep: #964988; --rose-soft: #FFC7F5; --rose-mist: #FFE3FA;
  --coral: #E1FF3C; --coral-deep: #677325; --coral-soft: #EDFF8A;
  --sunset: #E1FF3C; --sunset-soft: #EDFF8A; --sunset-mist: #F9FFD8;
  /* --forest traegt Gruppentitel (kleine Schrift), --forest-soft deren
     Flaeche. Die Flaeche lag auf dem 40%-Tint und war damit dunkler als
     die uebrigen Gruppenfarben, die alle auf 20 % stehen — jetzt
     einheitlich 20 %, und der Titel tief genug fuer 4,67:1. */
  --forest: #0763B9; --forest-mid: #0374DC; --forest-soft: #CCE6FF;
  --lavender: #FE72E5; --lavender-deep: #0763B9; --lavender-dark: #161616;
  --lavender-soft: #FFC7F5; --lavender-mist: #FFE3FA;
  --cream: #F4F2F0; --cream-soft: #FFFFFF; --cream-dark: #ECECEC;
  --pearl: #C9C9C9; --graphite: #161616; --graphite-soft: #6E6E6E;
  --charcoal: #161616; --white: #ffffff;

  /* Eine Familie fuer alles. --fm hiess "Mono" und trug die
     getrackten Labels — die Rolle bleibt, nur ohne Monospace:
     Labels sind jetzt Satoshi Bold, uppercase, 0.12em. */
  --fh: 'Satoshi', system-ui, sans-serif;
  --fb: 'Satoshi', system-ui, sans-serif;
  --fm: 'Satoshi', system-ui, sans-serif;

  --r-pill: 9999px; --r-card: 16px; --r-input: 11px;
  --schatten: 0 1px 2px rgba(0, 0, 0, .04);
  --tempo: 150ms cubic-bezier(.2, .6, .3, 1);
}

/* ── GRUNDLAGEN ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--porcelain);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

/* Links tragen nicht das reine Markenblau: als Fliesstext brauchen sie
   4,5:1, und #0084FF kommt auf Weiss nur auf 3,66:1 und auf dem
   Background Grey auf 3,27:1. --kobalt-tief schafft beides (6,01:1 und
   5,38:1). Auf farbigen Flaechen — Hero, Fuss — setzen die dortigen
   Regeln eine eigene Farbe, die gilt dann vor dieser hier. */
a { color: var(--kobalt-tief); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kobalt-dunkler); }

/* Fokus nach Systemvorgabe: Kobaltrand plus weicher Kobaltring. */
:focus-visible {
  outline: none;
  border-color: var(--kobalt);
  box-shadow: 0 0 0 3px rgba(11, 91, 255, .22);
  border-radius: 6px;
}
/* Auswertungen werden programmatisch fokussiert (Screenreader) —
   sichtbar umrandet werden sollen sie dabei nicht. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
/* Das hidden-Attribut wirkt nur ueber die UA-Regel [hidden]{display:none},
   und die verliert gegen jede eigene display-Angabe. */
[hidden] { display: none !important; }

/* Das Signaturelement des Systems: getracktes Label in Grau.
   Steht ueber Bloecken, an Karten und in der Fusszeile. */
.label {
  font-family: var(--fm); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* Steht ausschliesslich im Hero, also auf dem Markenblau. Ink statt
   Weiss: 12px Bold zaehlt nicht als grosse Schrift und braucht die
   vollen 4,5:1 — Weiss kaeme auf 3,66:1. */
.label--hell { color: var(--ink); }
.zahl { color: var(--kobalt); font-weight: 700; }

/* ── HERO ───────────────────────────────────────────────────────
   Volle Flaeche in Cornflower Blue, keine Verlaeufe, kein Bild —
   der Farbblock macht die Arbeit, die sonst ein Headerfoto macht.

   Zur Schriftfarbe, das ist hier der heikle Punkt: Weiss auf dem
   Markenblau #0084FF ergibt nur 3,66:1. Das reicht fuer die H1
   (ab 24px gilt 3,0:1), NICHT fuer den Absatz darunter mit 16-18px,
   der 4,5:1 braucht. Deshalb traegt die Flaeche zwei Schriftfarben:
   die Ueberschrift Weiss, Label und Absatz Ink (#161616, 4,95:1).

   Die naheliegende Abkuerzung waere, das Blau abzudunkeln — genau
   das war vorher passiert (#0B5BFF, 5,31:1 mit Weiss). Bequem, aber
   es ist dann nicht mehr die Markenfarbe. Das Handbuch schreibt
   #0084FF fest, also bleibt das Blau und der Text weicht aus.
   hppyppl.de selbst setzt hier durchgehend Weiss und liegt damit
   beim Absatz unter der Schwelle; das uebernehmen wir nicht. */
.hero {
  background: var(--kobalt);
  color: var(--ink);
  padding: 44px 32px 56px;
  position: relative;
  overflow: hidden;
}
.hero__inner {
  max-width: 900px; margin: 0 auto; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 40px;
}
/* Beide Haende wachsen aus der Unterkante, freigestellt auf der
   Kobaltflaeche: soft.fact links, hppyppl rechts. Erst ab 1400px
   eingeblendet — der Textblock ist 900px breit, bei 1200px liefe die
   linke Hand in die Ueberschrift. Das einzige Bildwerk im System;
   es ist Markenzeichen der Kooperation, kein Schmuck. */
.hero__hand {
  display: none;
  position: absolute; bottom: 0; z-index: 0;
  height: 62%; width: auto;
  pointer-events: none; user-select: none;
}
.hero__hand--left  { left: 2.5%; bottom: -5px; }
.hero__hand--right { right: 2.5%; }
@media (min-width: 1400px) {
  .hero__hand { display: block; }
}

.lockup { display: flex; align-items: center; gap: 18px; }
.lockup img { display: block; width: auto; }
.lockup__sf { height: 22px; }
/* hppyppl traegt Linien ober- und unterhalb der Schrift, die
   Wortmarke faellt dadurch kleiner aus — etwas mehr Hoehe
   gleicht das optisch aus. */
.lockup__hp { height: 26px; }
.lockup__x { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .55); line-height: 1; }

/* Das Einzige, was sich je Tool unterscheidet: der Text hier drin. */
.hero__copy { display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.hero h1 {
  font-family: var(--fh); font-size: clamp(34px, 5.4vw, 64px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05; color: #fff;
  max-width: 20ch; text-wrap: balance;
}
/* Ink, nicht Weiss: 16-18px brauchen 4,5:1, Weiss auf #0084FF gibt
   nur 3,66:1. Die H1 darueber darf Weiss bleiben, sie ist gross
   genug (ab 24px gilt 3,0:1). */
.hero p {
  font-size: clamp(16px, 2vw, 18px); line-height: 1.6;
  color: var(--ink); max-width: 58ch; text-wrap: pretty;
}

/* ── BUTTONS ────────────────────────────────────────────────────
   Uppercase, Bold, 0.08em, Pille. Primaer ist Chartreuse mit
   fast-schwarzer Schrift; Kobalt bleibt fuer sekundaere,
   ruhigere Wege. Hover verdunkelt die Flaeche um 6 %,
   Druck skaliert auf .97 — kein Hochspringen. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); border: none; cursor: pointer;
  font-family: var(--fb); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 15px 30px; text-decoration: none;
  background: var(--chartreuse); color: var(--ink);
  transition: filter var(--tempo), transform var(--tempo), border-color var(--tempo);
}
.btn:hover { filter: brightness(.94); color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.btn--ghost {
  background: transparent; border: 1.5px solid var(--hairline); color: var(--ink);
  padding: 13.5px 26px;
}
.btn--ghost:hover { border-color: var(--ink); filter: none; }
/* Die alten Farbvarianten bleiben als Namen bestehen: --coral war
   die Handlungsfarbe (jetzt Chartreuse), --lav die ruhige
   Alternative (jetzt Kobalt). */
.btn--coral { background: var(--chartreuse); color: var(--ink); }
.btn--lav { background: var(--kobalt); color: #fff; }
.btn--lav:hover { color: #fff; }
.btn--ghost-light {
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .38); color: #fff;
}
.btn--ghost-light:hover { border-color: #fff; color: #fff; }
.btn--klein { padding: 10px 18px; font-size: 12px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── KONTAKTBOX ─────────────────────────────────────────────────
   Steht auf jeder Zielseite direkt ueber dem Fuss: links
   soft.fact (Urs), rechts hppyppl (Jelena). Zwei weisse Karten
   auf Off-White, je ein Portrait im Medaillon, kurze Zeile,
   Themen, ein Chartreuse-Knopf.

   Die Trennung der beiden Seiten laeuft ueber Kobalt links und
   Magenta rechts — Ring, Marker und Badge. Die Knoepfe bleiben
   beide Chartreuse: es sind zwei gleichwertige Wege, keine
   Haupt- und Nebenhandlung. */
.kontakt-wrap { background: var(--porcelain); }
.kontakt {
  max-width: 1180px; margin: 0 auto; padding: 72px 32px 80px;
  display: flex; flex-direction: column; gap: 28px;
}
.kontakt__kopf { display: flex; flex-direction: column; gap: 10px; }
.kontakt__kopf h2 {
  font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.08; max-width: 24ch; text-wrap: balance;
}
.kontakt__paar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px;
}

.karte {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 28px;
}
/* Der einzige Farbtraeger der Karte: eine 4px-Kante oben.
   Kein zweiter Schatten, kein Verlauf. */
.karte--kobalt { box-shadow: inset 0 4px 0 0 var(--kobalt); }
.karte--magenta { box-shadow: inset 0 4px 0 0 var(--magenta); }

.karte__kopf { display: flex; align-items: center; gap: 18px; }
/* Medaillon: quadratischer Ausschnitt, kreisrund maskiert, mit
   2px Ring in der Kartenfarbe. object-position hebt das Gesicht
   in die Mitte des Kreises. */
.karte__portrait {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  object-fit: cover; object-position: 50% 22%;
  background: var(--porcelain);
}
.karte--kobalt .karte__portrait { box-shadow: 0 0 0 2px var(--kobalt); }
.karte--magenta .karte__portrait { box-shadow: 0 0 0 2px var(--magenta); }
.karte__wer { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.karte__marke { height: 20px; width: auto; align-self: flex-start; }
.karte__marke--hp { height: 22px; }
.karte__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.karte__rolle { font-size: 14px; color: var(--muted); }

.karte h3 {
  font-family: var(--fh); font-size: clamp(21px, 2.2vw, 26px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance;
}
.karte__themen { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.karte__themen li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px;
  align-items: start;
  font-size: 15px; line-height: 1.45; color: var(--ink); text-wrap: pretty;
}
/* Marker als Quadrat, nicht als Punkt — die Kanten des Systems
   sind gerade, rund ist den Pillen vorbehalten. */
.karte__themen li::before {
  content: ""; width: 10px; height: 10px; margin-top: .45em; border-radius: 2px;
}
.karte--kobalt .karte__themen li::before { background: var(--kobalt); }
.karte--magenta .karte__themen li::before { background: var(--magenta); }
/* Der Knopf sitzt unten, auch wenn die Nachbarkarte laenger ist. */
.karte__fuss { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.karte__hinweis { font-size: 14px; color: var(--muted); }
.karte__fuss .btn { align-self: flex-start; }

/* ── FOOTER ───────────────────────────────────────────────────
   Fast-schwarzes Band ueber die volle Fensterbreite: Hintergrund
   sitzt am Wrapper, die Begrenzung auf 1180px nur am Inhalt.
   Kein border-radius: eine Ecke direkt am Fensterrand zu runden
   sieht nach abgeschnitten aus. */
.footer-wrap { background: var(--ink); }
.footer {
  max-width: 1180px; margin: 0 auto; padding: 44px 32px;
  display: flex; flex-direction: column; gap: 32px;
}
/* Raster statt space-between: sonst klebt die Spalte am rechten
   Rand und zwischen Marke und Tools klaffen ueber 600px. */
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start; gap: 48px;
}

.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__logos { display: flex; align-items: center; gap: 16px; }
.footer__mark { width: auto; display: block; }
.footer__mark--sf { height: 24px; }
.footer__mark--hp { height: 28px; }
.footer__x { font-size: 17px; line-height: 1; color: rgba(255, 255, 255, .45); }
.footer__coop { font-size: 15px; font-weight: 700; color: #fff; }

.footer__navtitle {
  font-family: var(--fm); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: 4px;
}
.footer__nav ul { list-style: none; display: flex; flex-direction: column; }
/* Padding statt gap: so wird die Zeile selbst zur Trefferflaeche.
   Mit reinem gap blieben 18px hohe Ziele. */
.footer__nav a {
  display: inline-block; padding: 12px 0;
  font-size: 15px; color: #fff; text-decoration: none;
  transition: color var(--tempo);
}
.footer__nav a:hover, .footer__legal a:hover { color: var(--chartreuse); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px;
}
.footer__kennung {
  font-family: var(--fm); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.footer__legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__legal a {
  /* 11px Polsterung statt 10px: darunter sind die Links 42px hoch
     und bleiben unter der 44px-Untergrenze fuer Touch-Ziele. */
  display: inline-block; padding: 11px 0;
  font-size: 15px; color: rgba(255, 255, 255, .72); text-decoration: none;
  transition: color var(--tempo);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .kontakt__paar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .hero { padding: 28px 22px 40px; }
  .hero__inner { gap: 28px; }
  .lockup { gap: 14px; }
  .kontakt { padding: 48px 22px 56px; }
  .karte { padding: 22px; }
  .karte__portrait { width: 76px; height: 76px; }
  /* Die Seitenluft steckt im .footer, nicht im Wrapper — 22px wie
     in .shell, damit der Inhalt buendig bleibt. */
  .footer { padding: 24px 22px; gap: 26px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer__bottom { align-items: flex-start; flex-direction: column; gap: 12px; padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── DRUCK / PDF ────────────────────────────────────────────────
   Nur Kopf, Kontaktbox und Fuss. Seitenformat, Grundschrift und
   die Liste dessen, was ein Tool im Druck versteckt, bleiben im
   jeweiligen Tool — das Assessment druckt quer, der Decision
   Tree hoch. */
@media print {
  html { scroll-behavior: auto; }
  body { background: #fff; }
  .hero { background: none; color: var(--ink); padding: 0 0 10pt; border-bottom: 1px solid var(--hairline); }
  .hero h1, .hero p { display: none; }
  .hero__hand { display: none !important; }
  .hero__inner { gap: 0; }
  /* Auf Papier braucht es die helle Fassung der Logos nicht. */
  .lockup { gap: 12px; }
  .lockup__sf { height: 18px; } .lockup__hp { height: 20px; }
  .lockup__x { color: var(--muted); }
  /* Die Kontaktbox ist ein Angebot zum Klicken — auf Papier
     nimmt sie nur eine Seite weg. */
  .kontakt-wrap { display: none !important; }
  /* Die dunkle Flaeche haengt am Wrapper und muss dort weg, sonst
     druckt der Fuss als schwarzer Balken. */
  .footer-wrap { background: none; padding: 10pt 0 0; }
  .footer { max-width: none; border-top: 1px solid var(--hairline); padding: 8pt 0 0; }
  .footer__mark, .footer__x, .footer__nav { display: none; }
  .footer__top { gap: 0; }
  .footer__bottom { border-top: none; padding-top: 8pt; }
  .footer__coop { color: var(--ink); font-size: 10pt; }
  .footer__kennung, .footer__legal a { color: var(--muted); font-size: 8pt; }
}