/* =========================================================================
   waermstens.de — hell, warm, freundlich (Apple-Stil).
   Eine dramatische dunkle Bühne für den 3D-Turm, sonst licht und luftig.
   ========================================================================= */

:root {
  --bg:        #ffffff;
  --bg-warm:   #faf7f2;
  --bg-soft:   #f3efe8;
  --ink:       #1b1815;
  --ink-2:     #57514a;
  --ink-3:     #8b827a;
  --linie:     #e8e1d6;
  --linie-2:   #dcd3c6;

  --glut:      #df5320;
  --glut-2:    #ff7a3d;
  --glut-tief: #b83f12;
  --teal:      #0ca7a0;
  --teal-tief: #0b7d78;
  --gruen:     #2f9e63;
  --stage:     #0e1013;

  --sans: "Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp: "Space Grotesk","Inter",sans-serif;
  --mono: "Space Mono",ui-monospace,Menlo,monospace;

  --breite: 1180px;
  --r: 22px;
  --schatten: 0 1px 2px rgba(28,24,20,.05), 0 12px 32px -12px rgba(28,24,20,.16);
  --schatten-gr: 0 2px 6px rgba(28,24,20,.06), 0 30px 60px -20px rgba(28,24,20,.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: var(--glut); text-decoration: none; }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; margin: 0; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 26px; }
section { position: relative; padding: clamp(76px,11vw,150px) 0; }
.warm { background: var(--bg-warm); }
.soft { background: var(--bg-soft); }
.leise { color: var(--ink-2); }

.eyebrow {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--teal-tief); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--teal); }

/* ------------------------------------------------------------- Navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 24px;
  padding: 16px clamp(20px,4vw,44px); transition: background .3s, padding .3s, box-shadow .3s;
}
.nav.klein { background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--linie); padding-top: 11px; padding-bottom: 11px; }
.nav-marke { display: flex; align-items: center; gap: 11px; font-family: var(--disp);
  font-weight: 700; font-size: 1.14rem; color: #fff; letter-spacing: -.01em; transition: color .3s; }
.nav.klein .nav-marke { color: var(--ink); }
.nav-punkt { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav-links a { color: rgba(255,255,255,.86); font-size: .93rem; font-weight: 500; transition: color .2s; }
.nav.klein .nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--glut-2); }
.nav.klein .nav-links a:hover { color: var(--glut); }
.nav-cta { padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: #fff !important; background: linear-gradient(120deg,var(--glut),var(--glut-2));
  box-shadow: 0 6px 20px -6px rgba(223,83,32,.6); }
.nav-cta:hover { color: #fff !important; transform: translateY(-1px); }
.nav-schalter { display: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 10px; padding: 8px 12px; margin-left: auto; cursor: pointer; font-size: 1.1rem; }
.nav.klein .nav-schalter { color: var(--ink); border-color: var(--linie-2); background: #fff; }

/* --------------------------------------------------------- Turm-Bühne (3D) */
.turm-buehne { position: relative; height: 300vh; background: var(--stage); }
.turm-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#turm-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  background: radial-gradient(60% 60% at 50% 55%, #241a14 0%, #0e1013 70%); }
.turm-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: clamp(90px,12vh,140px) clamp(24px,6vw,80px) clamp(40px,8vh,90px);
  display: flex; flex-direction: column; }
