/* =========================================================
   HUNDO — Design System
   Longevity-Ökosystem mit ehrlicher Einordnung.
   Sprache: laut, hell, hochkontrastig. Sticker statt Schatten,
   harte Kanten statt weicher Radien, Übergrößen statt Zurückhaltung.
   Bewusst das Gegenteil von DEKADE (Papier), OKTAN (dunkel/technisch)
   und MORGEN (warm/rund).
   ========================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --weiss:   #FFFFFF;
  --knochen: #F4F3EF;
  --tinte:   #0A0A0B;
  --tinte-2: #3D3D42;
  --tinte-3: #66666E;
  --kante:   #0A0A0B;
  --linie:   #DCDCD6;

  --pink:    #FF2E63;   /* Signal, Marke — nur als FLÄCHE, Schrift darauf schwarz */
  --pink-t:  #C7244D;   /* Pink als Schriftfarbe — geprüft ≥4,5:1 */
  --pink-d:  #D4204D;
  --violett: #5B3DF5;
  --mint:    #00B87C;   /* geprüft */
  --gelb:    #FFD84D;   /* emerging */

  --breite: 1240px;
  --schmal: 760px;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--weiss); color: var(--tinte);
  font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* ===== Typografie: Übergrößen, sehr enge Laufweite ===== */
h1, h2, h3, h4 {
  font-weight: 600; line-height: 0.98; letter-spacing: -0.045em;
  text-transform: uppercase; text-wrap: balance;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 14 7 5;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(3rem, 11vw, 8.5rem); }
h2 { font-size: clamp(2.2rem, 6.5vw, 4.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.03em; }
h4 { font-size: 1rem; letter-spacing: -0.02em; }

p, li {
  color: var(--tinte-2); overflow-wrap: anywhere;
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 4 3; text-wrap: pretty;
}
p { max-width: 60ch; }
strong { font-weight: 600; color: var(--tinte); }
.gross { font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.4; max-width: 46ch; }
.mono { font-family: var(--mono); }

.label {
  display: inline-block; font-family: var(--mono);
  font-size: 0.745rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 2px solid var(--kante); padding: 5px 11px; background: var(--weiss);
  max-width: none;
}
.label.pink { background: var(--pink); color: var(--tinte); border-color: var(--kante); }
.label.hell { background: transparent; color: #fff; border-color: #fff; }

/* ===== Layout ===== */
.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.schmal { max-width: var(--schmal); }
section { padding: clamp(60px, 8vw, 118px) 0; }
.duenn { padding: clamp(34px, 4vw, 56px) 0; }

.fl-k { background: var(--knochen); }
.fl-d { background: var(--tinte); color: var(--weiss); }
.fl-d p, .fl-d li { color: #A6A6AE; }
.fl-d strong { color: #fff; }
.fl-p { background: var(--pink); color: var(--tinte); }
.fl-p p, .fl-p li { color: #2A0A14; }
.fl-p strong { color: var(--tinte); }

.raster { display: grid; gap: 18px; }
.raster > * { min-width: 0; }
.r2 { grid-template-columns: repeat(2, 1fr); }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r4 { grid-template-columns: repeat(4, 1fr); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.zwei > * { min-width: 0; }
.ob-s { margin-top: 12px; } .ob-m { margin-top: 24px; } .ob-l { margin-top: 48px; }

/* ===== Knöpfe: harte Kante, versetzter Vollschatten ===== */
.knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px; border: 2px solid var(--kante);
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--weiss); color: var(--tinte);
  box-shadow: 4px 4px 0 var(--kante);
  transition: transform .12s, box-shadow .12s;
}
.knopf:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--kante); }
.knopf-pink { background: var(--pink); color: var(--tinte); border-color: var(--kante); }
.knopf-schwarz { background: var(--tinte); color: var(--weiss); }
.knopf-hell { background: var(--weiss); border-color: var(--weiss); box-shadow: 4px 4px 0 rgba(255,255,255,.35); }
.knopf-hell:hover { box-shadow: 2px 2px 0 rgba(255,255,255,.35); }
.knopf-reihe { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Kopf ===== */
.kopf { position: sticky; top: 0; z-index: 80; background: var(--weiss); border-bottom: 2px solid var(--kante); }
.kopf-in { max-width: var(--breite); margin: 0 auto; padding: 11px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: flex; align-items: center; gap: 9px; flex: none; white-space: nowrap;
  font-weight: 600; font-size: 1.28rem; letter-spacing: -0.05em; text-transform: uppercase; }
.logo img { width: 30px; height: 30px; }
.kopf-nav { display: flex; gap: 20px; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.09em; text-transform: uppercase; }
.kopf-nav a { color: var(--tinte-2); }
.kopf-nav a:hover { color: var(--pink-t); }
.nav-schalter { display: none; font-size: 1.4rem; line-height: 1; padding: 4px 8px; }

/* ===== Laufband ===== */
.band { background: var(--tinte); color: var(--weiss); border-bottom: 2px solid var(--kante);
  overflow: hidden; padding: 9px 0; }
.band-in { display: flex; gap: 34px; white-space: nowrap; animation: lauf 34s linear infinite;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; }
.band-in span { flex: none; }
.band-in i { color: var(--pink); font-style: normal; }
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band-in { animation: none; } }

/* ===== Held ===== */
.held { padding: clamp(40px, 5vw, 74px) 0 clamp(46px, 6vw, 84px); position: relative; }
.held h1 { margin-top: 16px; }
.held h1 em { font-style: normal; color: var(--pink); }
.aufkleber {
  position: absolute; font-family: var(--mono); font-size: 0.735rem; letter-spacing: .1em;
  text-transform: uppercase; background: var(--gelb); border: 2px solid var(--kante);
  padding: 7px 12px; transform: rotate(-6deg); box-shadow: 3px 3px 0 var(--kante);
}

/* ===== Stack-Karten ===== */
.stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0;
  border: 2px solid var(--kante); border-right: none; border-bottom: none; margin-top: 42px; }
.stack { border-right: 2px solid var(--kante); border-bottom: 2px solid var(--kante); padding: 24px 22px;
  background: var(--weiss); transition: background .15s; }
.stack:hover { background: var(--knochen); }
.stack-n { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .14em; color: var(--tinte-3); }
.stack h3 { margin: 8px 0 10px; }
.stack p { font-size: 0.9rem; }
.stack-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.stack-liste li { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .05em;
  border: 1.5px solid var(--linie); padding: 4px 8px; color: var(--tinte-2); }

/* ===== Evidenz-Marken ===== */
.ev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 0.735rem; letter-spacing: .1em; text-transform: uppercase;
  border: 2px solid var(--kante); padding: 3px 8px; white-space: nowrap; }
