/*
 * CSS-Design
 * Print + Web Simone Strohhäcker
 */

/* ==================================================
   ROOT-VARIABLEN
   Zentrale Basiswerte (Farben, Schrift, Timing) –
   einmal definiert, überall per var() wiederverwendet.
   ================================================== */

:root {
  /* Schrift */
  --font-base-size: 16px; /* Basiswert, Referenz für alle clamp()-Berechnungen */
  --font-family-base: "omnes-narrow", sans-serif;
  --font-family-alt: "omnes-semicond", sans-serif;

  /* Farben */
  --color-bg: #0c0c0c;
  --color-white: #fff;
  --color-off-white: #f2f2f2;
  --color-muted: #949494;
  --color-platinum: #cccccc;
  --color-black: #000;
  --color-footer-bg: #d1d1d1;
  --color-footer-link: #838383;

  /* Timing */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.5s ease;
  --page-fade-duration: 0.45s;
  --reveal-duration: 0.8s;
}

/* ==================================================
   RESET
   Setzt Browser-Standardabstände zurück, einheitliches Box-Modell.
   ================================================== */

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* Browserstandard: 16px */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Schaltet die Adobe-Schriftart auf der gesamten Website erst frei,
   sobald der Nutzer im Banner auf "Aktivieren" geklickt hat */
.fonts-loaded,
.fonts-loaded body {
  font-family: var(--font-family-base) !important;
}

/* ==================================================
   CURSOR
   Eigener Mauszeiger (Punkt + Ring), ersetzt den System-Cursor.
   ================================================== */

html,
body {
  cursor: none;
}

/* Verhindert, dass der Pfeil bei Links oder Buttons plötzlich wieder auftaucht */
html body a,
html body button,
html body input,
html body select {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-white);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  will-change: transform;
}

.cursor-ring circle {
  transform-origin: center;
  transform-box: fill-box;
  transform: rotate(-38deg);
}

/* ==================================================
   BODY
   Basistypografie und Grundlayout (Flex-Spalte, volle Höhe).
   ================================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-base-size);
  line-height: 1.6;
  font-weight: 300;
  background-color: var(--color-bg);

  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  cursor: none;

  /* Sanfter Ausblend-Effekt beim Seitenwechsel, siehe js/script.js */
  transition: opacity var(--page-fade-duration) ease;
}

body.is-transitioning {
  opacity: 0;
}

/* ==================================================
   SCROLL-REVEAL
   Textblöcke starten kaum sichtbar und blenden beim Scrollen
   einmalig sauber ein (siehe IntersectionObserver in js/script.js).
   ================================================== */

.text-block {
  opacity: 0.1;
  transform: translateY(24px);
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease;
}

.text-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================
   COOKIE DIALOG
   Consent-Banner für den Nachlade der Adobe-Schrift.
   ================================================== */

.cookie-dialog {
  position: fixed;
  left: 50%;
  bottom: 50px;
  width: min(450px, calc(100vw - 60px));
  transform: translateX(-50%);
  z-index: 1000;
  opacity: 0;
  animation: cookie-einblenden 1.2s ease forwards;
}

.cookie-dialog.active ~ .floating-svg {
  animation-play-state: paused;
}

.cookie-inhalt {
  font-family: Omnes-narrow, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 32px 36px;
  color: #d8d8d8;
  letter-spacing: 1px;
}

.cookie-inhalt p {
  margin: 0 0 30px;
  font-size: 0.9375rem;
}

.cookie-optionen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cookie-optionen button {
  font-family: Omnes-narrow, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), gap var(--transition-fast), opacity var(--transition-fast);
}

.cookie-optionen button span {
  font-size: 1.375rem;
  line-height: 1;
  display: inline-block;
  margin-left: 12px;
  transition: transform var(--transition-medium);
}

.cookie-optionen button:hover span {
  transform: translateX(6px);
}

/* Der Haupt-Button (Original-Schriftbild) */
#acceptFonts {
  font-size: 1.075rem;
  font-weight: 400;
  color: var(--color-white);
  gap: 15px;
}

#acceptFonts:hover {
  opacity: 0.7;
  gap: 21px;
}

