/* ============================================================
   AVISON — Projekt- und Leistungsseiten (statisch ausgeliefert)
   Eigenes, schlankes Stylesheet: die Seiten laden style.css
   bewusst nicht (das ist die Startseiten-Choreografie), teilen
   aber Tokens, Schriften und Ton. Eine Palette, kein Schalter.
   ============================================================ */

:root {
  color-scheme: light;
  --bg: #e9dac5;
  --bg-soft: #f8f6f3;
  --paper: #f8f6f3;
  --ink: #232425;
  --ink-dim: rgba(35, 36, 37, 0.65);
  --ink-faint: rgba(35, 36, 37, 0.22);
  --accent: #be5e21;
  --on-accent: #f8f6f3;
  --panel-bg: #be5e21;
  --panel-fg: #e9dac5;
  --panel-dim: rgba(233, 218, 197, 0.85);
  --shadow-rgb: 35, 36, 37;

  --font-display: "Chillax", sans-serif;
  --font-type: "Chillax", sans-serif;
  --font-mono: "Chillax", sans-serif;          /* für footer.css */
  --font-serif: "Gambarino", Georgia, serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 4vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; z-index: 99; border-radius: 0 0 8px 0;
  font-family: var(--font-display); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---- Kopfzeile ---- */
.sp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad);
}
.sp-head__logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
}
/* Die Bildmarke besteht aus zwei Farbgruppen: der aeusseren Flaeche
   und den Details im Auge. Beide liegen als eigene SVG-Datei vor und
   werden per Maske eingefaerbt. Auf den Case-Seiten traegt sie die
   Kundenfarben der Uebersichtsfolie (--marke-aussen = Schriftfarbe,
   --marke-innen = Grundfarbe der Folie, gesetzt von case_farben.py),
   auf den Leistungsseiten ohne diese Token die Seitenfarben. */
.sp-mark {
  position: relative;
  display: block;
  width: 2.6rem;
  aspect-ratio: 754 / 602;
  background: var(--marke-aussen, var(--ink));
  -webkit-mask: url("../brand/marke-flaeche.svg") no-repeat center / contain;
  mask: url("../brand/marke-flaeche.svg") no-repeat center / contain;
}
.sp-mark__detail {
  position: absolute;
  inset: 0;
  background: var(--marke-innen, var(--bg));
  -webkit-mask: url("../brand/marke-detail.svg") no-repeat center / contain;
  mask: url("../brand/marke-detail.svg") no-repeat center / contain;
}
.sp-head__back {
  font-family: var(--font-display); font-weight: 500; font-size: 0.9rem;
  color: var(--ink-dim); text-decoration: none;
  border-bottom: 1px solid var(--ink-faint); padding-bottom: 0.15rem;
}
.sp-head__back:hover { color: var(--ink); }

/* ---- Kopfzeile ueber dem Film (Case-Seiten) ----
   Liegt auf dem vollflaechigen Hero. Die Bildmarke behaelt ihre
   Kundenfarben, der Rueckverweis steht in Papier. */
.sp-head--ueber {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3;
  color: #f8f6f3;
}
.sp-head--ueber .sp-head__back { color: rgba(248, 246, 243, 0.85); border-color: rgba(248, 246, 243, 0.4); }
.sp-head--ueber .sp-head__back:hover { color: #f8f6f3; }

/* ---- Film vollflaechig, ein ganzer Bildschirm, die Aussage darauf ----
   Der Film fuellt den Viewport (object-fit: cover, dabei wird je nach
   Fensterform oben/unten oder seitlich beschnitten). Unten liegt die
   Aussage, darunter ein dunkler Schleier, damit die Schrift auf jedem
   Bild steht. Ein Klick auf den Film oeffnet ihn gross mit Ton
   (case.js). */
.sp-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0;
  background: #232425;
  color: #f8f6f3;
  overflow: hidden;
}
.sp-hero video, .sp-hero img, .sp-hero .sp-hero__panel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sp-hero::before, .sp-hero::after {
  content: "";
  position: absolute; left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
}
.sp-hero::before { top: 0; height: 22%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }
.sp-hero::after { bottom: 0; height: 60%; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0)); }
.sp-hero__text {
  position: relative; z-index: 2;
  padding: clamp(4rem, 9vw, 8rem) var(--pad) clamp(2rem, 4vw, 3.5rem);
  /* Der Klick soll den Film oeffnen, nicht am Text haengen bleiben */
  pointer-events: none;
}
.sp-hero__text h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  line-height: 1.08; letter-spacing: -0.02em;
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.sp-hero__text .sp-facts {
  padding: 1.4rem 0 0;
  color: rgba(248, 246, 243, 0.82);
}

