/* ==========================================================
   beeit.css · Grundschicht ausserhalb von Tailwind

   Hier steht ausschliesslich, was Tailwind nicht liefert:
   Schriftbindung, die Pflichtangabe nach Kanon 7.10 samt
   Haerteblock, die Credit-Zeile und die Versionsmarke.

   Utility-Klassen gehoeren NICHT hierher, sondern ins Markup.
   ========================================================== */

/* --- Schriften, selbst gehostet (Staffelstab 2) ----------
   Kein Google-Fonts-CDN. Die Dateien liegen unter
   /assets/fonts/ und stammen aus dem eyedee-Bestand
   (SIL OFL 1.1, Lizenztext liegt daneben). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

/* --- Zeilenlaenge (Staffelstab 3) ------------------------
   Hoechstens 75 Zeichen im Fliesstext. Als Klasse, damit sie
   im Markup sichtbar gesetzt wird und nicht als unsichtbare
   Globalregel jeden Absatz erwischt. */
.mass-lesetext { max-width: 68ch; }

/* --- Kennzahlen und Preiszahlen --------------------------
   Bis Plex Sans Condensed vorliegt, faellt der Stapel auf
   Plex Sans zurueck. Die Zahlen bekommen dann eine leicht
   engere Laufweite, damit die Leiste nicht auseinanderfaellt.
   Beim Einbau der Condensed ersatzlos streichen. */
.zahl { font-family: var(--font-zahl); font-variant-numeric: tabular-nums; }
@supports not (font-stretch: 75%) { .zahl { letter-spacing: -0.015em; } }

/* ==========================================================
   Kennzeichnung KI-generierter Medien · Kanon 7.10 / 5.2a
   EU 2024/1689 Art. 50, anwendbar seit 02.08.2026.

   Uebernommen aus 02-VORLAGEN/snippets/ki-hinweis.css,
   gekuerzt auf die in diesem Projekt verwendeten Bauformen
   (Bild, keine Videos, keine Lightbox) und mit den beiden
   projektabhaengigen Werten gefuellt.

   KONTRAST, nicht geschaetzt: --ki-ink #14181D liegt zwischen
   #141416 (5,73:1 bei 65 %) und #1C1C1E (5,32:1 bei 65 %) der
   Kanontabelle. Bei 65 % also rund 5,7:1 im schlimmsten Fall
   (reinweisser Bildbereich). AA erfuellt, Deckkraft bleibt.
   ========================================================== */
:root {
  --ki-ink: #14181D;
  --ki-deckkraft: .65;
  --ki-radius: 4px;
  --ki-zeichen: url("/assets/bilder/ai-icon-light.svg");
}

.ki-medium { position: relative; display: block; margin: 0; }
.ki-medium img { display: block; width: 100%; height: auto; }

.pflichtangabe,
.ki-hinweis {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  z-index: 999;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .2rem .48rem;
  border-radius: var(--ki-radius);
  font-size: .72rem;
  line-height: 1.3;
  letter-spacing: .04em;
  font-weight: 500;
  color: #fff;
  background: color-mix(in srgb,
              var(--ki-ink) calc(var(--ki-deckkraft) * 100%), transparent);
  pointer-events: none;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .pflichtangabe,
  .ki-hinweis { background: rgba(20, 24, 29, .65); }
}

