/* ==========================================================
   STUDIO ORA – Stylesheet
   Farben und Schriften werden hier oben einmal festgelegt
   und überall verwendet. Änderungen also nur hier machen.
   ========================================================== */

:root {
  /* Farben */
  --hell:      #F7F7F5;   /* Hintergrund */
  --black-sea: #322E32;   /* Schwarz – nie ganz schwarz, für Text und Dunkel */
  --cherry:    #EB4A26;   /* Orange, Akzent */
  --blueberry: #797AD9;   /* Violett, Zweitfarbe – sparsam */
  --weiss:     #FFFFFF;   /* Weiss, z. B. Schrift auf dunklen Abschnitten */

  /* Hinweis: Auf Bildschirmen mit grossem Farbraum (z. B. MacBook, iPhone)
     wird das Orange weiter unten noch kräftiger dargestellt – siehe "@supports". */

  /* Mauszeiger als Ring (28 px, Linienstärke 2 px = stroke-width). Die Farbe steht hier direkt im Code
     (%23 bedeutet #) – bei einer Farbänderung also hier mit anpassen. */
  --zeiger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23EB4A26' stroke-width='2'/%3E%3C/svg%3E") 14 14, auto;
  --zeiger-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='12.5' fill='none' stroke='%23797AD9' stroke-width='2'/%3E%3C/svg%3E") 14 14, pointer;

  /* Schriften: überall Bahnschrift.
     Bahnschrift ist nur auf Windows vorinstalliert. Auf Mac, iPhone und
     Android springt der Ersatz ein: Barlow (Google Font, sehr ähnlich).
     Überschriften: Bahnschrift SemiBold Condensed (schmal, halbfett). */
  --font-headline: "Bahnschrift", "Barlow Condensed", "Arial Narrow", sans-serif;
  /* Fliesstext ebenfalls schmal (Bahnschrift Condensed), Ersatz Barlow Condensed */
  --font-text: "Bahnschrift", "Barlow Condensed", "Arial Narrow", sans-serif;

  /* SCHRIFTSTUFEN – überall nur diese Grössen verwenden:
     Header 1: 60 px bis ca. 104 px, SemiBold Condensed (grosse Titel: work.,
               who we are. … – wächst mit der Bildschirmbreite, wie im Entwurf)
     Lead:     18–20 px, Regular, normale Breite (Text direkt unter/neben
               diesen Titeln, grosszügiger Zeilenabstand, wie im Entwurf)
     Header 2: 32 px, SemiBold Condensed  (Zwischentitel)
     Body 1:   18 px, SemiBold Condensed  (Menü, Kundennamen, Projekt-Infos)
     Body 2:   16 px, Regular Condensed   (übrige Texte) */
  --header-1: clamp(3.75rem, 2rem + 5vw, 6.5rem);   /* 60 px … 104 px */
  --lead:     clamp(1.125rem, 1rem + 0.25vw, 1.25rem); /* 18 px … 20 px */
  --lead-zeile: 1.75;      /* Zeilenabstand der Texte unter den Titeln */
  /* Texte unter den Titeln in normaler Breite (Bahnschrift Regular),
     Ersatz Barlow Semi Condensed – so breit wie die normale Bahnschrift */
  --font-lead: "Bahnschrift", "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --header-2: 2rem;        /* 32 px */
  --body-1:   1.125rem;    /* 18 px */
  --body-2:   1rem;        /* 16 px */

  /* Seitenrand (wächst mit der Bildschirmbreite) */
  --rand: clamp(1.25rem, 4vw, 4rem);

  /* Fliesstext in den Abschnitten – überall gleich */
  --text-zeile: 1.7;                       /* Zeilenabstand */
  --text-breite: 44rem;                    /* maximale Breite einer Textspalte */
  --text-abstand: clamp(3rem, 7vw, 8rem);  /* Abstand Überschrift ↔ Text */

  /* Kleines Logo (secundary_logo_purple.svg) */
  --logo-abstand: 2.5rem;     /* 40 px Abstand zum linken und oberen Rand */
  --logo-lang: 9rem;          /* Länge des Logos (liegend gemessen) */
  --logo-verhaeltnis: 5.077;
  /* Abstand vom Seitenrand zum Inhalt – links und rechts gleich gross:
     Logo-Abstand + Logo-Breite + Seitenrand (Handy: nur Seitenrand) */
  --seite-rand: calc(var(--logo-abstand) + var(--logo-hoch) + var(--rand));  /* Breite ÷ Höhe der Datei (522.94 × 103) */
  --logo-hoch: calc(var(--logo-lang) / var(--logo-verhaeltnis));
}

/* Kräftiges Orange: derselbe Code #EB4A26, aber im grossen Farbraum
   "Display P3" (235/255, 74/255, 38/255). So leuchtet es auf modernen
   Bildschirmen voll. Ältere Bildschirme nehmen automatisch #EB4A26. */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --cherry: color(display-p3 0.9216 0.2902 0.149);
  }
}

/* ---------- Grundlagen ---------- */

/* Alle Überschriften in der schmalen Bahnschrift ("Condensed").
   Der Ersatz Barlow Condensed ist schon schmal und bleibt unverändert. */
body,
.headline,
.hero__text h1,
.menue,
.fusszeile__claim,
.say-hello text,
.wb-projekt__text h3 {
  font-stretch: condensed;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--hell);
  color: var(--black-sea);
  font-family: var(--font-text);
  font-size: var(--body-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Oranger Kreis als Mauszeiger überall, violett über Links */
* {
  cursor: var(--zeiger);
}

a,
a * {
  cursor: var(--zeiger-link);
}

/* Markierter Text in Blueberry Pie – ein kleines, sparsames Detail */
::selection {
  background: var(--blueberry);
  color: var(--hell);
}

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

/* ---------- Startseite: Aufbau ---------- */

/* Zwei Spalten: grosses Logo | Text.
   Links wird so weit eingerückt, dass das fixierte kleine Logo
   nie etwas überdeckt: Logo-Abstand + Logo-Breite + Seitenrand. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* Text beginnt bei rund 55 % der Breite */
  column-gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  --hero-links: calc(var(--logo-abstand) + var(--logo-hoch) + var(--rand));
  padding: var(--rand);
  padding-left: var(--hero-links);
  padding-right: var(--seite-rand);

  /* bleibt oben stehen, während der nächste Abschnitt darüberfährt */
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---------- Milchglas über dem ganzen ersten Abschnitt ---------- */

/* Milchglas als Zeichenfläche über dem ganzen Abschnitt. script.js malt
   darauf das weichgezeichnete Logo; wo die Maus darüberfährt, wird das
   Glas weggewischt und das scharfe Logo darunter bleibt sichtbar. */
/* Das Glas geht nahtlos bis an den Rand – keine sichtbare Kante. */
.hero__glas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;          /* die Maus "sieht" durch */
}