/* Typografischer Ersatz, solange ein Keyvisual fehlt */
.sp-hero__panel {
  display: grid; place-items: center;
  background: var(--panel-bg);
}
.sp-hero__panel span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 0.98; letter-spacing: -0.02em;
  color: var(--panel-fg); text-align: center;
}

/* ---- Zu allen Projekten ----
   Ein schlichter Rückweg zur Übersicht, klein und mittig in Chillax.
   Früher stand hier ein großes zweizeiliges „Weiter zu" mit wählbarem
   Ziel; das war lauter als der Inhalt darüber. Der Unterstrich beim
   Hovern kommt aus dem Block TEXT-LINKS weiter unten, die Farbe geht
   in Burnt Orange (CI-Akzent, bewusst nicht die Kundenfarbe). */
.sp-next {
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad) clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}
.sp-next a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sp-next a:hover,
.sp-next a:focus-visible {
  color: #be5e21;                              /* Burnt Orange */
}

/* ============================================================
   PROJEKTDETAILSEITE — Hero, Leistungsstreifen, 3er-Raster
   Aufbau und Datenquelle: assets/js/case.js
   ============================================================ */

/* ---- Kopfzeile: unsere Marke × Kundenlogo ---- */
.sp-head__marken {
  display: inline-flex; align-items: center;
  gap: clamp(0.55rem, 1.1vw, 0.9rem);
}
.sp-head__x {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1;
  opacity: 0.85;
}
.sp-head__kunde {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1;
}
/* Gleich hoch wie unsere Marke (2.6rem breit bei 754:602 ≈ 2.1rem hoch),
   damit beide als Paar auf einer Linie stehen */
.sp-head__kunde img {
  height: 2.1rem; width: auto;
  max-width: clamp(90px, 16vw, 190px);
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.3));
}

/* ---- Das Raster ----
   Drei Spalten, jede Zeile so hoch, dass eine Spalte genau 16:9 ist.
   Die Zeilenhöhe rechnet sich aus der Breite des Inhaltsbereichs
   (Container-Einheit cqw, darum container-type am Abschnitt).
   Fotos und Videos füllen ihre Zelle randlos (object-fit: cover):
     16:9  eine Zelle, passt exakt
     9:16  eine Spalte, zwei Zeilen hoch (plus Abstand) — der Film
           wird dabei oben und unten etwas beschnitten
   Texte füllen eine, zwei oder drei Spalten und eine Zeile; wird ein
   Text länger, wächst seine Zeile mit (minmax), statt ihn
   abzuschneiden. dense füllt Lücken, die Hochkant-Kacheln lassen. */
/* ---- Streifen mit den Leistungen, direkt unter dem Film ---- */
.cs-leistungen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.3rem 0.85rem;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem) var(--pad);
  /* Bewusst die AVISON-Akzentfarbe, nicht die Kundenfarbe: der Rest
     der Seite (Fuss, „Weiter zu") traegt sie auch. Die Kundenfarben
     stecken in der Bildmarke oben links und im Favicon. */
  background: #be5e21;
  color: #f8f6f3;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.cs-leistungen[hidden] { display: none; }
.cs-leistungen__trenner { opacity: 0.6; font-weight: 400; }

.cs-inhalt {
  container-type: inline-size;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
}
.cs-raster {
  --abstand: clamp(0.75rem, 1.6vw, 1.5rem);
  --zeile: calc((100cqw - 2 * var(--abstand)) / 3 * 9 / 16);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--zeile), auto);
  grid-auto-flow: row dense;
  gap: var(--abstand);
}
.cs-raster[hidden] { display: none; }
.cs-inhalt:has(> .cs-raster[hidden]) { display: none; }

