/* Gemeinsame Basis der Geschaefts-Prototypen. Farben kommen je Demo aus
   :root-Variablen in der Seite selbst. Keine Fremd-CDNs, Schriften lokal. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:'Satoshi','Helvetica Neue',Arial,sans-serif; font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:'Cabinet Grotesk','Helvetica Neue',Arial,sans-serif; font-weight:900;
  line-height:1.05; margin:0 0 .5em; letter-spacing:-0.03em; }
h1 { font-size:clamp(2.3rem,6vw,4rem); text-transform:uppercase; }
h2 { font-size:clamp(1.6rem,3.2vw,2.4rem); text-transform:uppercase; }
h3 { font-size:1.05rem; }
p { margin:0 0 1em; } a { color:inherit; } img { max-width:100%; display:block; }
.wrap { max-width:1120px; margin:0 auto; padding:0 22px; }
.abschnitt { padding:clamp(52px,7vw,92px) 0; }
.auge { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--akzent);
  font-weight:700; margin-bottom:10px; }
.mute { color:var(--text-2); }
.demo-band { background:var(--dunkel); color:#fff; font-size:.76rem; padding:9px 22px;
  text-align:center; position:sticky; top:0; z-index:60; }
.demo-band a { color:var(--akzent-hell); font-weight:700; }
.kopf { border-bottom:1px solid var(--linie); background:var(--bg); }
.kopf .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px; }
.marke { font-family:'Cabinet Grotesk',sans-serif; font-weight:900; text-transform:uppercase; font-size:1rem; }
.kopf nav { display:flex; gap:20px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.kopf nav a { text-decoration:none; color:var(--text-2); } .kopf nav a:hover { color:var(--text); }
@media (max-width:760px){ .kopf nav { display:none; } }
.knopf { display:inline-block; background:var(--akzent); color:#fff; text-decoration:none;
  padding:14px 28px; border-radius:var(--radius); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; border:0; cursor:pointer; font-family:inherit; }
.knopf:hover { filter:brightness(.9); }
.knopf.rand { background:transparent; color:var(--text); border:1px solid var(--linie); }
.drei { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.karte { background:var(--bg-2); border:1px solid var(--linie); border-radius:var(--radius); padding:26px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start; }
@media (max-width:840px){ .split { grid-template-columns:1fr; } }
.liste { list-style:none; padding:0; margin:0; font-size:.95rem; }
.liste li { padding:10px 0 10px 26px; border-bottom:1px solid var(--linie); position:relative; }
.liste li::before { content:'✓'; position:absolute; left:0; color:var(--akzent); font-weight:700; }
.bildplatz { background:var(--bg-2); border:2px dashed var(--linie); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:30px;
  min-height:210px; color:var(--text-2); font-size:.82rem; line-height:1.5; }
.feld { display:block; margin-bottom:14px; }
.feld > span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-2); margin-bottom:6px; font-weight:700; }
.feld input, .feld textarea, .feld select { width:100%; padding:12px 14px; border:1px solid var(--linie);
  border-radius:var(--radius); font:inherit; font-size:.94rem; background:var(--bg); color:var(--text); }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline:2px solid var(--akzent); outline-offset:1px; }
.wahl { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.wahl button { padding:16px 12px; border:1px solid var(--linie); border-radius:var(--radius);
  background:var(--bg); cursor:pointer; font:inherit; font-size:.88rem; text-align:left; color:var(--text); }
.wahl button:hover { border-color:var(--akzent); }
.wahl button.aktiv { border-color:var(--akzent); background:var(--akzent); color:#fff; font-weight:700; }
.schritte { display:flex; gap:6px; margin-bottom:18px; }
.schritte i { height:4px; flex:1; background:var(--linie); border-radius:2px; }
.schritte i.an { background:var(--akzent); }
footer.fuss { border-top:1px solid var(--linie); padding:44px 0; font-size:.86rem; color:var(--text-2); }
footer.fuss a { color:var(--akzent); }
footer.fuss .wrap { display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; }