/* ---------- FONT ---------- */

@font-face {
  font-family: 'Anta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anta.woff2') format('woff2');
}

/* ---------- ALLGEMEIN ---------- */

:root {
  color-scheme: dark;

  /* --- Farben --- */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-accent: #ff5a00;
  --color-accent-rgb: 255, 90, 0;

  /* --- Schrift --- */
  --font-primary: 'Anta', sans-serif;

  /* --- Größen --- */
  --px-256: clamp(7.25rem, 4.75rem + 12.5vw, 16rem);
  --px-192: clamp(5.438rem, 3.563rem + 9.38vw, 12rem);
  --px-128: clamp(3.625rem, 2.375rem + 6.25vw, 8rem);
  --px-64: clamp(2.188rem, 1.67rem + 2.59vw, 4rem);
  --px-48: clamp(1.75rem, 1.393rem + 1.79vw, 3rem);
  --px-32: clamp(1.375rem, 1.196rem + 0.89vw, 2rem);
  --px-24: clamp(1.125rem, 1.018rem + 0.54vw, 1.5rem);
  --px-16: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
  --px-12: clamp(0.656rem, 0.629rem + 0.13vw, 0.75rem);
  --px-8: clamp(0.438rem, 0.42rem + 0.09vw, 0.5rem);
  --px-4: clamp(0.219rem, 0.21rem + 0.04vw, 0.25rem);
  --px-2: clamp(0.109rem, 0.105rem + 0.02vw, 0.125rem);
}

* { box-sizing: border-box; 
  font-family: var(--font-primary);}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-white);
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* alte Edge/IE */
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}

::selection {
  background-color: var(--color-accent);
  color: #ffffff; 
}

::-moz-selection {
  background-color: var(--color-accent);
  color: #ffffff;
}

a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- STYLE ---------- */

nav {
  font-size: var(--px-24);
  color: var(--color-black);
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: var(--px-32);
  color: var(--color-black);
  line-height: 1;
  margin: 0;
}

h2 {
  font-size: var(--px-64);
  color: var(--color-black);
  line-height: 1;
  margin: 0;
}

h2.hero-title {
  font-size: var(--px-128);
}

h3 {
  font-size: var(--px-32);
  color: var(--color-black);
  line-height: 1;
  margin: 0;
}

p {
  font-size: var(--px-24);
  color: var(--color-black);
  text-transform: none;
  line-height: 1;
  margin: 0;
}

p.eyebrow {
  color: var(--color-accent);
  text-transform: uppercase;
}

p.footer {
  font-size: var(--px-16);
}

.right {
  text-align: right;
}

button {
  font-size: var(--px-16);
  border-radius: var(--px-8);
  padding: var(--px-8);
  line-height: 1;
  margin: 0;
}

button.small {
  color: var(--color-white);
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
}

button.small:hover {
  color: var(--color-accent);
  background-color: var(--color-white);
  border: 1px solid var(--color-accent);
}

button.big {
  font-size: var(--px-32);
  color: var(--color-black);
  background-color: var(--color-white);
  border-radius: var(--px-8);
  padding: var(--px-16);
  border: none;
  display: flex;
  flex-direction: row;
  gap: var(--px-16);
}

button.big:hover {
  color: var(--color-white);
  background-color: var(--color-accent);
}

.btn-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

a.blank {
  font-size: var(--px-32);
  color: var(--color-white);
  padding: 0 var(--px-8);
  border: none;
  background: none;
  gap: var(--px-16);
  /* Ohne dies erbt <a> (anders als <p>, das global line-height:1 hat) den
     Browser-Default-Zeilenabstand -- das liess Elemente mit a.blank-Links
     (z.B. im Footer oder bei Studio-Line/DE-Button) trotz
     "align-items:center" am umschliessenden Flex-Container leicht
     unterschiedlich hoch wirken. */
  line-height: 1;
}

a.blank:hover {
  color: var(--color-accent);
}

a.footer {
  font-size: var(--px-16);
  gap: 0px;
}

a.hero {
  font-size: var(--px-24);
  color: var(--color-black);
  gap: 0px;
}

.white {
  background: var(--color-white);
  color: var(--color-black);
}

.black {
  background: var(--color-black);
  color: var(--color-white);
}

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

/* ---------- LAYOUT ---------- */

.column {
  display: flex;
  flex-direction: column;
}

