/* spinellastudiosde/public/assets/css/studio.css
 * Studio-Seiten: Startseite, Impressum, Datenschutz, 404.
 * Farben: Dunkel ist die Standard-Darstellung (auch ohne JavaScript), Hell wählt man über den Umschalter
 * im Header (data-theme="light", gespeichert unter "studio-theme"). Blau und Violett kommen aus dem Logo.
 * Die Karten der Startseite tragen bewusst die Farben der jeweiligen App (--sn-*, --ik-*).
 */

:root {
  --p-bg: #080b12; --p-bg2: #0d111b; --p-card: #111827; --p-edge: #1f2937;
  --p-text: #f8fafc; --p-muted: #94a3b8;
  --p-blue: #3b82f6; --p-violet: #8b5cf6;
  --p-gradient: linear-gradient(135deg, var(--p-blue), var(--p-violet));
  --p-gradient-soft: linear-gradient(135deg, rgba(59, 130, 246, .55), rgba(139, 92, 246, .55));
  /* Für Flächen mit weißem Text (Kontrast mind. 4,5:1) */
  --p-gradient-strong: linear-gradient(135deg, #2563eb, #7c3aed);
  --p-glow-blue: rgba(59, 130, 246, .26); --p-glow-violet: rgba(139, 92, 246, .24);
  --sn-bg: #00051a; --sn-card: #0d1a3a; --sn-edge: #000210; --sn-text: #a7bce6; --sn-head: #eaf0ff;
  --sn-chip: #f4ee7f; --sn-chip-fg: #182d56; --sn-cta: #f4ee7f; --sn-glow: rgba(42, 82, 192, .45);
  --ik-bg: #12101a; --ik-card: #26223a; --ik-edge: #08070c; --ik-text: #a8b6c4; --ik-head: #f5f1ec;
  --ik-chip: #e8a830; --ik-chip-fg: #1c2a3a; --ik-cta: #e8a830;
  --shadow: 0 12px 28px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --p-bg: #f6f7fb; --p-bg2: #eef1f7; --p-card: #ffffff; --p-edge: #e2e8f0;
  --p-text: #0b1220; --p-muted: #475569;
  --p-blue: #2563eb; --p-violet: #7c3aed;
  --p-glow-blue: rgba(59, 130, 246, .18); --p-glow-violet: rgba(139, 92, 246, .16);
  --p-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, .45), rgba(124, 58, 237, .45));
  --sn-bg: #c5d0ff; --sn-card: #dce4ff; --sn-edge: #a3b2ec; --sn-text: #182d56; --sn-head: #182d56;
  --sn-chip: #3d65d4; --sn-chip-fg: #ffffff; --sn-cta: #3d65d4; --sn-glow: rgba(61, 101, 212, .22);
  --ik-bg: #f5f1ec; --ik-card: #ffffff; --ik-edge: #e1d7ca; --ik-text: #414a55; --ik-head: #1c2a3a;
  --ik-chip: #d94030; --ik-chip-fg: #ffffff; --ik-cta: #d94030;
  --shadow: 0 12px 28px rgba(15, 23, 42, .08);
  color-scheme: light;
}

body {
  /* Leuchten wie beim Logo: oben blau/violett, weiter unten noch einmal versetzt */
  background:
    radial-gradient(900px 560px at 10% -6%, var(--p-glow-blue), transparent 70%),
    radial-gradient(800px 520px at 92% -2%, var(--p-glow-violet), transparent 70%),
    radial-gradient(700px 600px at -6% 48%, var(--p-glow-violet), transparent 70%),
    radial-gradient(760px 620px at 106% 72%, var(--p-glow-blue), transparent 70%),
    radial-gradient(900px 500px at 50% 104%, var(--p-glow-violet), transparent 70%),
    var(--p-bg);
  background-repeat: no-repeat;
  color: var(--p-text);
  font-family: "Instrument Sans", system-ui, sans-serif;
}
a { color: inherit; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: 1080px; width: 100%; margin: 0 auto; padding-inline: 20px; }

