/* webstatisch – Lego/Pixel-Startseite. Keine externen Ressourcen. */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url("../fonts/PixelifySans-VariableFont_wght.ttf") format("truetype");font-weight:400 700;font-display:swap}

:root{
  --red:#e3000b; --red-d:#a30008; --yellow:#ffd500; --yellow-d:#c9a800;
  --blue:#0057b8; --blue-d:#003d82; --green:#00852b; --green-d:#005c1e;
  --ink:#111; --paper:#fffaf0; --sky:#5ec8ff; --night:#1a1a40;
  --pixel:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --body:"Pixelify Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow:6px 6px 0 var(--ink);
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--body);font-size:1.15rem;line-height:1.55;color:var(--ink);background:var(--paper)}
img,video{max-width:100%;display:block}
a{color:var(--blue-d)}
h1,h2,h3{font-family:var(--pixel);line-height:1.35;margin:0 0 .6em;letter-spacing:.5px}
h1{font-size:clamp(1.25rem,3.6vw,2.6rem)}
h2{font-size:clamp(1.1rem,2.8vw,1.9rem)}
h3{font-size:clamp(.8rem,1.4vw,1rem)}
.wrap{width:min(1150px,100% - 2rem);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--yellow);padding:.6rem 1rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}

/* ---------- Lego-Bausteine ---------- */
.studs,.btn,.step,.price-card,.brick,.logo-brick{position:relative}
.btn::before,.step::before,.price-card::before,.brick::before,.logo-brick::before{
  content:"";position:absolute;left:10%;right:10%;top:-12px;height:12px;
  background:radial-gradient(circle at 50% 100%, currentColor 0 9px, transparent 10px) 0 0/34px 24px repeat-x;
  color:inherit; pointer-events:none;
}
.btn{
  --c:var(--red);--cd:var(--red-d);
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--pixel);font-size:.8rem;
  padding:1rem 1.3rem;margin-top:12px;border:3px solid var(--ink);border-radius:6px;background:var(--c);color:#fff;
  text-decoration:none;cursor:pointer;box-shadow:0 6px 0 var(--cd),0 6px 0 3px var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.btn::before{color:var(--c);left:14%;right:14%;top:-11px;height:10px;
  background:radial-gradient(ellipse 10px 6px at 50% 100%, var(--c) 0 97%, transparent 100%) 0 0/30px 12px repeat-x;
  filter:drop-shadow(0 -3px 0 var(--ink))}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--cd),0 9px 0 3px var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--cd),0 1px 0 3px var(--ink)}
.btn-ghost{--c:var(--yellow);--cd:var(--yellow-d);color:var(--ink)}
.btn-small{font-size:.6rem;padding:.6rem .8rem;margin-top:6px}
.tag{display:inline-block;font-family:var(--pixel);font-size:.55rem;background:var(--ink);color:var(--yellow);padding:.35rem .5rem;border-radius:4px;vertical-align:middle;text-transform:uppercase}

