/* ==========================================================================
   Johannes Springer Studio — Stylesheet
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Schriften         (hier später eigene Schriftdateien einbinden)
     2. Design-Tokens     (Farben, Abstände, Schriftgrößen — zentral änderbar)
     3. Grundlagen        (Reset, Typografie, Fokus/Tastatur)
     4. Layout-Bausteine  (Raster, „roter Faden“-Linie)
     5. Bereiche          (Header, Hero, Leistungen, Arbeiten, Über mich, Kontakt)
     6. Rechtliche Seiten
     7. Bewegung          (respektiert prefers-reduced-motion)
   ========================================================================== */

/* ==========================================================================
   1. SCHRIFTEN
   --------------------------------------------------------------------------
   Die Schriften liegen selbst im Projekt (assets/fonts/) und werden NICHT
   von Google geladen. Dadurch gibt es beim Aufruf der Seite keine einzige
   Anfrage an Dritte, und die Angabe in der Datenschutzerklärung stimmt.

   Alle drei stehen unter der SIL Open Font License und dürfen frei,
   auch gewerblich, genutzt und mitgeliefert werden.

   Nur .woff2, weil das jeder aktuelle Browser versteht und es die
   kleinsten Dateien sind. font-display: swap sorgt dafür, dass Text
   sofort lesbar ist und nicht erst nach dem Laden der Schrift erscheint.
   ========================================================================== */

/* Archivo — Überschriften */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — Fließtext */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Space Mono — Wortmarke, Bereichsmarken, Bildunterschriften */
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. DESIGN-TOKENS  — hier zentral Farben und Größen ändern
   ========================================================================== */
:root {
  /* Farben (aus dem Styleguide) */
  --tiefdunkel: #14161c;
  --anthrazit: #1b1e26;
  --anthrazit-hell: #22262f;
  --orange: #ee7b2e;
  --orange-hell: #f59a5c;
  --offwhite: #f3eee4;
  --greige: #b4b2a8;
  --linie: #2c313b;
  /* gedämpftes Rot, nur für die LIVE-Kennzeichnung. Bewusst nicht
     signalrot, damit es neben dem Orange nicht kämpft. */
  --live-rot: #e04a3f;

  /* Schriften */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Maße */
  --breite: 1180px;
  --rand: clamp(20px, 5vw, 56px);
  /* X-Position der Fadenlinie.
     Muss mit der linken Textkante mitwandern: Auf breiten Bildschirmen ist
     der Inhalt zentriert (max. --breite), der Bildschirmrand aber viel
     weiter außen. Ohne diese Rechnung würde die Linie am äußeren Rand
     kleben und die Punkte hingen weit neben ihren Beschriftungen. */
  --faden-links: max(
    var(--rand),
    calc((100% - var(--breite)) / 2 + var(--rand))
  );
  --abstand-sektion: clamp(72px, 11vw, 140px);
  --radius: 10px;

  /* Typo-Skala
     --t-hero ist so gewählt, dass das längste Wort ("Verlässlich.")
     auch auf großen Bildschirmen in seine Spalte passt. */
  --t-hero: clamp(2.6rem, 6.6vw, 5rem);
  --t-h2: clamp(1.9rem, 4.6vw, 3.4rem);
  --t-h3: clamp(1.35rem, 2.6vw, 1.95rem);
  --t-body: clamp(1rem, 1.05vw + 0.85rem, 1.16rem);
  --t-label: 0.75rem;
}

/* ==========================================================================
   3. GRUNDLAGEN
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* verhindert, dass Sprungziele unter dem fixierten Header landen */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tiefdunkel);
  color: var(--offwhite);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  /* Archivo liegt als 400 und 700 vor. Höhere Werte würde der Browser
     künstlich verfetten und dabei die Buchstabenformen verzerren. */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1.15em;
  max-width: 68ch;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

strong,
b {
  font-weight: 700;
}

/* Tastaturbedienung: klar sichtbarer Fokus, aber nicht bei Mausklick */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprunglink für Screenreader / Tastatur */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--orange);
  color: #16181d;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* Hilfsklasse: sichtbar nur für Screenreader. Aktuell nicht in Gebrauch,
   bleibt aber als Standardwerkzeug erhalten. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. LAYOUT-BAUSTEINE
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Bezugsrahmen für die Fadenlinie — ohne das würde sie nur so hoch wie
   das Browserfenster werden statt über die ganze Seite laufen. */
