/* NIKdesign · Grundlage für alle Seiten: Farben, Schrift, Navigation, Buttons, Footer, Scroll-Einblendung
   Gehört zu nikdesign.de, Stand 28.09.2026. Siehe dokumentation/TECHNIK.md */

:root{
  /* Palette aus Entwurf 05 */
  --orange:#f9a70d;
  --petrol:#5a7782;
  --petrol-tief:#48606a;
  --schriftzug:#506a78;   /* Originalfarbe des Schriftzugs aus Franks Vektordatei */
  --grau:#3f4548;
  --matt:#6b7072;         /* Nebentext: 5,0:1 auf Weiß, 4,6:1 auf Hell (WCAG AA) – vorher #8a8f91 mit 3,3:1 */
  --matt-leicht:#83888a;  /* nur für große Schrift ab 24 px (Untertitel der Abschnitte), dort genügen 3:1 */
  --hell-text:#cdd7db;    /* Fließtext auf Petrol: 4,5:1 – vorher #B9C6CB mit 3,8:1 */
  --hell:#f4f4f2;
  --papier:#fbfbf9;        /* Papierton für ruhige Abschnitte der Projektseiten */
  --linie:#e3e3e0;
  --weiss:#ffffff;
  --radius:22px;
  --max:1080px;
  --uebergang:cubic-bezier(.28,.11,.32,1);
  --schatten-flaeche:0 14px 30px -14px rgba(63,69,72,.24);   /* Fläche bei Mouseover (dezent) */
  --schatten-link:0 26px 50px -18px rgba(63,69,72,.36);      /* Fläche mit Verweis bei Mouseover */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{
  font-family:"Open Sans","Open Sans Ersatz",-apple-system,system-ui,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  background:var(--weiss);color:var(--grau);
  font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--petrol-tief);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Mikrotypografie ----------
   balance: Überschriften brechen in gleich lange Zeilen · pretty: keine einzelnen Wörter in der letzten Absatzzeile
   (Chrome/Edge/Safari; andere Browser ignorieren es) · Silbentrennung nur im Fließtext, nie in Überschriften und Zitaten */
h1,h2,h3,h4,.zitat,.abschnitt-titel{text-wrap:balance}
p,li,dd{text-wrap:pretty}
p,li,dd{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:8 4 3}
.hero p,.zitat,.dachzeile,.label,nav li,.menue li,.footer-inner,.kontakt-info p,dt{-webkit-hyphens:manual;hyphens:manual}

/* ---------- Tastaturbedienung: sichtbarer Fokusring nur bei Tastatur (nicht bei Maus/Touch) ---------- */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.nav-cta:focus-visible,.menue-knopf:focus-visible{border-radius:99px}
.pj-karte:focus-visible{outline-offset:8px;border-radius:calc(var(--radius) + 4px)}
.logo:focus-visible{outline-offset:6px}
/* Sprunglink: erst sichtbar, wenn er per Tab den Fokus bekommt */
.sprung{
  position:fixed;top:-4rem;left:1rem;z-index:200;padding:.6rem 1.1rem;
  background:var(--grau);color:var(--weiss);border-radius:0 0 12px 12px;font-size:.9rem;
  font-variation-settings:"wdth" 96,"wght" 600;transition:top .2s;
}
.sprung:focus{top:0;outline:none;text-decoration:none}
.label{
  font-variation-settings:"wdth" 88,"wght" 600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--matt);
}

/* ---------- Navigation: schmal, Milchglas, Hover über die Breitenachse ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:50px;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(63,69,72,.1);
}
.nav{max-width:var(--max);margin:0 auto;height:100%;padding:0 1.4rem;display:flex;align-items:center;justify-content:space-between}
.logo{
  font-size:1.08rem;color:var(--grau);
  font-variation-settings:"wdth" 92,"wght" 700;letter-spacing:-.01em;
}
.logo:hover{text-decoration:none}
.logo b{font-weight:inherit;color:var(--orange)}

/* ---------- Schriftzug »nik« (Handschrift, siehe assets/js/schriftzug.js) ----------
   Ruhezustand ist die SVG-Form. Während des Zeichnens liegt ein Canvas darüber.
   data-nik-warte: noch nicht gezeichnet (nur wenn html.nik-js gesetzt ist, sonst sofort sichtbar) */