.column-width {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.column.total {
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
}

.center {
  width: 100%;
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
}

.row.total {
  width: 100%;
  justify-content: space-between;
  overflow: hidden;
}

/* Punkt 5: Die vier Footer-Bestandteile (Copyright, Impressum, Social
   Media, Languages) standen auf Desktop/iPad-Landscape nicht auf
   gleicher Hoehe -- Standard-Flex-Verhalten ("align-items:stretch")
   dehnt jedes Element auf die volle Zeilenhoehe, ihr Text darin sass aber
   je nach Element (p vs. verschachtelte a/p) unterschiedlich. Zentrieren
   behebt das. Bewusst als Basisregel (nicht in einer Media Query), damit
   sie ueberall greift, wo diese Zeile in ihrer normalen Flex-Row-Form
   vorliegt -- Phone/Tablet ueberschreiben align-items weiter unten fuer
   ihre gestapelten Layouts ohnehin selbst. */
.column-width > .row.total:last-child {
  align-items: center;
}

/* Punkt 2 (universell): Studio-Line und DE-Button standen wegen
   unterschiedlicher Schriftgroessen/Zeilenhoehen nicht auf gleicher Hoehe
   (Flex-Row default ist "align-items:stretch") -- vertikal zentrieren
   behebt das. Bewusst als Basisregel, damit es auf jeder Bildschirmgroesse
   greift (Desktop/iPad-Landscape waren bisher nicht abgedeckt). Selektor
   ueber den direkten ".vp.top"-Elternteil eingegrenzt, damit nur diese
   Hero-Fusszeile betroffen ist. */
.vp.top > .row.total {
  align-items: center;
}

.gap16 {
  gap: var(--px-16);
}

/* Punkt 1: Die beiden Social-Links (LinkedIn/Instagram) in Section 7
   sollen nur ihren eigenen Inhalt umschliessen ("content hugging") statt
   als Flex-Kinder per Default ("align-items:stretch") auf die volle
   Spaltenbreite gedehnt zu werden. "flex-end", damit sie weiterhin
   rechtsbuendig zur Spalte stehen (passend zum ".right"-Text-Align). Gilt
   universell (alle Devices), da es kein Breakpoint-spezifisches Problem
   ist. */
.column.gap64.right .column.gap16 {
  align-items: flex-end;
}

.gap32 {
  gap: var(--px-32);
}

.gap64 {
  gap: var(--px-64);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--px-32);
  width: 100%;
  min-height: 0;
  max-height: 100%;
}

.grid.total {
  gap: var(--px-64);
}

.grid img {
  width: 100%;
  height: 100%;
  min-height: 0%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom left;
}

img.icon {
  width: var(--px-32);
  height: var(--px-32);
  object-fit: scale-down;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  gap: var(--px-12);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--px-32);
  width: 100%;
}

.service-card {
  border: 1px solid var(--color-black);
  border-radius: var(--px-16);
  padding: var(--px-32);
  display: flex;
  flex-direction: column;
  gap: var(--px-16);
}

.service-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--px-8);
  opacity: 0.5;
}

.service-card__list li::before { content: "• "; }

.footer-right {
  display: flex;
  align-items: center;
  gap: var(--px-8);
}

/* ---------- LODING ANIMATION ---------- */

  .hero-title__letter {
  display: inline-block;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease;
  will-change: transform, opacity;
}

.hero-intro,
.section-nav__toggle,
.hero-sub,
.studio-line,
.footer-right {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.is-ready .hero-intro,
body.is-ready .section-nav__toggle,
body.is-ready .hero-sub,
body.is-ready .studio-line,
body.is-ready .footer-right {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-title__letter { transition: none; }
  .hero-intro, .section-nav__toggle, .hero-sub, .studio-line, .footer-right { opacity: 1; transform: none; transition: none; }
}

/* ---------- CUSTOM CURSOR ---------- */
.has-custom-cursor,
.has-custom-cursor a,
.has-custom-cursor button {
  cursor: none;
}

#cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: normal;
}

/* black sections always keep the system cursor */
.overlay,
.overlay * {
  cursor: auto;
}
.overlay a,
.overlay button {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  #cursor-canvas { display: none; }
  .has-custom-cursor,
  .has-custom-cursor a,
  .has-custom-cursor button {
    cursor: auto;
  }
}

/* ---------- STUFE 1: FULLPAGE-SCROLL ---------- */

.snap-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.snap-container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  transition: transform 0.1s linear, filter 0.1s linear;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* alte Edge/IE */
}

.snap-container::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}

.snap-section {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}

.vp {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: var(--px-48);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--px-64);
  overflow: hidden;
}