#declineFonts {
  font-size: 1rem;
  color: var(--color-muted);
  font-weight: 400;
  letter-spacing: 1.2px;
  gap: 15px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

#declineFonts:hover {
  color: var(--color-white);
  gap: 21px;
}

@keyframes cookie-einblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==================================================
   FLOATING SVG
   Kleines, dauerhaft wanderndes SVG-Seitenelement.
   ================================================== */

.floating-svg {
  position: fixed;
  width: 38px;
  height: 38px;
  pointer-events: none;
  z-index: 20;
  animation: svg-wandern 70s ease-in-out infinite alternate;
  will-change: left, top;
}

.floating-svg svg {
  width: 100%;
  height: 100%;
  animation: svg-drehen 35s linear infinite;
}

/* ruhige Eigenbewegung */
@keyframes svg-drehen {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* langsame Reise durch den Raum */
@keyframes svg-wandern {
  0% {
    left: 5%;
    top: 15%;
  }
  25% {
    left: 80%; /* Reduziert von 88%, damit es auf Laptops nicht am Scrollbalken kratzt */
    top: 28%;
  }
  50% {
    left: 70%;
    top: 75%; /* Leicht angehoben, damit es nicht hinter dem hellen Footer verschwindet */
  }
  75% {
    left: 12%;
    top: 60%;
  }
  100% {
    left: 85%;
    top: 20%;
  }
}

/* ==================================================
   GEARS (Startseite Hero)
   Rotierendes Zahnrad-SVG im Hero-Bereich der Startseite.
   ================================================== */

#gears {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(55vw, 700px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#gears circle {
  will-change: transform;
}

#gears #g1 {
  transform-origin: center center;
  animation: rotateCW 10s linear infinite;
}

.mbm {
  mix-blend-mode: difference;
}

@keyframes rotateCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==================================================
   HERO-BEREICH
   Vollflächige Startsektion, Container für #gears.
   ================================================== */

#start {
  height: 100vh;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Bereich nach HERO */
#main {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

#datenschutz {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* ==================================================
   SEITENCONTAINER
   Zentrierte, pro Seite unterschiedlich breite Inhaltsspalten.
   ================================================== */

.page-container {
  width: 100%;
  max-width: 975px;
  margin-left: auto;
  margin-right: auto;
}

