/* ==========================================================================
   pk-theme.css  ·  Richtung D, Fassung 09 "Schwarzgrün, Warmweiß, Ockerakzent"
   Stand 09.08.2026
   --------------------------------------------------------------------------
   Diese Datei ändert die FORM, nicht die Farbwelt der einzelnen Seiten.

   Was sie umstellt:
     Schrift        Archivo Black für Überschriften, Instrument Sans für Text
     Kanten         alle Radien auf 0, keine farbigen Schlagschatten mehr
     Knöpfe         Rechteck, Fläche wischt beim Überfahren von unten hoch
     Navigation     durchgehender warmweißer Balken mit dunkler Schrift
     Beschriftungen Versalien in Archivo, Farbe bleibt die der jeweiligen Seite

   Was sie NICHT anfasst:
     Die Eigenfarben der Fallstudien (--accent, --accent2 und alles Feste),
     die Hintergründe, die Bilder, die Inhalte und die gesamte Bewegung aus
     pk-motion.js und pk-ambient.js.

   Wo eine Seite keine eigene Akzentfarbe hat, springt das Ocker ein.
   Die Datei wird nach der Seiten-CSS und nach pk-motion.css geladen.
   Zum Abschalten: die eine <link>-Zeile im Kopf der Seite entfernen.
   ========================================================================== */

@font-face{
  font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/archivo-latin-wght.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-latin-wght.woff2') format('woff2');
}