/* ---------- Kopf & Fuß ---------- */
.site-header { padding-top: 28px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.brand__logo { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 18px var(--p-glow-violet), 0 0 6px var(--p-glow-blue); }
.site-nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
.site-nav a { color: var(--p-muted); }
.site-nav a:hover { color: var(--p-text); }
.theme-toggle {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--p-edge); background: var(--p-card); color: var(--p-text); cursor: pointer; font-size: 16px;
}
.theme-toggle:hover { border-color: transparent; background: linear-gradient(var(--p-card), var(--p-card)) padding-box, var(--p-gradient) border-box; }
.brand + .theme-toggle { margin-left: auto; }   /* Seiten ohne Navigation (404) */

.site-main { flex: 1; padding-top: 56px; padding-bottom: 64px; }

.site-footer {
  padding-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 14px;
  color: var(--p-muted);
}
.site-footer a { color: var(--p-muted); }
.site-footer a:hover { color: var(--p-text); }
.site-footer { padding-top: 24px; border-top: 1px solid; border-image: var(--p-gradient-soft) 1; }
.site-footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px 22px; }

/* ---------- Typo ---------- */
.h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 700;
  max-width: 20ch;
}
.lead { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--p-muted); max-width: 56ch; }
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-blue);
}
.h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 700;
}

/* ---------- App-Karten ---------- */
.app-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
}
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 32px;
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease;
}
.app-card:hover { transform: translateY(-4px); }
.app-card__art {
  position: relative;
  align-self: flex-end;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.app-card__art img { width: 140px; height: 140px; object-fit: contain; }
.app-card__body { position: relative; margin-top: auto; padding-top: 28px; }
.app-card__chip { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.app-card__title { margin-top: 16px; }
.app-card__text { margin-top: 12px; font-size: 17px; line-height: 1.55; max-width: 32ch; }
.app-card__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.app-card__tags li { padding: 7px 12px; border-radius: 999px; }
.app-card__cta { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

.app-card--sn { background: var(--sn-bg); color: var(--sn-text); border-bottom: 5px solid var(--sn-edge); }
.app-card--sn .app-card__glow {
  position: absolute; right: -70px; top: -70px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--sn-glow), transparent); pointer-events: none;
}
.app-card--sn .app-card__art, .app-card--sn .app-card__tags li { background: var(--sn-card); }
.app-card--sn .app-card__chip { background: var(--sn-chip); color: var(--sn-chip-fg); }
.app-card--sn .app-card__title { font-size: 38px; line-height: 1; letter-spacing: -.03em; font-weight: 700; color: var(--sn-head); }
.app-card--sn .app-card__cta { color: var(--sn-cta); }

.app-card--ik { background: var(--ik-bg); color: var(--ik-text); border-bottom: 5px solid var(--ik-edge); font-family: "DM Sans", sans-serif; }
.app-card--ik .app-card__map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .14; pointer-events: none; }
.app-card--ik .app-card__art, .app-card--ik .app-card__tags li { background: var(--ik-card); }
.app-card--ik .app-card__tags { font-weight: 700; }
.app-card--ik .app-card__chip { background: var(--ik-chip); color: var(--ik-chip-fg); }
.app-card--ik .app-card__title { font-family: "DM Serif Display", serif; font-size: 42px; font-weight: 400; line-height: .95; color: var(--ik-head); }
.app-card--ik .app-card__cta { color: var(--ik-cta); }

/* ---------- Über das Studio ---------- */
.about {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px 56px;
  align-items: start;
}
.about p.about__text { font-size: 17px; line-height: 1.7; color: var(--p-muted); }
.principles {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}
.principles li { padding: 24px; border-radius: 18px; background: var(--p-card); border: 1px solid var(--p-edge); }
.principles li::before { content: ""; display: block; width: 28px; height: 4px; margin-bottom: 16px; border-radius: 99px; background: var(--p-gradient); }
.principles h3 { font-size: 17px; font-weight: 700; }
.principles p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--p-muted); }