main {
  position: relative;
}

/* Der „rote Faden“: eine durchgehende Linie, die alle Bereiche verbindet.
   Sie ist rein dekorativ und wird für Screenreader ausgeblendet. */
.faden {
  position: absolute;
  left: var(--faden-links);
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--linie);
  pointer-events: none;
}
.faden::after {
  /* der orange „gezeichnete“ Teil, per JS auf Scrollhöhe gesetzt */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--faden-fortschritt, 0%);
  background: linear-gradient(
    180deg,
    var(--orange) 0%,
    var(--orange) 82%,
    transparent 100%
  );
  transition: height 0.18s linear;
}
@media (max-width: 860px) {
  .faden {
    display: none;
  }
}

/* Bereichsmarke auf dem Faden: 01 ─── LEISTUNGEN */
.marke {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--greige);
  margin-bottom: 26px;
}
.marke .nr {
  color: var(--orange);
}
.marke .strich {
  flex: 0 0 44px;
  height: 1px;
  background: var(--linie);
}
/* Punkt auf der Fadenlinie */
.marke::before {
  content: "";
  position: absolute;
  left: var(--faden-links);
  width: 9px;
  height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--tiefdunkel);
  border: 1px solid var(--orange);
}
@media (max-width: 860px) {
  .marke::before {
    display: none;
  }
}

section {
  position: relative;
  padding-block: var(--abstand-sektion);
}

.sek-kopf {
  max-width: 54ch;
  margin-bottom: clamp(38px, 6vw, 68px);
}
.sek-kopf h2 {
  font-size: var(--t-h2);
}
/* Zeile über den Leistungen: für wen gearbeitet wird */
.fuer-wen {
  margin-top: 18px;
  color: var(--greige);
  font-size: clamp(1rem, 0.4vw + 0.95rem, 1.12rem);
  max-width: 46ch;
}

/* Überschrift im Über-mich-Bereich */
.ueber-titel {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin-bottom: 22px;
  max-width: 22ch;
}


.orange {
  color: var(--orange);
}

