/* ============================================================
   Creator-Kompass — Digitale Lösungen (Showroom)
   Eigenständiges Stylesheet, nutzt exakt die Design-Tokens
   der bestehenden Creator-Kompass-Website.
   ============================================================ */

:root{
  --black:#0E0E0E;
  --gray-900:#232323;
  --gray-600:#6B6B67;
  --gray-300:#D8D8D3;
  --gray-100:#F1F1EE;
  --white:#FFFFFF;
  --green:#2FA85B;
  --green-dark:#1F7A42;
  --green-light:#E7F5EC;
  --line:rgba(14,14,14,0.10);

  --container:1280px;
  --gutter:clamp(20px, 5vw, 60px);
  --radius-s:6px;
  --radius-m:14px;
  --radius-l:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-s:.3s;
  --dur-m:.6s;

  --font-display:"Space Grotesk", sans-serif;
  --font-body:"Inter", sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  font-family:var(--font-body);
  background:var(--white);
  color:var(--black);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; line-height:1.15; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--green); outline-offset:3px; border-radius:2px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray-600);
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--green); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9rem 1.7rem; border-radius:50px; font-size:.9rem; font-weight:600;
  transition:all var(--dur-s) var(--ease); white-space:nowrap; border:1px solid transparent;
}
.btn-accent{ background:var(--black); color:var(--white); }
.btn-outline{ background:transparent; color:var(--black); border-color:var(--line); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ------------------------------------------------------------
   Header (identisches Muster zu den Creator-Kompass-Unterseiten)
   ------------------------------------------------------------ */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line);
  animation:ckHeaderEnter .7s var(--ease) both;
}
@keyframes ckHeaderEnter{ from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion: reduce){ #site-header{ animation:none; } }
#site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.logo img{ height:44px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:1.7rem; }
.nav-links a:not(.btn){ font-size:.9rem; font-weight:500; color:var(--black); white-space:nowrap; }
.nav-links .btn{ padding:.7rem 1.4rem; font-size:.85rem; }
.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ display:none; }

@media(max-width:860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,82vw); height:100vh; background:var(--white);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.6rem;
    padding:6.5rem 2rem 2rem; transform:translateX(100%); transition:transform var(--dur-m) var(--ease);
    box-shadow:-10px 0 40px rgba(0,0,0,0.08);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links .btn{ margin-top:.5rem; }
  .nav-toggle{ display:flex; position:relative; z-index:1100; }
  .nav-toggle span{ display:block; position:absolute; width:20px; height:2px; background:var(--black); transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease); }
  .nav-toggle span:nth-child(1){ transform:translateY(-6px); }
  .nav-toggle span:nth-child(3){ transform:translateY(6px); }
  .nav-toggle.open span:nth-child(1){ transform:rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:rotate(-45deg); }
}

/* ------------------------------------------------------------
   Reveal-Animation (identisch zum Hauptsystem, mit Fallback)
   ------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.no-js .reveal, .reveal.js-fallback{ opacity:1; transform:none; }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
#sr-hero{ padding:calc(var(--gutter) + 6.5rem) 0 4rem; text-align:center; position:relative; overflow:hidden; }
.sr-hero-glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%); width:60vw; height:60vw; max-width:640px; max-height:640px;
  background:radial-gradient(circle, rgba(47,168,91,0.14) 0%, transparent 70%); border-radius:50%; pointer-events:none; z-index:0;
}
#sr-hero .container{ position:relative; z-index:1; }
#sr-hero .eyebrow{ justify-content:center; margin-bottom:1.2rem; }
#sr-hero h1{ font-size:clamp(2rem, 4.6vw, 3.4rem); max-width:18ch; margin:0 auto; }
#sr-hero .sr-hero-sub{ max-width:56ch; margin:1.3rem auto 0; color:var(--gray-600); font-size:1.08rem; }
.sr-hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }

/* ------------------------------------------------------------
   Sektions-Kopf (wiederverwendetes Muster)
   ------------------------------------------------------------ */
.sr-section{ padding:5rem 0; }
.sr-section.alt{ background:var(--gray-100); }
.sr-section-head{ text-align:center; max-width:640px; margin:0 auto 2.8rem; }
.sr-section-head .eyebrow{ justify-content:center; margin-bottom:.9rem; }
.sr-section-head h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); }
.sr-section-head p{ color:var(--gray-600); margin-top:.8rem; }

