/* Hero der Startseite: der Sommervogel im Garten.
 *
 * Die Landschaft zeichnet scripts/draw-hero-garden.py direkt nach index.html.
 * Den Takt (Tageszeit, Flug des Sommervogels) gibt js/hero-garden.js vor;
 * Farben und Bewegungen stehen hier.
 *
 * Eine feste Tageszeit ansehen: ?sky=day, ?sky=sunset oder ?sky=night an die
 * Adresse hängen.
 *
 * Wird mit Versions-Query eingebunden (css/hero-garden.css?v=JJJJMMTT), weil
 * CSS ein Jahr lang immutable gecacht wird — bei jeder Änderung hochzählen.
 */

/* ---------- Himmelsfarbe ----------
   Die Farbe des Himmels (= Hintergrund des Heros) ist eine registrierte Farb-Variable,
   und der Übergang läuft über SIE, nicht über background-color. Grund: Chromium-Browser
   (Chrome, Brave, Edge) lassen einen background-color-Übergang auf der Grafikkarte
   laufen; bei der Übergabe am Ende fällt dort gelegentlich für ein einzelnes Bild der
   Hintergrund aus, und die fast weisse Seite dahinter blitzt durch (in der Nacht ein
   weisser Blitz). Eine Variable wechselt der Browser im normalen Zeichenweg, im selben
   Bild wie die Landschaft. Browser ohne @property: siehe .hg-no-prop. */
@property --hg-sky {
  syntax: "<color>";
  inherits: false;
  initial-value: #f8f9fc;
}

/* ---------- Aufbau: Text oben, Garten unten ----------
   Breite Bildschirme: Der Hero ist so hoch wie das Fenster, der Garten ist ganz zu
   sehen und der Text liegt vor dem ausgeblendeten Himmel. Damit Sonne und Mond nie
   hinter dem Text stehen, ziehen sie seitlich davon ihre Bahn (Sonne rechts, Mond links).
   Schmale Bildschirme: siehe unten. */
.hero.hero--garden {
  /* Höhe der Landschaft. Sie ist so gerechnet, dass die Berge UNTER dem Logoband beginnen
     und das Band mit rund 40px Luft frei im Himmel steht (vorher sass es auf den Bergen):
     Der Textblock endet etwa bei 0.29 × Fensterhöhe + 358px, die Bergspitzen in der Mitte
     liegen bei 64 % der Landschaftshöhe über dem unteren Rand. Wer am Textblock etwas
     ändert (Abstände, Schriftgrössen, Zeilenzahl), rechnet hier nach.
     02.11.2026 (Kevin: «alles klebt etwas am oberen Rand»): Landschaft rund 30px niedriger,
     Text rund 20px tiefer (--hg-top), netto bleiben dem Band ~10px mehr Himmel. */
  --hg-height: clamp(230px, calc(111vh - 628px), 510px);
  --hg-fly: calc(var(--hg-height) * 0.125); /* Grösse des Sommervogels: wächst mit der Landschaft */
  --hg-title: clamp(34px, min(5.2vw, 7vh), 60px); /* Schriftgrösse der Überschrift */
  /* Abstände im Textblock hängen an der Fensterhöhe: niedrige Fenster rücken zusammen. */
  --hg-top: clamp(108px, 13vh, 170px);    /* Abstand des Textes vom oberen Rand (02.11.2026: +~20px) */
  --hg-gap: clamp(16px, 2.7vh, 24px);     /* Abstand zwischen Lauftext und Knöpfen */
  /* Übergang zwischen den Tageszeiten: Hintergrund und Landschaft wechseln gemeinsam,
     gleich lang und mit derselben Kurve — sonst stünde die Landschaft kurz dunkel
     vor hellem Grund und der Grund holte dann ruckartig auf (wirkt wie ein Blitz). */
  --sky-fade: 6s;
  --sky-ease: cubic-bezier(0.45, 0, 0.55, 1);
  /* Der Text wechselt die Farbe, wenn der Himmel mittlere Helligkeit durchläuft
     (dort sind dunkle und helle Schrift gleich gut lesbar): kurz, aber weich. */
  --sky-flip: 3s;
  --sky-flip-time: 0.45s;
  /* Bahn von Sonne und Mond, in Einheiten der Zeichnung.
     Die Sonne geht rechts hinter der Schulter eines Bergs auf, zieht über das Tal und
     geht hinter dem linken Hang des grossen Schneebergs unter (Höhen: siehe hg-sun-y). */
  --sun-from: 2159px;
  --sun-to: 2539px;
  --sun-dawn: 345px;  /* Beginn Sonnenaufgang: noch ganz hinter dem Berg */
  --sun-up: 240px;    /* Beginn Tag: ganz über dem Berg */
  --sun-dusk: 215px;  /* Beginn Dämmerung: sie berührt den Berghang */
  --sun-gone: 268px;  /* Beginn Nacht: ganz hinter dem Berg */
  --moon-from: 500px;
  --moon-to: 1300px;
  --sky-top: 205px;
  --sun-rest-x: 2290px;
  --sun-rest-y: 170px;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: calc(var(--hg-height) * 0.6);
  --hg-sky: var(--bg);
  background: none;
  background-color: var(--hg-sky);
  transition: --hg-sky var(--sky-fade) var(--sky-ease);
}

/* Ältere Browser ohne @property (setzt hero-garden.js): dort geht es nur über background-color. */
.hero.hero--garden.hg-no-prop {
  transition: background-color var(--sky-fade) var(--sky-ease);
}

.hero--garden .hero-content {
  max-width: 1040px;
  padding: var(--hg-top) 24px 0;
}

.hero--garden .hero-badge {
  margin-bottom: clamp(12px, 2vh, 18px);
  padding-left: 9px;
}

