/* PIXMEDIA.CH – Gestaltung "Kinobühne"
   Ruhig und edel: der Film trägt die Seite.
   Schrift: nur Archivo in normaler Breite, drei Stärken (300, 400, 500), vier Grössen, keine Versalzeilen.
   Form: runde Rahmen, weiche Übergänge, begrenzte Seitenbreite. Rosa nur für Handlung. */

@font-face {
  font-family: 'Archivo';
  src: url('schriften/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('schriften/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  /* Farben: Graphit in drei Stufen, alle mit demselben leichten Violettstich */
  --grund: oklch(0.235 0.012 300);
  --grund-2: oklch(0.285 0.014 300);
  --grund-3: oklch(0.335 0.016 300);
  --linie: oklch(1 0 0 / 0.11);
  --feldrand: oklch(0.62 0.016 300);
  --text: oklch(0.97 0.004 300);
  --leise: oklch(0.82 0.012 300);
  --rosa: #f650a0;
  --rosa-hell: oklch(0.8 0.15 355);
  --tinte: oklch(0.2 0.012 300);
  /* Masse */
  --breite: 84rem;            /* grösste Breite des Inhalts */
  --buehne: 104rem;           /* grösste Breite der Kopfbühne */
  --rand: clamp(1.125rem, 4vw, 3rem);
  --seite: max(var(--rand), calc((100vw - var(--breite)) / 2));
  --abstand: clamp(4.5rem, 9vw, 8.5rem);
  --leiste-unten: 5.5rem;   /* untere Kante der Leiste mit dem Logo */
  --oben: 8.5rem;   /* Abstand vom oberen Bildschirmrand bis zum ersten Text unter der Leiste: auf allen Seiten und Bildschirmgrössen gleich */
  /* Rundungen: EIN Regler für die ganze Seite. Grösserer Wert = alles runder, kleinerer = alles eckiger, 0 = ganz eckig.
     Zwei Stufen im festen Verhältnis 1 : 2. Knöpfe, Leiste oben, Videos und Bilder sind gleich rund (Vorgabe des Inhabers:
     "so wie der Knopf Kontakt"), nur die Boxen um ganze Abschnitte sind runder. */
  --rundung: 1;
  --r-klein: calc(var(--rundung) * 14px);   /* Knöpfe, Filter, Menü, Suchfeld, Kundenlogos, kleine Bilder, Formularfelder */
  --r: var(--r-klein);                       /* Kacheln, Videos, Bilder, Karte, Karten */
  --r-gross: calc(var(--rundung) * 28px);   /* Boxen um ganze Abschnitte: Kontakt, Schlussbalken */
  /* Schrift: vier Grössen und nicht mehr. Kopf = Überschrift der Seite, Titel = Abschnitte und Leitsätze,
     Text = Fliesstext, Knöpfe und Kachel-Titel (dort fett), Klein = Angaben, Navigation, Fuss */
  --g-kopf: clamp(2.125rem, 4.9vw, 4.5rem);
  --g-titel: clamp(1.75rem, 3.4vw, 3rem);
  --g-text: 1.125rem;
  --g-klein: 0.9375rem;
  /* Schriftstärken: drei und nicht mehr. Leicht = Zusätze (nach einem | im Titel, zweite Zeile eines Satzes),
     Normal (400) = Lauftext und grosse Sätze, Fett = Titel, Knöpfe, Menü */
  --leicht: 300;
  --fett: 500;
  --titel-stark: var(--fett);
  --titel-leicht: var(--leicht);
  /* Zeilenabstände: vier und nicht mehr */
  --zh-titel: 1.1;   /* grosse Titel */
  --zh-satz: 1.2;    /* grosse Sätze */
  --zh-kurz: 1.3;    /* kurze Texte: Titel der Kacheln, Angaben, Adresse, Felder */
  --zh-lese: 1.6;    /* Lauftext */
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --schrift: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  /* Ebenen: Kopfleiste 20, Lichtkasten über <dialog> im Top-Layer */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--rosa) var(--grund); scroll-padding-top: var(--oben); }
/* Scrollbalken in Rosa (Wunsch des Inhabers); für Browser ohne scrollbar-color die ältere Schreibweise */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 12px; height: 12px; background: var(--grund); }
  ::-webkit-scrollbar-thumb { background: var(--rosa); border-radius: 6px; border: 3px solid var(--grund); }
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--g-text);
  font-weight: 400;
  font-stretch: 100%;
  line-height: var(--zh-lese);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rosa);
  overflow-x: clip;
}
/* Leiser Schein hinter allem, damit der Grund nicht flach wirkt */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62rem 40rem at 88% -8%, oklch(0.52 0.15 352 / 0.2), transparent 70%),
    radial-gradient(54rem 42rem at -8% 62%, oklch(0.5 0.08 262 / 0.16), transparent 70%);
}
/* Hintergrund der ganzen Seite: Standbild, darüber der stumme Film; der Inhalt scrollt darüber */
.hintergrund { position: fixed; inset: 0; height: 100lvh; z-index: -1; overflow: hidden; container-type: size; background: var(--grund); }
.hintergrund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: opacity 1.2s ease-in-out; }
/* Übergang vom Standbild zum Film (Wunsch des Inhabers): Sobald der Film läuft, blendet das Standbild über schwarzem Grund aus (1,2 s),
   und der Film blendet kurz danach ein (1,2 s, beginnt nach 0,51 s). Weil sich beide überlappen, wird das Bild in der Mitte nur
   dunkler (30 % Helligkeit, vom Inhaber so gewählt) und nie ganz schwarz. Wird der Film angehalten, kommt das Standbild zurück. */
.hintergrund.laeuft { background: #000; }
.hintergrund.laeuft img { opacity: 0; }
.hintergrund iframe {
  position: absolute; top: 50%; left: 50%; max-width: none;
  /* --f = Format des Films (Breite : Höhe), ohne Angabe 16 : 9. So füllt auch ein Breitbild-Film die Fläche ohne Rand oben und unten. */
  width: max(100cqw, calc(100cqh * var(--f, 1.7778))); height: max(100cqh, calc(100cqw / var(--f, 1.7778)));
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none; color-scheme: light;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hintergrund.laeuft iframe { opacity: 1; transition-delay: 0.51s; }
/* Nur eine Abdunklung beim Öffnen einer Seite (gemessen am 13.10.2026: Seitenwechsel und Filmstart dunkelten kurz hintereinander zweimal ab,
   das flackerte). Erwartet die Seite einen Film im Hintergrund, steht das Standbild darum von Anfang an gedimmt da (30 %, wie der dunkelste
   Moment des Übergangs), und der Film blendet ohne Verzögerung daraus hervor: Es wird nur heller. Kommt kein Film (keine Zustimmung, weniger
   Bewegung, oder er lässt zu lange auf sich warten), setzt seite.js das Zeichen .hell und das Standbild blendet auf volle Helligkeit. */
.js .hintergrund[data-film-sofort]:not(.hell) { background: #000; }
.js .hintergrund[data-film-sofort]:not(.hell):not(.laeuft) img { opacity: 0.3; }
.hintergrund.laeuft:not(.hell) iframe { transition-delay: 0s; }
/* Eigene Hintergrund-Schleife vom eigenen Server */
.hintergrund video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transition: opacity 1.2s ease-in-out; pointer-events: none; }
.hintergrund.laeuft video { opacity: 1; transition-delay: 0.51s; }
html:not(.js) .hintergrund video { opacity: 1; }
/* Schleier über dem Film: oben lässt er mehr Bild durch, nach unten wird er dichter, damit Text lesbar bleibt */
.hintergrund::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--grund) 70%, transparent) 0%, color-mix(in oklch, var(--grund) 82%, transparent) 55%, color-mix(in oklch, var(--grund) 88%, transparent) 100%);
}