/* ------------------------------------------------------------
   Branchenauswahl
   ------------------------------------------------------------ */
.sr-industry-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:1rem;
}
.sr-industry-card{
  display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
  padding:1.6rem 1rem; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--white);
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.sr-industry-card.active{ border-color:var(--green); background:var(--green-light); box-shadow:0 0 0 2px var(--green) inset; }
.sr-industry-card .sr-icon{ width:38px; height:38px; color:var(--green); }
.sr-industry-card span{ font-size:.88rem; font-weight:600; font-family:var(--font-display); }

/* ------------------------------------------------------------
   Modulübersicht
   ------------------------------------------------------------ */
.sr-module-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.sr-module-card{
  position:relative; text-align:left; padding:1.8rem; border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--white); transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  display:flex; flex-direction:column; gap:.9rem; height:100%;
}
.sr-module-card.is-ready{ cursor:pointer; }
.sr-module-card.is-locked{ opacity:.62; }

/* Priorisierte Module ("Besonders interessant für Ihren Betrieb") —
   dezent stärker hervorgehoben als reguläre Karten, ohne aufdringlich
   zu wirken: etwas kräftigerer Rand + leichter Grünton im Icon-Feld. */
.sr-module-card.is-featured{ border-color:var(--green); box-shadow:0 4px 18px rgba(47,168,91,0.08); }
.sr-module-card.is-featured .sr-module-icon{ background:var(--green); color:var(--white); }
.sr-module-card.is-featured.is-locked{ opacity:.75; }
.sr-module-icon{ width:42px; height:42px; border-radius:var(--radius-s); background:var(--green-light); color:var(--green-dark); display:flex; align-items:center; justify-content:center; }
.sr-module-icon svg{ width:22px; height:22px; }
.sr-module-card h3{ font-size:1.05rem; }
.sr-module-card p{ color:var(--gray-600); font-size:.9rem; flex:1; }
.sr-module-cta{ font-size:.82rem; font-weight:600; color:var(--green-dark); display:inline-flex; align-items:center; gap:.4rem; }
.sr-badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:50px; width:fit-content;
}
.sr-badge-demo{ background:var(--gray-100); color:var(--gray-600); border:1px solid var(--line); }
.sr-badge-soon{ background:var(--gray-100); color:var(--gray-600); }

/* ------------------------------------------------------------
   Modul-Arbeitsbereich (Formular / Upload)
   ------------------------------------------------------------ */
#sr-workspace{ display:none; padding:7.5rem 0 6rem; }
#sr-workspace.active{ display:block; }
.sr-workspace-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.sr-back-link{ display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600; color:var(--gray-600); }
.sr-back-link svg{ width:16px; height:16px; }
.sr-workspace-card{
  max-width:640px; margin:0 auto; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:2.6rem; box-shadow:0 20px 60px rgba(14,14,14,0.05);
}
@media(max-width:600px){ .sr-workspace-card{ padding:1.6rem; border-radius:var(--radius-m); } }

/* Stepper */
.sr-stepper{ display:flex; align-items:center; gap:.4rem; margin-bottom:2.2rem; }
.sr-step-dot{
  flex:1; height:4px; border-radius:2px; background:var(--gray-300); position:relative; overflow:hidden;
}
.sr-step-dot::after{
  content:""; position:absolute; inset:0; background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-m) var(--ease);
}
.sr-step-dot.done::after, .sr-step-dot.current::after{ transform:scaleX(1); }
.sr-stepper-label{ font-size:.8rem; color:var(--gray-600); margin-bottom:1.6rem; font-weight:600; }
.sr-stepper-label b{ color:var(--black); }

.sr-form-step{ display:none; }
.sr-form-step.active{ display:block; animation:srStepIn .45s var(--ease); }
@keyframes srStepIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
@media(prefers-reduced-motion: reduce){ .sr-form-step.active{ animation:none; } }

.sr-form-step h3{ font-size:1.3rem; margin-bottom:.4rem; }
.sr-form-step .sr-step-hint{ color:var(--gray-600); font-size:.9rem; margin-bottom:1.6rem; }

.sr-option-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:.8rem; }
.sr-option{
  padding:1.1rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius-m); text-align:left; font-size:.92rem; font-weight:600;
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.sr-option.selected{ border-color:var(--green); background:var(--green-light); color:var(--green-dark); }