/* Schweizerkreuz am Anfang des Abzeichens: die Flagge (Quadrat), nicht das Wappen (Schild) */
.hero-badge-flag {
  flex: none;
  width: 17px;
  height: 17px;
}

.hero--garden .hero-title {
  font-size: var(--hg-title);
  margin-bottom: clamp(10px, 1.8vh, 16px);
}

.hero--garden .hero-description {
  max-width: 660px;
  margin-bottom: var(--hg-gap);
  line-height: 1.6;
  text-wrap: balance;
}

/* Breite Bildschirme: Die Schrift des Lauftexts hängt wie die Abstände an der Fensterhöhe. */
@media (min-width: 901px) {
  .hero--garden .hero-description {
    font-size: clamp(15.5px, 2vh, 18px);
  }
}

/* Abstand zum Logoband: etwas mehr Luft, damit das Band für sich steht */
.hero--garden .hero-actions {
  margin-bottom: clamp(20px, 3.3vh, 30px);
}

/* ---------- Kundenlogos als schmales Laufband ----------
   Ein helles Band unter den Knöpfen, 860px breit und 64px hoch (auch in der Nacht hell, sonst sähe man die Logos nicht). Die Logos laufen wie im grossen Band
   weiter unten; hero-garden.js verdoppelt sie dafür und setzt die Dauer. Jedes Logo
   ist im HTML auf seine Marke zugeschnitten (Hülle .hero-client schneidet ab).
   multiply lässt weisse Bildhintergründe im Band verschwinden. */
