:root{
  --accent:#1a7f4b;--accent-hi:#22a25f;
  --bg:#fafaf8;--fg:#1c1c1a;--muted:#6b6b66;--card:#fff;--line:#e5e5e0;--err:#b3261e;--ok:#1a7f4b
}
@media(prefers-color-scheme:dark){
  :root{--bg:#141412;--fg:#ececea;--muted:#9a9a94;--card:#1e1e1b;--line:#32322e;--err:#ff8a80;--ok:#7bd8a5}
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--fg);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent)}
h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2}

/* Header / Footer */
.site-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--fg)}
.site-head nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.site-head nav a{text-decoration:none;color:var(--fg);font-size:.95rem}
.site-foot{margin-top:auto;padding:1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;text-align:center}
.site-foot a{color:var(--muted)}

/* Buttons & Forms */
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:.55rem;padding:.65rem 1.3rem;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-hi)}
.btn--sm{padding:.4rem .9rem;font-size:.9rem}
.btn--ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}
.btn--disabled{opacity:.45;pointer-events:none}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--fg);cursor:pointer;font-size:.95rem}
.inline{display:inline}
.stack{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.stack label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.95rem}
.row{display:flex;gap:1rem}.row label{flex:1}.w-third{max-width:8rem}
input,select,textarea{font:inherit;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.45rem;background:var(--card);color:var(--fg);font-weight:400}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
input[type=color]{padding:.15rem;height:2.6rem;width:5rem}

/* Layout-Bausteine */
main{max-width:70rem;margin:0 auto;padding:2rem 1.5rem;width:100%}
/* Seiten, die ihre Breite selbst über Sections regeln (Landing, Branchen):
   main ist dort nur die Landmarke fürs Vorlesen, kein Layout-Container. */
main.sections{max-width:none;padding:0}
.narrow{max-width:34rem}
.center{text-align:center}
.muted{color:var(--muted)}.small{font-size:.85rem}
.flash{max-width:70rem;margin:1rem auto 0;padding:.7rem 1.2rem;border-radius:.55rem;background:color-mix(in srgb,var(--ok) 14%,var(--bg));border:1px solid var(--ok);font-size:.95rem}
.flash--err{background:color-mix(in srgb,var(--err) 12%,var(--bg));border-color:var(--err)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;margin-top:1.5rem}
.panel{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.4rem}
.panel h2{margin-top:0;font-size:1.1rem}
.panel form{margin-top:.6rem}

/* Landing */
.hero{text-align:center;padding:4.5rem 1.5rem 3rem;max-width:52rem;margin:0 auto}
.hero em{color:var(--accent);font-style:normal}