.cs-kachel {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
}
/* Medienkachel = Kasten mit Bild/Film + optionaler Untertitel darunter.
   Fläche, Rundung und Beschnitt sitzen auf dem Kasten, nicht auf der
   Kachel — sonst schnitte die Kachel den Untertitel ab. Quer ist der
   Kasten fest 16:9, damit ein Untertitel die Zeile nach unten verlängert
   und die Bilder daneben trotzdem 16:9 bleiben (darunter bleibt dann
   Luft). Hochkant füllt der Kasten die zwei Zeilen und macht dem
   Untertitel Platz. */
.cs-kachel--medium {
  display: flex; flex-direction: column;
  border-radius: 0;
  overflow: visible;
}
.cs-kachel--medium[data-format="9:16"] { grid-row: span 2; }
.cs-kachel__medium {
  position: relative;
  border-radius: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
  background: var(--ink-faint);
}
.cs-kachel--medium[data-format="16:9"] > .cs-kachel__medium { aspect-ratio: 16 / 9; }
.cs-kachel--medium[data-format="9:16"] > .cs-kachel__medium { flex: 1 1 auto; min-height: 0; }
.cs-kachel__medium > img,
.cs-kachel__medium > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Untertitel: klein, linksbündig, direkt unter dem Bild */
.cs-kachel__untertitel {
  margin-top: 0.55rem;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(0.78rem, 0.85vw, 0.86rem);
  line-height: 1.45;
  color: var(--ink-dim);
  text-align: left;
}

/* Texte stehen frei im Raster, ohne Fläche und ohne Rand — sie lesen
   sich wie Satz auf der Seite, nicht wie Karten. Oben bündig mit den
   Bildern daneben. */
.cs-kachel--text {
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 0.8rem;
  border-radius: 0;
  overflow: visible;
}
.cs-kachel--text[data-spalten="2"] { grid-column: span 2; }
.cs-kachel--text[data-spalten="3"] { grid-column: 1 / -1; }
.cs-kachel__titel {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.1; letter-spacing: -0.01em;
  text-wrap: balance;
}
.cs-kachel__text {
  font-family: var(--font-type);
  /* Chillax Regular: eine Stufe duenner als der Rest, dafuer in vollem
     Blue Charcoal statt gedaempft — ruhig, aber praesent. */
  font-weight: 400;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  line-height: 1.6;
  color: #232425;
  max-width: 68ch;
}
.cs-kachel__text p + p { margin-top: 0.7em; }
.cs-kachel__text strong { font-weight: 700; }

