@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  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';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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 {
  --paper: #ffffff;
  --stone: #f0f1ee;
  --ink: #1a1e1d;
  --muted: #66706d;
  --line: #d8dcd6;
  --accent: #0f4c5c;
  --accent-deep: #0a3742;
  --accent-soft: #e2edef;
  /* Kundengalerie unter /rw: neutrales Grau als Seitenhintergrund, damit
     Fotos mit weissem Hintergrund sich abheben, dazu eine duenne Linie um
     jedes Bild. Hoeherer Wert = heller. */
  --galerie-grund: #d9d9d9;
  --galerie-linie: #aeaeae;
  --wrap: 1180px;
  /* Hoehe der Startseiten-Buehne.
     --hero-ziel: Seitenverhaeltnis, das die Buehne anstrebt. 66.67vw ent-
       spricht 3:2 und damit dem Format der meisten Aufnahmen.
     --hero-max: Obergrenze, damit die Buehne den Bildschirm nicht ganz
       ausfuellt. Hoeherer Wert = weniger Beschnitt, aber der Abschnitt
       darunter rueckt weiter nach unten. */
  --hero-ziel: 66.67vw;
  --hero-max: 92vh;
  /* Staerke des Schleiers hinter der Textspalte. 0 = aus, 0.75 = sehr kraeftig.
     Hoeher macht den Text lesbarer, laesst aber weniger vom Foto durch. */
  --hero-schleier: 0.72;
  /* Schriftgroesse der Ueberschrift auf dem Buehnenbild der Startseite.
     Kleinere Werte geben mehr Foto frei. Der mittlere Wert waechst mit der
     Fensterbreite, die beiden aeusseren begrenzen ihn nach unten und oben. */
  --hero-titel: clamp(1.9rem, 4.1vw, 3rem);
  /* Schriftgroesse der Ueberschrift auf den Unterseiten. */
  --seiten-titel: clamp(2rem, 4.2vw, 3.1rem);
  /* Laufweite (Abstand zwischen den Buchstaben) aller Ueberschriften.
     Negative Werte ruecken enger zusammen, positive weiter auseinander.
     0 entspricht dem Normalabstand der Schrift. */
  --titel-laufweite: 0.005em;
  /* Rahmen der Lightbox. Groessere Werte nutzen mehr Bildschirm, lassen aber
     weniger Rand. Hochformate gewinnen dabei am meisten, weil sie an der
     Hoehe haengen. */
  --lb-breite: 88vw;
  --lb-hoehe: 90vh;
  --gap: clamp(2.5rem, 6vw, 5.5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%; height: auto; display: block;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;   /* verhindert das Halte-Menü auf iOS */
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-weight: 600; line-height: 1.16; letter-spacing: var(--titel-laufweite); margin: 0 0 0.6em;
  /* Lange deutsche Komposita wie "Unternehmensfotografie" passen sonst nicht
     auf schmale Bildschirme und schieben die Seite seitlich hinaus. */
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
p { margin: 0 0 1.1em; }
p, li { max-width: 68ch; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--gap); }
.section--stone { background: var(--stone); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: #333c39; }
.muted { color: var(--muted); }

/* ---------- Kopfzeile ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.9rem; }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); line-height: 1.15; flex-shrink: 0; }
.brand b { font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand span { font-size: 0.76rem; color: var(--muted); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.nav a.btn { color: #fff; font-weight: 500; }
.nav a.btn:hover, .nav a.btn:focus-visible { color: #fff; background: var(--accent-deep); }
.nav a.btn[aria-current="page"] { text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 0.78rem 1.4rem; border-radius: 2px; text-decoration: none;
  font-size: 0.98rem; font-weight: 500; border: 1px solid var(--accent);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--accent-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--accent); border-color: #fff; }
.btn--light:hover { background: var(--accent-soft); color: var(--accent-deep); }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 2px; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.9rem; cursor: pointer; }

@media (min-width: 1151px) and (max-width: 1340px) {
  .nav { gap: 0.8rem; }
  .nav a { font-size: 0.85rem; }
  .nav .btn { padding: 0.6rem 0.9rem; font-size: 0.86rem; }
  .brand span { font-size: 0.72rem; }
}

@media (max-width: 1150px) {
  .burger { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0; background: #fff;
    border-bottom: 1px solid var(--line); flex-direction: column;
    align-items: stretch; gap: 0; padding: 0.5rem 1.25rem 1.25rem; margin: 0;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 0.9rem; text-align: center; border-bottom: none; }
}

/* ---------- Bühne ---------- */
/* ---------- Buehne ----------
   Die Bilder liegen als Hintergrund hinter dem Text. Die Hoehe ist ein
   Mindestmass, kein Festmass: Braucht die Ueberschrift mehr Platz, waechst
   die Buehne mit, statt den Text abzuschneiden. */
.hero {
  position: relative; background: var(--ink); overflow: hidden;
  display: flex; align-items: flex-end;
  /* Die Buehne strebt das Format der Fotos an (--hero-ziel) und wird nach
     oben durch --hero-max begrenzt. Als Mindesthoehe, damit sie mitwaechst,
     wenn der Text mehr Platz braucht -- ein festes Mass wuerde ihn
     abschneiden. Kein aspect-ratio: zusammen mit einer Mindesthoehe macht es
     den Kasten auf schmalen Bildschirmen breiter als das Fenster. */
  width: 100%;
  min-height: max(420px, min(var(--hero-ziel), var(--hero-max)));
}
.hero > img, .hero__bilder, .hero__ersatz {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero > img, .hero__ersatz { object-fit: cover; opacity: 0.82; }

/* Zufallsbuehne: drei Bilder uebereinander, das aktive ist sichtbar. */
.hero__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.hero__bild.is-aktiv { opacity: 0.82; }
@media (prefers-reduced-motion: reduce) { .hero__bild { transition: none; } }

.hero__text {
  position: relative; width: 100%;
  padding-block: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(to top, rgba(12,16,15,0.82), rgba(12,16,15,0.18) 58%, rgba(12,16,15,0));
  color: #fff;
  z-index: 1;   /* ueber dem Schleier */
}
/* Der Schleier liegt ueber der ganzen Buehne, nicht nur ueber dem Textkasten:
   sonst entsteht dort, wo der Kasten beginnt, eine sichtbare Kante. Als
   Ellipse von unten links laeuft er nach oben und rechts weich aus, sodass
   die Textspalte ruhig wird und die rechte Bildhaelfte frei bleibt. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to right,
      rgba(12,16,15, var(--hero-schleier)) 0%,
      rgba(12,16,15, calc(var(--hero-schleier) * 0.8)) 32%,
      rgba(12,16,15, calc(var(--hero-schleier) * 0.25)) 60%,
      rgba(12,16,15, 0) 82%),
    linear-gradient(to top,
      rgba(12,16,15, calc(var(--hero-schleier) * 0.5)) 0%,
      rgba(12,16,15, 0) 55%);
}
/* Weicher Schatten als zweite Sicherung an hellen Bildstellen. */
.hero__text h1 { text-shadow: 0 1px 3px rgba(8,11,10,0.55), 0 2px 22px rgba(8,11,10,0.5); }
.hero__text p { text-shadow: 0 1px 3px rgba(8,11,10,0.6), 0 1px 14px rgba(8,11,10,0.5); }
.hero__text h1 {
  max-width: 21ch; color: #fff; margin-bottom: 0.4em;
  /* Bewusst kleiner als die übrigen H1, damit mehr vom Bühnenbild sichtbar
     bleibt. Einstellbar über --hero-titel im Block ganz oben. */
  font-size: var(--hero-titel);
}
.hero__text p { max-width: 52ch; color: #e7eae8; font-size: clamp(1rem, 1.6vw, 1.22rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.7); }
.hero__cta .btn--ghost:hover { background: #fff; color: var(--ink); }

/* Auf schmalen Bildschirmen steht der Text unter dem Bild statt darueber.
   Uebereinander muesste das Band so hoch werden, dass vom Querformat nur
   noch die Haelfte zu sehen waere. */
@media (max-width: 700px) {
  .hero { display: block; min-height: 0; }
  .hero__bilder { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 2; }
  .hero__text { background: var(--ink); padding-block: 1.6rem 2rem; }
  .hero::after { display: none; }
  .hero__text h1, .hero__text p { text-shadow: none; }
  /* Etwas kleinere Ueberschrift, damit die Schaltflaechen auf kurzen
     Bildschirmen noch ueber der unteren Kante liegen. */
  .hero__text h1 { font-size: clamp(1.85rem, 7.4vw, 2.6rem); }
  .hero__cta { margin-top: 1.2rem; }
}

.pagehead { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
/* Die Begrenzung zaehlt in Zeichen und waechst deshalb mit der Schriftgroesse
   mit: Verkleinern allein nimmt einen Umbruch also nicht weg. 40 Zeichen
   reichen fuer die laengste Ueberschrift ("Architektur- und
   Immobilienfotografie") und halten laengere Texte weiter in Grenzen. */
.pagehead h1 { max-width: 40ch; font-size: var(--seiten-titel); }
.crumb { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.2rem; }
.crumb a { color: var(--muted); }

/* ---------- Rasterflächen ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.tile { text-decoration: none; color: var(--ink); display: block; }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(1.02); }
.tile--tall img { aspect-ratio: 3/4; }
.tile h3 { margin: 0.9rem 0 0.3rem; }
.tile p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.tile:hover h3 { color: var(--accent); }

.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
.services > * { grid-column: span 2; }
.services > *:nth-child(1), .services > *:nth-child(2) { grid-column: span 3; }
.services > *:nth-child(1) img, .services > *:nth-child(2) img { aspect-ratio: 3/2; }
.services > *:nth-child(6) { grid-column: span 6; }
.services > *:nth-child(6) img { aspect-ratio: 16/6; }
@media (max-width: 860px) { .services { grid-template-columns: repeat(2, 1fr); } .services > * { grid-column: span 1 !important; } .services > *:nth-child(6) img { aspect-ratio: 3/2; } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

/* ---------- Video ---------- */
.videos { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .videos { grid-template-columns: repeat(2, 1fr); } }
.video { margin: 0; }
.video__frame { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__load {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
  border: 0; padding: 0; font: inherit; text-align: left; color: #fff;
  background: var(--ink); overflow: hidden;
}
.video__load img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease, opacity 0.2s ease; opacity: 0.9;
}
.video__load::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,14,13,0.8) 0%, rgba(10,14,13,0.1) 55%, rgba(10,14,13,0.15) 100%);
}
.video__load:hover img { transform: scale(1.03); opacity: 1; }
.video__load:hover .video__play { background: var(--paper); }
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,0.88); transition: background 0.15s ease;
}
.video__play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--accent);
}
.video__label {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 2;
  font-size: 0.98rem; font-weight: 600; line-height: 1.3;
}
.video__label em { display: block; font-style: normal; font-weight: 400; font-size: 0.78rem; color: #d3dcdf; margin-top: 0.35rem; }
.video figcaption h3 { margin: 1rem 0 0.3rem; }
.video figcaption p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* Reihenlayout wie im Kontaktabzug: Jede Reihe hat eine einheitliche Hoehe,
   oben und unten buendig. Die Breite jeder Kachel richtet sich nach ihrem
   Seitenverhaeltnis (--ar, vom Generator gesetzt), deshalb wird nichts
   beschnitten -- Hoch- und Querformate stehen nebeneinander, jedes vollstaendig. */
.gallery { --gal-abstand: 1.1rem; display: flex; flex-wrap: wrap; gap: var(--gal-abstand); }
.gallery img { width: 100%; height: 100%; display: block; object-fit: contain; }
.gallery__item {
  padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
  position: relative; line-height: 0; min-width: 0;
  aspect-ratio: var(--ar, 1.5);
  flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 15rem);
}
.gallery__item img { transition: opacity 0.15s ease; }
.gallery__item:hover img { opacity: 0.86; }
@media (max-width: 560px) {
  .gallery__item { flex-basis: calc(var(--ar, 1.5) * 9rem); }
}
@media (max-width: 560px) {
  .pagehead h1 { font-size: clamp(1.75rem, 7.6vw, 2.6rem); }
}
/* Platzhalter am Ende: Ohne ihn wuerde die letzte, unvollstaendige Reihe auf
   die volle Breite gedehnt und ihre Bilder viel groesser als die uebrigen.
   Der negative Rand hebt den Abstand auf, den der Platzhalter sonst zusaetzlich
   belegt -- auf schmalen Bildschirmen entstuende dadurch waagerechter Ueberlauf. */