.vp.top {
  height: 100%;
  justify-content: space-between;
}

.vp.end {
  /* War vorher 0 -- dadurch lagen Contact-Buttons, Icon-Row und Giant-Word
     ohne jeden Abstand aufeinander, sobald ".vp" (siehe unten) nicht mehr
     starr auf eine Bildschirmhoehe gezwungen wird. 64px als Mindestabstand,
     "justify-content:space-between" (von ".vp.top" geerbt) verteilt auf
     grossen Screens automatisch zusaetzlichen Platz obendrauf. */
  gap: var(--px-64);
  padding: var(--px-48) var(--px-48) var(--px-24) var(--px-48);
}

/* Sections 6+7 (Studio/Contact) liegen im Overlay, das bereits sein
   eigenes Scroll-System hat (overlay-Element wird per JS scrollbar,
   sobald es komplett sichtbar ist). Die ".vp"-Basisregel oben
   (position:absolute + overflow:hidden) ist fuer den Fixed-Viewport-
   Snap-Mechanismus der Sections 1-5 gedacht -- dort ist das Abschneiden
   erwuenscht (Snap-Grenze pro Bildschirm). Im Overlay dagegen fuehrt genau
   das zum Textabschneiden, sobald Inhalt (z.B. die Personenbeschreibungen
   bei Studio) auf einem breiten, aber niedrigen Viewport (z.B. iPad im
   Querformat) nicht mehr in eine Bildschirmhoehe passt. Diese Regel gilt
   bewusst auf JEDER Bildschirmgroesse (nicht nur Mobile), da das Overlay
   ueberall scrollbar ist und daher nirgends Inhalt abschneiden muss.
   "min-height:100vh" (statt hartem height:100%) sorgt zusaetzlich dafuer,
   dass ".vp" auf Desktop/iPad-Landscape trotzdem mindestens eine
   Bildschirmhoehe fuellt -- sonst haette "justify-content:space-between"
   nichts zu verteilen und liesse stattdessen Leerraum NACH dem Footer
   stehen (genau das gemeldete Problem). Fuer Phone/Tablet-Portrait wird
   das weiter unten wieder auf 0 zurueckgesetzt (dort soll der Inhalt
   kompakt bleiben statt auf volle Hoehe gestreckt zu werden). */
.overlay-section .vp {
  position: static;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

.half {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--px-32)
}

/* ---------- STUFE 2: SPACER ---------- */

.scroll-spacer {
  height: 200vh; /* Scrollweg fuer die Overlay-Animation */
  width: 100%;
}

/* ---------- STUFE 3: OVERLAY ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* alte Edge/IE */
}

.overlay::-webkit-scrollbar {
  display: none;              /* Chrome, Safari */
}

.overlay-section {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.border {
  border-radius: var(--px-48) var(--px-48) 0 0;
}

/* ---------- NAVIGATION ---------- */

.section-nav {
  position: fixed;
  top: var(--px-48);
  right: var(--px-48);
  z-index: 10;
  text-align: right;
  --square-size: 1.25rem;
  --square-gap: var(--px-8);
}

/* Sichtbar bis inkl. Studio-Section; sobald innerhalb des Overlays weiter
   zur Contact-Section gescrollt wird, ausblenden (siehe script.js).
   Selektor bewusst so spezifisch wie "body.is-ready .section-nav", damit
   er diese Regel zuverlaessig ueberstimmt, statt sich per Ladereihenfolge
   auf Zufall zu verlassen. */
body .section-nav.section-nav--hidden {
  opacity: 0;
  pointer-events: none;
}

.section-nav__toggle {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--px-sm);
  letter-spacing: 0.02em;
  color: var(--color-black);
  cursor: pointer;
  /* Beide Transitions kombiniert -- diese Regel kommt nach der
     Intro-Animation-Regel und wuerde deren "transition" sonst komplett
     ueberschreiben (Shorthand-Werte werden nicht gemischt, nur ersetzt). */
  transition: color 0.2s ease, opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: var(--square-gap);
  text-transform: uppercase;
}

.section-nav__square {
  width: var(--square-size);
  height: var(--square-size);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.section-nav:hover .section-nav__square,
.section-nav:focus-within .section-nav__square,
.section-nav.section-nav--open .section-nav__square {
  transform: rotate(-45deg);
}

.section-nav--on-dark .section-nav__toggle {
  color: var(--color-white);
}

.section-nav:hover .section-nav__toggle,
.section-nav:focus-within .section-nav__toggle,
.section-nav.section-nav--open .section-nav__toggle {
  color: var(--color-accent);
}

.section-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--px-4) 0 0;
  position: absolute;
  top: 100%;
  right: calc(var(--square-size) + var(--square-gap));
  text-align: right;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.section-nav:hover .section-nav__list,