/* Buttons */
.btn {
  --bg: var(--orange);
  --fg: #16181d;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.97rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}
.btn:hover {
  background: var(--orange-hell);
  transform: translateY(-2px);
}
.btn .pfeil {
  transition: transform 0.2s ease;
}
.btn:hover .pfeil {
  transform: translateY(2px);
}
.btn[aria-disabled="true"] {
  background: var(--anthrazit-hell);
  /* heller als zuvor: erfüllt den Mindestkontrast auch im inaktiven Zustand */
  color: #a8b0bd;
  cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover {
  background: var(--anthrazit-hell);
  transform: none;
}

/* Cursor-Motiv der Marke (blinkender Unterstrich) */
.cursor {
  display: inline-block;
  width: 0.58ch;
  height: 1.05em;
  margin-left: 0.08em;
  translate: 0 0.12em;
  background: var(--orange);
  animation: blinken 1.05s steps(1) infinite;
}
@keyframes blinken {
  50% {
    opacity: 0;
  }
}

/* ==========================================================================
   5a. HEADER / NAVIGATION
   ========================================================================== */
.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.3s ease, border-color 0.3s ease,
    backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.kopf.ist-gescrollt {
  background: rgba(20, 22, 28, 0.86);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--linie);
}
.kopf .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

/* Wortmarke: zweizeilig, Monospace, mit Cursor */
.wortmarke {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.35;
  letter-spacing: 0.17em;
  text-decoration: none;
  color: var(--offwhite);
  white-space: nowrap;
}
.wortmarke .zeile2 {
  display: block;
  color: var(--orange);
}
.wortmarke .cursor {
  width: 0.5ch;
  height: 0.95em;
  translate: 0 0.1em;
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
}
.nav-liste a {
  font-size: 0.95rem;
  color: var(--greige);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.nav-liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-liste a:hover,
.nav-liste a[aria-current="true"] {
  color: var(--offwhite);
}
.nav-liste a:hover::after,
.nav-liste a[aria-current="true"]::after {
  transform: scaleX(1);
}

/* Menü-Schalter für Mobil */
.menue-schalter {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 8px;
  color: var(--offwhite);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 10px 14px;
  cursor: pointer;
}
.menue-schalter .balken {
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.menue-schalter .balken::before,
.menue-schalter .balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menue-schalter .balken::before {
  top: -5px;
}
.menue-schalter .balken::after {
  top: 5px;
}

@media (max-width: 860px) {
  .menue-schalter {
    display: inline-flex;
  }
  .nav-liste {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--anthrazit);
    border-block: 1px solid var(--linie);
    padding: 8px var(--rand) 20px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .nav-liste.ist-offen {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-liste a {
    padding: 15px 0;
    border-bottom: 1px solid var(--linie);
    font-size: 1.05rem;
  }
  .nav-liste li:last-child a {
    border-bottom: 0;
  }
}

/* ==========================================================================
   5b. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(120px, 17vh, 172px);
  padding-bottom: clamp(56px, 9vw, 96px);
  overflow: hidden;
}
/* warmer Lichtschein hinter dem Bild — sehr dezent */
.hero::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -6%;
  width: min(760px, 68vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    rgba(238, 123, 46, 0.16),
    transparent 62%
  );
  pointer-events: none;
}

.hero-raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: center;
}

.hero-dienste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 1.5vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: clamp(20px, 3vw, 30px);
}
.hero-dienste .punkt {
  color: var(--linie);
}
/* Die drei Leistungen springen zum jeweiligen Abschnitt */
.hero-dienste a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-dienste a:hover {
  color: var(--orange-hell);
  border-bottom-color: currentColor;
}

.hero h1 {
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin-bottom: clamp(22px, 3.4vw, 34px);
}
.hero h1 span {
  display: block;
}
.hero h1 .drei {
  color: var(--orange);
}

.hero-text {
  font-size: clamp(1.02rem, 0.5vw + 0.95rem, 1.22rem);
  color: var(--greige);
  max-width: 46ch;
  margin-bottom: clamp(30px, 4.4vw, 42px);
}


/* Bildrahmen: leicht angeschnitten, mit dünner Linie */
.hero-bild {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--anthrazit);
  aspect-ratio: 4 / 5;
}
.hero-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dunkle Vignette unten, damit es zur Seite hin ausläuft */
.hero-bild::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(
    to top,
    rgba(20, 22, 28, 0.78),
    transparent
  );
  pointer-events: none;
}

/* Bildunterschrift im Monospace, sitzt auf dem Bild */
.hero-bild .notiz {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--greige);
}

@media (max-width: 900px) {
  .hero-raster {
    grid-template-columns: 1fr;
  }
  .hero-bild {
    order: -1;
    aspect-ratio: 4 / 3.4;
    max-height: 54vh;
  }
  .hero-bild img {
    object-position: center 22%;
  }
}

/* ==========================================================================
   5c. LEISTUNGEN — untereinander, wechselnde Anordnung
   ========================================================================== */
.leistung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 62px);
  align-items: center;
  padding-block: clamp(38px, 5.5vw, 62px);
  border-top: 1px solid var(--linie);
}
.leistung:first-of-type {
  border-top: 0;
  padding-top: 0;
}
/* jede zweite Leistung: Medium nach links */
.leistung:nth-of-type(even) .leistung-medium {
  order: -1;
}

.leistung-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.leistung-nr {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.leistung h3 {
  font-size: var(--t-h3);
}
.leistung-text > p {
  color: var(--greige);
}
.leistung-text > p:first-of-type {
  color: var(--offwhite);
}

/* Aufzählung „Was dazugehört“ */
.dazu {
  margin-top: 22px;
  border-top: 1px solid var(--linie);
}
.dazu-titel {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--greige);
  margin: 18px 0 10px;
}
.dazu li {
  display: flex;
  gap: 13px;
  padding: 9px 0;
  color: var(--greige);
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(44, 49, 59, 0.55);
}
.dazu li:last-child {
  border-bottom: 0;
}
.dazu li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  background: var(--orange);
  transform: rotate(45deg);
}

/* Medium-Spalte: entweder Bild oder typografische Karte (wenn Bild fehlt) */
.leistung-medium {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--anthrazit);
  aspect-ratio: 3 / 2;
}
.leistung-medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leistung-medium .notiz {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--greige);
  background: rgba(20, 22, 28, 0.72);
  padding: 5px 9px;
  border-radius: 5px;
}

