/* Matrix Marketing – Kopf neu (Prototyp 12.10.2026, Wunsch Inhaber: direkte Ziele statt Ausklappmenü).
   Computer ab 1200 px: dünne Kontaktzeile (Telefon, WhatsApp, E-Mail, Adresse) über der Zeile mit Logo, den acht Zielen
   und «Offerte anfragen». Beim Scrollen gleitet die Kontaktzeile weg (der ganze Kopf rückt um ihre Höhe nach oben), die
   Zielzeile bleibt. Unter der Zielzeile eine 1 px Goldlinie, die den Lesefortschritt der Seite zeigt (kopf.js setzt
   --fortschritt). Dazu: weicher Übergang beim Seitenwechsel (View Transitions, nur bei «Bewegung erlaubt»). */

/* ------------------------------------------------------------------ Grund: Kopf wächst mit der Kontaktzeile */
.kopf { height: auto; }
.kopf__zeile { display: none; }
.kopf__innen { position: relative; height: var(--kopf-h); }

/* Fortschrittslinie: liegt genau auf der Haarlinie unter dem Kopf */
.kopf__innen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1;
  background: var(--gold); transform: scaleX(var(--fortschritt, 0)); transform-origin: left center;
  pointer-events: none; opacity: .9;
}
.kopf:not(.is-fest) .kopf__innen::after { opacity: 0; }

/* Zwischen 1100 und 1199 px wäre die Zielzeile zu eng: dort wie am Tablet das Menü – «Offerte anfragen» bleibt aber im Kopf
   (Platz hat es genug, und es ist der wichtigste Knopf) */
@media (min-width: 1100px) and (max-width: 1199px) {
  .kopf__nav, .kopf__tel { display: none; }
  .kopf__menu { display: flex; }
  .kopf__cta { margin-left: auto; }
  .kopf__cta + .sprachwahl--kopf { margin-left: -8px; }
}