.section-nav:focus-within .section-nav__list,
.section-nav.section-nav--open .section-nav__list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.section-nav:hover .section-nav__list,
.section-nav:focus-within .section-nav__list {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.section-nav__list button {
  display: block;
  width: 100%;
  text-align: right;
  background: none;
  border: none;
  color: var(--color-accent);
  padding: var(--px-4) 0;
  cursor: pointer;
  font-size: var(--px-xs);
  font-family: inherit;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ---------- GIANT-WORD ---------- */

/* Die umschliessende ".row.total" (Flex-Row mit justify-content:space-
   between) sorgt bereits dafuer, dass der erste/letzte Buchstabe an den
   Raendern sitzt. Hier nur noch Farbe/Uebergang je Buchstabe -- die
   Schriftgroesse wird per JS (fitGiantWord in script.js) exakt so
   berechnet, dass die Buchstaben zusammen wirklich die komplette Breite
   einnehmen, und zwar responsiv auf jeder Bildschirmgroesse. */
.row.total:has(.giant-word) {
  align-items: baseline;
}

.giant-word {
  color: var(--color-white);
  line-height: 1;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.giant-word:hover {
  color: var(--color-accent);
}

/* ---------- NICHT-DESKTOP (Phone + Tablet-Portrait, Industriestandard) ---------- */

@media (max-width: 1023px) {
  /* 1. Custom Cursor deaktivieren (System-Cursor stattdessen) */
  #cursor-canvas { display: none !important; }
  .has-custom-cursor,
  .has-custom-cursor a,
  .has-custom-cursor button {
    cursor: auto !important;
  }

  /* Fullpage-Snap- und Fixed-Viewport-Logik (Section/vp) deaktivieren --
     dadurch werden gestapelte Inhalte (Cards, Grids, etc.) nicht mehr per
     "overflow:hidden" auf einer starren 100vh-Box abgeschnitten. Der
     Overlay-Parallax-Effekt selbst (.overlay bleibt "position:fixed" und
     unangetastet) bleibt dabei voll erhalten -- script.js berechnet den
     Scroll-Fortschritt bereits relativ zur tatsaechlichen Spacer-Position,
     das funktioniert unabhaengig davon, ob .snap-stage fixed ist oder wie
     hier normaler Dokumentfluss. */
  .snap-stage {
    position: static;
    overflow: visible;
  }

  .snap-container {
    height: auto;
    overflow-y: visible !important; /* ueberstimmt das per JS gesetzte Inline-Style */
    scroll-snap-type: none;
    /* Die 0.1s-Transition ist fuer den kleinen Desktop-Parallax-Nudge
       gedacht. Fuer die Freeze-Kompensation (Punkt 2) muss der Transform
       aber pro Scroll-Pixel exakt synchron mitlaufen -- jede Verzoegerung
       laesst die Section dem tatsaechlichen Scroll "hinterherjagen" und
       erzeugt genau das gemeldete Ruckeln. Deshalb hier deaktiviert. */
    transition: none !important;
  }

  /* nur noch ein kleiner, gleichbleibender Abstand zwischen den
     Abschnitten statt erzwungener 100vh-Boxen (die bei kurzem Inhalt viel
     Leerraum erzeugt haben, z.B. vor "Process Optimization" oder als
     kompletter weisser Viewport vor dem Overlay). Jede Section ist jetzt
     nur noch so hoch wie ihr eigener Inhalt. */
  .snap-section {
    height: auto;
    min-height: 0;
    margin-bottom: 64px;
    overflow: visible;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

  #snapContainer > .snap-section:last-child {
    margin-bottom: 0;
  }

  .vp {
    position: static;
    height: auto;
    overflow: visible;
  }

  .vp.top {
    height: auto;
    justify-content: flex-start;
  }

  /* Der Viewport ist hier oft hoeher als auf einem Smartphone (z.B. iPad
     Portrait) -- "min-height:100vh" wuerde dort mehr Platz erzwingen, als
     der tatsaechliche Contact-Inhalt braucht, und schwarzen Leerraum unter
     dem Footer stehen lassen. Die Section soll stattdessen nur so hoch
     sein wie ihr eigener Inhalt. */
  .overlay-section {
    min-height: 0;
  }

  /* Aus demselben Grund hier die weiter oben (universell) gesetzte
     "min-height:100vh" auf ".overlay-section .vp" zurueck auf 0 --
     die ist nur fuer Desktop/iPad-Landscape gedacht (damit dort
     "justify-content:space-between" etwas zum Verteilen hat), hier soll
     der Inhalt kompakt bleiben. */
  .overlay-section .vp {
    min-height: 0;
  }

  /* der Hero (erste Section) soll trotzdem den ganzen Viewport einnehmen
     und seinen Inhalt ueber die volle Hoehe verteilen, wie auf Desktop --
     nur die Sections danach bekommen die kompakte Auto-Hoehe von oben. */
  #snapContainer > .snap-section:first-child {
    height: 100vh;
    min-height: 100vh;
  }

  #snapContainer > .snap-section:first-child .vp.top {
    height: 100%;
    justify-content: space-between;
  }

  /* Social Media im Hero ausblenden, nur Studio-Line und DE-Button
     bleiben sichtbar. */
  .footer-right > .row {
    display: none;
  }

  /* "half"-Spalten deaktivieren -> volle Breite */
  .half { width: 100%; }

  /* Der Spacer war fuer die Desktop-Situation kalibriert (kein Inhalt vor
     dem Spacer -> 200vh noetig, damit ueberhaupt 1 Bildschirmhoehe echter
     Scroll-Weg entsteht). script.js berechnet die Reveal-Distanz jetzt
     dynamisch aus der tatsaechlich verbleibenden Restscroll-Distanz --
     dadurch kann der Spacer hier viel kleiner sein, ohne dass das
     Overlay-Reveal kaputtgeht. */
  .scroll-spacer {
    height: 130vh;
  }

  /* Auf Touch-Geraeten gibt es kein echtes ":hover", und ":focus-within"
     verhaelt sich browserabhaengig unzuverlaessig (Tap auf einen Button
     behaelt den Fokus, wodurch das Menue trotz Schliessen offen blieb).
     Deshalb wird die Sichtbarkeit hier AUSSCHLIESSLICH ueber die von JS
     gesetzte Klasse ".section-nav--open" gesteuert -- Hover/Focus-within
     werden bewusst deaktiviert (!important), damit es nur noch genau
     einen, deterministischen Zustand gibt. */
  .section-nav__list {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--color-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--px-24);
    text-align: center;
    transform: none !important; /* kein transform mehr noetig */
    transition: opacity 0.18s ease;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .section-nav.section-nav--open .section-nav__list {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Der Toggle-Button (Menu + Quadrat) muss ueber der schwarzen Flaeche
     sichtbar bleiben, wenn das Menue offen ist -- sonst weiss man nicht,
     wo man zum Schliessen klicken soll. */
  .section-nav__toggle {
    position: relative;
    z-index: 2;
  }

  .section-nav__list button {
    color: var(--color-accent);
    font-size: var(--px-32);
    text-align: center;
    padding: var(--px-8) 0;
  }

  /* Service-Cards untereinander */
  .service-grid { grid-template-columns: 1fr; }

  /* Studio-Section: die beiden Personen untereinander (Bild bleibt neben
     der jeweiligen Beschreibung, da nur ".grid.total" betroffen ist, nicht
     die inneren ".grid"-Bloecke pro Person). Dieselbe Regel stapelt
     gleichzeitig die beiden Contact-Spalten. */
  .grid.total { grid-template-columns: 1fr; }

  /* Contact-Buttons (Call/Mail) untereinander, aber content-huggend statt
     komplett auf volle Breite gestreckt. */
  .row.gap32 {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Icon-Row ausblenden */
  .row.total[aria-hidden="true"] { display: none; }
}

/* ---------- PHONE (Industriestandard) ---------- */

@media (max-width: 767px) {
  /* Punkt 3: "Roder Lemus" ist bei var(--px-128) auf schmalen Phones zu
     breit -- "us" von "Lemus" rutscht in die naechste Zeile. Exklusiv auf
     Mobile eine kleinere, eigene fluid-Groesse statt der globalen
     --px-128-Variable (die auch anderswo mit ihrer regulaeren Groesse
     gebraucht wird). */
  h2.hero-title {
    font-size: clamp(2.25rem, 1.7rem + 6vw, 3.25rem);
  }

  /* Punkt 4: "Process Optimization • Public Relations • Editorial Work"
     soll auf Mobile als 3 einzelne Zeilen ohne die "•"-Trenner stehen. */
  .hero-sub__part {
    display: block;
  }

  .hero-sub__sep {
    display: none;
  }

  /* Footer-Bestandteile untereinander (nur die untere Footer-Leiste,
     nicht die Reihe der Giant-Word-Buchstaben -- deshalb ueber
     ":last-child" innerhalb von .column-width gezielt eingegrenzt). */
  .column-width > .row.total:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--px-8);
    overflow: visible;
  }

  /* Die "Impressum | Datenschutz"-Zeile startet (anders als die "Social
     Media:"/"Languages:"-Zeilen) direkt mit einem "a.blank"-Link.
     ".a.blank" hat ein eingebautes "padding: 0 var(--px-8)" (dient als
     Abstand zwischen den Links), wodurch genau diese Zeile optisch um
     diesen Wert nach rechts eingerueckt wirkt. Mit einem passenden
     negativen Margin gleichen wir das aus, ohne den Link-Abstand selbst
     anzutasten. */
  .column-width > .row.total:last-child > .row:first-of-type {
    margin-left: calc(-1 * var(--px-8));
  }
}

/* ---------- TABLET PORTRAIT (Industriestandard, z.B. iPad hochkant) ---------- */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Der Footer darf hier schon in zwei Spalten stehen, statt wie auf
     Phone komplett untereinander. */
  .column-width > .row.total:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--px-16);
    column-gap: var(--px-32);
    align-items: start;
  }

  /* Dieselbe Ursache wie beim Phone-Layout: die "Impressum | Datenschutz"-
     Zeile beginnt mit einem "a.blank"-Link, der ein eingebautes
     "padding: 0 var(--px-8)" hat -- dadurch sass sie in ihrer Grid-Spalte
     sichtbar weiter rechts als z.B. "Languages" (beginnt mit einem <p>
     ohne dieses Padding), obwohl beide in derselben Spalte stehen. */
  .column-width > .row.total:last-child > .row:first-of-type {
    margin-left: calc(-1 * var(--px-8));
  }
}