/* ---------- Kopf ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem max(1rem,calc((100% - 1150px)/2));background:var(--yellow);border-bottom:4px solid var(--ink)}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.logo-brick{width:38px;height:24px;background:var(--red);border:3px solid var(--ink);border-radius:4px;margin-top:8px}
.logo-brick::before{left:3px;right:3px;top:-10px;height:8px;background:
  radial-gradient(ellipse 6px 5px at 50% 100%,var(--red) 0 90%,transparent 100%) 0 0/16px 10px repeat-x;filter:drop-shadow(0 -2px 0 var(--ink))}
.logo-text{font-family:var(--pixel);font-size:.95rem}
.logo-text b{color:var(--red)}
.nav{display:flex;align-items:center;gap:1.2rem}
.nav a:not(.btn){font-family:var(--pixel);font-size:.6rem;color:var(--ink);text-decoration:none}
.nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:3px}
.nav-toggle{display:none;font-family:var(--pixel);font-size:.6rem;background:var(--ink);color:var(--yellow);border:0;padding:.6rem .8rem;border-radius:4px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(var(--sky),#a8e3ff 70%);padding:4.5rem 0 3rem;border-bottom:4px solid var(--ink)}
.hero-inner{position:relative;z-index:2}
.badge{display:inline-block;font-family:var(--pixel);font-size:.6rem;background:#fff;border:3px solid var(--ink);padding:.5rem .7rem;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg)}
.hero h1{margin-top:1rem;color:#fff;text-shadow:3px 3px 0 var(--ink),-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink)}
.hl-red{color:var(--red);text-shadow:none;background:#fff;padding:0 .3em;border:3px solid var(--ink)}
.hl-yellow{color:var(--yellow)}
.lead{max-width:640px;font-size:1.25rem;background:rgba(255,255,255,.85);padding:1rem 1.2rem;border:3px solid var(--ink);border-radius:var(--r)}
.cta-row{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.2rem 0 2rem}
.hero-stats{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0;margin:0}
.hero-stats li{background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:6px;display:flex;flex-direction:column}
.hero-stats b{font-family:var(--pixel);color:var(--yellow);font-size:.9rem}
.hero-stats span{font-size:.95rem}
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.brick{position:absolute;width:110px;height:56px;border:3px solid var(--ink);border-radius:6px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.2);animation:bob 4s ease-in-out infinite}
.brick::before{left:8px;right:8px;top:-14px;height:12px;background:
  radial-gradient(ellipse 12px 8px at 50% 100%,var(--c) 0 92%,transparent 100%) 0 0/32px 14px repeat-x;filter:drop-shadow(0 -3px 0 var(--ink))}
.b1{--c:var(--red);background:var(--red);right:6%;top:14%}
.b2{--c:var(--yellow);background:var(--yellow);right:14%;top:34%;animation-delay:-1s;transform:rotate(8deg)}
.b3{--c:var(--blue);background:var(--blue);right:3%;top:52%;animation-delay:-2s}
.b4{--c:var(--green);background:var(--green);right:22%;top:8%;width:60px;animation-delay:-3s}
.b5{--c:#ff7ac6;background:#ff7ac6;left:48%;top:4%;width:60px;animation-delay:-1.5s}
.b6{--c:#ff8a00;background:#ff8a00;right:10%;top:72%;animation-delay:-2.5s}
@keyframes bob{50%{translate:0 -14px}}
.pixel-cloud{position:absolute;width:12px;height:12px;background:#fff;opacity:.9;
  box-shadow:12px 0 #fff,24px 0 #fff,36px 0 #fff,12px -12px #fff,24px -12px #fff,48px 0 #fff,36px -12px #fff,24px -24px #fff;animation:drift 40s linear infinite}
.c1{top:10%;left:-80px;scale:2}
.c2{top:26%;left:-80px;scale:1.4;animation-delay:-18s}
@keyframes drift{to{translate:110vw 0}}

.hero-video{position:relative;z-index:2;margin-top:3rem}
.video-frame{border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--night);aspect-ratio:16/9}
.video-frame video,.video-placeholder img{width:100%;height:100%;object-fit:cover}
.video-placeholder{position:relative;height:100%}
.video-box{margin:0}
.video-frame{position:relative}
.video-frame::before{content:"";position:absolute;top:-14px;left:24px;width:56px;height:10px;background:var(--red);border:4px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:80px 0 0 -4px var(--red),80px 0 0 0 var(--ink);z-index:1}
.hero-video .video-frame{overflow:visible}
.hero-video .video-frame video,.hero-video .video-placeholder{border-radius:calc(var(--r) - 4px);overflow:hidden;background:#000}
.video-frame video{object-fit:contain;background:#000}
.video-caption{margin:1rem auto 0;max-width:46rem;text-align:center;font-size:1.05rem;background:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:.6rem .9rem;border-radius:6px;transform:rotate(-.6deg)}
.video-caption .tag{margin-right:.4rem}
.video-caption small{display:block;opacity:.75;font-size:.85em}
@media (max-width:600px){.hero-video{margin-top:2rem}.video-frame{border-width:3px;box-shadow:4px 4px 0 var(--ink)}.video-caption{font-size:.95rem;transform:none}}
.video-placeholder p{position:absolute;left:1rem;bottom:1rem;margin:0;background:#fff;border:3px solid var(--ink);padding:.5rem .8rem;border-radius:6px}

/* ---------- Abschnitte ---------- */
.section{padding:5rem 0;border-bottom:4px solid var(--ink)}
.kicker{font-family:var(--pixel);font-size:.65rem;color:var(--red-d);margin:0 0 .6rem}
.sub{max-width:700px}
.note{font-size:.95rem;color:#444}

/* ---------- Vorher/Nachher ---------- */
.transform{background:
  radial-gradient(circle at 20px 20px,#ffe766 0 9px,transparent 10px) 0 0/40px 40px,var(--yellow)}
.ba{--pos:50%;position:relative;margin-top:2rem;aspect-ratio:16/9;min-height:360px;border:4px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:#fff;user-select:none}
.ba-old,.ba-new{position:absolute;inset:0}
.ba-new{clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:6px;margin-left:-3px;background:var(--ink);z-index:4;pointer-events:none}
.ba-knob{position:absolute;z-index:4;pointer-events:none;top:50%;left:clamp(34px,var(--pos),calc(100% - 34px));translate:-50% -50%;background:var(--red);color:#fff;font-family:var(--pixel);font-size:.6rem;
  padding:.7rem .6rem;border:3px solid var(--ink);border-radius:6px;white-space:nowrap;box-shadow:0 4px 0 var(--red-d)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba:has(.ba-range:focus-visible) .ba-knob{outline:4px solid var(--blue);outline-offset:3px}
.ba-label{position:absolute;bottom:.7rem;z-index:4;font-family:var(--pixel);font-size:.55rem;background:var(--ink);color:#fff;padding:.4rem .6rem;border-radius:4px}
.ba-label-old{left:.7rem}.ba-label-new{right:.7rem;background:var(--green)}
.ba-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:1.2rem}
.ba-status{font-family:var(--pixel);font-size:.6rem;margin:0}

/* 90er-Seite */
.ba-old{display:grid;grid-template-columns:24% 1fr;font-family:"Comic Sans MS","Comic Neue","Chalkboard SE",cursive;
  background:#000080 repeating-linear-gradient(45deg,#000080 0 14px,#0000a8 14px 28px);color:#ffff00;font-size:clamp(.6rem,1.2vw,1rem)}
.old-frame-left{background:#c0c0c0;color:#000;border-right:6px ridge #888;padding:4%;display:flex;flex-direction:column;gap:.35em}
.old-frame-left a{color:#0000ee;text-decoration:underline;font-weight:bold}
.old-logo{font-family:"Times New Roman",serif;font-weight:bold;font-size:1.3em;color:#ff0000;text-shadow:2px 2px #000;margin:0 0 .4em}
.old-small{font-size:.75em;margin:.4em 0 0;color:inherit}
.old-main{padding:2% 4%;overflow:hidden}
.old-marquee{background:#ff00ff;color:#00ff00;font-weight:bold;overflow:hidden;white-space:nowrap;border:3px outset #fff}
.old-marquee span{display:inline-block;padding-left:100%;animation:marq 12s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.old-title{font-family:"Comic Sans MS","Comic Neue",cursive;font-size:2.2em;color:#00ffff;text-shadow:3px 3px #ff0000;margin:.3em 0;text-align:center;letter-spacing:0}
.old-construction{display:flex;align-items:center;justify-content:center;gap:.6em;background:repeating-linear-gradient(-45deg,#ffd500 0 12px,#000 12px 24px);
  color:#fff;font-weight:bold;padding:.5em;text-shadow:2px 2px #000,-1px -1px #000;border:2px solid #000}
.old-cone{width:0;height:0;border-left:.6em solid transparent;border-right:.6em solid transparent;border-bottom:1.2em solid #ff6a00}
.old-blink{color:#ff0000;background:#ffff00;font-weight:bold;text-align:center;animation:blink 1s steps(1) infinite;margin:.6em 0}
@keyframes blink{50%{opacity:0}}
.old-text{color:#fff;margin:.4em 0}
.old-counter{display:inline-flex;align-items:center;gap:2px;background:#000;color:#0f0;padding:.3em .5em;border:2px inset #888;font-family:"Courier New",monospace}
.old-counter span{background:#222;color:#ff0;border:1px solid #555;padding:0 .25em}

/* Moderne Seite */
.ba-new{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;flex-direction:column;justify-content:space-between;padding:3% 5% 7%;gap:4%;overflow:hidden;font-size:clamp(.6rem,1.25vw,1.05rem)}
.new-nav{display:flex;align-items:center;gap:1.4em;font-size:.9em;opacity:.95}
.new-nav b{margin-right:auto;font-size:1.3em;letter-spacing:.02em}
.new-nav i{font-style:normal;background:#fff;color:#0f172a;padding:.45em .9em;border-radius:999px;font-weight:600}
.new-hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:6%}
.new-eyebrow{color:#7dd3fc;font-weight:600;margin:0 0 .4em;text-transform:uppercase;font-size:.75em;letter-spacing:.12em}
.new-hero h3{font-family:inherit;font-size:2.6em;line-height:1.05;margin:0 0 .4em;letter-spacing:-.02em}
.new-hero p{margin:0 0 1em;opacity:.85}
.new-btn{display:inline-block;background:linear-gradient(90deg,#22d3ee,#a78bfa);color:#0f172a;font-weight:700;padding:.7em 1.2em;border-radius:999px}
.new-art{position:relative;aspect-ratio:1;max-height:100%}
.new-art span{position:absolute;border-radius:24%;background:linear-gradient(135deg,#22d3ee,#6366f1);inset:10% 30% 30% 10%;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.new-art span:nth-child(2){inset:35% 5% 5% 40%;background:linear-gradient(135deg,#f472b6,#a78bfa);border-radius:50%}
.new-art span:nth-child(3){inset:5% 5% 65% 65%;background:#fde047;border-radius:30%}
.new-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.new-cards div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:.8em 1em;backdrop-filter:blur(6px)}

/* Bau-Steine (Animation) */
.ba-bricks{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(var(--cols,10),1fr);grid-auto-rows:1fr;pointer-events:none}
.ba-bricks i{display:block;border:2px solid var(--ink);border-radius:4px;background:var(--c);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),inset 0 4px 0 rgba(255,255,255,.35);
  transform:translateY(-120vh);opacity:0;position:relative}
.ba-bricks i::after{content:"";position:absolute;inset:18% 22% auto;height:28%;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0 40%, transparent 45%) 0 0/50% 100% repeat-x}
.ba-bricks.drop i{animation:drop .45s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:var(--d)}
.ba-bricks.lift i{transform:none;opacity:1;animation:lift .5s ease-in forwards;animation-delay:var(--d)}
@keyframes drop{from{transform:translateY(-120%);opacity:1}to{transform:none;opacity:1}}
@keyframes lift{to{transform:translateY(-30%) scale(.2) rotate(40deg);opacity:0}}

/* ---------- Ablauf ---------- */
.steps{background:var(--paper)}
.step-list{list-style:none;padding:0;margin:3rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 1.6rem}
.step{--c:var(--red);background:var(--c);color:#fff;border:4px solid var(--ink);border-radius:8px;padding:2rem 1.4rem 1.6rem;box-shadow:inset 0 -10px 0 rgba(0,0,0,.2),var(--shadow);margin-top:14px}
.step::before{left:12%;right:12%;top:-16px;height:14px;background:
  radial-gradient(ellipse 16px 10px at 50% 100%,var(--c) 0 94%,transparent 100%) 0 0/48px 16px repeat-x;filter:drop-shadow(0 -4px 0 var(--ink))}
.s-blue{--c:var(--blue)}.s-green{--c:var(--green)}
.step h3{color:#fff}
.step p{margin:0}
.step strong{background:rgba(0,0,0,.25);padding:0 .2em}
.step-no{position:absolute;top:-28px;right:14px;width:52px;height:52px;display:grid;place-items:center;font-family:var(--pixel);font-size:1.1rem;
  background:var(--yellow);color:var(--ink);border:4px solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}

/* ---------- Preise ---------- */
.prices{background:var(--night);color:#fff;
  background-image:radial-gradient(circle at 40px 40px,#25255a 0 20px,transparent 21px);background-size:80px 80px}
.prices .kicker{color:var(--yellow)}
.placeholder-banner{background:#fff;color:var(--ink);border:3px dashed var(--red);padding:.8rem 1rem;border-radius:6px;max-width:760px}
.placeholder-banner.small{font-size:.95rem;margin:0 0 .6rem}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.price-card{--c:#fff;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:8px;padding:1.6rem 1.4rem;margin-top:14px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08),6px 6px 0 #000}
.price-card::before{left:12%;right:12%;top:-16px;height:14px;background:
  radial-gradient(ellipse 16px 10px at 50% 100%,var(--c) 0 94%,transparent 100%) 0 0/48px 16px repeat-x;filter:drop-shadow(0 -4px 0 var(--ink))}
.price-card.featured{--c:var(--yellow);background:var(--yellow);transform:translateY(-10px)}
.price{font-family:var(--pixel);font-size:.85rem;background:var(--ink);color:var(--yellow);display:inline-block;padding:.5rem .7rem;border-radius:4px}
.price-card ul{padding-left:1.1rem;margin:.8rem 0 0}
.price-intro{max-width:640px;margin:0 0 1.4rem}
.bill-toggle{display:inline-flex;gap:.9rem;border:0;margin:0;padding:14px 0 0}
.bill-toggle legend{font-family:var(--pixel);font-size:.6rem;color:var(--yellow);padding:0;margin-bottom:.7rem}
.bill-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.bill-opt{--c:#fff;--cd:#bbb;position:relative;font-family:var(--pixel);font-size:.75rem;cursor:pointer;color:var(--ink);background:var(--c);
  padding:.9rem 1.3rem;border:3px solid var(--ink);border-radius:6px;box-shadow:0 6px 0 var(--cd),0 6px 0 3px #000;transition:transform .1s}
.bill-opt::before{content:"";position:absolute;left:14%;right:14%;top:-11px;height:10px;pointer-events:none;
  background:radial-gradient(ellipse 10px 6px at 50% 100%,var(--c) 0 97%,transparent 100%) 0 0/30px 12px repeat-x;filter:drop-shadow(0 -3px 0 var(--ink))}
.bill-opt:hover{transform:translateY(-2px)}
.bill-toggle input:checked+.bill-opt{--c:var(--red);--cd:var(--red-d);color:#fff;transform:translateY(4px);box-shadow:0 2px 0 var(--cd),0 2px 0 3px #000}
.bill-toggle input:checked+.bill-opt::after{content:" ✓"}
.bill-toggle input:focus-visible+.bill-opt{outline:4px solid var(--yellow);outline-offset:4px}
.bill-note{margin:1.1rem 0 0;font-size:1rem;color:#dfe3ff}
.bill-buy-only{display:none}
.prices:has(#bill-buy:checked) .bill-buy-only{display:block}
.prices:has(#bill-buy:checked) p.price.bill-buy-only{display:inline-block}
.prices:has(#bill-buy:checked) .bill-abo-only{display:none}
.price-scope{margin:-.3rem 0 .8rem;font-weight:700}
.price b{font-size:1.25rem;color:var(--yellow)}
.price span,.price small{font-family:var(--body);color:#fff;font-size:.95rem}
.price small{display:inline-block;margin-top:.4rem}
.price-flag{position:absolute;top:-14px;right:-10px;margin:0;font-family:var(--pixel);font-size:.55rem;background:var(--red);color:#fff;border:3px solid var(--ink);padding:.4rem .55rem;border-radius:4px;transform:rotate(4deg)}
.extras{margin-top:3rem;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:8px;padding:1.4rem 1.6rem;box-shadow:6px 6px 0 #000;max-width:760px}
.extras h3{font-size:.85rem}
.extras-list{list-style:none;margin:0;padding:0}
.extras-list li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.55rem 0;border-bottom:3px dotted #ccc}
.extras-list li:last-child{border-bottom:0}
.extras-list b{font-family:var(--pixel);font-size:.7rem;white-space:nowrap;background:var(--yellow);border:2px solid var(--ink);padding:.3rem .45rem;border-radius:4px}
.price-fine{margin:1.4rem 0 0;font-size:.95rem;color:#dfe3ff}

/* ---------- Kontakt ---------- */
.contact{background:#ffe3ef}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.mail{font-size:1.3rem;font-weight:700}
.form{background:#fff;border:4px solid var(--ink);border-radius:8px;padding:1.6rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem}
.form label{font-weight:700;margin-top:.5rem}
.form input,.form textarea{font:inherit;font-size:1rem;padding:.7rem .8rem;border:3px solid var(--ink);border-radius:6px;background:var(--paper)}
.form input:focus,.form textarea:focus{outline:4px solid var(--blue);outline-offset:1px}
.form .btn{align-self:flex-start;margin-top:1.4rem}
.form-status{margin:.4rem 0 0;font-weight:700;color:var(--green-d)}

/* ---------- Footer ---------- */
.footer{background:var(--green);color:#fff;padding-top:2rem}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}
.footer a{color:#fff;font-family:var(--pixel);font-size:.6rem;margin-left:1.2rem}
.footer p{margin:0}
.ground{height:36px;margin-top:2rem;border-top:4px solid var(--ink);
  background:radial-gradient(circle at 18px 0,#1aa548 0 8px,transparent 9px) 0 0/36px 36px,#7a4a1f;
  box-shadow:inset 0 10px 0 #00852b}

/* ---------- Unterseiten ---------- */
.legal{padding:4rem 0;min-height:60vh}
.legal h1{font-size:clamp(1.1rem,3vw,1.8rem)}
.legal h2{font-size:1rem;margin-top:2.2rem}
.legal .ph{background:#fff3b0;border:2px dashed var(--red);padding:.05em .35em;border-radius:4px;font-weight:700}
.legal .box{background:#fff;border:4px solid var(--ink);border-radius:8px;padding:1.6rem;box-shadow:var(--shadow);max-width:820px}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;padding:1rem;background:var(--yellow);border-bottom:4px solid var(--ink)}
  .nav.open{display:flex}
  .step-list,.price-grid,.contact-grid{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .brick{opacity:.35;scale:.7}
  .ba{aspect-ratio:auto;height:440px}
  .ba-old{grid-template-columns:30% 1fr}
  .new-hero{grid-template-columns:1fr}
  .new-art{display:none}
  .new-nav span{display:none}
  .new-cards{grid-template-columns:1fr;gap:.5em}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .old-marquee span{padding-left:0}
}

/* ---------- Terminbuchung ---------- */
[hidden]{display:none !important}
.booking{background:linear-gradient(#fff6c2,#ffe98a);}
.booking-box{margin-top:2rem;background:#fff;border:4px solid var(--ink);border-radius:8px;box-shadow:var(--shadow);padding:1.6rem;max-width:960px}
.booking-steps{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0 0 1.4rem;padding:0}
.booking-steps li{font-family:var(--pixel);font-size:.6rem;padding:.55rem .7rem;border:3px solid var(--ink);border-radius:6px;background:#eee;color:#555;display:flex;align-items:center;gap:.5rem}
.booking-steps li span{display:inline-grid;place-items:center;width:1.6em;height:1.6em;background:#fff;border:2px solid var(--ink);border-radius:3px;color:var(--ink)}
.booking-steps li.is-on{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.booking-steps li.is-done{background:var(--green);color:#fff}
.booking-h{font-size:.8rem;margin:0 0 .9rem}
.booking-pane + .booking-pane{margin-top:1.6rem}
.booking-msg{font-weight:700;margin:.8rem 0 0}
.day-strip{display:flex;gap:.8rem;overflow-x:auto;padding:14px 4px 12px;scroll-snap-type:x proximity}
.day{flex:0 0 auto;scroll-snap-align:start;width:84px;display:flex;flex-direction:column;align-items:center;gap:.15rem;font:inherit;cursor:pointer;
  background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:6px;padding:.7rem .3rem .55rem;position:relative;box-shadow:0 5px 0 var(--blue-d),0 5px 0 3px var(--ink);transition:transform .1s}
.day::before{content:"";position:absolute;left:12px;right:12px;top:-11px;height:9px;background:radial-gradient(circle at 25% 100%,var(--blue) 0 7px,transparent 8px),radial-gradient(circle at 75% 100%,var(--blue) 0 7px,transparent 8px);}
.day .dw,.day .dm{font-family:var(--pixel);font-size:.55rem}
.day b{font-family:var(--pixel);font-size:1.1rem;color:var(--yellow)}
.day small{font-size:.8rem;opacity:.9}
.day:hover{transform:translateY(-3px)}
.day.sel{background:var(--red);box-shadow:0 5px 0 var(--red-d),0 5px 0 3px var(--ink)}
.day.sel::before{background:radial-gradient(circle at 25% 100%,var(--red) 0 7px,transparent 8px),radial-gradient(circle at 75% 100%,var(--red) 0 7px,transparent 8px)}
.day:focus-visible,.slot:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}
.time-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.7rem}
.slot{font-family:var(--pixel);font-size:.7rem;padding:.8rem .4rem;cursor:pointer;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--ink);transition:transform .1s}
.slot:hover{transform:translate(-1px,-2px);background:#fff3b0}
.slot.sel{background:var(--yellow);box-shadow:inset 0 -5px 0 var(--yellow-d),3px 3px 0 var(--ink)}
.tz-note{margin:.8rem 0 0;color:#555}
.booking-form{box-shadow:none;border-width:3px;background:#fffdf5}
.picked{margin:0 0 .4rem;font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row > div{display:flex;flex-direction:column;gap:.35rem}
.form [aria-invalid="true"]{border-color:var(--red);background:#ffecec}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400 !important;margin-top:1rem !important}
.check input{width:22px;height:22px;flex:0 0 auto;margin-top:2px;accent-color:var(--red)}
.check input[aria-invalid="true"]{outline:3px solid var(--red)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.booking-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:1.4rem}
.booking-form .booking-actions .btn{margin-top:0}
.form-status.err{color:var(--red-d)}
.booking-done{text-align:left}
.booking-done:focus{outline:none}
.done-badge{display:inline-block;font-family:var(--pixel);font-size:.65rem;background:var(--green);color:#fff;border:3px solid var(--ink);padding:.5rem .7rem;border-radius:4px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink)}
.done-time{font-family:var(--pixel);font-size:.85rem;line-height:1.6;background:var(--yellow);display:inline-block;padding:.6rem .8rem;border:3px solid var(--ink);border-radius:6px}
.done-time.struck{text-decoration:line-through;background:#eee}
@media (max-width:860px){ .form-row{grid-template-columns:1fr} .booking-box{padding:1.1rem} }

/* Kontaktweg (Telefon/Video) */
.kw{border:3px solid var(--ink);border-radius:8px;padding:.6rem .9rem .9rem;margin:.9rem 0 .3rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;background:#fff}
.kw legend{font-weight:700;padding:0 .4rem}
.kw.is-invalid{border-color:var(--red);background:#ffecec}
.kw-opt{display:flex;gap:.6rem;align-items:flex-start;margin:0 !important;font-weight:400 !important;cursor:pointer;padding:.6rem .7rem;border:3px solid var(--ink);border-radius:6px;background:var(--paper)}
.kw-opt:has(input:checked){background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.kw-opt input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--red)}
.kw-opt b{display:block}
.kw-opt small{display:block;font-size:.9rem;color:#444}
@media (max-width:860px){ .kw{grid-template-columns:1fr} }
/* Absage-Seite */
.cancel-box{max-width:640px}
/* Kontaktformular (echt) */
.contact-alt{margin-top:1.6rem;background:#fff;border:3px solid var(--ink);border-radius:8px;padding:1rem 1.1rem 1.3rem;box-shadow:4px 4px 0 var(--ink);transform:rotate(-.6deg)}
.contact-alt p{margin:0 0 1rem}
.contact-alt .btn{margin-top:.4rem}
.contact-box .form-row{gap:.8rem}
.counter{margin:.1rem 0 0;text-align:right;color:#555}
.counter.warn{color:var(--red-d);font-weight:700}
.form-fallback{margin:.3rem 0 0}
.contact-done{gap:.6rem}
.contact-done:focus{outline:none}
.contact-done .booking-actions .btn{margin-top:0}
.form textarea{resize:vertical;min-height:7rem}
.form [aria-invalid="true"] + .counter{color:var(--red-d)}
.contact-done .done-badge{align-self:flex-start;margin:0}