/* Colombus — Theme-CSS.
 *
 * Drei Auftritte teilen sich diese Datei:
 *   .hauptseite  colombus.de           hell, Schrift HK Grotesk (weiter unten)
 *   .seite       contact.colombus.app  dunkle Visitenkarten
 *                video.colombus.de     dunkle Videoseite
 *
 * cms-core bringt nichts Sichtbares mit - das Aussehen ist Sache der Site.
 */

/* ---------------------------------------------------------------------------
   Digitale Visitenkarte

   Fuer das Handy gebaut - dort wird sie per QR-Code geoeffnet. Auf groesseren
   Bildschirmen bleibt die Karte deshalb schmal und zentriert.
   --------------------------------------------------------------------------- */

.vcard {
  --karte-breite: 26rem;
  --ton-dunkel: #0f1520;
  --ton-akzent: #3b82f6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem 3rem;
  background: linear-gradient(170deg, var(--ton-dunkel) 0%, #1b2436 100%);
  color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.vcard__karte {
  width: 100%;
  max-width: var(--karte-breite);
  text-align: center;
}

.vcard__logo {
  display: block;
  width: 11rem;
  height: auto;
  margin: 0 auto 1.5rem;
  opacity: .92;
}

.vcard__foto {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.vcard__name { margin: 1.25rem 0 .25rem; font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.vcard__position { margin: 0; color: var(--ton-akzent); font-weight: 500; }
.vcard__firma { margin: .15rem 0 0; color: #94a3b8; font-size: .95rem; }

.vcard__aktionen {
  display: flex;
  gap: .6rem;
  margin: 1.5rem 0 .5rem;
}

.vcard__speichern,
.vcard__teilen-knopf {
  flex: 1;
  padding: .8rem 1rem;
  border-radius: .8rem;
  border: 0;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, filter .12s ease;
}
.vcard__speichern { background: var(--ton-akzent); color: #fff; }
.vcard__teilen-knopf { background: rgba(255, 255, 255, .1); color: #f8fafc; }
.vcard__speichern:hover,
.vcard__teilen-knopf:hover { filter: brightness(1.12); transform: translateY(-1px); }

.vcard__links { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; }

.vcard__link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
  text-decoration: none;
  text-align: left;
  transition: background .12s ease;
}
.vcard__link:hover { background: rgba(255, 255, 255, .12); }

.vcard__adresse {
  margin-top: 1.5rem;
  font-style: normal;
  color: #94a3b8;
  font-size: .9rem;
  line-height: 1.6;
}

/* Teilen-Fenster */
.vcard__dialog {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 15, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.vcard__dialog[hidden] { display: none; }

.vcard__dialog-inhalt {
  position: relative;
  width: 100%;
  max-width: 22rem;
  background: #16203010;
  background-color: #182234;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.vcard__dialog-inhalt h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.vcard__dialog-text { color: #94a3b8; font-size: .9rem; margin-bottom: 1rem; }

.vcard__dialog-schliessen {
  position: absolute;
  top: .5rem;
  right: .75rem;
  background: none;
  border: 0;
  color: #94a3b8;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.vcard__qr { width: 100%; max-width: 13rem; height: auto; border-radius: .6rem; background: #fff; padding: .5rem; }

.vcard__dialog-aktionen { display: flex; gap: .6rem; margin-top: 1.1rem; }
.vcard__dialog-aktionen a {
  flex: 1;
  padding: .7rem;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .1);
  color: #f8fafc;
  text-decoration: none;
  font-size: .9rem;
}

/* Rechtsseiten und Fusszeile */
/* Impressum und Datenschutz - auf der Hauptseite hell, bei Visitenkarten und
   Videoseite dunkel (dort erbt der Text die Farbe von body.seite). */
.rechtsseite { max-width: 48rem; margin: 0 auto; padding: 3rem 1.25rem; line-height: 1.7; }
.rechtsseite h1 { margin-bottom: 1.5rem; }
.hauptseite .rechtsseite { padding-top: calc(var(--kopf-hoehe) + 3rem); }
.hauptseite .rechtsseite h2 { font-size: 22px; margin: 2rem 0 .75rem; }
.hauptseite .rechtsseite a { color: inherit; }

.fusszeile { padding: 2rem 1rem; text-align: center; color: #64748b; font-size: .85rem; }
.fusszeile nav { display: flex; gap: 1.25rem; justify-content: center; margin-bottom: .5rem; }
.fusszeile a { color: inherit; }

/* ---------------------------------------------------------------------------
   Videoseite (video.colombus.de)
   --------------------------------------------------------------------------- */

.video {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 1.25rem;
  background: linear-gradient(170deg, #0f1520 0%, #1b2436 100%);
  color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}

.video__titel { margin: 0; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 650; letter-spacing: -.02em; }
.video__text { max-width: 40rem; color: #94a3b8; line-height: 1.7; }

.video__rahmen {
  width: 100%;
  max-width: 62rem;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #0b1017;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* Der Startknopf ersetzt den Player, bis jemand zustimmt - vorher gibt es
   keine Verbindung zu YouTube. */
.video__start {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: #0b1017;
  color: #f8fafc;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video__start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }

.video__hinweis {
  position: relative;
  padding: 1rem 1.5rem;
  border-radius: .8rem;
  background: rgba(15, 21, 32, .8);
  line-height: 1.5;
}
.video__hinweis small { color: #94a3b8; font-size: .8rem; }

.video__player { width: 100%; height: 100%; border: 0; display: block; }

/* Kartenuebersicht */
.karten {
  min-height: 100vh;
  background: linear-gradient(170deg, #0f1520 0%, #1b2436 100%);
  color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.karten__inhalt { max-width: 44rem; margin: 0 auto; padding: 3rem 1.25rem; }
.karten h1 { text-align: center; margin-bottom: 2rem; }
.karten__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.karten__eintrag {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .06);
  color: inherit;
  text-decoration: none;
}
.karten__eintrag:hover { background: rgba(255, 255, 255, .12); }
.karten__foto { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.karten__eintrag small { display: block; color: #94a3b8; font-size: .85rem; }

/* WLAN-Seite */
.wlan {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: linear-gradient(170deg, #0f1520 0%, #1b2436 100%);
  color: #f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.wlan__karte { max-width: 26rem; text-align: center; }
.wlan__netz { color: #94a3b8; margin-bottom: 1.5rem; }
.wlan__qr { width: 100%; max-width: 18rem; height: auto; background: #fff; padding: 1rem; border-radius: 1rem; }
.wlan__text { margin-top: 1.5rem; color: #94a3b8; line-height: 1.7; text-align: left; font-size: .92rem; }


/* ===========================================================================
   Hauptseite (colombus.de)

   Eine einzige Seite, deren Abschnitte aus dem StreamField kommen. Hell, viel
   Weissraum, feste Kopfzeile - so wie die abgeloeste Seite.

   Die Masse stammen aus der Messung der alten Seite: Grundschrift 18px,
   Ueberschrift 74px mit engem Zeichenabstand, Abschnitte 140px Innenabstand,
   Kopfzeile 85px hoch. Auf schmalen Bildschirmen skaliert das mit clamp().
   =========================================================================== */

@font-face {
  font-family: "HK Grotesk";
  src: url("../webfonts/hkgrotesk-regular-webfont.57edce92139a.woff2") format("woff2"),
       url("../webfonts/hkgrotesk-regular-webfont.877d6af40dee.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HK Grotesk";
  src: url("../webfonts/hkgrotesk-italic-webfont.e0f0bccd2f8b.woff2") format("woff2"),
       url("../webfonts/hkgrotesk-italic-webfont.1843a18ff0ea.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "HK Grotesk";
  src: url("../webfonts/hkgrotesk-semibold-webfont.d3af34350394.woff2") format("woff2"),
       url("../webfonts/hkgrotesk-semibold-webfont.e05106c074dd.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.hauptseite {
  --schrift: "HK Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ton-text: rgb(17, 17, 17);
  --ton-leise: rgb(117, 117, 117);
  --ton-linie: rgb(228, 228, 228);
  --kopf-hoehe: 85px;
  --abschnitt-luft: clamp(4.5rem, 10vw, 140px);
  --seiten-luft: clamp(1.25rem, 5vw, 4rem);
  --breite: 1200px;

  margin: 0;
  background: #fff;
  color: var(--ton-text);
  font: 400 18px/1.7 var(--schrift);
  -webkit-font-smoothing: antialiased;
}

.hauptseite * { box-sizing: border-box; }

/* Grundwerte fuer Ueberschriften. In :where() gesetzt, damit die Regel keine
   Spezifitaet hat: Sonst schluege „.hauptseite h2" (Klasse + Element) jede
   Komponentenklasse wie „.aufruf__titel" (nur Klasse) - und deren Abstaende
   waeren wirkungslos, ohne dass man es dem Stylesheet ansieht. */
:where(.hauptseite) :where(h1, h2, h3) { font-weight: 600; line-height: 1.15; margin: 0; }

/* Wie beim Ueberschriften-Reset in :where(): „.hauptseite a" ist Klasse plus
   Element und schluege sonst jede Komponentenklasse mit nur einer Klasse -
   etwa .karte__verweis oder .einstieg__pfeil. Deren Farben waeren wirkungslos,
   ohne dass man es dem Stylesheet ansieht. */
:where(.hauptseite) :where(a) { color: inherit; }

/* Nur fuer Vorleseprogramme - sichtbar wird es nicht. */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Sprungmarke fuer die Tastatur: erst beim Fokus sichtbar. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--ton-text);
  color: #fff;
  padding: .75rem 1.25rem;
  text-decoration: none;
}
.sprungmarke:focus { left: 1rem; top: 1rem; }

/* --- Kopfzeile ----------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--seiten-luft);
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Sobald gescrollt wurde, legt hauptseite.js diese Klasse an: ueber dem
   hellen Inhalt braucht die Leiste einen eigenen Grund, sonst laufen
   Menuepunkte und Text ineinander. */
.kopf.ist-unterlegt {
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 1px 0 var(--ton-linie);
  /* 85px oben, 65px nach dem Scrollen - beides gemessen. */
  height: 65px;
}

.kopf__logo { display: flex; align-items: center; position: relative; }
.kopf__logo img { display: block; height: 32px; width: auto; }

/* Ueber dem Vollbild-Einstieg das helle Logo, sonst das dunkle. Beide liegen
   im Markup, umgeschaltet wird nur die Sichtbarkeit. */
.kopf--ueber-bild .kopf__logo-hell { position: absolute; inset: 0; }
.kopf--ueber-bild .kopf__logo-dunkel { visibility: hidden; }
.kopf--ueber-bild.ist-unterlegt .kopf__logo-dunkel { visibility: visible; }
.kopf--ueber-bild.ist-unterlegt .kopf__logo-hell { opacity: 0; }
.kopf__logo-hell { transition: opacity .25s ease; }

/* Solange die Leiste ueber dem Foto liegt: helle Schrift. Nach dem Scrollen
   traegt sie „ist-unterlegt", steht auf Weiss und wird wieder dunkel. */
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__menue a { color: #fff; }
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__menue a:hover,
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__menue a.ist-aktiv { color: #fff; border-bottom-color: #fff; }
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__sprachen a { color: rgba(255, 255, 255, .65); }
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__sprachen a[aria-current] { color: #fff; }
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__sprachen li + li::before { color: rgba(255, 255, 255, .4); }
.kopf--ueber-bild:not(.ist-unterlegt) .kopf__schalter { color: #fff; }

/* Menue und Sprachwahl sind zwei Listen - ohne flex am Behaelter stuenden sie
   untereinander und die Leiste waere hoeher als die gemessenen 85px. */
.kopf__menue { display: flex; align-items: center; }

.kopf__menue ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  margin: 0; padding: 0;
}

.kopf__menue a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  color: rgb(85, 85, 85);          /* gemessen auf der abgeloesten Seite */
}
.kopf__menue a:hover,
.kopf__menue a:focus-visible { color: var(--ton-text); border-bottom-color: var(--ton-text); }

/* Der Menuepunkt des Abschnitts, der gerade im Bild ist. */
.kopf__menue a.ist-aktiv { color: var(--ton-text); border-bottom-color: var(--ton-text); }

/* Sprachwahl als „DE|EN": die beiden Kuerzel dicht beieinander, getrennt von
   einem Strich, den das CSS setzt - so steht er nicht als eigener Listenpunkt
   im Markup und wird von Vorleseprogrammen nicht mitgesprochen. */
.kopf__sprachen { margin-left: clamp(1rem, 2vw, 2rem) !important; gap: 0 !important; }
.kopf__sprachen li + li::before {
  content: "|";
  color: var(--ton-linie);
  margin: 0 .55rem;
}
.kopf__sprachen a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ton-leise);
  border-bottom: 0;
}
.kopf__sprachen a:hover { color: var(--ton-text); border-bottom: 0; }
/* Die gerade gezeigte Sprache dunkel, die andere zurueckgenommen. */
.kopf__sprachen a[aria-current] { color: var(--ton-text); }

/* Der Schalter ist nur auf schmalen Bildschirmen da (siehe unten). */
.kopf__schalter {
  display: none;
  position: relative;
  width: 42px; height: 42px;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  color: var(--ton-text);
}
.kopf__schalter-strich,
.kopf__schalter-strich::before,
.kopf__schalter-strich::after {
  position: absolute;
  left: 9px;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.kopf__schalter-strich { top: 20px; }
.kopf__schalter-strich::before { content: ""; top: -7px; left: 0; }
.kopf__schalter-strich::after  { content: ""; top:  7px; left: 0; }

.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::before { transform: translateY(7px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-strich::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt {
  padding: var(--abschnitt-luft) var(--seiten-luft);
  scroll-margin-top: var(--kopf-hoehe);
}

/* Zwischen je zwei Abschnitten eine feine Linie - auf der abgeloesten Seite
   steht dort jeweils ein <hr>. Hier als Rahmen, damit kein leeres Element im
   Markup liegt, das nichts bedeutet.

   Bei Bannern und Karte sitzt die Linie stattdessen unten am Abschnitt davor:
   Deren Fotos reichen bis an die Kante, eine Linie darauf saehe aus wie ein
   Fehler. So liegt sie immer auf dem weissen Teil - wie im Original. */
.abschnitt + .abschnitt { border-top: 1px solid var(--ton-linie); }

/* Die Ausnahme muss dieselbe Spezifitaet haben wie die Regel darueber - mit
   „.abschnitt--cta" allein (eine Klasse gegen zwei) bliebe sie wirkungslos
   und die Banner haetten die Linie zweimal, einmal davon auf dem Foto. */
.abschnitt + .abschnitt--cta,
.abschnitt + .abschnitt--map { border-top: 0; }
.abschnitt:has(+ .abschnitt--cta),
.abschnitt:has(+ .abschnitt--map) { border-bottom: 1px solid var(--ton-linie); }

/* Einstieg und Banner fuellen ihr Bild selbst und brauchen keinen Innenabstand. */
.abschnitt--hero_slide,
.abschnitt--cta,
.abschnitt--map { padding: 0; }

/* Inhalte laufen bis --breite und stehen mittig. Einstieg und Banner sind
   ausgenommen: Sie gehen ueber die volle Fensterbreite, ihr Bild traegt den
   Abschnitt bis an den Rand. */
.abschnitt:not(.abschnitt--hero_slide):not(.abschnitt--cta):not(.abschnitt--map) > * {
  max-width: var(--breite);
  margin-inline: auto;
}

/* Masse aus der abgeloesten Seite: Ueberschriften 46px bei -1.84px
   Zeichenabstand, „Über unser Unternehmen“ 52px, die Leistungen 32px. */
.abschnitt__titel {
  font-size: clamp(1.75rem, 3.4vw, 46px);
  letter-spacing: -.04em;
  margin-bottom: .75rem;
  text-align: center;
}

.abschnitt__einleitung {
  max-width: 62rem;
  margin-inline: auto;
  color: var(--ton-leise);
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.abschnitt__einleitung p { margin: 0 0 1rem; }
.abschnitt__einleitung p:last-child { margin-bottom: 0; }

/* Linksbuendige Abschnitte - Leistungen und Zertifikate stehen so auf der
   abgeloesten Seite. */
.kacheln--links .abschnitt__titel,
.zertifikate .abschnitt__titel { font-size: clamp(1.5rem, 2.6vw, 32px); letter-spacing: -.02em; }
.kacheln--links .abschnitt__titel,
.kacheln--links .abschnitt__einleitung,
.zertifikate .abschnitt__titel,
.zertifikate .abschnitt__einleitung { text-align: left; margin-inline: 0; max-width: none; }

.ueber-uns .abschnitt__titel { font-size: clamp(1.9rem, 3.8vw, 52px); }

/* --- Knoepfe ------------------------------------------------------------- */

.knopf {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 4px;
  border: 2px solid var(--ton-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.knopf--primary { background: var(--ton-text); color: #fff; }
.knopf--primary:hover { background: transparent; color: var(--ton-text); }
.knopf--secondary { background: transparent; color: var(--ton-text); }
.knopf--secondary:hover { background: var(--ton-text); color: #fff; }


/* --- Einstieg (Vollbild) -------------------------------------------------- */

.einstieg {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: var(--kopf-hoehe) var(--seiten-luft) 6rem;
}

.einstieg__bilder { position: absolute; inset: 0; background: #111; }

.einstieg__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.einstieg__bild.ist-sichtbar { opacity: 1; }

/* Schleier wie auf der abgeloesten Seite: flach, 30 %, im Ton 34,34,34 - kein
   Verlauf. Damit stehen die weissen Begriffe auf den hellen Stoffbildern. */
.einstieg__bilder::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(34, 34, 34, .3);
}

.einstieg__inhalt { position: relative; max-width: 60rem; }

.einstieg__begriffe {
  display: grid;                /* alle Begriffe liegen uebereinander */
  font-size: clamp(2.4rem, 9vw, 74px);
  letter-spacing: -.03em;
  min-height: 1.2em;
  margin: 0;
}
.einstieg__begriff,
.einstieg__zeile {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .6s ease, transform .6s ease;
}
.einstieg__begriff.ist-sichtbar,
.einstieg__zeile.ist-sichtbar { opacity: 1; transform: none; }

.einstieg__untertitel {
  display: grid;
  margin: 1.75rem 0 0;
  min-height: 3.4em;
  /* gemessen: 22px, halbfett, leicht gesperrt */
  font-size: clamp(1rem, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: .045em;
}

.einstieg__pfeil {
  position: absolute;
  bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  /* Hell wie Logo und Menue darueber. Die abgeloeste Seite setzt ihn dunkel;
     auf den hellen Fabrikfotos ist er so aber kaum zu erkennen. */
  color: #fff;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  animation: einstieg-tippen 2.4s ease-in-out infinite;
}

@keyframes einstieg-tippen {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, .5rem); }
}

/* --- Kachelraster (Leistungen und Produktgruppen) ------------------------- */

.kacheln__liste {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr));
}
.kacheln--2spalten .kacheln__liste { --spalten: 2; }
.kacheln--3spalten .kacheln__liste { --spalten: 3; }
.kacheln--4spalten .kacheln__liste { --spalten: 4; }

/* Symbol, Titel und Text jeder Kachel sollen ueber alle Kacheln hinweg auf
   derselben Linie sitzen. Ohne subgrid rutscht der Text einer Kachel mit
   zweizeiligem Titel nach unten. Wo subgrid fehlt, bleibt es beim natuerlichen
   Fluss - lesbar ist es dann trotzdem. */
.kacheln__liste { grid-template-rows: auto auto auto; }
.kachel {
  text-align: center;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  /* Das Unterraster erbt sonst den Zeilenabstand der Liste (mehrere Zentimeter)
     und reisst Symbol, Titel und Text weit auseinander. Der Abstand innerhalb
     einer Kachel kommt aus den Margins darunter. */
  row-gap: 0;
}
.kachel__symbol { display: block; height: 72px; width: auto; margin: 0 auto 1rem; align-self: end; }
.kachel__titel  { font-size: 22px; letter-spacing: -.02em; margin: 1rem 0 .75rem; }
.kachel__text   { margin: 0; color: var(--ton-leise); font-size: 16px; line-height: 1.65; }

/* --- Ueber uns ------------------------------------------------------------ */

.ueber-uns__kopf {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.ueber-uns__einleitung { font-size: clamp(1.15rem, 2vw, 24px); font-weight: 600; letter-spacing: -.04em; line-height: 1.35; }
.ueber-uns__einleitung p { margin: 0; }

/* Die Standortzeile steht auf der abgeloesten Seite mittig und kursiv in einer
   Serifenschrift - der einzige Ort, an dem die Seite davon Gebrauch macht. */
.ueber-uns__standorte {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 24px);
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.ueber-uns__texte {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  color: var(--ton-leise);
  font-size: 16px;
  line-height: 1.65;
}
.ueber-uns__absatz p { margin: 0; }

.ueber-uns__film {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
  text-decoration: none;
}
.ueber-uns__film img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.ueber-uns__abspielen {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  transition: background-color .2s ease;
}
.ueber-uns__film:hover .ueber-uns__abspielen { background: rgba(255, 255, 255, .18); }
.ueber-uns__filmtext {
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* Die Stimmen liegen uebereinander und wechseln einzeln - gemessen: 24px,
   normal, mittig; der Name darunter 18px. */
.ueber-uns__zitate {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  text-align: center;
}
.ueber-uns__zitat {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.ueber-uns__zitat.ist-sichtbar { opacity: 1; pointer-events: auto; }

.ueber-uns__zitate blockquote {
  margin: 0 auto .9rem;
  max-width: 52rem;
  font-size: clamp(1.05rem, 2vw, 24px);
  line-height: 1.5;
}
.ueber-uns__zitate cite { font-style: normal; font-size: 18px; color: var(--ton-leise); }

/* --- Zertifikate ----------------------------------------------------------
   Links eine Collage der Siegel, rechts Namen und Erklaerungen. Die Masse
   stammen von der abgeloesten Seite: drei Bilder zu je 255px Breite, um 218px
   nach rechts und um 120 bzw. 159px nach unten versetzt. */

.zertifikate__spalten {
  display: grid;
  grid-template-columns: minmax(0, 748fr) minmax(0, 510fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.zertifikate__collage {
  position: relative;
  /* Hoehe des hoechsten Bildes plus groesster Versatz. */
  min-height: 490px;
}
.zertifikate__collage img {
  position: absolute;
  top: 0; left: 0;
  width: 255px;
  max-width: 37%;
  height: auto;
}
.zertifikate__collage img:nth-child(2) { left: 218px; top: 120px; }
.zertifikate__collage img:nth-child(3) { left: 436px; top: 159px; }
/* Ab dem vierten Siegel endet die Staffelung - sie liefen sonst aus dem Bild.
   Weitere Eintraege stehen dann in der Liste rechts, ohne Logo links. */
.zertifikate__collage img:nth-child(n + 4) { display: none; }

.zertifikate__liste { margin: 0; }
.zertifikate__liste dt {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 2.25rem;
}
.zertifikate__liste dt:first-child { margin-top: 0; }
.zertifikate__liste dd {
  margin: .5rem 0 0;
  color: var(--ton-leise);
  font-size: 16px;
  line-height: 1.65;
}
.zertifikat__aussteller { display: block; font-size: 14px; margin-bottom: .35rem; }
.zertifikat__mehr { display: inline-block; margin-left: .75rem; font-size: 15px; font-weight: 600; }

@media (max-width: 860px) {
  .zertifikate__spalten { grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Bildschirmen wird aus der Collage eine schlichte Reihe -
     versetzt gestapelt braeuchte sie mehr Breite, als da ist. */
  .zertifikate__collage {
    position: static;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
  }
  .zertifikate__collage img { position: static; width: auto; max-width: 30%; max-height: 120px; }
  .zertifikate__collage img:nth-child(2),
  .zertifikate__collage img:nth-child(3) { left: auto; top: auto; }
  .zertifikate__collage img:nth-child(n + 4) { display: block; }
}

/* --- Handlungsaufruf ------------------------------------------------------
   Masse aus der abgeloesten Seite: 600px hoch, randlos ueber die volle Breite,
   Bild formatfuellend mit dunklem Schleier darueber, heller Knopf mit
   Versalien. Zwei Bauformen - siehe cms_core/blocks/cta.html. */

.aufruf {
  position: relative;
  min-height: 600px;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  background-color: rgb(27, 27, 27);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /* Das Foto bleibt beim Scrollen stehen, der Abschnitt wandert darueber. */
  background-attachment: fixed;
}

/* Der Schleier liegt ueber dem Bild, damit weisse Schrift darauf lesbar bleibt.
   Wo Fliesstext steht, war er auf der abgeloesten Seite schwaecher. */
.aufruf::after {
  content: "";
  position: absolute; inset: 0;
  /* gemessen: rgba(34,34,34,...), nicht reines Schwarz - das Foto bleibt so
     farbiger, als es ein schwarzer Schleier zuliesse. */
  background: rgba(34, 34, 34, .5);
}
.aufruf--mit-text::after { background: rgba(34, 34, 34, .3); }

.aufruf__inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1258px;
  margin-inline: auto;
  padding: 3rem var(--seiten-luft);
}

.aufruf__titel {
  letter-spacing: -.03em;
  margin: 0 0 60px;
}
.aufruf--gross .aufruf__titel { font-size: clamp(2rem, 5vw, 72px); }
.aufruf--mit-text .aufruf__titel { font-size: clamp(1.5rem, 3vw, 40px); margin-bottom: .5rem; }

.aufruf__text {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 60px;
}

.aufruf__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

/* Heller Knopf mit Versalien - anders als die dunklen Knoepfe im Fliesstext. */
.aufruf .knopf {
  padding: 14px 38px 15px;
  border-radius: 3px;
  border: 2px solid transparent;
  font-size: 15px;
  letter-spacing: .065em;
  text-transform: uppercase;
  width: auto;
}
.aufruf .knopf--primary { background: rgba(255, 255, 255, .9); color: var(--ton-text); }
.aufruf .knopf--primary:hover { background: #fff; color: var(--ton-text); }
.aufruf .knopf--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .9); }
.aufruf .knopf--secondary:hover { background: rgba(255, 255, 255, .9); color: var(--ton-text); }

@media (max-width: 860px) {
  /* Die abgeloeste Seite schaltet hier auf „scroll" um - und das zu Recht:
     Auf Beruehrgeraeten ist „fixed" unzuverlaessig, iOS ignoriert es und
     zeigt das Bild verzerrt. */
  .aufruf { background-attachment: scroll; }
}

@media (max-width: 620px) {
  .aufruf { min-height: 300px; }   /* gemessen auf der abgeloesten Seite */
  .aufruf__titel, .aufruf__text { margin-bottom: 1.5rem; }
}

/* --- Moodboard ------------------------------------------------------------ */

.moodboard__filter {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .75rem;
}
.moodboard__filter button {
  font: inherit; font-size: 15px; font-weight: 600;
  padding: .6rem 1.4rem;
  border: 1px solid var(--ton-linie);
  border-radius: 999px;
  background: #fff;
  color: var(--ton-leise);
  cursor: pointer;
}
.moodboard__filter button.ist-aktiv { background: var(--ton-text); border-color: var(--ton-text); color: #fff; }

.moodboard__bilder {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.moodboard__bild img { display: block; width: 100%; height: auto; border-radius: 4px; }
.moodboard__bild figcaption { margin-top: .5rem; font-size: 14px; color: var(--ton-leise); }
.moodboard__bild[hidden] { display: none; }

/* --- Kontakt --------------------------------------------------------------
   Masse aus der abgeloesten Seite: drei Wege nebeneinander mit 54px-Kreis,
   Titel 22px, Text 18px in Grau, Verweis 12px in Versalien. Das Formular ist
   1044px breit, die Felder 55px hoch mit hauchduennem Rahmen. */

.kontakt__wege {
  list-style: none;
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: 1044px;
  margin-inline: auto;
}
.kontakt__wege li { display: flex; gap: 1.1rem; align-items: flex-start; }

.kontakt__kreis {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ton-text);
  color: #fff;
  display: grid;
  place-items: center;
}

.kontakt__titel { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: .3rem; }
.kontakt__text  { font-size: 18px; color: var(--ton-leise); font-style: normal; line-height: 1.5; }

.kontakt__verweis {
  display: inline-block;
  margin-top: .6rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.kontakt__formular { max-width: 1044px; margin-inline: auto; }

/* Name und E-Mail nebeneinander, alles Weitere darunter - wie auf der
   abgeloesten Seite. Ueber die Feldnamen adressiert und nicht ueber
   :nth-of-type: Sonst verschoebe sich das Layout, sobald ein Feld dazukommt
   oder wegfaellt (das Koederfeld ist ebenfalls ein div). */
.formular { display: grid; gap: 0 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formular > * { grid-column: 1 / -1; }
.formular__feld--name,
.formular__feld--email { grid-column: span 1; }

.formular__feld { margin-bottom: 1.25rem; }
.formular__feld label { display: block; font-size: 20px; font-weight: 600; margin-bottom: .5rem; }
.formular__feld label span { color: #b91c1c; margin-left: .15rem; }

/* Einwilligung: Kaestchen und Text in einer Zeile. */
.formular__feld--haken { display: flex; align-items: flex-start; gap: .6rem; }
.formular__feld--haken label { margin: 0; font-weight: 400; font-size: 15px; }
.formular__feld--haken input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; }

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular textarea,
.formular select {
  font: inherit; font-size: 16px;
  width: 100%;
  min-height: 55px;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 0;
  background: #fff;
  color: var(--ton-text);
}
.formular textarea { min-height: 130px; resize: vertical; }
.formular :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--ton-text);
  outline-offset: 1px;
  border-color: var(--ton-text);
}

.formular__hinweis { margin: .35rem 0 0; font-size: 13px; color: var(--ton-leise); }
.formular__fehler  { margin: .35rem 0 0; font-size: 14px; color: #b91c1c; }
.formular__einwilligung { font-size: 13px; color: var(--ton-leise); margin-bottom: 1.5rem; }

/* Koederfeld gegen Formularroboter: fuer Menschen unerreichbar, fuer Programme,
   die stur alles ausfuellen, sichtbar. Nicht display:none - daran erkennen
   manche Roboter die Falle. */
.formular__koeder {
  position: absolute;
  left: -10000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .formular { grid-template-columns: minmax(0, 1fr); }
  .formular__feld--name,
  .formular__feld--email { grid-column: 1 / -1; }
}


/* --- Karte ----------------------------------------------------------------
   Randloses Band unter dem Kontakt, wie auf der abgeloesten Seite. */

.karte { position: relative; line-height: 0; }
.karte__rahmen {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}
.karte__verweis {
  position: absolute;
  right: 1rem; bottom: 1rem;
  background: rgba(255, 255, 255, .92);
  color: var(--ton-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: .7rem 1.1rem;
  border-radius: 3px;
}
.karte__verweis:hover { background: #fff; }

@media (max-width: 620px) {
  .karte__rahmen { height: 300px; }
}

/* --- Fusszeile ------------------------------------------------------------ */

.fusszeile--hell {
  position: relative;
  background: var(--ton-text);
  color: rgba(255, 255, 255, .7);
  padding: 3rem var(--seiten-luft);
}
.fusszeile--hell a { color: #fff; }
.fusszeile__rechtliches { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1rem; }
.fusszeile__rechtliches a { font-size: 15px; }

.fusszeile__hoch {
  position: absolute;
  right: var(--seiten-luft);
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
}
.fusszeile__hoch::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 10px; height: 10px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* --- Schmale Bildschirme --------------------------------------------------- */

@media (max-width: 860px) {
  .hauptseite { font-size: 17px; }

  .kopf__schalter { display: block; }

  /* Zugeklappt liegt das Menue ausserhalb des Bildes statt auf display:none -
     so laesst es sich einblenden und bleibt fuer Vorleseprogramme in der
     richtigen Reihenfolge. */
  .kopf__menue {
    position: fixed;
    inset: var(--kopf-hoehe) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--ton-linie);
    padding: 1.5rem var(--seiten-luft) 2rem;
    transform: translateY(-120%);
    transition: transform .28s ease;
    max-height: calc(100svh - var(--kopf-hoehe));
    overflow-y: auto;
  }
  .kopf__menue.ist-offen { transform: none; }

  /* Die Leiste stellt Menue und Sprachwahl nebeneinander; aufgeklappt gehoert
     die Sprachwahl unter die Menuepunkte, nicht neben „Produkte". */
  .kopf__menue { flex-direction: column; align-items: flex-start; }
  .kopf__menue ul { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .kopf__menue a { font-size: 18px; }
  .kopf__sprachen {
    flex-direction: row !important;
    margin: 1.5rem 0 0 !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid var(--ton-linie);
    width: 100%;
  }

  /* Ist das Menue offen, bleibt die Leiste unterlegt - sonst stuende das Logo
     auf dem weissen Menue ohne Abgrenzung. */
  .kopf:has(.kopf__menue.ist-offen) { background: #fff; }
  /* Das aufgeklappte Menue liegt auf weissem Grund - helle Schrift waere
     darauf unsichtbar, also hier zurueck auf dunkel. */
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__logo-dunkel { visibility: visible; }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__logo-hell { opacity: 0; }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__schalter { color: var(--ton-text); }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__menue a { color: rgb(85, 85, 85); }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__sprachen a { color: var(--ton-leise); }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__sprachen a[aria-current] { color: var(--ton-text); }
  .kopf--ueber-bild:has(.kopf__menue.ist-offen) .kopf__sprachen li + li::before { color: var(--ton-linie); }

  .kacheln__liste { --spalten: 2 !important; gap: 2rem; }
  .ueber-uns__kopf { grid-template-columns: minmax(0, 1fr); }
  .einstieg__untertitel { min-height: 4.5em; }
  /* „position: static" wuerde den Pfeil darin (ein absolut gesetztes ::before)
     an die Fusszeile haengen statt an den Knopf - er landete daneben. */
  /* „position: static" wuerde den Pfeil darin (ein absolut gesetztes ::before)
     an die Fusszeile haengen statt an den Knopf - er landete daneben.
     „display: block" muss dazu: Als inline-Element nimmt das <a> weder Breite
     noch Hoehe an, der Kreis darum verschwaende. */
  .fusszeile__hoch { position: relative; right: auto; top: auto; transform: none; margin: 1.5rem auto 0; display: block; }
}

@media (max-width: 520px) {
  .kacheln__liste { --spalten: 1 !important; }
  .knopf { padding: 16px 28px; width: 100%; text-align: center; }
  .aufruf__knoepfe .knopf { width: auto; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die
   Bild- und Textwechsel ohne Uebergang und den Pfeil ohne Wippen. */
@media (prefers-reduced-motion: reduce) {
  .hauptseite *,
  .hauptseite *::before,
  .hauptseite *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Cookie-Hinweis

   Die Vorlage aus cms-core ist mit Tailwind-Klassen gestaltet; diese Seite
   bindet kein Tailwind ein. Die Regeln hier greifen deshalb ueber Struktur
   statt ueber Klassennamen - gerade so viel, dass die Leiste liegt, wo sie
   soll, und lesbar ist. Position, Texte und Beschriftungen bleiben in den
   Einstellungen unter Cookies.
   --------------------------------------------------------------------------- */

#cms-cookie-banner {
  position: fixed;
  z-index: 1010;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#cms-cookie-banner[data-cms-cookie-position='modal'] {
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

#cms-cookie-banner[data-cms-cookie-position='bottom_right'] {
  left: auto;
  max-width: 24rem;
}

#cms-cookie-banner > div {
  max-width: 40rem;
  margin: 0 auto;
  background: #fff;
  color: #111;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  padding: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

#cms-cookie-banner h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

#cms-cookie-banner p {
  margin: 0 0 1rem;
  color: #555;
}

#cms-cookie-banner img {
  max-height: 2.5rem;
  width: auto;
  margin-bottom: 0.75rem;
}

#cms-cookie-banner button {
  display: inline-block;
  margin: 0.25rem 0.4rem 0 0;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.6rem;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

#cms-cookie-banner button:hover,
#cms-cookie-banner button:focus-visible {
  border-color: #111;
}

/* Die Zustimmung ist der vorgesehene Weg und darum hervorgehoben. */
#cms-cookie-banner button[data-cms-cookie='accept'] {
  background: #111;
  border-color: #111;
  color: #fff;
}

#cms-cookie-banner a {
  color: inherit;
}

/* Cookie-Hinweis aus cms-core in den Farben dieser Seite (ab cms-core v0.24.0,
   siehe cms_core/css/cookie.css). Hover wird aus dem Akzent abgeleitet. */
:root {
  --cms-cookie-accent: #111111;
  --cms-cookie-accent-hover: color-mix(in srgb, #111111 85%, #000);
  --cms-cookie-accent-text: #fff;
  --cms-cookie-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Visitenkarten, Kartenuebersicht, Video - Nachbau der abgeloesten Apps
   (20.10.2026, Kundenwunsch: 1:1 wie vorher). Hell, Bootstrap-Masse der alten
   contact-App: Grundschrift 14px, Name und Anschrift mit 0.2em Sperrung,
   quadratische Symbole mit 25% Rundung und 1px schwarzem Rand, Fusszeile auf
   #f8f8f8. Die dunklen .vcard-/.karten-/.video-Regeln oben sind damit ohne
   Verwendung und bleiben nur, bis sie bewusst ausgebaut werden.
   --------------------------------------------------------------------------- */

body.vk {
  margin: 0;
  background: #fff;
  color: #111;
  font: 400 14px/1.6 "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.vk-seite { max-width: 1140px; margin: 0 auto; padding: 40px 15px 60px; }
.vk-logo { text-align: center; margin: 0 auto 30px; }
.vk-logo img { width: 250px; max-width: 70%; height: auto; }

.vk-kopf { display: flex; gap: 20px; align-items: flex-start; }
.vk-foto { flex: 0 0 41.666%; max-width: 41.666%; }
.vk-foto img { width: 100%; height: auto; display: block; border: 1px solid #000; border-radius: 4px; }
.vk-text { flex: 1 1 auto; font-family: "Dosis", "Open Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: .2em; color: #000; }
.vk-name { font-size: 22px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.vk-rolle { font-size: 15px; line-height: 1.5; margin-top: 4px; }
.vk-rolle b { font-weight: 700; }
.vk-anschrift { font-style: normal; font-size: 15px; line-height: 1.5; margin: 20px 0 0; }

.vk-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.vk-knopf {
  display: inline-block;
  box-sizing: border-box;
  padding: 12px 24px;
  font: 600 13px/1.2 "Open Sans", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: rgba(34, 34, 34, .9);
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.vk-knopf:hover, .vk-knopf:focus-visible { background: rgba(0, 0, 0, .7); color: #fff; }
.vk-knopf--rand { color: #151515; border-color: #151515; background: transparent; }
.vk-knopf--rand:hover, .vk-knopf--rand:focus-visible { color: #fff; background: #000; border-color: transparent; }
.vk-knopf--grau { color: #444; background: #e5e5e5; }
.vk-knopf--grau:hover { background: #d5d5d5; color: #222; }

.vk-raster {
  list-style: none;
  margin: 50px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 12px;
}
.vk-kachel {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #111;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.vk-kachel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #000;
  border-radius: 25%;
  background: #fff;
}
.vk-kachel span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.3; }

/* Ab Tablet: Foto und Text links, Symbole rechts in vier Spalten - wie das
   Bootstrap-Raster der alten Seite auf dem Rechner. */
@media (min-width: 768px) {
  .vk-seite { display: grid; grid-template-columns: 5fr 7fr; column-gap: 30px; align-items: start; }
  .vk-logo { grid-column: 1 / -1; }
  .vk-kopf { flex-direction: column; }
  .vk-foto { flex: none; max-width: 100%; width: 100%; }
  .vk-raster { margin-top: 0; grid-template-columns: repeat(4, 1fr); gap: 20px 16px; }
  .vk-hinweis { grid-column: 1 / -1; }
}

/* Uebersicht: Hinweis im gerahmten Kasten, wie der alte Welcome-Kasten. */
.vk-hinweis { margin-top: 10px; }
.vk-hinweis__inhalt {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: #444;
}
.vk-hinweis__inhalt h1 { font-size: 32px; font-weight: 400; line-height: 1.25; margin: 0 0 24px; color: #444; }
.vk-hinweis__inhalt p { font-size: 20px; font-weight: 400; line-height: 1.4; margin: 0 0 24px; max-width: 46rem; }
.vk-hinweis__logo { width: 180px; max-width: 60%; height: auto; margin-top: -8px; }

/* Fenster (Teilen, WLAN) - wie die Bootstrap-Modale der alten App. */
.vk-dialog {
  position: fixed; inset: 0; z-index: 1050;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .5);
}
.vk-dialog[hidden] { display: none; }
.vk-dialog__inhalt {
  width: 100%; max-width: 500px;
  background: #fff; border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.vk-dialog__kopf { padding: 15px; background: #f4f4f4; border-bottom: 1px solid #e5e5e5; }
.vk-dialog__kopf h2 { margin: 0; font-size: 18px; font-weight: 500; }
.vk-dialog__rumpf { padding: 15px 20px; text-align: center; }
.vk-dialog__rumpf p, .vk-dialog__text { font-size: 14px; line-height: 1.6; margin: 0 0 20px; text-align: left; }
.vk-dialog__netz { text-align: center !important; }
.vk-dialog__qr { display: block; width: 50%; max-width: 220px; height: auto; margin: 0 auto; }
.vk-dialog__teilen { display: flex; justify-content: center; gap: 24px; margin-top: 40px; }
.vk-rund { display: block; width: 58px; height: 58px; padding: 4px; box-sizing: border-box; border: 1px solid #000; border-radius: 25%; }
.vk-rund img { width: 100%; height: 100%; display: block; }
.vk-dialog__fuss { padding: 15px; border-top: 1px solid #e5e5e5; text-align: right; }

/* Fusszeile wie die alte App. */
.vk-fuss { margin-top: 60px; padding: 40px 15px 20px; background: #f8f8f8; text-align: center; font-size: 12px; color: #888; }
.vk-fuss__logo { display: inline-block; margin-bottom: 20px; opacity: .25; }
.vk-fuss__logo img { display: block; width: 50px; height: 50px; }
.vk-fuss__firma, .vk-fuss__jahr { text-transform: uppercase; letter-spacing: .5em; margin-bottom: 5px; }
.vk-fuss a { color: #888; text-decoration: none; }
.vk-fuss a:hover { color: #111; }
.vk-fuss__made { font-size: 11px; color: #999; margin-top: 6px; }
.vk-fuss__herz { color: #e41919; }
.vk-fuss__recht { margin-top: 14px; font-size: 11px; }

/* Videoseite: ganzer Bildschirm, schwarz, ohne Kopf und Fuss - wie vorher. */
body.vk-video { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; }
html:has(body.vk-video) { height: 100%; }
.vk-video__rahmen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.vk-video__player { width: 100%; height: 100%; border: 0; display: block; }