/*
 * Zwei Erscheinungsbilder.
 *
 * Die Akzente stammen aus der Bildmarke, ausgelesen statt geschätzt: ihr
 * Verlauf läuft von Limette über Türkis und Cyan nach Blau. Das frühere Mint
 * kam darin gar nicht vor.
 *
 * `--brand*` sind die drei Stufen des Schaltflächen-Verlaufs und in beiden
 * Fassungen dieselben – die Marke soll gleich aussehen. Für Text und Punkte
 * gibt es getrennte Tokens (`--akzent`), denn Limette und Cyan haben auf weißem
 * Grund keinen ausreichenden Kontrast; hell stehen dort abgedunkelte Fassungen
 * derselben Farbtöne.
 *
 * Warum Blau der Hauptakzent ist und nicht Türkis: In der Luminanzformel wiegt
 * Blau fast nichts (0,07 gegen 0,72 für Grün). Ein gesättigtes Blau ist von
 * sich aus dunkel genug und muss für 4,5:1 auf hellem Grund kaum verändert
 * werden – das Logo-Blau liegt bei Helligkeit 50 %, tragfähig sind noch 43 %.
 * Türkis dagegen muss von 45 % auf 26 % herunter, also fast um die Hälfte, und
 * verliert dabei genau die Leuchtkraft, die es ausmacht. Blau kommt hell also
 * viel näher an die Marke heran. Dazu liest sich Blau als Linkfarbe, was hier
 * hilft, weil die Links keine Unterstreichung tragen.
 *
 * Türkis bleibt der Zweitakzent: „Studio" im Schriftzug, Aufzählungspunkte und
 * die Statusmarken. Auch dort ist der helle Wert die Grenze des Machbaren –
 * #007780 ist der lebendigste Ton, der die Schwelle noch mit Abstand hält.
 *
 * Die hellen Werte stehen bewusst zweimal: einmal unter `[data-thema="hell"]`
 * für die bewusste Wahl, einmal in der Medienabfrage für Besucher ohne
 * JavaScript, bei denen das Attribut nie gesetzt wird. Ein `light-dark()` würde
 * die Doppelung sparen, aber in älteren Browsern die ganze Farbgebung kippen,
 * weil eine ungültige Custom Property nicht auf die vorige Zeile zurückfällt.
 */
:root {
  color-scheme: dark;
  --bg: #0a1118;
  --bg-soft: #101b26;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.14);
  --chip: rgba(255, 255, 255, 0.04);
  --kopf: rgba(10, 17, 24, 0.82);
  --text: #f2f5f7;
  --muted: #b7c4cd;
  --akzent: #4fb0ff;
  --akzent-2: #1bc1cc;
  --logo-studio: #4fb0ff;
  --brand: #cce66c;
  --brand-mitte: #0ed4f7;
  --brand-2: #2b8cff;
  --danger: #ff7c68;
  --max: 1120px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
  --karte: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
  --karte-rand: rgba(255, 255, 255, 0.14);
  --karte-schatten: 0 18px 50px rgba(0, 0, 0, 0.32);
  --wash: radial-gradient(900px 450px at 12% -10%, rgba(204, 230, 108, 0.16), transparent 50%),
    radial-gradient(900px 450px at 88% 0, rgba(14, 212, 247, 0.2), transparent 45%);
}

:root[data-thema="hell"] {
  color-scheme: light;
  --bg: #f4f7f9;
  --bg-soft: #ffffff;
  --panel: rgba(11, 22, 32, 0.035);
  --panel-strong: rgba(11, 22, 32, 0.07);
  --line: rgba(11, 22, 32, 0.16);
  --chip: rgba(11, 22, 32, 0.03);
  --kopf: rgba(255, 255, 255, 0.86);
  --text: #0d1a24;
  --muted: #46586a;
  --akzent: #0062da;
  --akzent-2: #007780;
  --logo-studio: #0a5fb0;
  --shadow: 0 14px 40px rgba(11, 22, 32, 0.1);
  --karte: #ffffff;
  --karte-rand: rgba(11, 22, 32, 0.09);
  --karte-schatten: 0 1px 2px rgba(11, 22, 32, 0.05), 0 10px 28px rgba(11, 22, 32, 0.06);
  --wash: radial-gradient(900px 450px at 12% -10%, rgba(204, 230, 108, 0.3), transparent 50%),
    radial-gradient(900px 450px at 88% 0, rgba(14, 212, 247, 0.2), transparent 45%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-thema]) {
    color-scheme: light;
    --bg: #f4f7f9;
    --bg-soft: #ffffff;
    --panel: rgba(11, 22, 32, 0.035);
    --panel-strong: rgba(11, 22, 32, 0.07);
    --line: rgba(11, 22, 32, 0.16);
    --chip: rgba(11, 22, 32, 0.03);
    --kopf: rgba(255, 255, 255, 0.86);
    --text: #0d1a24;
    --muted: #46586a;
    --akzent: #0062da;
    --akzent-2: #007780;
    --logo-studio: #0a5fb0;
    --shadow: 0 14px 40px rgba(11, 22, 32, 0.1);
    --karte: #ffffff;
    --karte-rand: rgba(11, 22, 32, 0.09);
    --karte-schatten: 0 1px 2px rgba(11, 22, 32, 0.05), 0 10px 28px rgba(11, 22, 32, 0.06);
    --wash: radial-gradient(900px 450px at 12% -10%, rgba(204, 230, 108, 0.3), transparent 50%),
      radial-gradient(900px 450px at 88% 0, rgba(14, 212, 247, 0.2), transparent 45%);
  }
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

