/* =====================================================================
   NOTORIOUS CONCEPTS
   Inhaber: Alex Fritz
   Designsprache: Andruckbogen / Druckmarken
   ===================================================================== */

/* ----- Schrift: Poppins (freie, geometrische Sans), selbst gehostet
   Die Dateien liegen im Ordner /fonts und werden direkt mitgeliefert —
   kein Laden von fremden Servern (DSGVO-sicher), auf jedem Gerät gleich.
   Hinweis: Eine noch nähere Avenir-Next-Alternative wäre Mulish; siehe
   fonts/LIESMICH.txt für den (optionalen) Wechsel. ---------------------*/
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("fonts/poppins-300.woff") format("woff");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/poppins-400.woff") format("woff");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/poppins-500.woff") format("woff");
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/poppins-700.woff") format("woff");
}

/* ----- Design-Tokens --------------------------------------------------*/
:root {
  /* Flächen */
  --paper:        #ffffff;
  --paper-soft:   #f5f5f1;
  --ink:          #0a0a0a;
  --ink-soft:     #161616;
  --muted:        #8d8d87;
  --line:         #0a0a0a;
  --hairline:     rgba(10, 10, 10, .14);

  /* Druck-Primärfarben (CMYK) */
  --c: #00aeef;
  --m: #ec008c;
  --y: #ffed00;
  --k: #0a0a0a;

  /* Spot-/Schmuckfarben aus dem Kontrollstreifen */
  --s-blue:  #2b2a8c;
  --s-green: #00a651;
  --s-red:   #e3001b;
  --p-cream: #f7efc0;
  --p-pink:  #f4a9c6;
  --p-blue:  #92cdee;
  --p-gray:  #9d9d9c;

  /* Typografie */
  --font: "Poppins", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Raster */
  --edge: clamp(20px, 4vw, 56px);   /* Seitenrand = Beschnittzone */
  --maxw: 1280px;

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----- Reset ----------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--m); color: #fff; }