/* Der Text liegt über dem Milchglas und bleibt scharf */
.hero__text {
  position: relative;
  z-index: 2;
}

/* ---------- Weitere Abschnitte (schieben sich über die Startseite) ---------- */

/* Jeder Abschnitt bleibt stehen, sobald sein unteres Ende unten am
   Bildschirm ankommt – dann fährt der nächste darüber. Den Wert für
   "top" berechnet script.js, weil die Abschnitte unterschiedlich hoch sind.
   Die Reihenfolge der Ebenen (wer über wem liegt) steht bei den
   einzelnen Abschnitten (z-index). */
.abschnitt {
  position: sticky;
  top: var(--stick-top, 0px);
  z-index: 2;                    /* liegt über der Startseite */
  min-height: 100vh;
  min-height: 100svh;
  background: var(--hell);       /* deckend, damit die Startseite verschwindet */
  border-top: 1px solid rgba(50, 46, 50, 0.15);   /* feine Kante in unserem Schwarz */
  padding: var(--rand);
  padding-top: clamp(6rem, 14vw, 13rem);
  padding-left: var(--seite-rand);
  padding-right: var(--seite-rand);
}

/* ---------- Abschnitt "work." ---------- */

#work {
  /* Grundbreite der Bilder. Jedes Bild hat im HTML zusätzlich einen
     eigenen Faktor (--groesse, z. B. 1.2 = 20 % breiter) und ein
     eigenes Format (--format, z. B. 4 / 5 = Hochformat). */
  --bild-basis: clamp(14rem, 19.5vw, 20rem);
  --aktiv-faktor: 1.25;          /* so viel grösser wird das aktive Bild */
  --spalten-abstand: clamp(1.25rem, 2vw, 2rem);

  background: #FFFFFF;           /* ganz weiss */
  border-top: none;

  /* drei Spalten: Text | Bilder | Platz für Bildtext */
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--bild-basis) minmax(0, 1fr);
  column-gap: var(--spalten-abstand);
  align-items: start;
  padding-bottom: clamp(5rem, 9vw, 8rem);   /* Abstand unter dem letzten Bild */
}

/* ---------- Abschnitt "who we are." (über uns) ---------- */

/* Gemeinsames Raster für "who we are." und "contact.":
   Überschrift links, Text rechts – der Text beginnt überall
   an exakt derselben Stelle. */
#about,
#kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--text-abstand);
  align-items: start;
  align-content: start;
}

#about {
  /* schiebt sich über work., bleibt danach aber nicht stehen –
     Kunden und Fusszeile folgen ganz normal darunter */
  position: relative;
  top: auto;
  z-index: 4;                    /* liegt über work. (Variante B) */
  padding-bottom: clamp(6rem, 12vw, 10rem);
  background: var(--black-sea);  /* dunkler Abschnitt */
  color: var(--weiss);
  border-top: none;              /* die Farbe ist Kante genug */
}

#about .headline {
  margin: 0;
  white-space: nowrap;           /* "who we are." immer auf einer Zeile */
}

/* ---------- Abschnitt "work." – Variante B (editorial, zum Vergleich) ---------- */

#work-b {
  z-index: 3;                    /* liegt über work. (Variante A) */
  background: var(--hell);
  border-top: none;
  min-height: 0;
  padding-bottom: clamp(6rem, 12vw, 10rem);
}

/* Kopf: Überschrift + Intro links */
.wb-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--text-abstand);
  align-items: start;
  margin-bottom: clamp(6rem, 12vw, 11rem);
}

/* Projekte im Zickzack */
.wb-liste {
  display: flex;
  flex-direction: column;
  gap: clamp(6rem, 11vw, 10rem);
}

.wb-projekt {
  position: relative;            /* Bezugspunkt für die orange Linie */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalte, 1.5rem);
  align-items: center;
}

.wb-projekt__bild img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 78vh;              /* Hochformate nie höher als der Bildschirm */
}

/* Parallax: Der Rahmen schneidet das Bild zu, das Bild darin ist leicht
   vergrössert und wird beim Scrollen verschoben (script.js setzt --py). */
.wb-rahmen {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.wb-rahmen img {
  transform: translateY(var(--py, 0%)) scale(1.18);   /* Vergrösserung muss grösser sein als die Verschiebung */
  will-change: transform;
}

/* Mehrschichtiger Parallax: die ganze Bild-Ebene wird verschoben (script.js) */
.wb-projekt__bild[data-tempo] {
  will-change: transform;
}

/* Wer "Bewegung reduzieren" eingestellt hat, sieht die Bilder ruhig */
@media (prefers-reduced-motion: reduce) {
  .wb-rahmen img,
  .wb-projekt__bild[data-tempo] {
    transform: none !important;
  }
}

/* Bilder rücken immer an die Textseite heran, damit die orange Linie ins Bild läuft */
.wb-projekt__bild {
  display: flex;
}

.wb-projekt--links .wb-projekt__bild {
  justify-content: flex-end;
}

/* Bild links (gross), Text rechts */
.wb-projekt--links .wb-projekt__bild { grid-column: 1 / span 6; }
.wb-projekt--links .wb-projekt__text { grid-column: 8 / span 4; }

/* Bild rechts (etwas kleiner, versetzt), Text links und tiefer */
.wb-projekt--rechts .wb-projekt__bild { grid-column: 7 / span 5; grid-row: 1; }
.wb-projekt--rechts .wb-projekt__text {
  grid-column: 2 / span 4;
  grid-row: 1;
  align-self: end;
  margin-bottom: clamp(4rem, 9vw, 9rem);   /* etwas höher als die Bild-Unterkante */
}

.wb-projekt__text {
  position: relative;
  max-width: 26rem;              /* etwas breiter, damit die grössere Schrift Platz hat */
  font-size: var(--body-2);
  line-height: var(--text-zeile);
}

/* orange Linie, die vom Bild zum Text läuft */
.wb-projekt__text::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  width: clamp(4rem, 9vw, 9rem);
  height: 2px;
  background: var(--cherry);
}

.wb-projekt--links .wb-projekt__text::before {
  right: calc(100% + 1rem);       /* links vom Text, über das Bild hinein */
}

.wb-projekt--rechts .wb-projekt__text::before {
  left: calc(100% + 1rem);        /* rechts vom Text, Richtung Bild */
}