/* LIVE-Kennzeichnung auf dem Bild der Live-Produktion.
   Ruhender Punkt, bewusst ohne Blinken: Die Seite hat mit dem Cursor
   bereits ein bewegtes Element, ein zweites wäre zu laut. */
.live-marke {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--offwhite);
  background: rgba(12, 13, 17, 0.72);
  padding: 5px 10px 5px 9px;
  border-radius: 5px;
}
.live-marke i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-rot);
}

/* ---- Format-Andeutungen -------------------------------------------------
   Statt die Oberfläche von YouTube oder Instagram nachzubauen (fremde Marke
   auf der eigenen Seite, veraltet schnell), wird das Format selbst zum
   Signal: 16:9 mit Fortschrittsleiste und Laufzeit für die langen Videos,
   9:16 mit Story-Balken für die kurzen Clips — in den eigenen Farben.
   ------------------------------------------------------------------------ */

/* Langformat: 16:9 wie ein Videoplayer */
.medium-video {
  aspect-ratio: 16 / 9;
}
/* Fortschrittsleiste am unteren Rand */
.medium-video .leiste {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(243, 238, 228, 0.28);
}
.medium-video .leiste span {
  display: block;
  position: relative;
  width: 38%;
  height: 100%;
  background: var(--orange);
}
.medium-video .leiste span::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--orange);
}

/* Kurzformat: 9:16, an der Höhe ausgerichtet damit es nicht ausufert */
.leistung-medium.medium-hoch {
  aspect-ratio: auto;
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  justify-content: center;
}
.medium-hoch .rahmen {
  position: relative;
  height: clamp(340px, 40vw, 520px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--anthrazit);
}
.medium-hoch .rahmen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Segmentierter Balken oben — die Geste kurzer Hochkant-Clips */
.medium-hoch .segmente {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}
.medium-hoch .segmente i {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(243, 238, 228, 0.32);
}
.medium-hoch .segmente i:first-child {
  background: var(--offwhite);
}
.medium-hoch .segmente i:nth-child(2) {
  background: linear-gradient(
    90deg,
    var(--offwhite) 55%,
    rgba(243, 238, 228, 0.32) 55%
  );
}
.medium-hoch .notiz {
  left: 12px;
  bottom: 12px;
}

@media (max-width: 860px) {
  .medium-hoch .rahmen {
    height: clamp(320px, 78vw, 460px);
  }
}


@media (max-width: 860px) {
  .leistung {
    grid-template-columns: 1fr;
  }
  .leistung:nth-of-type(even) .leistung-medium {
    order: 0;
  }
  .leistung-medium {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   5d. ARBEITEN
   ========================================================================== */
.arbeiten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}

.arbeit {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--anthrazit);
}
.arbeit-flaeche {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #0f1116;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  overflow: hidden;
}
.arbeit-flaeche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.arbeit-flaeche:hover img {
  transform: scale(1.04);
  opacity: 0.85;
}
.arbeit-flaeche .abspielen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.arbeit-flaeche .abspielen span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--orange);
  color: #16181d;
  font-size: 1.2rem;
  padding-left: 4px;
  transition: transform 0.2s ease;
}
.arbeit-flaeche:hover .abspielen span {
  transform: scale(1.08);
}
.arbeit-flaeche iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.arbeit-info {
  padding: 17px 19px 19px;
}
.arbeit-info .quelle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
}
.arbeit-info h3 {
  font-size: 1.08rem;
  margin: 6px 0 5px;
}
.arbeit-info p {
  font-size: 0.92rem;
  color: var(--greige);
  margin: 0;
}
/* Datenschutzhinweis vor dem Klick: bewusst leise, aber lesbar */
.arbeit-info .extern-hinweis {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--linie);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--greige);
  opacity: 0.85;
}

/* Ehrlicher Leerzustand, solange keine echten Arbeiten verlinkt sind */
.arbeiten-leer {
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--anthrazit), rgba(27, 30, 38, 0.35));
  padding: clamp(28px, 5vw, 54px);
}
.arbeiten-leer .hinweis-titel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.arbeiten-leer h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  margin-bottom: 12px;
}
.arbeiten-leer p {
  color: var(--greige);
  max-width: 58ch;
}
.arbeiten-leer .plattformen {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.arbeiten-leer .plattformen li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--greige);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 7px 14px;
}