.turm-titel { max-width: 16em; }
.turm-titel .marke-mini { font-family: var(--mono); font-size: .76rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--glut-2); margin-bottom: 16px; }
.turm-titel h1 { color: #fff; font-size: clamp(2.6rem,6.5vw,5.4rem); letter-spacing: -.03em;
  text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.turm-titel h1 .glut { background: linear-gradient(120deg,var(--glut-2),#ffd27a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.turm-titel p { color: rgba(255,255,255,.82); font-size: clamp(1.02rem,1.6vw,1.24rem); max-width: 30em; margin-top: 20px; }
.turm-untertitel { margin-top: auto; }
.turm-schritt { position: absolute; left: clamp(24px,6vw,80px); right: clamp(24px,6vw,80px);
  bottom: clamp(60px,10vh,110px); opacity: 0; transition: opacity .5s; }
.turm-schritt .num { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; color: var(--glut-2); }
.turm-schritt h2 { color: #fff; font-size: clamp(1.6rem,3.4vw,2.6rem); margin: 8px 0 8px; }
.turm-schritt p { color: rgba(255,255,255,.8); max-width: 30em; font-size: 1.05rem; }
.turm-schritt .grad { font-family: var(--disp); font-weight: 700;
  background: linear-gradient(120deg,var(--glut-2),#ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.turm-scrollhint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: rgba(255,255,255,.6);
  text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* --------------------------------------------------------------- Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; cursor: pointer; border: none; font-family: var(--sans);
  transition: transform .2s, box-shadow .2s, background .2s; pointer-events: auto; }
.btn-glut { color: #fff; background: linear-gradient(120deg,var(--glut),var(--glut-2)); box-shadow: 0 10px 30px -8px rgba(223,83,32,.55); }
.btn-glut:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(223,83,32,.7); color: #fff; }
.btn-linie { color: var(--ink); background: #fff; border: 1.5px solid var(--linie-2); }
.btn-linie:hover { transform: translateY(-2px); border-color: var(--glut); color: var(--glut); }
.btn-hell { color: #0e1013; background: #fff; }
.btn-hell:hover { transform: translateY(-2px); }
.btn-geist { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); }
.btn-geist:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); color: #fff; }

/* ---------------------------------------------------------- Section-Kopf */
.s-kopf { max-width: 46em; margin-bottom: 52px; }
.s-kopf h2 { font-size: clamp(2rem,4.4vw,3.4rem); }
.s-kopf p { font-size: clamp(1.06rem,1.6vw,1.26rem); color: var(--ink-2); margin-top: 18px; }

/* ------------------------------------------------------------------ Bento */
.bento { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; grid-auto-rows: minmax(150px,auto); }
.karte { background: #fff; border: 1px solid var(--linie); border-radius: var(--r);
  padding: 30px; box-shadow: var(--schatten); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; justify-content: space-between; }
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-gr); }
.warm .karte, .soft .karte { background: #fff; }
.gross { grid-column: span 4; grid-row: span 2; }
.hoch  { grid-column: span 2; grid-row: span 2; }
.breit { grid-column: span 4; }
.quad  { grid-column: span 2; }
.voll  { grid-column: span 6; }
.karte .kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.karte .wert { font-family: var(--disp); font-weight: 700; line-height: 1; margin: 12px 0 6px; color: var(--ink); }
.karte .wert.xl { font-size: clamp(2.6rem,6vw,4.4rem); }
.karte .wert.glut { color: var(--glut); }
.karte .wert.teal { color: var(--teal-tief); }
.karte h3 { font-size: 1.24rem; margin-bottom: 10px; }
.karte p { color: var(--ink-2); font-size: .97rem; margin: 0; }
.karte b { color: var(--ink); }
.ikon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(12,167,160,.1); color: var(--teal-tief); margin-bottom: 18px; }
.karte.warm-ikon .ikon { background: rgba(223,83,32,.1); color: var(--glut); }

/* -------------------------------------------------------- Vergleich */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.vs { padding: 34px; border-radius: var(--r); border: 1px solid var(--linie); background: #fff; box-shadow: var(--schatten); }
.vs.stark { border-color: rgba(47,158,99,.4); background: linear-gradient(160deg,rgba(47,158,99,.06),#fff); }
.vs .label { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.vs .preis { font-family: var(--disp); font-size: clamp(2.2rem,5vw,3.2rem); font-weight: 700; margin: 10px 0; color: var(--ink); }
.vs.stark .preis { color: var(--gruen); }
.vs ul { list-style: none; padding: 0; margin: 16px 0 0; }
.vs li { padding: 9px 0; border-top: 1px solid var(--linie); color: var(--ink-2); font-size: .95rem; display: flex; justify-content: space-between; gap: 12px; }

/* --------------------------------------------------------- Timeline */
.timeline { margin-top: 40px; }
.tl { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--linie); }
.tl .datum { font-family: var(--mono); color: var(--teal-tief); font-size: .9rem; }
.tl.jetzt .datum { color: var(--glut); }
.tl h3 { font-size: 1.2rem; margin-bottom: 6px; }
.tl p { color: var(--ink-2); margin: 0; font-size: .97rem; }

/* --------------------------------------------------------- Formular */
.form-karte { max-width: 640px; margin: 44px auto 0; padding: clamp(28px,4vw,44px); border-radius: var(--r);
  background: #fff; border: 1px solid var(--linie); box-shadow: var(--schatten-gr); }
.form-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.feld label { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.feld input, .feld select, .feld textarea { background: var(--bg-warm); border: 1.5px solid var(--linie-2);
  border-radius: 12px; padding: 13px 15px; color: var(--ink); font-family: var(--sans); font-size: 1rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--glut); box-shadow: 0 0 0 3px rgba(223,83,32,.13); background: #fff; }
.feld textarea { min-height: 96px; resize: vertical; }
.zustimm { display: flex; gap: 11px; align-items: flex-start; font-size: .86rem; color: var(--ink-3); margin-bottom: 16px; }
.zustimm input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--glut); flex: none; }
.hinweis { padding: 13px 16px; border-radius: 12px; font-size: .92rem; display: none; }
.hinweis.gut { display: block; background: rgba(47,158,99,.12); color: #1c6b40; border: 1px solid rgba(47,158,99,.28); }
.hinweis.fehl { display: block; background: rgba(223,83,32,.1); color: var(--glut-tief); border: 1px solid rgba(223,83,32,.28); }

/* ------------------------------------------------------------ CTA-Band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.2rem,5vw,3.6rem); }
.cta-band p { color: var(--ink-2); max-width: 34em; margin: 18px auto 32px; font-size: 1.1rem; }

/* --------------------------------------------------------------- Footer */
.fuss { background: var(--bg-soft); border-top: 1px solid var(--linie); padding: 64px 0 34px; color: var(--ink-3); }
.fuss .nav-marke { color: var(--ink); }
.fuss-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
.fuss h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 15px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fuss a { color: var(--ink-2); font-size: .95rem; }
.fuss a:hover { color: var(--glut); }
.fuss-note { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 20px; font-size: .85rem; color: var(--ink-3); line-height: 1.6; max-width: 40em; margin-top: 16px; }
.fuss-unten { border-top: 1px solid var(--linie); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .85rem; color: var(--ink-3); }

/* --------------------------------------------------------- Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.sichtbar { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* --------------------------------------------------------------- Mobil */
@media (max-width: 940px) {
  .bento { grid-template-columns: repeat(2,1fr); }
  .gross,.hoch,.breit,.quad,.voll { grid-column: span 2; grid-row: auto; }
  .vergleich { grid-template-columns: 1fr; }
  .fuss-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-schalter { display: block; }
  .nav-links.offen { display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0; padding: 18px 26px; gap: 14px;
    background: rgba(14,16,19,.96); border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav.klein .nav-links.offen { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--linie); }
  .turm-buehne { height: 260vh; }
}
@media (max-width: 560px) {
  .form-reihe { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 6px; }
  body { font-size: 16px; }
  .turm-schritt h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}