@media (min-width: 1200px) {
  .kopf__zeile { display: block; height: 36px; background: var(--schwarz); border-bottom: 1px solid var(--linie); }
  .kopf__zeile-innen {
    height: 100%; display: flex; align-items: center; gap: 26px;
    max-width: calc(var(--inhalt) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand);
    font-size: 12.5px; letter-spacing: .01em; color: var(--text-2); white-space: nowrap;
  }
  .kopf__zeile a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; color: var(--text-2); transition: color .3s var(--ease); }
  .kopf__zeile a:hover, .kopf__zeile a:focus-visible { color: var(--gold); }
  .kopf__zeile-label { font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }   /* nie unter 12 px (vorher 9,5 px) */
  .kopf__zeile-ort { margin-left: auto; color: var(--grau); }
  .kopf__zeile-punkt { color: var(--linie-stark); }

  .kopf { transition: background-color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease); }
  .kopf.is-fest { transform: translateY(-36px); }
  .kopf.is-fest .kopf__zeile { visibility: hidden; }          /* unsichtbar über dem Rand: nicht per Tab erreichbar */
  /* 13.10.2026 (Runde 2): erst verstecken, wenn der Kopf fertig nach oben geglitten ist – vorher verschwand die schwarze Zeile
     sofort, und während der .45 s blitzte oben ein Streifen Seiteninhalt durch. Beim Zurückkommen ist sie sofort wieder da. */
  .kopf__zeile { transition: visibility 0s; }
  .kopf.is-fest .kopf__zeile { transition: visibility 0s linear .45s; }

  .kopf__nav ul { gap: clamp(16px, 1.7vw, 34px); }
  .kopf__nav a { font-size: 13.5px; }
  .kopf__cta { margin-left: 4px; }
}
@media (min-width: 1440px) { .kopf__nav a { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .kopf { transition: background-color .45s var(--ease), border-color .45s var(--ease); }
  .kopf.is-fest .kopf__zeile { transition: none; }           /* ohne Gleiten: sofort weg */
}

/* ------------------------------------------------------------------ Menü (Handy/Tablet): acht Ziele brauchen etwas weniger Höhe */
.menue__nav a { font-size: clamp(22px, 5.8vw, 36px); padding: 12px 0; }
.menue__nav .menue__unter { display: none; }
@media (max-height: 700px) {
  .menue__nav a { font-size: clamp(20px, 5vw, 28px); padding: 10.5px 0; }                /* Zeile mind. 44 px hoch */
  .menue__nav { padding-block: 16px; }
  .menue__nav li:first-child { border-top: 0; }   /* sonst zwei Linien 16 px untereinander (Menükopf und erster Punkt) */
}
/* Computer 1100–1199 px und Tablet quer: Menü nicht in Handy-Grösse über die volle Höhe – Schrift nach der Fensterhöhe */
@media (min-width: 1024px) {
  .menue__nav a { font-size: clamp(22px, 3.6vh, 30px); padding: 11px 0; }
  .menue__fuss { grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; }   /* Knopf nicht über 1000 px breit */
  .menue__fuss .knopf { width: auto; }
}
/* Einblenden der Punkte: Kaskade über alle acht (vorher kamen 6–8 gleichzeitig mit dem ersten) */
.menue.is-offen .menue__nav li:nth-child(6) a { transition-delay: .2s; }
.menue.is-offen .menue__nav li:nth-child(7) a { transition-delay: .24s; }
.menue.is-offen .menue__nav li:nth-child(8) a { transition-delay: .28s; }
/* Telefon | E-Mail: unter 360 px ohne Trennstrich (er stand allein am Zeilenende), die Adresse rutscht sauber darunter */
@media (max-width: 359px) { .menue__kontakt span[aria-hidden] { display: none; } }

/* ------------------------------------------------------------------ Seitenwechsel: weiches Überblenden statt Schwarz-Blitzen.
   Der Kopf bleibt stehen (eigener Übergangsname), der Inhalt blendet über. Nur mit «Bewegung erlaubt»; sonst normaler Wechsel. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .2s var(--ease) both vt-aus; }
  ::view-transition-new(root) { animation: .32s var(--ease) both vt-ein; }
  ::view-transition-old(kopf), ::view-transition-new(kopf) { animation: none; mix-blend-mode: normal; }
  .kopf { view-transition-name: kopf; }
  @keyframes vt-aus { to { opacity: 0; } }
  @keyframes vt-ein { from { opacity: 0; } }
}

/* ------------------------------------------------------------------ Feinschliff Hauptchat (12.10.2026 abends)
   Abschnittstitel eine Stufe ruhiger (Wunsch Inhaber: nichts darf zu gross wirken; der h1 bleibt gross).
   (Einen Cookie-Hinweis gibt es seit 14.10.2026 nicht mehr – die Website setzt keine Cookies.) */
.titel--l { font-size: clamp(2rem, 1.05rem + 2.9vw, 3.6rem); }
.titel--xl { font-size: clamp(2.4rem, 1.15rem + 4.4vw, 5.4rem); }

/* Kleine Handys (bis 359 px): die ruhigeren Titelgrössen von oben dürfen die Regel aus main.css nicht aufheben */
@media (max-width: 359px) { .titel--l { font-size: 1.68rem; } .titel--xl { font-size: 2rem; } }

/* Sicherheitsnetz: nichts darf die Seite seitlich breiter machen (auch keine räumlich bewegten Elemente) */
html { overflow-x: clip; }   /* Sicherheitsnetz gegen seitliche Ueberbreite (die Buehnen halten ihre Elemente ohnehin im Bild) */

/* Einblenden beim Scrollen schneller (Gutachten: Titel erst nach 1,9 s ganz da – Ziel unter 0,6 s), gilt fuer alle Seiten */
.js [data-reveal] { transition-duration: .5s, .55s; }
.js .abschnitt__kopf[data-reveal] > .titel, .js .titel[data-reveal] { transition: clip-path .5s var(--ease), translate .55s var(--ease), opacity .45s var(--ease), transform .5s var(--ease); }
:where(.js) :where([data-reveal]) :is(.rs-arbeit img, .ref-stark figure img, .ref-titel img, .titelwand img, .leistung__bild,
  .magazin__titel img, .person img, .rs-galerie img, .ls-galerie img, .ueber__bild img, .dienst__bild img, .ls-beispiel__bild img) {
  transition: clip-path .6s var(--ease) .05s, scale .9s var(--ease) .05s, transform .6s var(--ease), opacity .5s var(--ease);
}
.js [data-reveal] .studio__bild { transition: clip-path .6s var(--ease) .05s, scale .9s var(--ease) .05s, transform .6s var(--ease), filter .6s var(--ease); }
.js .kolumne[data-reveal]::before { transition: transform .7s var(--ease) .05s; }
/* Handy (Runde 5, 14.10.2026: «beim Wischen träge»): unter 768 px blendet alles in rund 0,45 s ein, die Staffelung ist halb so
   lang, nachladende Bilder erscheinen in 0,35 s; main.js löst dort schon kurz vor dem unteren Rand aus */
@media (max-width: 767px) {
  .js [data-reveal] { transition-duration: .45s, .45s; transition-delay: calc(var(--i, 0) * 45ms); }
  .js .abschnitt__kopf[data-reveal] > .titel, .js .titel[data-reveal] { transition: clip-path .45s var(--ease), translate .45s var(--ease), opacity .4s var(--ease), transform .45s var(--ease); }
  :where(.js) :where([data-reveal]) :is(.rs-arbeit img, .ref-stark figure img, .ref-titel img, .titelwand img, .leistung__bild,
    .magazin__titel img, .person img, .rs-galerie img, .ls-galerie img, .ueber__bild img, .dienst__bild img, .ls-beispiel__bild img) {
    transition: clip-path .45s var(--ease), scale .6s var(--ease), transform .45s var(--ease), opacity .4s var(--ease);
  }
  .js [data-reveal] .studio__bild { transition: clip-path .45s var(--ease), scale .6s var(--ease), transform .45s var(--ease), filter .45s var(--ease); }
  .js .kolumne[data-reveal]::before { transition-duration: .45s; }
  .js img.einblenden { transition-duration: .35s; }
}

/* Startseite: Abzweig zum Grafikstudio direkt unter den Kundenlogos (Runde 5, 14.10.2026: wer nur einen Flyer, eine Website
   oder ein Logo sucht, muss am Handy nicht durch die ganze Magazin-Reise) – leise Frage, Textlink wie überall */
.kunden__abzweig { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: clamp(22px, 3vw, 36px); font-size: 15px; color: var(--grau); }
.kunden__abzweig .textlink { color: var(--elfenbein); }
.kunden__abzweig .textlink:hover { color: var(--gold); }
/* Sprunglink: erscheint bei Tastaturfokus; bekommt er den Fokus per Skript nach einem Mausklick, bleibt er verborgen */
.skip:focus:not(:focus-visible) { transform: translateY(-160%); }

/* ------------------------------------------------------------------ Sprachwechsel DE / EN (13.10.2026, Wunsch Inhaber)
   Drei Stellen, gleiche Markierung (<nav class="sprachwahl">): ab 1200 px rechts aussen in der Kontaktzeile (beim Scrollen
   gleitet sie in die Zielzeile), darunter klein links vom Menüknopf (Tippfläche 44 × 44 px) und im Menü an derselben Stelle
   (kopf.js setzt sie in den Menükopf). Aktive Sprache gold (aria-current), die andere grau. 12 px wie die Labels der Kontaktzeile.
   Beim Wechsel nimmt kopf.js den gerade sichtbaren Abschnitt und die Abfrage (?leistung=…) mit. */
.sprachwahl {
  display: flex; align-items: center; flex: none;
  font-family: var(--f-titel); font-stretch: 125%; font-weight: 600; font-size: 12px; line-height: 1;   /* nie unter 12 px */
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.kopf .sprachwahl a, .menue .sprachwahl a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  padding-left: .14em;                                   /* Sperrung haengt rechts Luft an: Text optisch mittig */
  color: var(--grau); transition: color .3s var(--ease);
}
.kopf .sprachwahl a:hover, .kopf .sprachwahl a:focus-visible,
.menue .sprachwahl a:hover, .menue .sprachwahl a:focus-visible { color: var(--gold-hell); }
.kopf .sprachwahl a[aria-current], .menue .sprachwahl a[aria-current] { color: var(--gold); }
.sprachwahl__strich { color: var(--linie-stark); }

/* Kontaktzeile (ab 1200 px): nach den Öffnungszeiten, mit feiner Trennlinie */
.sprachwahl--zeile { margin-left: -6px; padding-left: 18px; border-left: 1px solid var(--linie); height: 14px; }
.kopf .sprachwahl--zeile a { min-height: 36px; padding-inline: calc(6px + .16em) 6px; }
.sprachwahl--zeile .sprachwahl__strich { margin-inline: 1px; }
/* 1200–1439 px: mit der Sprachwahl wird die Kontaktzeile knapp (englische Nummer im internationalen Format) – etwas enger setzen */
@media (min-width: 1200px) and (max-width: 1439px) {
  .kopf__zeile-innen:has(.sprachwahl) { gap: 16px; font-size: 12px; }   /* nur wo die Sprachwahl steht */
  .kopf__zeile a { gap: 6px; }
  .sprachwahl--zeile { padding-left: 12px; margin-left: -4px; }
}
/* 1200–1319 px: mit Labels in 12 px (vorher 9,5 px) hat die Adresse mit den Öffnungszeiten keinen Platz mehr – sie steht im Fuss
   und auf /kontakt; die Zeile zeigt Telefon, WhatsApp, E-Mail und rechts DE / EN */
@media (min-width: 1200px) and (max-width: 1319px) {
  .kopf__zeile-ort { display: none; }
  .kopf__zeile .sprachwahl--zeile { margin-left: auto; }
}

/* Kopfzeile unter 1200 px: links vom Menüknopf, 44 × 44 px je Sprache */
.sprachwahl--kopf { display: none; }
.kopf .sprachwahl--kopf a { width: 44px; height: 44px; }
.sprachwahl--kopf .sprachwahl__strich { margin-inline: -4px; }
@media (max-width: 1199px) {
  .sprachwahl--kopf { display: flex; margin-left: auto; margin-right: -14px; }
  .sprachwahl--kopf + .kopf__menu { margin-left: 0; }
}
/* Ab 1200 px, sobald die Kontaktzeile beim Scrollen wegrückt (.is-fest, auch bei Ankunft über einen Anker): DE / EN gleitet
   rechts neben «Offerte anfragen» in die Zielzeile – die Sprachwahl ist auf langen Seiten jederzeit erreichbar */
@media (min-width: 1200px) {
  .sprachwahl--kopf {
    display: flex; max-width: 0; margin: 0 0 0 -32px; overflow: clip; overflow-clip-margin: 6px; visibility: hidden; opacity: 0;   /* -32px: hebt die Lücke (gap) des Kopfs auf */
    transition: max-width .45s var(--ease), margin .45s var(--ease), opacity .25s var(--ease), visibility 0s linear .45s;
  }
  .kopf.is-fest .sprachwahl--kopf {
    max-width: 110px; margin: 0 -14px 0 -18px; visibility: visible; opacity: 1;
    transition: max-width .45s var(--ease), margin .45s var(--ease), opacity .3s var(--ease) .15s, visibility 0s;
  }
}
@media (min-width: 1200px) {
  .kopf .sprachwahl--kopf a { width: 36px; }                    /* Maus: 36 × 44 px genügen, die Zielzeile bleibt einzeilig */
  .sprachwahl--kopf .sprachwahl__strich { margin-inline: -2px; }
}
@media (min-width: 1200px) and (max-width: 1319px) {          /* Platz für DE / EN in der Zielzeile, ohne dass Punkte umbrechen */
  .kopf__innen { gap: 24px; }
  .kopf__nav ul { gap: 14px; }
  .kopf__cta { padding-inline: 16px; }
  .sprachwahl--kopf { margin-left: -24px; }
  .kopf.is-fest .sprachwahl--kopf { margin-left: -10px; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .sprachwahl--kopf, .kopf.is-fest .sprachwahl--kopf { transition: none; }
}

/* Menü (Handy/Tablet): kopf.js setzt die Sprachwahl in die Kopfzeile des Menüs, an dieselbe Stelle wie im Seitenkopf
   (links vom Schliessen-Knopf) – sichtbar ohne Scrollen, auch auf 320 px */
.menue .sprachwahl--menue a { width: 44px; height: 44px; }
.sprachwahl--menue .sprachwahl__strich { margin-inline: -4px; }
.menue__kopf .sprachwahl--menue { margin: 0 18px 0 auto; }   /* wie im Kopf: -14 px Rand + 32 px Lücke zum Knopf */
.menue__fuss .sprachwahl--menue { margin: -6px 0 0 -11px; }   /* ohne kopf.js: wie bisher unter Telefon und E-Mail */

/* Englische Seiten: Hinweis der Grossansicht (main.css/referenzen.css) auf Englisch */
@media (max-width: 767px) and (orientation: portrait) and (pointer: coarse) {
  html[lang^="en"] .lupe--quer .lupe__legende::after { content: "Zoom in with two fingers to read"; }
}
/* Englische Seiten: Anführungszeichen der Kundenstimmen englisch (main.css setzt « ») */
html[lang^="en"] .stimme blockquote p::before { content: "“"; }
html[lang^="en"] .stimme blockquote p::after { content: "”"; }

/* Feiner Goldstaub an den Rändern (assets/js/feinstaub.js): über dem Inhalt, unter Leisten, Kopf und Menü */
.feinstaub { position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none; }
@media print { .feinstaub { display: none; } }

/* ------------------------------------------------------------------ Fixliste 13.10.2026: Kopf, Fuss, Formular */
/* /leistungen und /en/services (Runde 6): die vier Leistungs-Ziele stehen immer gleich hell wie alle anderen Punkte (vorher
   ausserhalb ihres Kapitels gold und damit gedimmt, data-bereich aus kopf.js färbt nicht mehr); das Ziel des Kapitels im Bild
   trägt nur den Goldstrich (main.css), keine Goldschrift */
html:has(main.lr) .kopf__nav a[aria-current="location"]:not(:hover) { color: var(--elfenbein); }

/* Fuss am Handy: jede Tippfläche mindestens 44 × 44 px (TikTok war 43 px breit, englisch «Work» 35 px und «About» 39 px) */
@media (max-width: 767px), (pointer: coarse) { .fuss a { min-width: 44px; } }

/* Anfrageformular ohne JavaScript: der WhatsApp-Knopf würde nur die Feldnamen an wa.me schicken (der Chat bliebe leer) –
   dann nur der funktionierende Weg per E-Mail. Mit JavaScript (html.js, Kopf-Skript) ist er da. */
html:not(.js) .anfrage__wa { display: none; }
/* «Was planen Sie?»: Luft unter der Legende, damit der Fokusrahmen des ersten Kästchens die Schrift nicht anschneidet */
.wahl__liste { padding-top: 8px; }

/* ================================================================== Runde 7 (14.10.2026, Leistungen/Arbeiten/Über uns) */
/* Menü hochkant (Handy, Tablet): die Liste beginnt oben unter dem Kopf, Knopf und Kontakt folgen direkt (390 × 844: vorher ~115 px
   leer über «Magazin»); Tablet hochkant zweispaltig (820 px: vorher eine Spalte mit je ~220 px Leere oben und unten) */
@media (max-width: 1023px) and (orientation: portrait) {
  .menue { grid-template-rows: auto auto 1fr; }
  .menue__nav { align-self: start; padding-block: 18px 30px; }
  .menue__nav li:first-child { border-top: 0; }
  .menue__fuss { align-self: start; }
}
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .menue__nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 48px; }
  .menue__nav a { font-size: clamp(28px, 4.4vw, 40px); padding: 18px 0; }
  .menue__nav { padding-block: clamp(28px, 4vh, 56px) 40px; }
}