.sr-field{ margin-bottom:1.2rem; }
.sr-field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.5rem; }
.sr-field input, .sr-field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:var(--radius-s); font-family:inherit; font-size:.95rem;
  transition:border-color var(--dur-s) var(--ease);
}
.sr-field input:focus, .sr-field textarea:focus{ border-color:var(--green); outline:none; }
.sr-field textarea{ min-height:110px; resize:vertical; }
.sr-field-error{ font-size:.78rem; color:#C43D3D; margin-top:.4rem; display:none; }
.sr-field.has-error input, .sr-field.has-error textarea{ border-color:#C43D3D; }
.sr-field.has-error .sr-field-error{ display:block; }
.sr-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:520px){ .sr-field-row{ grid-template-columns:1fr; } }

.sr-step-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:2rem; gap:1rem; }
.sr-step-nav .btn{ flex:none; }

/* Upload */
.sr-upload-zone{
  border:2px dashed var(--line); border-radius:var(--radius-m); padding:2.4rem 1.4rem; text-align:center; cursor:pointer;
  transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.sr-upload-zone:hover, .sr-upload-zone.dragover{ border-color:var(--green); background:var(--green-light); }
.sr-upload-zone svg{ width:34px; height:34px; color:var(--green); margin:0 auto .8rem; }
.sr-upload-zone p{ font-size:.9rem; color:var(--gray-600); }
.sr-upload-zone .sr-upload-hint{ font-size:.78rem; margin-top:.3rem; color:var(--gray-300); }
.sr-file-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.sr-file-item{
  display:flex; align-items:center; gap:.8rem; padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--radius-s); font-size:.85rem;
}
.sr-file-item .sr-file-icon{ width:20px; height:20px; color:var(--green); flex:none; }
.sr-file-item .sr-file-name{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr-file-item .sr-file-size{ color:var(--gray-600); font-size:.78rem; flex:none; }
.sr-file-item .sr-file-remove{ color:var(--gray-600); flex:none; font-size:1.1rem; line-height:1; padding:.2rem; }
.sr-file-progress{ height:3px; background:var(--gray-300); border-radius:2px; overflow:hidden; margin-top:.4rem; }
.sr-file-progress-bar{ height:100%; background:var(--green); width:0%; transition:width .5s var(--ease); }

/* Zusammenfassung */
.sr-summary-list{ display:flex; flex-direction:column; gap:.7rem; margin:1.4rem 0 1.8rem; }
.sr-summary-item{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; }
.sr-summary-item svg{ width:18px; height:18px; color:var(--green); flex:none; margin-top:.15rem; }
.sr-summary-item b{ display:block; font-size:.78rem; color:var(--gray-600); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.1rem; }

/* Erfolg / Abschluss */
.sr-success{ text-align:center; padding:1rem 0; }
.sr-success-icon{
  width:64px; height:64px; border-radius:50%; background:var(--green-light); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; animation:srPop .5s var(--ease);
}
@keyframes srPop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@media(prefers-reduced-motion: reduce){ .sr-success-icon{ animation:none; } }
.sr-success-icon svg{ width:30px; height:30px; }
.sr-success h3{ font-size:1.35rem; margin-bottom:.6rem; }
.sr-success p{ color:var(--gray-600); font-size:.94rem; max-width:44ch; margin:0 auto; }

/* Demo-Hinweis-Box */
.sr-demo-note{
  margin-top:1.8rem; padding:1rem 1.2rem; background:var(--gray-100); border-radius:var(--radius-s); font-size:.84rem; color:var(--gray-600);
  display:flex; gap:.7rem; align-items:flex-start; text-align:left;
}
.sr-demo-note svg{ width:18px; height:18px; flex:none; margin-top:.1rem; color:var(--gray-600); }

/* Verkaufs-CTA-Block nach jedem Modul */
.sr-sales-block{ margin-top:2.2rem; padding-top:2.2rem; border-top:1px solid var(--line); text-align:center; }
.sr-sales-block h4{ font-size:1.05rem; margin-bottom:.5rem; }
.sr-sales-block p{ color:var(--gray-600); font-size:.88rem; max-width:46ch; margin:0 auto 1.4rem; }
.sr-sales-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Demo-Badge, global auf Karten */
.sr-demo-flag{
  position:absolute; top:1rem; right:1rem; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .55rem; border-radius:50px; background:var(--black); color:var(--white);
}

@media(max-width:900px){
  .sr-module-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .sr-module-grid{ grid-template-columns:1fr; }
  .sr-industry-grid{ grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); }
  .sr-workspace-head{ flex-direction:column; align-items:flex-start; }
}