/* ---------- FAQ ---------- */
.studio-faq { margin-top: 96px; max-width: 760px; }
.studio-faq { --faq-bg: var(--p-card); --faq-border: 1px solid var(--p-edge); --faq-muted: var(--p-muted); --faq-radius: 18px; }
.studio-faq a { color: var(--p-blue); }

/* ---------- Kontakt-Banner ---------- */
.contact {
  margin-top: 96px;
  padding: clamp(28px, 5vw, 48px);
  border-radius: 22px;
  background: var(--p-gradient-strong);
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
}
.contact > div { flex: 1 1 300px; }
.contact h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; }
.contact p { margin-top: 10px; font-size: 16px; line-height: 1.6; opacity: .92; }
.contact a { padding: 14px 22px; border-radius: 14px; background: #ffffff; color: #0b1220; font-weight: 700; font-size: 16px; }
.contact a:hover { opacity: .9; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.card {
  background: var(--p-card);
  border-radius: 22px;
  border: 1px solid var(--p-edge);
  box-shadow: var(--shadow);
  padding: 32px;
}
.legal-grid + .card { margin-top: 18px; }
.lead + .card { margin-top: 40px; }
.card h2.eyebrow { margin: 0; }
.card address { margin-top: 18px; font-style: normal; font-size: 18px; line-height: 1.65; }
.card dl { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 18px; line-height: 1.5; }
.card dt { color: var(--p-muted); }
.card--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 40px; }
.card h2.legal-h { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.card p, .card li { font-size: 16px; line-height: 1.65; color: var(--p-muted); }
.card ul { margin: 8px 0 0; padding-left: 20px; }
.card p + p { margin-top: 10px; }
.lead a, .card a, .about__text a { color: var(--p-blue); text-decoration: underline; text-underline-offset: 3px; }
.lead a:hover, .card a:hover, .about__text a:hover { color: var(--p-violet); }
.legal-stand { margin-top: 28px; font-size: 14px; color: var(--p-muted); }

/* ---------- 404 ---------- */
.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.not-found .code { font-size: clamp(64px, 14vw, 140px); font-weight: 700; letter-spacing: -.05em; line-height: .9; color: var(--p-muted); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 14px;
  background: var(--p-gradient-strong); color: #ffffff; font-weight: 700;
}
.btn:hover { opacity: .9; }

/* ---------- Blau-Violett-Verläufe ---------- */
.gradient-text {
  background: var(--p-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  background: var(--p-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
/* Verlaufsrand: Kartenfläche innen, Verlauf als 1px-Rahmen */
.principles li,
.card {
  border: 1px solid transparent;
  background: linear-gradient(var(--p-card), var(--p-card)) padding-box, var(--p-gradient-soft) border-box;
}
.principles li { position: relative; overflow: hidden; }
.principles li::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--p-glow-violet), transparent); pointer-events: none;
}
.principles li:nth-child(odd)::after { background: radial-gradient(closest-side, var(--p-glow-blue), transparent); }
.studio-faq details[open] {
  border: 1px solid transparent;
  background: linear-gradient(var(--p-card), var(--p-card)) padding-box, var(--p-gradient) border-box;
}
.studio-faq summary::after {
  background: var(--p-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 88% -10%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(380px 240px at 0% 110%, rgba(59, 130, 246, .45), transparent 70%),
    var(--p-gradient-strong);
  box-shadow: 0 24px 60px rgba(124, 58, 237, .28);
}
.not-found .code {
  background: var(--p-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Datenschutz: Abschnitt Projekt-Tools ---------- */
.card--cols + .legal-tools { margin-top: 18px; }
.legal-tools > p { max-width: 72ch; }
.card h3.legal-sub { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.legal-tools ul li + li { margin-top: 6px; }