.pflichtangabe .ki-icon,
.ki-hinweis .ki-icon {
  width: .95em;
  height: 1em;
  flex: 0 0 auto;
  display: block;
  max-width: none;
  background: var(--ki-zeichen) center/contain no-repeat;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Grossflaechige Buehnen: in den Ausschnitt rechnen statt an
   den Elementrand setzen (Kanon 7.13). Die Kopfbuehne ist
   regelmaessig hoeher als das Fenster; der zweite Wert schiebt
   die Angabe um genau den Ueberstand nach oben, damit sie beim
   Aufruf sichtbar ist. 100svh, sonst liegt sie mobil hinter
   der Adressleiste. */
.buehne .pflichtangabe,
.buehne .ki-hinweis {
  left: 1.5rem;
  bottom: max(1.2rem, calc(100% - 100svh + 1.2rem));
}

.pflichtangabe--klein,
.ki-hinweis--klein {
  font-size: .62rem;
  padding: .15rem .38rem;
  gap: .24rem;
  left: .45rem;
  bottom: .45rem;
}

@media (max-width: 520px) {
  .pflichtangabe,
  .ki-hinweis { font-size: .68rem; left: .5rem; bottom: .5rem; }
  .buehne .pflichtangabe,
  .buehne .ki-hinweis { left: .75rem; }
}

/* --- Credit-Zeile · Kanon 1.2 / 1.3 ---------------------- */
.credit .heart { color: #D70E54; }
.credit sup { font-size: .62em; vertical-align: super; line-height: 0; }

/* --- Externe Links · Kanon 5.33 (BFSG / WCAG 2.1 AA) -----
   Uebernommen aus 02-VORLAGEN/snippets/externe-links.css.

   Der Hinweistext liegt per clip-path verborgen, NICHT per
   display:none - letzteres wuerde ihn auch dem Screenreader
   entziehen und damit genau die Information beseitigen, um die
   es geht.

   Im Klickdummy gibt es genau einen externen Link (die
   Credit-Zeile im Fuss). Er sitzt nicht im Fliesstext, deshalb
   traegt er nur den Screenreader-Hinweis und keine sichtbare
   Pfeilmarkierung - die wuerde die Fusszeile stoeren. Sobald
   redaktionelle Links im Fliesstext dazukommen, gehoert die
   ::after-Regel aus dem Kit-Schnipsel mit dem passenden
   Kontextselektor hierher. */
.ey-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   HAERTEBLOCK · Kanon 5.2a - Pflicht, nicht Kuer

   Steht am Ende der Kaskade und ausserhalb jeder Medienabfrage.
   In einem @media-Kontext haelt er nur dort, und die maschinelle
   Pruefung meldet Gruen, obwohl die Haertung fehlt.

   Grund: Tailwind-Utilities am Traeger (etwa `text-sm`,
   `max-w-lg`, `text-center` an einer Karte) schlagen ueber ihre
   Spezifitaet die Klassenregel oben. Eine Komponente mit
   Rechtsbezug darf nicht davon abhaengen, dass kuenftig jemand
   an eine Ausnahme denkt.
   ========================================================== */
.pflichtangabe,
.ki-hinweis {
  white-space: nowrap;
  margin: 0 !important;
  flex: none !important;
  color: #fff !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
  text-transform: none !important;
  font-size: .72rem !important;
  line-height: 1.3 !important;
}
.pflichtangabe--klein,
.ki-hinweis--klein { font-size: .62rem !important; }
.pflichtangabe .ki-icon,
.ki-hinweis .ki-icon {
  position: static !important;
  inset: auto !important;
  width: .95em !important;
  height: .95em !important;
  min-width: 0 !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media print {
  .pflichtangabe,
  .ki-hinweis {
    position: static;
    background: none !important;
    color: #000 !important;
    padding: .2rem 0 0;
  }
  .pflichtangabe .ki-icon,
  .ki-hinweis .ki-icon {
    background-image: url("/assets/bilder/ai-icon-dark.svg") !important;
  }
}

/* Versionsmarke · Kanon 10.12a
   getComputedStyle(document.documentElement)
     .getPropertyValue('--eyedee-stand') */
:root { --eyedee-stand: "p.015 23.09.2026 Bee-IT-Klickdummy"; }

/* ==========================================================
   Bewegung · Kanon 13.4

   Der Klickdummy animiert selbst nichts. Bewegung entsteht
   ausschliesslich in den Uebergaengen von
   @tailwindplus/elements (Flyout, Mobilmenue, FAQ) und in den
   transition-Utilities im Markup.

   Wer "weniger Bewegung" eingestellt hat, bekommt sie hier
   vollstaendig abgeschaltet - nicht verkuerzt. Ein auf 0,01s
   gestauchter Uebergang ist immer noch ein Uebergang; die
   Einstellung ist eine Ansage, keine Bitte um Tempo.

   scroll-behavior gehoert dazu: die Sprungmarken im Kopf und
   in der Fusszeile wuerden sonst weiterhin sanft scrollen.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}