.page-container-zusammenarbeit {
  width: 100%;
  max-width: 909px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

.page-container-leistungen {
  width: 100%;
  max-width: 1121px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

.page-container-gespraech {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

.page-container-impressum {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

.page-container-datenschutz {
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

.page-container-404 {
  width: 100%;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 180px;
}

/* ==================================================
   TEXTBLOCK NACH HERO / GENERISCHER WRAPPER
   Umschließt jeweils einen inhaltlichen Abschnitt (siehe Scroll-Reveal oben).
   ================================================== */

.text-block {
  width: 100%;
  font-family: var(--font-family-alt);
  font-style: normal;
  font-size: 1.25rem;
  color: var(--color-white);
}

/* ==================================================
   H1
   Seitentitel. Schriftgröße fluid per clamp() – Basiswert 1rem
   entspricht der Body-Basisgröße, skaliert stufenlos mit der Fensterbreite.
   ================================================== */

.headline {
  margin-top: 120px;
  margin-bottom: 120px;
}

.main-titel {
  font-family: var(--font-family-base);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.9rem, 1rem + 3vw, 3rem);
  line-height: 1.0;
  letter-spacing: 2px;
  margin-top: 50px;
  margin-bottom: 120px;
  color: var(--color-off-white);
  text-align: left;
}

/* ==================================================
   H2
   ================================================== */

.content.h2 {
  width: 100%;
  max-width: 975px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
}

.content.h2 h2 {
  font-family: var(--font-family-base);
  font-size: clamp(1.1rem, 1rem + 1.2vw, 1.68rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 4px;
  margin: 0;
  color: var(--color-white);
  text-align: left;
  text-transform: uppercase;
}

.content.h2-leistungen {
  width: 100%;
  max-width: 1121px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
  padding-left: 80px;
}

.content.h2-leistungen h2 {
  font-family: var(--font-family-base);
  font-size: clamp(1.1rem, 1rem + 1.2vw, 1.68rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 4px;
  margin: 0;
  color: var(--color-white);
  text-align: left;
  text-transform: uppercase;
}

.content.h2-gespraech {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
}

.content.h2-gespraech h2 {
  font-family: var(--font-family-base);
  font-size: clamp(1.1rem, 1rem + 1.2vw, 1.68rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 4px;
  margin: 0;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
}

/* ==================================================
   H3
   ================================================== */

.content.h3 {
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
}

.content.h3 h3 {
  font-family: var(--font-family-base);
  font-size: clamp(1.15rem, 1rem + 1.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  margin: 0;
  color: var(--color-off-white);
  text-align: left;
}

.content.h3-zusammenarbeit {
  width: 100%;
  max-width: 445px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
}

.content.h3-zusammenarbeit h3 {
  font-family: var(--font-family-base);
  font-size: clamp(1.15rem, 1rem + 1.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  margin: 0;
  color: var(--color-off-white);
  text-align: left;
}

.content.h3-leistungen {
  width: 100%;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 120px;
}

.content.h3-leistungen h3 {
  font-family: var(--font-family-base);
  font-size: clamp(1.15rem, 1rem + 1.3vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2px;
  margin: 0;
  color: var(--color-off-white);
  text-align: left;
}

/* ==================================================
   H4
   ================================================== */

.content.h4 {
  width: 100%;
  max-width: 975px;
  margin-top: 0;
  margin-bottom: 10px;
}

.content.h4 h4 {
  font-family: var(--font-family-base);
  font-size: clamp(1.05rem, 1rem + 1.1vw, 1.68rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  color: var(--color-off-white);
  text-align: left;
}

.content.h4-leistungen {
  width: 100%;
  max-width: 1121px;
  margin-top: 0;
  margin-bottom: 120px;
}

.content.h4-leistungen h4 {
  font-family: var(--font-family-base);
  font-size: clamp(1.05rem, 1rem + 1.1vw, 1.68rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  color: var(--color-white);
  text-align: left;
}

/* ==================================================
   P (FLIESSTEXT)
   ================================================== */

.content.p {
  width: 100%;
  max-width: 975px;
  margin-top: 0;
  margin-bottom: 60px;
}

.content.p p {
  font-family: var(--font-family-base);
  font-size: clamp(1rem, 1rem + 1vw, 1.6rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  color: var(--color-white);
  text-align: left;
}

.content.p-gespraech {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

.content.p-gespraech p {
  font-family: var(--font-family-base);
  font-weight: 300;
  font-size: clamp(1rem, 1rem + 1vw, 1.6rem);
  font-style: 500;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0;
  color: var(--color-white);
  text-align: left;
  margin-top: 60px;
}

/* ==================================================
   LOGO IM IMPRESSUM
   ================================================== */

.text-zeile {
  font-family: var(--font-family-alt);
  font-style: normal;
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  line-height: 0.5;
  color: var(--color-white);
}

.light-text {
  display: inline-block;
  font-weight: 300;
  letter-spacing: 5px;
  margin-bottom: 80px;
}

.bold-text {
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.6rem, 1rem + 3.4vw, 4.1rem);
  letter-spacing: 2px;
}

.zeile {
  line-height: 1.6;
}

/* ==================================================
   LAYOUT / HEADER
   ================================================== */

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

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

#main article {
  text-align: center;
}

/* ==================================================
   NAVIGATION HEADER
   ================================================== */

.navbar {
  display: flex;
  justify-content: space-between;
  letter-spacing: 1px;
  align-items: flex-start;
  padding: 20px 30px 0px 30px;
  z-index: 999;
}

.navbar .hamburger:hover {
  transform: none;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  padding: 0 0 0 20px;
}

.navbar .nav-link {
  color: var(--color-white);
  text-decoration: none;
  font-size: clamp(0.95rem, 1rem + 0.3vw, 1.125rem);
  font-weight: 400;
  transition: letter-spacing 0.2s ease, opacity var(--transition-fast);
}

/* Header: Hover-Effekt (wird zu feinem Grau) */
.navbar .nav-link:hover {
  opacity: 0.6;
}

/* Header: Aktiver Link (Platin-Grau, reagiert nicht auf Hover) */
.navbar .nav-link.active-nav-link,
.navbar .nav-link.active-nav-link:hover {
  color: var(--color-platinum);
  font-size: clamp(0.95rem, 1rem + 0.3vw, 1.125rem);
  opacity: 1;
  cursor: default;
}

/* ==================================================
   TEXT-LINK (kleiner Link auf der Seite)
   ================================================== */

a {
  color: #f6f6f4;
  text-decoration: none;
  margin-bottom: 60px;
}

a:hover {
  color: #636363;
  -webkit-transition: all var(--transition-slow);
  -moz-transition: all var(--transition-slow);
  -ms-transition: all var(--transition-slow);
  transition: all var(--transition-slow);
}

.text-link-large:hover,
.text-link:hover {
  opacity: 0.6;
}

.text-link {
  font-family: var(--font-family-base);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-white);
  text-decoration: none;
  transition: gap var(--transition-medium), opacity var(--transition-fast);
}

.text-link span {
  font-size: 30px;
  line-height: 1;
  transition: transform var(--transition-medium);
}

.text-link:hover {
  gap: 12px;
}

.text-link:hover span {
  transform: translateX(5px);
}

/* ==================================================
   LINK IMPRESSUM: Telefon, Mail, Web
   ================================================== */

.text-link-large {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 2px;
  text-decoration: none;
  margin-bottom: 16px;
  gap: 15px;
  transition: gap var(--transition-medium), opacity var(--transition-fast);
}

.designer-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 25px;
  align-items: flex-start;
}

.designer-links a:last-child {
  margin-bottom: 0;
}

.text-link-large span {
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.875rem);
  line-height: 1;
  display: inline-block;
  transition: transform var(--transition-medium);
}

.text-link-large:hover {
  gap: 21px;
}

.text-link-large:hover span {
  transform: translateX(5px);
}

.link-gruppe {
  display: flex;
  justify-content: center;
  align-items: center;
}

.link-gruppe a {
  font-size: clamp(1.05rem, 1rem + 0.8vw, 1.40625rem);
}

.link-gruppe a + a {
  margin-left: 60px;
}

.link-gruppe-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ==================================================
   FOOTER
   ================================================== */

footer {
  background: var(--color-footer-bg);
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;

  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.content.f p {
  font-family: var(--font-family-base);
  font-weight: 200;
  font-style: normal;
  font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem);
  line-height: 1.3; /* Erhöht für bessere Lesbarkeit */
  letter-spacing: 2px;
  margin-top: 120px;
  margin-bottom: 120px; /* Leicht verringert, damit Abstand zum Menü passt */
  color: var(--color-black);
  text-align: center;
  width: 100%;
}

/* ==================================================
   NAVIGATION FOOTER
   Zeilenweise nebeneinander; wird erst unter 990px zur vertikalen
   Liste (siehe Breakpoint "MOBILE NAVIGATION" weiter unten).
   ================================================== */

.nav-footer {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px; /* Abstand zwischen den Links */
}

.nav-footer li a {
  color: var(--color-footer-link);
  text-decoration: none;
  font-size: clamp(0.95rem, 1rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 1px;
  margin-bottom: 0;
  transition: opacity var(--transition-fast);
}

.nav-footer li a:hover {
  opacity: 0.6;
}

.nav-footer li a.active-nav-link,
.nav-footer li a.active-nav-link:hover {
  color: var(--color-black);
  letter-spacing: 1px;
  opacity: 1;
  cursor: default;
}

/* ==================================================
   WIDERSPRUCHSBOX (DATENSCHUTZSEITE)
   ================================================== */

/* Die äußere Box – dezent umrahmt für eine klare Struktur */
.privacy-consent-box {
  background-color: rgba(255, 255, 255, 0.03); /* Ganz dezenter, dunkler Grauton */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Hauchdünne weiße Linie */
  padding: 25px;
  margin-bottom: 40px; /* Schafft großzügigen Platz nach unten zum Rechtstext */
  max-width: 650px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  box-sizing: border-box;
}

/* Der Hinweistext in der Box */
.privacy-consent-box p {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 1px;
  color: var(--color-white);
  margin: 0 0 16px 0; /* Abstand nur nach unten zum Button */
}

/* Der Zurücksetzen-Button */
.btn-revoke {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 10px 20px;
  font-size: 13px;
  font-family: sans-serif; /* Nutzt die Systemschrift vor der Schriften-Freigabe */
  letter-spacing: 1px;
  cursor: pointer;
  display: inline-block;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Hover-Effekt: Invertiert die Farben elegant beim Drüberfahren */
.btn-revoke:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Die Statusmeldung (wird vom JS eingeblendet, wenn geklickt wurde) */
.status-message {
  font-size: 0.8125rem;
  color: var(--color-white);
  letter-spacing: 1px;
  margin-top: 14px;
  margin-bottom: 0;
  font-style: italic;
  opacity: 0.8;
}

/* Die versteckte Klasse, damit die Meldung standardmäßig unsichtbar bleibt */
.status-message.hidden {
  display: none;
}

/* Typo für Datenschutztext */
.datenschutz-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  line-height: 1.6;
  color: var(--color-white); /* zwingt alle Texte in dieser Box auf Weiß */
}

.datenschutz-content h2,
.datenschutz-content h3 {
  color: var(--color-white);
  font-weight: bold;
  letter-spacing: 1px;
}

.datenschutz-content a {
  color: var(--color-white);
  text-decoration: underline;
  letter-spacing: 1px;
}

.datenschutz-content strong {
  color: var(--color-white);
  font-weight: bold;
  letter-spacing: 1px;
}

/* ==================================================
   RESPONSIVE BURGER
   Menü-Icon für schmale Viewports, per JS in .active umgeschaltet.
   ================================================== */

.hamburger {
  display: none;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: var(--color-white);
  transition: all var(--transition-medium);
}

/* Burger zu X */
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==================================================
   BREAKPOINT: DESKTOP (1165px – 1300px)
   Layout-Feinschliff (Container, Abstände). Schriftgrößen laufen
   bereits fluid über clamp() oben und brauchen hier keine Overrides mehr.
   ================================================== */

@media screen and (max-width: 1300px) and (min-width: 1165px) {

  /* Header */
  .navbar {
    padding-left: 26px;
    padding-right: 26px;
  }

  .nav-item {
    padding-left: 14px;
  }

  /* Container mittig halten */
  .page-container,
  .page-container-zusammenarbeit,
  .page-container-leistungen,
  .page-container-gespraech {
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .page-container {
    max-width: 880px;
  }

  .page-container-zusammenarbeit {
    max-width: 840px;
  }

  .page-container-leistungen {
    max-width: 1010px;
  }

  .page-container-gespraech {
    max-width: 780px;
  }

  /* H1 */
  .main-titel {
    letter-spacing: 1.8px;
  }

  /* H2 */
  .content.h2 h2 {
    letter-spacing: 3px;
    margin-left: 80px;
  }

  .content.h2-leistungen h2 {
    letter-spacing: 3px;
    margin-left: 60px;
  }

  .content.h2-gespraech h2 {
    letter-spacing: 3px;
  }

  /* Fließtext */
  .content.p p,
  .content.p-gespraech p {
    letter-spacing: 1.7px;
  }
}

/* ==================================================
   BREAKPOINT: DESKTOP KLEIN (1000px – 1164px)
   ================================================== */

@media screen and (max-width: 1164px) and (min-width: 1000px) {

  /* Header */
  .navbar {
    padding-left: 22px;
    padding-right: 22px;
  }

  .nav-item {
    padding-left: 12px;
  }

  /* Container mittig halten */
  .page-container,
  .page-container-zusammenarbeit,
  .page-container-leistungen,
  .page-container-gespraech {
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .page-container {
    max-width: 790px;
  }

  .page-container-zusammenarbeit {
    max-width: 710px;
  }

  .page-container-leistungen {
    max-width: 860px;
  }

  .page-container-gespraech {
    max-width: 650px;
  }

  /* H1 */
  .main-titel {
    letter-spacing: 1.3px;
  }

  /* H2 */
  .content.h2 h2 {
    letter-spacing: 2.5px;
    margin-left: 15px;
  }

  .content.h2-leistungen h2 {
    letter-spacing: 2.5px;
    margin-left: 15px;
  }

  .content.h2-gespraech h2 {
    letter-spacing: 2.8px;
  }

  /* H3 */
  .content.h3 h3,
  .content.h3-zusammenarbeit h3,
  .content.h3-leistungen h3 {
    line-height: 1.15;
    margin-left: 30px;
  }

  /* H4 */
  .content.h4 h4,
  .content.h4-leistungen h4 {
    line-height: 1.35;
    letter-spacing: 1.3px;
  }

  /* Fließtext */
  .content.p p,
  .content.p-gespraech p {
    letter-spacing: 1.3px;
  }
}

/* ==================================================
   BREAKPOINT: DESKTOP KLEINER (901px – 999px)
   ================================================== */

@media screen and (max-width: 999px) and (min-width: 901px) {

  /* Header */
  .navbar {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav-item {
    padding-left: 10px;
  }

  /* Container */
  .page-container,
  .page-container-zusammenarbeit,
  .page-container-leistungen,
  .page-container-gespraech {
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .page-container {
    max-width: 700px;
  }

  .page-container-zusammenarbeit {
    max-width: 660px;
  }

  .page-container-leistungen {
    max-width: 800px;
  }

  .page-container-gespraech {
    max-width: 630px;
  }

  /* H1 */
  .main-titel {
    line-height: 1.15;
    letter-spacing: 1px;
  }

  /* H2 */
  .content.h2 h2 {
    letter-spacing: 2px;
    margin-left: 5px;
  }

  .content.h2-leistungen h2 {
    letter-spacing: 2px;
    margin-left: 5px;
  }

  .content.h2-gespraech h2 {
    letter-spacing: 2px;
  }

  /* H3 */
  .content.h3 h3,
  .content.h3-zusammenarbeit h3,
  .content.h3-leistungen h3 {
    line-height: 1.2;
    margin-left: 15px;
  }

  /* H4 */
  .content.h4 h4,
  .content.h4-leistungen h4 {
    line-height: 1.3;
    letter-spacing: 1px;
  }

  /* Fließtext */
  .content.p p,
  .content.p-gespraech p {
    line-height: 1.45;
    letter-spacing: 1px;
  }

  /* Floating SVG */
  .floating-svg {
    width: 38px;
    height: 38px;
  }
}

/* ==================================================
   BREAKPOINT: MOBIL (bis 900px)
   Typografie skaliert hier bereits fluid per clamp() weiter;
   nur das Floating-SVG braucht eine eigene Anpassung.
   ================================================== */

@media screen and (max-width: 900px) {

  .floating-svg {
    width: 26px;
    height: 26px;
    display: block !important;
    opacity: 1 !important;
  }
}

/* ==================================================
   BREAKPOINT: MOBILE NAVIGATION (unter 990px)
   Schaltet die horizontale Navigation auf Hamburger-Menü um: Button
   sichtbar, Menü wird zum vollflächigen Overlay (per .active von der JS).
   Steht bewusst als letzter Block, damit er gegenüber den obigen
   Breakpoints (die sich mit diesem Bereich überlappen) zuverlässig gewinnt.
   ================================================== */

@media screen and (max-width: 989px) {

  .hamburger {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    transform: translateX(100%);
    transition: transform var(--transition-medium);
    z-index: 1000;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-item {
    padding: 0;
  }

  /* Telefon & Mail (Gespräch-Seite) untereinander statt nebeneinander */
  .link-gruppe {
    flex-direction: column;
    gap: calc(1.6em + 15px); /* normale Zeilenhöhe (1.6 × Schriftgröße) + 15px */
  }

  .link-gruppe a {
    margin-bottom: 0; /* hebt die globale a{margin-bottom:60px} auf, die hier zu viel Abstand erzeugte */
  }

  .link-gruppe a + a {
    margin-left: 0;
  }

  /* Footer-Navigation wird erst hier zur vertikalen Liste */
  .nav-footer {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}