.hero-clients {
  display: inline-flex;
  align-items: center;
  width: min(860px, 100%);
  height: 64px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 14px; /* wie die Knöpfe darüber */
  /* fast deckend: Logos mit weissem Bildhintergrund stünden sonst als helle Kästchen im Glas */
  background-color: rgba(255, 255, 255, 0.93);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.07);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.hero-clients-view {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.hero-clients-track {
  --gap: 42px;
  --lead: 28px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  height: 62px;
  padding-left: var(--lead);
  /* Grösse aller Logos: ihre Masse stehen im HTML in em (10px = Grundgrösse).
     Bei 12.5px sind sie 27–38px hoch; oben und unten bleiben gut 12px Luft. */
  font-size: 12.5px;
}

.hero-clients-track.is-rolling {
  animation: hero-clients-roll var(--roll, 44s) linear infinite;
}

.hero-client {
  display: block;
  flex: none;
  overflow: hidden;
}

.hero-client img {
  display: block;
  max-width: none;
  opacity: 0.85;
  mix-blend-mode: multiply;
}

@keyframes hero-clients-roll {
  to { transform: translateX(calc(-50% - var(--gap) / 2 + var(--lead) / 2)); }
}

/* ---------- Kundenstimmen als Sprechblasen ----------
   Vier schmale Blasen mit Foto, nur wo daneben Platz ist (breite Bildschirme):
   - links zwei untereinander (.hero-quotes-left: Compasso, darunter curaVer); die Spalte
     beginnt 24px unter der Oberkante des Abzeichens über der Überschrift, die obere
     Blase ist eingerückt, so weit die dritte Überschriftzeile Platz lässt (8–40px), dazwischen 44px Luft;
   - rechts zwei untereinander (.hero-quotes-right: Andreas Graf, darunter Comito); die
     Spalte beginnt eine halbe Überschriftzeile tiefer als die linke, und hier ist die
     untere Blase eingerückt (Spiegelbild der linken Spalte).
   Bewusst versetzt: mit gleicher Oberkante wirkten die Blasen wie ein Raster.
   Die Breite rechnet so, dass keine Blase in die dritte, längste Zeile der
   Überschrift ragt: halbe Fensterbreite minus halbe Zeilenbreite (gut 6.7 × Schrift-
   grösse) minus Rand. Die linke Spalte reicht bis neben die Knöpfe; damit sie bei
   niedrigen Fenstern nicht ins Logoband läuft, werden die Blasen bis 840px Höhe etwas
   kompakter, und bis 760px fällt die zweite Blase jeder Spalte weg. Farben fest (nicht
   var(--text)): die Blasen bleiben auch in der Nacht hell. */
.hero-quote,
.hero-quotes-left,
.hero-quotes-right {
  display: none;
}

@media (min-width: 1400px), (min-width: 1340px) and (max-height: 760px) {
  .hero--garden {
    --hq-side: clamp(20px, 2.6vw, 60px); /* Abstand der Blasen vom Fensterrand */
  }

  .hero-quote {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    width: clamp(214px, calc(50vw - 6.75 * var(--hg-title) - var(--hq-side) - 14px), 268px);
    margin: 0;
    text-align: left;
    animation: hero-quote-in 0.8s var(--ease-out) 0.5s both, hero-quote-float 9s ease-in-out 1.4s infinite;
  }

  .hero-quotes-left,
  .hero-quotes-right {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: 44px;
  }

  .hero-quotes-left {
    top: calc(var(--hg-top) + 24px);
    left: var(--hq-side);
  }

  .hero-quotes-right {
    top: calc(var(--hg-top) + 24px - 0.35 * var(--hg-title));
    right: var(--hq-side);
    justify-items: end;
  }

  .hero-quote--left,
  .hero-quote--right {
    position: relative;
  }

  /* Versetzt statt im Raster: die obere Blase links ist etwas eingerückt, die rechte
     beginnt tiefer und endet etwa mit dem Lauftext. */
  /* Die obere Blase rückt so weit nach rechts, wie die dritte Überschriftzeile Platz
     lässt (gleiche Rechnung wie die Breite, 14px Abstand), mindestens 8px, höchstens 40px. */
  .hero-quote--left:first-child {
    margin-left: clamp(8px, calc(50vw - 6.75 * var(--hg-title) - var(--hq-side) - 282px), 40px);
  }

  .hero-quote--second {
    animation-delay: 0.65s, 3.4s;
    animation-duration: 0.8s, 10.5s;
  }

  .hero-quote--right {
    flex-direction: row-reverse;
    animation-delay: 0.8s, 2.2s;
    animation-duration: 0.8s, 10s;
  }

  /* Rechts ist die untere Blase eingerückt, gleiche Rechnung wie links oben. */
  .hero-quotes-right .hero-quote--second {
    margin-right: clamp(8px, calc(50vw - 6.75 * var(--hg-title) - var(--hq-side) - 282px), 40px);
    animation-delay: 0.95s, 4.6s;
    animation-duration: 0.8s, 11s;
  }
}

/* Knapp über 1400px sind die Blasen am schmalsten und die rechten Texte brechen eine
   Zeile mehr um; damit die rechte Spalte nicht ins Logoband läuft, rückt sie etwas
   enger zusammen und beginnt minimal höher. */
@media (min-width: 1400px) and (max-width: 1439px) {
  .hero-quotes-right {
    top: calc(var(--hg-top) + 24px - 0.45 * var(--hg-title));
    gap: 34px;
  }
}

.hero-quote-face {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14), 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.hero-quote-bubble {
  min-width: 0;
  padding: 11px 14px 12px;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

.hero-quote--left .hero-quote-bubble {
  border-bottom-left-radius: 4px;
}

.hero-quote--right .hero-quote-bubble {
  border-bottom-right-radius: 4px;
}

.hero-quote-stars {
  display: block;
  margin-bottom: 3px;
  color: #f59e0b;
  font-size: 11px;
  letter-spacing: 2px;
}

.hero-quote blockquote {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.hero-quote figcaption {
  color: #64748b;
  font-size: 11px;
  line-height: 1.4;
}

.hero-quote figcaption strong {
  color: #0f172a;
  font-weight: 700;
}

/* Niedrige Fenster: Blasen kompakter, damit die linke Spalte über dem Logoband endet;
   ganz niedrig nur noch eine Blase links. */
@media (max-height: 840px) {
  .hero-quotes-left,
  .hero-quotes-right {
    gap: 36px;
  }

  .hero-quote-bubble {
    padding: 10px 13px 11px;
  }

  .hero-quote blockquote {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-height: 760px) {
  .hero-quote--second {
    display: none;
  }
}

@keyframes hero-quote-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-quote-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

/* ---------- Tageszeit: Hintergrund und Text ---------- */
/* Am Morgen wird der Himmel heller; die mittlere Helligkeit kommt etwas früher. */
.hero--garden[data-sky="sunrise"] {
  --sky-flip: 2.55s;
}

.hero--garden[data-sky="sunset"],
.hero--garden[data-sky="sunrise"] {
  --hg-sky: #fff3ea;
}

.hero--garden[data-sky="night"] {
  --text: #f5f5f7;
  --text-muted: #c4cadb;
  --border: rgba(255, 255, 255, 0.22);
  --hg-sky: #0b1230;
}

/* Der Text wird hell, solange der Himmel dunkel ist. Er wechselt schnell, in dem
   Moment, in dem der Himmel ein mittleres Grau durchläuft: dort ist beides lesbar. */
.hero--garden .hero-title {
  transition: color var(--sky-flip-time) ease var(--sky-flip);
}


.hero--garden .hero-description {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    color var(--sky-flip-time) ease var(--sky-flip);
}

.hero--garden .hero-badge {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    color var(--sky-flip-time) ease var(--sky-flip), background-color var(--sky-flip-time) ease var(--sky-flip),
    border-color var(--sky-flip-time) ease var(--sky-flip);
}

.hero--garden[data-sky="night"] .hero-badge {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #dbe4f5;
}

/* Verlauf ohne das dunkle Ende: bleibt auch vor dem Nachthimmel lesbar */
.hero--garden .hero-title-word.accent {
  background-image: linear-gradient(135deg, #0096c7 0%, #00a3d9 45%, var(--accent) 100%);
  transition: filter var(--sky-flip-time) ease var(--sky-flip);
}

.hero--garden[data-sky="night"] .hero-title-word.accent {
  filter: brightness(1.28);
}

/* Die Navigation in der Nacht: dunkles Glas mit heller Schrift, solange sie über dem
   Hero liegt. hero-garden.js setzt hg-night am <html> und on-hero an der Navigation;
   weiter unten auf der Seite (heller Grund) ist sie wieder hell wie am Tag. */
.hg-night .nav.on-hero .nav-inner {
  background: rgba(22, 32, 70, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 30px rgba(3, 7, 28, 0.35);
}

.hg-night .nav.on-hero .nav-link {
  color: #c9d1e3;
}

.hg-night .nav.on-hero .nav-link:hover,
.hg-night .nav.on-hero .nav-link.active {
  color: #fff;
}

.hg-night .nav.on-hero .nav-menu-btn span {
  background: #f5f5f7;
}

/* ---------- Sterne hinter der Überschrift ---------- */
.hg-stars {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sky-fade) var(--sky-ease);
}

.hero--garden[data-sky="night"] .hg-stars {
  opacity: 1;
}

/* ---------- Sternschnuppen ----------
   hero-garden.js legt sie in der Nacht an und gibt jeder Start (--x, --y), Richtung
   (--a), Weg (--dist) und Länge (--len) mit. Der Kopf sitzt am rechten Ende des
   Strichs; der Schweif wächst beim Flug nach hinten. */
.hg-shoot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len, 150px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(206, 224, 255, 0.6) 55%, #fff);
  transform-origin: 100% 50%;
  pointer-events: none;
  opacity: 0;
}

.hg-shoot::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(196, 218, 255, 0.9);
}

.hg-shoot.is-on {
  animation: hg-shoot var(--time, 0.9s) linear both;
}

@keyframes hg-shoot {
  0% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--a)) translateX(0) scaleX(0.15);
  }
  12% { opacity: 1; }
  62% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(var(--a)) translateX(var(--dist)) scaleX(1);
  }
}

