/* =========================================================
   SitePulse – Signature-Layer
   Ergänzt style.css um die Studio-eigene Bildsprache: großzügige
   Fotografie, ein abgestuftes Beige-Tonsystem zur Unterscheidung
   von Sektionen/Widgets, Space Grotesk als Display-Schrift,
   Dark-Sections als Kontrast. Respektiert prefers-reduced-motion.
   ========================================================= */

:root {
  --sp-ink: #17100b;
  --sp-ink-muted: rgba(251, 247, 241, .68);
  /* Lebendiger Akzent – bewusst unabhängig von --color-accent (das steuert in
     dieser Engine die Überschriftenfarbe, siehe config.php-Kommentar). */
  --sp-accent: #e08a3e;
  --sp-accent-soft: color-mix(in srgb, var(--sp-accent) 16%, transparent);

  /* Abgestuftes Beige-System – unterscheidet Sektionen/Widgets tonal,
     statt alles auf zwei Flächenfarben (bg/surface) zu reduzieren. */
  --sp-beige-1: #fbf7f1; /* = --color-bg, hellste Fläche */
  --sp-beige-2: #f4ecdd;
  --sp-beige-3: #efe3d2; /* = --color-surface */
  --sp-beige-4: #e7d7bc;
}

/* ---------- Einheitlicher Randabstand ----------
   Die Engine nutzt auf Kontakt/FAQ/Referenzen/Teilen von Über mich einen
   schmaleren Container (--container-narrow, 760px) für bessere Lesbreite,
   auf Start/Leistungen dagegen den vollen Container (1120px). Das erzeugt
   sichtbar unterschiedliche Ränder von Seite zu Seite. Für SitePulse soll
   der Abstand zum Seitenrand auf allen Seiten gleich sein – daher hier
   bewusst gleichgezogen (Lesbarkeit federn stattdessen einzelne Textblöcke
   selbst ab, z. B. .hero__lead, falls nötig). */
.container--narrow { max-width: var(--container); }

/* ---------- Wordmark ---------- */
.logo { letter-spacing: -.01em; }
.logo img { display: block; height: 34px; width: auto; }
.footer-brand__name { display: flex; align-items: center; gap: .4rem; }
.footer-brand__name img { display: inline-block; flex: none; }

/* ---------- Eyebrow-Label ---------- */
.eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-2);
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-muted);
}
.eyebrow--dark { color: var(--sp-ink-muted); }

/* ---------- Hero: Text liegt direkt auf dem Bild ---------- */
.hero--split {
  position: relative;
  padding-block: clamp(4rem, 11vw, 7rem);
  background-size: cover;
  background-position: center 78%;
  text-align: left;
  isolation: isolate;
}
/* Abdunkelung fürs Bild, damit der weiße Text darauf lesbar bleibt (WCAG AA) */
.hero--split::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 11, .58) 0%, rgba(23, 16, 11, .32) 45%, rgba(23, 16, 11, .8) 100%);
  z-index: -1;
}
.hero__copy { max-width: 66ch; }
.hero--split h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}
.hero--split .hero__lead {
  margin-inline: 0; max-width: 46ch; font-size: 1.15rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero--split .hero__actions { justify-content: flex-start; }
.hero--split .btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.hero--split .btn--ghost:hover { background: rgba(255, 255, 255, .14); }
.hero--split .eyebrow { color: rgba(255, 255, 255, .85); }

.hero__badges {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.hero__badges li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.hero__badges li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sp-accent); flex: 0 0 auto;
}

/* ---------- Dark Sections (Kontrastschläge) ---------- */
.section--dark {
  background: var(--sp-ink);
  color: var(--sp-ink-muted);
}
.section--dark .statement,
.section--dark h2 { color: #fbf7f1; }
.section--dark :focus-visible { outline-color: var(--sp-accent); }

.statement {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  max-width: 26ch;
  margin: 0 0 var(--space-2);
}
.statement--muted { color: var(--sp-ink-muted); font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 400; }
.statement:last-child { margin-bottom: 0; }

/* ---------- Section-Titel: mutiger skaliert ---------- */
.section__title {
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  letter-spacing: -.02em;
}

/* ---------- Beige-Widget-System ----------
   Karten sitzen auf leicht unterschiedlichen Beige-Tönen statt alle
   identisch weiß zu sein – macht Gruppen aus mehreren Widgets
   lebendiger, ohne die ruhige Grundpalette zu verlassen. Flach statt
   Schatten/Rahmen – wirkt gedruckt statt wie eine Bootstrap-Karte. */
.card {
  background: var(--sp-beige-2);
  border: 0;
  box-shadow: none;
  padding: var(--space-4) var(--space-3);
}
.grid--3 .card:nth-child(3n+2) { background: var(--sp-beige-3); }
.grid--3 .card:nth-child(3n+3) { background: var(--sp-beige-4); }
.grid--4 .card:nth-child(4n+2) { background: var(--sp-beige-3); }
.grid--4 .card:nth-child(4n+3) { background: var(--sp-beige-4); }
.grid--4 .card:nth-child(4n+4) { background: var(--sp-beige-3); }
.section--accent .card { background: var(--sp-beige-1); }
.section--accent .grid--3 .card:nth-child(3n+2) { background: var(--sp-beige-2); }
.section--accent .grid--3 .card:nth-child(3n+3) { background: var(--sp-beige-3); }
.card h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.card__icon { color: var(--color-primary); margin-bottom: var(--space-3); }
.card__icon svg { width: 30px; height: 30px; }

/* ---------- Prozess-Karten (Leistungen auf der Startseite) ---------- */
.process-intro { max-width: 54ch; margin: 0 0 var(--space-4); font-size: 1.05rem; }
.card--process { transition: transform .25s ease, background-color .25s ease; }
.card--process:hover { transform: translateY(-4px); }

/* ---------- Bildstreifen (Fotobahn) ---------- */
.fotobahn { border-radius: 0; }

/* ---------- Referenzen-Teaser: randloses Foto mit Text-Overlay ---------- */
.showcase { margin-bottom: var(--space-4); }
.showcase__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.showcase__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10, 7, 5, .95) 0%, rgba(10, 7, 5, .78) 28%, rgba(10, 7, 5, 0) 62%);
  z-index: 0;
}
.showcase__frame-text {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--space-3);
  color: #fff;
}
.showcase__tag {
  display: inline-block;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
  margin-bottom: .35rem;
}
.showcase__frame-text h2 {
  color: #fff; margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}
.compare {
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.compare__col p { color: var(--color-text); margin: 0; }
.compare__label {
  display: block;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-muted);
  margin-bottom: .5rem;
}
.compare__result {
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- Scroll-Reveal ----------
   Sicheres Muster: CSS versteckt NICHTS standardmäßig. Erst sitepuls.js
   markiert Elemente per Klasse als "wird animiert" – bleibt JS aus
   (Fehler, kein Support, Bots), ist der Inhalt trotzdem sofort sichtbar. */
[data-reveal].js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].js-reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 720px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

/* Mehr Luft an den Rändern auf dem Handy – 1rem (Engine-Standard) wirkt
   bei großer Headline-Typo schnell beengt. .swipe bleedet bewusst bis an den
   Rand (siehe style.css) und muss dieselbe Breite kompensieren, sonst klafft
   links eine kleine Lücke. */
@media (max-width: 640px) {
  .container { padding-inline: 1.5rem; }
  .swipe { margin-inline: -1.5rem; }
  .swipe::before, .swipe::after { flex-basis: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].js-reveal { opacity: 1; transform: none; transition: none; }
}