/* ================================================================== Runde 9 (menue, 14.10.2026): «Leistungen & Preise» im Menü */
/* Die Preisübersicht war nur über Textlinks erreichbar. Neuer erster Punkt; wo das Menü Spalten hat (Tablet hochkant, Handy quer),
   steht er allein über die ganze Breite, darunter die acht Ziele wie bisher. Ab 1024 px etwas weniger Polster, damit Knopf und
   Kontakt weiterhin ohne Scrollen sichtbar bleiben (1100 × 800). */
.menue.is-offen .menue__nav li:nth-child(9) a { transition-delay: .32s; }
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .menue__nav ol { grid-template-rows: repeat(5, auto); }
  .menue__nav li:first-child { grid-column: 1 / -1; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .menue__nav ol { grid-template-columns: 1fr 1fr auto; grid-template-rows: repeat(4, auto); }
  .menue__nav li:first-child { grid-column: 1 / -1; }
  .menue__nav li:nth-child(4) { border-top: 0; }   /* main.css: Linie oben an Spalte 2 – jetzt beginnen alle Spalten unter Punkt 1 */
  /* 4 Zeilen statt 3: je Zeile 44 px (Polster aus der Schriftgrösse), Knopf bleibt im Bild; schmale Geräte (667 px) etwas
     kleiner, sonst bricht «Social Media» um */
  .menue__nav a { font-size: clamp(20px, 3.4vw, 28px); padding-block: max(6px, calc(22px - .575em)); }
}
@media (min-width: 1024px) { .menue__nav a { padding-block: 8px; } }