.gallery::after {
  content: ''; flex-grow: 1000000; width: 0;
  margin-left: calc(-1 * var(--gal-abstand));
}
/* Höhere Spezifität als .gallery__item, sonst setzt sich display:block durch. */
.gallery__item[hidden] { display: none; }
.gallery__mehr { margin: 1.6rem 0 0; text-align: center; max-width: none; }
.gallery__mehr .btn { cursor: pointer; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; background: rgba(9,12,11,0.94); padding: 0;
}
.lb[hidden] { display: none; }
/* Hoechstmasse statt festem Rahmen: Jedes Foto wird so gross gezeigt, wie
   der Bildschirm es zulaesst, aber nie ueber seine native Aufloesung hinaus.
   Dadurch bleibt es pixelscharf. Dateien, die kleiner als der Rahmen sind,
   erscheinen entsprechend kleiner -- welche das sind, nennt der Pruefbericht
   von build.py. pointer-events: none, damit ein Klick neben dem Motiv die
   Ansicht schliesst. */
.lb img {
  width: auto; height: auto;
  max-width: var(--lb-breite); max-height: var(--lb-hoehe);
  object-fit: contain;
  pointer-events: none;
}
.lb__nav, .lb__close {
  position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
}
.lb__nav:hover, .lb__close:hover { background: rgba(255,255,255,0.24); }
.lb__close { top: 1rem; right: 1rem; font-size: 1.2rem; }
.lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb__zaehler {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  color: #b9c3c0; font-size: 0.85rem; margin: 0; letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .lb img { max-width: 100vw; max-height: 100vh; }
  .lb__nav { width: 40px; height: 40px; background: rgba(9,12,11,0.55); }
  .lb__close { background: rgba(9,12,11,0.55); }
  .lb__prev { left: 0.5rem; } .lb__next { right: 0.5rem; }
  .lb__zaehler { bottom: 0.6rem; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
}

/* ---------- Fotostrecke in den Referenzen ---------- */
.refshots { position: relative; }
.refshot {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; line-height: 0;
}
.refshot img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: opacity 0.15s ease; }
.refshot:hover img { opacity: 0.88; }
.refshot--versteckt { display: none; }
.refshot__zaehler {
  position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 2;
  background: rgba(9,12,11,0.72); color: #fff; font-size: 0.82rem; font-weight: 500;
  line-height: 1; padding: 0.45rem 0.7rem; border-radius: 2px;
}
.case .video__frame { width: 100%; }
.video__hint { font-size: 0.86rem; color: var(--muted); margin: 0.6rem 0 0; }