/* ---------- Landschaft ---------- */
.hg-backdrop {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hg-height);
  max-width: none;
  pointer-events: none;
  stroke-linecap: round;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36%);
  mask-image: linear-gradient(180deg, transparent 0, #000 36%);
}

/* garden-palette:start (geschrieben von scripts/draw-hero-garden.py, nicht von Hand ändern) */
.hero--garden {
  --hg0: #eaf5fd;
  --hg1: #e3f1fb;
  --hg2: #eef7f4;
  --hg3: #f3f8fc;
  --hg4: #b9dfc9;
  --hg5: #c7e8d2;
  --hg6: #aadfb4;
  --hg7: #c3ebc6;
  --hg8: #a9dfb2;
  --hg9: #e3edf7;
  --hg10: #ffffff;
  --hg11: #0077b6;
  --hg12: #ff8500;
  --hg13: #9aa6b5;
  --hg14: #c49a7c;
  --hg15: #a98b74;
  --hg16: #dde7f2;
  --hg17: #cbd9e8;
  --hg18: #e9f0f8;
  --hg19: #cfe0e6;
  --hg20: #bdd2da;
  --hg21: #93cbab;
  --hg22: #79b996;
  --hg23: #fbf8f1;
  --hg24: #f4ede1;
  --hg25: #a56f59;
  --hg26: #a9cdec;
  --hg27: #000000;
  --hg28: #ee9778;
  --hg29: #d97a5b;
  --hg30: #73839a;
  --hg31: #fffdf7;
  --hg32: #8c9bb0;
  --hg33: #f1eadf;
  --hg34: #627188;
  --hg35: #c08a72;
  --hg36: #6aaede;
  --hg37: #74bf8d;
  --hg38: #5aa877;
  --hg39: #7dcb93;
  --hg40: #62b97d;
  --hg41: #a0ddb0;
  --hg42: #cfd7e0;
  --hg43: #ffd166;
  --hg44: #da291c;
  --hg45: #f4ecdb;
  --hg46: #8fd3a0;
  --hg47: #ffb3c6;
  --hg48: #fff3b0;
  --hg49: #dfe6ee;
  --hg50: #ff8fab;
  --hg51: #ffd9e2;
  --hg52: #94775f;
  --hg53: #f0625d;
  --hg54: #ffb1a8;
  --hg55: #fbf3e4;
  --hg56: #f4e8d2;
  --hg57: #eadfc9;
  --hg58: #c96b4e;
  --hg59: #84bde6;
  --hg60: #4f9fd4;
  --hg61: #e9d9c6;
  --hg62: #1e293b;
  --hg63: #9bd9a9;
  --hg64: #ff7a59;
  --hg65: #9d8cf0;
  --hg66: #2aa6d9;
  --hg67: #ffc933;
  --hg68: #ffc94d;
  --hg69: #ffe08a;
  --hg70: #dfe6f0;
  --hg71: #ff5400;
  --hg72: #b3a4f5;
  --hg73: #8f7ae6;
  --hg74: #ffe9a8;
  --hg75: #f5a700;
  --hg76: #8a5a2b;
  --hg77: #6e4520;
}

.hero--garden[data-sky="sunset"],
.hero--garden[data-sky="sunrise"] {
  --hg0: #ffe9d8;
  --hg1: #ffd6b8;
  --hg2: #ffc7a3;
  --hg3: #ffe3d2;
  --hg4: #abb2a6;
  --hg5: #b4b7ac;
  --hg6: #a1b299;
  --hg7: #b1baa4;
  --hg8: #a0b297;
  --hg9: #c6bac3;
  --hg10: #d8c6c9;
  --hg11: #346f9a;
  --hg12: #d87826;
  --hg13: #978d99;
  --hg14: #b28675;
  --hg15: #a07c6f;
  --hg16: #c2b6c0;
  --hg17: #b6aeba;
  --hg18: #c9bdc4;
  --hg19: #b9b2b9;
  --hg20: #adaab1;
  --hg21: #93a592;
  --hg22: #829a86;
  --hg23: #d5c2bf;
  --hg24: #d0bab6;
  --hg25: #9e6a5e;
  --hg26: #a0a6bc;
  --hg27: #342326;
  --hg28: #cc8372;
  --hg29: #c0715f;
  --hg30: #7e7688;
  --hg31: #d8c5c3;
  --hg32: #8e8696;
  --hg33: #cfb9b4;
  --hg34: #736b7c;
  --hg35: #b07b6e;
  --hg36: #7892b3;
  --hg37: #7f9d7f;
  --hg38: #6e8e72;
  --hg39: #84a583;
  --hg40: #739a76;
  --hg41: #9bb096;
  --hg42: #b9adb5;
  --hg43: #d8a966;
  --hg44: #c03d37;
  --hg45: #d0bab2;
  --hg46: #90aa8c;
  --hg47: #d896a4;
  --hg48: #d8be96;
  --hg49: #c3b6be;
  --hg50: #d87e92;
  --hg51: #d8aeb6;
  --hg52: #936f62;
  --hg53: #ce6261;
  --hg54: #d89491;
  --hg55: #d5beb7;
  --hg56: #d0b7ac;
  --hg57: #cab2a6;
  --hg58: #b56757;
  --hg59: #899cb9;
  --hg60: #6789ad;
  --hg61: #c9aea4;
  --hg62: #483d4b;
  --hg63: #98ae92;
  --hg64: #d8715e;
  --hg65: #997dbf;
  --hg66: #508db0;
  --hg67: #d8a346;
  --hg68: #d8a356;
  --hg69: #d8b27e;
  --hg70: #c3b6bf;
  --hg71: #d85926;
  --hg72: #a78cc2;
  --hg73: #9071b9;
  --hg74: #d8b891;
  --hg75: #d18e26;
  --hg76: #8c5d41;
  --hg77: #7b4f3a;
}