/* ---------- Ken-Burns-Hero ---------- */
.hero--kb{position:relative;max-width:none;padding:0;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:clamp(30rem,72vh,44rem)}
.hero--kb .hero-inner{position:relative;z-index:2;max-width:52rem;padding:4.5rem 1.5rem;color:#fff}
.hero-kb-bg{position:absolute;inset:0;z-index:0}
.hero-kb-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);animation:kbShow 24s cubic-bezier(.4,0,.2,1) infinite;will-change:opacity,transform}
.hero-kb-slide:nth-child(1){animation-delay:0s}
.hero-kb-slide:nth-child(2){animation-delay:6s}
.hero-kb-slide:nth-child(3){animation-delay:12s}
.hero-kb-slide:nth-child(4){animation-delay:18s}
@keyframes kbShow{
  0%{opacity:0;transform:scale(1.04)}
  3%{opacity:1}
  22%{opacity:1;transform:scale(1.13)}
  26%{opacity:0;transform:scale(1.14)}
  100%{opacity:0;transform:scale(1.04)}
}
.hero-kb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,17,13,.52) 0%,rgba(12,17,13,.62) 55%,rgba(12,17,13,.8) 100%)}
.hero--kb h1{color:#fff}
.hero--kb em{color:#7ee0a6}
.hero--kb .lead{color:rgba(255,255,255,.92)}
.hero--kb .lead strong{color:#fff}
.hero--kb .muted{color:rgba(255,255,255,.72)}
.hero--kb .demo-link{color:#fff;border-bottom-color:#7ee0a6}
.hero--kb .btn--lg{box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}
@media(prefers-reduced-motion:reduce){
  .hero-kb-slide{animation:none;opacity:0;transform:none}
  .hero-kb-slide:nth-child(1){opacity:1}
}
.lead{font-size:1.15rem;color:var(--muted);max-width:40rem;margin:1rem auto 1.75rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem;max-width:64rem;margin:0 auto;padding:1rem 1.5rem 2rem}
.step{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.4rem}
.step span{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:700}
.step h3{margin:.7rem 0 .3rem}.step p{margin:0;color:var(--muted);font-size:.95rem}
.features,.pricing{max-width:64rem;margin:0 auto;padding:2rem 1.5rem}
.features h2,.pricing h2{text-align:center}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.5rem}
.cols h3{margin-bottom:.3rem}.cols p{margin:0;color:var(--muted)}
.price-card{max-width:24rem;margin:1.5rem auto;background:var(--card);border:2px solid var(--accent);border-radius:1rem;padding:2rem;text-align:center}
.price{font-size:2.6rem;font-weight:800;margin:0}
.price span{font-size:1rem;font-weight:400;color:var(--muted)}
.price-card ul{text-align:left;padding-left:1.2rem;color:var(--muted)}
.price-card li{margin:.35rem 0}

/* Mapping / Tabellen */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.map-grid label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:.6rem;margin:.75rem 0}
table.preview{border-collapse:collapse;font-size:.85rem;min-width:100%}
.preview th,.preview td{padding:.45rem .7rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
.preview th{background:color-mix(in srgb,var(--accent) 8%,var(--card));position:sticky;top:0}

/* Legal */
.legal h2{font-size:1.15rem;margin-top:1.8rem}
.legal p{hyphens:auto}

/* Scrollytelling & Reveals (nur mit JS aktiv, reduced-motion-safe) */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
.btn--lg{padding:.85rem 1.8rem;font-size:1.1rem}
.narrow-wide{max-width:46rem;margin:0 auto;padding:2rem 1.5rem;width:100%}

/* Demo-Video */
.demo{max-width:56rem;margin:0 auto;padding:0 1.5rem 2rem}
.demo-frame{border:1px solid var(--line);border-radius:1rem;overflow:hidden;box-shadow:0 20px 60px -30px rgba(0,0,0,.35);background:#000}
.demo-frame video{display:block;width:100%;height:auto}

/* Scrolly-Steps */
.scrolly{max-width:44rem;margin:0 auto;padding:2.5rem 1.5rem;display:flex;flex-direction:column;gap:3.5rem}
.scrolly-step{display:flex;gap:1.4rem;align-items:flex-start}
.scrolly-step .stepnum{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:1.2rem}
.scrolly-step h2{margin:0 0 .3rem}
.scrolly-step p{margin:0;color:var(--muted);font-size:1.05rem}

/* Template-Showcase */
.tpl-strip{padding:2.5rem 1.5rem;max-width:72rem;margin:0 auto}
.tpl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;margin-top:1.5rem}
.tpl-card{border:1px solid;padding:1.4rem 1.2rem;border-radius:.8rem}
.tpl-card h3{display:inline-block;margin:0 0 .3rem;padding:.15rem .55rem;border:1px solid currentColor}
.tpl-card p{margin:.4rem 0 0;font-size:.85rem}
.tpl-dot{display:block;width:.8rem;height:.8rem;border-radius:50%;margin-bottom:.8rem}

/* Template-Picker im Formular */
.tpl-picker{border:1px solid var(--line);border-radius:.6rem;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.tpl-picker legend{font-weight:600;padding:0 .3rem}
.tpl-option{display:flex;align-items:center;gap:.8rem;font-weight:400;cursor:pointer}
.tpl-swatch{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border:1px solid;font-weight:700}

/* FAQ */
.faq-teaser{padding:2rem 0}
.faq-list{margin:1.5rem 0;display:flex;flex-direction:column;gap:.6rem}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:.6rem;padding:.2rem 1.1rem}
.faq-item summary{cursor:pointer;padding:.7rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--accent);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item summary h2,.faq-item summary h3{margin:0;font-size:1.02rem;display:inline}
.faq-item p{margin:.2rem 0 1rem;color:var(--muted)}
.cta-band{text-align:center;margin:3rem 0 1rem;padding:2rem;background:color-mix(in srgb,var(--accent) 8%,var(--bg));border-radius:1rem}

/* Blog */
.blog-teaser{padding:1rem 1.5rem 3rem;max-width:72rem;margin:0 auto}
.post-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.post-list--row{flex-direction:row;flex-wrap:wrap}
.post-list--row .post-card{flex:1 1 18rem}
.post-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.3rem;text-decoration:none;color:inherit;transition:border-color .15s}
.post-card:hover{border-color:var(--accent)}
.post-card h2,.post-card h3{margin:.2rem 0 .4rem;font-size:1.1rem}
.post-card p{margin:0 0 .5rem}
.readmore{color:var(--accent);font-weight:600;font-size:.9rem}
.article h1{margin-top:.5rem}
.article h2{margin-top:2rem}
.article p,.article li{color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.article .lead{font-size:1.12rem;color:var(--muted)}
.demo-link{font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent)}
.crumb-top{font-size:.85rem;margin:0 0 1rem}.crumb-top a{text-decoration:none}

/* ---------- Scrollytelling: Excel → Website ---------- */
.morph{max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.morph-steps{display:flex;flex-direction:column;gap:clamp(3rem,12vh,7rem);padding:2rem 0 4rem}
.morph-step{display:flex;gap:1.4rem;align-items:flex-start}
.morph-step .stepnum{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:1.2rem}
.morph-step h2{margin:0 0 .3rem}
.morph-step p{margin:0;color:var(--muted);font-size:1.05rem}
.morph-stage{position:sticky;top:12vh;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:24rem;order:1}
.mock-excel{background:var(--card);border:1px solid var(--line);border-radius:.7rem;box-shadow:0 16px 50px -24px rgba(0,0,0,.4);overflow:hidden;width:min(21rem,52%);transition:opacity .6s ease,transform .6s ease;font-size:.72rem}
.mock-chrome{display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--fg) 4%,var(--card))}
.mock-chrome span{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.mock-chrome em{margin-left:.4rem;font-style:normal;color:var(--muted);font-size:.7rem}
.mock-excel table{width:100%;border-collapse:collapse}
.mock-excel th,.mock-excel td{padding:.35rem .6rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.mock-excel th{background:color-mix(in srgb,var(--accent) 10%,var(--card));transition:background .4s,color .4s}
.morph-stage[data-state="2"] .mock-excel th[data-col=name]{background:#2f6fed;color:#fff}
.morph-stage[data-state="2"] .mock-excel th[data-col=cat]{background:#b3611a;color:#fff}
.morph-stage[data-state="2"] .mock-excel th[data-col=price]{background:var(--accent);color:#fff}
.morph-stage[data-state="3"] .mock-excel{opacity:.35;transform:scale(.92) translateX(-.5rem)}
.morph-arrow{flex:none;color:var(--muted);opacity:0;transition:opacity .5s,color .5s}
.morph-stage[data-state="2"] .morph-arrow,.morph-stage[data-state="3"] .morph-arrow{opacity:1}
.morph-stage[data-state="3"] .morph-arrow{color:var(--accent)}
.mock-phone{flex:none;width:min(13rem,40%);background:var(--fg);border-radius:1.6rem;padding:.45rem;box-shadow:0 24px 60px -28px rgba(0,0,0,.55);position:relative;transition:opacity .6s ease,transform .6s ease}
.morph-stage[data-state="1"] .mock-phone{opacity:.28;transform:scale(.94)}
.morph-stage[data-state="2"] .mock-phone{opacity:.55}
.morph-stage[data-state="3"] .mock-phone{opacity:1;transform:scale(1.02)}
.mock-notch{position:absolute;top:.45rem;left:50%;transform:translateX(-50%);width:34%;height:.85rem;background:var(--fg);border-radius:0 0 .6rem .6rem;z-index:2}
.mock-screen{background:var(--bg);border-radius:1.2rem;overflow:hidden;font-size:.62rem;line-height:1.35}
.mock-hero{padding:1.2rem .7rem .6rem;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--bg)),var(--bg))}
.mock-hero b{display:block;font-size:.78rem}
.mock-hero i{color:var(--muted);font-style:normal}
.mock-chips{display:flex;gap:.3rem;justify-content:center;padding:.4rem .5rem;flex-wrap:wrap}
.mock-chips span{border:1px solid var(--line);border-radius:2rem;padding:.08rem .5rem;background:var(--card)}
.mock-rows{display:flex;flex-direction:column;gap:.35rem;padding:.4rem .55rem .6rem}
.mock-row{display:flex;gap:.45rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:.5rem;padding:.35rem .45rem;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.morph-stage[data-state="3"] .mock-row{opacity:1;transform:none}
.morph-stage[data-state="3"] .mock-row:nth-child(2){transition-delay:.12s}
.morph-stage[data-state="3"] .mock-row:nth-child(3){transition-delay:.24s}
.mock-thumb{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.4rem;background:color-mix(in srgb,var(--accent) 10%,var(--card));font-size:.85rem}
.mock-row i{color:var(--accent);font-style:normal;font-weight:700}
.mock-badge{margin:.1rem .55rem .7rem;padding:.3rem .5rem;border-radius:.5rem;background:color-mix(in srgb,var(--accent) 14%,var(--bg));color:var(--accent);font-weight:700;text-align:center;opacity:0;transition:opacity .5s ease .4s}
.morph-stage[data-state="3"] .mock-badge{opacity:1}
@media(max-width:820px){
  .morph{grid-template-columns:1fr;gap:1.5rem}
  .morph-stage{position:sticky;top:.75rem;order:0;min-height:0;padding:.5rem 0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(4px);z-index:4}
  .mock-excel{font-size:.62rem}
}

/* ---------- Design-Playground (Landing) ---------- */
.playground{max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem}
.playground h2 em{color:var(--accent);font-style:normal}
.playground-ui{margin-top:1.5rem;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--card);box-shadow:0 20px 60px -35px rgba(0,0,0,.4)}
.playground-controls{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.pg-group{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.pg-tpl{font-size:.85rem;padding:.35rem .8rem;border:1.5px solid;border-radius:2rem;cursor:pointer}
.pg-tpl.cur{outline:2px solid var(--accent);outline-offset:1px}
.pg-kind{font:inherit;font-size:.85rem;padding:.35rem .8rem;border:1px solid var(--line);border-radius:2rem;background:var(--card);color:var(--fg);cursor:pointer}
.pg-kind.cur{background:var(--accent);border-color:var(--accent);color:#fff}
.pg-color{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600}
.pg-color input{padding:.1rem;height:2rem;width:3.2rem;border:1px solid var(--line);border-radius:.4rem;background:var(--card)}
.pg-sep{width:1px;align-self:stretch;background:var(--line)}
.playground-frame-wrap{background:color-mix(in srgb,var(--fg) 4%,var(--bg));text-align:center}
.playground-frame{width:100%;height:30rem;border:0;background:#fff;display:block;margin:0 auto;transition:width .3s ease}

/* ---------- Gastro ---------- */
.gastro{max-width:72rem;margin:0 auto;padding:3rem 1.5rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.gastro-text h2{margin-top:0}
.gastro-text p{color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.gastro-list{padding-left:1.2rem;color:var(--muted)}
.gastro-list li{margin:.5rem 0}
.pill-demo{display:inline-block;padding:.05rem .55rem;border:1px solid var(--line);border-radius:2rem;font-size:.8rem;background:var(--card);white-space:nowrap}
.gastro-visual{display:flex;align-items:center;justify-content:center;gap:1.2rem}
.mock-phone--menu{width:min(13.5rem,60%)}
.mock-menu{padding:.45rem .6rem .8rem;display:flex;flex-direction:column;gap:.3rem}
.mock-mcat{font-size:.66rem;color:var(--accent);border-bottom:1.5px solid var(--accent);align-self:flex-start;margin-top:.25rem}
.mock-mi{display:flex;align-items:baseline;gap:.35rem}
.mock-dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-.15rem)}
.gastro-qr{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:.9rem;padding:1rem;color:var(--fg);font-size:.8rem;font-weight:700;text-align:center;box-shadow:0 14px 40px -22px rgba(0,0,0,.4)}
@media(max-width:820px){.gastro{grid-template-columns:1fr;gap:2rem}}

/* ---------- Vergleichstabelle ---------- */
.compare{max-width:64rem;margin:0 auto;padding:2.5rem 1.5rem}
table.comp{width:100%;border-collapse:collapse;background:var(--card);font-size:.95rem;min-width:38rem}
.comp th,.comp td{padding:.7rem .9rem;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.comp thead th{font-size:1rem}
.comp tbody th{text-align:left;font-weight:600;font-size:.9rem}
.comp-ico{display:block;font-size:1.4rem;margin-bottom:.15rem}
.comp .comp-hi{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.comp thead .comp-hi{color:var(--accent)}
.ico--ok{color:var(--ok)}.ico--no{color:var(--err)}
.bar{display:block;position:relative;height:1.5rem;border-radius:.35rem;background:color-mix(in srgb,var(--fg) 6%,var(--card));overflow:hidden;min-width:7rem}
.bar::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--ok);border-radius:.35rem;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.bar--bad::before{background:var(--err)}
.bar--mid::before{background:color-mix(in srgb,var(--fg) 35%,var(--card))}
.bar i{position:relative;z-index:1;font-style:normal;font-size:.78rem;font-weight:700;line-height:1.5rem;padding:0 .5rem;white-space:nowrap}
.js-reveal .reveal:not(.in) .bar::before{width:0}

/* ---------- Dashboard: Bilder ---------- */
.media-logo{max-height:4.5rem;max-width:100%;object-fit:contain;background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0 0/16px 16px;border-radius:.4rem;padding:.3rem}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.6rem 1rem;border:2px dashed var(--line);border-radius:.7rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;font-weight:400}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--card))}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.media-h2{margin-top:2.5rem}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;margin-top:1rem}
.media-item{display:flex;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:.7rem;padding:.7rem;align-items:center}
.media-item img{flex:none;width:4rem;height:4rem;object-fit:cover;border-radius:.5rem;background:var(--bg)}
.media-noimg{flex:none;display:grid;place-items:center;width:4rem;height:4rem;border-radius:.5rem;background:color-mix(in srgb,var(--fg) 5%,var(--card));font-size:1.4rem;opacity:.5}
.media-meta{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.media-meta strong{font-size:.9rem;line-height:1.3}
.media-actions{display:flex;gap:.7rem;align-items:center;margin-top:.25rem;flex-wrap:wrap}
.media-pick{cursor:pointer}
.media-item--empty{border-style:dashed}

/* ---------- Design-Studio ---------- */
.studio-main{max-width:80rem}
.studio{display:grid;grid-template-columns:19rem 1fr;gap:1.5rem;margin-top:1.5rem;align-items:start}
.studio-panel{position:sticky;top:1rem;display:flex;flex-direction:column;gap:1rem}
.studio-accent{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.95rem}
.studio-stage{border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--card)}
.studio-bar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.devtoggle{display:flex;gap:.3rem}
.devbtn{font:inherit;padding:.25rem .6rem;border:1px solid var(--line);border-radius:.5rem;background:var(--card);cursor:pointer}
.devbtn.cur{border-color:var(--accent);outline:1px solid var(--accent)}
.studio-frame-wrap{background:color-mix(in srgb,var(--fg) 5%,var(--bg));text-align:center;padding:0}
.studio-frame{width:100%;max-width:100%;height:34rem;border:0;background:#fff;display:block;margin:0 auto;transition:width .3s ease}
@media(max-width:900px){.studio{grid-template-columns:1fr}.studio-panel{position:static}}

/* ---------- Beispiel-Vorlagen (Landing + Import-Seite) ---------- */
.samples{max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem}
.samples h2 em{color:var(--accent);font-style:normal}
.samples-intro{max-width:42rem;margin:.6rem auto 0}
.samples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem;margin-top:1.6rem}
.sample-card{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:1.1rem 1.2rem;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.sample-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 34px -22px rgba(0,0,0,.45)}
.sample-emoji{font-size:1.7rem;line-height:1}
.sample-label{font-weight:600}
.sample-cta{color:var(--accent);font-weight:600;font-size:.85rem}
/* Import-Seite: kompakte Liste */
.samples-box{margin-top:2.5rem;border-top:1px solid var(--line);padding-top:1.5rem}
.samples-box h2{font-size:1.1rem;margin:0 0 .3rem}
.samples-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.samples-list a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:.6rem;text-decoration:none;color:inherit;background:var(--card);transition:border-color .15s}
.samples-list a:hover{border-color:var(--accent)}
.samples-ico{font-size:1.25rem}
.samples-dl{margin-left:auto;color:var(--accent);font-weight:600;font-size:.85rem;white-space:nowrap}

/* ---------- Geführte Tour ---------- */
.tour-overlay{position:fixed;inset:0;z-index:1000}
.tour-spot{position:absolute;border-radius:.7rem;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px rgba(0,0,0,.62);transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}
.tour-tip{position:absolute;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:.75rem;padding:1rem 1.1rem;box-shadow:0 24px 60px -22px rgba(0,0,0,.55);z-index:1001;max-width:calc(100vw - 24px)}
.tour-count{font-size:.72rem;color:var(--muted);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tour-title{margin:.25rem 0 .3rem;font-size:1.05rem}
.tour-body{margin:0 0 .95rem;color:var(--muted);font-size:.92rem;line-height:1.5}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.tour-nav{display:flex;gap:.5rem;align-items:center}
.tour-skip{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:.85rem;padding:.3rem .2rem}
.tour-prev{background:var(--card);border:1px solid var(--line);border-radius:.5rem;color:var(--fg);cursor:pointer;font:inherit;font-size:.85rem;padding:.4rem .85rem}
.tour-replay{color:var(--accent)!important;font-size:.8rem;font-weight:600;margin-left:.6rem;vertical-align:middle}
@media(prefers-reduced-motion:reduce){.tour-spot{transition:none}}