:root{
  --pk-sig:#f0ede4;        /* Warmweiß, das Signal der Fassung 09 */
  --pk-sig-ink:#0a100c;    /* Schrift auf dem Signal */
  --pk-ocker:#dda85c;      /* Zweitfarbe, nur wo eine Seite keine eigene hat */
  --pk-disp:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pk-text:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ==========================================================================
   1 · Typografie
   ========================================================================== */
body{font-family:var(--pk-text);}

h1,h2,h3,h4,h5,h6,
.title,.what,.f-sub,.n,.wyear,.yr{font-family:var(--pk-disp);}

h1,h2{font-weight:900;letter-spacing:-.035em;line-height:.92;}
h3,h4,h5,h6,.title,.what{font-weight:800;letter-spacing:-.018em;}

.lead,.hero-lead,.sub,.intro,.prose p,.f-lead{font-family:var(--pk-text);letter-spacing:0;}

/* Beschriftungen: Versalien in Archivo, Farbe bleibt die der Seite */
.eyebrow,.kicker,.cs-eyebrow,.f-eyebrow,.galcat,.ct,.cat,.k,.dd-label,.when,.lbl{
  font-family:var(--pk-disp);font-weight:800;text-transform:uppercase;letter-spacing:.14em;
}
/* Der gerahmte Kasten um das Eyebrow entfällt, es wird zur reinen Beschriftung */
.eyebrow{border:0!important;padding:0!important;border-radius:0!important;background:none!important;}
/* Die Fallstudien-Beschriftung wird ein voller Farbblock in der Seitenfarbe */
.cs-eyebrow{
  border:0!important;border-radius:0!important;
  background:var(--accent,var(--pk-ocker))!important;
  color:#0a100c!important;padding:6px 11px!important;font-size:11px;
}

/* ==========================================================================
   2 · Kanten: alles rechteckig. Punkte bleiben rund.
   ========================================================================== */
.btn,.f-btn,.chip,.cta,.go,.lbx,
.card,.work,.proj,.lcard,.thumb,.badge,.f-badge,
.yr,.wyear,.skill,.tag,.it,.sw,.stat,.kpi,
.gal figure,.shots figure,.hero-figure,.f-media,.fm,
.video-embed,.player,.pdf,.cta-band,.learn,.feature-list,.note,.nda,
.dropdown,#lb img,img{border-radius:0!important;}

/* runde Elemente, die rund bleiben müssen */
.brand-dot,.swatches .dot,.sw .dot,.pk-ring,.pk-dot,.pk-lbnav{border-radius:50%!important;}

/* farbige Schlagschatten raus */
.btn,.f-btn,.cta,.chip,.card,.work,.proj,.lcard{box-shadow:none;}

/* ==========================================================================
   3 · Knöpfe: Rechteck, Fläche wischt von unten hoch
   Die Hintergrundfarbe jedes Knopfes bleibt die der jeweiligen Seite.
   ========================================================================== */
.btn,.f-btn,.cta,.go{
  font-family:var(--pk-disp);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:12.5px;padding:14px 24px;
  position:relative;isolation:isolate;overflow:hidden;
  transition:color .3s ease,background .25s ease,box-shadow .25s ease;
}
.btn::before,.f-btn::before,.cta::before,.go::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--text,#eef2ea);
  transform:translateY(101%);
  transition:transform .34s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before,.f-btn:hover::before,.cta:hover::before,.go:hover::before{transform:translateY(0);}
.btn:hover,.f-btn:hover,.cta:hover,.go:hover{color:var(--bg,#081a12)!important;transform:none!important;}
/* Umrissknöpfe bekommen eine kräftigere Kante statt eines Rahmens von 1 px */
.btn.ghost,.f-btn.ghost{border:0!important;box-shadow:inset 0 0 0 2px var(--text,#eef2ea);}

/* Chips im Kontaktbereich */
.chip{
  font-family:var(--pk-disp);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:12px;padding:13px 20px;
  border:0!important;box-shadow:inset 0 0 0 1px var(--line,rgba(255,255,255,.18));
  transition:background .25s ease,color .25s ease;
}
.chip:hover{background:var(--text,#eef2ea)!important;color:var(--bg,#081a12)!important;}

/* Fakten, Merkmale, Werkzeuge: kleine Versalienmarken in der Seitenfarbe */
.f-facts span,.facts span,.skill,.tag,.it .k,.yearchips span{
  font-family:var(--pk-disp);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;
}


/* ==========================================================================
   3b · Standardknöpfe werden warmweiß
   --------------------------------------------------------------------------
   Seiten mit eigener Akzentfarbe tragen data-pk-eigenfarbe am <html>.
   Dort bleibt jeder Knopf in der Farbe der Seite: FORA braun, Optocycle grün,
   Jllig blau. Alle übrigen Seiten benutzten bisher dasselbe Standardgrün,
   dort übernimmt jetzt das Warmweiß der Fassung 09.
   ========================================================================== */
html:not([data-pk-eigenfarbe]) .btn:not(.ghost),
html:not([data-pk-eigenfarbe]) .btn.primary,
html:not([data-pk-eigenfarbe]) .btn.teal,
html:not([data-pk-eigenfarbe]) .f-btn.primary,
html:not([data-pk-eigenfarbe]) .cta,
html:not([data-pk-eigenfarbe]) .chip.chip-primary{
  background:var(--pk-sig)!important;
  color:var(--pk-sig-ink)!important;
  box-shadow:none!important;
}
/* Beim Überfahren dreht sich das Verhältnis um: dunkle Fläche, helle Schrift */
html:not([data-pk-eigenfarbe]) .btn:not(.ghost)::before,
html:not([data-pk-eigenfarbe]) .btn.primary::before,
html:not([data-pk-eigenfarbe]) .btn.teal::before,
html:not([data-pk-eigenfarbe]) .f-btn.primary::before,
html:not([data-pk-eigenfarbe]) .cta::before{background:var(--pk-sig-ink);}
html:not([data-pk-eigenfarbe]) .btn:not(.ghost):hover,
html:not([data-pk-eigenfarbe]) .btn.primary:hover,
html:not([data-pk-eigenfarbe]) .btn.teal:hover,
html:not([data-pk-eigenfarbe]) .f-btn.primary:hover,
html:not([data-pk-eigenfarbe]) .cta:hover{color:var(--pk-sig)!important;}
html:not([data-pk-eigenfarbe]) .chip.chip-primary:hover{
  background:var(--pk-sig-ink)!important;color:var(--pk-sig)!important;
}
/* Ebenso die Marken auf den Standardseiten: Jahreszahl, Badge, Kachelbalken */
html:not([data-pk-eigenfarbe]) .work .wyear,
html:not([data-pk-eigenfarbe]) .yr,
html:not([data-pk-eigenfarbe]) .badge,
html:not([data-pk-eigenfarbe]) .f-badge{
  background:var(--pk-sig)!important;color:var(--pk-sig-ink)!important;
}
html:not([data-pk-eigenfarbe]) .card,
html:not([data-pk-eigenfarbe]) .lcard,
html:not([data-pk-eigenfarbe]) .proj,
html:not([data-pk-eigenfarbe]) .gallery .work{border-left-color:var(--pk-sig)!important;}
html:not([data-pk-eigenfarbe]) .featured .f-media,
html:not([data-pk-eigenfarbe]) .hero-figure,
html:not([data-pk-eigenfarbe]) .shots figure{border-left-color:var(--pk-sig);}

/* ==========================================================================
   4 · Kacheln und Karten: harte Kante, Farbbalken links
   ========================================================================== */
.card,.lcard,.proj,.gallery .work{
  border:0!important;
  border-left:4px solid var(--accent,var(--pk-ocker))!important;
}
.cards .card:hover,.lgrid .lcard:hover,.grid .proj:hover{
  box-shadow:none!important;transform:translateY(-4px);
}
.gallery .work:hover{box-shadow:none!important;}
.work .wyear,.yr{
  font-family:var(--pk-disp);font-weight:800;letter-spacing:.06em;
  background:var(--accent,var(--pk-ocker))!important;color:#0a100c!important;
  border:0!important;
}
.badge,.f-badge{
  font-family:var(--pk-disp);font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  background:var(--accent,var(--pk-ocker))!important;color:#0a100c!important;
}
/* Große Bilder bekommen denselben Balken wie die Kacheln */
.featured .f-media,.hero-figure,.shots figure{border-left:5px solid var(--accent,var(--pk-ocker));}

/* Farbfelder der Fallstudien bleiben Kreise, der Kasten drum wird eckig */
.swatches .sw{border-radius:0!important;}

/* ==========================================================================
   5 · Navigation: durchgehender warmweißer Balken
   ========================================================================== */
.nav{
  background:var(--pk-sig)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom:0!important;
}
.nav .brand,.nav .brand .txt,.nav .back{color:var(--pk-sig-ink)!important;font-family:var(--pk-disp);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;font-size:15px;}
.nav .brand-dot{background:var(--pk-sig-ink)!important;box-shadow:none!important;width:12px;height:12px;}
.menu-toggle span{background:var(--pk-sig-ink)!important;border-radius:0!important;}

/* Die Menüpunkte sind nur im Balken dunkel. Im ausgeklappten Menü
   am Handy liegt eine dunkle Fläche, dort bleiben sie hell. */
/* WICHTIG: nur die Einträge IM Balken werden dunkel.
   Die Links im Aufklappmenü liegen auf dunkler Fläche und bleiben hell.
   Deshalb überall der direkte Kindselektor, nie .tabs a. */
@media(min-width:981px){
  .nav .tabs > a,
  .nav .tabs > .nav-item > .nav-trigger{
    color:rgba(10,16,12,.74)!important;
    font-family:var(--pk-disp);font-weight:700;text-transform:uppercase;
    letter-spacing:.09em;font-size:11.5px;
  }
  .nav .tabs > a:hover,
  .nav .tabs > .nav-item > .nav-trigger:hover,
  .nav .tabs > .nav-item.open > .nav-trigger{color:var(--pk-sig-ink)!important;}
  .nav .tabs > a::after{background:var(--pk-sig-ink)!important;height:2px;bottom:-3px;}
  /* Der aktive Eintrag ist fett gesetzt statt farbig */
  .nav .tabs > a[style*="color"]{color:var(--pk-sig-ink)!important;font-weight:900!important;}
}
@media(max-width:980px){
  .nav .tabs > a,
  .nav .tabs > .nav-item > .nav-trigger{font-family:var(--pk-disp);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
}
/* Das Aufklappmenü behält seine eigenen hellen Farben, komme was wolle */
.nav .dropdown a{color:var(--muted,#9db19f)!important;font-family:var(--pk-text);text-transform:none;letter-spacing:.01em;font-weight:500;}
.nav .dropdown a:hover{color:var(--text,#eef2ea)!important;}
.nav .dropdown .dd-label{color:var(--muted,#9db19f)!important;opacity:.75;}
/* Das Aufklappmenü bleibt dunkel, das liest sich unter dem hellen Balken besser */
.dropdown{border:0!important;box-shadow:0 16px 40px rgba(0,0,0,.5)!important;}
.dropdown a,.dropdown .dd-label{border-radius:0!important;}

/* Bewegung: der Balken bleibt beim Scrollen hell, der Punkt pulst dunkel */
html.pk-motion .nav.pk-scrolled{
  background:var(--pk-sig)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
@keyframes pkPulseHell{
  0%,100%{box-shadow:0 0 0 0 rgba(10,16,12,.28);}
  50%{box-shadow:0 0 0 6px rgba(10,16,12,0);}
}
html.pk-motion .brand-dot{animation:pkPulseHell 4.5s ease-in-out infinite;}
html.pk-motion .brand:hover .brand-dot{animation-duration:1.6s;}
/* Der Lesefortschritt sitzt unter dem hellen Balken, deshalb dunkel */
html.pk-motion .pk-progress{background:linear-gradient(90deg,var(--pk-sig-ink),var(--accent,var(--pk-ocker)));}

/* ==========================================================================
   6 · Kleinigkeiten
   ========================================================================== */
.tl .item .what{font-family:var(--pk-disp);font-weight:800;}
.when{font-size:11px;opacity:.85;}
.qa .q{font-family:var(--pk-disp);font-weight:800;letter-spacing:-.01em;}
.cs-meta .k,.m .k{font-family:var(--pk-disp);font-weight:800;text-transform:uppercase;letter-spacing:.14em;}
.lbx{font-family:var(--pk-disp);font-weight:800;}
blockquote{font-family:var(--pk-disp);font-weight:800;letter-spacing:-.025em;}

/* Der Titel im Kopfbereich der Startseite steht auf der hellen Sandwelt.
   Ein Verlauf darunter hält ihn in jeder Zufallswelt lesbar. */
/* Ebene 4: über dem eingebetteten Weltenrahmen (z-index 2), unter der Schrift (6). */
.hero::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,8,5,.62) 0%,rgba(3,8,5,.26) 27%,transparent 50%,
                                    rgba(3,8,5,.30) 88%,rgba(3,8,5,.5) 100%);
}
.hero-overlay,.hero-bottom{z-index:6;}
/* Weil jetzt immer ein dunkler Verlauf hinter dem Titel liegt, wird die
   Beschriftung darüber hell gesetzt. Ohne das schaltet die Tag-Nacht-Logik
   der Startseite sie bei hellem Himmel auf Dunkel, und sie läge dunkel auf
   dunkel. Der Titel selbst war schon hell. */
.hero-overlay .eyebrow{color:#f0ede4!important;text-shadow:0 2px 12px rgba(0,0,0,.75);}
.hero-overlay h1{text-shadow:0 3px 26px rgba(0,0,0,.8);}

/* Auf der Startseite färbt die Tag-Nacht-Logik über --sky-contrast ALLE
   Beschriftungen, nicht nur die über der Weltkugel. Bei hellem Himmel stand
   deshalb auch das "Projekte" weit unten dunkelgrün auf dunkelgrün und war
   praktisch unsichtbar. Das galt schon vor der Umstellung. Unterhalb des
   Kopfbereichs gilt jetzt wieder die normale Akzentfarbe. */
.section-head .eyebrow,
.band .q,
.galcat{color:var(--gold,#93b39a)!important;}

/* Der Hinweis unten steht auf hellen wie auf dunklen Welten */
.hero-bottom .hero-line{
  background:rgba(4,10,7,.5);padding:5px 13px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}

/* ==========================================================================
   7 · Handy
   ========================================================================== */
@media(max-width:700px){
  .btn,.f-btn,.cta{width:100%;justify-content:center;text-align:center;}
  .btnrow,.f-cta,.contact-row{flex-direction:column;align-items:stretch;}
  h1,h2{letter-spacing:-.03em;}
}

/* Bei "Bewegung reduzieren" bleibt die Form, nur das Aufwischen entfällt */
@media (prefers-reduced-motion:reduce){
  .btn::before,.f-btn::before,.cta::before,.go::before{display:none;}
  .btn:hover,.f-btn:hover,.cta:hover,.go:hover{color:inherit!important;}
  html.pk-motion .brand-dot{animation:none;}
}