/* Auswahlseite — neutral gehalten, damit keine der drei Richtungen bevorzugt wirkt.
   Jedes Band zeigt die Farbwelt und die Schriften seines Konzepts. */
:root{
  --bg:#f1eee8; --ink:#1a1917; --ink2:#4b4843; --line:rgba(26,25,23,.16);
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5vw,84px); --max:1500px;
  --e:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;background:var(--bg)}
html:not(.rm){scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible{outline:3px solid #2b6cff;outline-offset:3px;border-radius:3px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;text-decoration:none;border-radius:6px}
.sprung:focus{top:12px}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:16px;height:60px;padding:0 var(--pad);background:rgba(241,238,232,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.kopf-marke{margin:0;font-size:.92rem;white-space:nowrap}
.kopf-marke span{color:var(--ink2);margin-left:.5em}
.kopf-nav{display:flex;gap:4px}
.kopf-nav a{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 14px;border-radius:999px;font:600 .84rem/1 var(--sans);text-decoration:none;color:var(--ink);transition:background .25s,color .25s}
.kopf-nav a span{font-weight:800;opacity:.6}
.kopf-nav a:hover,.kopf-nav a.akt{background:var(--ink);color:#fff}
.kopf-nav a:hover span,.kopf-nav a.akt span{opacity:1}

/* ---------- Einstieg ---------- */
.intro{max-width:var(--max);margin:0 auto;padding:clamp(56px,9vw,130px) var(--pad) clamp(44px,6vw,90px)}
.eyebrow{margin:0 0 clamp(18px,2.6vw,32px);font:700 .74rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.intro h1{margin:0;max-width:17em;font:300 clamp(2.6rem,6.6vw,6.4rem)/1.02 var(--sans);letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
.intro h1 b{font-weight:800}
.intro-lead{max-width:30ch;margin:clamp(22px,3vw,40px) 0 0;font:400 clamp(1.5rem,2.6vw,2.4rem)/1.2 "Instrument Serif",Georgia,serif;font-style:italic}
.intro-text{max-width:56ch;margin:clamp(22px,3vw,40px) 0 0;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink)}
.intro-hinweis{max-width:62ch;margin:18px 0 0;font-size:.92rem;color:var(--ink2)}

/* ---------- Bänder ---------- */
.board{position:relative;overflow:hidden}
.board-in{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,120px) var(--pad);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);gap:clamp(30px,5vw,90px);align-items:center}
.b2 .board-in{grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr)}
.b2 .board-text{order:2}
.b-nr{margin:0 0 clamp(12px,1.6vw,20px);font:800 .78rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.b-name{margin:0;font-weight:400;line-height:.9}
.b-richtung{margin:clamp(16px,2vw,26px) 0 0;font:600 clamp(1.1rem,1.5vw,1.35rem)/1.4 var(--sans);max-width:22em}
.b-text{margin:14px 0 0;max-width:42ch}
.b-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.b-tags li{font:700 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:.7em 1em;border:1px solid currentColor;opacity:.9}
.b-aktion{margin:clamp(24px,3vw,38px) 0 0}
.b-btn{display:inline-flex;align-items:center;gap:1em;min-height:54px;padding:0 28px;font:800 .86rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:transform .35s var(--e),box-shadow .35s var(--e)}
.b-btn i{position:relative;display:inline-block;width:2em;height:2px;background:currentColor}
.b-btn i::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg) translate(-1px,0)}
.b-btn:hover{transform:translateY(-3px)}

/* Konzept 01 — Classic Premium */
.b1{background:#14100c;color:#efe5d2}
.b1 .b-nr{color:#c8a15a}
.b1 .b-name{font:400 clamp(4rem,8.6vw,8.4rem)/.9 "Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;letter-spacing:-.02em}
.b1 .b-tags li{border-color:rgba(239,229,210,.35)}
.b1 .b-btn{background:#c8a15a;color:#1a1208;border-radius:0}
.b1 .b-btn:hover{box-shadow:0 14px 30px -12px rgba(200,161,90,.6)}
.b1 .b-termin b{color:#c8a15a}
/* Konzept 02 — Modern Urban */
.b2{background:#e6e5e1;color:#0b0b0c}
.b2 .b-nr{color:#0b0b0c}
.b2 .b-nr::before{content:"";display:inline-block;width:30px;height:11px;background:#c8ff2e;border:2px solid #0b0b0c;margin-right:12px;vertical-align:-1px}
.b2 .board-text{container-type:inline-size}
.b2 .b-name{font:900 clamp(4rem,27cqw,10rem)/.84 "Big Shoulders Display","Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:-.005em}
.b2 .b-tags li{border:2px solid #0b0b0c;border-radius:0;opacity:1}
.b2 .b-btn{background:#c8ff2e;color:#0b0b0c;border-radius:0;border:2px solid #0b0b0c;box-shadow:5px 5px 0 #0b0b0c}
.b2 .b-btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 #0b0b0c}
.b2 .b-termin b{text-transform:uppercase;letter-spacing:.08em}
/* Konzept 03 — Signature */
.b3{background:radial-gradient(ellipse 50% 70% at 78% 40%,rgba(255,91,46,.2),transparent 70%),#06080b;color:#f1ede6}
.b3 .b-nr{color:#ff8b66}
.b3 .b-name{font:800 clamp(3.6rem,7.4vw,7.2rem)/.9 "Bricolage Grotesque",var(--sans);letter-spacing:-.05em}
.b3 .b-tags li{border-color:rgba(241,237,230,.3);border-radius:999px}
.b3 .b-btn{background:#ff5b2e;color:#160803;border-radius:999px}
.b3 .b-btn:hover{box-shadow:0 14px 34px -10px #ff5b2e}
.b3 .b-termin b{color:#ff8b66}
.b-termin{margin:16px 0 0;max-width:42ch;font-size:.95rem;opacity:.92}

/* ---------- Geräte ---------- */
.geraete{position:relative;padding-bottom:clamp(30px,6vw,70px)}
.desk{position:relative;width:88%;background:#0f0f10;border-radius:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.b2 .desk{margin-left:12%}
.desk-bar{display:flex;gap:7px;padding:11px 14px;background:#202022;border-radius:12px 12px 0 0}
.desk-bar i{width:10px;height:10px;border-radius:50%;background:#4a4a4e}
.desk-fenster,.phone-fenster{position:relative;overflow:hidden;container-type:size;background:#111}
.desk-fenster{aspect-ratio:16/10;border-radius:0 0 12px 12px}
.strip{width:100%;height:auto;will-change:transform;transform:translateY(0)}
.phone{position:absolute;right:0;bottom:0;width:clamp(120px,20%,220px);aspect-ratio:9/19;padding:7px;background:#0e0e10;border-radius:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.b2 .phone{right:auto;left:0}
.phone-fenster{width:100%;height:100%;border-radius:24px}
.board.lauf .strip{animation:scroll var(--dauer,34s) ease-in-out infinite alternate}
.board.lauf .phone .strip{--dauer:46s;animation-delay:-8s}
.board:hover .strip{animation-play-state:running}
@keyframes scroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + 100cqh))}}
html.rm .strip{animation:none!important}

/* ---------- Vergleich ---------- */
.vergleich{max-width:var(--max);margin:0 auto;padding:clamp(60px,9vw,130px) var(--pad)}
.vergleich h2,.weiter h2{margin:0 0 clamp(26px,3.4vw,46px);font:800 clamp(2rem,4.4vw,3.8rem)/1.05 var(--sans);letter-spacing:-.03em}
.vergleich table{width:100%;border-collapse:collapse;font-size:1rem}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:18px 22px 18px 0;border-top:1px solid var(--line)}
.vergleich thead th{font:800 .8rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border-top:0;padding-bottom:16px}
.vergleich tbody th{font:700 .78rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);width:12%}
.vergleich td{width:29%;line-height:1.5}

/* ---------- Weiter ---------- */
.ablauf{background:#e9e5dc;border-top:1px solid var(--line)}
.ablauf-in{max-width:var(--max);margin:0 auto;padding:clamp(60px,9vw,130px) var(--pad)}
.ablauf h2{margin:0 0 20px;font:800 clamp(2rem,4.4vw,3.8rem)/1.05 var(--sans);letter-spacing:-.03em}
.ablauf-text{max-width:60ch;margin:0 0 clamp(26px,3.4vw,46px)}
.schritte{margin:0 0 clamp(26px,3.4vw,46px);padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,44px)}
.schritte li{counter-increment:s;position:relative;padding-top:54px;border-top:2px solid var(--ink)}
.schritte li::before{content:counter(s);position:absolute;left:0;top:10px;font:800 2.2rem/1 var(--sans);letter-spacing:-.04em}
.schritte b{display:block;font-size:1.2rem;margin-bottom:6px}
.schritte span{display:block;color:var(--ink2);max-width:36ch}
.ablauf-demo a{display:inline-flex;align-items:center;min-height:28px}
.ablauf-demo{max-width:78ch;margin:0;padding:16px 18px;border:1px dashed var(--ink2);font-size:.95rem;color:var(--ink)}
.weiter{background:#1a1917;color:#f1eee8}
.weiter-in{max-width:var(--max);margin:0 auto;padding:clamp(60px,9vw,130px) var(--pad)}
.weiter p{max-width:60ch;margin:0 0 22px;color:#cfcac2}
.weiter ol{margin:0 0 30px;padding:0;list-style:none;counter-reset:n;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,80px);max-width:1100px}
.weiter li{counter-increment:n;position:relative;padding:18px 0 18px 46px;border-top:1px solid rgba(241,238,232,.18);color:#e8e4dc}
.weiter li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:19px;font:800 .8rem/1.8 var(--sans);letter-spacing:.14em;color:#9b968c}
.weiter li b{color:#fff}
.fuss-a{background:#1a1917;color:#9b968c;padding:0 var(--pad) clamp(40px,5vw,70px);font-size:.9rem}
.fuss-a p{max-width:var(--max);margin:0 auto;padding-top:26px;border-top:1px solid rgba(241,238,232,.18)}

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

/* ---------- schmal ---------- */
@media (max-width:980px){
  .board-in,.b2 .board-in{grid-template-columns:minmax(0,1fr)}
  .b2 .board-text{order:0}
  .desk,.b2 .desk{width:100%;margin-left:0}
  .phone{width:clamp(104px,26%,170px)}
  .b2 .phone{left:auto;right:0}
}
@media (max-width:480px){
  .intro h1{font-size:10.4vw}
  .kopf-nav a{padding:0 8px;font-size:.76rem}
}
@media (max-width:720px){
  .kopf{height:56px}
  .kopf-marke{display:none}
  .kopf{justify-content:center}
  .kopf-nav a{padding:0 11px}
  .kopf-nav a{font-size:.8rem}
  .vergleich table,.vergleich tbody,.vergleich tr,.vergleich th,.vergleich td{display:block;width:auto}
  .vergleich thead{display:none}
  .vergleich tr{padding:18px 0;border-top:1px solid var(--line)}
  .vergleich th,.vergleich td{border:0;padding:3px 0}
  .vergleich tbody th{width:auto;margin-bottom:6px}
  .vergleich td::before{content:attr(data-k);display:inline-block;width:2.2em;font-weight:800;color:var(--ink2)}
  .weiter ol{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
}