/* Kennzeichnung für offene Inhalte (nur lokal sichtbar lassen) */
.offen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd08a;
  background: rgba(238, 123, 46, 0.12);
  border: 1px solid rgba(238, 123, 46, 0.42);
  border-radius: 999px;
  padding: 5px 11px;
}
.offen::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ==========================================================================
   5e. ZWISCHENBAND (ruhiges Bild über die volle Breite)
   ========================================================================== */
/* Das Band lief früher über die volle Bildschirmbreite und war damit das
   einzige Element, das nicht an der Inhaltsspalte hing. Jetzt sitzt es
   bündig mit dem roten Faden und der Textkante wie alles andere. */
.band {
  position: relative;
  padding-block: clamp(30px, 5vw, 56px);
}
.band-bild {
  position: relative;
  height: clamp(280px, 30vw, 440px);
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  overflow: hidden;
}
/* Auf schmalen Bildschirmen das Bild in seinem eigenen Format zeigen,
   damit nichts seitlich abgeschnitten wird. */
@media (max-width: 860px) {
  .band-bild {
    height: auto;
    aspect-ratio: 2.1 / 1;
  }
}
.band-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* nach unten ausgerichtet: beschnitten wird die graue Wand oben,
     die LED-Bande am unteren Rand bleibt sichtbar */
  object-position: center 90%;
  filter: saturate(0.92);
}
.band-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(20, 22, 28, 0.92) 0%,
    rgba(20, 22, 28, 0.5) 52%,
    rgba(20, 22, 28, 0.12) 100%
  );
}
.band-zitat {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding-inline: clamp(20px, 4vw, 46px);
  z-index: 2;
}
.band-zitat p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0;
}

/* ==========================================================================
   5f. ÜBER MICH
   ========================================================================== */
.ueber-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: start;
}
.ueber-bild {
  position: sticky;
  top: 112px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linie);
  aspect-ratio: 4 / 5;
}
.ueber-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ueber-text > p {
  color: var(--greige);
}
/* erster Absatz etwas größer — führt in den Text hinein */
.ueber-text > p:first-of-type {
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.32rem);
  color: var(--offwhite);
  line-height: 1.55;
}
.ueber-text .heraus {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 2px solid var(--orange);
  background: rgba(27, 30, 38, 0.6);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ueber-text .heraus p {
  color: var(--offwhite);
  margin: 0;
}

.fakten {
  display: flex;
  /* untereinander statt nebeneinander: liest sich als Liste,
     nicht als Schlagwortwolke */
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--linie);
}
.fakten li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  color: var(--greige);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 8px 15px;
}

@media (max-width: 860px) {
  .ueber-raster {
    grid-template-columns: 1fr;
  }
  .ueber-bild {
    position: static;
    /* eigenes Format des Bildes: nichts wird abgeschnitten,
       Kopf und Kamera bleiben vollständig sichtbar */
    aspect-ratio: 4 / 5;
  }
  .ueber-bild img {
    object-position: center center;
  }
}

/* ==========================================================================
   5g. KONTAKT
   ========================================================================== */
.kontakt {
  padding-bottom: clamp(80px, 10vw, 130px);
}
.kontakt-box {
  position: relative;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: radial-gradient(
      120% 150% at 88% 0%,
      rgba(238, 123, 46, 0.16),
      transparent 58%
    ),
    var(--anthrazit);
  padding: clamp(32px, 6vw, 74px);
  overflow: hidden;
}
.kontakt-box h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  max-width: 24ch;
  margin-bottom: 18px;
}
.kontakt-box .einladung {
  color: var(--greige);
  max-width: 52ch;
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.16rem);
}
.kontakt-mittel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 40px);
}
.kontakt-adresse {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--offwhite);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.kontakt-adresse:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* ==========================================================================
   5h. FOOTER
   ========================================================================== */
.fuss {
  border-top: 1px solid var(--linie);
  padding-block: 42px;
  color: var(--greige);
  font-size: 0.88rem;
}
.fuss .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
}
.fuss-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.fuss a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.fuss a:hover {
  color: var(--offwhite);
  border-bottom-color: var(--orange);
}
.fuss .wortmarke {
  font-size: 0.74rem;
}

/* ==========================================================================
   6. RECHTLICHE / EINFACHE SEITEN
   ========================================================================== */