::selection { background: var(--rosa); color: var(--tinte); }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: var(--fett); }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--rosa); }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

.symbol { width: 1.15em; height: 1.15em; flex: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: var(--rand); top: -5rem; z-index: 30; background: var(--rosa); color: var(--tinte); padding: 0.7rem 1.1rem; border-radius: var(--r-klein); font-weight: var(--fett); }
.sprung:focus { top: 0.75rem; }

/* Überschriften */
.schlagzeile { font-size: var(--g-titel); font-weight: var(--fett); letter-spacing: -0.02em; line-height: var(--zh-titel); text-wrap: balance; overflow-wrap: break-word; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.6rem 1.6rem;
  border: 1px solid var(--rosa); border-radius: var(--r-klein);
  background: var(--rosa); color: var(--tinte);
  font-size: var(--g-text); font-weight: var(--fett); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.3s var(--aus), border-color 0.3s var(--aus), color 0.3s var(--aus), transform 0.2s var(--aus);
}
.knopf:hover { background: var(--rosa-hell); border-color: var(--rosa-hell); }
.knopf:active { transform: scale(0.98); }
.knopf[disabled] { opacity: 0.6; cursor: progress; }
.knopf--linie { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.28); color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.knopf--linie:hover { background: var(--text); border-color: var(--text); color: var(--tinte); }
.knopf .symbol { transition: transform 0.4s var(--aus); }
a.knopf:hover .symbol { transform: translateX(0.25em); }

/* Kopf: schwebende Glasleiste */
.kopf { position: fixed; inset: 1.5rem 0 auto 0; z-index: 20; padding-inline: var(--seite); pointer-events: none; }
.kopf__leiste {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4rem; padding: 0.5rem 0.625rem 0.5rem 1.5rem;
  border: 1px solid oklch(1 0 0 / 0.13); border-radius: var(--r-klein);
  /* Milchiger Verlauf in Rosa: links beim Logo 25 %, rechts beim Menü 5 %; darunter das dunkle Milchglas.
     Der Verlauf reicht bis unter den Rand und wiederholt sich nicht (sonst beginnt er am rechten Rand als rosa Strich von vorn). */
  --leiste-rosa: linear-gradient(90deg, color-mix(in oklch, var(--rosa) 25%, transparent), color-mix(in oklch, var(--rosa) 5%, transparent));
  background: var(--leiste-rosa), color-mix(in oklch, var(--grund) 58%, transparent);
  background-origin: border-box; background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 18px 44px -26px oklch(0.1 0.02 300 / 0.85);
}
/* Schleier über der Leiste: Was beim Scrollen über die Leiste hinaus nach oben wandert, ist nur noch schwach und milchig zu sehen.
   Er ist vom oberen Bildschirmrand bis knapp unter die Oberkante der Leiste voll da und läuft dann über eine lange Strecke
   in vielen kleinen Stufen aus (weicher Übergang ohne sichtbare Kante), bis ein Stück unter die Leiste. */