/* Desktop: Die Linie hängt direkt am Titel – so sitzt sie immer genau auf
   seiner Höhe. script.js berechnet nur, wo sie beginnt und wie lang sie ist
   (vom Titel bis leicht ins Bild: --linie-links, --linie-breite).
   Auf dem Handy bleibt die einfache kurze Linie über dem Text. */
.wb-projekt.linie-berechnet .wb-projekt__text::before {
  display: none;
}

.wb-projekt.linie-berechnet .wb-projekt__text h3 {
  position: relative;
  z-index: 1;                     /* Linie liegt über dem Bild */
}

.wb-projekt.linie-berechnet .wb-projekt__text h3::after {
  content: "";
  position: absolute;
  top: calc(0.874em - 2px);       /* unten am Titel: liegt auf der Grundlinie der Buchstaben */
  left: var(--linie-links);
  width: var(--linie-breite);
  height: 2px;
  background: var(--cherry);
  pointer-events: none;
}

.wb-projekt__text h3 {
  margin: 0 0 0.75rem;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--header-2);
  line-height: 1;
  text-transform: lowercase;     /* Titel kleingeschrieben, wie alle Headlines */
}

/* Kunde – Leistung: normale Schreibweise, gleiche Grösse wie der Text, fett */
.wb-projekt__meta {
  margin: 0 0 1rem;
  font-size: var(--body-1);
  font-weight: 600;
}

.wb-projekt__text p {
  margin: 0 0 1rem;
}

.wb-projekt__text a {
  color: inherit;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.wb-projekt__text a:hover {
  color: var(--blueberry);
}

/* Link "Alle Projekte" direkt unter dem Einleitungstext von "work.":
   fett wie die Leistungen, ohne Linie */
.wb-alle {
  grid-column: 1 / -1;            /* über beide Spalten des Kopfes */
  margin: 1rem 0 0;               /* nah am Einleitungstext */
}

.wb-alle a {
  font-size: var(--body-1);
  font-weight: 600;
  line-height: 1.7;
  color: var(--black-sea);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wb-alle a:hover {
  color: var(--blueberry);
}

/* Unterseiten mit weissem Grund (z. B. work.html) */
.seite-weiss {
  background: var(--weiss);
}

/* ---------- Kunden (schmaler Abschnitt vor der Fusszeile) ---------- */

#kunden {
  /* schliesst normal an who we are. an (schiebt sich nicht darüber) */
  position: relative;
  top: auto;
  z-index: 5;
  min-height: 0;
  padding-top: clamp(5rem, 9vw, 8rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
  background: var(--weiss);
  border-top: none;
}

.kunden__karte .headline {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

/* Text unter dem Titel – wie die anderen Texte unter den Titeln (Lead) */
.kunden__text {
  max-width: var(--text-breite);   /* breit, damit der Text über wenige Zeilen läuft */
  margin: 0;
  font-family: var(--font-lead);
  font-stretch: normal;
  font-size: var(--lead);
  font-weight: 400;
  line-height: var(--lead-zeile);
}

.kunden__karte .kunden__liste {
  margin-top: clamp(4rem, 8vw, 6.5rem);
}

.kunden__liste {
  grid-column: 1 / -1;
  margin-top: clamp(4rem, 9vw, 8rem);
}

/* Titel "kunden." im gleichen Stil wie "work." (Header 1, linksbündig) */

/* Kundennamen locker in Reihen, linksbündig unter dem Titel
   (später durch Logos ersetzen) */
.kunden__liste {
  --logo-skala: clamp(0.8, 0.55 + 0.03vw, 1);   /* Logos auf kleinen Bildschirmen etwas kleiner */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* drei pro Reihe (9 Logos = 3 volle Reihen) */
  justify-items: start;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kunden__liste li {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

/* Logos (bereits in #322E32 eingefärbt). Höhe pro Logo im HTML (--h),
   damit alle optisch gleich gross wirken. */
.kunden__liste img {
  display: block;
  height: calc(var(--h, 2) * 1.3rem);   /* 1.3 = Logos etwas grösser */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- Abschnitt "contact." ---------- */

/* Aufbau nach Deboras Vorlage: oben der Titel, darunter links der
   Einleitungstext, rechts die Angaben in zwei Spalten. */
#kontakt {
  grid-template-areas:
    "titel  titel"
    "intro  angaben";
  grid-template-rows: auto auto;
  z-index: 5;
  background: var(--weiss);
  border-top: none;              /* eigene Seite: keine Kante oben */
  min-height: 0;                 /* nur so hoch wie der Inhalt */
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

#kontakt .headline {
  grid-area: titel;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
}

/* Einleitung: Lead-Schrift wie alle Texte unter den Titeln */
.kontakt__intro {
  grid-area: intro;
  max-width: 26rem;
  margin: 0;
  text-wrap: pretty;
}

/* Angaben in zwei Spalten */
.kontakt__angaben {
  grid-area: angaben;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding-top: 0.35em;           /* erste Zeile auf Höhe der Einleitung */
}

/* Bezeichnungen wie "KUNDE / LEISTUNG" bei den Projekten */
.kontakt__angaben dt {
  margin-bottom: 0.7rem;
  font-size: var(--body-2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.kontakt__angaben dd {
  margin: 0;
  font-size: var(--body-2);      /* Body 2 – wie die Angaben unter KUNDE / LEISTUNG */
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#kontakt a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

#kontakt a:hover {
  color: var(--blueberry);
}

/* ---------- Fusszeile ---------- */

.fusszeile {
  position: relative;
  z-index: 6;
  /* weiss, schmal – oben eine feine orange Linie (bei .fusszeile__oben) */
  background: var(--weiss);
  color: var(--black-sea);
  padding: 0 var(--seite-rand) 1.25rem;
}

/* Claim links, "say hello" rechts */
.fusszeile__oben {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem 3rem;
  padding-block: clamp(2.25rem, 3.5vw, 3.25rem);
  position: relative;
}

/* feine orange Linie oben, so breit wie der Inhalt – wächst beim Erscheinen
   von links nach rechts auf (wie die Pfeile; Klasse "ist-da" setzt script.js) */
.fusszeile__oben::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cherry);
  clip-path: inset(0 100% 0 0);
}

.fusszeile.ist-da .fusszeile__oben::before {
  animation: pfeil-wachsen-rechts 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
  .fusszeile__oben::before {
    clip-path: none !important;
    animation: none !important;
  }
}

.fusszeile__claim {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--header-2);
  line-height: 1.2;
}

.fusszeile__akzent {
  color: var(--cherry);
}

/* "say hello"-Grafik */
.say-hello {
  display: block;
  width: clamp(9rem, 13vw, 13rem);      /* Grösse der "say hello"-Grafik */
}

.say-hello svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.say-hello text {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 100px;
  fill: var(--black-sea);
}

.say-hello__form {
  fill: var(--cherry);
  transition: fill 0.3s ease;
}

/* beim Darüberfahren werden die Anführungszeichen violett */
.say-hello:hover .say-hello__form {
  fill: var(--blueberry);
}

/* kräftige Linie, darunter Copyright, AGB, Datenschutz und Social Media */
.fusszeile__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 0;
  font-size: var(--body-2);
}

.fusszeile__unten p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0;
}

.fusszeile a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fusszeile__unten a:hover {
  color: var(--blueberry);
}

/* Social Media als schlichte Liniensymbole (#322E32, beim Darüberfahren violett) */
.fusszeile__social {
  align-items: center;
}

.social {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.social svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.social .social__punkt {
  fill: currentColor;
  stroke: none;
}

/* Mittelgrosse Bildschirme: zu wenig Platz nebeneinander → untereinander */
@media (max-width: 1100px) {
  #about,
  #kontakt {
    display: block;
  }

  #about .headline,
  #kontakt .headline {
    margin-bottom: 2.5rem;
  }

  .about__text {
    padding-top: 0;
  }

  /* contact.: Angaben unter der Einleitung */
  .kontakt__angaben {
    margin-top: 3rem;
  }
}

/* ---------- Unterseite Impressum ---------- */

#impressum {
  background: var(--weiss);
  border-top: none;
  min-height: 0;
  padding-bottom: clamp(5rem, 9vw, 8rem);
}