html,
body {
  margin: 0;
  padding: 0;
}

/*
 * Platz für die klebende Kopfzeile beim Anspringen von Zielen.
 *
 * Ohne das scrollt der Browser den Abschnitt an den Fensterrand – und die
 * Leiste liegt darüber; die Überschrift des Ziels war jedes Mal vollständig
 * verdeckt.
 *
 * Der Wert kommt aus einer Messung im Browser, nicht aus einer festen Zahl.
 * Die Kopfhöhe hat nämlich mehr als zwei Zustände: gemessen 65 px, ab 432 px
 * Fensterbreite 69 px und ab 984 px 133 px – und sie wächst zusätzlich mit der
 * Grundschriftgröße des Nutzers (bei 24 px sind es 72 statt 65). Zwei feste
 * Haltestellen träfen also in mehreren Fällen daneben. Das Skript am Ende der
 * Seite schreibt `--kopfhoehe` und hält den Wert per ResizeObserver aktuell.
 *
 * Die Zahlen hier sind der Rückfall, solange die Messung nicht vorliegt – ohne
 * JavaScript oder in den ersten Millisekunden. Der mobile Wert gilt dabei dem
 * **höheren** Kopf ohne Skript: dort steht die Navigation als zweite Zeile und
 * die Leiste ist 100 statt 65 px hoch. Mit 84 px blieben 16 px verdeckt – genau
 * der Fall, der beim Durchprüfen aufgefallen ist. Zu viel Abstand sieht man
 * kaum, zu wenig verdeckt die Überschrift.
 *
 * `scroll-padding-top` am scrollenden Element statt `scroll-margin-top` an
 * jedem Ziel: es gilt für jedes Anspringen, auch für künftige Abschnitte, und
 * steht an einer Stelle statt an zehn.
 */
html {
  scroll-padding-top: var(--kopfhoehe, 148px);
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: var(--kopfhoehe, 116px);
  }
}

body {
  font-family: Manrope, "Segoe UI", sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--wash), var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  /* Bezugspunkt für das absolut gesetzte Klappmenü. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kopf);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  min-height: 132px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/*
 * Bildmarke als Datei, Schriftzug als Text.
 *
 * Vorher war beides eine flache PNG mit dunkelblauem Schriftzug – im hellen
 * Erscheinungsbild saß das perfekt, im dunklen war „NauHow" fast unlesbar, und
 * mit einer Rastergrafik ließ sich das nicht trennen. Als Text folgt der
 * Schriftzug jetzt den Farbtokens und stimmt in beiden Fassungen.
 */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  flex-shrink: 0;
  min-width: 0;
}

.logo-marke {
  height: 56px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
}

.logo-schrift {
  display: grid;
  line-height: 1.06;
  min-width: 0;
}

.logo-name {
  font-family: Sora, sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

/*
 * Der Schriftzug hat einen eigenen Farbwert, nicht den Zweitakzent.
 *
 * „Studio" war im ursprünglichen Logo blau, und dabei soll es bleiben – auch
 * nachdem Blau und Türkis ihre Rollen im Akzentsystem getauscht haben. Am
 * Zweitakzent zu hängen hieße, dass die Wortmarke bei der nächsten Umstellung
 * unbemerkt mitwandert.
 */
.logo-studio {
  font-family: Sora, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--logo-studio);
}

.logo-claim {
  margin-top: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--muted);
  font-weight: 600;
  min-width: 0;
}

.nav a:hover {
  color: var(--text);
}

.hero {
  padding: 88px 0 42px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--akzent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  font-family: Sora, sans-serif;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  max-width: 14ch;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  margin-bottom: 10px;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.lead {
  max-width: 66ch;
  color: var(--muted);
  font-size: 1.15rem;
  margin: 16px 0 0;
}

.cta-row {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-mitte) 52%, var(--brand-2));
  color: #001019;
  font-weight: 800;
}

