/* ============================================================
   Creator-Kompass – Showroom V8
   Ergänzt showroom.css (wird danach geladen). Gleiche Farb-/Schriftwelt
   wie die Hauptseite: Schwarz, Forest, Papier, Weiß, Lime als Signal.
   ============================================================ */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../../../fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../../../fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../../../fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../../../fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../../../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../../../fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../../../fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:500; font-display:swap; src:url('../../../fonts/fraunces-500-italic.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../../../fonts/space-mono-400.woff2') format('woff2'); }

:root{
  --black:#0E0E0E; --forest:#0B3D24; --paper:#F3F6EF; --lime:#C8F23D;
  --green:#1A6B3A; --green-dark:#0B3D24; --green-light:#E9EFE3;
  --gray-100:#F3F6EF; --gray-300:#D5DCCD; --gray-600:#555A50;
  --radius-s:4px; --radius-m:4px; --radius-l:4px; --container:1200px;
  --font-display:"Space Grotesk","Inter",sans-serif; --font-body:"Inter",system-ui,sans-serif;
}
body{ background:var(--white); }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.015em; }
h1 em, h2 em{ font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:500; color:var(--forest); letter-spacing:0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--forest); outline-offset:3px; }

/* Skip-Link */
.skip-link{ position:absolute; left:12px; top:-60px; z-index:3000; background:var(--lime); color:var(--black); padding:.7rem 1rem; font-weight:700; border-radius:4px; }
.skip-link:focus{ top:12px; }