/* ----- Hilfsklassen Typo ---------------------------------------------*/
.eyebrow {
  font-size: clamp(.62rem, .9vw, .72rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}

.label {
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Wortmarke: NOTORIOUS fett, CONCEPTS leicht — beide exakt gleich lang */
.wordmark { display: inline-block; line-height: .92; text-align: left; }
.wordmark .n {
  display: block;
  font-weight: 800;
  letter-spacing: -.01em;
}
.wordmark .c {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: 300;
  font-size: .9em;
}
.wordmark .c span { display: inline-block; }

/* =====================================================================
   DRUCKBOGEN-RAHMEN  (Schnittmarken + Passkreuze, fix im Viewport)
   ===================================================================== */
.sheet-frame { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* Schnittmarken: untere in den Ecken, obere mit Abstand unter der Navigation.
   z-index unter der Kopfleiste, damit das mobile Menü sie sauber überdeckt. */
.crop {
  position: fixed;
  width: 34px; height: 34px;
  z-index: 40;
  pointer-events: none;
  transition: top .45s var(--ease);
}
.crop::before, .crop::after {
  content: ""; position: absolute; background: var(--line);
}
/* horizontale + vertikale Linie je Marke */
.crop::before { width: 34px; height: 1px; }
.crop::after  { width: 1px;  height: 34px; }

.crop.tl { top: 158px; left: 14px; }
.crop.tl::before { top: 0; left: 14px; }
.crop.tl::after  { top: 14px; left: 0; }

.crop.tr { top: 158px; right: 14px; }
.crop.tr::before { top: 0; right: 14px; }
.crop.tr::after  { top: 14px; right: 0; }

.crop.bl { bottom: 14px; left: 14px; }
.crop.bl::before { bottom: 0; left: 14px; }
.crop.bl::after  { bottom: 14px; left: 0; }

.crop.br { bottom: 14px; right: 14px; }
.crop.br::before { bottom: 0; right: 14px; }
.crop.br::after  { bottom: 14px; right: 0; }

/* Beim Scrollen werden die oberen Marken von der Navigation "aufgefangen":
   sie rücken mit Abstand unter die Kopfleiste. Ganz oben (Hero) sitzen sie
   wieder unter den Farbkontrollstreifen (Basiswert oben). */
html.scrolled .crop.tl, html.scrolled .crop.tr { top: 76px; }

/* Unterseiten (Kontakt/Impressum/Datenschutz) haben keinen Hero-Streifen —
   dort sitzen die oberen Marken dauerhaft direkt unter dem Header (gleicher
   Abstand wie im gescrollten Zustand). */
body.subpage .crop.tl, body.subpage .crop.tr { top: 76px; }

/* Scroll-Fortschritt als CMYK-Kontrollstreifen ganz oben */
.progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 100%;
  z-index: 70; display: flex; transform-origin: left center;
  transform: scaleX(0); transition: transform .08s linear;
}
.progress span { flex: 1; }
.progress .pc { background: var(--c); }
.progress .pm { background: var(--m); }
.progress .py { background: var(--y); }
.progress .pk { background: var(--k); }

/* Passkreuz als rotierender Scroll-Indikator unten rechts */
.regmark-fixed {
  position: fixed; right: 22px; bottom: 22px; width: 38px; height: 38px;
  z-index: 60; color: var(--ink); pointer-events: none;
}

/* Randmarken links/rechts: stille Kontrollstreifen-Deko am äußeren Rand,
   fix im Viewport, ohne eigene Bewegung (im Gegensatz zum Passkreuz oben). */
.edge-mark {
  position: fixed; top: 50%; transform: translateY(-50%);
  z-index: 35; display: flex; flex-direction: column; align-items: center;
  gap: 20px; color: var(--muted); pointer-events: none;
}
.edge-mark--left  { left: 18px; }
.edge-mark--right { right: 18px; }

.edge-mark .edge-reg { width: 18px; height: 18px; opacity: .5; flex-shrink: 0; }

.edge-mark .edge-bars {
  width: 14px; height: 50px; flex-shrink: 0; opacity: .45;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 3px,
    var(--ink) 3px, var(--ink) 4px, transparent 4px, transparent 6px,
    var(--ink) 6px, var(--ink) 8px, transparent 8px, transparent 10px,
    var(--ink) 10px, var(--ink) 11px, transparent 11px, transparent 14px
  );
}

.edge-mark .edge-swatches { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.edge-mark .edge-swatches i { display: block; width: 8px; height: 8px; }

.edge-mark .edge-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .6rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; white-space: nowrap;
}

@media (max-width: 1150px), (max-height: 720px) {
  .edge-mark { display: none; }
}

/* =====================================================================
   KOPFLEISTE  (Navigation im Stil eines Kontrollstreifens)
   ===================================================================== */
.topbar {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--edge);
  color: var(--ink);
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.topbar a { color: inherit; }
/* sobald gescrollt wird: leichtes Papier-Backdrop, Höhe bleibt stabil */
.topbar.scrolled {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
  padding-top: 16px; padding-bottom: 16px;
}

.brand-mini { font-weight: 800; letter-spacing: .04em; font-size: .95rem; }
.brand-mini b { font-weight: 800; }
.brand-mini span { font-weight: 300; letter-spacing: .18em; }

.nav { display: flex; gap: clamp(14px, 2.4vw, 34px); align-items: center; }
.nav a {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: currentColor; transition: width .35s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }

.nav-toggle { display: none; }

/* Druck-Deko im mobilen Menü — standardmäßig aus, nur im offenen Menü sichtbar.
   Passermarke unten mittig. */
.menu-deco { display: none; position: absolute; inset: 0; pointer-events: none; }
.menu-deco .mreg { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; color: var(--ink); opacity: .6; }

/* Bei offenem Menü: Weichzeichner der Kopfleiste abschalten, damit sie nicht
   zum Bezugsrahmen des fixierten Menüs wird (sonst klemmt es im gescrollten
   Zustand am oberen Rand). Außerdem die Kopfleiste über die animierte Passermarke
   (z-index 60) heben, sodass das Menü sie beim Hereinfahren überdeckt, statt sie
   schlagartig verschwinden zu lassen. */
html.menu-open .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 70; }