.kopf::before {
  --hoehe: calc(var(--leiste-unten) + 4rem);
  --voll: calc(var(--leiste-unten) - 3rem);      /* bis hierhin volle Wirkung */
  --weg: calc(var(--hoehe) - var(--voll));        /* Strecke des Auslaufs */
  content: ''; position: fixed; inset: 0 0 auto 0; height: var(--hoehe); z-index: -1; pointer-events: none;
  background: color-mix(in oklch, var(--grund) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgb(0 0 0 / 1) calc(var(--voll) + var(--weg) * 0), rgb(0 0 0 / 0.93) calc(var(--voll) + var(--weg) * 0.12), rgb(0 0 0 / 0.8) calc(var(--voll) + var(--weg) * 0.25), rgb(0 0 0 / 0.6) calc(var(--voll) + var(--weg) * 0.4), rgb(0 0 0 / 0.4) calc(var(--voll) + var(--weg) * 0.55), rgb(0 0 0 / 0.22) calc(var(--voll) + var(--weg) * 0.7), rgb(0 0 0 / 0.1) calc(var(--voll) + var(--weg) * 0.82), rgb(0 0 0 / 0.03) calc(var(--voll) + var(--weg) * 0.92), rgb(0 0 0 / 0) calc(var(--voll) + var(--weg) * 1));
  mask-image: linear-gradient(to bottom, #000 0, rgb(0 0 0 / 1) calc(var(--voll) + var(--weg) * 0), rgb(0 0 0 / 0.93) calc(var(--voll) + var(--weg) * 0.12), rgb(0 0 0 / 0.8) calc(var(--voll) + var(--weg) * 0.25), rgb(0 0 0 / 0.6) calc(var(--voll) + var(--weg) * 0.4), rgb(0 0 0 / 0.4) calc(var(--voll) + var(--weg) * 0.55), rgb(0 0 0 / 0.22) calc(var(--voll) + var(--weg) * 0.7), rgb(0 0 0 / 0.1) calc(var(--voll) + var(--weg) * 0.82), rgb(0 0 0 / 0.03) calc(var(--voll) + var(--weg) * 0.92), rgb(0 0 0 / 0) calc(var(--voll) + var(--weg) * 1));
}
.kopf__logo { display: block; width: clamp(11rem, 16vw, 15rem); }
.kopf__logo img { width: 100%; }
.kopf__nav { display: flex; align-items: center; gap: 0.25rem; }
.kopf__nav a {
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 2.75rem; padding: 0.4rem 1.1rem; border-radius: var(--r-klein);
  font-weight: var(--fett); font-size: var(--g-klein); text-decoration: none;
  transition: background-color 0.3s var(--aus);
}
.kopf__nav a:hover { background: oklch(1 0 0 / 0.1); }
.kopf__nav a[aria-current] { background: oklch(1 0 0 / 0.16); }
.kopf__nav .symbol { width: 0.9em; height: 0.9em; }
.kopf__schalter { display: none; }
.kopf__schalter span { display: inline-flex; align-items: center; gap: 0.5em; }
.kopf__schalter .auf, .kopf__schalter[aria-expanded='true'] .zu { display: none; }
.kopf__schalter[aria-expanded='true'] .auf { display: inline-flex; }
@media (prefers-reduced-transparency: reduce) {
  .kopf__leiste { background: var(--leiste-rosa), var(--grund-2); background-origin: border-box; background-repeat: no-repeat; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (max-width: 44rem) {
  .kopf { inset-block-start: 0.875rem; }
  .kopf__leiste { min-height: 3.5rem; padding-left: 1.125rem; }
}
/* Menü als Knopf, sobald Logo und Menüpunkte nicht mehr nebeneinander passen (Tablet und Handy). Kommt ein Menüpunkt dazu, diese Breite
   und die gleiche Angabe in seite.js anheben. */
@media (max-width: 60rem) {
  .js .kopf__schalter {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1rem;
    background: oklch(1 0 0 / 0.12); border: 0; border-radius: var(--r-klein);
    font-weight: var(--fett); font-size: var(--g-klein); cursor: pointer;
  }
  .js .kopf__logo { position: relative; z-index: 1; }
  .js .kopf__nav {
    position: fixed; inset: 0; z-index: 0;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem;
    padding: 6rem var(--rand) 2rem;
    background: var(--grund);
    visibility: hidden; opacity: 0;
    transition: opacity 0.35s var(--aus), visibility 0s 0.35s;
  }
  .js .kopf--offen .kopf__nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .js .kopf--offen .kopf__leiste { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; border-color: transparent; box-shadow: none; }
  .js .kopf__nav a { font-size: var(--g-titel); letter-spacing: -0.02em; padding: 0.5rem 1rem; margin-left: -1rem; }
  html:not(.js) .kopf { position: static; padding-block: 1rem; }
  html:not(.js) .kopf__leiste { flex-wrap: wrap; border-radius: var(--r); }
}

/* Handy: Der erste Text sitzt etwas höher unter der Leiste, auf allen Seiten gleich (Projektseite, Kategorie, Kontakt, Startseite nach dem Pfeil) */
@media (max-width: 44rem) { :root { --oben: 7rem; --leiste-unten: 4.75rem; } }

/* Startseite: Bühne mit Film */
.auftakt {
  min-height: min(100dvh, 62rem);
  padding: 8rem var(--seite) clamp(2.5rem, 7vh, 5rem);
  display: grid; align-items: end;
}
.auftakt__titel { font-size: var(--g-kopf); font-weight: var(--fett); letter-spacing: -0.02em; line-height: var(--zh-titel); max-width: 17em; text-wrap: balance; }
.auftakt__vor { display: block; margin-bottom: 0.9rem; font-size: var(--g-text); font-weight: 400; letter-spacing: 0; line-height: var(--zh-kurz); }
.auftakt__lead { max-width: 36rem; margin-top: clamp(1rem, 2.4vh, 1.5rem); font-size: var(--g-text); line-height: var(--zh-lese); text-wrap: pretty; }
.auftakt__taten { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 3vh, 2rem); }
.auftakt__hinweis { margin-top: 0.7rem; font-size: var(--g-klein); color: var(--leise); }
[data-film-schalter] .aus, [data-film-schalter][aria-pressed='true'] .an { display: none; }
[data-film-schalter] .an, [data-film-schalter][aria-pressed='true'] .aus { display: inline-flex; align-items: center; gap: 0.6em; }
@media (max-width: 44rem) {
  .auftakt { min-height: min(100dvh, 46rem); padding-top: 6.5rem; }
}

/* Startseite: Der Auftakt füllt den ersten Bildschirm allein. Der Text steht in der Mitte, unten zeigt ein Pfeil,
   dass es weitergeht; Kunden und Projekte kommen beim Scrollen oder mit einem Klick auf den Pfeil. */
.start { --pfeil-unten: clamp(3rem, 11vh, 6.5rem); }   /* Abstand des Pfeils vom unteren Bildschirmrand */
.start .auftakt { position: relative; min-height: 100svh; align-items: center; padding-bottom: calc(var(--pfeil-unten) + 4.25rem); }
.weiter { position: absolute; left: 50%; bottom: var(--pfeil-unten); translate: -50% 0; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.weiter .symbol { rotate: 90deg; }   /* der Pfeil nach rechts, nach unten gedreht */
/* Nach dem Klick auf den Pfeil beginnt der Kundenabschnitt am oberen Bildschirmrand: Der Satz steht dann genau so weit unter der Leiste wie der Titel auf den Unterseiten */
.start .kunden { padding-top: var(--oben); }

/* Startseite: Kunden als Laufband */
.kunden { padding-block: var(--abstand); }
.kunden__satz { margin-inline: var(--seite); max-width: 30em; font-size: var(--g-titel); font-weight: 400; letter-spacing: -0.02em; line-height: var(--zh-satz); text-wrap: balance; }
/* Zwei Zeilen: die erste in normaler Stärke, die zweite leicht (dieselbe leichte Stufe wie der Zusatz in den Titeln) */
.kunden__zeile { display: block; }
/* Zwei Fassungen eines Textes: .nur-breit für breite Bildschirme, .nur-handy für das Handy (bis 44rem) */
.nur-handy { display: none; }
@media (max-width: 44rem) {
  .nur-breit { display: none; }
  .nur-handy { display: inline; }
  /* Zweite Zeile des Satzes über den Kundenlogos auf dem Handy: Schriftgrösse wie die Titel der Kacheln darunter */
  .kunden__zeile--leicht { font-size: var(--g-text); letter-spacing: normal; line-height: var(--zh-kurz); }
}
/* Die zweite Zeile steht eine Leerzeile tiefer: abgesetzt vom Satz darüber, nah am Laufband darunter */
.kunden__zeile--leicht { margin-top: calc(1em * var(--zh-satz)); font-weight: var(--titel-leicht); }
.kunden__band {
  /* nah am Satz darüber, damit klar ist, dass er zum Laufband gehört */
  display: flex; overflow: hidden; margin: clamp(1.25rem, 2.2vw, 2rem) auto 0; max-width: var(--buehne);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.kunden__wand { display: flex; flex: none; gap: 1rem; padding-right: 1rem; }
/* Logos stehen ganz im Feld, auf weissem Grund, egal welches Format die Datei hat */
.kunden__wand img { width: 5.5rem; height: 5.5rem; object-fit: contain; background: #fff; border-radius: var(--r-klein); }
/* Mit Skript: Das Band wird von seite.js bewegt und lässt sich ziehen und anstossen */
.kunden__band--frei { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.kunden__band--frei.zieht { cursor: grabbing; }
.kunden__band--frei .kunden__wand { animation: none; will-change: transform; }

/* Projekte */
.spielplan { padding: 0 var(--seite) var(--abstand); }
.spielplan--blatt { padding-top: var(--oben); }
.spielplan__titel { max-width: 18em; }
/* Grosser Satz in normaler Stärke, gleiche Schrift wie der Satz über den Kundenlogos; läuft auf einer Zeile, solange der Platz reicht */
.satz { font-size: var(--g-titel); font-weight: 400; letter-spacing: -0.02em; line-height: var(--zh-satz); text-wrap: balance; }
.satz.spielplan__titel { max-width: none; }
.spielplan__wahl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spielplan__kopf > .filter { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.filter a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1.15rem;
  border: 1px solid var(--linie); border-radius: var(--r-klein); background: var(--grund-2);
  font-size: var(--g-klein); font-weight: var(--fett); color: var(--leise); text-decoration: none;
  transition: background-color 0.3s var(--aus), color 0.3s var(--aus), border-color 0.3s var(--aus);
}
.filter a:hover { color: var(--text); border-color: oklch(1 0 0 / 0.3); }
.filter a[aria-current] { background: var(--text); border-color: var(--text); color: var(--tinte); }
.spielplan__leer { padding-block: 3rem; color: var(--leise); }

.suche { flex: 0 1 17rem; }
.suche input {
  width: 100%; min-height: 2.75rem; padding: 0.4rem 1.15rem;
  background: var(--grund-2); color: var(--text);
  border: 1px solid var(--feldrand); border-radius: var(--r-klein);
  font: inherit; font-size: var(--g-klein); line-height: var(--zh-kurz);
  transition: border-color 0.25s var(--aus);
}
.suche input::placeholder { color: var(--leise); opacity: 1; }
.suche input:hover { border-color: var(--text); }
.suche input:focus-visible { border-color: var(--rosa); outline-offset: 0; }
html:not(.js) .suche { display: none; }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.25rem, 3.6vw, 3.25rem) clamp(1rem, 2vw, 1.75rem); margin-top: clamp(2rem, 4vw, 3.25rem); }
.akt__link { display: block; text-decoration: none; }
.akt__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: size; border-radius: var(--r); background: var(--grund-2); transition: box-shadow 0.6s var(--aus); }
.akt__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--aus); }
/* Der Vorschaufilm (16:9) füllt die Kachel immer ganz, auch die grosse erste Kachel, die höher ist als 16:9: Er wird wie das Bild beschnitten, nie verzerrt und ohne Balken */
.akt__bild iframe { position: absolute; top: 50%; left: 50%; max-width: none; width: max(102cqw, calc(102cqh * var(--f, 1.7778))); height: max(102cqh, calc(102cqw / var(--f, 1.7778))); transform: translate(-50%, -50%); border: 0; pointer-events: none; color-scheme: light; opacity: 0; transition: opacity 0.6s var(--aus); }
.akt__bild--film iframe { opacity: 1; }
.akt__bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--aus); pointer-events: none; }
.akt__bild--film video { opacity: 1; }
.akt__link:hover .akt__bild, .akt__link:focus-visible .akt__bild { box-shadow: 0 30px 60px -34px oklch(0.1 0.03 300 / 0.9); }
.akt__link:hover .akt__bild img, .akt__link:focus-visible .akt__bild img { transform: scale(1.045); }
.akt__titel { margin-top: 1rem; font-size: var(--g-text); font-weight: var(--titel-stark); line-height: var(--zh-kurz); text-wrap: balance; overflow-wrap: break-word; }
.akt__daten { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin-top: 0.3rem; font-size: var(--g-klein); color: var(--leise); }
.akt__kat { font-size: var(--g-klein); color: var(--leise); }
/* Das erste Projekt steht gross und füllt zwei Spalten und zwei Reihen */
.akt--gross { grid-column: span 2; grid-row: span 2; }
.akt--gross .akt__link { display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto; height: 100%; }
.akt--gross .akt__bild { aspect-ratio: auto; min-height: 14rem; }
/* Titel eines Eintrags (Übersicht, Seite des Eintrags, Blättern): vorn Stärke 500, der Zusatz ab dem ersten | in 300 */
/* Seite des Eintrags: Titel in derselben Grösse wie die grosse erste Kachel der Übersicht */
.eintrag .auftakt__titel { font-size: var(--g-titel); font-weight: var(--titel-stark); line-height: var(--zh-titel); max-width: 24em; }
.titel__zusatz { font-weight: var(--titel-leicht); }
.akt--gross .akt__titel { font-size: var(--g-titel); letter-spacing: -0.02em; line-height: var(--zh-titel); }
@media (max-width: 64rem) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .akt--gross { grid-row: auto; }
  .akt--gross .akt__link { display: block; height: auto; }
  .akt--gross .akt__bild { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 40rem) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .akt--gross { grid-column: auto; }
  /* Handy im Hochformat: Der Favorit steht nur an erster Stelle, gleich gross wie die anderen. Darum auch sein Titel in derselben Schrift. */
  .akt--gross .akt__titel { font-size: var(--g-text); letter-spacing: normal; line-height: var(--zh-kurz); }
}