/* Buttons */
.btn{ border-radius:4px; font-family:var(--font-display); font-weight:700; padding:.9rem 1.5rem; }
.btn-accent{ background:var(--lime); color:var(--black); border-color:var(--lime); }
.btn-outline{ background:transparent; color:var(--black); border:1.5px solid var(--black); }
.btn-accent:hover{ background:var(--black); color:var(--lime); border-color:var(--black); box-shadow:none; }
.btn-outline:hover{ background:var(--black); color:#fff; }

/* Header wie auf der Hauptseite */
#site-header{ position:sticky; top:0; padding:0; background:#0E0E0E; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(255,255,255,.12); animation:none; }
.uh-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:72px; max-width:1240px; margin:0 auto; padding:0 24px; }
.uh-logo{ display:flex; align-items:center; flex:none; }
.uh-logo img{ height:46px; width:auto; display:block; }
.uh-links{ display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.uh-links a{ font-family:var(--font-display); font-weight:500; font-size:.95rem; color:rgba(255,255,255,.78); padding:.4rem 0; border-bottom:2px solid transparent; text-decoration:none; }
.uh-links a:hover, .uh-links a[aria-current="page"]{ color:#fff; border-color:var(--green); }
.uh-right{ display:flex; align-items:center; gap:1rem; }
.uh-btn{ display:inline-flex; align-items:center; background:var(--lime); color:var(--black); font-family:var(--font-display); font-weight:700; font-size:.92rem; padding:.7rem 1.3rem; border-radius:4px; white-space:nowrap; }
.uh-btn:hover{ background:#fff; }
.uh-toggle{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; padding:0; }
.uh-toggle span{ display:block; width:24px; height:2px; background:#fff; transition:transform .2s, opacity .2s; }
.uh-toggle.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.uh-toggle.open span:nth-child(2){ opacity:0; }
.uh-toggle.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
#site-header a:focus-visible, #site-header button:focus-visible{ outline-color:var(--lime); }
@media(max-width:900px){
  .uh-row{ padding:0 14px; gap:.6rem; }
  .uh-toggle{ display:flex; }
  .uh-right{ margin-left:auto; gap:0; }
  .uh-btn{ margin-right:.2rem; padding:.55rem .9rem; font-size:.8rem; }
  .uh-links{ position:absolute; left:0; right:0; top:72px; background:#0E0E0E; flex-direction:column; gap:0; padding:.5rem 24px 1.4rem; border-bottom:1px solid rgba(255,255,255,.12); display:none; }
  .uh-links.open{ display:flex; }
  .uh-links a{ padding:.9rem 0; font-size:1.1rem; border-bottom:1px solid rgba(255,255,255,.12); display:block; }
}
@media(max-width:480px){ .uh-logo img{ height:36px; } .uh-toggle{ width:40px; } }
@media(max-width:360px){ .uh-btn{ padding:.5rem .7rem; font-size:.74rem; } }

/* Hero (dunkel, kompakt) */
#sr-hero{ background:var(--black); color:#fff; text-align:left; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,6vw,4.5rem); }
.sr-hero-glow{ left:auto; right:-10%; top:-30%; transform:none; background:radial-gradient(circle, rgba(26,107,58,.55) 0%, transparent 68%); }
#sr-hero .eyebrow{ justify-content:flex-start; color:var(--lime); }
#sr-hero h1{ max-width:16ch; margin:0; color:#fff; font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:1.04; }
#sr-hero h1 em{ color:var(--lime); }
#sr-hero .sr-hero-sub{ margin:1.2rem 0 0; color:rgba(255,255,255,.72); max-width:58ch; }
.sr-hero-actions{ justify-content:flex-start; }
#sr-hero .btn-outline{ color:#fff; border-color:rgba(255,255,255,.55); }
#sr-hero .btn-outline:hover{ background:#fff; color:var(--black); }
#sr-hero a:focus-visible{ outline-color:var(--lime); }

/* Abschnitts-Köpfe, Labels */
.eyebrow{ font-family:"Space Mono",ui-monospace,monospace; font-weight:400; font-size:.74rem; letter-spacing:.12em; color:var(--forest); }
.eyebrow::before{ width:9px; height:9px; background:var(--forest); }
#sr-hero .eyebrow::before{ background:var(--lime); }
.sr-section{ padding:clamp(3.2rem,7vw,5rem) 0; }
.sr-section.alt{ background:var(--paper); }
.sr-section-head{ text-align:left; margin:0 0 2.2rem; max-width:720px; }
.sr-section-head .eyebrow{ justify-content:flex-start; }
.sr-section-head h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.08; }
.sr-section-head p{ color:var(--gray-600); }

/* Karten, Chips */
.sr-industry-card, .sr-module-card, .sr-problem-card, .sr-preview-card, .sr-callout, .sr-workspace-card{ border-radius:4px; }
.sr-industry-card{ border:1px solid var(--line); }
.sr-industry-card .sr-icon{ color:var(--forest); }
.sr-industry-card.active{ border-color:var(--forest); background:var(--green-light); box-shadow:0 0 0 2px var(--forest) inset; }
.sr-industry-card span{ font-weight:700; }
.sr-module-card.is-featured{ border-color:var(--forest); box-shadow:none; }
.sr-module-card.is-featured .sr-module-icon{ background:var(--forest); color:var(--lime); }
.sr-module-icon{ background:var(--green-light); color:var(--forest); border-radius:4px; }
.sr-module-fuerwen, .sr-module-cta{ color:var(--forest); }
.sr-module-card.is-locked, .sr-module-card.is-featured.is-locked{ opacity:.78; background:var(--paper); }
.sr-badge{ border-radius:2px; color:#3d4239; }
.sr-badge-demo, .sr-badge-soon{ background:var(--paper); border:1px solid var(--line); }
.sr-demo-flag{ border-radius:2px; background:var(--forest); color:var(--lime); }
.sr-problem-card .sr-problem-a svg{ color:var(--forest); }
.sr-problem-card a.sr-problem-link{ display:block; color:inherit; }
.sr-problem-card.is-link{ cursor:pointer; transition:border-color .2s, transform .2s; }
.sr-problem-card.is-link:hover{ border-color:var(--forest); transform:translateY(-3px); }
.sr-branch-chip{ border-radius:4px; }
.sr-branch-chip:hover{ border-color:var(--forest); background:var(--green-light); }
.sr-callout{ background:var(--white); }
#sr-bewerber .sr-callout, #sr-individuell .sr-callout{ border:1px solid var(--forest); }

/* Arbeitsbereich / Demos */
.sr-workspace-card{ box-shadow:none; border:1px solid var(--forest); }
.sr-step-dot::after{ background:var(--forest); }
.sr-option{ border-radius:4px; }
.sr-option.selected{ border-color:var(--forest); background:var(--green-light); color:var(--forest); }
.sr-field input, .sr-field textarea{ border-radius:4px; }
.sr-field input:focus, .sr-field textarea:focus{ border-color:var(--forest); box-shadow:0 0 0 3px rgba(26,107,58,.25); }
.sr-upload-zone{ border-radius:4px; }
.sr-upload-zone:hover, .sr-upload-zone.dragover{ border-color:var(--forest); background:var(--green-light); }
.sr-upload-zone svg, .sr-file-item .sr-file-icon, .sr-summary-item svg{ color:var(--forest); }
.sr-upload-zone .sr-upload-hint{ color:var(--gray-600); }
.sr-file-progress-bar{ background:var(--forest); }
.sr-success-icon{ background:var(--green-light); color:var(--forest); }
.sr-demo-note{ background:var(--paper); border-radius:4px; }
.sr-pv-figures{ background:var(--green-light); border-radius:4px; }
.sr-pv-figure-value{ color:var(--forest); font-family:"Anton","Space Grotesk",sans-serif; font-weight:400; letter-spacing:.01em; }
.sr-wa-bubble, .sr-chat-bubble{ border-radius:4px; }
.sr-wa-bubble{ background:var(--green-light); border-color:rgba(11,61,36,.25); }
.sr-chat-window, .sr-wa-bubble-wrap{ background:var(--paper); border-radius:4px; }
.sr-chat-bubble.bot, .sr-chat-bubble.user{ border-radius:4px; }
.sr-chat-bubble.user{ background:var(--green-light); border-color:rgba(11,61,36,.25); }
.sr-chat-quick-btn{ border-radius:4px; border-color:var(--forest); color:var(--forest); font-weight:700; }
.sr-chat-quick-btn:hover{ background:var(--forest); color:var(--lime); }
.sr-chat-textrow input{ border-radius:4px; }
.sr-chat-textrow input:focus{ border-color:var(--forest); box-shadow:0 0 0 3px rgba(26,107,58,.25); outline:none; }
.sr-chat-textrow button{ border-radius:4px; background:var(--black); color:var(--lime); }
.sr-ai-entry-result{ background:var(--green-light); border-radius:4px; }
.sr-ai-entry-result .sr-ai-entry-label{ color:var(--forest); }

/* Nächster Schritt nach jeder Demo */
.sr-workspace-cta{ max-width:640px; margin:2rem auto 0; padding:1.6rem 1.8rem; background:var(--forest); color:#fff; border-radius:4px; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; }
.sr-workspace-cta h4{ color:#fff; font-size:1.1rem; margin-bottom:.2rem; }
.sr-workspace-cta p{ color:rgba(255,255,255,.78); font-size:.9rem; margin:0; max-width:34ch; }
.sr-workspace-cta .btn{ flex:none; }
.sr-workspace-cta a:focus-visible{ outline-color:var(--lime); }

/* Footer */
#sr-footer{ background:var(--black); border-top:4px solid var(--lime); }
#sr-footer p, #sr-footer a{ color:#B8B8B2; }
#sr-footer a:hover{ color:#fff; }
#sr-footer a:focus-visible{ outline-color:var(--lime); }

.sr-noscript{ padding:2rem 0; background:var(--paper); }
.sr-noscript ul{ list-style:disc; padding-left:1.2rem; }
.sr-noscript a{ color:var(--forest); text-decoration:underline; }

@media(max-width:600px){ .sr-workspace-cta{ padding:1.3rem; } .btn{ white-space:normal; text-align:center; } }

/* Abschluss-CTA dunkel */
.sr-dark{ background:var(--black); color:#fff; }
.sr-dark .eyebrow{ color:var(--lime); }
.sr-dark .eyebrow::before{ background:var(--lime); }
.sr-dark h2{ color:#fff; }
.sr-dark h2 em{ color:var(--lime); }
.sr-dark .sr-section-head p{ color:rgba(255,255,255,.72); }
.sr-dark a:focus-visible{ outline-color:var(--lime); }