/* Menü gleitet von oben herein */
@keyframes menuIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes menuLinkIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
/* Menü gleitet beim Schließen wieder nach oben hinaus */
@keyframes menuOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* =====================================================================
   GRAUKEIL & FARBSTREIFEN  (wiederkehrende Designelemente)
   ===================================================================== */
.bar { display: flex; height: 14px; width: 100%; }
.bar i { flex: 1; display: block; }
.bar.bordered { border: 1px solid var(--ink); }

/* Graustufenkeil (11 Stufen schwarz -> weiss) */
.wedge i:nth-child(1){background:#000} .wedge i:nth-child(2){background:#1a1a1a}
.wedge i:nth-child(3){background:#333}  .wedge i:nth-child(4){background:#4d4d4d}
.wedge i:nth-child(5){background:#666}  .wedge i:nth-child(6){background:#808080}
.wedge i:nth-child(7){background:#999}  .wedge i:nth-child(8){background:#b3b3b3}
.wedge i:nth-child(9){background:#ccc}  .wedge i:nth-child(10){background:#e6e6e6}
.wedge i:nth-child(11){background:#fff}

/* Farb-Kontrollstreifen */
.cbar i:nth-child(1){background:var(--y)}
.cbar i:nth-child(2){background:var(--m)}
.cbar i:nth-child(3){background:var(--c)}
.cbar i:nth-child(4){background:var(--s-blue)}
.cbar i:nth-child(5){background:var(--s-green)}
.cbar i:nth-child(6){background:var(--s-red)}
.cbar i:nth-child(7){background:var(--k)}
.cbar i:nth-child(8){background:var(--p-cream)}
.cbar i:nth-child(9){background:var(--p-pink)}
.cbar i:nth-child(10){background:var(--p-blue)}
.cbar i:nth-child(11){background:var(--p-gray)}

/* =====================================================================
   HERO  (Andruckbogen + zeitgesteuerte Intro-Animation)
   ===================================================================== */
.hero-wrap { position: relative; min-height: 100svh; overflow: hidden; }

.hero-stage {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 132px var(--edge) 80px;
  text-align: center;
  overflow: hidden;
}

/* Mess-Streifen oben im Hero — mit deutlichem Abstand zur Kopfleiste */
.hero-strip {
  position: absolute; top: clamp(104px, 13vh, 130px); left: var(--edge); right: var(--edge);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.hero-strip .wedge, .hero-strip .cbar { width: clamp(120px, 18vw, 230px); }

.hero-reg { color: var(--ink); width: 40px; height: 40px; margin: 0 auto 30px; }

.hero-center { position: relative; }

/* Intro-Spruch — zwei Zeilen fliegen seitlich herein, bremsen zur Mitte ab,
   schieben sich lesbar langsam aneinander vorbei und fliegen dann schnell
   wieder hinaus. Standard (ohne Intro): unsichtbar, Logo steht direkt. */
.hero-phrase {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  margin: 0 auto; opacity: 0; pointer-events: none;
  font-size: clamp(1.8rem, 6vw, 4.2rem); font-weight: 300; line-height: 1.18; letter-spacing: -.01em;
  transition: opacity .6s var(--ease);
}
.hero-phrase .pl-top, .hero-phrase .pl-bot { display: block; will-change: transform, opacity; }
.hero-phrase .pl-bot { font-weight: 700; }

/* Logo + Begleittexte — Grundzustand: sichtbar (auch ohne JS) */
.hero-logo { display: block; width: min(78vw, 620px); height: auto; margin: 0 auto;
  filter: brightness(0);               /* schwarz auf hellem Hero */
  transition: opacity 1s var(--ease), transform 1s var(--ease); }
.hero-eyebrow { margin-bottom: 26px; }
.hero-tagline { max-width: 34ch; margin: 26px auto 0; font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 300; line-height: 1.5; color: var(--ink-soft); }
.hero-fade { transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }

/* Intro-Zustand: nur aktiv, wenn JS Bewegung erlaubt (Klasse an <html>).
   Die zwei Zeilen laufen ihre Keyframes; Logo + Texte sind zunächst aus. */
html.hero-intro .hero-phrase { opacity: 1; }
html.hero-intro .hero-phrase .pl-top { animation: phraseInTop 4.4s both; }
html.hero-intro .hero-phrase .pl-bot { animation: phraseInBot 4.4s both; }
html.hero-intro .hero-logo { opacity: 0; transform: translateY(12px); }
html.hero-intro .hero-fade { opacity: 0; transform: translateY(12px); }

/* Nach Ende der Intro-Animation: Logo + Texte einblenden, Spruch bleibt weg */
html.hero-intro.hero-revealed .hero-phrase { opacity: 0; transition: none; }
html.hero-intro.hero-revealed .hero-logo  { opacity: 1; transform: none; }
html.hero-intro.hero-revealed .hero-fade  { opacity: 1; transform: none; }

/* Direktes Scrollen überspringt den Spruch sofort */
html.intro-skip .hero-phrase { opacity: 0 !important; transition: none !important; }
html.intro-skip .hero-phrase .pl-top,
html.intro-skip .hero-phrase .pl-bot { animation: none !important; opacity: 0 !important; }

/* Nach dem Intro: Animation zurücksetzen damit translateX(100vw) keinen iOS-Overflow erzeugt */
html.hero-intro.hero-revealed .hero-phrase .pl-top,
html.hero-intro.hero-revealed .hero-phrase .pl-bot { animation: none; transform: none; opacity: 0; }

/* Zeile 1: schnell von links herein, weich abbremsen auf das langsame
   Mitteltempo, sehr ruhig nach rechts driften (lesbar), dann sauber
   beschleunigend nach rechts hinaus. Die Tempi an den Übergängen (24% / 78%)
   sind angeglichen, damit es ohne Ruckeln durchläuft. */
@keyframes phraseInTop {
  0%   { opacity: 0; transform: translateX(-90vw);   animation-timing-function: cubic-bezier(.14,.76,.4,.992); }
  25%  { opacity: 1; transform: translateX(-1.05vw); animation-timing-function: linear; }
  70%  { opacity: 1; transform: translateX(1.05vw);  animation-timing-function: cubic-bezier(.5,.01,.85,.6); }
  100% { opacity: 0; transform: translateX(100vw); }
}
/* Zeile 2: spiegelbildlich von rechts herein und nach links hinaus */
@keyframes phraseInBot {
  0%   { opacity: 0; transform: translateX(90vw);    animation-timing-function: cubic-bezier(.14,.76,.4,.992); }
  25%  { opacity: 1; transform: translateX(1.05vw);  animation-timing-function: linear; }
  70%  { opacity: 1; transform: translateX(-1.05vw); animation-timing-function: cubic-bezier(.5,.01,.85,.6); }
  100% { opacity: 0; transform: translateX(-100vw); }
}

.scrollcue {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.scrollcue .tick {
  width: 1px; height: 42px; background: var(--ink);
  transform-origin: top; animation: tickdrop 1.8s var(--ease) infinite;
}
@keyframes tickdrop {
  0%, 100% { transform: scaleY(.3); opacity: .3; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* =====================================================================
   SEKTIONEN allgemein
   ===================================================================== */
.section { padding: clamp(80px, 13vh, 160px) var(--edge); position: relative; }
.section-inner { max-width: var(--maxw); margin: 0 auto; }

.section-head {
  border-top: 1px solid var(--ink); padding-top: 16px;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head .head-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.section-head .num {
  font-size: .72rem; letter-spacing: .26em; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
}
.section-head h2 {
  font-size: clamp(2.2rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -.02em;
  line-height: .95;
}
.section-head .section-tag {
  margin-top: 14px; font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  font-weight: 300; color: var(--muted); line-height: 1.3;
}
.section-head .regmark-sm { width: 26px; height: 26px; color: var(--ink); flex: none; }

/* ----- Haltung / Über (mit Porträt) ----------------------------------*/
.haltung-grid {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: clamp(26px, 5vw, 64px); align-items: start;
}

/* Porträt als kleiner Andruckbogen: Karte + Druckmarken ringsum */
.sheet { position: relative; align-self: start; padding: 42px 38px; }

/* Farbkontrollstreifen oben (mittig, kürzer als die Karte) */
.sheet .sheet-cbar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 56%; height: 8px;
}
/* Passkreuze an den Seitenmitten */
.sheet .sheet-reg {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink);
}
.sheet .sheet-reg.l { left: 9px; }
.sheet .sheet-reg.r { right: 9px; }

/* die eigentliche Karte */
.portrait {
  position: relative; background: var(--paper); border: 1px solid var(--ink);
  line-height: 0;
}
.portrait .photo-area { background: #ededeb; }   /* helles Grau hinter dem freigestellten Motiv */
.portrait img { width: 100%; height: auto; display: block; }
.portrait figcaption {
  background: var(--ink); color: #fff; line-height: 1.2;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 16px 15px;
}
.portrait .pc-name { font-weight: 800; letter-spacing: .02em; font-size: 1rem; }
.portrait .pc-role { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: #bdbdbd; }

/* Schnittmarken korrekt: je Ecke zwei getrennte Striche, mit 8px Abstand zur Schnittkante */
.portrait .pcrop { position: absolute; width: 0; height: 0; pointer-events: none; }
.portrait .pcrop::before, .portrait .pcrop::after { content: ""; position: absolute; background: var(--ink); }
.portrait .pcrop::before { width: 1px;  height: 15px; }   /* senkrechter Strich (an der Seitenkante) */
.portrait .pcrop::after  { width: 15px; height: 1px;  }   /* waagerechter Strich (an der Ober-/Unterkante) */
.portrait .pcrop.tl { top: 0; left: 0; }
.portrait .pcrop.tl::before { left: 0;  bottom: 8px; }
.portrait .pcrop.tl::after  { top: 0;   right: 8px; }
.portrait .pcrop.tr { top: 0; right: 0; }
.portrait .pcrop.tr::before { right: 0; bottom: 8px; }
.portrait .pcrop.tr::after  { top: 0;   left: 8px; }
.portrait .pcrop.bl { bottom: 0; left: 0; }
.portrait .pcrop.bl::before { left: 0;  top: 8px; }
.portrait .pcrop.bl::after  { bottom: 0; right: 8px; }
.portrait .pcrop.br { bottom: 0; right: 0; }
.portrait .pcrop.br::before { right: 0; top: 8px; }
.portrait .pcrop.br::after  { bottom: 0; left: 8px; }

.lead-entry { margin-bottom: 1.6em; }
.lead-entry:last-of-type { margin-bottom: 2.2em; }

.lead-word {
  font-weight: 800; font-size: clamp(1.5rem, 3.1vw, 2.3rem);
  letter-spacing: .04em; line-height: 1.05;
  text-transform: uppercase;
}
.lead-word.thin { font-weight: 300; letter-spacing: .18em; }

.lead-attrs {
  display: flex; align-items: center; gap: 10px;
  margin-top: 1.1rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.lead-attrs::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--muted); }

.lead {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 300; line-height: 1.45;
  letter-spacing: 0; margin-top: .7em;
}
.body p { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: 1.1em; max-width: 56ch; }
.body p:last-child { margin-bottom: 0; }

/* ----- Philosophie-Akzent --------------------------------------------*/
.philo { padding: clamp(72px, 13vh, 150px) var(--edge); border-top: 1px solid var(--ink); }

.philo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
}
.philo-text {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(24px, 3.5vw, 48px);
  background: radial-gradient(140% 120% at 50% 0%, #3d3d3d 0%, #1a1a1a 45%, #050505 100%);
  color: var(--paper);
  text-align: left;
  position: relative;
}
/* Schnittmarke oben-links */
.philo-text::before {
  content: ''; position: absolute;
  width: 22px; height: 1px; background: var(--ink);
  top: 0; left: -26px;
}
.philo-text::after {
  content: ''; position: absolute;
  width: 1px; height: 22px; background: var(--ink);
  top: -26px; left: 0;
}
/* Passermarke */
.philo-regmark {
  width: clamp(60px, 7.5vw, 96px);
  height: clamp(60px, 7.5vw, 96px);
  opacity: 0.8;
  pointer-events: none;
  align-self: center;
  margin-bottom: auto;
  flex-shrink: 0;
}
.philo-text .quote {
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.04;
}
.philo-text .quote .thin { font-weight: 300; }
.philo-text p {
  margin: 16px 0 0; max-width: none; color: #fff;
  font-weight: 300; font-size: clamp(.82rem, 1.3vw, .95rem); line-height: 1.6;
}

/* Bildkacheln */
.philo-img {
  aspect-ratio: 1 / 1;
  position: relative;
}
.philo-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Schnittmarke oben-rechts */
.philo-img:nth-child(2)::before {
  content: ''; position: absolute;
  width: 22px; height: 1px; background: var(--ink);
  top: 0; right: -26px;
}
.philo-img:nth-child(2)::after {
  content: ''; position: absolute;
  width: 1px; height: 22px; background: var(--ink);
  top: -26px; right: 0;
}
/* Schnittmarke unten-links */
.philo-img:nth-child(3)::before {
  content: ''; position: absolute;
  width: 22px; height: 1px; background: var(--ink);
  bottom: 0; left: -26px;
}
.philo-img:nth-child(3)::after {
  content: ''; position: absolute;
  width: 1px; height: 22px; background: var(--ink);
  bottom: -26px; left: 0;
}
/* Schnittmarke unten-rechts */
.philo-img:nth-child(4)::before {
  content: ''; position: absolute;
  width: 22px; height: 1px; background: var(--ink);
  bottom: 0; right: -26px;
}
.philo-img:nth-child(4)::after {
  content: ''; position: absolute;
  width: 1px; height: 22px; background: var(--ink);
  bottom: -26px; right: 0;
}

/* ----- Leistungen ----------------------------------------------------*/
.services { border-top: 1px solid var(--hairline); }
.service {
  display: grid; grid-template-columns: 64px 1fr auto;
  align-items: center; gap: 24px;
  border-bottom: 1px solid var(--hairline);
  padding: clamp(20px, 3vw, 34px) 0;
  position: relative; transition: padding-left .4s var(--ease);
}
.service .idx { font-size: .72rem; letter-spacing: .2em; color: var(--muted); font-weight: 600; }
.service .name {
  font-size: clamp(1.25rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -.01em;
  transition: transform .4s var(--ease);
}
.service .desc {
  font-size: .92rem; color: var(--muted); max-width: 34ch; text-align: right;
  justify-self: end;
}
/* CMYK-Tick, der beim Hover einfährt */
.service .tick {
  position: absolute; left: -6px; top: 50%; height: 0; width: 4px;
  transform: translateY(-50%); transition: height .4s var(--ease);
}
.service:hover .tick { height: 60%; }
.service:hover .name { transform: translateX(14px); }
.service:hover { padding-left: 6px; }

.service:nth-child(4n+1) .tick { background: var(--c); }
.service:nth-child(4n+2) .tick { background: var(--m); }
.service:nth-child(4n+3) .tick { background: var(--y); }
.service:nth-child(4n)   .tick { background: var(--k); }

.service.is-focus { background: linear-gradient(90deg, var(--paper-soft), transparent); }
.service.is-focus .badge {
  display: inline-block; margin-left: 12px; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; vertical-align: middle;
  border: 1px solid var(--ink); padding: 3px 7px;
}

/* ----- Prozess (echte Abfolge -> Nummerierung gerechtfertigt) --------*/
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); }
.step .step-no {
  font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; line-height: .9;
  letter-spacing: -.03em;
}
.step h3 { font-size: 1.1rem; font-weight: 700; margin: 14px 0 8px; letter-spacing: .02em; }
.step p { font-size: .9rem; color: var(--muted); }
.step .step-bar { position: absolute; top: -2px; left: 0; height: 2px; width: 0; transition: width .9s var(--ease); }
.step:nth-child(1) .step-bar { background: var(--c); }
.step:nth-child(2) .step-bar { background: var(--m); }
.step:nth-child(3) .step-bar { background: var(--y); }
.step:nth-child(4) .step-bar { background: var(--k); }
.step.in .step-bar { width: 100%; }

/* ----- Plakativ: voll-schwarzer Statement-Block ----------------------*/
.statement {
  background: var(--ink); color: #fff;
  padding: clamp(80px, 16vh, 200px) var(--edge);
  position: relative; overflow: hidden;
}
.statement ::selection { background: var(--y); color: var(--ink); }
.statement-logo {
  display: block; width: min(80vw, 720px); height: auto; margin: 0 auto;
  filter: brightness(0) invert(1);          /* weiß auf schwarz */
}
.statement .stmt-sub {
  text-align: center; max-width: 46ch; margin: 36px auto 0;
  font-weight: 300; color: #cfcfcf; font-size: clamp(1rem, 1.8vw, 1.25rem);
}
/* durchgehend laufender Farbstreifen — nahtlose Schleife (eine Kachel = 528px) */
.statement .colorflow {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 10px;
  background-image: repeating-linear-gradient(90deg,
    var(--y) 0, var(--y) 48px,
    var(--m) 48px, var(--m) 96px,
    var(--c) 96px, var(--c) 144px,
    var(--s-blue) 144px, var(--s-blue) 192px,
    var(--s-green) 192px, var(--s-green) 240px,
    var(--s-red) 240px, var(--s-red) 288px,
    #2b2b2b 288px, #2b2b2b 336px,
    var(--p-cream) 336px, var(--p-cream) 384px,
    var(--p-pink) 384px, var(--p-pink) 432px,
    var(--p-blue) 432px, var(--p-blue) 480px,
    var(--p-gray) 480px, var(--p-gray) 528px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  animation: colorflow 18s linear infinite;
}
@keyframes colorflow { to { background-position-x: -528px; } }

/* ----- Kontakt-CTA ---------------------------------------------------*/
.cta { text-align: center; }
.cta h2 {
  font-size: clamp(2rem, 7vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 18px;
}
.cta p { color: var(--muted); max-width: 40ch; margin: 0 auto 40px; font-weight: 300; font-size: 1.1rem; }

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  padding: 16px 30px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .78rem; transition: background .3s var(--ease), color .3s var(--ease);
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--ink); color: #fff; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  border-top: 1px solid var(--ink);
  padding: clamp(40px, 6vw, 70px) var(--edge) 56px;
}
.footer-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; align-items: start;
}
.footer .footer-logo { height: clamp(56px, 7vw, 76px); width: auto; display: block; filter: brightness(0); }
.footer .owner { color: var(--muted); margin-top: 12px; font-size: .9rem; }
.footer h4 { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer ul a { font-size: .95rem; position: relative; }
.footer ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base {
  max-width: var(--maxw); margin: 40px auto 0; padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .76rem; color: var(--muted); letter-spacing: .04em;
}

/* =====================================================================
   UNTERSEITEN  (Impressum / Kontakt / Datenschutz)
   ===================================================================== */
.page { padding: clamp(120px, 18vh, 200px) var(--edge) 90px; min-height: 70vh; }
.page-inner { max-width: 820px; margin: 0 auto; }
.page h1 {
  font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 8px;
}
.page .page-eyebrow { margin-bottom: 22px; }
.page h2 { font-size: 1.2rem; font-weight: 700; margin: 34px 0 10px; }
.page h3 { font-size: 1.04rem; font-weight: 700; margin: 26px 0 8px; }
.page h4 { font-size: .94rem; font-weight: 700; margin: 18px 0 6px; color: var(--ink); }
.page p, .page address {
  font-style: normal; color: var(--ink-soft); margin-bottom: 1em; line-height: 1.7;
}
.page ul { margin: 0 0 1em 1.15em; color: var(--ink-soft); line-height: 1.7; }
.page ul li { margin-bottom: .5em; }
.page a.inline { text-decoration: underline; text-underline-offset: 3px; }
.note {
  background: var(--paper-soft); border-left: 3px solid var(--m);
  padding: 16px 20px; margin: 18px 0; font-size: .9rem; color: var(--ink-soft);
}
.note b { font-weight: 700; }

/* ----- Kontaktformular -----------------------------------------------*/
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 70px); align-items: start; }
.contact-aside p { color: var(--ink-soft); max-width: 34ch; }
.contact-aside .line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.contact-aside .line span { color: var(--muted); min-width: 70px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.contact-aside .contact-strip { max-width: 220px; margin: 22px 0 28px; }

form .field { margin-bottom: 22px; position: relative; }
form label {
  display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 8px; color: var(--ink);
}
form input, form textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1.5px solid var(--hairline);
  padding: 10px 2px; font-size: 1rem; transition: border-color .3s var(--ease);
}
form input:focus, form textarea:focus { outline: none; border-bottom-color: var(--ink); }
form textarea { resize: vertical; min-height: 120px; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .85rem; color: var(--ink-soft); }
.consent input { width: auto; margin-top: 4px; accent-color: var(--m); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

.hp { position: absolute; left: -9999px; opacity: 0; }   /* Honeypot gegen Spam */

.form-msg { margin-top: 18px; font-size: .9rem; display: none; }
.form-msg.ok  { display: block; color: var(--s-green); }
.form-msg.err { display: block; color: var(--s-red); }

/* =====================================================================
   SCROLL-REVEAL
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px) {
  .philo-text::before, .philo-text::after,
  .philo-img::before, .philo-img::after { display: none; }
  .haltung-grid { grid-template-columns: 1fr; gap: 38px; }
  .sheet { max-width: 380px; margin: 0 auto; }
  .process { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; }
  .service { grid-template-columns: 44px 1fr; }
  .service .desc { display: none; }
  .hero-strip { top: 96px; }
  /* obere Schnittmarken mit klarem Abstand UNTER die Kontrollstreifen */
  .crop.tl, .crop.tr { top: 134px; }
  /* Scroll-Hinweis auf kleinen Schirmen weglassen, damit er nicht in den Text läuft */
  .scrollcue { display: none; }
  .hero-strip .wedge, .hero-strip .cbar { width: clamp(90px, 30vw, 150px); }

  .nav { display: none; position: fixed; inset: 0;
         background: rgba(255, 255, 255, .86);
         -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
         flex-direction: column; justify-content: center; align-items: center;
         gap: 28px; }
  .nav.open { display: flex; animation: menuIn .42s cubic-bezier(.22,.61,.36,1) both; }
  .nav.open.closing { animation: menuOut .38s cubic-bezier(.4,0,.7,.35) both; }
  /* Menüpunkte leicht versetzt von oben nach unten einblenden */
  .nav.open a { animation: menuLinkIn .5s var(--ease) both; }
  .nav.open a:nth-child(1) { animation-delay: .12s; }
  .nav.open a:nth-child(2) { animation-delay: .19s; }
  .nav.open a:nth-child(3) { animation-delay: .26s; }
  .nav.open a:nth-child(4) { animation-delay: .33s; }
  .nav a { color: var(--ink); font-size: 1rem; }
  /* Druck-Deko nur im offenen Menü zeigen */
  .nav.open .menu-deco { display: block; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; background: none; border: none;
    cursor: pointer; padding: 6px; z-index: 80; position: relative;
  }
  .nav-toggle span { width: 26px; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 520px) {
  .philo-grid { grid-template-columns: 1fr; }
  .philo-text { aspect-ratio: auto; min-height: 320px; }
  .process { grid-template-columns: 1fr; }
  .statement-logo { width: 86vw; }
  .crop { width: 22px; height: 22px; }
  .crop::before { width: 22px; } .crop::after { height: 22px; }
  .crop.tl::before { left: 9px; } .crop.tl::after { top: 9px; }
  .crop.tr::before { right: 9px; } .crop.tr::after { top: 9px; }
  .crop.bl::before { left: 9px; } .crop.bl::after { bottom: 9px; }
  .crop.br::before { right: 9px; } .crop.br::after { bottom: 9px; }
}

/* Niedrige Fenster: Scroll-Hinweis ausblenden, damit er nicht in den Hero-Text läuft */
@media (max-height: 720px) {
  .scrollcue { display: none; }
}

/* =====================================================================
   BARRIEREFREIHEIT
   ===================================================================== */
:focus-visible { outline: 2px solid var(--m); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}