/* =========================================================
   TABLET LANDSCAPE (iPad mini bis iPad Pro 12.9" quer, ca. 1024-1366px
   Breite): faellt technisch in unsere Desktop-Stufe (Fullpage-Snap bleibt
   bewusst aktiv), aber die Standard-Desktop-Footerzeile und die
   Contact-Buttons sind dort zu eng/gross. Eine echte Geraete-Erkennung ist
   per CSS nicht moeglich -- die Breitenspanne ist an gaengige
   iPad-Landscape-Aufloesungen angelehnt und kann sich mit manchen kleinen
   Laptop-Bildschirmen (z.B. 1366x768) leicht ueberschneiden. Falls das bei
   dir auffaellt, sag Bescheid, dann justiere ich die Grenzen nach. */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  /* Punkt 1: Footer bekommt dieselbe aufgeraeumte 2-Spalten-Organisation
     wie im Tablet-Portrait-Layout, statt der zu engen Desktop-Reihe. */
  .column-width > .row.total:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--px-16);
    column-gap: var(--px-32);
    align-items: start;
  }

  .column-width > .row.total:last-child > .row:first-of-type {
    margin-left: calc(-1 * var(--px-8));
  }

  /* Punkt 2: die letzten beiden Icons ausblenden, damit die verbleibenden
     mehr Luft zum Atmen haben ("nth-last-child" statt fixer Indizes, damit
     es unabhaengig von der genauen Icon-Anzahl robust bleibt). */
  .row.total[aria-hidden="true"] img:nth-last-child(-n+2) {
    display: none;
  }

  /* Punkt 3: Contact-Buttons (Call/Mail) sind hier mit der regulaeren
     button.big-Groesse zu gross. */
  button.big {
    font-size: var(--px-24);
  }
}

/* =========================================================
   SMARTPHONE LANDSCAPE SPERREN: Das kompakte Mobile-Layout ist auf
   Hochformat ausgelegt. Bei Smartphones im Querformat (sehr geringe
   Viewport-Hoehe -- im Unterschied zu Tablets im Querformat, siehe oben)
   wird statt der Seite ein Hinweis angezeigt, das Geraet zu drehen.
   ========================================================= */

.rotate-warning {
  display: none;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  .rotate-warning {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-black);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--px-32);
  }

  .rotate-warning p {
    color: var(--color-accent);
    font-size: var(--px-24);
    max-width: 32ch;
    line-height: 1.4;
    margin: 0;
  }

  /* Restliche Seite dahinter unzugaenglich/nicht scrollbar machen */
  body {
    overflow: hidden;
  }
}