/* Aufbau wie contact. und work.: Titel oben, Angaben darunter */
#impressum .headline {
  margin: 0 0 clamp(3.5rem, 7vw, 6rem);   /* mehr Luft unter dem Titel */
}

.impressum__text {
  max-width: 56rem;
}

/* vier Blöcke in zwei Spalten (Handy: untereinander) */
.impressum__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(2rem, 5vw, 4.5rem);
  margin: 0;
}

/* Bezeichnungen wie "KUNDE / LEISTUNG" bei den Projekten */
.impressum__liste dt {
  margin-bottom: 0.7rem;
  font-size: var(--body-2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Angaben in der Schrift der Texte unter den Titeln (Lead) */
.impressum__liste dd {
  margin: 0;
  font-family: var(--font-lead);
  font-stretch: normal;
  font-size: var(--lead);
  font-weight: 400;
  line-height: var(--lead-zeile);
}

.impressum__liste a {
  color: inherit;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.impressum__liste a:hover {
  color: var(--blueberry);
}

.impressum__copyright {
  margin: clamp(3rem, 5vw, 4rem) 0 0;
  font-size: var(--body-2);
}

@media (max-width: 760px) {
  .impressum__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}


.about__text {
  max-width: var(--text-breite);
  padding-top: 0.4em;            /* erste Zeile auf Höhe der Überschrift */
}

.about__text p {
  margin: 0 0 1.75em;            /* eine Leerzeile zwischen den Absätzen */
  line-height: var(--text-zeile);
}

.about__text p:last-child {
  margin-bottom: 0;
}

/* Überschrift und Text: bleiben stehen, sobald der Abschnitt oben ankommt */
.work__text {
  position: sticky;
  top: clamp(6rem, 14vw, 13rem); /* gleich wie der Abstand oben im Abschnitt */
  padding-right: var(--spalten-abstand);
  /* Spalte reicht bis zum unteren Bildschirmrand, damit die Kategorien
     unten stehen (nicht direkt unter dem Text) */
  display: flex;
  flex-direction: column;
  height: calc(100vh - clamp(6rem, 14vw, 13rem) - var(--logo-abstand));
  height: calc(100svh - clamp(6rem, 14vw, 13rem) - var(--logo-abstand));
}

.work__text .work-filter {
  margin-top: auto;              /* nach unten schieben */
  padding-top: 2rem;
}

/* Bilderspalte: beginnt in der mittleren Spalte, Bildtext ragt nach rechts */
.work__liste {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 2rem);   /* Abstand zwischen den Bildern */
}

/* Ein Projekt: Bild links, Text direkt daneben */
.projekt {
  display: flex;
  align-items: center;
  gap: var(--spalten-abstand);
}

.projekt__bild {
  flex-shrink: 0;
  width: calc(var(--bild-basis) * var(--groesse, 1));
  aspect-ratio: var(--format, 4 / 5);
  background: #DDDAD5;           /* Platzhalter-Grau */
  transition: width 0.5s ease;
}

.projekt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projekt__info {
  max-width: 19rem;
  font-size: var(--body-2);
  line-height: 1.45;
  opacity: 0;                    /* unsichtbar, bis das Bild aktiv ist */
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.projekt__info h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--header-2);
  line-height: 1.2;
  text-transform: lowercase;     /* Titel immer kleingeschrieben */
}

.projekt__info p {
  margin: 0 0 0.9rem;
}

/* Kunde / Leistung: kleine Labels, Angaben nebeneinander */
.projekt__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0 0 1.4rem;
}

.projekt__fakten dt {
  margin-bottom: 0.45rem;
  font-size: var(--body-2);
  font-weight: 600;             /* Kunde / Leistung fett */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.projekt__fakten dd {
  margin: 0;
}

.projekt__info a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.projekt__info a:hover {
  color: var(--blueberry);
}

/* Aktives Bild (in der Bildschirmmitte): grösser, Text sichtbar */
.projekt.ist-aktiv .projekt__bild {
  width: calc(var(--bild-basis) * var(--groesse, 1) * var(--aktiv-faktor));
}

.projekt.ist-aktiv .projekt__info {
  opacity: 1;
  transform: none;
}

/* Grosse Abschnitts-Überschrift, z. B. "work." */
.headline {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--header-1);
  line-height: 0.9;
  text-transform: lowercase;
}

/* Der orange Punkt am Ende einer Überschrift – als Quadrat.
   Im HTML bleibt ein echter Punkt stehen (für Screenreader und Google),
   er wird nur unsichtbar gemacht und durch das orange Quadrat ersetzt. */
.dot {
  display: inline-block;
  width: 0.15em;                 /* Grösse des Quadrats im Verhältnis zur Schrift */
  height: 0.15em;
  margin-left: 0.05em;
  background: var(--cherry);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;      /* sitzt auf der Grundlinie wie ein Punkt */
}

/* Einleitungstext unter einer Abschnitts-Überschrift */
.intro {
  margin: 0;
  max-width: 28rem;              /* schmaler, damit der Text mindestens drei Zeilen hat */
  line-height: var(--text-zeile);
  text-wrap: pretty;             /* kein einzelnes Wort allein auf der letzten Zeile */
}