.ev.checked  { background: var(--mint);   color: var(--tinte); border-color: var(--kante); }
.ev.emerging { background: var(--gelb);   color: var(--tinte); border-color: var(--gelb); }
.ev.hype     { background: var(--pink);   color: var(--tinte); border-color: var(--kante); }
.ev.nope     { background: var(--tinte);  color: #fff; }

/* ===== Evidenztafel ===== */
.tafel { margin-top: 42px; border: 2px solid var(--kante); }
.tafel-z { display: grid; grid-template-columns: 150px 1fr; gap: 26px; padding: 22px 24px;
  border-bottom: 2px solid var(--kante); }
.tafel-z:last-child { border-bottom: none; }
.tafel-l h4 { margin-top: 10px; }
.tafel-r ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.tafel-r li { font-family: var(--mono); font-size: 0.735rem; border: 1.5px solid var(--linie);
  padding: 5px 9px; color: var(--tinte-2); }
.tafel-r p { font-size: 0.89rem; margin-top: 13px; }

/* ===== Partner-Raster ===== */
.partner { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0;
  border: 2px solid var(--kante); border-right: none; border-bottom: none; margin-top: 36px; }
.partner > * { min-width: 0; }
.pf { border-right: 2px solid var(--kante); border-bottom: 2px solid var(--kante);
  padding: 18px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; }
.pf-k { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .12em; color: var(--tinte-3); }
.pf-t { font-size: 0.95rem; font-weight: 600; margin-top: 8px; line-height: 1.2;
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.pf-s { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .08em; margin-top: 10px; }
.pf-s.geplant { color: var(--tinte-3); }
.pf-s.live { color: var(--mint); }   /* erst verwenden, wenn wirklich angebunden */

/* ===== Tagesreise ===== */
.tag { display: grid; gap: 0; margin-top: 38px; border-top: 2px solid var(--kante); }
.tag-z { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.tag-u { font-family: var(--mono); font-size: 0.8rem; color: var(--pink); }
.tag-x { font-size: 0.97rem; }
.fl-d .tag-x { color: #E4E4E8; }
.fl-d .tag-x b { color: #fff; }

/* ===== Drops ===== */
.drops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.drop { border: 2px solid var(--kante); background: var(--weiss); box-shadow: 6px 6px 0 var(--kante);
  padding: 24px 22px; display: flex; flex-direction: column; }
.drop-k { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.drop-n { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .12em; color: var(--tinte-3); }
.drop h3 { margin: 12px 0 10px; }
.drop p { font-size: 0.9rem; flex: 1; }
.drop-f { margin-top: 18px; padding-top: 14px; border-top: 1.5px solid var(--linie);
  font-family: var(--mono); font-size: 0.735rem; letter-spacing: .06em; color: var(--tinte-3); }

/* ===== Vault (Ausschluss) ===== */
.vault { list-style: none; margin-top: 36px; border-top: 2px solid rgba(255,255,255,.2); }
.vault li { display: grid; grid-template-columns: 210px 1fr; gap: 24px; padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.16); align-items: baseline; }
.vault b { font-size: 0.97rem; color: #fff; font-weight: 600; }
.vault span { font-size: 0.9rem; }

/* ===== Zahlenband ===== */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 2px solid var(--kante); margin-top: 40px; }
.zahl { padding: 26px 22px; border-right: 2px solid var(--kante); }
.zahl:last-child { border-right: none; }
.zahl-n { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.zahl-t { font-size: 0.88rem; margin-top: 12px; }
.zahl-q { font-family: var(--mono); font-size: 0.735rem; color: var(--tinte-3); margin-top: 10px; letter-spacing: .05em; }

/* ===== Preise ===== */
.tarife { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 2px solid var(--kante); margin-top: 40px; }
.tarif { padding: 28px 24px; border-right: 2px solid var(--kante); display: flex; flex-direction: column; }
.tarif:last-child { border-right: none; }
.tarif.hebt { background: var(--tinte); color: var(--weiss); }
.tarif.hebt p, .tarif.hebt li { color: #A6A6AE; }
.tarif.hebt .tarif-p { color: #fff; }
.tarif-n { font-family: var(--mono); font-size: 0.745rem; letter-spacing: .14em; text-transform: uppercase; }
.tarif-p { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.05em; margin: 16px 0 2px; line-height: 1; }
.tarif-je { font-family: var(--mono); font-size: 0.735rem; color: var(--tinte-3); }
.tarif.hebt .tarif-je { color: #8A8A93; }
.tarif ul { list-style: none; display: grid; gap: 9px; margin: 22px 0 24px; }
.tarif li { font-size: 0.88rem; padding-left: 18px; position: relative; }
.tarif li::before { content: "+"; position: absolute; left: 0; color: var(--pink-t); font-weight: 600; }
.tarif .knopf { margin-top: auto; justify-content: center; }

/* ===== Hinweisband ===== */
.arbeitsstand { background: var(--gelb); border-bottom: 2px solid var(--kante);
  font-family: var(--mono); font-size: 0.735rem; letter-spacing: .05em;
  padding: 8px 24px; text-align: center; line-height: 1.5; color: var(--tinte); }

/* ===== Fuß ===== */
.fuss { background: var(--tinte); color: #A6A6AE; padding: 56px 0 28px; }
.fuss a { color: #A6A6AE; } .fuss a:hover { color: var(--pink); }
.fuss-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.fuss h5 { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .13em; text-transform: uppercase;
  color: #8A8A94; margin-bottom: 13px; }
.fuss ul { list-style: none; display: grid; gap: 8px; font-size: 0.88rem; }
.fuss-unten { margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.735rem; letter-spacing: .05em; color: #8A8A94; }

/* ===== Reaktion ===== */
@media (max-width: 1000px) {
  .zwei { grid-template-columns: 1fr; gap: 38px; }
  .drops { grid-template-columns: 1fr; }
  .tarife { grid-template-columns: 1fr; }
  .tarif { border-right: none; border-bottom: 2px solid var(--kante); }
  .tarif:last-child { border-bottom: none; }
  .fuss-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .kopf-nav { display: none; }
  .nav-schalter { display: block; }
  .kopf-nav.offen { display: grid; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--weiss); border-bottom: 2px solid var(--kante); padding: 14px 24px 20px; gap: 0; }
  .kopf-nav.offen a { padding: 11px 0; border-bottom: 1px solid var(--linie); }
}
@media (max-width: 760px) {
  .r2, .r3, .r4 { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: 1fr; }
  .zahl { border-right: none; border-bottom: 2px solid var(--kante); }
  .zahl:last-child { border-bottom: none; }
  .tafel-z { grid-template-columns: 1fr; gap: 14px; }
  .vault li { grid-template-columns: 1fr; gap: 5px; }
  .tag-z { grid-template-columns: 70px 1fr; gap: 12px; }
  .tag-z .ev { grid-column: 2; justify-self: start; }
  .fuss-in { grid-template-columns: 1fr; gap: 26px; }
  .aufkleber { display: none; }
}
@media (max-width: 430px) {
  .bahn { padding: 0 18px; }
  .kopf-in { padding: 10px 18px; }
  .arbeitsstand { padding: 8px 18px; }
  .knopf { padding: 13px 18px; font-size: .78rem; }
}

/* ===== Logowand: zehn Plätze, füllbar bei Unterschrift ===== */
.wand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 2px solid var(--kante); border-right: none; border-bottom: none; margin-top: 36px; }
.wand > * { min-width: 0; }
.platz { border-right: 2px solid var(--kante); border-bottom: 2px solid var(--kante);
  aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 15px; position: relative; background:
    repeating-linear-gradient(-45deg, transparent, transparent 9px, #F7F7F3 9px, #F7F7F3 18px); }
.platz-n { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .12em; color: var(--tinte-3); }
.platz-k { font-size: 0.86rem; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 5 4; }
.platz-s { font-family: var(--mono); font-size: 0.735rem; letter-spacing: .06em; color: var(--tinte-3); }
.platz.belegt { background: var(--weiss); }
.platz.belegt .platz-s { color: var(--mint); }
.wand-fuss { margin-top: 18px; font-family: var(--mono); font-size: 0.735rem;
  letter-spacing: .05em; color: var(--tinte-3); line-height: 1.6; }

@media (max-width: 900px) { .wand { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wand { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .wand { grid-template-columns: 1fr; } .platz { aspect-ratio: auto; min-height: 92px; } }