/* Gedankenspiel 28.10.2026: Branchenseite Gastronomie im SoundCloud-Look (baut auf sc-stil.css auf).
   Nur Entwurf in _farbe, nie committen. */

/* ---------- Hero: ein grosses Foto mit Text ---------- */
.sc-ghero{padding:24px 0 0!important;background:transparent!important}
.sc-ghero > .wrap{max-width:1280px}
.sc-gbuehne{position:relative;height:clamp(480px,42vw,580px);border-radius:12px;overflow:hidden;background:#222}
.sc-gbuehne > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;animation:sc-zoom 14s ease-out forwards}
.sc-gbuehne::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.1) 100%)}
.sc-gtext{position:absolute;z-index:1;left:clamp(24px,7%,100px);right:24px;top:50%;transform:translateY(-50%);max-width:820px;text-align:left}
.sc-gtext *{text-align:left}
.sc-gtext .crumbs{color:#D0D0D0!important;font-size:14px;font-weight:600;margin:0 0 18px}
.sc-gtext .crumbs a{color:#fff!important;text-decoration:none}
.sc-gtext h1{font-size:clamp(38px,5.2vw,72px)!important;max-width:none!important}
.sc-gtext .sc-titel,.sc-gtext .sc-sub,.sc-gtext .sc-akt,.sc-gtext .crumbs{opacity:0;transform:translateY(18px);animation:sc-hoch .8s cubic-bezier(.2,.7,.2,1) forwards}
.sc-gtext .sc-titel{animation-delay:.08s}.sc-gtext .sc-sub{animation-delay:.2s}.sc-gtext .sc-akt{animation-delay:.32s}
.sc-meta{position:absolute;z-index:1;right:20px;bottom:18px;color:#CFCFCF;font-size:13px;font-weight:600}

/* ---------- Einstieg: Text links, Anmeldung rechts ---------- */
.sc-intro{padding:64px 0 24px!important}
.sc-intro .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:start}
.sc-intro .lead{font-size:19px!important;line-height:1.6;color:#D6D6D6!important;margin:0 0 26px;max-width:none}
.sc-intro .chips-zeile{justify-content:flex-start!important;margin:0!important;display:flex;flex-wrap:wrap;gap:8px}
.sc-intro .chips-zeile span{background:#242424!important;color:#fff!important;border:0!important;border-radius:999px;font-weight:600;padding:7px 14px}
.sc-intro .starter{background:#1E1E1E!important;border:0!important;border-radius:12px;padding:30px!important;margin:0!important;box-shadow:none!important;text-align:left}
.sc-intro .starter h2{font-size:28px!important;text-align:left;margin:0 0 6px!important}
.sc-intro .starter .sub,.sc-intro .su-ok-box{color:#A3A3A3!important;text-align:left;font-size:14px}
.sc-intro .su-row{display:flex;flex-direction:column;gap:10px;margin:18px 0 12px}
.sc-intro .su-row input{height:48px;background:#2A2A2A!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:0 22px!important;font-size:16px;width:100%}
.sc-intro .su-row .btn{height:48px;width:100%}
.sc-intro .su-ok-box a{color:#fff}

/* ---------- Beispielseite auf Foto ---------- */
.sc-zeigen{position:relative;margin:56px auto 0!important;max-width:1280px;width:calc(100% - 32px);border-radius:12px;overflow:hidden;padding:64px 0 44px!important}
.sc-zeigen-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;filter:saturate(.8)}
.sc-zeigen::before{content:"";position:absolute;inset:0;background:rgba(12,12,12,.78);z-index:0}
.sc-zeigen .wrap{position:relative;z-index:1}
.sc-zeigen .buehne{margin:0 auto!important;max-width:1000px}
.buehne-zeile{color:#9A9A9A!important;font-size:13.5px!important;text-align:center}

/* ---------- Inhaltsabschnitte ---------- */
main section.band{background:transparent!important}
main > section:not(.sc-ghero):not(.sc-intro):not(.sc-zeigen):not(.sc-trend):not(.sc-banner):not(.sc-gschluss){padding:96px 0 40px!important}
.sec-head{text-align:left!important;margin-left:0!important;max-width:880px}
.sec-head .lead{font-size:18px!important;color:#BDBDBD!important;max-width:44em;margin-left:0!important}
.sec-head h2{margin:10px 0 18px!important}
.mono{color:var(--accent-text)!important;font-family:inherit!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase;font-size:13px!important}
main h3{color:#fff}
.wrap.schmal p{font-size:17.5px;line-height:1.7;color:#C8C8C8}
.wrap.schmal h2,.wrap.schmal .sec-head{text-align:center!important;margin-left:auto!important;margin-right:auto!important}

/* So funktioniert es: grosse Nummern wie bei den Schritten */
.schritte{gap:16px!important}
.schritte li{background:#1E1E1E!important;border:0!important;border-radius:8px!important;padding:28px!important;box-shadow:none!important}
.schritte .s-nr{display:block!important;width:auto!important;height:auto!important;background:var(--verlauf-text,var(--accent))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;font-size:64px!important;font-weight:900;line-height:1;letter-spacing:-.05em;margin-bottom:14px;border:0!important;box-shadow:none!important}

/* Brand Hub */
.hb-punkte li{color:#BDBDBD;border-color:#2A2A2A!important}
.hb-punkte b{color:#fff}

/* Kanaele */
.kb-kanaele li{background:#1E1E1E!important;border-color:#2A2A2A!important;color:#fff}
.kb-kanaele li b{color:#fff}.kb-kanaele li span{color:#A3A3A3!important}
.kb-legende span{color:#BDBDBD!important}

/* Ideen: Reihen mit Foto-Kacheln zum Wischen */
.ziel-kopf{margin:52px 0 16px!important;display:flex;align-items:center;gap:12px}
.ziel-kopf h3{font-size:24px!important;font-weight:900;letter-spacing:-.02em;margin:0}
.ideen{display:flex!important;gap:16px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#3A3A3A transparent;grid-template-columns:none!important}
.idee{flex:0 0 260px;scroll-snap-align:start;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;text-decoration:none;display:flex!important;flex-direction:column}
.idee .sc-bild-q{aspect-ratio:1;border-radius:6px;margin-bottom:12px}
.idee:hover .sc-bild-q img{transform:scale(1.06)}
.idee:hover .sc-play{opacity:1;transform:none}
.idee h3{font-size:17px!important;margin:0 0 6px!important;color:#fff}
.idee p{font-size:14.5px!important;color:#A3A3A3!important;line-height:1.5;margin:0}
.idee small,.idee .rezept{color:var(--accent-text)!important}
.hinweis{color:#9A9A9A!important}

/* Woche */
.zyklus li{border-color:#2A2A2A!important;color:#BDBDBD}
.zyklus li::before{background:#1E1E1E!important;color:#fff!important;border-color:#333!important}
.zyklus li.tag::before{background:var(--verlauf-knopf,var(--accent))!important;border:0!important}
.zyklus b{color:#fff}
.zyklus small{color:var(--accent-text)!important}

/* Google: vier Fehler als Kacheln */
.vier > div{background:#1E1E1E!important;border:0!important;border-radius:8px!important;padding:24px!important;box-shadow:none!important}
.vier p{font-size:15px!important;color:#A3A3A3!important}

/* Werkzeuge */
.feat{background:#1E1E1E!important;border:0!important;border-radius:8px!important;box-shadow:none!important;transition:background .25s,transform .25s}
.feat:hover{background:#262626!important;transform:translateY(-3px)}
.feat p{color:#A3A3A3!important}
.feat a{color:#fff!important;font-weight:700}

/* FAQ */
.faq details{background:#1E1E1E!important;border:0!important;border-radius:8px!important;margin-bottom:8px!important;padding:0 22px!important}
.faq summary{color:#fff!important;font-weight:800;padding:20px 0!important}
.faq details p{color:#BDBDBD!important;font-size:16px!important}

/* Links im Fliesstext */
main p a{color:#fff;text-decoration-color:var(--accent)}

/* ---------- Schluss mit Foto ---------- */
.sc-gschluss{position:relative;margin:80px auto 40px!important;max-width:1280px;width:calc(100% - 32px);border-radius:12px;overflow:hidden;padding:110px 0!important;text-align:center}
.sc-gschluss > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.sc-gschluss::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.7),rgba(12,12,12,.88));z-index:0}
.sc-gschluss .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.sc-gschluss h2{font-size:clamp(30px,4.2vw,54px)!important;max-width:18em;text-align:center}
.sc-gschluss h2 em.hl{display:block;margin-top:.15em}
.sc-gschluss .lead{color:#E0E0E0!important;margin:24px auto 30px;max-width:36em;text-align:center}
.sc-gschluss .s13{color:#BDBDBD!important;margin-top:22px}

@media (max-width:860px){
  .sc-gbuehne{height:560px}
  .sc-gbuehne::after{background:linear-gradient(0deg,rgba(0,0,0,.85) 15%,rgba(0,0,0,.35) 75%,rgba(0,0,0,.2))}
  .sc-gtext{left:20px;right:20px;top:auto;bottom:52px;transform:none}
  .sc-meta{left:20px;right:auto;bottom:18px}
  .sc-intro .wrap{grid-template-columns:1fr;gap:32px}
  .sc-intro .lead{font-size:17px!important}
  .idee{flex-basis:72%}
  main > section:not(.sc-ghero):not(.sc-intro):not(.sc-zeigen):not(.sc-trend):not(.sc-banner):not(.sc-gschluss){padding:72px 0 24px!important}
  .sc-zeigen{padding:44px 0 28px!important}
}
@media (prefers-reduced-motion:reduce){
  .sc-gbuehne > img{animation:none}
  .sc-gtext .sc-titel,.sc-gtext .sc-sub,.sc-gtext .sc-akt,.sc-gtext .crumbs{opacity:1;transform:none;animation:none}
}

/* Nachbesserungen nach Sichtpruefung */
.sc-zeigen-bg{z-index:0}
.sc-zeigen::before{z-index:1;background:linear-gradient(180deg,rgba(12,12,12,.9),rgba(12,12,12,.72))}
.sc-zeigen .wrap{z-index:2}
.sc-intro .starter::before,.sc-intro .starter::after{display:none!important}
.schritte li{text-align:left!important}
.schritte li h3,.schritte li p{text-align:left!important}
.feat,.feat h3,.feat p{text-align:left!important}
.feat{padding:26px!important}
.ideen{margin:0!important}
.idee{margin:0!important}
.sc-gschluss > img{z-index:0}
.sc-gschluss::before{z-index:1}
.sc-gschluss .wrap{z-index:2}
#cta.sc-gschluss h2,#cta.sc-gschluss p{text-align:center!important}
.faq summary{justify-content:space-between!important;text-align:left!important;gap:16px}
.faq details,.vier > div,.feat,.schritte li{background:#1F1F1F!important;outline:1px solid #262626}
.idee,.idee h3,.idee p,.idee small{text-align:left!important}
.ideen{scroll-padding-left:0}
.ideen{justify-content:flex-start!important;flex-wrap:nowrap!important}
.idee *{text-align:left!important;justify-content:flex-start!important}





/* === Grafiken dunkel (erzeugt 29.10.2026 aus den Regeln in gastro-sc.html: helle Flaechen, dunkle Schrift und
   Animationsfarben gespiegelt; Linien und Grundwerte ueber Variablen in den Buehnen) === */
.buehne,.am,.vier,.zyklus,.schritte,.chips-zeile,.wk-balken{--bg:#161616;--card:#1E1E1E;--karte2:#1A1A1A;--soft:#262626;--fg:#F2F2F2;--muted:#A3A3A3;--faint:#7A7A7A;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--accent-soft:rgba(224,36,107,.2);--accent-text:#FF6E9E;color:var(--fg)}
html .chips-zeile span{background:#1E1E1E}
html .buehne{background:linear-gradient(160deg,#1E1E1E,#151515)}
html .np-ava{background:#2E2E2E}
html .np-karte{background:#1E1E1E}
html .np-st.mit{color:#FF6E9E}
html .np-push{background:#1E1E1E}
html .np-push i{background:#2E2E2E}
html .gs-zeiten b{color:#FF6E9E}
html .gs-tische i{background:#1E1E1E}
html .gs-tische i.voll{background:#2E2E2E}
@keyframes gs-besetzt-d{from{background:#1E1E1E;border-color:var(--line2)}to{background:#2E2E2E;border-color:transparent}}
@keyframes gs-frei-d{0%,100%{background:#1E1E1E}50%{background:var(--accent-soft,rgba(224,36,107,.2))}}
html .schritte li{background:#1E1E1E}
html .kb-kanaele li{background:#1E1E1E}
html .zyklus li::before{background:#1E1E1E}
html .vier div{background:#1E1E1E}
html .wk-balken b::before{background:rgba(224,36,107,.2)}
html .idee .am{--accent-soft:rgba(224,36,107,.2);background:linear-gradient(160deg,#1E1E1E,#151515)}
html .am{background:#1E1E1E}
html .hb-fenster{background:#1E1E1E}
html .hb-leiste{background:#242424}
html .hb-profil{background:#1E1E1E}
html .hb-tabs span{background:#1E1E1E}
html .hb-k{background:#1E1E1E}
@keyframes hb-tab-d{0%,15%{background:var(--m);border-color:var(--m);color:#fff}17%,100%{background:#1E1E1E;border-color:var(--line);color:var(--muted)}}
html .gs-tische i.voll{animation:gs-besetzt-d .4s ease-out both}
html .gs-tische i.frei{animation:gs-frei-d 2.4s 1.6s ease-in-out infinite}
html .hb-tabs span{animation:hb-tab-d 9s infinite}
@media (prefers-reduced-motion:reduce){html .gs-tische i.voll,html .gs-tische i.frei,html .hb-tabs span{animation:none}}
/* === Ende Grafiken dunkel === */

/* Zentriert und schwarz (29.10.2026): Abschnittskoepfe mittig wie auf der Startseite, keine grauen Wechselflaechen mehr */
.band{background:transparent!important}
.sec-head{display:flex!important;flex-direction:column;align-items:center;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.sec-head h2,.sec-head .mono,.sec-head .lead{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.sec-head .lead{max-width:40em}

/* Anmeldekarte (29.10.2026): Feld in normaler Hoehe, Ueberschrift etwas leichter und mit mehr Zeilenabstand */
.starter h2{font-weight:800!important;line-height:1.08!important;letter-spacing:-.025em!important;margin-bottom:10px!important}
.starter .su-row{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.starter .su-row input{height:52px!important;min-height:52px;padding:0 20px!important;font-size:16px;width:100%;box-sizing:border-box;background:#2A2A2A;border:1px solid rgba(255,255,255,.12);color:#fff}
.starter .su-row input:focus{outline:2px solid var(--accent);outline-offset:1px}

/* Virtueller Feed (29.10.2026): wie der Feed im Brand Hub, dunkel, echte Fotos, ruhige Bewegung */
.fd{position:relative;max-width:1000px;margin:26px auto 0;padding:0 0 18px;background:#161616;border:1px solid #262626;border-radius:24px;overflow:visible;text-align:left;color:#F2F2F2}
.fd img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.fd-push{position:absolute!important;right:-14px;top:-26px;z-index:3;max-width:300px!important;background:#1E1E1E!important;border-color:#333!important;color:#F2F2F2}
.fd-push b{display:block;color:#fff}
.fd-push i{background:var(--accent)!important}
.fd-kopf{border-radius:24px 24px 0 0;overflow:hidden}
.fd-cover{height:150px;position:relative}
.fd-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,#161616)}
.fd-profil{display:flex;align-items:center;gap:12px;padding:0 20px;margin-top:-34px;position:relative}
.fd-logo{flex:none;width:64px;height:64px;border-radius:18px;background:var(--accent);color:#fff;font-weight:900;font-size:20px;display:grid;place-items:center;border:3px solid #161616}
.fd-name{flex:1;min-width:0;padding-top:28px}
.fd-name b{display:block;font-size:18px;color:#fff}
.fd-name small{color:#A3A3A3;font-size:13px}
.fd-folgen{margin-top:28px;background:#fff;color:#121212;font-weight:800;font-size:13px;padding:8px 16px;border-radius:999px}
.fd-tabs{display:flex;gap:6px;padding:16px 20px 4px;overflow-x:auto;scrollbar-width:none}
.fd-tabs span{flex:none;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;border:1px solid #2E2E2E;color:#CFCFCF}
.fd-tabs span.an{background:var(--accent);border-color:var(--accent);color:#fff}
.fd-tabs i{font-style:normal;color:#8A8A8A;margin-left:3px}
.fd-tabs span.an i{color:#fff}
.fd-high{display:grid;grid-template-columns:1.1fr 1fr;gap:0;margin:16px 20px 0;background:#1E1E1E;border:1px solid #2A2A2A;border-radius:18px;overflow:hidden}
.fd-high .fd-bild{min-height:240px}
.fd-text{padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.fd-text small{font:700 11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.fd-text h3{font-size:24px;line-height:1.15;color:#fff;margin:0;text-transform:none;letter-spacing:-.02em;font-weight:800}
.fd-text h4{font-size:16px;line-height:1.25;color:#fff;margin:0;font-weight:800}
.fd-text p{margin:0;color:#BDBDBD;font-size:14px;line-height:1.45}
.fd-ticket{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding:10px 12px;border-radius:12px;background:rgba(224,36,107,.16);border:1px dashed rgba(224,36,107,.6)}
.fd-ticket span{display:flex;flex-direction:column;font-size:12px;color:#FF8BB2;font-family:var(--f-mono)}
.fd-ticket b{font-family:var(--f-body);font-size:14px;color:#fff}
.fd-ticket em{font-style:normal;font-size:12px;font-weight:800;background:var(--accent);color:#fff;padding:6px 10px;border-radius:999px;animation:fd-puls 2.6s ease-in-out infinite}
.fd-meta{display:flex;gap:14px;font-size:13px;color:#9A9A9A;margin-top:auto}
.fd-herz b{color:#fff}
.fd-herz{color:var(--accent)}
.fd-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 20px 0}
.fd-post{background:#1E1E1E;border:1px solid #2A2A2A;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.fd-post .fd-bild{aspect-ratio:4/3;position:relative}
.fd-post .fd-text{flex:1}
.fd-ohne{background:linear-gradient(160deg,#211219,#1E1E1E 60%)}
.fd-datum{position:absolute;left:10px;top:10px;width:44px;border-radius:10px;background:var(--accent);color:#fff;text-align:center;font:800 10px/1.1 var(--f-body);padding:5px 0}
.fd-datum b{display:block;font-size:18px}
.fd-platz{height:6px;border-radius:4px;background:#2E2E2E;overflow:hidden}
.fd-platz i{display:block;height:100%;width:75%;background:var(--accent);transform-origin:left;animation:fd-voll 3s ease-out both}
.fd-klein{font-size:12.5px!important;color:#9A9A9A!important}
.fd-chips{display:flex;flex-wrap:wrap;gap:5px}
.fd-chips span{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:#2A2A2A;color:#DDD}
.fd-knopf{align-self:flex-start;margin-top:auto;background:var(--accent);color:#fff;font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:999px}
.fd-zahl{color:#fff}
.fd-sterne{color:#F5B301;letter-spacing:1px}
.fd-tische{margin:4px 0}
.fd-neu{animation:fd-rein .6s cubic-bezier(.2,.8,.2,1) both}
.fd-weg{opacity:0;transform:scale(.96);transition:opacity .35s,transform .35s}
@keyframes fd-rein{from{opacity:0;transform:translateY(-18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fd-voll{from{transform:scaleX(.2)}to{transform:none}}
@keyframes fd-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (max-width:900px){.fd-raster{grid-template-columns:repeat(2,1fr)}.fd-push{right:8px}}
@media (max-width:620px){
  .fd-high{grid-template-columns:1fr}.fd-high .fd-bild{min-height:0;aspect-ratio:16/10}
  .fd-raster{grid-template-columns:1fr}.fd-raster .fd-post:nth-child(n+5){display:none}
  .fd-push{position:static!important;max-width:none!important;margin:0 12px 12px}
  .fd-profil{padding:0 14px}.fd-high,.fd-raster{margin-left:12px;margin-right:12px}.fd-tabs{padding:14px 14px 4px}
}
@media (prefers-reduced-motion:reduce){.fd *{animation:none!important}}

/* Hintergrund wie auf der Startseite (29.10.2026): Feed und Schluss liegen direkt auf Schwarz, ohne Foto-Box */
.sc-zeigen,.sc-gschluss{max-width:none!important;width:auto!important;border-radius:0!important;overflow:visible!important;background:transparent!important}
.sc-zeigen::before,.sc-gschluss::before,.sc-zeigen-bg,.sc-gschluss-bg,.sc-gschluss > img{display:none!important}
/* Feed: Fotos fuellen ihren Rahmen, Hochformate dehnen die Kachel nicht */
.fd-bild,.fd-cover{position:relative;overflow:hidden;min-height:0}
.fd-bild img,.fd-cover img{position:absolute;inset:0}
/* Feed: Zahl huepft, wenn sie steigt; Meta-Zeile mit Knopf rechts */
.fd-wert{display:inline-block;color:#9A9A9A}.fd-wert b{color:#fff}
.fd-steigt{display:inline-block}
.fd-wert.hoch,.fd-steigt.hoch{animation:fd-hoch .5s ease-out}
@keyframes fd-hoch{0%{transform:scale(1)}35%{transform:scale(1.25)}100%{transform:scale(1)}}
.fd-meta .fd-knopf{margin-top:0;margin-left:auto}
.fd-text .fd-meta{align-items:center}
/* Keine Trennstriche zwischen den Abschnitten */
.band{border-top:0!important;border-bottom:0!important}
/* Mechanik unter den Ideen pink statt gruen (wie die uebrige gruene Schrift) */
html .idee .mech{color:#FF6E9E}