/* ---------- Kleines Logo, vertikal und fixiert ---------- */

/* Die Logo-Datei wird als "Schablone" benutzt und mit unserem Schwarz
   gefüllt. So bleibt es exakt das Original-Logo, nur in anderer Farbe. */
.logo-small {
  position: fixed;              /* bleibt beim Scrollen stehen */
  top: var(--logo-abstand);
  left: var(--logo-abstand);
  z-index: 10;
  display: block;
  width: var(--logo-hoch);      /* gedreht: schmal ... */
  height: var(--logo-lang);     /* ... und hoch */
}

.logo-small span {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--logo-lang);
  height: var(--logo-hoch);
  background-color: var(--black-sea);
  -webkit-mask: url("img/logo/secundary_logo_purple.svg") center / contain no-repeat;
          mask: url("img/logo/secundary_logo_purple.svg") center / contain no-repeat;
  /* um 90° gegen den Uhrzeigersinn gedreht, liest sich von unten nach oben */
  transform-origin: top left;
  transform: translateY(var(--logo-lang)) rotate(-90deg);
  transition: background-color 0.3s ease;
}

/* Über dunklen Abschnitten wird das kleine Logo weiss (gesteuert von script.js) */
.logo-small.ist-hell span {
  background-color: var(--weiss);
}

/* ---------- Menü oben rechts ---------- */

.menue {
  position: fixed;               /* bleibt beim Scrollen stehen, wie das Logo */
  top: var(--logo-abstand);
  right: var(--seite-rand);
  z-index: 10;
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--body-1);
  line-height: 1;
  text-transform: lowercase;
}

.menue a {
  color: var(--black-sea);
  text-decoration: none;
  transition: color 0.3s ease;
}

.menue a:hover {
  color: var(--blueberry);
}

/* Aktuelle Seite: oranges Quadrat dahinter, z. B. "work." */
.menue a[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  background: var(--cherry);
  vertical-align: baseline;
}

/* Über dunklen Abschnitten wird das Menü weiss (gesteuert von script.js) */
.menue.ist-hell a {
  color: var(--weiss);
}

.menue.ist-hell a:hover {
  color: var(--blueberry);
}

/* ---------- Grosses Logo ---------- */

/* verhindert, dass das Logo-Bild das Raster auf dem Handy aufsprengt */
.hero__logo,
.hero__text {
  min-width: 0;
}

.hero__logo {
  position: relative;
  /* Proportionen wie im Entwurf: rund 36 % der Bildschirmbreite breit,
     linke Kante bei rund 13 % der Breite, unten mit etwas Abstand */
  width: 36vw;
  max-width: 100%;
  align-self: end;
  margin-left: max(0px, calc(12.9vw - var(--hero-links)));
  margin-bottom: 5vh;
}

.hero__logo img {
  width: 100%;
  height: auto;
}

/* Darüber liegt dieselbe Logo-Datei als Schablone, gefüllt mit exakt
   unserem Orange. (Falls der Browser das nicht kann, z. B. beim Öffnen
   per Doppelklick, sieht man einfach das Logo-Bild darunter.) */
.hero__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--cherry);
  -webkit-mask: url("img/logo/primary_logo_orange.svg") center / contain no-repeat;
          mask: url("img/logo/primary_logo_orange.svg") center / contain no-repeat;
}

/* ---------- Textspalte ---------- */

.hero__text {
  max-width: 40.5rem;                       /* breit genug, dass die Stichworte auf eine Zeile passen */
  align-self: start;                        /* oben rechts */
  margin-top: clamp(3rem, 9vh, 7rem);
}

.hero__text h1 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);   /* mehr Luft zum Text, wie im Entwurf */
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 3.75rem;            /* 60 px – kleinste Header-1-Grösse, passt in die Startseite */
  line-height: 1;
  text-transform: lowercase;
  letter-spacing: 0.005em;
}

.hero__text p {
  margin: 0 0 1.5rem;
}

/* Haupttext oben: fett, etwas kleiner, ein Satz pro Zeile (wie im Entwurf) */
.hero__lead {
  font-family: var(--font-lead);
  font-stretch: normal;
  font-weight: 400;
  font-size: var(--lead);
  line-height: var(--lead-zeile);
}

/* Leistungen als Stichworte: gleiche Schrift wie der Haupttext darüber
   (Grösse, fett, Schreibweise), ohne Linie – abgehoben durch Abstand
   und die orangen Punkte */
.services {
  margin-top: 2rem;
  font-family: var(--font-lead);
  font-stretch: normal;
  font-size: var(--lead);
  font-weight: 600;              /* Stichworte fett */
  white-space: nowrap;           /* alle Stichworte auf einer Zeile */
  line-height: var(--lead-zeile);
}

.services .sep {
  color: var(--cherry);
  margin: 0 0.15em;
}

/* ==========================================================
   HANDY UND SCHMALE TABLETS (bis 760 px Breite)
   Alles steht untereinander. Das kleine Logo liegt waagrecht
   oben und scrollt normal mit.
   ========================================================== */