/* Footer-Minimalversion */
#sr-footer{ background:var(--black); color:rgba(255,255,255,0.7); padding:3rem 0 1.6rem; margin-top:0; }
#sr-footer .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
#sr-footer p{ font-size:.82rem; }
#sr-footer a{ font-size:.82rem; color:rgba(255,255,255,0.7); }
#sr-footer .sr-footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; }

/* ------------------------------------------------------------
   PV-Rechner — Ergebnisdarstellung
   Bewusst als "Kundenlösung" gestaltet, nicht als Tabellen-Rechner:
   große Zahlen, ruhiger Rhythmus, kein Grid-/Dashboard-Look.
   ------------------------------------------------------------ */
.sr-pv-figures{
  display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin:2.2rem 0 0;
  padding:2rem 1.4rem; background:var(--green-light); border-radius:var(--radius-m);
}
.sr-pv-figures-sub{ margin-top:1rem; background:var(--gray-100); }
.sr-pv-figure{ text-align:center; }
.sr-pv-figure-value{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,4vw,2.1rem); color:var(--green-dark); }
.sr-pv-figures-sub .sr-pv-figure-value{ color:var(--black); }
.sr-pv-figure-label{ font-size:.8rem; color:var(--gray-600); margin-top:.3rem; }
.sr-pv-explain{ margin-top:1.6rem; font-size:.92rem; color:var(--gray-600); line-height:1.7; }
@media(max-width:480px){
  .sr-pv-figures{ grid-template-columns:1fr; gap:1.2rem; }
}

/* ------------------------------------------------------------
   WhatsApp-Kontakt — dezente Chat-Bubble-Vorschau.
   Nutzt bewusst nur eine leichte Grün-Anlehnung (Markenfarbe,
   kein fremdes App-Design, keine WhatsApp-Icons/Logos) plus die
   bestehende Kartenoptik, damit es wie ein echter Bestandteil
   der Creator-Kompass-Sprache wirkt statt einer App-Kopie.
   ------------------------------------------------------------ */
.sr-wa-bubble-wrap{ background:var(--gray-100); border-radius:var(--radius-m); padding:1.6rem; margin-top:1rem; display:flex; justify-content:flex-end; }
.sr-wa-bubble{
  max-width:80%; background:var(--green-light); border:1px solid rgba(47,168,91,0.25); border-radius:var(--radius-m) var(--radius-m) 4px var(--radius-m);
  padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.4rem;
}
.sr-wa-bubble-text{ font-size:.94rem; line-height:1.55; color:var(--black); }
.sr-wa-bubble-time{ font-size:.72rem; color:var(--gray-600); align-self:flex-end; }
@media(max-width:480px){
  .sr-wa-bubble{ max-width:92%; }
}

/* ------------------------------------------------------------
   Chatbot — eigenständiges, dezentes Chat-Fenster im
   Creator-Kompass-Design. Bewusst NICHT wie ein fremdes
   ChatGPT-Fenster gestaltet (keine dunkle Konsole, kein
   fremdes App-Chrome) — nutzt dieselben Karten-/Bubble-Muster
   wie die WhatsApp-Vorschau, nur als fortlaufender Verlauf.
   ------------------------------------------------------------ */
