/* =====================================================================
 * theme.css – Eigenständiges Erscheinungsbild für 9o.pl
 *
 * WICHTIG: Diese Datei ÜBERSCHREIBT nur. Sie löscht nichts aus base.css
 * oder app.css. Willst du das alte Aussehen zurück, entferne einfach die
 * eine <link>-Zeile in app/Views/layout.php – alles läuft weiter.
 *
 * Gestaltungsidee: Ein Bildgenerator ist ein kreatives Werkzeug, kein
 * Büroprogramm. Deshalb Violett/Magenta statt Firmenblau, mehr Rundung,
 * weichere Schatten, eine durchscheinende Kopfleiste und ein Farbverlauf
 * als Akzent. Der Übersetzer-Dienst bleibt bewusst beim ruhigen Blau –
 * die beiden Dienste sollen sich unterscheiden.
 *
 * Alles läuft über die vorhandenen Farb-Variablen (Tokens). Die Farbwahl
 * im Admin unter "Design" funktioniert weiterhin und sticht dieses Thema.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Farbwelt: Violett als Primärfarbe, Magenta als zweiter Akzent
 * ------------------------------------------------------------------- */
:root{
  --primary-50:#f5f3ff;  --primary-100:#ede9fe; --primary-200:#ddd6fe;
  --primary-300:#c4b5fd; --primary-400:#a78bfa; --primary-500:#8b5cf6;
  --primary-600:#7c3aed; --primary-700:#6d28d9; --primary-800:#5b21b6;
  --primary-900:#4c1d95; --primary-950:#2e1065;

  /* Zweitfarbe nur für Verläufe und Hervorhebungen */
  --accent-400:#f472b6; --accent-500:#ec4899; --accent-600:#db2777;

  --verlauf:linear-gradient(135deg,var(--primary-600) 0%,var(--accent-500) 100%);
  --verlauf-weich:linear-gradient(135deg,var(--primary-50) 0%,#fdf2f8 100%);

  /* Etwas wärmerer Hintergrund als reines Grau – wirkt weniger technisch */
  --bg:#faf9fc;
  --shadow-primary:0 10px 24px -6px rgba(124,58,237,.35);
  --radius:.625rem; --radius-lg:.875rem; --radius-xl:1.25rem;
}
.dark{
  --bg:#0e0b14;            /* fast schwarz mit Violettstich */
  --surface:#171320;
  --surface-alt:#211b2e;
  --border:#2d2440;
  --verlauf-weich:linear-gradient(135deg,#1b1428 0%,#241428 100%);
}

/* ---------------------------------------------------------------------
 * 2. Kopfleiste: durchscheinend, schwebt über dem Inhalt
 * ------------------------------------------------------------------- */
.topbar{
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  /* Weichzeichner hinter der Leiste; ältere Browser ignorieren es folgenlos */
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  padding-top:var(--sp-2);padding-bottom:var(--sp-2);
}

/* ---------------------------------------------------------------------
 * 3. Markenzeichen links oben
 * ------------------------------------------------------------------- */
.brand{gap:.6rem}
.brand-mark{
  width:34px;height:34px;flex:0 0 auto;display:block;
  border-radius:11px;box-shadow:var(--shadow-primary);
}
.brand-name{
  font-weight:var(--fw-bold);font-size:1.15rem;letter-spacing:-.02em;
  background:var(--verlauf);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Rückfall für Browser ohne Verlaufstext: dann einfach die Primärfarbe */
@supports not (background-clip:text){ .brand-name{color:var(--primary-600);background:none} }
.brand-suffix{color:var(--text-muted);font-weight:var(--fw-medium);
  -webkit-text-fill-color:var(--text-muted);font-size:.95rem}

/* ---------------------------------------------------------------------
 * 4. Knöpfe: Hauptknopf mit Farbverlauf
 * ------------------------------------------------------------------- */
.btn{border-radius:var(--radius);font-weight:var(--fw-semibold)}
.btn-primary{
  background:var(--verlauf);border:none;color:#fff;
  box-shadow:0 4px 12px -3px rgba(124,58,237,.4);
}
.btn-primary:hover{
  filter:brightness(1.08);
  box-shadow:0 8px 20px -4px rgba(124,58,237,.5);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
}
.btn-secondary:hover{background:var(--surface-alt);border-color:var(--primary-300)}
.dark .btn-secondary{background:var(--surface-alt)}

/* Navigation: aktiver Punkt bekommt eine Unterstreichung statt nur Farbe */
.nav-link.active{position:relative;color:var(--primary-600)}
.nav-link.active::after{
  content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:2px;height:2px;
  border-radius:2px;background:var(--verlauf);
}
.dark .nav-link.active{color:var(--primary-300)}

/* ---------------------------------------------------------------------
 * 5. Karten und Felder
 * ------------------------------------------------------------------- */
.card{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(16,12,24,.04),0 8px 24px -12px rgba(16,12,24,.10);
}
.dark .card{box-shadow:none}
.input{border-radius:var(--radius)}
.input:focus{
  border-color:var(--primary-400);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-500) 22%,transparent);
  outline:none;
}

/* ---------------------------------------------------------------------
 * 6. Startseite
 * ------------------------------------------------------------------- */
.lp-hero{
  position:relative;overflow:hidden;
  padding:96px 0 80px;
  background:var(--verlauf-weich);
}
/* Weicher Lichtschein oben rechts - gibt Tiefe, ohne aufdringlich zu sein */
.lp-hero::before{
  content:"";position:absolute;top:-45%;right:-10%;
  width:min(820px,95%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-400) 26%,transparent) 0%,transparent 62%);
  pointer-events:none;
}
.lp-hero::after{
  content:"";position:absolute;bottom:-55%;left:-14%;
  width:min(700px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary-400) 24%,transparent) 0%,transparent 62%);
  pointer-events:none;
}
.lp-hero .lp-wrap{position:relative;z-index:1}
.lp-hero h1{font-weight:var(--fw-bold);letter-spacing:-.03em;max-width:16ch}
.lp-eyebrow{
  display:inline-block;text-transform:none;letter-spacing:.01em;
  background:color-mix(in srgb,var(--primary-600) 12%,transparent);
  color:var(--primary-700);border-radius:var(--radius-full);
  padding:.35rem .85rem;font-size:.82rem;
}
.dark .lp-eyebrow{color:var(--primary-300)}
.lp-lead{font-size:1.22rem}