/* ================================================================== Runde 9 (stocken, 14.10.2026): Neu laden ohne Stocken
   Inhaber: «beim Aktualisieren stockt es ganz oben». main.js setzt die Klassen (Begründung und Messwerte dort):
   html.kopf-ruhig – bis die Seite steht, wechselt der Kopf seinen Zustand ohne Übergang (nach F5 mitten auf der Seite glitt er
   sonst sichtbar vom Zustand «ganz oben» in den festen: 36 px, Schwarz einblenden, DE / EN schob die Zielzeile zur Seite).
   html.ohne-einblenden / html.wieder – bei «Neu laden» und «Zurück» steht alles sofort da: kein erneutes Einblenden, keine
   Auftritte der Seitenköpfe (beim ersten Besuch und bei jedem Seitenwechsel über Links laufen sie wie bisher). */
html.kopf-ruhig .kopf, html.kopf-ruhig .kopf *, html.kopf-ruhig .kopf ::before, html.kopf-ruhig .kopf ::after { transition: none !important; }
/* Erstes Bild nach F5, bevor main.js läuft (es lädt «async» und kam in den Messungen teils erst nach dem ersten Bild – dann
   sprang der Kopf einmal um 36 px, die Zielzeile um 74 px): bis dahin folgt der Zustand des Kopfs per Scroll-Zeitachse direkt
   der Scroll-Lage und stimmt schon im ersten Bild. Sobald main.js läuft (html.kopf-ruhig, danach html.weich), übernimmt wieder
   die Klasse is-fest mit denselben Werten. Ohne Unterstützung (Firefox): wie bisher über main.js. */