@media (max-width: 760px) {
  /* Handy: links und rechts nur der normale Seitenrand */
  :root {
    --seite-rand: var(--rand);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.5rem, 10vw, 4rem);
    align-items: start;
    align-content: start;
    --hero-links: var(--rand);
    padding-left: var(--hero-links);
    padding-top: clamp(2.5rem, 10vw, 4rem);   /* Abstand unter dem kleinen Logo */
    position: relative;         /* auf dem Handy normal scrollen, nicht stehen bleiben */
  }

  /* Handy: Logo oben, Text darunter (Milchglas liegt über allem) */
  .hero__logo {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
  }

  .hero__text {
    max-width: none;
    margin-top: 0;
  }

  .abschnitt,
  .fusszeile {
    padding-left: var(--rand);
  }

  /* Menü auf dem Handy: eigene Zeile unter dem Logo, scrollt mit
     (neben dem Logo ist für vier Einträge zu wenig Platz) */
  .menue {
    position: static;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.25rem var(--rand) 0;
    font-size: var(--body-1);
  }

  /* Fusszeile auf dem Handy: Claim kleiner über drei Zeilen links,
     "say hello" rechts daneben */
  .fusszeile__oben {
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem;
  }

  .fusszeile__claim {
    font-size: 1.5rem;           /* 24 px */
    max-width: 6.8em;            /* bricht in drei Zeilen um */
  }

  .fusszeile__claim br {
    display: none;
  }

  .say-hello {
    flex: none;
    width: 7.5rem;
  }

  /* unten: Rechtliches links (kleiner), Instagram/LinkedIn rechts unter "say hello" */
  .fusszeile__unten {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 1.25rem;
    font-size: 0.8125rem;        /* 13 px */
  }

  .fusszeile__rechtliches {
    gap: 0.3rem 1rem;
  }

  .fusszeile__social {
    flex: none;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  /* work. auf dem Handy: Text oben, Bilder darunter, Bildtext immer sichtbar */
  /* auf dem Handy scrollen alle Abschnitte normal */
  .abschnitt {
    position: relative;
    top: auto;
  }

  #work {
    display: block;
    padding-bottom: 4rem;
  }

  /* work. Variante B auf dem Handy: Bild, darunter Text */
  .wb-kopf {
    display: block;
    margin-bottom: 4rem;
  }

  .wb-alle {
    margin-top: 1rem;
  }

  .wb-liste {
    gap: 4rem;
  }

  .wb-projekt--links .wb-projekt__bild,
  .wb-projekt--rechts .wb-projekt__bild {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .wb-projekt--rechts .wb-projekt__bild {
    grid-column: 3 / -1;          /* leicht versetzt, wie im Zickzack */
  }

  .wb-projekt--links .wb-projekt__text,
  .wb-projekt--rechts .wb-projekt__text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 2.5rem;
    margin-bottom: 0;
  }

  .wb-projekt--links .wb-projekt__text::before,
  .wb-projekt--rechts .wb-projekt__text::before {
    left: 0;
    right: auto;
    top: -1.25rem;
    width: 3rem;
  }

  /* contact. auf dem Handy: alles untereinander, nur so hoch wie der Inhalt */
  #kontakt {
    display: block;
    min-height: 0;
  }

  /* Handy: Kunden zwei pro Reihe */
  .kunden__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  /* Handy: Logos etwas kleiner */
  .kunden__liste img {
    height: calc(var(--h, 2) * 1.05rem);
  }

  /* Handy: Kontakt-Angaben untereinander */
  .kontakt__angaben {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Handy: feste Zeilenumbrüche aus, der Text bricht frei um */
  br.umbruch-gross {
    display: none;
  }

  /* who we are. auf dem Handy: Überschrift oben, Text darunter */
  #about {
    display: block;
  }

  #about .headline {
    margin-bottom: 2rem;
  }

  .work__text {
    position: static;
    padding-right: 0;
    margin-bottom: 3rem;
    height: auto;                /* Handy: Kategorien direkt unter dem Text */
  }

  .work__liste {
    gap: 2.5rem;
  }

  .projekt {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .projekt__bild,
  .projekt.ist-aktiv .projekt__bild {
    width: min(100%, calc(80% * var(--groesse, 1)));
  }

  .projekt__info {
    opacity: 1;
    transform: none;
  }

  .logo-small {
    position: relative;         /* nicht mehr fixiert, scrollt normal mit */
    top: auto;
    left: auto;
    margin: var(--rand) var(--rand) 0;   /* gleicher Rand wie der Inhalt */
    width: var(--logo-lang);    /* waagrecht: breit ... */
    height: var(--logo-hoch);   /* ... und flach */
  }

  .logo-small span {
    transform: none;            /* nicht gedreht */
  }
}

/* ==========================================================
   HAUPTTEXTE UNTER DEN TITELN: fett und "erscheinen beim Scrollen"
   Die Wörter sind zuerst blass und werden beim Scrollen nacheinander
   voll sichtbar (script.js). Markiert im HTML mit data-erscheinen.
   ========================================================== */

[data-erscheinen],
[data-erscheinen] p {
  font-family: var(--font-lead);
  font-stretch: normal;
  font-size: var(--lead);
  font-weight: 400;
  line-height: var(--lead-zeile);
}

[data-erscheinen] .wort {
  opacity: var(--sichtbar, 1);
  transition: opacity 0.25s linear;
}

/* Bei "Bewegung reduzieren": alles sofort voll sichtbar */
@media (prefers-reduced-motion: reduce) {
  [data-erscheinen] .wort {
    opacity: 1 !important;
  }
}

/* ==========================================================
   LINK "PROJEKT ANSEHEN" (Startseite und work.html)
   Ohne Unterstreichung, dahinter der feine orange Pfeil wie in der
   Detailansicht. Text und Pfeil sind gemeinsam ein Link.
   ========================================================== */
a.projekt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a.projekt-link::after {
  content: "";
  flex: none;
  width: 4.5rem;
  height: 1rem;
  background: var(--cherry);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 16'%3E%3Cpath d='M0 8h70M63 2l7 6-7 6' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 16'%3E%3Cpath d='M0 8h70M63 2l7 6-7 6' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.12, 1);
}

a.projekt-link:hover {
  color: var(--blueberry);
}

a.projekt-link:hover::after {
  transform: translateX(2rem);   /* Pfeil gleitet deutlich nach rechts */
}

@media (prefers-reduced-motion: reduce) {
  a.projekt-link::after {
    transition: none;
  }
}

/* ==========================================================
   "COMING SOON" – oranger Kreis für Links ohne Ziel (script.js)
   ========================================================== */
.bald {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: clamp(18rem, 30vw, 26rem);
  aspect-ratio: 1.12;
  /* sehr weicher, unregelmässiger Farbnebel (nach Deboras Vorlagen):
     kräftiger Kern, der lange und sanft ins Weiss ausläuft */
  background:
    radial-gradient(closest-side at 46% 56%,
      var(--cherry) 0%,
      color-mix(in srgb, var(--cherry) 85%, transparent) 22%,
      color-mix(in srgb, var(--cherry) 45%, transparent) 55%,
      color-mix(in srgb, var(--cherry) 12%, transparent) 80%,
      transparent 100%),
    radial-gradient(closest-side at 60% 42%,
      color-mix(in srgb, var(--cherry) 55%, transparent) 0%,
      color-mix(in srgb, var(--cherry) 20%, transparent) 50%,
      transparent 95%);
  color: var(--weiss);
  font-family: var(--font-headline);
  font-stretch: condensed;
  font-weight: 600;
  font-size: var(--header-2);
  line-height: 0.95;
  text-align: center;
  text-transform: lowercase;
  /* Start: winziger Punkt an der Klickstelle (--start-x/-y setzt script.js) */
  transform: translate(var(--start-x, 0px), var(--start-y, 0px)) scale(0.03);
  opacity: 0;
  pointer-events: none;
}