.btn:hover {
  filter: brightness(1.04);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn--small {
  padding: 9px 14px;
  font-size: 0.92rem;
  white-space: nowrap;
  justify-self: end;
}

.micro-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
}

.micro-list li::before {
  content: "• ";
  color: var(--akzent-2);
}

.section {
  padding: 56px 0;
}

.section-intro {
  margin: 0 0 24px;
  color: var(--muted);
  max-width: 68ch;
}

.card-grid {
  display: grid;
  gap: 16px;
}

.card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Karten haben eigene Werte statt der allgemeinen Flächen-Tokens.
 *
 * Die dunkle Fassung setzt durchscheinendes Weiß auf dunklen Grund – die Karte
 * ist heller als die Seite und wirkt dadurch erhaben. Umgekehrt ergibt das
 * keinen Sinn: hell war die Karte ein Grauverlauf **über** hellem Grund, also
 * dunkler als die Seite. Sie sah eingesunken und schmutzig aus, während der
 * kräftige Schatten gleichzeitig das Gegenteil behauptete.
 *
 * Hell ist die Karte deshalb schlicht weiß – ohne Verlauf, der bei so wenig
 * Kontrast nur schmierig wirkt –, mit hellerem Rand und einem zweistufigen,
 * enger anliegenden Schatten.
 */
.card {
  border: 1px solid var(--karte-rand);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--karte-schatten);
  padding: 22px;
}

.card-copy {
  margin: 0 0 12px;
  color: var(--muted);
}

.card-link {
  margin-top: 16px;
  display: inline-block;
  color: var(--akzent);
  font-weight: 700;
}

.contact {
  padding-bottom: 84px;
}

/*
 * Der Satz direkt unter der Überschrift ist der Aufhänger, nicht Fließtext.
 * In derselben Größe und Farbe wie der Absatz darunter geht er unter – deshalb
 * hier eigenes Gewicht, die Anzeigeschrift und die volle Textfarbe.
 */
.lead--claim {
  margin-top: 20px;
  color: var(--text);
  font-family: Sora, sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

/* --- Projektsektionen ------------------------------------------------- */

.projekt {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid var(--line);
}

/*
 * Abwechselnd links und rechts. Bild vor Text im Quelltext wäre die einfachere
 * Regel, aber dann läse ein Screenreader – und ein schmaler Bildschirm – die
 * Sektion mit dem Bild zuerst. Deshalb steht der Text immer vorn und wandert
 * nur optisch.
 */
.projekt--gedreht .projekt-text {
  order: 2;
}

.projekt h2 {
  margin: 0 0 10px;
}

.projekt-copy {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 56ch;
}

.stichworte {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stichworte li {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.schuss {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
  line-height: 0;
}

.schuss img {
  width: 100%;
  display: block;
}

/* Handy-Aufnahmen sind 430 px breit – aufgezogen sähen sie matschig aus. */
.schuss--handy {
  max-width: 320px;
  margin: 0 auto;
  border-radius: 26px;
}

@media (max-width: 980px) {
  /*
   * Das Logo bekommt den Rest und darf mitschrumpfen.
   *
   * Vorher standen hier zwei `auto`-Spalten und eine feste Logohöhe. Mit dem
   * Themenschalter als drittem Element im Kopf reichte die Breite auf einem
   * 390-px-Gerät nicht mehr: der Call-Knopf stand 39 px außerhalb des Fensters
   * und die ganze Seite ließ sich seitlich schieben. Eine kleinere feste Höhe
   * hätte das nur bis zum nächsten schmaleren Gerät verschoben.
   */
  .nav-wrap {
    min-height: 0;
    padding: 14px 0 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo aktionen"
      "nav  nav";
  }

  .js .nav-wrap {
    grid-template-areas: "logo aktionen";
    column-gap: 12px;
    row-gap: 12px;
  }

  .logo {
    grid-area: logo;
  }

  .kopf-aktionen {
    grid-area: aktionen;
  }

  .logo {
    gap: 10px;
  }

  .logo-marke {
    height: 42px;
  }

  .logo-name {
    font-size: 1.25rem;
  }

  .logo-studio {
    font-size: 0.82rem;
  }

  /* Der Claim steht zwei Zentimeter tiefer als Überschrift – hier ist er nur Breite. */
  .logo-claim {
    display: none;
  }

  .kopf-aktionen {
    gap: 8px;
  }

  /*
   * Navigation in eine zweite Zeile statt in ein Klappmenü.
   *
   * Sie fehlte auf dem Handy ganz – `display: none` stand hier schon, bevor es
   * überhaupt eine Navigation mit Zielen gab. Bei drei kurzen Zielen wäre ein
   * Menü mit Fokusfalle, Escape-Behandlung und Klick-daneben mehr Bauteil als
   * Nutzen. Die Zeile scrollt waagerecht, falls die Ziele einmal länger werden;
   * so bricht sie nie um und schiebt nichts aus dem Fenster.
   */
  .nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 0.92rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    white-space: nowrap;
  }

  /*
   * Mit JavaScript wird aus der Zeile ein Klappmenü.
   *
   * Der Rückfall ist Absicht und nicht Bequemlichkeit: Ohne JS bleibt die
   * Navigation genau die sichtbare zweite Zeile von vorher. Ein Menü, das sich
   * ohne Skript nicht öffnen lässt, hätte die Ziele sonst unerreichbar gemacht.
   */
  .js .menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
  }

  .js .menue-knopf:hover {
    background: var(--panel-strong);
  }

  .js .menue-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
  }

  /* Der Knopf in der Kopfzeile weicht dem Menü – sonst wird die Zeile zu voll. */
  .js .btn--kopf {
    display: none;
  }

  .js .menue-cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 6px;
  }

  .js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    /*
     * `align-items` und nicht `justify-content`: in einer Spalte richtet
     * `justify-content` senkrecht aus. Die geerbte Mitte kam von der
     * waagerechten Kopfzeilen-Navigation und stellte hier alle Ziele zentriert
     * und auf Inhaltsbreite – anklickbar war jeweils nur die Textbreite.
     */
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 12px 20px 18px;
    overflow: visible;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    font-size: 1rem;
  }

  .js .nav a:not(.menue-cta) {
    padding: 12px 10px;
    border-radius: 10px;
  }

  .js .nav a:not(.menue-cta):hover {
    background: var(--panel);
  }

  .js .nav[data-offen="ja"] {
    display: flex;
  }

  .card-grid--three {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 70px;
  }

  .projekt {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 38px 0;
  }

  .projekt--gedreht .projekt-text {
    order: 0;
  }
}