/* ---------- Textbausteine ---------- */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* Zwei gleichwertige Textspalten unter einer gemeinsamen Überschrift. Beide
   Spalten haben dieselbe Schriftgröße und beginnen auf derselben Höhe – so
   wirkt keine von beiden gegenüber der anderen verrutscht. */
.split--gleich { grid-template-columns: 1fr 1fr; margin-top: 1.6rem; }
.split--gleich p { margin: 0; max-width: 46ch; }

/* Kontaktzeilen mit vorangestelltem Symbol. Die Symbole uebernehmen Farbe und
   Groesse des Textes, damit die Zeilen eine ruhige Linie bilden. */
.kontaktliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.kontaktliste li { display: flex; align-items: center; gap: 0.7rem; }
.kontaktliste svg { flex: none; width: 1.2em; height: 1.2em; opacity: 0.8; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.facts div { padding: 1.6rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--line); }
.facts h3 { margin-bottom: 0.35rem; }
.facts p { color: var(--muted); margin: 0; font-size: 0.97rem; }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.steps li { list-style: none; counter-increment: s; padding-top: 1.1rem; border-top: 2px solid var(--accent); }
.steps li::before { content: counter(s); display: block; font-size: 0.9rem; color: var(--accent); margin-bottom: 0.5rem; font-weight: 600; }
.steps h3 { margin-bottom: 0.4rem; }
.steps p { color: var(--muted); font-size: 0.97rem; margin: 0; }
ul.steps { padding: 0; margin: 0; }

