/* makertools.info · Startseite: Kopfbereich mit Bühne und Bewegung (seit 31.10.2026)
   Grundzustand ist ruhig und sichtbar. Alle Bewegungen stehen in @media (prefers-reduced-motion:no-preference).
   Einblenden beim Scrollen nur, wenn main.js die Klasse „bewegt“ an <html> setzt. */

:root{--feder:cubic-bezier(.34,1.56,.64,1);--sanft:cubic-bezier(.22,1,.36,1)}

/* ---------- Kopfbereich ---------- */
.held{position:relative;overflow:hidden;padding:40px 0 48px}
@media (min-width:960px){.held{padding:72px 0 80px}}
.held .innen{position:relative;z-index:1;display:grid;gap:36px;align-items:center}
@media (min-width:960px){.held .innen{grid-template-columns:1.15fr 1fr;gap:40px}}
.held .kicker{font:500 .85rem var(--schrift-mono);color:var(--akzent-text);letter-spacing:.04em;text-transform:uppercase}
.held h1{max-width:none;font-size:clamp(2.6rem,6.4vw,4.4rem);margin:12px 0 16px}
.held h1 .zeile{display:block;overflow:hidden;padding-bottom:.04em}
.held h1 .zeile>span{display:inline-block}
.held h1 em{font-style:normal;color:var(--akzent-text)}
.held .unter{margin-top:0;max-width:32rem}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.held-knoepfe .knopf,.held-knoepfe .knopf-rahmen{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-size:1rem;border-radius:14px}
.held-knoepfe .knopf-rahmen{box-shadow:var(--soft-hoch)}
.held-knoepfe .knopf-rahmen:hover{box-shadow:var(--soft-schwebe)}
.held-kl i{width:12px;height:12px;border-radius:3px;background:var(--kloetz);box-shadow:0 3px 8px var(--kloetz-glow)}
.held-pillen{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.held-pillen li{background:var(--flaeche);box-shadow:var(--soft-tief);border-radius:999px;padding:7px 13px;font:600 .82rem/1.2 var(--schrift-text);color:var(--leise)}
.held-pillen b{color:var(--akzent-text);font-weight:600}

/* weiche Flecken im Hintergrund */
.fleck{position:absolute;z-index:0;pointer-events:none;opacity:.55}
.fleck.a{width:520px;height:520px;right:-160px;top:-140px;background:radial-gradient(circle at 35% 35%,#f6c9a2,#f1dcc9 55%,transparent 70%);border-radius:42% 58% 63% 37%/45% 40% 60% 55%}
.fleck.b{width:380px;height:380px;left:-170px;bottom:-150px;background:radial-gradient(circle at 60% 40%,#f9dfb3,transparent 68%);border-radius:58% 42% 37% 63%/52% 61% 39% 48%}

/* Bühne */
.buehne{position:relative;height:440px;max-width:540px;width:100%;justify-self:center}
@media (max-width:520px){.buehne{height:380px}}
.platte{position:absolute;inset:40px 30px 30px 40px;background:var(--flaeche);border-radius:36px;box-shadow:var(--soft-hoch)}
.platte::after{content:"";position:absolute;inset:22px;border-radius:24px;border:2px dashed var(--linie)}
.bahn{position:absolute;inset:40px 30px 30px 40px;width:calc(100% - 70px);height:calc(100% - 70px);z-index:2;pointer-events:none}
.bahn path{fill:none;stroke:var(--akzent-hell);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 10;opacity:.55}
.bahn .punkt{fill:var(--akzent);offset-path:path("M30,330 C120,380 180,250 260,300 S420,370 460,250");offset-rotate:0deg;offset-distance:60%}

.werkblatt{position:absolute;left:50%;top:50%;width:min(250px,60%);transform:translate(-50%,-50%);background:var(--flaeche-hell);border-radius:22px;box-shadow:var(--soft-schwebe);padding:14px;z-index:3}
.werk-feld{display:flex;align-items:center;gap:8px;background:var(--flaeche);box-shadow:var(--soft-tief);border-radius:12px;padding:9px 12px;font:600 1rem var(--schrift-text);color:var(--tinte);min-height:42px}
.werk-feld small{font:500 .72rem var(--schrift-mono);color:var(--leise)}
.werk-feld .cursor{width:2px;height:20px;background:var(--akzent)}
.werk-bild{position:relative;margin-top:12px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#e9ebee}
.werk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform .9s var(--sanft);transform:scale(1.06)}
.werk-bild img.an{opacity:1;transform:none}
.werk-fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}
.werk-fuss [data-formate]{font:500 .74rem var(--schrift-mono);color:var(--akzent-text)}
.werk-laden{position:relative;overflow:hidden;background:var(--akzent);color:var(--auf-akzent);border-radius:10px;padding:7px 11px;font:600 .8rem/1 var(--schrift-text);white-space:nowrap;box-shadow:0 6px 14px var(--akzent-glow)}

.schwebt{position:absolute;z-index:4}
.karte-klein{background:var(--flaeche-hell);border-radius:16px;box-shadow:var(--soft-schwebe);padding:8px}
.karte-klein img{width:110px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.karte-klein b{display:block;font:600 .74rem var(--schrift-text);color:var(--tinte);margin:6px 2px 0}
.dateityp{font:500 .8rem var(--schrift-mono);background:var(--flaeche);box-shadow:var(--soft-hoch);border-radius:999px;padding:8px 13px;color:var(--akzent-text)}
.s1{left:-14px;top:0}.s1>div{--r:-4deg;transform:rotate(-4deg)}
.s2{right:0;top:48px}.s2>div{--r:3deg;transform:rotate(3deg)}
.s3{right:-8px;bottom:-14px}.s3>div{--r:-2deg;transform:rotate(-2deg)}
.f1{left:16px;bottom:70px}.f2{left:44%;top:0}.f3{right:-6px;top:52%}
@media (max-width:520px){.karte-klein img{width:84px}.s3{display:none}.s1{left:0}}

.turm{position:absolute;left:30px;bottom:-6px;z-index:5;width:96px;height:96px}
.turm span{position:absolute;width:30px;height:30px;border-radius:6px;background:linear-gradient(145deg,#d9a46a,#b98348);box-shadow:3px 4px 8px rgba(116,122,132,.4),inset 1px 1px 0 rgba(255,255,255,.35)}
.turm span:nth-child(1){left:0;bottom:0}.turm span:nth-child(2){left:32px;bottom:0}.turm span:nth-child(3){left:64px;bottom:0}
.turm span:nth-child(4){left:16px;bottom:32px}.turm span:nth-child(5){left:48px;bottom:32px}
.turm span:nth-child(6){left:32px;bottom:64px;background:linear-gradient(145deg,#f7b23f,var(--kloetz));box-shadow:0 6px 16px var(--kloetz-glow),inset 1px 1px 0 rgba(255,255,255,.4)}

/* ---------- Schritte: kleine Vorführungen ---------- */
.schritt-anim{display:flex;align-items:center;height:54px;margin-top:16px;border-radius:14px;background:var(--flaeche);box-shadow:var(--soft-tief);overflow:hidden}
.a-tippen{padding:0 14px;font:600 1.05rem var(--schrift-text);color:var(--tinte)}
.a-tippen span{overflow:hidden;white-space:nowrap;border-right:2px solid var(--akzent);padding-right:2px}
.a-regler{padding:0 18px}
.a-regler i{display:block;height:6px;width:100%;border-radius:6px;background:var(--grund-tief);position:relative}
.a-regler i::before{content:"";position:absolute;left:0;top:0;height:100%;width:60%;border-radius:6px;background:var(--akzent-hell)}
.a-regler i::after{content:"";position:absolute;top:-8px;left:calc(60% - 11px);width:22px;height:22px;border-radius:50%;background:var(--flaeche-hell);box-shadow:var(--soft-flach)}
.a-datei{justify-content:center;gap:10px}
.a-datei b{font:500 .8rem/1 var(--schrift-mono);background:var(--akzent);color:var(--auf-akzent);border-radius:8px;padding:6px 9px;margin:0}
.a-datei b:nth-child(2){background:var(--laser)}
.a-datei b:nth-child(3){background:var(--kloetz);color:var(--auf-kloetz)}

/* ---------- Klötzchen-Ecke: Regal mit Buchstaben-Klötzchen ---------- */
.kl-kopf{display:grid;gap:12px;align-items:end}
@media (min-width:900px){.kl-kopf{grid-template-columns:1fr 340px;gap:32px}}
.regal{display:none;position:relative;height:150px}
@media (min-width:900px){.regal{display:block}}
.klotz{position:absolute;bottom:26px;width:64px;height:64px;border-radius:12px;background:linear-gradient(145deg,#ddb07a,#b98348);box-shadow:5px 7px 14px rgba(116,122,132,.42),inset 2px 2px 0 rgba(255,255,255,.3);display:grid;place-items:center;font:800 2rem var(--schrift-titel);color:#5a3a17}
.klotz.gold{background:linear-gradient(145deg,#f8bd52,var(--kloetz));color:#5c3800;box-shadow:0 10px 24px var(--kloetz-glow),inset 2px 2px 0 rgba(255,255,255,.4)}
.klotz:nth-child(1){left:6px}.klotz:nth-child(2){left:94px}.klotz:nth-child(3){left:182px}.klotz:nth-child(4){left:270px}
.brett{position:absolute;left:0;right:0;bottom:8px;height:18px;border-radius:9px;background:var(--flaeche);box-shadow:var(--soft-hoch)}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion:no-preference){
  .fleck{animation:mt-formen 18s ease-in-out infinite alternate}
  .fleck.b{animation-duration:22s}
  .held h1 .zeile>span{transform:translateY(105%);animation:mt-hoch .9s var(--sanft) forwards}
  .held h1 .zeile:nth-child(2)>span{animation-delay:.12s}
  .held h1 .zeile:nth-child(3)>span{animation-delay:.24s}
  .held .unter{opacity:0;animation:mt-auf .8s .45s var(--sanft) forwards}
  .held-knoepfe{opacity:0;animation:mt-auf .8s .6s var(--sanft) forwards}
  .held-pillen{opacity:0;animation:mt-auf .8s .75s var(--sanft) forwards}
  .held-knoepfe .knopf,.held-knoepfe .knopf-rahmen{transition:transform .3s var(--feder),box-shadow .3s}
  .held-knoepfe .knopf:hover,.held-knoepfe .knopf-rahmen:hover{transform:translateY(-3px)}
  .held-knoepfe .pfeil{display:inline-block;transition:transform .3s var(--feder)}
  .held-knoepfe .knopf:hover .pfeil{transform:translateX(4px)}

  .platte{opacity:0;animation:mt-platte 1s .2s var(--sanft) forwards}
  .bahn path{animation:mt-laufen 3s linear infinite}
  .bahn .punkt{animation:mt-fahren 7s ease-in-out infinite alternate}
  .werkblatt{opacity:0;animation:mt-werkblatt 1s .55s var(--feder) forwards}
  .werk-feld .cursor{animation:mt-blink 1s steps(1) infinite}
  .werk-laden.puls::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);animation:mt-glanz .9s ease-out}
  .schwebt{opacity:0;animation:mt-rein .9s var(--feder) forwards}
  .schwebt>div{animation:mt-schweben 6s ease-in-out infinite}
  .s1{animation-delay:.9s}.s2{animation-delay:1.05s}.s3{animation-delay:1.2s}
  .s2>div{animation-delay:-2s}.s3>div{animation-delay:-4s}
  .f1{animation-delay:1.35s}.f1>div{animation-duration:5s}
  .f2{animation-delay:1.45s}.f2>div{animation-duration:7s;animation-delay:-1s}
  .f3{animation-delay:1.55s}.f3>div{animation-duration:5.5s;animation-delay:-3s}
  .turm span{opacity:0;animation:mt-fallen .7s var(--feder) forwards}
  .turm span:nth-child(1){animation-delay:1.7s}.turm span:nth-child(2){animation-delay:1.82s}.turm span:nth-child(3){animation-delay:1.94s}
  .turm span:nth-child(4){animation-delay:2.1s}.turm span:nth-child(5){animation-delay:2.22s}.turm span:nth-child(6){animation-delay:2.4s}

  .a-tippen span{width:0;animation:mt-tippen 4s steps(7) infinite}
  .a-regler i::before{animation:mt-breit 3.6s ease-in-out infinite alternate}
  .a-regler i::after{animation:mt-knauf 3.6s ease-in-out infinite alternate}
  .a-datei b{animation:mt-hops 2.4s var(--feder) infinite}
  .a-datei b:nth-child(2){animation-delay:.2s}.a-datei b:nth-child(3){animation-delay:.4s}

  .kachel{transition:transform .45s var(--sanft),box-shadow .45s}
  .kachel .bild img{transition:transform .7s var(--sanft)}
  .kachel:hover .bild img{transform:scale(1.07)}
  .kachel .neu{animation:mt-wippen 2.8s ease-in-out infinite}

  /* Einblenden beim Scrollen (nur mit JavaScript) */
  .bewegt .zeig{opacity:0;transform:translateY(30px);transition:opacity .8s var(--sanft),transform .8s var(--sanft)}
  .bewegt .zeig.da{opacity:1;transform:none}
  .bewegt .schritte li::before{transform:scale(.4);opacity:0;transition:transform .7s var(--feder),opacity .4s}
  .bewegt .schritte li.da::before{transform:none;opacity:1}
  .bewegt .regal .klotz{transform:translateY(-190px) rotate(-18deg);opacity:0;transition:transform .9s var(--feder),opacity .3s,rotate .35s var(--feder)}
  .bewegt .regal .klotz:nth-child(2){transform:translateY(-230px) rotate(14deg)}
  .bewegt .regal .klotz:nth-child(3){transform:translateY(-210px) rotate(-8deg)}
  .bewegt .regal .klotz:nth-child(4){transform:translateY(-250px) rotate(20deg)}
  .bewegt .regal.da .klotz{transform:none;opacity:1}
  .bewegt .regal.da .klotz:nth-child(2){transition-delay:.12s}
  .bewegt .regal.da .klotz:nth-child(3){transition-delay:.24s}
  .bewegt .regal.da .klotz:nth-child(4){transition-delay:.36s}
  .regal .klotz:hover{rotate:-8deg}
}
@keyframes mt-formen{0%{border-radius:42% 58% 63% 37%/45% 40% 60% 55%;transform:none}100%{border-radius:61% 39% 42% 58%/38% 58% 42% 62%;transform:translate(-30px,24px) rotate(14deg)}}
@keyframes mt-hoch{to{transform:none}}
@keyframes mt-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mt-platte{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes mt-werkblatt{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mt-blink{50%{opacity:0}}
@keyframes mt-glanz{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes mt-rein{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mt-schweben{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) * -1))}}
@keyframes mt-laufen{to{stroke-dashoffset:-64}}
@keyframes mt-fahren{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes mt-fallen{0%{opacity:0;transform:translateY(-120px) rotate(-12deg)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes mt-tippen{0%,10%{width:0}50%,85%{width:4.6ch}100%{width:0}}
@keyframes mt-breit{from{width:20%}to{width:80%}}
@keyframes mt-knauf{from{left:calc(20% - 11px)}to{left:calc(80% - 11px)}}
@keyframes mt-hops{0%,60%,100%{transform:none}30%{transform:translateY(-9px)}}
@keyframes mt-wippen{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.06)}}

/* „Jetzt gefragt“: saisonale Reihe über den Filtern (01.11.2026) */
.saison{margin-top:30px}
.saison h3{margin:0;font-size:1.35rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.saison h3 span{font-family:var(--schrift-mono);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--akzent-text)}
.saison .kacheln{margin-top:14px}

/* Suche und Anlass-Filter über den Kacheln (Phase 2, 01.11.2026) */
.gen-suche{margin-top:30px;max-width:36rem}
.gen-suche[hidden]{display:none}
.gen-suche label{display:block;font-weight:600;font-size:.95rem;color:var(--leise);margin-bottom:8px}
.gen-suche-feld{position:relative}
.gen-suche input{width:100%;box-sizing:border-box;border:0;background:var(--flaeche);box-shadow:var(--soft-tief);border-radius:999px;padding:14px 48px 14px 20px;font:500 1rem/1.2 var(--schrift-text);color:var(--tinte);-webkit-appearance:none;appearance:none}
.gen-suche input::placeholder{color:var(--leise);opacity:.85}
.gen-suche input::-webkit-search-cancel-button{display:none}
.gen-suche input:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.gen-suche-leeren{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--leise);font-size:1.4rem;line-height:1;cursor:pointer}
.gen-suche-leeren:hover{background:var(--grund)}
.gen-suche-leeren[hidden]{display:none}
.filter.anlaesse{margin-top:14px}
.such-leer{margin-top:24px;padding:20px;border-radius:var(--r-karte);background:var(--flaeche);box-shadow:var(--soft-flach);max-width:40rem}
.such-leer[hidden]{display:none}
.such-leer p{margin:0 0 14px;line-height:1.5}
.such-leer a{color:var(--akzent-text)}
.saison[hidden]{display:none}