.seite {
  padding-top: clamp(130px, 18vh, 180px);
  padding-bottom: clamp(70px, 10vw, 120px);
}
.seite .inhalt {
  max-width: 74ch;
}
.seite h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 24px;
}
.seite h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  margin: 40px 0 12px;
}
.seite p,
.seite li {
  color: var(--greige);
}
.seite .liste {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1.15em;
}
.seite .liste li {
  margin-bottom: 8px;
}
/* Rechtlicher Pflichthinweis am Ende des Impressums.
   Bewusst leiser als die übrigen Abschnitte: kleinere Überschrift,
   kleinerer Text, gedämpfte Farbe, nur durch eine Haarlinie abgesetzt.
   Keine eigene Farbe, keine Box, keine Hervorhebung. */
.rechtshinweis {
  margin-top: clamp(38px, 6vw, 62px);
  padding-top: 22px;
  border-top: 1px solid var(--linie);
}
.rechtshinweis h2 {
  /* deutlich kleiner als die normalen Abschnittsüberschriften */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--greige);
}
.rechtshinweis p {
  /* nicht unter 0,9 rem, damit es auch auf dem Handy gut lesbar bleibt */
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--greige);
  max-width: 62ch;
  margin: 0;
}

.warnbox {
  border: 1px solid rgba(238, 123, 46, 0.45);
  background: rgba(238, 123, 46, 0.1);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 36px;
}
.warnbox p {
  color: var(--offwhite);
  margin: 0;
}
.warnbox p + p {
  margin-top: 10px;
}
.platzhalter-feld {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: #ffd08a;
  background: rgba(238, 123, 46, 0.12);
  border-radius: 5px;
  padding: 2px 8px;
}

/* ==========================================================================
   7. BEWEGUNG
   ========================================================================== */
.auf {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.22, 0.7, 0.24, 1),
    transform 0.75s cubic-bezier(0.22, 0.7, 0.24, 1);
}
.auf.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   7b. INTRO-ANIMATION
   --------------------------------------------------------------------------
   Zwei Fassungen:
     • VOLL  (erster Besuch)  – Linie zieht sich, Wortmarke steigt auf,
                                „STUDIO" wird getippt, alles ordnet sich ein
     • KURZ  (jeder weitere)  – kein Vorhang, nur Logo tippen + Inhalt aufsteigen

   WICHTIG für Verlässlichkeit:
     • Der Vorhang ist standardmäßig AUS. Er wird nur eingeblendet, wenn ein
       kleines Skript im Seitenkopf die Klasse „intro-voll" setzt.
       Ohne JavaScript gibt es also nie ein schwarzes Bild.
     • Die Animation läuft in reinem CSS. Selbst wenn main.js nicht lädt,
       verschwindet der Vorhang zuverlässig von allein.
     • Alle Inhalte sind ohne Animation sichtbar. Bewegung kommt nur dazu,
       wenn die Klasse „bewegt" gesetzt ist.

   Zum Abschalten: in index.html das Skript im <head> entfernen.
   Zum Kürzen: --intro-versatz und die Werte in den Keyframes anpassen.
   ========================================================================== */

:root {
  /* Verzögerung, mit der die Startseite nach dem Intro einsetzt */
  --intro-versatz: 0s;
}
html.intro-voll {
  --intro-versatz: 1.85s;
}

/* --- Der Vorhang ------------------------------------------------------- */
.intro {
  display: none;
}
html.intro-voll .intro {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
  background: var(--tiefdunkel);
  /* Sicherheitsnetz: verschwindet auch ohne JavaScript */
  animation: intro-vorhang 2.5s forwards;
}

@keyframes intro-vorhang {
  0%,
  74% {
    opacity: 1;
    visibility: visible;
  }
  92%,
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.intro-buehne {
  position: relative;
  display: grid;
  place-items: center;
}

/* Die Linie, die sich zieht – dieselbe Geste wie der rote Faden */
.intro-linie {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 0;
  background: var(--orange);
  transform: translateX(-50%);
  animation: intro-linie 2.45s cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
}
@keyframes intro-linie {
  0% {
    width: 0;
    opacity: 1;
  }
  22% {
    width: min(340px, 62vw);
    opacity: 1;
  }
  68% {
    width: min(340px, 62vw);
    opacity: 1;
  }
  100% {
    width: min(340px, 62vw);
    opacity: 0;
  }
}

/* Die Wortmarke, die aus der Linie aufsteigt */
.intro-marke {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 2.6vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: 0.17em;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  animation: intro-marke 2.45s cubic-bezier(0.22, 0.7, 0.24, 1) forwards;
}
@keyframes intro-marke {
  0%,
  20% {
    opacity: 0;
    transform: translateY(18px) scale(1);
  }
  38%,
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.62);
  }
}