@supports (animation-timeline: scroll()) {
  html.js:not(.kopf-ruhig):not(.weich) .kopf { animation: kopf-vorab linear both; animation-timeline: scroll(root block); animation-range: 12px 13px; }
  @keyframes kopf-vorab { from { background-color: transparent; border-bottom-color: transparent; } to { background-color: var(--schwarz); border-bottom-color: var(--linie); } }
  @media (min-width: 1200px) {
    html.js:not(.kopf-ruhig):not(.weich) .kopf { animation-name: kopf-vorab-breit; }
    html.js:not(.kopf-ruhig):not(.weich) .kopf__zeile { animation: kopf-vorab-zeile linear both; animation-timeline: scroll(root block); animation-range: 12px 13px; }
    html.js:not(.kopf-ruhig):not(.weich) .sprachwahl--kopf { animation: kopf-vorab-sprache linear both; animation-timeline: scroll(root block); animation-range: 12px 13px; }
    @keyframes kopf-vorab-breit { from { background-color: transparent; border-bottom-color: transparent; transform: none; } to { background-color: var(--schwarz); border-bottom-color: var(--linie); transform: translateY(-36px); } }
    @keyframes kopf-vorab-zeile { from { visibility: visible; } to { visibility: hidden; } }
    @keyframes kopf-vorab-sprache { from { max-width: 0; margin: 0 0 0 -32px; visibility: hidden; opacity: 0; } to { max-width: 110px; margin: 0 -14px 0 -18px; visibility: visible; opacity: 1; } }
  }
  @media (min-width: 1200px) and (max-width: 1319px) {
    @keyframes kopf-vorab-sprache { from { max-width: 0; margin: 0 0 0 -24px; visibility: hidden; opacity: 0; } to { max-width: 110px; margin: 0 -14px 0 -10px; visibility: visible; opacity: 1; } }
  }
  /* Ebenso der Inhalt: steht die Seite beim ersten Bild schon tiefer (F5, Zurück, Anker), sind die Einblend-Teile bis zum Start
     von main.js sichtbar statt einen Augenblick schwarz; main.js übernimmt sie dann sichtbar (wieder / im Bild) */
  html.js:not(.kopf-ruhig):not(.weich) [data-reveal] { animation: vorab-da linear both; animation-timeline: scroll(root block); animation-range: 12px 13px; }
  html.js:not(.kopf-ruhig):not(.weich) .abschnitt__kopf[data-reveal] > .titel,
  html.js:not(.kopf-ruhig):not(.weich) .titel[data-reveal] { animation: vorab-titel linear both; animation-timeline: scroll(root block); animation-range: 12px 13px; }
  html.js:not(.kopf-ruhig):not(.weich) [data-reveal] :is(.rs-arbeit img, .ref-stark figure img, .ref-titel img, .titelwand img, .leistung__bild,
    .magazin__titel img, .person img, .rs-galerie img, .ls-galerie img, .ueber__bild img, .dienst__bild img, .ls-beispiel__bild img) {
    animation: vorab-bild linear both; animation-timeline: scroll(root block); animation-range: 12px 13px;
  }
  @keyframes vorab-da { to { opacity: 1; transform: none; } }
  @keyframes vorab-titel { to { opacity: 1; transform: none; translate: 0 0; clip-path: inset(-.3em -.5em -.4em -.5em); } }
  @keyframes vorab-bild { to { clip-path: inset(0); scale: 1; } }
}
/* Einblend-Teile sind keine Scroll-Anker: der Browser merkt sich beim Verlassen die Lage eines Elements und stellt sie nach F5
   daran wieder her – lag dieses Element beim Wiederherstellen noch 22 px tiefer (translate des Einblendens), landete die Seite
   22 px daneben und sprang beim Laden zurück. Anker sind jetzt die ruhigen Eltern (Abschnitte). */