.nik-zug{display:inline-block;position:relative;color:var(--schriftzug);line-height:0}
.nik-zug svg{display:block;width:100%;height:auto;fill:currentColor;overflow:visible}
.nik-zug canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.nik-js .nik-zug[data-nik-warte] svg,.nik-zug[data-zustand="zeichnet"] svg{visibility:hidden}
.nik-defs{position:absolute;width:0;height:0;overflow:hidden}
/* In der Kopfleiste: Bildmarke vor »NIKdesign«, Grundlinie der Handschrift auf der Textgrundlinie */
.logo .nik-zug{
  --nik-h:1.5rem;
  width:calc(var(--nik-h)*112/33);margin-right:.45rem;
  vertical-align:calc(var(--nik-h)*-.2);overflow:hidden;
  transition:width .55s var(--uebergang),margin .55s var(--uebergang),opacity .35s;
}
.logo .nik-zug svg,.logo .nik-zug canvas{width:calc(var(--nik-h)*112/33);height:var(--nik-h)}
.nik-js .logo .nik-zug[data-nik-warte],.logo .nik-zug[data-zustand="aus"]{width:0;margin-right:0;opacity:0}
nav ul{display:flex;gap:1.9rem;list-style:none;align-items:center}
nav a{
  font-size:.84rem;color:var(--petrol-tief);
  font-variation-settings:"wdth" 88,"wght" 600;
  transition:font-variation-settings .35s var(--uebergang),color .25s;
}
nav a:hover{
  font-variation-settings:"wdth" 100,"wght" 600;
  color:var(--grau);text-decoration:none;
}
.nav-cta{
  background:var(--orange);color:var(--grau)!important;font-size:.78rem;
  padding:.36rem .95rem;border-radius:99px;
}
.nav-cta:hover{filter:brightness(.94)}
/* Aktueller Abschnitt (setzt assets/js/grundlage.js über aria-current): volle Breite, dunkler, oranger Punkt darunter */
nav a{position:relative}
nav a:not(.nav-cta)::after{
  content:"";position:absolute;left:50%;bottom:-.55em;width:4px;height:4px;border-radius:50%;
  background:var(--orange);transform:translateX(-50%) scale(0);transition:transform .35s var(--uebergang);
}
nav a[aria-current]{color:var(--grau);font-variation-settings:"wdth" 100,"wght" 600}
nav a[aria-current]::after{transform:translateX(-50%) scale(1)}

/* ---------- Menü auf schmalen Bildschirmen (Knopf und Fläche baut assets/js/grundlage.js) ----------
   Ohne JavaScript: nur »Anfragen« bleibt in der Leiste, die Seite ist über das Scrollen weiter vollständig erreichbar. */
