/* ============================================================
   STUDIO NOLIMITS — Theme "Whitespace"
   Lädt NACH style.css. Weisser Hintergrund, viel Luft,
   reduzierte Linien, heller Footer.
   ============================================================ */

:root {
  --bone: #ffffff;
  --bone-2: #f4f3f0;
  --ink: #111110;
  --line: rgba(17, 17, 16, 0.1);
  --line-strong: rgba(17, 17, 16, 0.35);
  --pad: clamp(1.5rem, 6vw, 7rem);
}

/* Grain fast weg — cleaner Look */
body::after { opacity: 0.18; }

/* Header luftiger */
.site-header {
  padding: 1.6rem var(--pad);
  background: linear-gradient(#ffffff 55%, transparent);
}

/* Mehr vertikale Luft überall */
main { padding-top: 7rem; }

.section {
  padding: clamp(6rem, 14vw, 12rem) var(--pad);
}

.page-hero {
  padding: clamp(7rem, 16vw, 12rem) var(--pad) clamp(4rem, 8vw, 7rem);
}

/* Hero: Titel etwas zurückgenommen, viel Raum drumherum */
.hero { min-height: 96vh; padding-bottom: 4rem; }
.hero-title {
  font-size: clamp(3.5rem, 14vw, 13.5rem);
  margin: 4rem 0 3rem;
}
.hero-sub { padding-top: 2rem; gap: 2.5rem; }
.hero-sub p { max-width: 30rem; }

/* Statements: schmaler, mehr Zeilenluft */
.statement {
  max-width: 52rem;
  line-height: 1.28;
  font-weight: 400;
}
.section-label { margin-bottom: 3.5rem; }

/* Marquees: nur eine feine Linie oben, mehr Innenraum */
.marquee { padding: 1.4rem 0; border-bottom: none; }
.marquee.big .marquee-inner span { opacity: 0.9; }

/* Projekte: grössere Gutter, mehr Abstand zwischen Karten */
.project-grid { gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(4rem, 8vw, 7rem); }
.project-info { padding-top: 1.2rem; margin-top: 1.4rem; }

/* Listen: mehr Höhe pro Zeile */
.row-item { padding: 2.4rem 0; }
.service-block { padding: clamp(3.5rem, 7vw, 6rem) 0; }

/* Stats: luftiger */
.stat { padding: 3rem 2rem 3rem 0; }

/* Footer: hell statt dunkel — nur eine Linie trennt */
.site-footer {
  background: #ffffff;
  color: var(--ink);
  border-top: 1px solid var(--line-strong);
  margin-top: clamp(6rem, 12vw, 10rem);
  padding-top: clamp(4rem, 9vw, 8rem);
}
.footer-top { border-bottom: 1px solid var(--line); padding-bottom: 4rem; }
.footer-col h4 { opacity: 0.45; }
.footer-logo { margin: 4.5rem 0 3rem; opacity: 0.95; }
.footer-bottom { opacity: 0.45; }

/* Buttons/Links: feiner */
.big-link { border-color: var(--line-strong); padding: 0.9rem 1.9rem; }
.big-link:hover { background: var(--ink); color: #ffffff; }
.lang-toggle:hover { background: var(--ink); color: #ffffff; }

::selection { background: var(--ink); color: #ffffff; }

/* ============================================================
   DARK MODE — aktiviert über body[data-theme="dark"]
   Gleiche Weissraum-Logik, invertierte Palette.
   ============================================================ */

body[data-theme="dark"] {
  --bone: #131311;
  --bone-2: #1e1e1b;
  --ink: #e9e5dd;
  --line: rgba(233, 229, 221, 0.12);
  --line-strong: rgba(233, 229, 221, 0.4);
  background: #131311;
  color: #e9e5dd;
}

body[data-theme="dark"]::after { opacity: 0.35; }

body[data-theme="dark"] .site-header {
  background: linear-gradient(#131311 55%, transparent);
}

body[data-theme="dark"] .site-footer {
  background: #131311;
  color: #e9e5dd;
  border-top: 1px solid var(--line-strong);
}

body[data-theme="dark"] .big-link:hover,
body[data-theme="dark"] .lang-toggle:hover,
body[data-theme="dark"] .theme-toggle:hover {
  background: #e9e5dd;
  color: #131311;
}

body[data-theme="dark"] .contact-form button {
  background: #e9e5dd;
  color: #131311;
  border-color: #e9e5dd;
}

body[data-theme="dark"] .contact-form button:hover {
  background: transparent;
  color: #e9e5dd;
}

body[data-theme="dark"] ::selection { background: #e9e5dd; color: #131311; }

/* Logo im Dark Mode invertieren (schwarze Marke → hell) */
body[data-theme="dark"] .brand-logo,
body[data-theme="dark"] .footer-logo img {
  filter: invert(1) hue-rotate(180deg);
}

/* ============================================================
   LIME ACCENT — ein Touch, nicht mehr.
   ============================================================ */

:root { --lime: #c8ff00; }

/* Text-Selektion */
::selection { background: var(--lime); color: #131311; }
body[data-theme="dark"] ::selection { background: var(--lime); color: #131311; }

/* Kleines Lime-Quadrat vor Sektions-Labels */
.section-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--lime);
  margin-right: 0.6rem;
  vertical-align: baseline;
}

/* Buttons & Pills: Hover in Lime statt Schwarz */
.big-link:hover,
.lang-toggle:hover,
.theme-toggle:hover,
body[data-theme="dark"] .big-link:hover,
body[data-theme="dark"] .lang-toggle:hover,
body[data-theme="dark"] .theme-toggle:hover {
  background: var(--lime);
  color: #131311;
  border-color: var(--lime);
}

/* Projektkarten: Linie färbt sich beim Hover */
.project-card:hover .project-info { border-top-color: var(--lime); }
.project-card:hover .project-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Zeilen-Listen: Nummer wird Lime beim Hover */
.row-item.hoverable:hover .row-num, a.row-item:hover .row-num { color: #131311; background: var(--lime); padding: 0.1rem 0.35rem; }
body[data-theme="dark"] .row-item.hoverable:hover .row-num, body[data-theme="dark"] a.row-item:hover .row-num { color: #131311; }

/* Nav: aktiver Link mit Lime-Unterstrich */
.site-nav a.active { text-decoration-color: var(--lime); text-decoration-thickness: 2px; }

/* Kontaktformular: Fokus-Linie + Senden-Hover */
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--lime); border-bottom-width: 2px; }
.contact-form button:hover, body[data-theme="dark"] .contact-form button:hover { background: var(--lime); color: #131311; border-color: var(--lime); }

/* Sanfter Übergang beim Umschalten */
body, .site-header, .site-footer { transition: background 0.4s ease, color 0.4s ease; }


/* ============================================================
   FEINSCHLIFF — Zeilenabstände (Apple-Typo-Massstab)
   Body 1.47 · Lede 1.42 · Statements 1.2 · Display 1.0 · Labels 1.33
   ============================================================ */

body { line-height: 1.47; }

.display { line-height: 1.12; }
.hero-title { line-height: 1.05; }
.page-hero h1 { line-height: 1.05; }

.statement { line-height: 1.2; }

.hero-sub p { line-height: 1.42; }
.page-hero .page-intro { line-height: 1.45; }

.mono,
.section-label,
.project-tag,
.row-meta,
.team-role,
.stat span { line-height: 1.33; }

.service-block h3 { line-height: 1.02; }
.row-title { line-height: 1.05; }
.project-name { line-height: 1.1; }
.team-name { line-height: 1.1; }
.cta-band .display { line-height: 1.12; }

.footer-col a, .footer-col li { line-height: 2; }
.footer-bottom { line-height: 1.6; }