.js [data-reveal] { overflow-anchor: none; }
html.ohne-einblenden [data-reveal], html.ohne-einblenden [data-reveal] *, html.ohne-einblenden [data-reveal]::before,
html.ohne-einblenden [data-reveal]::after, html.ohne-einblenden [data-reveal] ::before, html.ohne-einblenden [data-reveal] ::after { transition: none !important; }
html.wieder .seitenkopf__bild, html.wieder .kicker--strich::before, html.wieder [data-reveal] .partner__balken,
html.wieder .us-kopf .seitenkopf__text > *, html.wieder .us-kopf .us-karte,
html.wieder .kt-kopf .seitenkopf__text > *, html.wieder .kt-kopf .kt-person, html.wieder .kt-wege .kt-feld > * { animation: none !important; }

/* ================================================================== Runde 9 (maengel-start, 14.10.2026) */
/* Menü- und Schliessen-Knopf: der Fokusrahmen liegt im Seitenrand (vorher 5 px vom oberen und rechten Fensterrand, 15 px über das
   Ende der Trennlinie hinaus) – rechte Kante = Linienende, senkrecht mittig in der Kopfzeile; die Tippfläche bleibt 44 px */
.kopf__menu, .menue__zu, .lupe__zu { margin-right: -4px; }
.kopf__menu:focus-visible, .menue__zu:focus-visible, .lupe__zu:focus-visible { outline-offset: -6px; }
/* 15.10.2026: Grossansicht auf jeder Seite gleich – referenzen.css (nach kopf.css geladen) setzte den Knopf wieder auf -10 px; auf
   /arbeiten lag der Rahmen darum 6 px ausserhalb des Inhaltsrands (390: 376 statt 370 px, 1440: 1359 statt 1353 px) */