/* Vorteils-Kacheln: heller Grund, farbiger Rand beim Überfahren */
.lp-card{
  background:var(--surface);border-radius:var(--radius-lg);
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.lp-card:hover{
  transform:translateY(-3px);border-color:var(--primary-300);
  box-shadow:0 14px 30px -14px rgba(16,12,24,.22);
}
.dark .lp-card:hover{box-shadow:none;border-color:var(--primary-700)}

/* Schrittzahlen mit Farbverlauf statt einfarbig */
.lp-step::before{background:var(--verlauf);box-shadow:0 4px 10px -3px rgba(124,58,237,.45)}
.lp-step{border-radius:var(--radius-lg)}

.lp-faq{border-radius:var(--radius-lg)}
.lp-faq summary:hover{color:var(--primary-600)}
.dark .lp-faq summary:hover{color:var(--primary-300)}

/* ---------------------------------------------------------------------
 * 7. Generator: Eingabefeld als Blickfang
 * ------------------------------------------------------------------- */
.bild-form{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--sp-6);
  box-shadow:0 2px 4px rgba(16,12,24,.04),0 12px 32px -16px rgba(16,12,24,.14);
}
.dark .bild-form{box-shadow:none}
.bild-form label[for="bild-prompt"]{
  display:block;font-weight:var(--fw-semibold);margin-bottom:var(--sp-2);
}
#bild-prompt{font-size:1.02rem;line-height:1.55;min-height:6.5rem;resize:vertical}
.bild-preis{
  background:color-mix(in srgb,var(--primary-600) 10%,transparent);
  color:var(--primary-700);border-radius:var(--radius-full);
  padding:.3rem .75rem;font-size:.85rem;
}
.dark .bild-preis{color:var(--primary-300)}
.gratis-zeile{
  display:inline-block;background:color-mix(in srgb,var(--success) 14%,transparent);
  color:#15803d;border-radius:var(--radius-full);padding:.28rem .75rem;font-size:.82rem;
}
.dark .gratis-zeile{color:#4ade80}

/* Galerie: Bild wächst beim Überfahren leicht aus dem Rahmen */
.bild-karte{border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--t-base) var(--ease)}
.bild-karte:hover{box-shadow:0 16px 34px -16px rgba(16,12,24,.3)}
.bild-karte a{display:block;overflow:hidden}
.bild-karte img{transition:transform var(--t-slow) var(--ease)}
.bild-karte:hover img{transform:scale(1.04)}

/* ---------------------------------------------------------------------
 * 8. Handy-Leiste unten
 * ------------------------------------------------------------------- */
.tabbar{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
}
.tab.active{color:var(--primary-600)}
.dark .tab.active{color:var(--primary-300)}