.intro-marke .z1 {
  display: block;
  color: var(--offwhite);
}
.intro-marke .z2 {
  display: block;
  color: var(--orange);
  /* wird Zeichen für Zeichen freigegeben */
  clip-path: inset(0 100% 0 0);
  animation: intro-tippen 0.42s steps(7) 1.05s forwards;
}
@keyframes intro-tippen {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* --- Wortmarke im Seitenkopf tippt sich ---------------------------------- */
html.bewegt .kopf .wortmarke .zeile1 {
  clip-path: inset(0 100% 0 0);
  animation: intro-tippen 0.34s steps(17)
    calc(var(--intro-versatz) + 0.05s) forwards;
}
html.bewegt .kopf .wortmarke .zeile2 {
  clip-path: inset(0 100% 0 0);
  animation: intro-tippen 0.3s steps(7)
    calc(var(--intro-versatz) + 0.4s) forwards;
}

/* --- Startseite steigt auf ---------------------------------------------- */
@keyframes intro-auf {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes intro-bild {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.bewegt .hero-dienste,
html.bewegt .hero h1 span,
html.bewegt .hero-text,
html.bewegt .hero .btn,
html.bewegt html.bewegt .hero-dienste {
  animation-delay: calc(var(--intro-versatz) + 0.18s);
}
html.bewegt .hero h1 span:nth-child(1) {
  animation-delay: calc(var(--intro-versatz) + 0.26s);
}
html.bewegt .hero h1 span:nth-child(2) {
  animation-delay: calc(var(--intro-versatz) + 0.34s);
}
html.bewegt .hero h1 span:nth-child(3) {
  animation-delay: calc(var(--intro-versatz) + 0.42s);
}
html.bewegt .hero-text {
  animation-delay: calc(var(--intro-versatz) + 0.52s);
}
html.bewegt .hero .btn {
  animation-delay: calc(var(--intro-versatz) + 0.6s);
}
html.bewegt html.bewegt .hero-bild {
  opacity: 0;
  animation: intro-bild 0.85s cubic-bezier(0.22, 0.7, 0.24, 1)
    calc(var(--intro-versatz) + 0.3s) forwards;
}

/* --- Bereichsmarken tippen sich beim Hinscrollen -------------------------
   Verborgen wird der Text nur, wenn main.js die Klasse „tippt-marken"
   gesetzt hat. Lädt die Datei nicht, bleibt alles normal lesbar. */
.marke-text {
  clip-path: inset(0 0 0 0);
}
html.bewegt.tippt-marken .marke-text {
  clip-path: inset(0 100% 0 0);
}
html.bewegt.tippt-marken .marke.ist-getippt .marke-text {
  animation: intro-tippen 0.4s steps(10) forwards;
}

/* --- Übersprungen (Klick, Scroll, Taste) -------------------------------- */
html.intro-weg .intro {
  display: none !important;
}
html.intro-weg .hero-dienste,
html.intro-weg .hero h1 span,
html.intro-weg .hero-text,
html.intro-weg .hero .btn,
html.intro-weg .hero-bild,
html.intro-weg .kopf .wortmarke .zeile1,
html.intro-weg .kopf .wortmarke .zeile2 {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
}

/* Nutzer, die weniger Bewegung wünschen: alles ruhig und sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .auf {
    opacity: 1;
    transform: none;
  }
  .cursor {
    animation: none;
    opacity: 1;
  }
  .faden::after {
    display: none;
  }
  /* Kein Intro, keine getippten Texte — alles sofort da */
  .intro {
    display: none !important;
  }
  .marke-text,
  .kopf .wortmarke .zeile1,
  .kopf .wortmarke .zeile2 {
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
  .hero-dienste,
  .hero h1 span,
  .hero-text,
  .hero .btn,
    .btn:hover {
    transform: none;
  }
}

/* Druckansicht */
@media print {
  .kopf,
  .faden,
  .band,
  .btn {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}