/* --- Umschalter für das Erscheinungsbild -------------------------------- */

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/*
 * Ohne JavaScript kann der Knopf nichts – dann ist er auch nicht da. Sichtbar
 * wird er erst, wenn das Kopfskript `js` auf <html> gesetzt hat. Die Farben
 * folgen trotzdem dem System, dafür sorgt die Medienabfrage oben.
 */
.thema-schalter {
  display: none;
}

.js .thema-schalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.thema-schalter:hover {
  background: var(--panel-strong);
}

.thema-schalter:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.thema-schalter svg {
  width: 17px;
  height: 17px;
  display: block;
}

/*
 * Menüknopf – wie der Themenschalter nur mit JavaScript, sonst führt er ins
 * Leere. Ohne JS bleibt die Navigation als zweite Zeile stehen (weiter unten).
 */
.menue-knopf {
  display: none;
}

.menue-knopf svg {
  width: 20px;
  height: 20px;
  display: block;
}

.menue-knopf .kreuz {
  display: none;
}

.menue-knopf[aria-expanded="true"] .balken {
  display: none;
}

.menue-knopf[aria-expanded="true"] .kreuz {
  display: block;
}

/* Der Call-Knopf im Menü erscheint nur dort. */
.menue-cta {
  display: none;
}

/* Gezeigt wird das Ziel, nicht der Zustand: im Dunkeln die Sonne. */
.thema-schalter .mond {
  display: none;
}

:root[data-thema="hell"] .thema-schalter .sonne {
  display: none;
}

:root[data-thema="hell"] .thema-schalter .mond {
  display: block;
}

/*
 * Unter 430 px wird es eng: Marke, Schriftzug, Schalter und Knopf teilen sich
 * rund 350 px. Der Name bleibt trotzdem stehen – er ist der Absender der Seite.
 * Platz kommt stattdessen aus allen anderen Maßen: kleinere Bildmarke, engere
 * Abstände, kompakterer Knopf.
 */
@media (max-width: 430px) {
  .nav-wrap {
    gap: 10px;
  }

  .logo {
    gap: 8px;
  }

  .logo-marke {
    height: 36px;
  }

  .logo-name {
    font-size: 1.05rem;
  }

  .logo-studio {
    font-size: 0.72rem;
  }

  .kopf-aktionen {
    gap: 6px;
  }

  .thema-schalter {
    width: 34px;
    height: 34px;
  }

  .btn--small {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}

/* Noch schmaler: dieselben Stellschrauben, eine Stufe weiter. */
@media (max-width: 360px) {
  .logo-marke {
    height: 32px;
  }

  .logo-name {
    font-size: 0.95rem;
  }

  .logo-studio {
    font-size: 0.66rem;
  }

  .btn--small {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}