/* Film- und Rundgangrahmen */
/* Der Rahmen hat das Format des Films: 16 : 9, bei Breitbild das Format aus --f (setzt das Bauskript) */
.film { position: relative; aspect-ratio: var(--f, 1.7778); overflow: hidden; border-radius: var(--r); background: var(--grund-2); box-shadow: 0 50px 110px -70px oklch(0.08 0.03 300); }
.film > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* color-scheme: light verhindert die weisse Fläche, die Browser hellen Fremdseiten in dunklen Seiten unterlegen */
.film > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: light; background: var(--grund-2); }
/* Lädt ein Inhalt erst nach dem Klick, ist der ganze Rahmen der Startknopf; sichtbar ist das Schild unten links */
.film__start { text-decoration: none; }
.film__start::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.film__knopf {
  position: absolute; z-index: 1; left: clamp(0.875rem, 2vw, 1.75rem); bottom: clamp(0.875rem, 2vw, 1.75rem);
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.6rem 1.5rem; border-radius: var(--r-klein);
  background: var(--rosa); color: var(--tinte); font-weight: var(--fett);
  transition: background-color 0.3s var(--aus);
}
.film__start:hover .film__knopf { background: var(--rosa-hell); }
.film__start:has(.film__knopf):focus-visible { outline: none; }
.film__start:focus-visible .film__knopf { outline: 3px solid var(--text); outline-offset: 3px; }
.film.laeuft > img, .film.laeuft .film__start { display: none; }
/* Mit Cookie-Banner: kurzer Hinweis über dem Knopf, was der Klick lädt */
.film__hinweis {
  position: absolute; z-index: 1; left: clamp(0.875rem, 2vw, 1.75rem); bottom: calc(clamp(0.875rem, 2vw, 1.75rem) + 3.25rem + 0.625rem);
  max-width: calc(100% - 2 * clamp(0.875rem, 2vw, 1.75rem)); padding: 0.3rem 0.7rem; border-radius: var(--r-klein);
  background: color-mix(in oklch, var(--grund) 78%, transparent); color: var(--text); font-size: var(--g-klein); line-height: var(--zh-kurz);
}

