/* NIKdesign · Nur Startseite: Hero, Abschnitte, Leistungen, Über mich, Kontakt
   Gehört zu nikdesign.de, Stand 28.09.2026. Siehe dokumentation/TECHNIK.md */

/* ---------- Hero: Grundlage für Text und Knöpfe, die Headline setzt sich beim Laden ---------- */
.hero{
  padding:9.5rem 1.4rem 7rem;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FAFAF8 0%,var(--weiss) 100%);
}
.hero > *{position:relative}
/* Bildteil des Heros (Konstruktion, Punktwolke): assets/css/hero.css, erzeugt von werkzeuge/startseite/hero-bauen.py */
.hero .dachzeile{
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--petrol);
  font-variation-settings:"wdth" 88,"wght" 600;
}
@media(max-width:480px){.hero .dachzeile{font-size:.68rem;letter-spacing:.16em}} /* »Kommunikationsdesign · seit 1995« soll auf eine Zeile passen */
.hero h1{
  margin-top:1rem;
  font-size:clamp(2.7rem,7.2vw,5.4rem);
  font-variation-settings:"wdth" 92,"wght" 300;
  letter-spacing:-.025em;line-height:1.06;color:var(--grau);
}
.hero h1 .greifbar{
  font-variation-settings:"wdth" 92,"wght" 560;letter-spacing:-.008em; /* fett braucht bei der Open Sans mehr Luft als die leichte Zeile (-.025em) */
  background:linear-gradient(96deg,var(--orange) 0%,#e08c00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.unterzeile{
  margin:1.5rem auto 0;max-width:56ch;text-wrap:balance;
  font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.45;color:var(--matt);
  font-variation-settings:"wdth" 100,"wght" 400;
}
.hero-aktion{margin-top:2.3rem;display:flex;gap:1.4rem;justify-content:center;align-items:center;flex-wrap:wrap}

/* Auftritts-Sequenz: die Headline "setzt sich" von schmal-fest zu weit-leicht */
.auftritt{opacity:0;transform:translateY(24px);animation:auftreten 1s var(--uebergang) forwards}
.auftritt.v2{animation-delay:.15s}
.auftritt.v3{animation-delay:.3s}
.auftritt.v4{animation-delay:.45s}
@keyframes auftreten{to{opacity:1;transform:none}}
.hero h1.setzen{animation:auftreten 1s var(--uebergang) .15s forwards, setzen 1.5s var(--uebergang) .15s forwards}
@keyframes setzen{
  from{font-variation-settings:"wdth" 78,"wght" 520}
  to{font-variation-settings:"wdth" 92,"wght" 300}
}

/* ---------- Abschnitts-Grundgerüst ---------- */
section{padding:6.5rem 1.4rem}
.innen{max-width:var(--max);margin:0 auto}
.abschnitt-titel{
  font-size:clamp(1.9rem,4.6vw,2.9rem);
  font-variation-settings:"wdth" 92,"wght" 300;
  letter-spacing:-.02em;line-height:1.12;color:var(--grau);
}
.abschnitt-titel span{color:var(--matt-leicht)}
.abschnitt-intro{margin-top:1rem;font-size:1.1rem;color:var(--matt);max-width:58ch}

/* Signatur: Überschriften atmen beim Hereinscrollen über die Breitenachse auf.
   Läuft in Chrome/Edge; Safari/Firefox zeigen den Endzustand — kein Fehler. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .abschnitt-titel{
      animation:aufatmen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
    @keyframes aufatmen{
      from{font-variation-settings:"wdth" 80,"wght" 300}
      to{font-variation-settings:"wdth" 92,"wght" 300}
    }
  }
}

/* ---------- Leistungen: Bento-Grid ---------- */
.bento-sektion{background:var(--hell)}
.bento{
  margin-top:3rem;display:grid;gap:1rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(200px,auto);
}
.kachel{
  background:var(--weiss);border-radius:var(--radius);padding:1.9rem 1.8rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;
  box-shadow:0 1px 2px rgba(63,69,72,.05);
}
.kachel .symbol{width:38px;height:5px;border-radius:3px;background:var(--orange);margin-bottom:auto}
.kachel h3{
  font-size:1.2rem;color:var(--grau);
  font-variation-settings:"wdth" 96,"wght" 500;letter-spacing:-.01em;
  transition:font-variation-settings .4s var(--uebergang);
}
a.kachel:hover h3{font-variation-settings:"wdth" 96,"wght" 700}
.kachel p{font-size:.94rem;color:var(--matt);line-height:1.5}
.kachel.gross{grid-column:span 2;grid-row:span 2}
.kachel.gross h3{font-size:1.62rem}
.kachel.breit{grid-column:span 2}
.kachel.petrol{background:var(--petrol-tief)}
.kachel.petrol h3{color:var(--hell)}
.kachel.petrol p{color:var(--hell-text)}
.kachel.petrol .symbol{background:var(--orange)}
a.kachel{color:inherit;text-decoration:none}                       /* Kacheln mit Verweis in die Werkstatt */
/* Verweis schon vor dem Mouseover sichtbar: Ziel als Text, dazu ein Pfeil im orangen Kreis */
.kachel-mehr{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;margin-top:.9rem;font-size:.9rem;color:var(--petrol-tief);font-variation-settings:"wdth" 96,"wght" 600}
.kachel-mehr::after{content:"›";display:grid;place-items:center;width:2rem;height:2rem;padding-bottom:.12em;box-sizing:border-box;border-radius:50%;background:var(--orange);color:var(--grau);font-size:1.35rem;line-height:1;font-variation-settings:"wdth" 100,"wght" 600;transition:translate .35s var(--uebergang)}
a.kachel:hover .kachel-mehr::after{translate:4px 0}
a.kachel:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.kachel.petrol .kachel-mehr{color:var(--weiss)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.kachel.gross{grid-column:span 2;grid-row:span 1}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.kachel.breit,.kachel.gross{grid-column:span 1}}

/* ---------- Über mich: Petrol-Bühne ---------- */
.buehne{background:var(--petrol-tief);color:var(--hell);text-align:center}
.buehne .zitat{
  max-width:24ch;margin:0 auto;
  font-size:clamp(1.9rem,4.8vw,3.3rem);
  font-variation-settings:"wdth" 92,"wght" 300;
  letter-spacing:-.02em;line-height:1.16;
}
.buehne .zitat .betont{
  font-variation-settings:"wdth" 92,"wght" 600;
  background:linear-gradient(96deg,var(--orange) 0%,#ffc44d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.buehne p.erlaeuterung{margin:1.6rem auto 0;max-width:56ch;font-size:1.08rem;color:var(--hell-text);line-height:1.6}
.buehne-fakten{
  margin:3.5rem auto 0;max-width:var(--max);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:left;
}
@media(max-width:720px){.buehne-fakten{grid-template-columns:1fr}}
.fakt{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(4px);
  border-radius:var(--radius);padding:1.7rem 1.6rem;border-top:3px solid var(--orange);
}
.fakt strong{display:block;font-size:1.05rem;font-variation-settings:"wdth" 96,"wght" 600;font-weight:normal}
.fakt span{display:block;margin-top:.4rem;font-size:.92rem;color:var(--hell-text);line-height:1.5}
/* Weg zur Seite »Über mich« */
.buehne-weiter{margin-top:2.6rem}
.buehne .btn-geist{color:var(--hell)}
.buehne .btn-geist:hover{color:#fff}

/* ---------- Kontakt ---------- */
.kontakt-sektion{background:var(--hell)}
.kontakt-wrap{margin-top:3rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem}
@media(max-width:820px){.kontakt-wrap{grid-template-columns:1fr}}
.kontakt-info{display:grid;gap:1.1rem;font-size:1rem;color:var(--matt);align-content:start}
.kontakt-info strong{color:var(--grau);font-variation-settings:"wdth" 96,"wght" 600;font-weight:normal}
.kontakt-info a{
  color:var(--grau);font-variation-settings:"wdth" 100,"wght" 500;
  transition:font-variation-settings .35s var(--uebergang);
}
.kontakt-info a:hover{font-variation-settings:"wdth" 100,"wght" 700;text-decoration:none}
form{display:grid;gap:1rem}
.feld{display:grid;gap:.35rem}
.feld label{font-size:.85rem;font-variation-settings:"wdth" 92,"wght" 600}
.feld input,.feld textarea{
  font:inherit;padding:.85rem 1.05rem;border:1px solid var(--linie);border-radius:12px;
  background:var(--weiss);width:100%;transition:border-color .2s,box-shadow .2s;
}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(249,167,13,.22);
}
.zeile{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.zeile{grid-template-columns:1fr}}
.form-einleitung{margin:0 0 .4rem;color:var(--matt);font-size:.95rem;line-height:1.55}
.form-datenschutz{font-size:.85rem;color:var(--matt);line-height:1.5}
.form-datenschutz a{text-decoration:underline}
.einwilligung{display:grid;grid-template-columns:auto 1fr;gap:.35rem .7rem;align-items:start;font-size:.85rem;color:var(--matt)}
.einwilligung input{margin-top:.25rem;accent-color:var(--orange)}
.einwilligung a{text-decoration:underline}
.honigtopf{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
form button{justify-self:start;border:0;cursor:pointer;font-family:inherit}
form button[disabled]{opacity:.6;cursor:progress}
/* Prüfung am Feld (assets/js/kontakt.js): Meldung erscheint unter dem Feld, Rahmen wird rot */
.feld-fehler{display:none;font-size:.82rem;color:#b3261e;margin-top:-.1rem}
.einwilligung .feld-fehler{grid-column:2}
.ungueltig .feld-fehler{display:block}
.feld.ungueltig input,.feld.ungueltig textarea{border-color:#b3261e}
.feld.ungueltig input:focus,.feld.ungueltig textarea:focus{box-shadow:0 0 0 4px rgba(179,38,30,.16)}
.form-hinweis{font-size:.9rem;color:#b3261e;padding:.8rem 1rem;border-radius:12px;background:rgba(179,38,30,.06)}
/* Bestätigung an Ort und Stelle: ersetzt das Formular */
.form-dank{
  display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:2rem 0;
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--uebergang),transform .7s var(--uebergang);
}
.form-dank.da{opacity:1;transform:none}
.form-dank .symbol{display:block;width:38px;height:5px;border-radius:3px;background:var(--orange);margin-bottom:.6rem}
.form-dank h3{font-size:clamp(1.6rem,3.4vw,2.2rem);font-variation-settings:"wdth" 92,"wght" 300;letter-spacing:-.02em;color:var(--grau)}
.form-dank p{color:var(--matt);max-width:44ch}
.form-dank:focus{outline:none}
.form-dank .nik-zug{width:clamp(150px,22vw,200px);margin-top:.4rem}   /* Unterschrift: zeichnet sich, siehe kontakt.js */

/* Reduzierte Bewegung: muss hinter den Auftritts-Regeln stehen, sonst gewinnen diese */
@media(prefers-reduced-motion:reduce){
  .auftritt,.hero h1.setzen{opacity:1;transform:none;animation:none}
}