/* =====================================================================
 * 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}