/* Eintrag */
/* Kopf der Projektseite: dieselbe Bühne wie auf der Startseite, etwas niedriger; im Hintergrund läuft der Film des Projekts */
.auftakt--eintrag { min-height: 0; align-items: start; padding-top: var(--oben); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.auftakt--eintrag + .produktion__innen { padding-top: 0; }
.produktion__innen { padding: clamp(2.5rem, 5vw, 4.5rem) var(--seite) var(--abstand); }
.produktion__unter { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 2rem; margin-top: 1rem; font-size: var(--g-klein); color: var(--leise); }
/* Kurzinfo unter dem Video: Schrift wie die Kategorie in den Angaben darunter (Grösse des Lauftexts, leise), ohne Unterstrich */
.produktion__filmtitel, .produktion__mehr .zusatz figcaption { font-size: var(--g-text); font-weight: 400; line-height: var(--zh-kurz); color: var(--leise); text-decoration: none; }
.produktion__angaben { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.produktion__fakten { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--r); background: color-mix(in oklch, var(--grund-2) 86%, transparent); }
.fakten { display: grid; gap: 0.85rem; }
.fakten li { display: flex; align-items: baseline; gap: 0.75em; font-weight: var(--fett); line-height: var(--zh-kurz); }
.fakten .symbol { color: var(--rosa); translate: 0 0.18em; }
.fakten .fakten__kat { font-weight: 400; color: var(--leise); }
.fakten .fakten__kat .symbol { color: var(--leise); }
.fakten__kat a { display: inline-block; padding-block: 0.35rem; }
.partner { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.partner img { width: 4.5rem; height: 4.5rem; object-fit: contain; background: #fff; border-radius: var(--r-klein); }
.partner a { display: block; border-radius: var(--r-klein); transition: transform 0.4s var(--aus); }
.partner a:hover { transform: translateY(-3px); }
.produktion__text { max-width: 40em; font-size: var(--g-text); line-height: var(--zh-lese); text-wrap: pretty; }
.produktion__text p + p { margin-top: 1em; }
.produktion__mehr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: var(--abstand); }
.zusatz .film { border-radius: var(--r); }
.zusatz figcaption { margin-top: 0.85rem; font-size: var(--g-klein); color: var(--leise); }

/* Abstand über "Behind The Scenes": kleiner als der grosse Abschnittsabstand (die Galerie gehört zum Projekt darüber), aber grösser als der Abstand vom Film zu den Angaben */
.galerie { margin-top: clamp(3rem, 6vw, 5.5rem); }
/* Titel "Kontakt" und der Galerie ("Behind The Scenes"): dieselbe Schrift wie "Diese Kunden und Partner setzen auf Filme von PIXMEDIA" */
.galerie__titel, .kontakt__titel, .dreid__titel { font-weight: var(--leicht); line-height: var(--zh-satz); }
/* Galerie: Alle Bilder sind gleich hoch, die Breite richtet sich nach dem Format des Bildes (--b = Breite durch Höhe, von bauen.mjs gesetzt).
   Die Höhe ist so gewählt, dass vier Bilder im Format 4:3 (die meisten Fotos) in eine Reihe passen, auf schmaleren Flächen drei oder zwei.
   Jede Reihe füllt die ganze Breite; dafür wird ein Bild höchstens leicht beschnitten. Das ganze Bild zeigt der Klick. */
.galerie__raster { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.galerie__raster li { --h: calc((100cqi - 2.25rem) / 5.34); height: var(--h); flex: var(--b, 1.5) 1 calc(var(--h) * var(--b, 1.5)); min-width: 0; }
.galerie__raster::after { content: ''; flex: 1000 1 0; }   /* die letzte Reihe nicht auseinanderziehen */
.galerie__raster a { display: block; height: 100%; overflow: hidden; border-radius: var(--r-klein); background: var(--grund-2); cursor: zoom-in; }
.galerie__raster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--aus); }
.galerie__raster a:hover img { transform: scale(1.05); }
@container (max-width: 60rem) { .galerie__raster li { --h: calc((100cqi - 1.5rem) / 4.01); } }
@container (max-width: 36rem) { .galerie__raster li { --h: calc((100cqi - 0.75rem) / 2.68); } }

.blaettern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin-top: var(--abstand); }
.blaettern__karte { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; gap: 0.35rem clamp(1rem, 2vw, 1.5rem); align-items: start; padding: 0.75rem; border-radius: var(--r); background: var(--grund-2); text-decoration: none; transition: background-color 0.4s var(--aus); }
.blaettern__karte:hover { background: var(--grund-3); }
.blaettern__bild { grid-row: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-klein); background: var(--grund-3); }
.blaettern__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--aus); }
.blaettern__karte:hover .blaettern__bild img { transform: scale(1.05); }
.blaettern__wohin { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.4rem; font-size: var(--g-klein); color: var(--leise); }
.blaettern__titel { font-size: var(--g-text); font-weight: var(--titel-stark); line-height: var(--zh-kurz); overflow-wrap: break-word; }
@media (max-width: 60rem) {
  .produktion__angaben { grid-template-columns: minmax(0, 1fr); }
  .blaettern { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44rem) {
  /* Handy: Blättern als zwei schmale Zeilen mit kleinem Bild, durch eine Linie vom Projekt darüber abgesetzt.
     So wirken sie als Verweise auf andere Produktionen und nicht als Teil des gezeigten Projekts. */
  .blaettern { gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
  .blaettern__karte { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.875rem; align-content: center; padding: 0.5rem; }
  .blaettern__wohin { margin-top: 0; }
  .blaettern__titel { font-size: var(--g-klein); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}

/* über uns | Kontakt */
/* Einleitung einer Kategorieseite unter dem Titel */
.spielplan__einleitung { max-width: 40em; margin-top: clamp(1rem, 2vw, 1.5rem); color: var(--leise); }
.spielplan__einleitung p + p { margin-top: 0.8em; }
.ueber { padding: var(--oben) var(--seite) var(--abstand); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5rem); }
.ueber__kopf { grid-column: 1 / -1; }
/* Kontaktseite: Titel in der Grösse aller anderen Seitentitel, der Leitsatz als leichte Zeile wie über den Kundenlogos */
.ueber__titel { letter-spacing: -0.02em; line-height: var(--zh-titel); }
.ueber__leitsatz { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 26em; font-size: var(--g-titel); letter-spacing: -0.02em; font-weight: var(--leicht); line-height: var(--zh-satz); text-wrap: balance; }
/* Bild rechts neben dem Text (Kontaktseite). Sein linker Teil liegt hinter dem Text: Dort löst sich der Rand auf und ein milchiger
   Schleier liegt darüber, der nach rechts ausläuft; rechts steht das Bild klar. Der Text bleibt so überall gut lesbar. */
.ueber--mit-bild .ueber__text { grid-column: 1; grid-row: 2; align-self: center; position: relative; z-index: 1; }
.ueber__bild {
  grid-column: 1 / -1; grid-row: 2; justify-self: end; align-self: center; width: 62%; margin: 0;
  position: relative; overflow: hidden; border-radius: var(--r);
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.6) 6%, #000 14%);
  mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.6) 6%, #000 14%);
}
.ueber__bild img { display: block; width: 100%; height: auto; }
.ueber__bild::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Schleier bewusst leicht (Wunsch des Inhabers: links mehr vom Bild sehen): wenig Unschärfe, mässige Tönung, läuft bis zur Bildmitte aus */
  background: color-mix(in oklch, var(--grund) 46%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 16%, rgb(0 0 0 / 0.75) 26%, rgb(0 0 0 / 0.4) 36%, rgb(0 0 0 / 0.12) 45%, transparent 52%);
  mask-image: linear-gradient(to right, #000 0, #000 16%, rgb(0 0 0 / 0.75) 26%, rgb(0 0 0 / 0.4) 36%, rgb(0 0 0 / 0.12) 45%, transparent 52%);
}
.ueber__text { max-width: 38em; }
.ueber__text p + p { margin-top: 1.1em; }
.ueber__text p:first-child { font-size: var(--g-text); font-weight: var(--fett); line-height: var(--zh-kurz); }
.ueber__text { grid-column: 1 / -1; }