.bald > span {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Aufgehen: eine einzige, durchgehend weiche Bewegung – der Punkt ist
   sofort an der Klickstelle sichtbar, wächst und gleitet zugleich
   Richtung Mitte. */
.bald.ist-offen {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  animation: bald-auf 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Schliessen: genau dieselbe Bewegung rückwärts (gleich fliessend) */
.bald.ist-zu {
  opacity: 1;
  animation: bald-auf 0.9s cubic-bezier(0.22, 1, 0.36, 1) reverse both;
}

@keyframes bald-auf {
  from {
    transform: translate(var(--start-x, 0px), var(--start-y, 0px)) scale(0.03);
  }
  to {
    transform: translate(0, 0) scale(1);
  }
}

/* Text blendet weich ein, wenn der Kreis fast offen ist,
   und beim Schliessen gleich zu Beginn wieder aus */
.bald.ist-offen > span {
  opacity: 1;
  transition-delay: 0.3s;
}

/* der Punkt am Ende ist hier weiss, weil der Kreis schon orange ist */
.bald .dot {
  background: var(--weiss);
}

@media (prefers-reduced-motion: reduce) {
  .bald,
  .bald > span {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   FILTER AUF work.html (unter dem Einleitungstext)
   Kategorien wie das Menü; die aktive mit orangem Quadrat.
   ========================================================== */
.work-filter {
  display: flex;
  flex-direction: column;        /* Begriffe untereinander */
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 2.25rem;
}

/* wie die Kategorien auf work2: normale Schrift, gross geschrieben,
   inaktive blass, die aktive mit kleinem orangem Quadrat */
.work-filter button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--black-sea);
  font-family: var(--font-text);
  font-stretch: condensed;
  font-weight: 400;
  font-size: var(--body-1);
  line-height: 1.35;
  opacity: 0.45;
  cursor: var(--zeiger-link);
  transition: opacity 0.25s ease, color 0.25s ease;
}

.work-filter button:hover {
  color: var(--blueberry);
  opacity: 1;
}

.work-filter button[aria-pressed="true"] {
  opacity: 1;
}

.work-filter button[aria-pressed="true"]::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.4em;
  background: var(--cherry);
}

.work-filter button:focus-visible {
  outline: 2px solid var(--blueberry);
  outline-offset: 3px;
}

/* ausgefilterte Projekte */
.projekt[hidden] {
  display: none;
}

/* Liste blendet beim Filtern kurz aus und wieder ein */
.work__liste {
  transition: opacity 0.35s ease;
}

.work__liste.ist-weg {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .work__liste {
    transition: none;
  }
}

/* Firmenname KOHLERSTRAUMANN: immer Grossbuchstaben, "STRAUMANN" fett
   (wie im Logo) – auch wenn der Text drumherum fett ist */
.ks {
  font-weight: 400;
  text-transform: uppercase;
}

.ks strong {
  font-weight: 600;
}

/* ==========================================================
   PFEILE WACHSEN BEIM ERSCHEINEN
   Die Linie zieht sich vom Anfang her auf, die Spitze kommt zuletzt –
   leicht verzögert. (Sichtbar-Erkennung: script.js, Klasse "ist-da")
   ========================================================== */
@keyframes pfeil-wachsen-rechts {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes pfeil-wachsen-links {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

a.projekt-link::after {
  clip-path: inset(0 100% 0 0);          /* zuerst unsichtbar */
}

a.projekt-link.ist-da::after {
  animation: pfeil-wachsen-rechts 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

/* work.html: der Text erscheint erst beim aktiven Projekt – dann wächst der Pfeil */
.projekt:not(.ist-aktiv) a.projekt-link.ist-da::after {
  animation: none;
  clip-path: inset(0 100% 0 0);
}

/* Pfeile in der Projektansicht (vorheriges / nächstes Projekt) */
.sl-blaettern__pfeil svg {
  clip-path: inset(0 100% 0 0);
}

.sl-detail.ist-offen:not(.ist-unterwegs) .sl-blaettern__nach svg {
  animation: pfeil-wachsen-rechts 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

.sl-detail.ist-offen:not(.ist-unterwegs) .sl-blaettern__vor svg {
  animation: pfeil-wachsen-links 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
  a.projekt-link::after,
  .sl-blaettern__pfeil svg {
    clip-path: none !important;
    animation: none !important;
  }
}

/* Startseite (work.): "Projekt ansehen" fett und ohne Pfeil – dafür wächst
   die orange Linie zwischen Bild und Titel auf (wie die Pfeile) */
a.projekt-link--ohne-pfeil {
  font-weight: 600;
}

a.projekt-link--ohne-pfeil::after {
  display: none;
}

/* Linie zuerst unsichtbar, wächst vom Titel her ins Bild hinein */
.wb-projekt.linie-berechnet .wb-projekt__text h3::after {
  clip-path: inset(0 100% 0 0);
}

.wb-projekt--links.linie-berechnet .wb-projekt__text h3::after {
  clip-path: inset(0 0 0 100%);
}

.wb-projekt--rechts.linie-berechnet.ist-da .wb-projekt__text h3::after {
  animation: pfeil-wachsen-rechts 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

.wb-projekt--links.linie-berechnet.ist-da .wb-projekt__text h3::after {
  animation: pfeil-wachsen-links 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
  .wb-projekt.linie-berechnet .wb-projekt__text h3::after {
    clip-path: none !important;
    animation: none !important;
  }
}

/* Startseite (work.): Bild und Titel sind Links zum Projekt */
.wb-bildlink {
  display: block;
  cursor: var(--zeiger-link);
}

.wb-projekt__text h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wb-projekt__text h3 a:hover {
  color: var(--blueberry);
}

/* Stichworte auf einer Zeile: auf mittleren Bildschirmen etwas kleiner,
   damit sie in die Spalte passen; auf dem Handy dürfen sie umbrechen */
@media (max-width: 1660px) {
  .services {
    font-size: min(var(--lead), 1.13vw);
  }
}

@media (max-width: 1100px) {
  .services {
    white-space: normal;
    font-size: var(--lead);
  }
}

/* Linie über der Fusszeile: ohne Effekt, einfach sichtbar (Wunsch Debora) */
.fusszeile__oben::before {
  clip-path: none !important;
  animation: none !important;
}

/* ==========================================================
   SPRACHWAHL "de / en" ganz rechts im Menü (sprache.js)
   gleiche Schrift wie das Menü; aktive Sprache dunkel, andere blass
   ========================================================== */
.sprachwahl {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  margin-left: clamp(0.25rem, 1vw, 0.75rem);
}

.sprachwahl button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: lowercase;
  opacity: 0.4;
  cursor: var(--zeiger-link);
  transition: opacity 0.25s ease, color 0.25s ease;
}

.sprachwahl button:hover {
  color: var(--blueberry);
  opacity: 1;
}

.sprachwahl button[aria-pressed="true"] {
  opacity: 1;
}

.sprachwahl > span {
  opacity: 0.4;
}

.sprachwahl button:focus-visible {
  outline: 2px solid var(--blueberry);
  outline-offset: 3px;
}

/* über dunklen Abschnitten weiss wie die Menüpunkte */
.menue.ist-hell .sprachwahl {
  color: var(--weiss);
}

/* ==========================================================
   HANDY-MENÜ: drei Striche, klappt als ganze Fläche auf
   Der Knopf wird von script.js eingesetzt (Klasse hat-knopf am Menü).
   ========================================================== */

.menue__knopf {
  display: none;                 /* Desktop: unsichtbar */
}

@media (max-width: 760px) {
  /* Kein Milchglas über dem Logo auf dem Handy */
  .hero__glas {
    display: none;
  }

  /* geschlossen: nur die drei Striche oben rechts, auf Höhe des Logos */
  .menue.hat-knopf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    margin: 0;
    pointer-events: none;        /* Logo darunter bleibt klickbar */
  }

  .menue.hat-knopf > a,
  .menue.hat-knopf > .sprachwahl {
    display: none;
  }

  .menue__knopf {
    position: absolute;
    top: var(--rand);
    right: var(--rand);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;                 /* gut mit dem Finger zu treffen */
    height: 44px;
    margin-top: calc((var(--logo-hoch) - 44px) / 2);   /* mittig zum Logo */
    margin-right: -8px;
    padding: 0 8px;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .menue__knopf span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--black-sea);
    transition: transform 0.35s ease, opacity 0.2s ease;
  }

  .menue__knopf:focus-visible {
    outline: 2px solid var(--blueberry);
    outline-offset: 2px;
  }

  /* offen: Menü als helle Fläche über der ganzen Seite */
  .menue.hat-knopf.ist-offen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.9rem;
    padding: 0 var(--rand);
    background: var(--hell);
    pointer-events: auto;
    animation: menue-auf 0.35s ease both;
  }

  .menue.hat-knopf.ist-offen > a {
    display: block;
    font-size: var(--header-1);
    line-height: 1;
    color: var(--black-sea);
  }

  .menue.hat-knopf.ist-offen > .sprachwahl {
    display: inline-flex;
    margin-top: 1.5rem;
    color: var(--black-sea);
  }

  /* drei Striche werden zum Kreuz */
  .menue.ist-offen .menue__knopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menue.ist-offen .menue__knopf span:nth-child(2) { opacity: 0; }
  .menue.ist-offen .menue__knopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Seite dahinter scrollt nicht, solange das Menü offen ist */
  html.menue-offen,
  html.menue-offen body {
    overflow: hidden;
  }

  /* Projekt-Detailansicht: Platz oben für die drei Striche */
  .sl-detail .menue--detail.hat-knopf {
    position: absolute;
    margin: 0;
  }
}

@keyframes menue-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .menue.hat-knopf.ist-offen { animation: none; }
  .menue__knopf span { transition: none; }
}

/* ==========================================================
   STARTSEITE HANDY: oranges Logo oben links, wird beim Scrollen
   kleiner und bleibt in der Ecke stehen (script.js, .mini-logo).
   Das kleine schwarze Logo gibt es hier nicht.
   ========================================================== */

.mini-logo,
.mini-balken {
  display: none;
}

@media (max-width: 760px) {
  /* kleines schwarzes Logo wird durch das orange ersetzt (alle Seiten) */
  .mit-mini-logo .logo-small {
    display: none;
  }

  .seite-start .hero {
    padding-top: calc(var(--rand) + 4.5rem);   /* mehr Luft zum oberen Rand */
    row-gap: 4.5rem;                           /* mehr Abstand Logo – Slogan */
  }

  /* Slogan auf dem Handy kleiner */
  .seite-start .hero__text h1 {
    font-size: 2.75rem;          /* 44 px */
  }

  .seite-start .hero__logo {
    width: 62%;                  /* kleiner als die volle Breite */
  }

  /* fixierte Kopie übernimmt, das Original hält nur den Platz frei */
  /* andere Seiten: Platz oben für Logo und Milchglas-Balken */
  .mit-mini-logo body:not(.seite-start) {
    padding-top: calc(var(--rand) * 2 + 72px / 1.4984);
  }

  /* Detailansicht (work): eigenes Menü weg, das fixierte liegt darüber */
  .mit-mini-logo .sl-detail .menue--detail {
    display: none;
  }

  .mit-mini-logo .seite-start .hero__logo {
    visibility: hidden;
  }

  .mit-mini-logo .mini-logo {
    position: fixed;
    top: 0;                      /* Lage setzt script.js (translate) */
    left: 0;
    z-index: 56;
    display: block;
    transform-origin: top left;
    will-change: transform;
  }

  .mini-logo span {
    position: absolute;
    inset: 0;
    background-color: var(--cherry);
    -webkit-mask: url("img/logo/primary_logo_orange.svg") center / contain no-repeat;
            mask: url("img/logo/primary_logo_orange.svg") center / contain no-repeat;
  }

  /* Milchglas-Balken hinter kleinem Logo und Menü-Strichen
     (blendet beim Verkleinern ein, script.js) */
  .mit-mini-logo .mini-balken {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    display: block;
    height: calc(var(--rand) * 2 + 72px / 1.4984 + 2.5rem);   /* + Platz für den weichen Auslauf */
    background: rgb(247 247 245 / 0.55);
    /* keine harte Kante unten: läuft weich ins Bild aus */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgb(0 0 0 / 0.6) 75%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgb(0 0 0 / 0.6) 75%, transparent 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    opacity: 0;
    pointer-events: none;
  }

  /* über dunklen Abschnitten (who we are.) dunkles Milchglas */
  body:has(.menue.ist-hell) .mini-balken {
    background: rgb(50 46 50 / 0.55);
  }

  /* drei Striche bleiben ebenfalls stehen, mittig zum kleinen Logo */
  .mit-mini-logo .menue.hat-knopf:not(.ist-offen) {
    position: fixed;
    z-index: 56;                 /* auch über der Projekt-Detailansicht */
  }

  .mit-mini-logo .menue__knopf {
    margin-top: calc((72px / 1.4984 - 44px) / 2);
  }

  /* über dunklen Abschnitten (who we are.) werden die Striche weiss */
  .menue.ist-hell .menue__knopf span {
    background: var(--weiss);
  }

  .menue.ist-offen .menue__knopf span {
    background: var(--black-sea);
  }
}