/* agent030 — Hover-Zustaende. Erzeugt aus den style-hover-Attributen
   des Design-Exports. !important, weil die Grundgestaltung im
   style-Attribut steht und inline jeden Selektor schlaegt. */
.hv1:hover{background: #16100c !important;}
.hv2:hover{background: #f4efea !important;}
.hv3:hover{border-color: #16100c !important;}
.hv4:hover{background: #29231e !important;}
.hv5:hover{background: #16100c !important; color: #f7f5f1 !important;}
.hv6:hover{background: #fdfaf6 !important;}
.hv7:hover{background: #fdfaf6 !important; color: #16100c !important;}
.hv8:hover{color: #bb4800 !important;}

/* Held-Rotator: sanfter Wechsel zwischen den Problemtexten.
   Ohne data-held-wechsel passiert nichts — der erste Aufbau springt nicht. */
[data-held] [data-held-feld="marke"],
[data-held] [data-held-feld="titel"],
[data-held] [data-held-feld="text"],
[data-held] [data-held-feld="cta"],
[data-held] [data-held-feld="bild"] {
  transition: opacity 180ms ease;
}
[data-held][data-held-wechsel="aus"] [data-held-feld="marke"],
[data-held][data-held-wechsel="aus"] [data-held-feld="titel"],
[data-held][data-held-wechsel="aus"] [data-held-feld="text"],
[data-held][data-held-wechsel="aus"] [data-held-feld="cta"],
[data-held][data-held-wechsel="aus"] [data-held-feld="bild"] {
  opacity: 0;
}
[data-held] [data-held-feld="titel"]:focus {
  outline: none;
}
[data-held] [data-held-feld="weiter"]:hover span[aria-hidden] {
  background: #16100c;
}
[data-held] [data-held-feld="weiter"]:hover {
  color: #16100c;
}

@media (prefers-reduced-motion: reduce) {
  [data-held] [data-held-feld] {
    transition: none !important;
  }
}

/* --------------------------------------------------- Handy: kein Querscrollen
   Am 20.08.2026 live gemessen: mehrere Raster stehen bis 1024px auf zwei
   Spalten. Grid-Elemente haben von Haus aus min-width:auto, also mindestens
   ihre min-content-Breite — lange Woerter und Preisangaben blaehten die
   Spalten ueber den Bildschirm hinaus. Ueberlauf bis 92px auf /preise, dazu
   /telefon-ki, /website-relaunch, /lokale-ki, /dsgvo-ki, /wissen-isms-audit,
   /iso-27001-beratung und die Fusszeile aller Seiten. Die Seite liess sich
   seitlich schieben. Ohne !important, damit gewollte Inline-Breiten bleiben. */
@media (max-width: 900px) {
  body * { min-width: 0; overflow-wrap: break-word; }
  /* Die Mailadresse auf /kontakt ist ein einziges Wort und ragte in ihrer
     140px schmalen Spalte 75px ueber den Rand. break-word reicht nicht. */
  body a { overflow-wrap: anywhere; }
}

/* Fusszeile einspaltig, sonst 26px Ueberlauf bei 320px. "body" davor, weil
   die Regel der Seite ebenfalls !important traegt und spaeter im Dokument steht. */
@media (max-width: 480px) {
  body [data-g="footer"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Ganz schmale Geraete (320px): alle Raster einspaltig. Auf /kontakt stand
   das Bild sonst in einer zweiten Spalte und ragte 20px ueber den Rand. */
@media (max-width: 400px) {
  body [data-g] { grid-template-columns: minmax(0, 1fr) !important; }
}