/* SAGA GmbH - Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Glass Navigation */
.glass-nav {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* Header-Hoehe ist mobil 72px, ab md 80px.
   main pt-20 (80px) + sticky top-20 erzeugten sonst 8px Body-Bg-Strich unterhalb des Headers. */
@media (max-width: 767px) {
  main#main.pt-20 { padding-top: 72px; }
  .sticky.top-20 { top: 72px; }
}

/* Mobil (Handy + Tablet hochkant): lange deutsche Komposita in Headlines/Text
   brechen sonst nicht um und erzeugen horizontalen Overflow (z.B. "Posteingangs-
   bearbeitung"). hyphens:auto nutzt lang="de" fuer korrekte Silbentrennung.
   Nur bis 767px, damit auf Desktop keine ungewollten Trennstriche entstehen. */
@media (max-width: 767px) {
  /* Fliesstext: automatische Silbentrennung ist hier richtig und erwuenscht. */
  main#main p {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Ueberschriften: NUR an gesetzten weichen Trennstellen trennen (­).
     Vorher stand hier hyphens:auto, das trennte nach Silben und ergab
     "personalak-te" und "spre-chen". Mit manual bricht die Zeile bevorzugt
     zwischen den Woertern um, und lange Komposita trennen dort, wo im Text
     ein ­ steht, also an der Wortgrenze: "Personal-akte".
     overflow-wrap bleibt als Notausgang, damit ein ueberlanges Wort ohne
     Trennstelle keinen waagerechten Overflow erzeugt. */
  main#main h1,
  main#main h2,
  main#main h3 {
    overflow-wrap: break-word;
    hyphens: manual;
  }

  /* Breadcrumb mobil dezenter: kleiner, blasser, weniger Abstand. Die
     Tailwind-Klassen im HTML bleiben unberuehrt, damit die Aenderung an
     einer Stelle steht und nicht in 116 Dateien. */
  main#main nav[aria-label="Breadcrumb"] {
    font-size: 0.6875rem;
    line-height: 1.4;
    opacity: 0.65;
    padding-top: 1rem;
    margin-bottom: 2rem;
  }
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #0000FF;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background-color: #0000FF;
  color: #fff;
}

/* Monospace Tech-Label */
.font-mono-tech {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-feature-settings: "ss01", "cv01";
}

/* Hero Tech-Grid (dezent, animiert) */
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(0, 0, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 255, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 40%, black 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 10%, transparent 75%);
}

/* Pulse-Dot (Live-Indikator) */
.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #0000FF;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  background-color: #0000FF;
  opacity: 0.35;
  animation: saga-pulse 1.8s ease-out infinite;
}
@keyframes saga-pulse {
  0%   { transform: scale(0.6); opacity: 0.45; }
  80%  { transform: scale(2.4);  opacity: 0; }
  100% { transform: scale(2.4);  opacity: 0; }
}

/* Scanline-Sweep im Hero-Rand */
.scan-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #0000FF 50%, transparent 100%);
  opacity: 0.55;
  animation: saga-scan 6s linear infinite;
}
@keyframes saga-scan {
  0%   { top: 12%;  opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { top: 92%; opacity: 0; }
}

/* Tech-Stat-Leiste */
.tech-stat {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #454558;
}
.tech-stat strong {
  color: #0A0A0A;
  font-weight: 600;
}

/* Blinkender Caret (Terminal-Look) */
.caret-blink {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  vertical-align: -0.12em;
  background-color: #0000FF;
  margin-left: 0.15em;
  animation: saga-caret 1s steps(2, end) infinite;
}
@keyframes saga-caret {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after,
  .scan-sweep,
  .caret-blink {
    animation: none;
  }
}

/* Konsistenter Foto-Look für Kundenbilder (Gelbstich komplett raus, neutrales Weiß) */
.photo-saga {
  filter: contrast(1.10) saturate(0.55) brightness(1.06) hue-rotate(-20deg);
}

/* Starker Filter: zieht Cyan/Türkis ins Blau, für Fotos mit störendem Türkis-Anteil
   (z.B. farbige Scanner-Gehäuse, blau-grüne LEDs) */
.photo-saga-bluefy {
  filter: contrast(1.08) saturate(0.45) brightness(1.04) hue-rotate(35deg);
}

/* Blau-Tint-Overlay als CI-Schicht (optional pro Bild) */
.photo-tint-blue {
  position: relative;
}
.photo-tint-blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,255,0.10) 0%, rgba(10,10,10,0.04) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Stärkere Blau-Überlagerung für Bilder mit dominanten Störfarben */
.photo-tint-blue-strong {
  position: relative;
}
.photo-tint-blue-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 255, 0.22);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* UI-Overlay-Frame (Tech-Look über Foto) */
.photo-ui-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.photo-ui-frame::before,
.photo-ui-frame::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1.5px solid #0000FF;
}
.photo-ui-frame::before {
  top: 16px;
  left: 16px;
  border-right: none;
  border-bottom: none;
}
.photo-ui-frame::after {
  bottom: 16px;
  right: 16px;
  border-left: none;
  border-top: none;
}
/* ---------------------------------------------------------------------------
   Zitat und Hervorhebung: Abstand gegen space-y-* durchsetzen

   Die Artikeltexte stehen in einem Container mit .space-y-6. Dessen Selektor
   .space-y-6 > :not([hidden]) ~ :not([hidden]) hat die Spezifitaet 0,3,0 und
   schlaegt damit das my-12 (0,1,0) am blockquote. Folge: Der Zitatkasten stand
   in acht News-Artikeln mit 24px statt 48px am Text darueber und klebte daran.
   Gemessen am 23.08.2026 im Browser, nicht abgeleitet.

   Gegen 0,3,0 kommt keine praktikable Selektor-Spezifitaet an, deshalb
   !important. Die Zahl ist bewusst 3rem, damit sie dem dokumentierten my-12
   entspricht und Styleguide und Realitaet dasselbe sagen.
   --------------------------------------------------------------------------- */
.space-y-6 > blockquote {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}