/* ---------------------------------------------------------------------
 * 9. Bewegung nur, wenn der Nutzer sie zulässt
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .btn-primary:hover,.feature-card:hover,.box:hover{transform:none}
  .bild-karte:hover img{transform:none}
}

/* ---------------------------------------------------------------------
 * 10. Stil-Auswahl und Beispiele im Generator
 * ------------------------------------------------------------------- */
.bild-beispiele{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:.6rem 0 .2rem;font-size:.85rem}
.bild-beispiel{
  background:none;border:1px dashed var(--border);color:var(--text-muted);
  border-radius:var(--radius-full);padding:.25rem .7rem;font-size:.82rem;
  cursor:pointer;font-family:inherit;transition:all var(--t-fast) var(--ease);
}
.bild-beispiel:hover{border-color:var(--primary-400);color:var(--primary-700);border-style:solid}
.dark .bild-beispiel:hover{color:var(--primary-300)}

.bild-stile{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.7rem 0 .2rem}
.bild-stile > .muted{font-size:.85rem;margin-right:.2rem}
.bild-stil{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-full);padding:.35rem .85rem;font-size:.85rem;
  cursor:pointer;font-family:inherit;min-height:2.1rem;
  transition:all var(--t-fast) var(--ease);
}
.bild-stil:hover{border-color:var(--primary-400)}
.bild-stil.aktiv{background:var(--verlauf);border-color:transparent;color:#fff;font-weight:var(--fw-semibold)}
.dark .bild-stil{background:var(--surface-alt)}

/* Auf dem Handy: Knoepfe gross genug zum Antippen, Zeile scrollbar */
@media (max-width:640px){
  .bild-stile{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .bild-stil{flex:0 0 auto;min-height:2.75rem;padding:.5rem 1rem}
  .bild-beispiel{min-height:2.4rem}
}

/* Beschreibungs-Helfer */
.bild-helfer{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 0}

/* ---------------------------------------------------------------------
 * 11. Galerie-Verwaltung: Suche, Favoriten, Sammel-Download
 * ------------------------------------------------------------------- */
.galerie-leiste{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;flex-wrap:wrap;margin:1.4rem 0 .2rem}
.galerie-suche{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0}
.galerie-suche .input{width:min(260px,60vw);border-radius:var(--radius-full);padding-left:.9rem}
.galerie-aktionen{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.galerie-aktionen .btn.aktiv{background:var(--verlauf);border-color:transparent;color:#fff}

/* Stern: unauffällig, bis er gesetzt ist */
.bild-stern{
  background:none;border:none;cursor:pointer;font-size:1.15rem;line-height:1;
  color:var(--gray-300);padding:.25rem .3rem;border-radius:var(--radius);
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.bild-stern:hover{color:var(--accent-400);transform:scale(1.15)}
.bild-stern.aktiv{color:var(--accent-500)}
.dark .bild-stern{color:var(--gray-600)}
.dark .bild-stern.aktiv{color:var(--accent-400)}
@media (max-width:640px){
  .galerie-leiste{flex-direction:column;align-items:stretch}
  .bild-stern{font-size:1.4rem;padding:.4rem .5rem}
}

/* Vorlagebild wählen */
.bild-vorlage-zeile{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.7rem 0 .2rem;font-size:.85rem}
.bild-vorlage-knopf{cursor:pointer;display:inline-flex}

/* Vorlage-Vorschau und fertige Werkzeuge */
.bild-vorschau{display:flex;align-items:flex-start;gap:.9rem;flex-wrap:wrap;
  margin:.6rem 0 .2rem;padding:.7rem;background:var(--surface-alt);border-radius:var(--radius-lg)}
.bild-vorschau img{width:84px;height:84px;object-fit:cover;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);flex:0 0 auto}
.bild-werkzeuge{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;flex:1 1 260px}
.bild-werkzeug{
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-full);padding:.35rem .8rem;font-size:.83rem;
  cursor:pointer;font-family:inherit;min-height:2.1rem;
  transition:all var(--t-fast) var(--ease);
}
.bild-werkzeug:hover{border-color:var(--primary-400);color:var(--primary-700)}
.dark .bild-werkzeug:hover{color:var(--primary-300)}
@media (max-width:640px){ .bild-werkzeug{min-height:2.75rem;padding:.5rem 1rem} }

/* ---------------------------------------------------------------------
 * 12. Video: Auftragsliste mit Zustandsanzeige
 * ------------------------------------------------------------------- */
.vid-liste{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.vid-karte{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:.9rem 1rem}
.vid-kopf{display:flex;align-items:center;gap:.55rem;font-weight:var(--fw-medium)}
.vid-prompt{overflow-wrap:anywhere}
.vid-meta{font-size:.78rem;margin:.2rem 0 .6rem}
.vid-inhalt{margin:.4rem 0 .7rem}
.vid-player,.vid-vorschau{width:100%;max-width:520px;border-radius:var(--radius);
  background:#000;display:block}
.vid-fehler{color:var(--err,#c62828);font-size:.88rem;margin:0}
.vid-warten{font-size:.88rem;margin:0}

/* Zustandspunkt: wartend pulsiert, fertig grün, Fehler rot */
.vid-zeichen{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--gray-400)}
.vid-fertig{background:var(--success,#2e7d32)}
.vid-fehler{background:var(--err,#c62828)}
.vid-wartet,.vid-laeuft{background:var(--primary-500);animation:vidPuls 1.4s ease-in-out infinite}
@keyframes vidPuls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .vid-wartet,.vid-laeuft{animation:none} }

/* Betriebsauswertung */
.kpi-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:.8rem 0 1rem}
.kpi-kachel{background:var(--surface-alt);border-radius:var(--radius-lg);padding:.7rem .85rem}
.kpi-wert{font-size:1.35rem;font-weight:var(--fw-bold);letter-spacing:-.02em}
.kpi-label{font-size:.75rem;color:var(--text-muted);margin-top:.15rem}
.kpi-gut .kpi-wert{color:var(--success,#2e7d32)}
.dark .kpi-gut .kpi-wert{color:#4ade80}

/* Systemcheck */
.sc-summe{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0}
.sc-zahl{border-radius:var(--radius-full);padding:.3rem .8rem;font-size:.85rem;font-weight:var(--fw-semibold)}
.sc-zahl.sc-ok{background:color-mix(in srgb,var(--success,#2e7d32) 14%,transparent);color:#15803d}
.sc-zahl.sc-warnung{background:color-mix(in srgb,#d97706 16%,transparent);color:#b45309}
.sc-zahl.sc-fehler{background:color-mix(in srgb,var(--err,#c62828) 14%,transparent);color:#b91c1c}
.sc-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.sc-punkt{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .2rem;border-bottom:1px solid var(--border)}
.sc-punkt:last-child{border-bottom:none}
.sc-marke{flex:0 0 auto;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;
  font-size:.85rem;font-weight:700;color:#fff}
.sc-punkt.sc-ok .sc-marke{background:var(--success,#2e7d32)}
.sc-punkt.sc-warnung .sc-marke{background:#d97706}
.sc-punkt.sc-fehler .sc-marke{background:var(--err,#c62828)}
.sc-text{font-size:.88rem;line-height:1.45}
.dark .sc-zahl.sc-ok{color:#4ade80}
.dark .sc-zahl.sc-warnung{color:#fbbf24}
.dark .sc-zahl.sc-fehler{color:#f87171}

/* Erste Schritte (nur für neue Nutzer sichtbar) */
.start-karte{background:var(--verlauf-weich);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:1.1rem 1.2rem;margin:1rem 0 1.2rem}
.start-karte h2{margin:0 0 .5rem;font-size:1.05rem}
.start-schritte{margin:0 0 .5rem;padding-left:1.3rem;font-size:.9rem;line-height:1.6}
.start-schritte li{margin-bottom:.25rem}

/* Anwendungs-Vorlagen ("Wofür?") */
.bild-vorlagen{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .4rem;font-size:.85rem}
.bild-vorlage{
  background:color-mix(in srgb,var(--primary-600) 9%,transparent);
  border:1px solid transparent;color:var(--primary-700);
  border-radius:var(--radius-full);padding:.35rem .85rem;font-size:.85rem;
  cursor:pointer;font-family:inherit;min-height:2.1rem;font-weight:var(--fw-medium);
  transition:all var(--t-fast) var(--ease);
}
.bild-vorlage:hover{background:var(--verlauf);color:#fff}
.dark .bild-vorlage{color:var(--primary-300)}
@media (max-width:640px){
  .bild-vorlagen{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}
  .bild-vorlage{flex:0 0 auto;min-height:2.75rem;padding:.5rem 1rem}
}

/* Preisrechner */
.preis-regel{font-size:1.05rem;margin:.3rem 0}
.preis-tabelle .preis-feld{width:7rem;text-align:right}
.preis-quellen{margin:.3rem 0 .5rem;padding-left:1.2rem;font-size:.9rem;line-height:1.7}
@media (max-width:700px){ .preis-tabelle .preis-feld{width:100%} }