.lupe .lupe__zu { margin-right: -4px; }
/* Handy quer (844 × 390): drei gleich breite Spalten (vorher 277 / 277 / 142 px, «Über uns» stiess an das Linienende) */
@media (orientation: landscape) and (max-height: 560px) {
  .menue__nav ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Niedrige Handys hochkant (320 × 568): Knopf «Offerte per WhatsApp» und Telefon/E-Mail passen ohne Wischen ins Bild
   (vorher 707 px Inhalt auf 568 px, der Knopf war abgeschnitten) */
@media (max-width: 599px) and (orientation: portrait) and (max-height: 640px) {
  .menue { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .menue__nav { padding-block: 2px 8px; }
  .menue__nav a { font-size: 19px; padding-block: 8.5px; }
  .menue__fuss { gap: 10px; }
  .menue__kontakt { column-gap: 12px; font-size: 13px; }   /* Telefon und E-Mail auf einer Zeile (vorher zwei, 92 px) */
}
/* Neu laden mitten auf der Seite (Handy): die Kontaktleiste steht sofort da, ohne Hereingleiten (main.js) */
html.kopf-ruhig .schnellkontakt { transition: none !important; }
/* Handy quer, sehr niedrig (568 × 320): Knopf und Kontakt passen ohne Wischen ins Bild */
@media (orientation: landscape) and (max-height: 340px) {
  .menue { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .menue__nav { padding-block: 4px; }
  .menue__nav a { padding-block: 6px; }
}