/* site-base.css: die Grundbausteine der Startseite für alle Unterseiten von werefine.de.
   Hintergrund, Schrift, Überschriften, Knopfsystem, Karten, Footer, ein Wert an einer Stelle.
   Quelle der Werte ist Website/index.html. Eingehängt von tools/site_nav.py, wirkt nur unter
   body.sn-base, damit Seiten mit eigenem Design (ai/, logo/, preview/) unberührt bleiben.
   Wer einen Wert der Startseite ändert, ändert ihn hier im Block "Werte" und sonst nirgends. */

/* ─── Werte (alles, was zwischen Startseite und Unterseiten gleich sein muss) ─── */
body.sn-base {
  --sn-bg: #080b0e; --sn-card: #0d1219; --sn-border: #1b2633;
  --sn-green: #2dffa0; --sn-blue: #4cc4ff; --sn-purple: #a587ff; --sn-amber: #ffd166;
  --sn-text: #dde8f0; --sn-muted: #90aec8;
  --sn-sans: 'Space Grotesk', sans-serif; --sn-mono: 'Space Mono', monospace; --sn-serif-italic: 'Instrument Serif', serif;

  /* Überschriften */
  --sn-h1: clamp(2.4rem, 5.2vw, 4rem);      /* Seitentitel, wie .section-title der Startseite */
  --sn-h1-article: clamp(2.1rem, 4vw, 3.2rem); /* langer Artikeltitel in schmaler Spalte */
  --sn-h2: clamp(1.6rem, 3vw, 2.3rem);
  --sn-h3: 1.1rem;
  --sn-h1-lh: 1.08; --sn-h1-ls: -0.02em;

  /* Knopfsystem: grün gefüllt (primary) und Kontur (ghost), gleiche Höhe, gleicher Radius */
  --sn-btn-fs: 0.85rem; --sn-btn-ls: 0.16em; --sn-btn-pad: 1.05rem 2.2rem; --sn-btn-radius: 99px;

  /* Karten */
  --sn-card-radius: 16px;
  --sn-card-border: 1px solid rgba(255,255,255,.13);
  --sn-card-bg: linear-gradient(155deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.018) 40%, rgba(255,255,255,.05) 100%), rgba(13,18,25,.32);
  --sn-card-blur: blur(40px) saturate(200%);
  --sn-card-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -40px 60px -40px rgba(255,255,255,.04), 0 14px 38px -16px rgba(0,0,0,.62);
  --sn-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,.18), 0 22px 56px -18px rgba(0,0,0,.7);
  --sn-card-border-hover: rgba(255,255,255,.22);

  /* Footer */
  --sn-footer-pad: 2.5rem 3rem;
}