/* Plus-Kachel und Steuerleiste (nur Edit-Modus) */
.cs-kachel--plus {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem;
  border: 2px dashed var(--ink-faint);
  background: transparent;
  color: inherit; font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cs-kachel--plus:hover { border-color: var(--ink); }
.cs-kachel--plus svg { width: 3rem; height: 2.4rem; }
.cs-kachel--plus span {
  font-family: var(--font-display); font-weight: 500; font-size: 0.85rem;
}
.cs-kachel .avedit-panel { top: 0.6rem; left: 0.6rem; }
.edit-mode .cs-kachel { cursor: pointer; }
.edit-mode .cs-kachel--text { outline: 1px dashed var(--ink-faint); outline-offset: 6px; padding-top: 2.6rem; }

/* Schmal: zwei Spalten. Quer-Medien und Texte laufen über die volle
   Breite in 16:9, Hochkant-Filme stehen zu zweit nebeneinander in 9:16. */
@media (max-width: 700px) {
  .cs-raster { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  /* Freie Texte brauchen ohne Fläche mehr Abstand zu den Bildern */
  .cs-kachel--text { padding: 1.4rem 0 1.6rem; }
  .cs-kachel--text[data-spalten],
  .cs-kachel--medium[data-format="16:9"] { grid-column: 1 / -1; }
  .cs-kachel--medium[data-format="9:16"] { grid-row: auto; }
  .cs-kachel--medium[data-format="9:16"] > .cs-kachel__medium { flex: none; aspect-ratio: 9 / 16; }
  .cs-kachel--plus { grid-column: 1 / -1; min-height: 8rem; }
  .sp-head__kunde img { height: 1.8rem; max-width: 34vw; }
}

/* Der Fuß (footer.css) sitzt hier auf Almond statt auf Orange: die
   Marke auf der Kante wechselt deshalb die Farben, sonst verschwände
   ihre obere Hälfte im Grund. */
.footer .footer__mark {
  --logo-main: #be5e21;                        /* Burnt Orange */
  --logo-detail: #e9dac5;                      /* Almond */
}

/* ============================================================
   TEXT-LINKS — Unterstrich wie in der Kopfzeile der Startseite
   Von links hinein beim Hovern, nach rechts hinaus beim Verlassen.
   ============================================================ */
.sp-head__back,
.sp-prose a,
.sp-contact a,
.sp-foot a,
.sp-next a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 100% 100%;
  background-size: 0 1px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size 0.45s var(--ease-out), color 0.3s ease;
}
.sp-head__back:hover, .sp-head__back:focus-visible,
.sp-prose a:hover, .sp-prose a:focus-visible,
.sp-contact a:hover, .sp-contact a:focus-visible,
.sp-foot a:hover, .sp-foot a:focus-visible,
.sp-next a:hover, .sp-next a:focus-visible {
  background-position: 0 100%;
  background-size: 100% 1px;
}

@media (max-width: 640px) {
  .sp-gallery { grid-template-columns: 1fr; }
  .sp-facts { flex-direction: column; gap: 0.4rem; }
}

/* ============================================================
   TON-KNOPF und GROSSANSICHT
   Unten rechts auf dem Film beziehungsweise auf der Kachel. Der
   Lautsprecher zeigt an, dass es hier etwas zu hoeren gibt: ein Klick
   darauf — oder irgendwo aufs Video — oeffnet den Film gross, mit Ton
   und mit Leiste zum Vor- und Zurueckspulen. Er kommt, wenn die Maus
   ueber dem Video ist (oder er den Fokus hat); auf Geraeten ohne
   Mauszeiger steht er dauerhaft da.
   ============================================================ */
.sp-hero.hat-ton, .cs-kachel.hat-ton { position: relative; }
.cs-ton {
  position: absolute; z-index: 3;
  right: clamp(0.75rem, 1.6vw, 1.4rem);
  bottom: clamp(0.75rem, 1.6vw, 1.4rem);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0; border-radius: 99px;
  background: rgba(35, 36, 37, 0.62);
  color: #f8f6f3;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.3s;
}
.cs-ton svg { width: 1.4rem; height: 1.4rem; display: block; }
.hat-ton:hover > .cs-ton,
.cs-ton:focus-visible { opacity: 1; transform: none; }
.cs-ton:hover { background: rgba(35, 36, 37, 0.85); }
.cs-ton:focus-visible { outline: 2px solid #f8f6f3; outline-offset: 3px; }
/* Das ganze Video ist anklickbar */
.hat-ton { cursor: pointer; }
/* Ohne Mauszeiger (Handy, Tablet) gibt es kein Hovern */
@media (hover: none) {
  .cs-ton { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-ton { transition: none; }
}

/* ============================================================
   GROSSANSICHT — der Film ueber der Seite
   Ein Klick aufs Video legt es ueber die Seite: schwarzer Grund, der
   Film so gross wie moeglich, mit der Leiste des Browsers zum Spulen
   und mit Ton. Schliessen ueber das Kreuz, Esc oder einen Klick
   daneben (case.js).
   ============================================================ */
.cs-gross {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 3rem);
  background: rgba(12, 12, 13, 0.94);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.cs-gross.is-da { opacity: 1; }
.cs-gross video {
  width: 100%; height: 100%;
  max-width: min(100%, calc((100vh - 6rem) * 16 / 9));
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}
.cs-gross__zu {
  position: absolute; z-index: 2;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 0; border-radius: 99px;
  background: rgba(248, 246, 243, 0.14);
  color: #f8f6f3;
  cursor: pointer;
  transition: background-color 0.3s;
}
.cs-gross__zu svg { width: 1.5rem; height: 1.5rem; display: block; }
.cs-gross__zu:hover { background: rgba(248, 246, 243, 0.3); }
.cs-gross__zu:focus-visible { outline: 2px solid #f8f6f3; outline-offset: 3px; }
/* Waehrend die Grossansicht offen ist, steht die Seite dahinter still */
body.hat-gross { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .cs-gross { transition: none; }
}