.hero--garden[data-sky="night"] {
  --hg0: #121b3b;
  --hg1: #1d2950;
  --hg2: #2a3963;
  --hg3: #1e2a4e;
  --hg4: #4c606c;
  --hg5: #52636f;
  --hg6: #476064;
  --hg7: #50646b;
  --hg8: #466063;
  --hg9: #5c657d;
  --hg10: #676c81;
  --hg11: #063865;
  --hg12: #673e20;
  --hg13: #414a64;
  --hg14: #51464f;
  --hg15: #46404c;
  --hg16: #5a637c;
  --hg17: #535e78;
  --hg18: #5f667e;
  --hg19: #556077;
  --hg20: #4e5b72;
  --hg21: #3e5861;
  --hg22: #345159;
  --hg23: #66697b;
  --hg24: #636575;
  --hg25: #453541;
  --hg26: #465979;
  --hg27: #060b20;
  --hg28: #61454d;
  --hg29: #593a42;
  --hg30: #323d5a;
  --hg31: #676b7d;
  --hg32: #3b4662;
  --hg33: #626474;
  --hg34: #2b3653;
  --hg35: #4f404b;
  --hg36: #2e4d74;
  --hg37: #325455;
  --hg38: #284b4d;
  --hg39: #365857;
  --hg40: #2b514f;
  --hg41: #435f62;
  --hg42: #555d75;
  --hg43: #675b46;
  --hg44: #591b2a;
  --hg45: #636573;
  --hg46: #3d5b5c;
  --hg47: #674f6b;
  --hg48: #676862;
  --hg49: #5b637a;
  --hg50: #674261;
  --hg51: #675e76;
  --hg52: #3e3844;
  --hg53: #613043;
  --hg54: #674e5f;
  --hg55: #666876;
  --hg56: #63636f;
  --hg57: #5f606c;
  --hg58: #53343d;
  --hg59: #385377;
  --hg60: #244870;
  --hg61: #5f5e6b;
  --hg62: #121b36;
  --hg63: #415e60;
  --hg64: #673a41;
  --hg65: #42407b;
  --hg66: #164a72;
  --hg67: #675833;
  --hg68: #67583d;
  --hg69: #676054;
  --hg70: #5b637b;
  --hg71: #672b20;
  --hg72: #4a497d;
  --hg73: #3d3a77;
  --hg74: #67645f;
  --hg75: #634b20;
  --hg76: #3b2d30;
  --hg77: #30252c;
}