.kontakt { margin: 0 var(--seite) var(--abstand); padding: clamp(1.75rem, 5vw, 4.5rem); border-radius: var(--r-gross); background: color-mix(in oklch, var(--grund-2) 90%, transparent); }
/* Links Titel und Angaben (so breit wie ihr Inhalt), rechts die Karte: Sie reicht vom Titel bis zur letzten Zeile */
.kontakt__spalten { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.kontakt address { display: grid; gap: 1.25rem; font-size: var(--g-text); font-weight: var(--fett); line-height: var(--zh-kurz); }
.kontakt address p { display: flex; gap: 0.75em; align-items: baseline; }
.kontakt address .symbol { color: var(--rosa); translate: 0 0.16em; }
/* Karte rechts neben den Kontaktangaben; sie lädt gleich mit der Seite */
.karte { position: relative; min-height: 14rem; border-radius: var(--r); overflow: hidden; background: var(--grund-3); }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; color-scheme: light; }
/* Mit Cookie-Banner steht an Stelle der Karte zuerst ein Knopf; die Karte kommt nach der Zustimmung oder nach dem Klick */
.karte[data-einbetten] { display: grid; place-content: center; justify-items: center; gap: 0.75rem; padding: 1.5rem; text-align: center; }
.karte .film__start::before { content: none; }
.karte__hinweis { font-size: var(--g-klein); color: var(--leise); }
.karte.laeuft .film__start, .karte.laeuft .karte__hinweis { display: none; }
.kontakt__wo { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); align-content: start; }

.formular { display: grid; gap: 1.25rem; align-content: start; }
.feld { display: grid; gap: 0.5rem; }
.feld label { font-size: var(--g-klein); font-weight: var(--fett); }
.feld label span { color: var(--rosa); }
.feld input, .feld textarea {
  width: 100%; padding: 0.85rem 1.1rem;
  background: var(--grund); color: var(--text);
  border: 1px solid var(--feldrand); border-radius: var(--r-klein);
  font: inherit; line-height: var(--zh-kurz);
  transition: border-color 0.25s var(--aus);
}
.feld textarea { resize: vertical; min-height: 9rem; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--leise); opacity: 1; }
.feld input:hover, .feld textarea:hover { border-color: var(--text); }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--rosa); outline-offset: 0; }
.feld input[aria-invalid='true'] { border-color: var(--rosa-hell); }
.feld__fehler { color: var(--rosa-hell); font-size: var(--g-klein); }
.feld--falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.formular .knopf { justify-self: start; }
.formular__meldung { padding: 0.9rem 1.1rem; border: 1px solid var(--feldrand); border-radius: var(--r-klein); font-weight: var(--fett); }
.formular__meldung:empty { padding: 0; border: 0; }
.formular__meldung[data-art='gut'] { border-color: var(--text); }
.formular__meldung[data-art='schlecht'] { border-color: var(--rosa-hell); color: var(--rosa-hell); }
@media (max-width: 60rem) {
  .ueber, .kontakt__spalten { grid-template-columns: minmax(0, 1fr); }
  .karte { min-height: 22rem; }
  /* Schmale Bildschirme: Das Bild steht unter dem Text, ganz und ohne Schleier */
  .ueber--mit-bild .ueber__text { grid-row: auto; }
  .ueber__bild { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .ueber__bild::before { content: none; }
}

/* Pfeile: "nach oben" unten rechts auf jeder Seite (erscheint erst nach etwas Scrollen) und "weiter" im ersten Bildschirm der Startseite.
   Beide rosa wie der Knopf "Kontakt". */
.hinauf, .weiter {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1px solid var(--rosa); border-radius: var(--r-klein);
  background: var(--rosa); color: var(--tinte);
  box-shadow: 0 18px 44px -26px oklch(0.1 0.02 300 / 0.85);
}
.hinauf:hover, .weiter:hover { background: var(--rosa-hell); border-color: var(--rosa-hell); }
.hinauf {
  position: fixed; z-index: 15;
  right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom, 0px));
  transition: opacity 0.35s var(--aus), translate 0.35s var(--aus), background-color 0.25s, color 0.25s, border-color 0.25s, visibility 0.35s;
}
.hinauf .symbol { rotate: -90deg; }   /* der Pfeil nach rechts, nach oben gedreht */
.js .hinauf:not(.sichtbar) { opacity: 0; translate: 0 0.75rem; visibility: hidden; pointer-events: none; }
@media print { .hinauf, .weiter { display: none; } }

/* Datenschutz-Hinweis: kleine Karte unten rechts, erscheint beim ersten Besuch und über "Cookie-Einstellungen" in der Fusszeile.
   "Zustimmen" ist rosa wie die anderen Knöpfe der Seite, "Ablehnen" gleich gross daneben (Vorgabe des Inhabers). */
.hinweis {
  position: fixed; z-index: 25; right: clamp(1rem, 2.5vw, 2rem); bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom, 0px));
  width: min(30rem, calc(100vw - 2 * clamp(1rem, 2.5vw, 2rem))); padding: 1.25rem 1.375rem 1.375rem;
  border: 1px solid oklch(1 0 0 / 0.16); border-radius: var(--r);
  background: color-mix(in oklch, var(--grund-2) 96%, transparent); color: var(--text);
  box-shadow: 0 30px 80px -30px oklch(0.08 0.03 300 / 0.9);
}
.hinweis[hidden] { display: none; }
.hinweis:focus { outline: none; }
.hinweis h2 { font-size: var(--g-text); font-weight: var(--fett); line-height: var(--zh-kurz); }
.hinweis p { margin-top: 0.5rem; font-size: var(--g-klein); line-height: var(--zh-lese); }
.hinweis p a { text-decoration: underline; text-underline-offset: 0.2em; }
.hinweis__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 1rem; }
.hinweis__knoepfe .knopf { justify-content: center; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--g-klein); }

/* Seite 3D-Visualisierungen. Schrift wie überall: Seitentitel fett, Leitsatz und Abschnittstitel leicht in der Titelgrösse,
   Text in der Textgrösse, Erklärungen und Bildunterschriften klein. Die Grafiken der alten Seite haben weissen Grund und stehen auf weissen Feldern. */