.checks { padding: 0; margin: 0 0 1.5rem; }
.checks li { list-style: none; padding: 0.55rem 0 0.55rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; }
.checks li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: 8px; height: 8px; background: var(--accent); }

.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.2rem; }
.price h3 { margin-bottom: 0.2rem; }
.price .amount { font-size: 1.5rem; font-weight: 600; color: var(--accent); display: block; margin-bottom: 0.6rem; }
.price p { color: var(--muted); font-size: 0.97rem; }

details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
details summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; float: right; color: var(--accent); font-weight: 400; }
details[open] summary::after { content: '–'; }
details p { margin: 0.8rem 0 0; color: #3c4643; }

.case { border-top: 1px solid var(--line); padding-top: 1.8rem; margin-top: 1.8rem; }
.case:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.case__meta { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.5rem; }

blockquote { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.4; letter-spacing: -0.01em; }
blockquote footer { font-size: 0.95rem; color: var(--muted); margin-top: 1rem; letter-spacing: 0; }

/* ---------- Kontakt ---------- */
.cta { background: var(--accent); color: #fff; }
.cta .split--gleich { margin-bottom: 2rem; }
.cta h2, .cta p { color: #fff; }
.cta p { color: #d9e8eb; }
.cta a:not(.btn) { color: #fff; }

.form { display: grid; gap: 1rem; max-width: 560px; }
.form label { display: block; font-size: 0.92rem; margin-bottom: 0.3rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: 0.75rem 0.85rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form small { color: var(--muted); font-size: 0.85rem; }

.contactcard p { margin-bottom: 0.4rem; }
.contactcard img { width: 190px; border-radius: 2px; margin-bottom: 1.2rem; }

/* ---------- Fußzeile ---------- */
.foot { background: var(--ink); color: #cdd3d1; padding-block: 3.5rem 2rem; font-size: 0.95rem; }
.foot a { color: #cdd3d1; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot h4 { color: #fff; font-size: 0.95rem; margin-bottom: 0.8rem; font-weight: 600; }
.foot ul { padding: 0; margin: 0; list-style: none; }
.foot li { margin-bottom: 0.45rem; }
.foot__bottom { border-top: 1px solid #333a38; margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: #8c9693; }

/* Eigener Seitenhintergrund fuer die beiden Galerieseiten, dazu eine duenne
   Linie an der Bildkante. Sie liegt als Innenschatten auf dem Bild und
   veraendert deshalb weder Groesse noch Anordnung der Kacheln. */
.galeriegrund { background: var(--galerie-grund); }
.galeriegrund .gallery__item::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--galerie-linie);
}

/* Querformat-Übersicht der Kundengalerie: eine Spalte, solange ein Bild keine
   500 Pixel breit werden kann, darüber zwei. Die Umschaltung haengt damit an
   der Bildbreite und nicht an einer festen Fenstergroesse. Das min(...) im
   Innern verhindert, dass die 500 Pixel auf schmalen Displays als Mindestmass
   wirken und die Seite seitlich hinausschieben. Mehr als zwei Spalten koennen
   nicht entstehen, weil der Textbereich hoechstens 1180 Pixel breit wird. */
.gallery--zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
  align-items: start;
}
.gallery--zwei .gallery__item { flex: none; }
.gallery--zwei::after { content: none; }

/* Kopfzeile der Kundengalerie unter /rw: links die Umschaltung zwischen Quer-
   und Hochformat als Reiter, rechts zwei schlichte Verweise auf die Website.
   Diese Seiten tragen bewusst keine Hauptnavigation. */
.rwnav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rwnav a {
  padding: 0.5rem 1.1rem; border: 1px solid var(--line); border-radius: 2px;
  text-decoration: none; color: var(--ink); font-size: 0.95rem; line-height: 1.4;
}
.rwnav a:hover { border-color: var(--accent); color: var(--accent); }
.rwnav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Die Website-Verweise sind keine Reiter und bekommen deshalb keinen Rahmen. */
.rwnav--extern { margin-left: auto; gap: 1.2rem; }
.rwnav--extern a { border: 0; padding: 0.5rem 0; color: var(--muted); }
.rwnav--extern a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 700px) {
  /* Namenszug, Reiter und Verweise stehen untereinander. */
  .rwkopf { flex-wrap: wrap; gap: 0.8rem 1rem; }
  .rwnav--extern { margin-left: 0; }
}
.skip { position: absolute; left: -9999px; background: #fff; padding: 0.7rem 1rem; z-index: 99; }
.skip:focus { left: 1rem; top: 0.6rem; }