.hg-backdrop .cg0 { stop-color: var(--hg0); }
.hg-backdrop .cg1 { stop-color: var(--hg1); }
.hg-backdrop .cg2 { stop-color: var(--hg2); }
.hg-backdrop .cg3 { stop-color: var(--hg3); }
.hg-backdrop .cg4 { stop-color: var(--hg4); }
.hg-backdrop .cg5 { stop-color: var(--hg5); }
.hg-backdrop .cg6 { stop-color: var(--hg6); }
.hg-backdrop .cg7 { stop-color: var(--hg7); }
.hg-backdrop .cg8 { stop-color: var(--hg8); }
.hg-backdrop .cf9 { fill: var(--hg9); }
.hg-backdrop .cf10 { fill: var(--hg10); }
.hg-backdrop .cs10 { stroke: var(--hg10); }
.hg-backdrop .cf11 { fill: var(--hg11); }
.hg-backdrop .cs11 { stroke: var(--hg11); }
.hg-backdrop .cf12 { fill: var(--hg12); }
.hg-backdrop .cs12 { stroke: var(--hg12); }
.hg-backdrop .cf13 { fill: var(--hg13); }
.hg-backdrop .cs13 { stroke: var(--hg13); }
.hg-backdrop .cf14 { fill: var(--hg14); }
.hg-backdrop .cs14 { stroke: var(--hg14); }
.hg-backdrop .cf15 { fill: var(--hg15); }
.hg-backdrop .cs15 { stroke: var(--hg15); }
.hg-backdrop .cf16 { fill: var(--hg16); }
.hg-backdrop .cf17 { fill: var(--hg17); }
.hg-backdrop .cf18 { fill: var(--hg18); }
.hg-backdrop .cf19 { fill: var(--hg19); }
.hg-backdrop .cf20 { fill: var(--hg20); }
.hg-backdrop .cf21 { fill: var(--hg21); }
.hg-backdrop .cf22 { fill: var(--hg22); }
.hg-backdrop .cf23 { fill: var(--hg23); }
.hg-backdrop .cf24 { fill: var(--hg24); }
.hg-backdrop .cf25 { fill: var(--hg25); }
.hg-backdrop .cf26 { fill: var(--hg26); }
.hg-backdrop .cf27 { fill: var(--hg27); }
.hg-backdrop .cs27 { stroke: var(--hg27); }
.hg-backdrop .cf28 { fill: var(--hg28); }
.hg-backdrop .cf29 { fill: var(--hg29); }
.hg-backdrop .cf30 { fill: var(--hg30); }
.hg-backdrop .cs30 { stroke: var(--hg30); }
.hg-backdrop .cf31 { fill: var(--hg31); }
.hg-backdrop .cf32 { fill: var(--hg32); }
.hg-backdrop .cf33 { fill: var(--hg33); }
.hg-backdrop .cf34 { fill: var(--hg34); }
.hg-backdrop .cs34 { stroke: var(--hg34); }
.hg-backdrop .cf35 { fill: var(--hg35); }
.hg-backdrop .cf36 { fill: var(--hg36); }
.hg-backdrop .cs36 { stroke: var(--hg36); }
.hg-backdrop .cf37 { fill: var(--hg37); }
.hg-backdrop .cs37 { stroke: var(--hg37); }
.hg-backdrop .cf38 { fill: var(--hg38); }
.hg-backdrop .cs38 { stroke: var(--hg38); }
.hg-backdrop .cf39 { fill: var(--hg39); }
.hg-backdrop .cs39 { stroke: var(--hg39); }
.hg-backdrop .cf40 { fill: var(--hg40); }
.hg-backdrop .cs40 { stroke: var(--hg40); }
.hg-backdrop .cf41 { fill: var(--hg41); }
.hg-backdrop .cs41 { stroke: var(--hg41); }
.hg-backdrop .cf42 { fill: var(--hg42); }
.hg-backdrop .cf43 { fill: var(--hg43); }
.hg-backdrop .cs43 { stroke: var(--hg43); }
.hg-backdrop .cf44 { fill: var(--hg44); }
.hg-backdrop .cf45 { fill: var(--hg45); }
.hg-backdrop .cf46 { fill: var(--hg46); }
.hg-backdrop .cf47 { fill: var(--hg47); }
.hg-backdrop .cs47 { stroke: var(--hg47); }
.hg-backdrop .cf48 { fill: var(--hg48); }
.hg-backdrop .cs48 { stroke: var(--hg48); }
.hg-backdrop .cf49 { fill: var(--hg49); }
.hg-backdrop .cs49 { stroke: var(--hg49); }
.hg-backdrop .cf50 { fill: var(--hg50); }
.hg-backdrop .cs50 { stroke: var(--hg50); }
.hg-backdrop .cs51 { stroke: var(--hg51); }
.hg-backdrop .cf52 { fill: var(--hg52); }
.hg-backdrop .cs53 { stroke: var(--hg53); }
.hg-backdrop .cs54 { stroke: var(--hg54); }
.hg-backdrop .cf55 { fill: var(--hg55); }
.hg-backdrop .cf56 { fill: var(--hg56); }
.hg-backdrop .cs57 { stroke: var(--hg57); }
.hg-backdrop .cf58 { fill: var(--hg58); }
.hg-backdrop .cf59 { fill: var(--hg59); }
.hg-backdrop .cf60 { fill: var(--hg60); }
.hg-backdrop .cs60 { stroke: var(--hg60); }
.hg-backdrop .cf61 { fill: var(--hg61); }
.hg-backdrop .cf62 { fill: var(--hg62); }
.hg-backdrop .cs62 { stroke: var(--hg62); }
.hg-backdrop .cf63 { fill: var(--hg63); }
.hg-backdrop .cf64 { fill: var(--hg64); }
.hg-backdrop .cs65 { stroke: var(--hg65); }
.hg-backdrop .cf66 { fill: var(--hg66); }
.hg-backdrop .cs66 { stroke: var(--hg66); }
.hg-backdrop .cf67 { fill: var(--hg67); }
.hg-backdrop .cs67 { stroke: var(--hg67); }
.hg-backdrop .cf68 { fill: var(--hg68); }
.hg-backdrop .cs68 { stroke: var(--hg68); }
.hg-backdrop .cf69 { fill: var(--hg69); }
.hg-backdrop .cs69 { stroke: var(--hg69); }
.hg-backdrop .cs70 { stroke: var(--hg70); }
.hg-backdrop .cs71 { stroke: var(--hg71); }
.hg-backdrop .cf72 { fill: var(--hg72); }
.hg-backdrop .cs72 { stroke: var(--hg72); }
.hg-backdrop .cs73 { stroke: var(--hg73); }
.hg-backdrop .cf74 { fill: var(--hg74); }
.hg-backdrop .cs75 { stroke: var(--hg75); }
.hg-backdrop .cf76 { fill: var(--hg76); }
.hg-backdrop .cf77 { fill: var(--hg77); }
/* garden-palette:end */

:where(.hg-backdrop [class]) {
  transition: fill var(--sky-fade) var(--sky-ease), stroke var(--sky-fade) var(--sky-ease),
    stop-color var(--sky-fade) var(--sky-ease);
}

/* Sonne und Mond. Ohne Tagesablauf ruht die Sonne am Himmel, einen Mond gibt es nicht.
   hero-garden.js setzt data-sun und data-moon und schickt sie damit auf den Weg. */
.hg-sun,
.hg-moon,
.hg-nightsky,
.hg-birds,
.hg-fireflies {
  transition: opacity var(--sky-fade) var(--sky-ease);
}

.hg-moon,
.hg-nightsky,
.hg-fireflies {
  opacity: 0;
}

.hg-sun-core {
  transition: fill var(--sky-fade) var(--sky-ease);
}

.hero--garden[data-sky="sunset"] .hg-sun-core,
.hero--garden[data-sky="sunrise"] .hg-sun-core {
  fill: rgb(255, 176, 102);
}

.hg-sun-x {
  transform: translateX(var(--sun-rest-x));
}

.hg-sun-y {
  transform: translateY(var(--sun-rest-y));
}

.hg-sun-x {
  --arc-from: var(--sun-from);
  --arc-to: var(--sun-to);
}

.hg-moon-x {
  --arc-from: var(--moon-from);
  --arc-to: var(--moon-to);
  transform: translateX(var(--arc-from));
}

.hg-moon-y {
  transform: translateY(380px);
}

.hero--garden[data-sun] .hg-sun-x {
  animation: hg-arc-x var(--sun-time, 90s) linear var(--sun-delay, 0s) both;
}

.hero--garden[data-sun] .hg-sun-y {
  animation: hg-sun-y var(--sun-time, 90s) linear var(--sun-delay, 0s) both;
}

.hero--garden[data-moon] .hg-moon-x {
  animation: hg-arc-x var(--moon-time, 26s) linear var(--moon-delay, 0s) both;
}