.dreid { padding: var(--oben) var(--seite) var(--abstand); }
.dreid__einstieg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.dreid__text { max-width: 38em; }
.dreid__text p + p { margin-top: 1.1em; }
.dreid__text a { text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 0.2em; }
.dreid__abzeichen img { width: 12rem; height: auto; padding: 0.875rem 1.125rem; border-radius: var(--r); background: #fff; }
.dreid__film { margin-top: clamp(2rem, 4vw, 3.25rem); }
.dreid__titel { margin-top: var(--abstand); }
.dreid__schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 0; list-style: none; }
.dreid__schritte li { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: var(--r); background: color-mix(in oklch, var(--grund-2) 90%, transparent); }
.dreid__zeichen { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: var(--r); background: #fff; }
.dreid__zeichen img { width: 4.25rem; height: auto; }
.dreid__schritte h3 { margin-top: 1.25rem; font-size: var(--g-text); font-weight: var(--fett); line-height: var(--zh-kurz); }
.dreid__schritte p { margin-top: 0.4rem; font-size: var(--g-klein); color: var(--leise); }
.dreid__erhalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.dreid__erhalten ul { display: grid; gap: 0.9rem; padding: 0; list-style: none; }
.dreid__erhalten li { position: relative; padding-left: 1.5rem; }
.dreid__erhalten li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rosa); }
.dreid__bild img { width: 100%; height: auto; padding: 1rem; border-radius: var(--r); background: #fff; }
.dreid__beispiele { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.dreid__beispiele .zusatz { margin: 0; }
.dreid__beispiele figcaption a { text-decoration: none; }
.dreid__beispiele figcaption a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 0.2em; }
.dreid__beispiele .titel__zusatz { font-weight: inherit; }
@media (max-width: 60rem) {
  .dreid__einstieg, .dreid__erhalten { grid-template-columns: minmax(0, 1fr); }
  .dreid__bild { max-width: 26rem; }
}
@media (max-width: 44rem) {
  .dreid__schritte, .dreid__beispiele { grid-template-columns: minmax(0, 1fr); }
}

/* Rechtstexte (Impressum, Datenschutzerklärung): eine ruhige Lesespalte in den Schriftstufen der Seite */
.rechtstext { padding: var(--oben) var(--seite) var(--abstand); }
.rechtstext > * { max-width: 44rem; }
.rechtstext h2 { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); font-size: var(--g-text); font-weight: var(--fett); line-height: var(--zh-kurz); }
.rechtstext .titelzeile + h2 { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.rechtstext h3 { margin-top: 1.75rem; font-size: var(--g-klein); font-weight: var(--fett); line-height: var(--zh-kurz); }
/* Lauftext in derselben Grösse und Farbe wie der kleine Text der Fusszeile (Vorgabe des Inhabers) */
.rechtstext p, .rechtstext ul { margin-top: 0.9rem; font-size: var(--g-klein); color: var(--leise); }
.rechtstext ul { padding-left: 1.25em; list-style: disc; }
.rechtstext li + li { margin-top: 0.35rem; }
.rechtstext a { text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.rechtstext a { color: inherit; }
.rechtstext a:hover { color: var(--rosa-hell); }
.rechtstext__stand { margin-top: 2.5rem; font-size: var(--g-klein); color: var(--leise); }

/* Pfeil "zurück": rechts neben dem Seitentitel auf Höhe der ersten Titelzeile; beim Scrollen bleibt er unter der Leiste stehen.
   Der Halter hat keine Höhe und nimmt keinen Platz weg: Er steht als erstes Kind in <main>, beginnt auf Titelhöhe und bleibt dann haften. */
main { display: flow-root; }
.titelzeile { padding-right: 4rem; }
.zurueck-halter {
  --start: calc(var(--oben) + (var(--g-titel) * var(--zh-titel) - 2.5rem) / 2);
  position: sticky; top: calc(var(--leiste-unten) + 0.75rem); z-index: 10; height: 0;
  margin: var(--start) var(--seite) calc(-1 * var(--start)); display: flex; justify-content: flex-end; pointer-events: none;
}
.zurueck {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; pointer-events: auto;
  border: 1px solid var(--linie); border-radius: var(--r-klein); color: var(--leise);
  background: color-mix(in oklch, var(--grund) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.zurueck:hover { color: var(--text); border-color: oklch(1 0 0 / 0.3); background: color-mix(in oklch, var(--grund-3) 80%, transparent); }
.zurueck .symbol { width: 1.1rem; height: 1.1rem; }
.rechtstext > .titelzeile { max-width: none; }

/* Seite nicht gefunden und Antwortseite des Formulars */
.fehlseite { min-height: 80dvh; padding: 9rem var(--seite) 4rem; display: grid; align-content: center; justify-items: start; gap: 1.5rem; }
.fehlseite h1 { font-size: var(--g-kopf); }

/* Abschluss vor dem Fuss: der Weg zum Kontakt */
.ruf {
  margin: 0 var(--seite) var(--abstand); padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-gross);
  background: linear-gradient(120deg, var(--grund-2), var(--grund-3));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.5rem 3rem;
}

/* Fuss */
.fuss { padding: 0 var(--seite) 2.5rem; font-size: var(--g-klein); }
.mit-hintergrund .fuss { background: color-mix(in oklch, var(--grund) 90%, transparent); }
.fuss__spalten { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2fr)); gap: 2rem clamp(1.5rem, 4vw, 4rem); padding-top: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--linie); }
.fuss h2 { font-size: var(--g-klein); font-weight: 400; color: var(--leise); margin-bottom: 0.5rem; }
.fuss a { text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.fuss a:hover { text-decoration: underline; text-decoration-color: var(--rosa); }
.fuss__adresse { display: grid; gap: 0.75rem; align-content: start; }
.fuss .suche { margin-top: 0.5rem; max-width: 17rem; }
.fuss__klein { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; color: var(--leise); }
.fuss__klein a { text-decoration: underline; padding-block: 0.3rem; }
.fuss__klein p:first-child a { margin-right: 1rem; }
.fuss__klein p:nth-child(2) { flex: 1 1 22rem; }
@media (max-width: 52rem) {
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__adresse { grid-column: 1 / -1; }
}

/* Lichtkasten */
/* Geöffnetes Foto der Galerie: ein Fenster über der Seite, 80 % der Breite und Höhe (Wunsch des Inhabers). Die Webseite bleibt rundherum
   abgedunkelt sichtbar, damit das Bild zur Seite gehört und nicht den ganzen Bildschirm füllt. Der Rand des Fensters hält Platz für die Knöpfe frei. */
.lichtkasten { width: 80vw; height: 80dvh; max-width: none; max-height: none; margin: auto; padding: 4.5rem clamp(0.5rem, 6vw, 5.5rem) 3.5rem; border: 0; border-radius: var(--r-gross); overflow: hidden; background: var(--grund); color: var(--text); box-shadow: 0 40px 120px -40px oklch(0.05 0.03 300); }
.lichtkasten[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.lichtkasten::backdrop { background: color-mix(in oklch, var(--grund) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Das Foto hat dieselbe Rundung wie Bilder und Filme auf der Seite. Es wird nie grösser gezeigt, als es ist. */
.lichtkasten__bild { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: var(--r); cursor: zoom-out; }
/* Knöpfe (zurück, weiter, schliessen) in den Farben des Knopfs "Kontakt" */
.lichtkasten button { position: absolute; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: var(--rosa); border: 1px solid var(--rosa); border-radius: var(--r-klein); color: var(--tinte); cursor: pointer; transition: background-color 0.25s var(--aus), border-color 0.25s var(--aus), transform 0.25s var(--aus); }
.lichtkasten button:hover { background: var(--rosa-hell); border-color: var(--rosa-hell); }
.lichtkasten button:active { transform: scale(0.96); }
.lichtkasten button:focus-visible { outline-color: var(--text); }
.lichtkasten button .symbol { width: 1.3rem; height: 1.3rem; }
.lichtkasten [data-zu] { top: 1rem; right: 1rem; }
.lichtkasten [data-vor] { right: 1rem; top: 50%; translate: 0 -50%; }
.lichtkasten [data-zurueck] { left: 1rem; top: 50%; translate: 0 -50%; }
.lichtkasten__zahl { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; font-size: var(--g-klein); color: var(--leise); }
@media (max-width: 44rem) {
  .lichtkasten { padding-inline: 0.5rem; padding-bottom: 4.5rem; }
  .lichtkasten [data-vor], .lichtkasten [data-zurueck] { top: auto; bottom: 0.5rem; translate: none; }
}
/* 3D-Rundgang im grossen Fenster (Seite 3D-Visualisierungen): dasselbe Fenster wie bei den Fotos. Der Rundgang füllt es bis auf den
   Platz oben für den Schliessen-Knopf. */
.lichtkasten--rundgang { padding: 4.5rem 1rem 1rem; }
.lichtkasten--rundgang[open] { place-items: stretch; }
.lichtkasten__rahmen { min-width: 0; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--grund-2); }
.lichtkasten__rahmen iframe { display: block; width: 100%; height: 100%; border: 0; color-scheme: light; }
@media (max-width: 44rem) { .lichtkasten--rundgang { padding: 4.5rem 0.5rem 0.5rem; } }
/* Bewegung: Das Fenster wächst von unten aus der Unschärfe ins Bild und geht beim Schliessen auf demselben Weg zurück
   (die Klasse .zu setzt seite.js kurz vor dem Schliessen); beim Blättern blendet das Foto ein */
@media (prefers-reduced-motion: no-preference) {
  .lichtkasten[open] { animation: kasten-auf 0.6s var(--aus) both; }
  .lichtkasten[open]::backdrop { animation: kasten-grund 0.5s var(--aus) both; }
  .lichtkasten.zu { animation: kasten-zu 0.36s cubic-bezier(0.5, 0, 0.75, 0) both; }
  .lichtkasten.zu::backdrop { animation: kasten-grund-zu 0.36s ease-in both; }
  .lichtkasten__bild.wechsel { animation: kasten-bild 0.4s var(--aus) both; }
}
@keyframes kasten-auf { from { opacity: 0; transform: translateY(3rem) scale(0.84); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes kasten-zu { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(3rem) scale(0.84); filter: blur(12px); } }
@keyframes kasten-grund { from { opacity: 0; } to { opacity: 1; } }
@keyframes kasten-grund-zu { from { opacity: 1; } to { opacity: 0; } }
@keyframes kasten-bild { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* Bewegung: alles kommt weich aus der Unschärfe, das Laufband zieht, Seitenwechsel verschmelzen das Filmbild */
@media (prefers-reduced-motion: no-preference) {
  /* Seitenwechsel (Wunsch des Inhabers): Der Inhalt der alten Seite dunkelt ab, die neue Seite kommt aus dem Dunkeln hervor.
     Die Kopfleiste mit Logo und Menü macht das nicht mit, sie bleibt stehen (eigener Name unten bei .kopf).
     Die Kennung "seite" trennt den Wechsel zwischen Seiten von den Übergängen innerhalb einer Seite (Filter, Start eines Films). */
  @view-transition { navigation: auto; types: seite; }
  html:active-view-transition-type(seite)::view-transition { background: var(--grund); }
  html:active-view-transition-type(seite)::view-transition-old(root) { animation: seite-aus 0.3s ease-in-out both; }
  html:active-view-transition-type(seite)::view-transition-new(root) { animation: seite-ein 0.6s ease-in-out 0.15s both; }
  /* Der Name steht an der Leiste selbst, nicht an .kopf: Ein benanntes Element begrenzt, was seine Kinder als Hintergrund sehen.
     Stand er an .kopf, verloren Leiste und Schleier ihr Milchglas (sie sahen den Inhalt darunter nicht mehr und blieben nur getönt). */
  .kopf__leiste { view-transition-name: kopf; }
  /* Die Leiste wird beim Seitenwechsel nicht überblendet: Die alte verschwindet sofort, die neue steht sofort da. Vorher lagen alte und
     neue Leiste während des ganzen Wechsels voll übereinander und addierten sich auf: Die Leiste blitzte hell auf. (Ursache war
     "animation: none" an der Gruppe; dadurch erbten die beiden Bilder die Dauer null für ihr Aus- und Einblenden.) */
  ::view-transition-old(kopf) { display: none; }
  ::view-transition-new(kopf) { animation: none; mix-blend-mode: normal; }
  /* Sprünge innerhalb der Seite (Menüpunkt "Unsere Werke", Pfeile) gleiten statt zu springen */
  html { scroll-behavior: smooth; }
  ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

  .js .auftakt__text > * { opacity: 0; animation: weich 1.2s var(--aus) forwards; }
  .js .auftakt__text > :nth-child(1) { animation-delay: 0.15s; }
  .js .auftakt__text > :nth-child(2) { animation-delay: 0.3s; }
  .js .auftakt__text > :nth-child(3) { animation-delay: 0.45s; }
  .js .auftakt__text > :nth-child(4) { animation-delay: 0.6s; }
  /* Dieselbe feine Einblendung beim Öffnen auf allen anderen Seiten: Titel, Leitsatz und der erste Inhalt kommen gestaffelt ins Bild.
     (Projektseiten nutzen .auftakt__text wie die Startseite; Kategorieseiten und alles weiter unten blenden über [data-zeig] ein.) */
  .js :is(.ueber__kopf, .dreid__kopf, .dreid__einstieg, .rechtstext, .fehlseite) > * { opacity: 0; animation: weich 1.2s var(--aus) 0.6s forwards; }
  .js :is(.ueber__kopf, .dreid__kopf, .rechtstext, .fehlseite) > :nth-child(1) { animation-delay: 0.15s; }
  .js :is(.ueber__kopf, .dreid__kopf, .rechtstext, .fehlseite) > :nth-child(2) { animation-delay: 0.3s; }
  .js :is(.rechtstext, .fehlseite) > :nth-child(3), .js .dreid__einstieg > :nth-child(1) { animation-delay: 0.45s; }
  .js .zurueck { animation: weich 1.2s var(--aus) 0.3s both; }
  /* Der Pfeil im ersten Bildschirm wippt leicht, damit man ihn bemerkt */
  .weiter { animation: wippen 2.6s ease-in-out 1.6s infinite; }
  .js .hintergrund img { animation: naeher 2.6s var(--aus) both; }

  .js [data-zeig] { opacity: 0; translate: 0 1.75rem; filter: blur(10px); }
  .js [data-zeig].da { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity 1s var(--aus), translate 1s var(--aus), filter 1s var(--aus); }

  .kunden__wand { animation: laufband 70s linear infinite; }
  .kunden__band:hover .kunden__wand { animation-play-state: paused; }
}
@keyframes seite-aus { to { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; } }
@keyframes weich { from { opacity: 0; translate: 0 1.25rem; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes naeher { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes laufband { to { transform: translateX(-100%); } }
@keyframes wippen { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 0.45rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .hintergrund video { display: none; }
  /* Ohne Bewegung stehen die Logos als ruhige Wand */
  .kunden__band { -webkit-mask-image: none; mask-image: none; padding-inline: var(--seite); max-width: none; }
  .kunden__wand { flex: 1; flex-wrap: wrap; padding-right: 0; }
  .kunden__wand[aria-hidden] { display: none; }
}