/* Gastro-Ideen: die Grafik der Live-Seite gross auf der schwarzen Buehne */
.gi-buehne{order:2;position:relative;width:min(100%,760px);margin-top:clamp(36px,4.5vw,60px);padding:clamp(28px,4vw,48px);border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,#2A1520 0%,#121212 60%);box-shadow:0 0 0 1px #2A2A2A,0 60px 120px -50px rgba(0,0,0,.95),0 40px 90px -40px rgba(224,36,107,.35);display:flex;justify-content:center;opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
.gi-buehne *{text-align:left}
.gi-grafik > *{width:min(100%,460px);margin:0 auto!important;transform-origin:top center}
.gi-grafik .an-push{height:260px}
.gi-grafik .an-push .meldung{top:84px;font-size:14px}
.gi-grafik .an-push .uhr{font-size:34px}
.gi-bild figure{margin:0;max-width:300px}
.gi-bild img{display:block;width:100%;height:auto;border-radius:26px;box-shadow:0 0 0 1px #333,0 40px 80px -30px rgba(0,0,0,.9)}
.gi-buehne .schau{background:#fff;color:#16171A;border-radius:16px;padding:22px}
.gi-buehne .schau-titel{color:#16171A}
@media (prefers-reduced-motion:reduce){.gi-buehne{opacity:1;animation:none}}

/* Leitfaden-Listen (Varianten) dunkel statt weisser Karten */
.guide{list-style:none;margin:36px auto 0;padding:0;max-width:880px;display:grid;gap:14px;counter-reset:g}
.guide li{counter-increment:g;position:relative;padding:22px 24px 22px 76px!important;border-radius:12px;background:#161616!important;box-shadow:inset 0 0 0 1px #242424!important;color:#A3A3A3!important;text-align:left}
.guide li::before{content:counter(g,decimal-leading-zero);position:absolute;left:24px;top:22px;font:700 13px var(--f-mono,monospace);color:var(--accent-text)}
.guide li h3{margin:0 0 6px;color:#fff!important;font-size:18px}
.guide li p{margin:0;color:#A3A3A3!important;font-size:15px;line-height:1.6}
.guide li b{color:#fff!important}

/* Beispieltext als heller Zettel, wie er spaeter in der App steht */
.beispiel{max-width:680px;margin:28px auto;padding:20px 22px;border-radius:12px;background:#fff!important;color:#16171A!important;font-size:16px;line-height:1.6;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.beispiel span{display:block;margin-bottom:8px;font:700 12px var(--f-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:#B0185A}

/* Ideen-Uebersicht: Fotokarten wie bei den Branchen (Klassen aus sc-uebersicht.css) */
.gi-ziele{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:min(100%,1200px)}
.gi-ziel{aspect-ratio:auto;min-height:clamp(240px,24vw,320px)}
.gi-ziel::after{background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.9) 100%)}
.gi-ziel .ub-br-text{padding:16px}
.gi-ziel .ub-br-text b{font-size:clamp(16px,1.5vw,20px);hyphens:auto;-webkit-hyphens:auto}
.gi-ziel ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.35;color:#D4D4D4}
.gi-ziel li::before{content:"→ ";color:#FF7AA8}
.gi-ideen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.gi-idee{aspect-ratio:4/4.4;opacity:1;animation:none}
.gi-idee .ub-br-d{max-height:none;opacity:1}
.gi-idee .ub-br-text em{font-size:13px}
.gi-idee .ub-br-text em::before{content:"Mechanik: ";color:#A3A3A3;font-weight:600}
@media (max-width:1000px){.gi-ziele{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(180px,30%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.gi-ziel{scroll-snap-align:start}.gi-ideen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.gi-ziele{grid-auto-columns:62%}.gi-ziel{min-height:220px}.gi-ideen{grid-template-columns:1fr}.gi-idee{aspect-ratio:4/3.6}}