.menue-knopf{
  display:none;width:44px;height:44px;margin:0 -.6rem 0 .2rem;padding:0;border:0;background:none;cursor:pointer;
  position:relative;border-radius:50%;
}
.menue-knopf span{
  position:absolute;left:12px;width:20px;height:2px;border-radius:2px;background:var(--grau);
  transition:transform .4s var(--uebergang),top .4s var(--uebergang);
}
.menue-knopf span:first-child{top:18px}
.menue-knopf span:last-child{top:25px}
.menue-knopf[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menue-knopf[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.menue{
  position:fixed;left:0;right:0;top:50px;bottom:0;z-index:99;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,6vh,3.5rem) 1.6rem 1.4rem;
  background:rgba(250,250,248,.9);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  visibility:hidden;opacity:0;
  transition:opacity .35s var(--uebergang),visibility 0s .35s;
}
.menue-offen .menue{visibility:visible;opacity:1;transition:opacity .35s var(--uebergang),visibility 0s}
.menue ul{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
header.menue-offen .nav-cta{opacity:0;pointer-events:none;transition:opacity .25s} /* der Knopf im Menü übernimmt */
header .nav-cta{transition:opacity .25s,filter .25s}
.menue nav ul li{display:block}
.menue li a{
  display:block;padding:.35rem 0;font-size:clamp(1.9rem,7vw,2.5rem);line-height:1.2;color:var(--grau);
  font-variation-settings:"wdth" 88,"wght" 300;letter-spacing:-.02em;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--uebergang),transform .5s var(--uebergang),font-variation-settings .35s var(--uebergang);
  transition-delay:calc(var(--n,0)*.06s);
}
.menue-offen .menue li a{opacity:1;transform:none}
.menue li a:hover,.menue li a[aria-current]{font-variation-settings:"wdth" 100,"wght" 500;text-decoration:none}
.menue li a::after{display:none}
.menue li a.nav-cta{
  display:inline-block;margin-top:1.2rem;padding:.7rem 1.5rem;font-size:1.05rem;letter-spacing:0;
  font-variation-settings:"wdth" 96,"wght" 600;background:var(--orange);color:var(--grau);
}
.menue-fuss{display:flex;gap:1.4rem;font-size:.8rem}
.menue-fuss a{color:var(--matt)}
html.menue-offen{overflow:hidden}
@media(max-width:720px){
  header nav ul li:not(:last-child){display:none}
  header nav{margin-left:auto}
  .menue-knopf{display:block}
  .nav{padding-right:1rem}
}
@media(min-width:721px){.menue{display:none}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-size:1rem;
  font-variation-settings:"wdth" 96,"wght" 600;
  padding:.72rem 1.55rem;border-radius:99px;
  transition:filter .25s,font-variation-settings .35s var(--uebergang);
}
.btn:hover{text-decoration:none}
.btn-orange{background:var(--orange);color:var(--grau)}
.btn-orange:hover{filter:brightness(.94)}
.btn-geist{color:var(--petrol-tief)}
.btn-geist::after{content:" ›"}
.btn-geist:hover{font-variation-settings:"wdth" 100,"wght" 700;text-decoration:none}

/* ---------- Footer ---------- */
footer{background:var(--petrol-tief);color:var(--hell-text)}
.footer-inner{
  max-width:var(--max);margin:0 auto;padding:1.7rem 1.4rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.78rem;
}
.footer-inner nav{display:flex;gap:1.4rem}
.footer-inner a{color:#D7E0E3}
.footer-inner a:hover{color:var(--orange)}

/* ---------- Scroll-Inszenierung ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--uebergang),transform .9s var(--uebergang)}
.reveal.sichtbar{opacity:1;transform:none}
.reveal.verzoegert-1{transition-delay:.08s}
.reveal.verzoegert-2{transition-delay:.16s}
.reveal.verzoegert-3{transition-delay:.24s}

/* ---------- Flächen bei Mouseover, auf allen Seiten gleich (Frank, 09.10.2026) ----------
   Jede Fläche hebt sich leicht; Flächen mit Verweis heben sich deutlicher und tragen schon vorher sichtbar einen Pfeil
   (.kachel-mehr auf der Startseite, »Projekt ansehen« bei den Projektkarten).
   Bewegt wird über die Eigenschaft »translate«, nicht »transform« – so bleiben Einblenden (.reveal, [data-auf]) und Parallaxe unberührt.
   Nicht dabei: Werkzeuge (Vergleichsregler, Formular, Merkzettel), randabfallende Bilder und das Porträt (clip-path schneidet den Schatten ab). */
@media (hover:hover) and (pointer:fine){
  .kachel,.pm-foto,.pm-frei,.ud-zwei,.ud-band > div,.ws-station,.ws-banner-bild,.ws-typo-beispiele li{
    transition:translate .45s var(--uebergang),box-shadow .45s var(--uebergang),opacity .9s var(--uebergang),transform .9s var(--uebergang)}
  .kachel:hover,.pm-foto:hover,.pm-frei:hover,.ud-zwei:hover,.ud-band > div:hover,.ws-station:hover,.ws-banner-bild:hover,.ws-typo-beispiele li:hover{
    translate:0 -4px;box-shadow:var(--schatten-flaeche)}
  .pm-voll .pm-foto:hover{translate:none;box-shadow:none}
  .pm-frei.pm-schwebend:hover{translate:none;box-shadow:none}   /* schwebende Freisteller haben keine Fläche – sonst erschiene beim Überfahren ein Rechteck mit Schatten */
  a.kachel:hover{translate:0 -8px;box-shadow:var(--schatten-link)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auftritt,.reveal,.hero h1.setzen{opacity:1;transform:none;animation:none;transition:none}
  nav a,.kachel h3,.kontakt-info a,.btn-geist,.logo .nik-zug{transition:none}
}

/* Seitenübergänge zwischen Übersicht und Projektseiten (Safari 18+, Chrome 126+; andere Browser wechseln ohne Übergang) */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Druck: nur Inhalt, schwarz auf weiß, ohne Leiste, Menü, Formular und Bewegung ---------- */
@media print{
  header,footer,.sprung,.menue-knopf,.menue,.hero .hk,.hero .hw15,.hero-aktion,form,.pj-schiene-knoepfe,.nik-defs,.ra-register{display:none!important}
  html{scroll-padding-top:0}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  main,section{padding-top:0;padding-bottom:1.5rem}
  a{color:inherit;text-decoration:none}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
  .reveal,.auftritt,.hero h1.setzen,[data-pj],.pj-ebene,.pj-par,.rt-auf{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .kachel:hover,.pm-foto:hover,.pm-frei:hover,.ud-zwei:hover,.ud-band > div:hover,.ws-station:hover,.ws-banner-bild:hover,.ws-typo-beispiele li:hover,a.kachel:hover{translate:none!important}
  .kachel,.fakt,.pj-karte{break-inside:avoid;box-shadow:none}
  h1,h2,h3{break-after:avoid}
  .buehne,.kachel.petrol,.bento-sektion,.kontakt-sektion{background:#fff!important;color:#000!important}
  .buehne *,.kachel.petrol *{color:#000!important;-webkit-text-fill-color:#000}
}
/* Kennzeichnung mit KI erzeugter Bilder am Bild selbst (AI Act Art. 50 Abs. 4, seit 02.08.2026; Marke wie »Konzept«) */
.ki-marke{position:absolute;left:.8rem;bottom:.8rem;z-index:3;padding:.22rem .65rem;border-radius:99px;background:var(--weiss);color:var(--grau);font-size:.68rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:"wdth" 92,"wght" 600;box-shadow:0 4px 12px -6px rgba(0,0,0,.35);pointer-events:none}