.hero--garden[data-moon] .hg-moon-y {
  animation: hg-arc-y var(--moon-time, 26s) var(--moon-delay, 0s) both;
}

/* Am Morgen ist die Sonne sofort wieder da (sie steht noch hinter dem Berg und steigt
   dann hervor); am Abend klingt ihr Schein hinter dem Berg etwas rascher ab als der Himmel. */
.hero--garden[data-sky="sunrise"] .hg-sun {
  transition-duration: 1.2s;
}

.hero--garden[data-sky="night"] .hg-sun {
  transition-duration: 4s;
}

.hero--garden[data-sky="night"] .hg-sun,
.hero--garden[data-sky="night"] .hg-birds {
  opacity: 0;
}

.hero--garden[data-sky="night"] .hg-moon,
.hero--garden[data-sky="night"] .hg-nightsky,
.hero--garden[data-sky="night"] .hg-fireflies {
  opacity: 1;
}

/* Feste Tageszeit für die Vorschau (?sky=…) */
.hero--garden[data-hold] .hg-moon-x,
.hero--garden[data-hold] .hg-sun-x {
  transform: translateX(calc(var(--arc-from) * 0.5 + var(--arc-to) * 0.5));
}

.hero--garden[data-hold] .hg-moon-y,
.hero--garden[data-hold] .hg-sun-y {
  transform: translateY(var(--sky-top));
}

.hero--garden[data-hold][data-sky="sunset"] .hg-sun-x {
  transform: translateX(calc(var(--arc-from) * 0.27 + var(--arc-to) * 0.73));
}

.hero--garden[data-hold][data-sky="sunset"] .hg-sun-y {
  transform: translateY(calc(var(--sun-dusk) + 10px));
}

.hg-twinkle {
  animation: hg-twinkle 3.6s ease-in-out infinite paused;
}

.hero--garden[data-sky="night"] .hg-twinkle {
  animation-play-state: running;
}

/* Erleuchtete Fenster */
.hg-light {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero--garden[data-sky="sunset"] .hg-light,
.hero--garden[data-sky="night"] .hg-light {
  opacity: 1;
}

.hg-cloud {
  animation: hg-drift 80s ease-in-out infinite alternate;
}

/* Vögel ziehen über den ganzen Himmel; jeder Flügel schlägt um den Körper. */
.hg-flock {
  animation: hg-fly 60s linear infinite;
}

.hg-flock--back {
  animation-name: hg-fly-back;
}

.hg-bob {
  animation: hg-bob 6s ease-in-out infinite alternate;
}

.hg-wing {
  fill: none;
  stroke: #6b7f95;
  stroke-width: 2.4;
  stroke-linecap: round;
  transform-origin: 0 0;
}

.hg-wing--l {
  animation: hg-flap-l 0.6s ease-in-out infinite alternate;
}

.hg-wing--r {
  animation: hg-flap-r 0.6s ease-in-out infinite alternate;
}

/* Die Schweizerfahne weht an der Stange; der Hund vor dem Gartenhaus wedelt langsam. */
.hg-flag-wave {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: hg-wave 2.6s ease-in-out infinite alternate;
}

.hg-tail {
  transform-origin: 0 0;
  animation: hg-wag 1.6s ease-in-out infinite alternate;
}

/* Der Ballon über dem Dorf schwebt langsam auf und ab. */
.hg-balloon {
  animation: hg-float 14s ease-in-out infinite alternate;
}

@keyframes hg-float {
  from { transform: translate(-16px, 0) rotate(-1.5deg); }
  to { transform: translate(16px, -14px) rotate(1.5deg); }
}

@keyframes hg-wave {
  from { transform: skewY(-4deg) scaleX(0.97); }
  to { transform: skewY(4deg) scaleX(1); }
}

@keyframes hg-wag {
  from { transform: rotate(4deg); }
  to { transform: rotate(-9deg); }
}

/* Blumen und Gras wiegen sich im Wind, jeweils um ihren Fusspunkt. */
.hg-sway {
  transform-origin: 0 0;
  animation: hg-sway var(--dur, 6s) ease-in-out var(--del, 0s) infinite alternate;
}

.hg-sway--soft {
  animation-name: hg-sway-soft;
}

/* Grosse Blumen: offen (is-open) oder als Knospe. Der Sommervogel öffnet sie,
   in der Nacht schliessen sie sich. Ohne Skript blühen alle. */
.hg-bloom,
.hg-bud {
  transform-origin: 0 0;
}

.hg-perch {
  fill: none; /* unsichtbare Marke: dort landet der Sommervogel */
}

.hg-bloom {
  transition: transform 0.95s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hg-bud {
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.hg-js .hg-flower:not(.is-open) .hg-bloom {
  transform: scale(0) rotate(-50deg);
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.75, 0);
}

.hg-js .hg-flower:not(.is-open) .hg-bud {
  opacity: 1;
  transform: none;
  transition-delay: 0.4s;
}

/* Glühwürmchen in der Nacht */
.hg-firefly {
  animation: hg-firefly var(--dur, 7s) ease-in-out var(--del, 0s) infinite paused;
}

.hero--garden[data-sky="sunset"] .hg-firefly,
.hero--garden[data-sky="night"] .hg-firefly {
  animation-play-state: running;
}

/* Ausserhalb des Bildschirms steht alles still (setzt hero-garden.js). */
.hg-paused .hg-backdrop *,
.hg-paused .hg-stars * {
  animation-play-state: paused !important;
}

.hg-paused .hero-clients-track,
.hg-paused .hero-quote {
  animation-play-state: paused;
}

@keyframes hg-fly {
  from { transform: translateX(-1950px); }
  to { transform: translateX(1950px); }
}

@keyframes hg-fly-back {
  from { transform: translateX(1950px); }
  to { transform: translateX(-1950px); }
}

@keyframes hg-bob {
  from { transform: translateY(-7px); }
  to { transform: translateY(7px); }
}

@keyframes hg-flap-l {
  from { transform: rotate(-18deg); }
  to { transform: rotate(26deg); }
}

@keyframes hg-flap-r {
  from { transform: rotate(18deg); }
  to { transform: rotate(-26deg); }
}

@keyframes hg-arc-x {
  from { transform: translateX(var(--arc-from)); }
  to { transform: translateX(var(--arc-to)); }
}

/* Höhe der Sonne über den Tag. Sie geht wirklich auf und unter: hinter dem Berg hervor
   und wieder dahinter, statt am Himmel ein- und auszublenden. Die Prozente gehören zum
   Takt in hero-garden.js (SUN 90 s, Dämmerung je 9 s): 18.9 % = Beginn Sonnenaufgang,
   28.9 % = Beginn Tag, 72 % = Beginn Dämmerung, 82 % = Beginn Nacht. Wer dort die
   Zeiten ändert, zieht sie hier nach. */
@keyframes hg-sun-y {
  0% { transform: translateY(380px); }
  18.9% {
    transform: translateY(var(--sun-dawn));
    animation-timing-function: linear;
  }
  28.9% {
    transform: translateY(var(--sun-up));
    animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
  }
  50% {
    transform: translateY(var(--sky-top));
    animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.55);
  }
  72% {
    transform: translateY(var(--sun-dusk));
    animation-timing-function: linear;
  }
  82% {
    transform: translateY(var(--sun-gone));
    animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
  }
  100% { transform: translateY(380px); }
}

/* Höhe des Mondes: ein einfacher Bogen */
@keyframes hg-arc-y {
  0% {
    transform: translateY(380px);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1);
  }
  50% {
    transform: translateY(var(--sky-top));
    animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3);
  }
  100% { transform: translateY(380px); }
}