.sr-chat-window{
  background:var(--gray-100); border-radius:var(--radius-m); padding:1.4rem; margin-top:1rem;
  max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:.7rem;
}
.sr-chat-row{ display:flex; }
.sr-chat-row.user{ justify-content:flex-end; }
.sr-chat-row.bot{ justify-content:flex-start; }
.sr-chat-bubble{
  max-width:78%; padding:.75rem 1rem; border-radius:var(--radius-m); font-size:.92rem; line-height:1.55;
}
.sr-chat-bubble.bot{ background:var(--white); border:1px solid var(--line); border-radius:4px var(--radius-m) var(--radius-m) var(--radius-m); }
.sr-chat-bubble.user{ background:var(--green-light); border:1px solid rgba(47,168,91,0.25); border-radius:var(--radius-m) 4px var(--radius-m) var(--radius-m); }
.sr-chat-typing{ display:inline-flex; gap:.25rem; padding:.4rem 0; }
.sr-chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--gray-600); opacity:.5; animation:srChatTyping 1.2s infinite ease-in-out; }
.sr-chat-typing span:nth-child(2){ animation-delay:.15s; }
.sr-chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes srChatTyping{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
@media(prefers-reduced-motion: reduce){ .sr-chat-typing span{ animation:none; opacity:.7; } }

.sr-chat-quickreplies{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.sr-chat-quick-btn{
  padding:.6rem 1.1rem; border-radius:50px; border:1.5px solid var(--green); background:var(--white); color:var(--green-dark);
  font-size:.86rem; font-weight:600; transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.sr-chat-quick-btn:disabled{ opacity:.4; cursor:not-allowed; }
.sr-chat-quick-btn.secondary{ border-color:var(--line); color:var(--black); }

.sr-chat-textrow{ display:flex; gap:.6rem; margin-top:1rem; }
.sr-chat-textrow input{
  flex:1; padding:.8rem 1rem; border:1.5px solid var(--line); border-radius:50px; font-family:inherit; font-size:.9rem;
}
.sr-chat-textrow input:focus{ border-color:var(--green); outline:none; }
.sr-chat-textrow button{
  width:44px; height:44px; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; flex:none;
  transition:background var(--dur-s) var(--ease);
}
.sr-chat-textrow button svg{ width:18px; height:18px; }

/* ------------------------------------------------------------
   Hover-Zustände NUR für Geräte mit echtem Zeigegerät (Maus).
   Grund: Auf Touch-Geräten (Smartphone/Tablet) bleibt der
   :hover-Zustand nach einem Tap oft "hängen", weil es dort kein
   echtes Hover gibt — ein Button sieht dann fälschlich weiter
   markiert/grün aus, obwohl er nicht aktiv ausgewählt ist. Mit
   dieser Media-Query greifen Hover-Effekte ausschließlich dort,
   wo sie auch technisch sauber funktionieren.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn-accent:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(47,168,91,0.3); }
  .btn-outline:hover{ border-color:var(--black); transform:translateY(-2px); }
  .nav-links a:not(.btn):hover{ color:var(--green-dark); }
  .sr-industry-card:hover{ transform:translateY(-4px); border-color:var(--green); box-shadow:0 14px 30px rgba(14,14,14,0.06); }
  .sr-module-card.is-ready:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(14,14,14,0.07); border-color:var(--green); }
  .sr-back-link:hover{ color:var(--black); }
  .sr-option:hover{ border-color:var(--green); transform:translateY(-2px); }
  .sr-file-item .sr-file-remove:hover{ color:#C43D3D; }
  #sr-footer a:hover{ color:var(--white); }
  .sr-chat-quick-btn:hover{ background:var(--green); color:var(--white); }
  .sr-chat-quick-btn.secondary:hover{ background:var(--black); color:var(--white); border-color:var(--black); }
  .sr-chat-textrow button:hover{ background:var(--green-dark); }
}

/* ------------------------------------------------------------
   KI-Assistent — bewusst KEINE Chat-Bubbles, sondern ein
   beratender, akkumulierender Einschätzungs-Verlauf mit
   klar beschrifteten Blöcken. Soll sich sichtbar vom Chatbot
   unterscheiden: ruhiger, textlastiger, "Analyse"-artig statt
   "Dialog"-artig.
   ------------------------------------------------------------ */
.sr-ai-entry{ margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.sr-ai-entry:first-child{ margin-top:1.8rem; padding-top:1.8rem; }
.sr-ai-entry-label{
  display:block; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-600); margin-bottom:.5rem;
}
.sr-ai-entry-user .sr-ai-entry-text{ font-size:.95rem; color:var(--gray-900); font-style:italic; }
.sr-ai-entry-result{ background:var(--green-light); border-radius:var(--radius-m); padding:1.4rem 1.6rem; border-top:none; margin-top:.8rem; }
.sr-ai-entry-result .sr-ai-entry-label{ color:var(--green-dark); }
.sr-ai-entry-result h4{ font-size:1.1rem; margin-bottom:.6rem; }
.sr-ai-entry-result .sr-ai-entry-text{ font-size:.92rem; line-height:1.6; color:var(--black); }
.sr-ai-cross-note{ font-size:.8rem; color:var(--gray-600); margin-bottom:.5rem; font-weight:600; }
.sr-ai-thinking-text{ display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--gray-600); font-style:italic; }