/* ==========================================================================
   Ergänzungen zum Theme.
   Bewusst schlank gehalten: nur, was das Basis-Theme nicht abdeckt.
   Alle Farben stammen aus den bestehenden Theme-Variablen.
   ========================================================================== */

/* Sprunglink für Tastatur- und Screenreader-Bedienung */
.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1080;
  padding: .625rem 1rem;
  background-color: var(--ar-primary);
  color: #fff;
  border-radius: 2rem;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Tabellen im Fließtext (Preis- und Vergleichstabellen)
   Auf schmalen Displays horizontal scrollbar, damit das Layout nicht bricht.
   -------------------------------------------------------------------------- */
.tabelle-wrap {
  /*
   * position: relative ist hier kein Schmuck, sondern notwendig.
   * Ohne diese Zeile reicht die Tabelle mit ihrer Mindestbreite von 34rem
   * ueber den scrollbaren Rahmen hinaus bis in den Scrollbereich der Seite.
   * Auf einem 375 Pixel breiten Display liess sich die gesamte Seite dann
   * 175 Pixel seitlich schieben, obwohl der Rahmen selbst korrekt scrollte.
   */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: .75rem;
}

.tabelle-wrap > table {
  width: 100%;
  min-width: 34rem;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9375rem;
}

.tabelle-wrap th,
.tabelle-wrap td {
  padding: .875rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ar-border-color);
}

.tabelle-wrap thead th {
  background-color: var(--ar-secondary-bg);
  color: var(--ar-heading-color);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--ar-primary);
}

.tabelle-wrap tbody tr:last-child th,
.tabelle-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.tabelle-wrap tbody tr:hover {
  background-color: var(--ar-secondary-bg);
}

.tabelle-wrap td strong,
.tabelle-wrap th strong {
  color: var(--ar-heading-color);
}

/* Zahlenspalten rechtsbündig, damit Beträge untereinander stehen */
.tabelle-wrap .zahl {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .tabelle-wrap > table {
    font-size: .875rem;
  }
  .tabelle-wrap th,
  .tabelle-wrap td {
    padding: .75rem .625rem;
  }
}

/* --------------------------------------------------------------------------
   Ratgeber-Fließtext
   -------------------------------------------------------------------------- */
.beitrag h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  scroll-margin-top: 6rem;
}

.beitrag h3 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  scroll-margin-top: 6rem;
}

.beitrag p,
.beitrag li {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.beitrag > p:first-of-type {
  font-size: 1.1875rem;
}

.beitrag ul,
.beitrag ol {
  margin-bottom: 1.5rem;
  padding-left: 1.25rem;
}

.beitrag li {
  margin-bottom: .5rem;
}

.beitrag img {
  border-radius: .75rem;
  margin: 2rem 0;
}

.beitrag figure {
  margin: 2rem 0;
}

.beitrag figcaption {
  margin-top: .625rem;
  font-size: .875rem;
  color: var(--ar-secondary-color);
}

@media (max-width: 767.98px) {
  .beitrag h2 {
    margin-top: 2.25rem;
  }
  .beitrag p,
  .beitrag li {
    font-size: 1rem;
    line-height: 1.7;
  }
  .beitrag > p:first-of-type {
    font-size: 1.0625rem;
  }
}

/* Hervorgehobener Hinweiskasten im Fließtext */
.hinweis {
  border-left: 4px solid var(--ar-warning);
  background-color: var(--ar-secondary-bg);
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.hinweis-titel {
  display: block;
  font-weight: 600;
  color: var(--ar-heading-color);
  margin-bottom: .375rem;
}

/* --------------------------------------------------------------------------
   Inhaltsverzeichnis
   -------------------------------------------------------------------------- */
.inhalt-nav {
  background-color: var(--ar-secondary-bg);
  border-radius: .75rem;
  padding: 1.5rem;
}

.inhalt-nav ol {
  margin-bottom: 0;
  padding-left: 1.125rem;
}

.inhalt-nav li {
  margin-bottom: .5rem;
  font-size: .9375rem;
}

.inhalt-nav li:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .inhalt-nav-sticky {
    position: sticky;
    top: 6.5rem;
  }
}

/* --------------------------------------------------------------------------
   Gemeindeliste im Einzugsgebiet
   -------------------------------------------------------------------------- */
.gemeinde-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .625rem;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.gemeinde-grid a {
  display: block;
  padding: .625rem .875rem;
  background-color: var(--ar-secondary-bg);
  border-radius: .5rem;
  text-decoration: none;
  font-size: .9375rem;
  color: var(--ar-body-color);
  transition: background-color .15s ease, color .15s ease;
}

.gemeinde-grid a:hover,
.gemeinde-grid a:focus-visible {
  background-color: var(--ar-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Bilder: Layoutverschiebungen vermeiden
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

.bild-fix {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.bild-quer {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

/* Karten in Ratgeber-Übersicht */
.beitrag-karte img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  border-radius: .75rem .75rem 0 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Kundenstimmen: der Scrollbalken im Zitat war auf Touchgeräten störend
   -------------------------------------------------------------------------- */
.zitat-text {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sicherheitsnetz für die Einblend-Animationen

   Die Bibliothek für die Scroll-Animationen setzt Elemente zunächst auf
   opacity: 0 und blendet sie per JavaScript ein. Wenn das Skript nicht lädt
   oder blockiert wird, bliebe der Inhalt unsichtbar – inklusive H1. Deshalb:
   Solange JavaScript nicht bestätigt hat, dass es läuft, wird nichts versteckt.
   -------------------------------------------------------------------------- */
html.kein-js [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   Rücksicht auf reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Schwebende Kontaktschaltflächen auf Mobilgeräten

   Anruf und WhatsApp sind der kürzeste Weg zur Anfrage. Die Schaltflächen
   waren mit 36 px kleiner als die empfohlene Mindestgröße für Berührungsziele.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .kontakt-schwebend .btn-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Lange Adressen im Fließtext

   In Impressum und Datenschutzerklärung stehen vollständige URLs, die auf
   schmalen Displays nicht umbrechen und die Seite seitlich hinausschieben.
   -------------------------------------------------------------------------- */
.rechtstext p,
.rechtstext li,
.rechtstext a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Lange Komposita in Überschriften

   Deutsche Zusammensetzungen wie "Datenschutzerklärung" oder
   "Halteverbotszone" sind in großen Schriftgraden breiter als ein
   Mobil-Viewport und schieben die Seite seitlich hinaus. Silbentrennung
   greift dank lang="de-AT" korrekt.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  h1, h2,
  .display-1, .display-2, .display-3, .display-4 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}