@keyframes hg-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes hg-drift {
  from { transform: translateX(calc(var(--drift, 40px) * -1)); }
  to { transform: translateX(var(--drift, 40px)); }
}

@keyframes hg-sway {
  from { transform: rotate(-1.7deg); }
  to { transform: rotate(1.9deg); }
}

@keyframes hg-sway-soft {
  from { transform: skewX(-3deg); }
  to { transform: skewX(3.5deg); }
}

@keyframes hg-firefly {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(var(--fx, 16px), var(--fy, -12px)); opacity: 0.25; }
  72% { opacity: 1; }
  100% { transform: translate(calc(var(--fx, 16px) * -0.6), calc(var(--fy, -12px) * 0.5)); opacity: 0; }
}

/* ---------- Der Sommervogel ----------
   hero-garden.js setzt Position, Neigung und Flügelschlag (und bei mehreren Faltern
   Farbe und Grösse, --s); hier steht nur das Aussehen. */
.hg-fly {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(var(--hg-fly) * var(--s, 1));
  height: calc(var(--hg-fly) * var(--s, 1) * 43 / 42);
  transform-origin: 42% 84%; /* dort sitzt er auf der Blüte */
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(1px 3px 3px rgba(15, 23, 42, 0.2));
  transition: opacity 0.6s ease, filter var(--sky-fade) var(--sky-ease);
}

.hg-fly.is-on {
  opacity: 1;
}

.hero--garden[data-sky="night"] .hg-fly {
  filter: drop-shadow(1px 3px 3px rgba(15, 23, 42, 0.2)) brightness(0.72) saturate(0.85);
}

.hg-fly svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Die Flügel falten sich um die Körperachse (wie in der Tour und in der App). */
.hg-fly-near,
.hg-fly-far {
  transform-box: view-box;
  transform-origin: 21.5px 24.8px;
}

/* ---------- Schmale Bildschirme ----------
   Der Text steht über dem Garten statt davor; der Hero wird dafür höher als das
   Fenster. Sonne und Mond ziehen hier durch die Mitte, sonst sähe man sie nie. */
@media (max-width: 900px) {
  .hero.hero--garden {
    --hg-height: clamp(330px, 44vh, 430px); /* 02.11.2026: rund 30px niedriger wie am Desktop */
    --sun-from: 1010px;
    --sun-to: 2190px;
    --sun-dawn: 350px;
    --sun-up: 228px;
    --sun-dusk: 288px;
    --sun-gone: 372px;
    --moon-from: 1010px;
    --moon-to: 2190px;
    --sky-top: 215px;
    --sun-rest-x: 1810px;
    --sun-rest-y: 215px;
    padding-bottom: calc(var(--hg-height) * 0.8);
  }
}

@media (max-width: 768px) {
  .hero--garden .hero-content {
    padding-top: 120px; /* 02.11.2026: etwas mehr Luft nach oben */
  }

  .hero--garden .hero-title {
    font-size: clamp(28px, 8vw, 42px);
    margin-bottom: 16px;
  }

  .hero--garden .hero-description {
    margin-bottom: 26px;
  }

  .hero--garden .hero-actions {
    margin-bottom: 28px;
  }

}

/* ---------- Ohne Bewegung: stilles Bild, es bleibt Tag ---------- */
@media (prefers-reduced-motion: reduce) {
  .hg-backdrop *,
  .hg-stars * {
    animation: none !important;
  }

  .hg-js .hg-flower .hg-bloom {
    transform: none !important;
  }

  .hg-js .hg-flower .hg-bud {
    opacity: 0 !important;
  }

  /* Die Vögel stehen still: nicht mitten vor dem Text, sondern links am Himmel */
  .hg-flock {
    transform: translateX(-640px);
  }

  .hg-fly {
    transition: none !important;
  }

  .hero-clients-track.is-rolling,
  .hero-quote {
    animation: none;
  }
}