/* ─── Grund: Hintergrund, Schrift ─── */
html { background: #080b0e; }
body.sn-base {
  background: transparent; color: var(--sn-text); font-family: var(--sn-sans);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.sn-base ::selection { background: rgba(45,255,160,.55); color: #06120c; text-shadow: none; }

body.sn-base .aurora-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% 0%, #0a1018 0%, #04060a 60%); }
body.sn-base .aurora-bg::before, body.sn-base .aurora-bg::after, body.sn-base .aurora-bg .ab-blob {
  content: ""; position: absolute; border-radius: 50%; filter: blur(140px); mix-blend-mode: screen; will-change: transform;
}
body.sn-base .aurora-bg::before { width: 62vw; height: 62vw; left: -12vw; top: -12vw; right: auto; bottom: auto; opacity: .62; background: radial-gradient(circle, #1a8a5d 0%, transparent 60%); animation: sn-drift1 42s ease-in-out infinite alternate; }
body.sn-base .aurora-bg::after  { width: 55vw; height: 55vw; right: -15vw; top: 18vh; left: auto; bottom: auto; opacity: .62; background: radial-gradient(circle, #3a2f7a 0%, transparent 60%); animation: sn-drift2 56s ease-in-out infinite alternate; }
body.sn-base .aurora-bg .ab-b1 { width: 50vw; height: 50vw; left: 30vw; bottom: -22vw; top: auto; right: auto; opacity: .55; background: radial-gradient(circle, #1d4a8a 0%, transparent 60%); animation: sn-drift3 64s ease-in-out infinite alternate; }
body.sn-base .aurora-bg .ab-b2 { width: 38vw; height: 38vw; left: 55vw; top: 55vh; right: auto; bottom: auto; opacity: .45; background: radial-gradient(circle, #0d6e8c 0%, transparent 60%); animation: sn-drift4 70s ease-in-out infinite alternate; }
body.sn-base .aurora-bg .ab-b3 { width: 42vw; height: 42vw; left: 5vw; top: 50vh; right: auto; bottom: auto; opacity: .4; background: radial-gradient(circle, #5d2a6e 0%, transparent 60%); animation: sn-drift5 78s ease-in-out infinite alternate; }
@keyframes sn-drift1 { to { transform: translate(15vw,10vh) scale(1.15); } }
@keyframes sn-drift2 { to { transform: translate(-12vw,-8vh) scale(.9); } }
@keyframes sn-drift3 { to { transform: translate(-10vw,-15vh) scale(1.2); } }
@keyframes sn-drift4 { to { transform: translate(-18vw,-10vh) scale(1.1); } }
@keyframes sn-drift5 { to { transform: translate(20vw,-6vh) scale(.95); } }
body.sn-base .aurora-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 24% 72%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.6px 1.6px at 48% 32%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 67% 84%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1.6px 1.6px at 81% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 92% 64%, rgba(255,255,255,.36), transparent 60%),
    radial-gradient(1.4px 1.4px at 35% 92%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 8% 56%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 12%, rgba(255,255,255,.5), transparent 60%);
  animation: sn-twinkle 7s ease-in-out infinite alternate;
}
@keyframes sn-twinkle { 0% { opacity: .55; } 100% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  body.sn-base .aurora-bg::before, body.sn-base .aurora-bg::after, body.sn-base .aurora-bg .ab-blob, body.sn-base .aurora-stars { animation: none; }
}

/* Kursive Akzentwörter in Überschriften: Instrument Serif wie auf der Startseite */
body.sn-base i, body.sn-base em { font-family: var(--sn-serif-italic); font-style: italic; font-weight: 400; letter-spacing: 0; }

/* ─── Überschriften ─── */
body.sn-base h1:not([class]), body.sn-base .page-title, body.sn-base .news-title, body.sn-base .nf-title, body.sn-base .title {
  font-size: var(--sn-h1); font-weight: 700; line-height: var(--sn-h1-lh); letter-spacing: var(--sn-h1-ls);
}
body.sn-base h1.article-title { font-size: var(--sn-h1-article); font-weight: 700; line-height: 1.1; letter-spacing: var(--sn-h1-ls); }
body.sn-base main h2:not([class]), body.sn-base .partner-cta h2, body.sn-base .related h2 {
  font-size: var(--sn-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
}
body.sn-base .section-title { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; }
/* Akzentwort im Seitentitel */
body.sn-base h1 i, body.sn-base h1 .accent, body.sn-base .page-title i, body.sn-base .section-title i { color: var(--sn-green); }
/* Kleine Überschrift über dem Titel (Eyebrow), mono, grün */
body.sn-base .page-label, body.sn-base .news-kicker, body.sn-base .nf-label {
  font-family: var(--sn-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sn-green);
}
body.sn-base .lead, body.sn-base .page-sub, body.sn-base .news-sub { color: var(--sn-muted); font-size: 1.12rem; line-height: 1.75; }

/* ─── Knopfsystem: primary (grün gefüllt) und ghost (Kontur) ─── */
body.sn-base .btn-primary, body.sn-base .btn.btn-primary, body.sn-base .cta-box .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sn-sans); font-size: var(--sn-btn-fs); letter-spacing: var(--sn-btn-ls); text-transform: uppercase; font-weight: 700; line-height: 1.6;
  color: var(--sn-bg);
  background: linear-gradient(155deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.10) 100%), var(--sn-green);
  padding: var(--sn-btn-pad); border-radius: var(--sn-btn-radius);
  text-decoration: none; border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 20px -10px rgba(0,0,0,.18), 0 18px 40px -16px rgba(45,255,160,.45), 0 8px 22px -10px rgba(0,0,0,.5);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, opacity .2s;
  cursor: pointer; opacity: 1;
}
body.sn-base .btn-primary:hover, body.sn-base .btn.btn-primary:hover, body.sn-base .cta-box .btn:hover {
  transform: translateY(-2px); opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 20px -10px rgba(0,0,0,.18), 0 26px 56px -18px rgba(45,255,160,.55), 0 10px 26px -10px rgba(0,0,0,.55);
}
body.sn-base .btn-ghost, body.sn-base .btn.btn-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sn-sans); font-size: var(--sn-btn-fs); letter-spacing: var(--sn-btn-ls); text-transform: uppercase; font-weight: 600; line-height: 1.6;
  color: var(--sn-text);
  padding: var(--sn-btn-pad); border-radius: var(--sn-btn-radius);
  background: linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,.06) 100%), rgba(13,18,25,.30);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 36px -16px rgba(0,0,0,.6);
  text-decoration: none; cursor: pointer; opacity: 1;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
}
body.sn-base .btn-ghost:hover, body.sn-base .btn.btn-ghost:hover {
  transform: translateY(-2px); border-color: rgba(255,255,255,.28); opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 22px 50px -18px rgba(0,0,0,.7);
}
body.sn-base .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  body.sn-base .btn-primary, body.sn-base .btn-ghost, body.sn-base .btn.btn-primary, body.sn-base .btn.btn-ghost { padding: 1rem 1.55rem; font-size: 0.78rem; letter-spacing: 0.1em; }
  body.sn-base .cta-row .btn-primary, body.sn-base .cta-row .btn-ghost { width: 100%; text-align: center; }
}

/* ─── Karten ─── */
body.sn-base .card, body.sn-base .proof-card, body.sn-base .step-card, body.sn-base .idx-card,
body.sn-base .pillar-card, body.sn-base .fact-card, body.sn-base .partner-card, body.sn-base .related-card,
body.sn-base .text-card, body.sn-base .pf-card, body.sn-base .news-card, body.sn-base .imprint-block {
  background: var(--sn-card-bg);
  -webkit-backdrop-filter: var(--sn-card-blur); backdrop-filter: var(--sn-card-blur);
  border: var(--sn-card-border); border-radius: var(--sn-card-radius);
  box-shadow: var(--sn-card-shadow);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
body.sn-base a.idx-card:hover, body.sn-base a.pf-card:hover, body.sn-base a.news-card:hover, body.sn-base a.related-card:hover,
body.sn-base a.partner-card:hover, body.sn-base .card:hover, body.sn-base .proof-card:hover, body.sn-base .pillar-card:hover {
  border-color: var(--sn-card-border-hover); transform: translateY(-3px); box-shadow: var(--sn-card-shadow-hover);
}
/* Karten mit Bild oben (Portfolio, News): das Bild füllt die Karte bis zum Rand */
body.sn-base .pf-card, body.sn-base .news-card { overflow: hidden; }
/* Textblöcke (Impressum, Datenschutz, AGB) und Hinweisbox: ruhig, ohne Anheben */
body.sn-base .imprint-block:hover { transform: none; }
/* Kontakt-Box im Artikel und auf den Hauptseiten: gleicher Radius, grüner Akzent bleibt */
body.sn-base .cta-box { border-radius: var(--sn-card-radius); }
/* Pillen (Städte, Gewerke, Filter): gleiche Rundung, gleiche Kontur */
body.sn-base .city-links a, body.sn-base .trade-links a, body.sn-base .area-list span, body.sn-base .chip {
  border: 1px solid rgba(255,255,255,.13); border-radius: 99px;
}

/* ─── Footer: wie die Startseite ─── */
body.sn-base footer.site-footer {
  position: relative; z-index: 1; margin: 0;
  border-top: 1px solid var(--sn-border); padding: var(--sn-footer-pad);
  display: flex; flex-direction: column; align-items: center; row-gap: 1.4rem;
  font-family: var(--sn-mono); font-size: .68rem; color: var(--sn-muted); letter-spacing: .08em; line-height: 1.6; text-align: center;
  background: none; max-width: none; width: auto;
}
body.sn-base footer.site-footer .footer-socials { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin: 0; padding: 0; }
body.sn-base footer.site-footer .footer-socials a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.018) 50%, rgba(255,255,255,.05) 100%), rgba(13,18,25,.30);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: var(--sn-muted); opacity: 1;
  transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
body.sn-base footer.site-footer .footer-socials a:hover { color: #fff; transform: translateY(-2px); opacity: 1; }
body.sn-base footer.site-footer .footer-socials a.s-ig:hover   { border-color: rgba(225,48,108,.65);  box-shadow: 0 0 0 3px rgba(225,48,108,.12),  0 12px 26px -10px rgba(225,48,108,.45); }
body.sn-base footer.site-footer .footer-socials a.s-li:hover   { border-color: rgba(10,102,194,.65);  box-shadow: 0 0 0 3px rgba(10,102,194,.12),  0 12px 26px -10px rgba(10,102,194,.45); }
body.sn-base footer.site-footer .footer-socials a.s-fb:hover   { border-color: rgba(24,119,242,.65);  box-shadow: 0 0 0 3px rgba(24,119,242,.12),  0 12px 26px -10px rgba(24,119,242,.45); }
body.sn-base footer.site-footer .footer-socials a.s-x:hover    { border-color: rgba(255,255,255,.6);  box-shadow: 0 0 0 3px rgba(255,255,255,.1),   0 12px 26px -10px rgba(255,255,255,.25); }
body.sn-base footer.site-footer .footer-socials a.s-whop:hover { border-color: rgba(45,255,160,.65);  box-shadow: 0 0 0 3px rgba(45,255,160,.12),  0 12px 26px -10px rgba(45,255,160,.45); }
body.sn-base footer.site-footer .footer-socials a svg { width: 18px; height: 18px; display: block; }
body.sn-base footer.site-footer .footer-socials .s-whop-logo { width: 20px; height: auto; display: block; }
body.sn-base footer.site-footer a { color: var(--sn-muted); text-decoration: none; transition: color .2s; opacity: 1; }
body.sn-base footer.site-footer a:hover { color: var(--sn-text); opacity: 1; }
body.sn-base footer.site-footer .footer-brand { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; }
body.sn-base footer.site-footer .footer-brand .we { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 2rem; color: var(--sn-green); letter-spacing: -0.02em; line-height: 1; }
body.sn-base footer.site-footer .footer-brand .ref { font-family: 'Syne', sans-serif; font-style: normal; font-weight: 700; font-size: 1.15rem; color: var(--sn-text); letter-spacing: 0.05em; text-transform: uppercase; align-self: center; margin-left: 2px; line-height: 1.6; }
body.sn-base footer.site-footer .footer-links { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; }
body.sn-base footer.site-footer .footer-tag { max-width: 640px; line-height: 1.7; margin: 0; }
@media (max-width: 760px) {
  body.sn-base footer.site-footer { padding: 2.2rem 1.4rem; }
  body.sn-base footer.site-footer .footer-links { gap: 1rem; }
  body.sn-base footer.site-footer .footer-links a { display: inline-block; padding: .85rem .3rem; }
}