/*
Theme Name: Layout
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/* ============================================================================
   Hundeschule Allgäu / CaniNature — aninova e.U.
   Die Seiten bestehen aus Enfold-Standardelementen; hier stehen nur die Regeln,
   die daraus das festgelegte Gestaltungssystem machen.
   Grundlage: analyse/design-system.md
   ============================================================================ */

:root {
  /* Flächen — vier, plus Weiß für Karten */
  --hsa-papier: #F5F5F3;
  --hsa-sand:   #E8E8E4;
  --hsa-weiss:  #FFFFFF;
  --hsa-tann:   #26302A;   /* dunkle Bänder, Kopf, Fuß */
  --hsa-wiese:  #3C4A34;   /* zweiter Dunkelton, Abschluss */

  /* Farben */
  --hsa-text:         #1F211F;
  --hsa-neben:        #525450;
  --hsa-akzent:       #9A4319;   /* Kupfer — trägt nur die Hauptaktion */
  --hsa-akzent-tief:  #7E3512;
  --hsa-akzent-hell:  #E9A583;   /* dieselbe Farbe auf dunklem Grund */
  --hsa-rahmen:       #878782;
  --hsa-linie:        #DCDCD7;
  --hsa-auf-dunkel:   #F5F5F3;
  --hsa-neben-dunkel: #C2C6C0;
  --hsa-linie-dunkel: rgba(245, 245, 243, .18);

  /* Größen */
  --hsa-h1: 56px;
  --hsa-h2: 40px;
  --hsa-h3: 24px;
  --hsa-text-gr: 18px;
  --hsa-klein: 14px;

  /* Abstände */
  --hsa-naht-gross:  152px;
  --hsa-naht-mittel: 104px;
  --hsa-naht-klein:   64px;
  --hsa-fuge:  40px;
  --hsa-absatz: 22px;
  --hsa-polster: 30px;

  --hsa-radius: 3px;
  --hsa-breite: 1220px;
  --hsa-satz: 60ch;
  --hsa-anim: 420ms;

  --hsa-titel: 'Schibsted Grotesk', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --hsa-sans: 'Public Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
}

@media only screen and (max-width: 989px) {
  :root {
    --hsa-h1: 40px;
    --hsa-h2: 31px;
    --hsa-h3: 22px;
    --hsa-naht-gross:  104px;
    --hsa-naht-mittel: 76px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --hsa-h1: 33px;
    --hsa-h2: 26px;
    --hsa-h3: 20px;
    --hsa-text-gr: 17px;
    --hsa-klein: 13px;
    --hsa-naht-gross:  76px;
    --hsa-naht-mittel: 56px;
    --hsa-naht-klein:  40px;
    --hsa-fuge: 26px;
    --hsa-polster: 22px;
  }
}

/* ------------------------------------------------------------- Grundlagen */

#top,
#top .avia_textblock,
#top .avia_codeblock { font-family: var(--hsa-sans); }

#top {
  font-size: var(--hsa-text-gr);
  line-height: 1.62;
  color: var(--hsa-text);
  -webkit-font-smoothing: antialiased;
}

#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-special-heading-tag {
  font-family: var(--hsa-titel);
  color: var(--hsa-text);
  font-weight: 700;
  /* Enfolds Voreinstellung ist uppercase — das schreit über die ganze Seite. */
  text-transform: none;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  padding: 0;
}

#top .av-special-heading-h1 .av-special-heading-tag { font-size: var(--hsa-h1); line-height: 1.06; }
#top .av-special-heading-h2 .av-special-heading-tag { font-size: var(--hsa-h2); line-height: 1.12; }
#top .av-special-heading-h3 .av-special-heading-tag {
  font-size: var(--hsa-h3);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Enfold hängt an jede Überschrift zwei leere Rahmen-Divs. */
#top .special-heading-border { display: none; }
#top .av-special-heading { padding-bottom: 20px !important; margin: 0; }

#top .avia_textblock p { margin: 0 0 var(--hsa-absatz); }
#top .avia_textblock p:last-child { margin-bottom: 0; }
#top .avia_textblock { margin-bottom: 32px; }
#top .avia_textblock:last-child { margin-bottom: 0; }

#top .avia_textblock a,
#top .avia_codeblock a:not([class]) {
  color: var(--hsa-akzent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
#top .avia_textblock a:hover { color: var(--hsa-akzent-tief); }

/* Fokusring. Das Kupfer des Akzents ist als Ring zu schwach: auf Papier 6,03 : 1, auf
   der Tanne 2,23 und auf der Wiese 1,13 — WCAG 1.4.11 verlangt 3,0 (gemessen 08.09.2026,
   in der Kopfleiste kam er auf 1,44). Auf hellem Grund traegt jetzt die Textfarbe
   (14,85 : 1), auf dunklen Flaechen Weiss (13,65 bzw. 9,45). */
#top :focus-visible { outline: 3px solid var(--hsa-text); outline-offset: 3px; border-radius: 2px; }
#top .hsa-flaeche--tanne :focus-visible,
#top .hsa-flaeche--wiese :focus-visible,
#top .hsa-topbar :focus-visible,
#top #header :focus-visible,
#top .hsa-fuss :focus-visible,
#top .hsa-hero :focus-visible,
#top .hsa-abschluss :focus-visible,
#top .hsa-band :focus-visible,
#top .hsa-beitrag-kopf :focus-visible,
#top .hsa-beitrag-cta :focus-visible { outline-color: #FFFFFF; }
#top strong { font-weight: 600; }
#top .special_amp { font-family: inherit; font-style: normal; font-size: inherit; color: inherit; }

/* ------------------------------------------------------------- Sektionen */

#top .hsa-sec > .container,
#top .hsa-sec .content {
  max-width: var(--hsa-breite);
  padding-left: 26px;
  padding-right: 26px;
}

#top .hsa-naht--gross  .content { padding-top: var(--hsa-naht-gross);  padding-bottom: var(--hsa-naht-gross); }
#top .hsa-naht--mittel .content { padding-top: var(--hsa-naht-mittel); padding-bottom: var(--hsa-naht-mittel); }
#top .hsa-naht--klein  .content { padding-top: var(--hsa-naht-klein);  padding-bottom: var(--hsa-naht-klein); }
#top .hsa-naht--keine  .content { padding-top: 0; padding-bottom: 0; }

/* Enfold hängt hinter jede Sektion ein <br> und leere Absätze. */
#top .entry-content-wrapper > br,
#top .entry-content-wrapper > p:empty,
#top #main > p { display: none; }

/* Text auf dunkler Fläche */
#top .hsa-flaeche--tanne,
#top .hsa-flaeche--wiese,
#top .hsa-flaeche--tanne .avia_textblock,
#top .hsa-flaeche--wiese .avia_textblock,
#top .hsa-flaeche--tanne .av-special-heading-tag,
#top .hsa-flaeche--wiese .av-special-heading-tag,
#top .hsa-flaeche--tanne h1, #top .hsa-flaeche--tanne h2, #top .hsa-flaeche--tanne h3,
#top .hsa-flaeche--wiese h1, #top .hsa-flaeche--wiese h2, #top .hsa-flaeche--wiese h3,
#top .hsa-flaeche--tanne p, #top .hsa-flaeche--tanne li,
#top .hsa-flaeche--wiese p, #top .hsa-flaeche--wiese li { color: var(--hsa-auf-dunkel); }

/* Der zweite Dunkelton kommt über die eigene Klasse — Enfold hat nur ein
   footer_color-Farbset. */
#top .hsa-flaeche--wiese { background-color: var(--hsa-wiese) !important; }
#top .hsa-flaeche--tanne { background-color: var(--hsa-tann) !important; }

/* ------------------------------------------------------------- Etikett */

#top .hsa-etikett { margin-bottom: 12px !important; }
#top .hsa-etikett p {
  font-family: var(--hsa-sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hsa-akzent);
  margin: 0;
}
#top .hsa-flaeche--tanne .hsa-etikett p,
#top .hsa-flaeche--wiese .hsa-etikett p { color: var(--hsa-akzent-hell); }

/* ------------------------------------------------------------- Satzspiegel */

#top .hsa-satz p,
#top .hsa-vorspann p,
#top .hsa-zuordnung p { max-width: var(--hsa-satz); }

#top .hsa-vorspann p { font-size: 19px; line-height: 1.6; color: var(--hsa-neben); }
#top .hsa-flaeche--tanne .hsa-vorspann p { color: var(--hsa-neben-dunkel); }
#top .hsa-zuordnung p { font-size: 20px; line-height: 1.6; }

/* ------------------------------------------------------------- Schaltflächen
   Zwei Stufen: Kupfer gefüllt für die Hauptaktion, ein Umriss daneben.
   Nie drei gleich schwere Knöpfe nebeneinander. */

#top .avia-button,
#top .hsa-band__knopf,
#top .hsa-knopf-einfach {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: var(--hsa-radius);
  font-family: var(--hsa-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
#top .avia-button .avia_iconbox_title { font-weight: 700; }
#top .avia-button .avia_button_background { display: none; }
/* Gestapelte Knopfreihe: als Raster mit einer Spalte in max-content-Breite stehen
   die Knoepfe untereinander und sind gleich breit — so breit wie der laengere. */
#top .avia-buttonrow-wrap.hsa-aktionen--stapel { display: grid; grid-auto-flow: row;
  justify-content: start; justify-items: stretch; gap: 14px; }
#top .avia-buttonrow-wrap.hsa-aktionen--stapel .avia-button { margin: 0; width: 100%;
  justify-self: stretch; }

/* Hauptaktion */
#top .hsa-knopf--haupt .avia-button,
#top .avia-buttonrow-wrap > .avia-button:first-of-type,
#top .hsa-band__knopf {
  background-color: var(--hsa-akzent) !important;
  border-color: var(--hsa-akzent) !important;
  color: #FFFFFF !important;
}
#top .hsa-knopf--haupt .avia-button .avia_iconbox_title,
#top .avia-buttonrow-wrap > .avia-button:first-of-type .avia_iconbox_title { color: #FFFFFF !important; }
#top .hsa-knopf--haupt .avia-button:hover,
#top .avia-buttonrow-wrap > .avia-button:first-of-type:hover,
#top .hsa-band__knopf:hover {
  background-color: var(--hsa-akzent-tief) !important;
  border-color: var(--hsa-akzent-tief) !important;
  color: #FFFFFF !important;
}

/* Zweite Stufe: Umriss */
#top .hsa-knopf--umriss .avia-button,
#top .avia-buttonrow-wrap > .avia-button:not(:first-of-type),
#top .hsa-band__knopf--zweit,
#top .hsa-knopf-einfach {
  background-color: transparent !important;
  border-color: var(--hsa-text) !important;
  color: var(--hsa-text) !important;
}
#top .hsa-knopf--umriss .avia-button .avia_iconbox_title,
#top .avia-buttonrow-wrap > .avia-button:not(:first-of-type) .avia_iconbox_title { color: var(--hsa-text) !important; }
#top .hsa-knopf--umriss .avia-button:hover,
#top .avia-buttonrow-wrap > .avia-button:not(:first-of-type):hover,
#top .hsa-band__knopf--zweit:hover,
#top .hsa-knopf-einfach:hover { background-color: rgba(31, 33, 31, .07) !important; }

#top .hsa-flaeche--tanne .avia-buttonrow-wrap > .avia-button:not(:first-of-type),
#top .hsa-flaeche--wiese .avia-buttonrow-wrap > .avia-button:not(:first-of-type),
#top .hsa-flaeche--tanne .hsa-knopf--umriss .avia-button,
#top .hsa-flaeche--wiese .hsa-band__knopf--zweit {
  border-color: rgba(245, 245, 243, .5) !important;
  color: var(--hsa-auf-dunkel) !important;
}
#top .hsa-flaeche--tanne .avia-buttonrow-wrap > .avia-button:not(:first-of-type) .avia_iconbox_title,
#top .hsa-flaeche--wiese .avia-buttonrow-wrap > .avia-button:not(:first-of-type) .avia_iconbox_title,
#top .hsa-flaeche--tanne .hsa-knopf--umriss .avia-button .avia_iconbox_title { color: var(--hsa-auf-dunkel) !important; }
#top .hsa-flaeche--tanne .avia-buttonrow-wrap > .avia-button:not(:first-of-type):hover,
#top .hsa-flaeche--wiese .hsa-band__knopf--zweit:hover { background-color: rgba(245, 245, 243, .12) !important; }

/* Textlink statt Schaltfläche */
#top .hsa-knopf--link .avia-button,
#top .hsa-kachel__link .avia-button,
#top .hsa-band__link {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  min-height: 44px;
  color: var(--hsa-akzent) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
}
#top .hsa-knopf--link .avia-button .avia_iconbox_title,
#top .hsa-kachel__link .avia-button .avia_iconbox_title { color: var(--hsa-akzent) !important; }
#top .hsa-knopf--link .avia-button:hover,
#top .hsa-kachel__link .avia-button:hover,
#top .hsa-band__link:hover { color: var(--hsa-akzent-tief) !important; background: transparent !important; }
#top .hsa-flaeche--tanne .hsa-knopf--link .avia-button .avia_iconbox_title { color: var(--hsa-akzent-hell) !important; }

#top .avia-button-wrap { margin: 32px 0 0; display: block; }
#top .avia-button-wrap.hsa-kachel__link { margin-top: auto; padding-top: 14px; }

#top .avia-buttonrow-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 32px 0 0;
}
#top .avia-buttonrow-wrap .avia-button { margin: 0; }

/* ------------------------------------------------------------- Bilder */

#top .avia_image { border-radius: var(--hsa-radius); box-shadow: none; }
#top .avia-image-container { margin: 0; }
#top .av-image-caption-overlay { display: none; }

#top .hsa-bildunter p {
  font-size: var(--hsa-klein);
  line-height: 1.45;
  color: var(--hsa-neben);
  margin: 10px 0 0;
}
#top .hsa-bildunter { margin-bottom: 0 !important; }

/* Bildband, randabfallend */
#top .hsa-band-sec > .container,
#top .hsa-band-sec .content { max-width: none; padding-left: 0; padding-right: 0; }
#top .hsa-band-sec .content { padding-top: 0; padding-bottom: 0; }
/* Enfold legt zwischen Container und <img> zwei Huellen; die innere ist inline-block
   und schrumpft auf die natuerliche Bildbreite. `width:100%` am <img> bezieht sich dann
   auf genau diese Breite — das Band blieb bei 1.800 px stehen und bekam ab 1.900 px
   Fenster weisse Raender (gemessen bei 1920 und 2560). Beide Huellen muessen block sein. */
#top .hsa-band .avia-image-container-inner,
#top .hsa-band .avia-image-overlay-wrap { display: block; width: 100%; }
#top .hsa-band img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 28%; display: block; border-radius: 0; }
#top .hsa-band .avia_image { border-radius: 0; }

/* Bilder in Zweispaltern */
#top .hsa-randbild img,
#top .hsa-portraet img { width: 100%; height: auto; display: block; }
#top .hsa-randbild img { aspect-ratio: 4 / 3; object-fit: cover; }
#top .hsa-portraet img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ------------------------------------------------------------- Hero */

#top .hsa-hero-sec .content {
  padding-top: 0 !important; padding-bottom: 0 !important;
  /* .content trägt Enfolds Inhaltsbreite (1220 px) und 26 px Rechtspolster.
     Ohne beides bleibt die randlose Hero 220 px zu schmal. */
  width: 100%; max-width: none; padding-right: 0;
}
#top .hsa-hero-sec > .container { padding-left: 0; padding-right: 0; max-width: none; }
#top .hsa-hero-sec .flex_column { margin-bottom: 0; }

/* Linke Spalte: Textfläche mit eigenem Innenabstand, an der Layoutbreite ausgerichtet */
#top .hsa-hero-sec .flex_column:first-child {
  padding: 112px 60px 100px calc((100vw - var(--hsa-breite)) / 2 + 26px);
  box-sizing: border-box;
}
#top .hsa-hero-sec .flex_column:last-child { padding: 0; }
#top .hsa-hero__bild { margin: 0 !important; }
#top .hsa-hero__bild img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  border-radius: 0;
}
#top .hsa-hero-sec .avia-image-container,
#top .hsa-hero-sec .avia-image-container-inner,
#top .hsa-hero-sec .avia_image { height: 100%; display: block; }

#top .hsa-hero__h1 .av-special-heading-tag { max-width: 15ch; }
#top .hsa-hero__vorspann p {
  font-size: 20px;
  line-height: 1.55;
  color: var(--hsa-neben-dunkel);
  max-width: 42ch;
}
#top .hsa-hero__vorspann { margin-bottom: 28px !important; }

/* Stichzeilen: die drei Sätze, die den Besucher hergebracht haben.
   Balkenliste statt Punkten — Punkte lesen sich als Leistungsversprechen. */
#top .hsa-hero__stich .avia-icon-list { margin: 0; border-left: 2px solid var(--hsa-akzent-hell); }
#top .hsa-hero__stich .iconlist_icon { display: none !important; }
#top .hsa-hero__stich .article-icon-entry { border: 0; padding: 5px 0 5px 18px; min-height: 0; }
#top .hsa-hero__stich .iconlist_title {
  font-family: var(--hsa-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--hsa-auf-dunkel);
  margin: 0;
}
#top .hsa-hero__stich { margin-bottom: 4px; }
#top .hsa-hero__mikro { margin-top: 22px !important; }
#top .hsa-hero__mikro p { font-size: var(--hsa-klein); color: var(--hsa-neben-dunkel); max-width: 44ch; }

/* ------------------------------------------------------------- O-Ton-Band */

.hsa-oton { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.hsa-oton blockquote { margin: 0; padding: 0 0 0 24px; border-left: 3px solid var(--hsa-akzent); }
/* av_heading mit style='blockquote' setzt einen 7 px breiten Rand links und KEIN
   Polster — der Balken klebte am ersten Buchstaben (gemessen: padding-left 0). */
#top .av-special-heading-blockquote blockquote,
#top blockquote.av-special-heading-tag { padding-left: 22px; }
#top .hsa-oton blockquote p {
  font-family: var(--hsa-titel);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.hsa-oton footer { font-size: var(--hsa-klein); color: var(--hsa-neben); }
.hsa-oton footer strong { font-weight: 700; color: var(--hsa-text); }
.hsa-oton footer span::before { content: ' · '; }

.hsa-belege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
}
.hsa-belege li {
  display: flex;
  flex-direction: column;
  padding: 9px 0;
  border-bottom: 1px solid var(--hsa-linie);
  font-size: var(--hsa-klein);
}
.hsa-belege li:nth-last-child(-n+2) { border-bottom: 0; }
.hsa-belege strong { font-weight: 700; font-size: 15px; color: var(--hsa-text); }
.hsa-belege span { color: var(--hsa-neben); }

/* ------------------------------------------------------------- Handlungsband */

#top .hsa-ctaband-sec .content { padding-top: 0 !important; padding-bottom: 0 !important; }
.hsa-ctaband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-left: 4px solid var(--hsa-akzent);
  border-radius: var(--hsa-radius);
  padding: 26px 30px;
  margin: calc(var(--hsa-naht-klein) * -1) 0;
  position: relative;
  z-index: 2;
}
#top .hsa-ctaband__text {
  font-family: var(--hsa-titel);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 34ch;
}
.hsa-ctaband__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }

/* ------------------------------------------------------------- Person / Werte */

#top .hsa-werte__titel.av-special-heading { padding-bottom: 26px !important; }
.hsa-werte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.hsa-werte li { border-top: 2px solid var(--hsa-akzent); padding-top: 14px; }
#top .hsa-werte h3 { font-size: 18px; margin: 0 0 7px; letter-spacing: -0.01em; }
#top .hsa-werte p { font-size: 15px; line-height: 1.55; color: var(--hsa-neben); margin: 0; }

/* ------------------------------------------------------------- Drei Schritte */

.hsa-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.hsa-schritt__nr {
  display: block;
  font-family: var(--hsa-titel);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--hsa-akzent-hell);
  /* [Messen] Bei 55 % Deckkraft kam die Ziffer auf 3,04 : 1 — formal knapp über
     der Grenze für große Schrift, aber kaum sichtbar. 75 % ergibt 4,41 : 1. */
  opacity: .75;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}
#top .hsa-schritte h3 { font-size: 21px; margin: 0 0 9px; }
#top .hsa-schritte p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 42ch; }
#top .hsa-schritte-sec .avia-buttonrow-wrap { margin-top: 48px; }

/* ------------------------------------------------------------- Kacheln */

#top .hsa-sec .flex_column { margin-bottom: var(--hsa-fuge); }

#top .hsa-angebote-sec .entry-content-wrapper,
#top .hsa-kachelreihe .entry-content-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hsa-fuge);
  align-items: stretch;
}
#top .hsa-angebote-sec .entry-content-wrapper > .av-special-heading,
#top .hsa-angebote-sec .entry-content-wrapper > .av_textblock_section,
#top .hsa-angebote-sec .entry-content-wrapper > .hr,
#top .hsa-kachelreihe .entry-content-wrapper > .av-special-heading,
#top .hsa-kachelreihe .entry-content-wrapper > .av_textblock_section,
#top .hsa-kachelreihe .entry-content-wrapper > .hr { grid-column: 1 / -1; }
#top .hsa-angebote-sec .flex_column,
#top .hsa-kachelreihe .flex_column { width: auto !important; margin: 0 !important; float: none; }

#top .flex_column.hsa-kachel {
  display: flex;
  flex-direction: column;
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  overflow: hidden;
}
#top .flex_column.hsa-kachel .av-special-heading,
#top .flex_column.hsa-kachel .avia_textblock,
#top .flex_column.hsa-kachel .avia-button-wrap {
  padding-left: var(--hsa-polster) !important;
  padding-right: var(--hsa-polster) !important;
}
#top .flex_column.hsa-kachel > .avia-image-container { padding: 0; }
#top .hsa-kachel__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; }
#top .hsa-kachel__bild { margin-bottom: 0 !important; }
#top .flex_column.hsa-kachel .av-special-heading { padding-top: 24px; padding-bottom: 4px !important; }
#top .flex_column.hsa-kachel .avia-button-wrap { padding-bottom: var(--hsa-polster); margin-top: auto; }
#top .flex_column.hsa-kachel .avia_textblock { margin-bottom: 14px; }
#top .flex_column.hsa-kachel .avia_textblock p { font-size: 16px; max-width: 46ch; hyphens: auto; }

/* ------------------------------------------------------ Magazin (Beitragsraster)
   Enfolds av_blog im Raster, in derselben Kachel wie die Kurse. Enfold floatet die
   Beitraege und gibt jedem die Spaltenbreite als festes `width` — beides wird hier
   durch ein Raster ersetzt. Enfold buendelt die Beitraege ausserdem zeilenweise in
   `.slide-entry-wrap` — ohne `display:contents` waeren diese Buendel die Rasterfelder
   und stapelten je drei Kacheln in eine Spalte (gemessen: zwei Felder, 1.523 px hoch). */
#top #wrap_all .hsa-magazin .slide-entry-wrap { display: contents; }
#top #wrap_all .hsa-magazin .avia-content-slider,
#top #wrap_all .hsa-magazin .avia-content-slider-inner { overflow: visible; margin: 0; }
#top #wrap_all .hsa-magazin .avia-content-slider-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hsa-fuge);
  align-items: stretch;
}
.responsive #top #wrap_all .hsa-magazin .slide-entry {
  width: auto; margin: 0; float: none;
  display: flex; flex-direction: column;
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  overflow: hidden;
}
#top #wrap_all .hsa-magazin .slide-image { margin: 0; border-radius: 0; display: block; }
#top #wrap_all .hsa-magazin .slide-image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0;
}
#top #wrap_all .hsa-magazin .slide-content {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 24px var(--hsa-polster) var(--hsa-polster);
}
#top #wrap_all .hsa-magazin .slide-entry-title {
  font-family: var(--hsa-titel); font-size: var(--hsa-h3); line-height: 1.25;
  font-weight: 700; margin: 0 0 8px; text-transform: none;
}
#top #wrap_all .hsa-magazin .slide-entry-title a { color: var(--hsa-text); text-decoration: none; }
#top #wrap_all .hsa-magazin .slide-entry-title a:hover { color: var(--hsa-akzent); }
#top #wrap_all .hsa-magazin .slide-entry-excerpt {
  font-size: 16px; line-height: 1.6; color: var(--hsa-neben); max-width: 46ch;
  hyphens: auto; margin: 0 0 14px;
}
#top #wrap_all .hsa-magazin .read-more-link { margin-top: auto; }
#top #wrap_all .hsa-magazin .more-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--hsa-sans); font-weight: 700; font-size: 16px;
  color: var(--hsa-akzent); text-decoration: underline; text-underline-offset: 3px;
}
#top #wrap_all .hsa-magazin .more-link:hover { color: var(--hsa-akzent-tief); }
/* Enfold haengt an jeden Beitrag eine leere Fusszeile, die Metazeile und einen
   .hidden-Block mit Strukturdaten — im Raster kosten sie Platz (gemessen 262 px). */
#top #wrap_all .hsa-magazin .entry-footer,
#top #wrap_all .hsa-magazin .slide-meta,
#top #wrap_all .hsa-magazin .slide-meta-del,
#top #wrap_all .hsa-magazin .slide-entry > .hidden { display: none; }
/* Blaetterung */
#top #wrap_all .hsa-magazin .pagination { margin: var(--hsa-fuge) 0 0; }
#top #wrap_all .hsa-magazin .pagination a,
#top #wrap_all .hsa-magazin .pagination span {
  min-width: 44px; min-height: 44px; line-height: 42px; border-radius: var(--hsa-radius);
  font-family: var(--hsa-sans); font-weight: 600;
}

/* ------------------------------------------------------------ Beitragsseite */
#top .hsa-beitrag-kopf {
  position: relative; background: var(--hsa-tann);
  background-size: cover; background-position: 50% 40%;
}
#top .hsa-beitrag-kopf::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,31,27,.45) 0%, rgba(23,31,27,.82) 100%);
}
#top .hsa-beitrag-kopf > .container { position: relative; padding-top: 112px; padding-bottom: 88px; }
#top .hsa-beitrag-kopf__innen { max-width: 660px; }
#top .hsa-beitrag-kopf__innen h1 {
  color: var(--hsa-auf-dunkel); margin: 0 0 14px; max-width: 19ch; text-transform: none;
}
#top .hsa-beitrag-kopf__meta {
  font-family: var(--hsa-sans); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hsa-akzent-hell); margin: 0 0 14px;
}
#top .hsa-beitrag-kopf__sub {
  font-size: 20px; line-height: 1.5; color: var(--hsa-neben-dunkel); margin: 0; max-width: 44ch;
}

/* Fliesstext des Beitrags: ein Lesemass, linksbuendig, Flatterrand.
   ACHTUNG Spezifitaet: Enfold setzt `#top .fullsize .template-blog .post
   .entry-content-wrapper` (1 ID + 4 Klassen) auf text-align:justify, max-width:800px,
   margin:0 auto — und `> *` zusaetzlich auf max-width:40em mit auto-Rand. Eine Regel
   mit `#top.single-post .entry-content-wrapper` (1 ID + 2 Klassen) verliert dagegen
   lautlos. Deshalb hier dieselbe Kette plus `.single-post`. */
#top.single-post .fullsize .template-blog .post .entry-content-wrapper,
#top.single-post .fullsize .template-blog .post .entry-content-wrapper > * {
  max-width: none; margin-left: 0; margin-right: 0; text-align: left;
}
#top.single-post .entry-content > p,
#top.single-post .entry-content > h2,
#top.single-post .entry-content > h3,
#top.single-post .entry-content > ul,
#top.single-post .entry-content > ol,
#top.single-post .entry-content > blockquote { max-width: 40em; }
#top.single-post .entry-content > h2 { margin-top: 44px; }
#top.single-post .fullsize .template-blog .post .entry-content-wrapper {
  font-size: 1em; line-height: var(--hsa-zeile, 1.65);
}
/* ACHTUNG: `.single-big` sitzt AUCH am <article> selbst — wird sie versteckt,
   verschwindet der ganze Beitrag. Nur den Bildkasten ausblenden. */
#top.single-post .big-preview.single-big,
#top.single-post .post-title,
#top.single-post .blog-meta,
#top.single-post .post-meta-infos { display: none; }
#top.single-post .post_delimiter,
#top.single-post .av-share-box,
#top.single-post .avia-post-nav { display: none; }
#top.single-post .template-blog .post-entry { border: 0; padding-bottom: 0; }

/* Weiterlesen und Handlungsband */
#top .hsa-weiterlesen { margin: 72px 0 0; padding: 0; }
#top .hsa-weiterlesen h2 { font-size: var(--hsa-h3); margin: 0 0 24px; }
#top .hsa-weiterlesen__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hsa-fuge);
}
#top .hsa-weiterlesen__liste > li {
  margin: 0; display: flex; flex-direction: column;
  background: var(--hsa-weiss); border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius); overflow: hidden;
}
#top .hsa-weiterlesen__bild img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0;
}
#top .hsa-weiterlesen__text { padding: 20px var(--hsa-polster) var(--hsa-polster); }
#top #wrap_all .all_colors .hsa-weiterlesen__text h3 {
  font-size: 19px; line-height: 1.3; margin: 0 0 8px;
}
#top .hsa-weiterlesen__text h3 a { color: var(--hsa-text); text-decoration: none; }
#top .hsa-weiterlesen__text h3 a:hover { color: var(--hsa-akzent); }
#top .hsa-weiterlesen__text p { font-size: 16px; line-height: 1.55; color: var(--hsa-neben); margin: 0; }

#top .hsa-beitrag-cta {
  margin: 56px 0 88px; padding: 36px 40px; text-align: left;
  background: var(--hsa-tann); border-radius: var(--hsa-radius);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
#top #wrap_all .all_colors .hsa-beitrag-cta h2 { color: var(--hsa-auf-dunkel); font-size: var(--hsa-h3); margin: 0 0 6px; }
#top .hsa-beitrag-cta p { color: var(--hsa-neben-dunkel); margin: 0; }
/* Eigene Geometrie — `hsa-knopf-einfach` setzt seine Umrissfarben mit !important. */
#top a.hsa-beitrag-cta__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 15px 26px; white-space: nowrap; text-decoration: none;
  border-radius: var(--hsa-radius); font-family: var(--hsa-sans);
  font-size: 16px; font-weight: 700; line-height: 1.2;
  background: var(--hsa-akzent) !important; border: 0 !important; color: #FFFFFF !important;
}
#top a.hsa-beitrag-cta__knopf:hover { background: var(--hsa-akzent-tief) !important; color: #FFFFFF !important; }

/* Die Taktzeile trägt die konkrete Information — sie steht fett, nicht klein. */
#top .hsa-kachel__meta p {
  font-size: 14px;
  font-weight: 700;
  color: var(--hsa-akzent);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  line-height: 1.4;
}
#top .hsa-kachel__meta { margin-bottom: 12px !important; }

/* ------------------------------------------------------------- Preistafel */

.hsa-tafel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  padding: 34px 36px;
}
.hsa-tafel__betrag {
  font-family: var(--hsa-titel);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hsa-akzent);
  margin: 0;
  white-space: nowrap;
}
#top .hsa-tafel h3 { font-size: 20px; margin: 0 0 6px; }
#top .hsa-tafel p { font-size: 16px; line-height: 1.55; color: var(--hsa-neben); margin: 0; max-width: 52ch; }
#top .hsa-tafel__fuss { margin-top: 8px !important; font-size: 14px !important; }
#top .hsa-anker-sec .av_promobox { margin-top: 26px; }

/* ------------------------------------------------------------- Aufzählungen */

#top .avia-icon-list { margin: 0; }
#top .avia-icon-list li { padding: 0; margin: 0; }
#top .avia-icon-list .iconlist_icon {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  max-width: 8px;
  line-height: 8px !important;
  font-size: 0 !important;
  margin-top: 13px;
  background: var(--hsa-akzent) !important;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  left: 0;
}
#top .avia-icon-list .iconlist_icon .av-icon-char { display: none; }
#top .avia-icon-list .iconlist_icon:hover { background: var(--hsa-akzent) !important; }
#top .avia-icon-list .article-icon-entry {
  padding: 13px 0 13px 24px;
  border-bottom: 1px solid var(--hsa-linie);
  min-height: 0;
}
#top .avia-icon-list li:last-child .article-icon-entry { border-bottom: 0; }
#top .avia-icon-list .iconlist_title {
  font-family: var(--hsa-titel);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
}
#top .avia-icon-list .iconlist_content_wrap,
#top .avia-icon-list .iconlist-timeline { border: 0; }
#top .avia-icon-list .iconlist_content { margin-top: 3px; }
#top .avia-icon-list .iconlist_content p {
  font-size: 16px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
  color: var(--hsa-neben);
}
#top .hsa-flaeche--tanne .avia-icon-list .article-icon-entry { border-bottom-color: var(--hsa-linie-dunkel); }
#top .hsa-flaeche--tanne .avia-icon-list .iconlist_content p { color: var(--hsa-neben-dunkel); }
#top .avia-icon-list .article-icon-entry a { color: inherit; }
#top .avia-icon-list .iconlist_title a { text-decoration: none; }
#top .avia-icon-list .iconlist_title a:hover { color: var(--hsa-akzent); }
#top .hsa-module .iconlist_title { font-size: 20px; }

/* ------------------------------------------------------------- Passt / passt nicht */

.hsa-fuerwen__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  overflow: hidden;
}
.hsa-fuerwen__spalte { padding: 32px 34px; }
.hsa-fuerwen__spalte + .hsa-fuerwen__spalte { border-left: 1px solid var(--hsa-linie); }
#top .hsa-fuerwen h3 {
  font-size: 13px;
  margin: 0 0 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--hsa-sans);
  font-weight: 700;
  color: var(--hsa-neben);
}
.hsa-fuerwen ul { list-style: none; margin: 0; padding: 0; }
.hsa-fuerwen li { position: relative; padding: 0 0 14px 30px; line-height: 1.5; font-size: 16px; max-width: 44ch; }
.hsa-fuerwen li:last-child { padding-bottom: 0; }
.hsa-liste--ja li::before,
.hsa-liste--nein li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 16px; }
.hsa-liste--ja li::before   { content: '✓'; color: #3F6B4E; }
.hsa-liste--nein li::before { content: '✕'; color: var(--hsa-neben); }

/* ------------------------------------------------------------- FAQ */

#top .togglecontainer { margin: 0; max-width: 900px; }
#top .togglecontainer .single_toggle { margin: 0 0 8px; }
#top .togglecontainer .toggler {
  font-family: var(--hsa-titel);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.012em;
  padding: 19px 52px 19px 22px;
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  background: var(--hsa-weiss);
  color: var(--hsa-text);
  min-height: 44px;
  text-transform: none;
}
#top .togglecontainer .toggler:hover { border-color: var(--hsa-rahmen); }
#top .togglecontainer .toggler.activeTitle { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#top .togglecontainer .toggler .toggle_icon { right: 20px; left: auto; border: 0; width: 20px; height: 20px; top: 24px; }
#top .togglecontainer .toggle_icon .vert_icon,
#top .togglecontainer .toggle_icon .hor_icon { border-color: var(--hsa-akzent); border-width: 2px; }
#top .togglecontainer .toggle_wrap { border: 0; }
#top .togglecontainer .toggle_content {
  padding: 4px 52px 24px 22px;
  border: 1px solid var(--hsa-linie);
  border-top: 0;
  border-bottom-left-radius: var(--hsa-radius);
  border-bottom-right-radius: var(--hsa-radius);
  background: var(--hsa-weiss);
  max-width: none;
}
#top .togglecontainer .toggle_content p { margin-bottom: 12px; max-width: var(--hsa-satz); }
#top .togglecontainer .toggle_content p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- Hinweiskasten */

#top .av_promobox {
  border: 0;
  border-left: 4px solid #9A4319;
  border-radius: 0 var(--hsa-radius) var(--hsa-radius) 0;
  background: #FBEDE7;
  box-shadow: none;
  margin: 32px 0 0;
}
#top .av_promobox .avia-promocontent { padding: 17px 22px; }
#top .av_promobox .avia-promocontent p {
  font-size: 15px; line-height: 1.6; color: var(--hsa-text); margin: 0; max-width: 76ch;
}

#top .hr { margin: 0; }
#top .hr .hr-inner { border: 0; }
#top .avia_codeblock { margin: 0; }

/* ------------------------------------------------------------- Abschlussband */

#top .hsa-abschluss-sec .flex_column { margin-bottom: 0; }
#top .hsa-abschluss__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
#top .hsa-abschluss h2 { color: var(--hsa-auf-dunkel); max-width: 20ch; margin-bottom: 16px; }
#top .hsa-abschluss__zusage {
  font-size: 19px; line-height: 1.6; color: var(--hsa-neben-dunkel); max-width: 52ch; margin: 0 0 26px;
}
.hsa-abschluss__belege { list-style: none; margin: 0 0 30px; padding: 0; }
#top .hsa-abschluss__belege li {
  font-size: 15px;
  color: var(--hsa-auf-dunkel);
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--hsa-linie-dunkel);
  position: relative;
}
#top .hsa-abschluss__belege li::before {
  content: '';
  position: absolute; left: 0; top: 18px;
  width: 9px; height: 2px; background: var(--hsa-akzent-hell);
}
.hsa-abschluss__aktionen { display: flex; flex-wrap: wrap; gap: 12px 14px; }
#top .hsa-abschluss__tel { margin: 20px 0 0; font-size: 15px; color: var(--hsa-neben-dunkel); }
#top .hsa-abschluss__tel a { color: var(--hsa-akzent-hell); font-weight: 700; }

/* ------------------------------------------------------------- Karte, Adresse */

.hsa-karte-platzhalter {
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-linie);
  border-radius: var(--hsa-radius);
  padding: var(--hsa-polster);
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.hsa-karte-platzhalter p { font-size: 15px; color: var(--hsa-neben); max-width: 44ch; margin: 0; }
.hsa-karte-platzhalter iframe { width: 100%; height: 340px; border: 0; display: block; }

#top .hsa-adresse { display: block; font-style: normal; line-height: 1.8; margin: 0; }
#top .hsa-adresse strong { display: block; margin-bottom: 6px; font-weight: 700; }
#top .hsa-adresse a { color: var(--hsa-akzent); min-height: 26px; display: inline-block; }
#top .hsa-adresse-block { margin-top: 28px !important; }

#top .hsa-wege { list-style: none; margin: 0; padding: 0; }
#top .hsa-wege li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 0; border-top: 1px solid var(--hsa-linie);
}
#top .hsa-wege li:last-child { border-bottom: 1px solid var(--hsa-linie); }
#top .hsa-wege span:first-child {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hsa-neben); font-weight: 700;
}
#top .hsa-wege a { font-size: 19px; font-weight: 600; min-height: 30px; display: inline-block; color: var(--hsa-akzent); }

#top .hsa-fazit p {
  font-family: var(--hsa-titel);
  font-size: 20px; line-height: 1.45; font-weight: 500;
  letter-spacing: -0.012em; max-width: var(--hsa-satz);
}

/* ------------------------------------------------------------- Rechtstexte */

#top .hsa-recht { max-width: 800px; }
#top .hsa-recht h2 { font-size: 25px; margin: 52px 0 14px; }
#top .hsa-recht > *:first-child { margin-top: 0; }
#top .hsa-recht h3 { font-size: 19px; margin: 30px 0 9px; }
#top .hsa-recht p, #top .hsa-recht li { font-size: 17px; line-height: 1.68; }
#top .hsa-recht ul { margin: 0 0 var(--hsa-absatz) 20px; }
#top .hsa-recht a { color: var(--hsa-akzent); }
#top .hsa-rechtskopf__stand p { color: var(--hsa-neben); font-size: var(--hsa-klein); }
#top .hsa-rechtskopf-sec .av-special-heading { padding-bottom: 8px !important; }
#top .hsa-fehlt { background: #FFE1DA; color: #97371A; padding: 2px 8px; font-size: 14px; }

/* ------------------------------------------------------------- Formular */

#top .hsa-feldgruppe { border: 0; padding: 0; margin: 0 0 34px; }
#top .hsa-feldgruppe legend {
  font-family: var(--hsa-sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hsa-akzent);
  padding: 0 0 9px; margin: 0 0 20px;
  border-bottom: 2px solid var(--hsa-akzent);
  width: 100%;
}
#top .hsa-feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#top .hsa-feld { display: block; margin-bottom: 18px; }
#top .hsa-feld > span:first-child,
#top .hsa-feld-titel { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
#top .hsa-pflicht { color: var(--hsa-akzent); border: 0; text-decoration: none; }

#top .wpcf7 input[type=text],
#top .wpcf7 input[type=email],
#top .wpcf7 input[type=tel],
#top .wpcf7 input[type=date],
#top .wpcf7 select,
#top .wpcf7 textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-family: var(--hsa-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--hsa-text);
  background: var(--hsa-weiss);
  border: 1px solid var(--hsa-rahmen);   /* 3,79 : 1 — WCAG 1.4.11 verlangt 3,0 */
  border-radius: var(--hsa-radius);
  box-shadow: none;
}
#top .wpcf7 textarea { min-height: 165px; resize: vertical; }
#top .wpcf7 input:focus, #top .wpcf7 select:focus, #top .wpcf7 textarea:focus { border-color: var(--hsa-akzent); }
#top .wpcf7 .wpcf7-list-item { display: block; margin: 0; }
#top .wpcf7 .wpcf7-list-item label { display: flex; gap: 10px; align-items: center; cursor: pointer; min-height: 44px; padding: 3px 0; }
#top .wpcf7 .wpcf7-list-item input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; }
#top .wpcf7 .wpcf7-list-item-label { font-size: 16px; line-height: 1.5; }
/* Honigtopf: nur ausserhalb des Bildschirms zu parken reicht nicht — das Feld bleibt
   fuer Tastatur und Vorlesehilfe erreichbar und meldet sich als Feld ohne Beschriftung.
   `aria-hidden` und `tabindex=-1` setzt setup-cf7.php, hier faellt es aus dem Fluss. */
#top .wpcf7 .hsa-honig { position: absolute; left: -9999px; }
#top .wpcf7 input[type=submit] {
  min-height: 54px; padding: 15px 32px;
  background: var(--hsa-akzent); color: #FFFFFF;
  border: 2px solid var(--hsa-akzent); border-radius: var(--hsa-radius);
  font-family: var(--hsa-sans); font-size: 16px; font-weight: 700;
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
#top .wpcf7 input[type=submit]:hover { background: var(--hsa-akzent-tief); border-color: var(--hsa-akzent-tief); }
#top .wpcf7 .hsa-formhinweis { font-size: 14px; color: var(--hsa-neben); max-width: 60ch; }
#top .wpcf7-not-valid-tip { color: #97371A; font-size: 14px; margin-top: 5px; }
#top .wpcf7-response-output {
  border-width: 1px; border-radius: var(--hsa-radius);
  padding: 14px 16px; margin: 30px 0 0; font-size: 16px;
}

/* ------------------------------------------------------------- Kontaktleiste und Kopf */

/* Die Infozeile klebt mit. Enfold setzt den Kopf auf position:fixed und top:40px —
   die Hoehe dieser Leiste. Blieb sie stehen, scrollte sie weg und ueber dem Kopf klaffte
   ein 40 px hoher Streifen. `sticky` laesst sie im Fluss (kein Sprung beim Laden) und
   heftet sie beim Scrollen an die Oberkante; z-index ueber dem Kopf (501).

   Dazu noetig: Enfolds base.css setzt `overflow-x: hidden` auf html UND body. Das macht
   den Rumpf zu einem eigenen Scrollbereich, und darin klebt nichts — gemessen: die Leiste
   wanderte trotz `sticky` mit dem Inhalt nach oben weg. `clip` schneidet genauso ab,
   erzeugt aber keinen Scrollbereich. */
html.responsive, .responsive body { overflow-x: clip; }
/* ACHTUNG: unter 990 px setzt Enfold `.responsive #top { overflow-x: hidden }` erneut,
   in einer Medienabfrage (grid.css). `#top` IST der Rumpf, und `.responsive #top`
   (0-1-1) schlaegt `.responsive body` (0-1-1) durch die spaetere Position in der
   zusammengefassten Datei. Gemessen: bei 390 und 768 px stand `overflow-x: hidden`,
   ab 1024 px `clip`.
   ZWEITE FALLE: die Klasse `responsive` sitzt am <html>, NICHT am Rumpf — `#top.responsive`
   trifft nichts. Es braucht `html.responsive body#top` (1 ID, 1 Klasse, 2 Elemente). */
@media only screen and (max-width: 1023px) {
  html.responsive, html.responsive body#top { overflow-x: clip; }
}
.hsa-topbar { background: var(--hsa-tann); color: var(--hsa-neben-dunkel); font-size: 14px;
  position: sticky; top: 0; z-index: 502; }
.hsa-topbar__innen {
  max-width: var(--hsa-breite);
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 26px;
  min-height: 40px;
}
.hsa-topbar a { color: var(--hsa-auf-dunkel); font-weight: 600; }
.hsa-topbar a:hover { color: #FFFFFF; }
.hsa-topbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.hsa-topbar__ort { color: var(--hsa-neben-dunkel); }

/* Der Kopf steht auf eigener Fläche — nicht transparent über dem Hero.
   [Messen] Über dem hellen Himmel des Hero-Fotos war das Menü nicht lesbar. */
#top #header, #top #header_main { border-bottom: 0; }
#top #header_main, #top .av-logo-container { background: var(--hsa-wiese); }

#top .av-main-nav > li > a {
  font-family: var(--hsa-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
#top .av-main-nav > li > a .avia-menu-text { color: var(--hsa-auf-dunkel); }
/* Untermenue: Enfold setzt dort 12 px / 400 — neben 16 px / 600 der Hauptpunkte
   sieht das aus wie ein anderer Bestand (gemessen 08.09.2026). */
#top .av-main-nav ul li a,
#top .av-main-nav .sub-menu li a { font-family: var(--hsa-sans); font-size: 16px;
  font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.35;
  padding-top: 11px; padding-bottom: 11px; height: auto; min-height: 44px; }
#top .av-main-nav ul li a .avia-menu-text { font-size: 16px; font-weight: 600; }
#top .av-main-nav ul { width: auto; min-width: 260px; }
#top .av-main-nav > li:hover > a .avia-menu-text,
#top .av-main-nav > li.current-menu-item > a .avia-menu-text { color: #FFFFFF; }
#top .av-main-nav > li > a .avia-menu-fx { display: none; }
#top .av-main-nav-wrap, #top .main_menu { white-space: nowrap; }
#top .av-burger-menu-main .av-hamburger-inner,
#top .av-burger-menu-main .av-hamburger-inner::before,
#top .av-burger-menu-main .av-hamburger-inner::after { background-color: var(--hsa-auf-dunkel); }

#top .logo a {
  display: flex; align-items: center; height: 100%;
  box-sizing: content-box; padding-right: 44px; text-decoration: none;
}
#top .logo svg { width: 268px; height: auto; max-height: none; display: block; color: var(--hsa-auf-dunkel); }
@media only screen and (max-width: 767px) { #top .logo svg { width: 168px; } }

/* Hauptaktion im Menü */
#top .av-main-nav > li.hsa-menue-cta > a .avia-menu-text {
  background: var(--hsa-akzent);
  color: #FFFFFF;
  padding: 11px 20px;
  border-radius: var(--hsa-radius);
  font-weight: 700;
  display: inline-block;
  line-height: 20px;
  vertical-align: middle;
}
#top .av-main-nav > li.hsa-menue-cta > a:hover .avia-menu-text { background: var(--hsa-akzent-tief); color: #FFFFFF; }
#top .av-main-nav > li.hsa-menue-cta > a { padding-left: 14px; padding-right: 0; }

@media only screen and (min-width: 768px) and (max-width: 1140px) {
  .responsive.html_mobile_menu_tablet #top .av-burger-menu-main { display: block; }
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none; }
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special { display: block; }
  .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu { top: 0; left: auto; right: 0; display: block; }
  #top .av-burger-menu-main { display: flex; align-items: center; height: 100%; }
}
#top #av-burger-menu-ul li a { white-space: normal; }

/* ------------------------------------------------------------- Fuß */

.hsa-fuss { clear: both; background: var(--hsa-tann); color: var(--hsa-auf-dunkel); padding: 72px 0 0; }
.hsa-fuss__innen {
  max-width: var(--hsa-breite);
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--hsa-fuge);
}
.hsa-fuss__kopf, .hsa-fuss__name {
  font-family: var(--hsa-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 16px; color: var(--hsa-neben-dunkel);
}
.hsa-fuss address { font-style: normal; line-height: 1.75; font-size: 16px; color: var(--hsa-neben-dunkel); }
.hsa-fuss address strong { color: var(--hsa-auf-dunkel); font-weight: 600; display: block; margin-bottom: 4px; }
.hsa-fuss a { color: var(--hsa-neben-dunkel); }
.hsa-fuss a:hover { color: #FFFFFF; }
.hsa-fuss__liste { list-style: none; margin: 0; padding: 0; }
.hsa-fuss__liste li { margin: 0; }
.hsa-fuss__liste a { display: inline-block; padding: 9px 0; min-height: 44px; font-size: 16px; line-height: 26px; }
.hsa-fuss__spalte--aktion p { font-size: 16px; color: var(--hsa-neben-dunkel); max-width: 32ch; margin: 0 0 18px; }
.hsa-fuss a.hsa-knopf--haupt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 15px 26px;
  background: var(--hsa-akzent); color: #FFFFFF;
  border-radius: var(--hsa-radius); font-weight: 700; font-size: 16px; text-decoration: none;
}
.hsa-fuss a.hsa-knopf--haupt:hover { background: var(--hsa-akzent-tief); color: #FFFFFF; }
/* Kündigungsknopf (§ 312k BGB): gut lesbar, ohne Zusatz beschriftet, im Fußbereich
   auf jeder Seite sichtbar. Umriss statt Fläche — er ist Pflicht, aber kein Angebot.
   Beide Knöpfe der Spalte stehen als Block untereinander und sind gleich breit. */
.hsa-fuss__spalte--aktion a.hsa-knopf--haupt,
.hsa-fuss__spalte--aktion a.hsa-kuendigungsknopf { display: flex; width: 100%; max-width: 290px; }
.hsa-fuss a.hsa-kuendigungsknopf {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 14px; min-height: 44px; padding: 11px 18px;
  border-radius: var(--hsa-radius); font-weight: 700; font-size: 15px; line-height: 1.2;
  color: #FFFFFF; text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .72);
}
.hsa-fuss a.hsa-kuendigungsknopf:hover {
  background: #FFFFFF; color: var(--hsa-text); box-shadow: inset 0 0 0 2px #FFFFFF;
}

/* Amtliches Muster-Widerrufsformular: abgesetzter Kasten zum Abschreiben oder Ausdrucken. */
.hsa-muster {
  border: 1px solid var(--hsa-linie); border-radius: var(--hsa-radius);
  padding: 24px; background: #FFFFFF; margin: 24px 0;
}
.hsa-muster p { margin: 0 0 16px; font-size: 17px; line-height: 1.7; }
.hsa-muster p:last-child { margin-bottom: 0; }
.hsa-formularkarte { margin-top: 24px; }
.hsa-fuss__verband {
  margin: 26px 0 0; font-size: 14px; color: var(--hsa-neben-dunkel);
  padding-top: 16px; border-top: 1px solid var(--hsa-linie-dunkel);
}
/* .hsa-fuss__zeile ist entfallen — der Fussbereich endet jetzt mit den Spalten. */
.hsa-fuss { padding-bottom: 56px; }

#top #socket { display: none; }
#top #footer { padding: 0; background: var(--hsa-tann); border: 0; }

/* ------------------------------------------------------------- Bewegung */

/* site.js nimmt vom Einblenden ZWEI Sektionsarten aus: hsa-hero-sec und hsa-kopf-sec.
   Das CSS kannte nur die erste — der Kopf der Unterseiten stand deshalb dauerhaft auf
   opacity 0, die Überschrift war im Hero unsichtbar (gemessen 08.09.2026). */
.hsa-js .hsa-sec:not(.hsa-hero-sec):not(.hsa-kopf-sec) .entry-content-wrapper > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--hsa-anim) ease-out, transform var(--hsa-anim) ease-out;
}
/* Dieselbe Zahl an Klassen wie die Regel darueber plus eine — sonst gewinnt das
   Verstecken, sobald dort ein :not() dazukommt (jede :not()-Bedingung zaehlt mit). */
.hsa-js .hsa-sec.hsa-sichtbar:not(.hsa-hero-sec):not(.hsa-kopf-sec)
  .entry-content-wrapper > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hsa-js .hsa-sec .entry-content-wrapper > * { opacity: 1 !important; transform: none !important; transition: none; }
  #top * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------------- Zwischenbreiten */

@media only screen and (max-width: 1279px) {
  #top .hsa-hero-sec .flex_column:first-child { padding-left: 40px; padding-right: 40px; }
}

@media only screen and (max-width: 1024px) {
  .hsa-werte { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
  .hsa-oton { grid-template-columns: 1fr; gap: 32px; }
  .hsa-schritte { grid-template-columns: 1fr; gap: 26px; }
  .hsa-schritte li { border-top: 1px solid var(--hsa-linie-dunkel); padding-top: 20px; }
  .hsa-schritt__nr { font-size: 34px; margin-bottom: 6px; }
  #top .hsa-angebote-sec .entry-content-wrapper,
  #top .hsa-kachelreihe .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top #wrap_all .hsa-magazin .avia-content-slider-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top .hsa-weiterlesen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 989px) {
  /* Hero wird einspaltig: erst Bild, dann Text */
  #top .hsa-hero-sec .entry-content-wrapper { display: flex; flex-direction: column; }
  #top .hsa-hero-sec .flex_column:first-child { padding: 52px 26px 56px; width: 100% !important; }
  #top .hsa-hero-sec .flex_column:last-child { width: 100% !important; order: -1; }
  #top .hsa-hero__bild img { min-height: 0; aspect-ratio: 4 / 3; }

  .hsa-fuerwen__paar { grid-template-columns: 1fr; }
  .hsa-fuerwen__spalte + .hsa-fuerwen__spalte { border-left: 0; border-top: 1px solid var(--hsa-linie); }
  .hsa-tafel { grid-template-columns: 1fr; gap: 18px; }
  .hsa-fuss__innen { grid-template-columns: 1fr 1fr; }
  #top .hsa-abschluss-sec .flex_column:first-child { max-width: 320px; }
}

/* ------------------------------------------------------------- Handy */

@media only screen and (max-width: 767px) {
  #top .hsa-sec > .container,
  #top .hsa-sec .content { padding-left: 22px; padding-right: 22px; }

  .hsa-topbar__innen { justify-content: center; padding: 7px 22px; min-height: 0; }
  .hsa-topbar__ort { display: none; }

  .hsa-belege { grid-template-columns: 1fr; gap: 0; }
  .hsa-belege li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hsa-linie); }
  .hsa-belege li:last-child { border-bottom: 0; }
  .hsa-werte { grid-template-columns: 1fr; gap: 0; }
  .hsa-werte li { border-top: 1px solid var(--hsa-linie); padding: 16px 0; }
  .hsa-werte li:first-child { border-top: 2px solid var(--hsa-akzent); }

  .hsa-ctaband { flex-direction: column; align-items: stretch; padding: 22px; margin: -32px 0; }
  .hsa-ctaband__aktion { flex-direction: column; align-items: stretch; }
  #top .hsa-band__knopf { width: 100%; }
  #top .hsa-band__link { justify-content: center; }

  /* Angebote werden Zeilenliste statt Karten — spart über 1.000 px Scrollweg. */
  #top .hsa-angebote-sec .entry-content-wrapper,
  #top .hsa-kachelreihe .entry-content-wrapper { grid-template-columns: 1fr; gap: 0; }
  #top #wrap_all .hsa-magazin .avia-content-slider-inner { grid-template-columns: 1fr; gap: 20px; }
  #top .hsa-weiterlesen__liste { grid-template-columns: 1fr; gap: 20px; }
  #top .hsa-beitrag-cta { grid-template-columns: 1fr; }
  #top a.hsa-beitrag-cta__knopf { display: flex; width: 100%; white-space: normal; }
  #top .hsa-beitrag-kopf > .container { padding-top: 88px; padding-bottom: 64px; }
  #top .hsa-angebote-sec .flex_column.hsa-kachel {
    border: 0; border-bottom: 1px solid var(--hsa-linie); border-radius: 0;
    background: transparent; margin-bottom: 0 !important;
  }
  #top .hsa-angebote-sec .flex_column.hsa-kachel > .avia-image-container { display: none; }
  #top .hsa-angebote-sec .flex_column.hsa-kachel .hsa-kachel__text { display: none; }
  #top .hsa-angebote-sec .flex_column.hsa-kachel .av-special-heading,
  #top .hsa-angebote-sec .flex_column.hsa-kachel .avia_textblock,
  #top .hsa-angebote-sec .flex_column.hsa-kachel .avia-button-wrap { padding-left: 0 !important; padding-right: 0 !important; }
  #top .hsa-angebote-sec .flex_column.hsa-kachel .av-special-heading { padding-top: 20px; }
  #top .hsa-angebote-sec .flex_column.hsa-kachel .avia-button-wrap { padding-bottom: 16px; }
  #top .hsa-kachelreihe .flex_column.hsa-kachel { margin-bottom: var(--hsa-fuge) !important; }

  #top .avia-buttonrow-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  #top .avia-buttonrow-wrap .avia-button,
  #top .hsa-knopf--haupt .avia-button,
  #top .hsa-knopf--umriss .avia-button { width: 100%; }

  #top .hsa-oton blockquote p { font-size: 20px; }
  #top .hsa-vorspann p, #top .hsa-zuordnung p { font-size: 17px; }
  #top .hsa-hero__vorspann p { font-size: 18px; }
  #top .togglecontainer .toggler { font-size: 17px; padding-right: 46px; }
  .hsa-tafel { padding: 26px 22px; }
  .hsa-tafel__betrag { font-size: 32px; }
  .hsa-fuerwen__spalte { padding: 24px 22px; }

  .hsa-fuss__innen { grid-template-columns: 1fr; gap: 30px; }
  .hsa-fuss { padding-top: 52px; }
  .hsa-fuss__zeile { flex-direction: column; }
  #top .hsa-feldpaar { grid-template-columns: 1fr; gap: 0; }
  #top .hsa-band img { aspect-ratio: 16 / 10; }
  #top .hsa-abschluss-sec .flex_column:first-child { max-width: none; margin-bottom: 26px; }
  #top .hsa-abschluss__bild img { aspect-ratio: 16 / 10; }
}

/* Mitlaufende Aktionsleiste — nur auf Marketingseiten. */
@media only screen and (max-width: 767px) {
  .hsa-leiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(38, 48, 42, .97);
    transform: translateY(110%);
    transition: transform 260ms ease-out;
  }
  .hsa-leiste[data-an] { transform: none; }
  .hsa-leiste a {
    min-height: 48px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--hsa-radius); font-weight: 700; font-size: 16px; text-decoration: none;
  }
  .hsa-leiste__tel { width: 48px; flex: 0 0 48px; border: 1px solid rgba(246,244,239,.4); color: var(--hsa-auf-dunkel); }
  .hsa-leiste__cta { flex: 1 1 auto; background: var(--hsa-akzent); color: #FFFFFF; }
  @media (prefers-reduced-motion: reduce) { .hsa-leiste { transition: none; } }
}
@media only screen and (min-width: 768px) { .hsa-leiste { display: none; } }

/* Hero-Spalten.
   [Messen] `av_one_half` reicht `custom_class` NICHT durch (wie av_buttonrow_item)
   — die eigene Klasse fehlt im Quelltext. Enfold setzt außerdem `padding: 0px`
   inline an jede Spalte. Deshalb Positionsselektor plus !important.
   Die beiden Hälften laufen auf je 50 % ohne Zwischenraum, damit das Foto
   bündig an die Textfläche stößt. */
/* Zwei IDs im Selektor: Enfold erzeugt je Spalte eine eigene Regel unter
   `#top #wrap_all .<hash>` — das sind zwei IDs, und bei gleichem !important
   entscheidet die Spezifität. Mit nur `#top` verliert jede eigene Regel. */
#top #wrap_all .hsa-hero-sec .flex_column {
  width: 50% !important;
  margin: 0 !important;
  min-height: 0;
}
#top #wrap_all .hsa-hero-sec .flex_column:first-child {
  /* Einzelwerte statt Shorthand: eine Kurzschreibweise mit max()/calc() fällt in
     manchen Parsern komplett weg — dann steht der Text ohne Rand am Bildschirmrand. */
  padding-top: 108px !important;
  padding-right: 56px !important;
  padding-bottom: 96px !important;
  padding-left: 26px !important;
  box-sizing: border-box;
}
@supports (padding-left: max(1px, 1vw)) {
  #top #wrap_all .hsa-hero-sec .flex_column:first-child {
    padding-left: max(26px, calc((100vw - var(--hsa-breite)) / 2 + 26px)) !important;
  }
}
#top #wrap_all .hsa-hero-sec .flex_column:last-child {
  padding: 0 !important;
}

@media only screen and (max-width: 989px) {
  #top #wrap_all .hsa-hero-sec .flex_column { width: 100% !important; }
  #top #wrap_all .hsa-hero-sec .flex_column:first-child {
    padding: 48px 26px 52px !important;
    padding-left: 26px !important;
  }
}

/* Enfolds Titelleiste, falls sie doch einmal ausgegeben wird. */
#top .title_container { display: none; }

/* ------------------------------------------------------------- Nachbesserungen
   Aus dem Sichtdurchgang; jede Regel mit Grund. */

/* Das Hero-Foto muss die Spalte ganz füllen — sonst steht oben und unten die
   dunkle Fläche neben dem Bild. */
#top #wrap_all .hsa-hero-sec .flex_column:last-child { align-self: stretch; }
#top .hsa-hero-sec .flex_column:last-child .avia-image-container,
#top .hsa-hero-sec .flex_column:last-child .avia-image-container-inner,
#top .hsa-hero-sec .flex_column:last-child .avia_image { height: 100%; display: block; }
#top .hsa-hero__bild img { height: 100%; min-height: 100%; }

/* Der Abstand zum Zugehörigen ist kleiner als der zum Nächsten: die Überschrift
   bekommt Luft nach unten, der Vorspann steht nicht auf ihr. */
#top .av-special-heading { padding-bottom: 24px !important; }
#top .hsa-etikett + .av-special-heading { padding-top: 0; }
#top .hsa-hero__h1.av-special-heading { padding-bottom: 20px !important; }

/* Zwei Knöpfe passen in der halben Hero-Spalte nebeneinander, wenn der zweite
   nicht zu breit wird. */
#top .hsa-hero-sec .avia-buttonrow-wrap .avia-button { padding-left: 22px; padding-right: 22px; }

/* Die Textspalte des Hero bekommt etwas mehr Breite als das Foto — sonst bricht
   die Überschrift in vier Zeilen. */
#top #wrap_all .hsa-hero-sec .flex_column:first-child { width: 54% !important; }
#top #wrap_all .hsa-hero-sec .flex_column:last-child { width: 46% !important; }
@media only screen and (max-width: 989px) {
  #top #wrap_all .hsa-hero-sec .flex_column:first-child,
  #top #wrap_all .hsa-hero-sec .flex_column:last-child { width: 100% !important; }
}

/* Vorspann steht nicht auf der Überschrift. */
#top .hsa-hero__vorspann { margin-top: 4px; }

/* Gemessener Abstand H1 → Vorspann im Hero war 4 px; die Zeile las sich als
   Fortsetzung der Überschrift. */
#top .hsa-hero__h1.av-special-heading { padding-bottom: 22px !important; }
#top .hsa-hero__vorspann { margin-top: 0; margin-bottom: 30px !important; }
#top .hsa-hero__stich .avia-icon-list { padding: 2px 0; }
#top .hsa-hero__stich .article-icon-entry { padding-top: 7px; padding-bottom: 7px; }

/* ------------------------------------------------------------- Codeblock-Grundlagen
   [Messen] Ein <ol> mit `display: grid` im Codeblock kam auf 549 px statt 1168 px
   und stand neben der Überschrift statt darunter: Enfolds Listenstile setzen
   die Breite auf den Inhalt. Alle eigenen Blöcke bekommen deshalb ausdrücklich
   die volle Breite — und keine Aufzählungspunkte, die Enfold sonst mitliefert. */

#top .avia_codeblock,
#top .avia_codeblock_section { display: block; width: 100%; clear: both; }

#top .avia_codeblock .hsa-schritte,
#top .avia_codeblock .hsa-werte,
#top .avia_codeblock .hsa-belege,
#top .avia_codeblock .hsa-oton,
#top .avia_codeblock .hsa-fuerwen__paar,
#top .avia_codeblock .hsa-tafel,
#top .avia_codeblock .hsa-ctaband,
#top .avia_codeblock .hsa-abschluss,
#top .avia_codeblock .hsa-karte-platzhalter,
#top .avia_codeblock .hsa-abschluss__belege {
  width: 100%;
  box-sizing: border-box;
}

#top .avia_codeblock ul,
#top .avia_codeblock ol,
#top .avia_codeblock li {
  list-style: none !important;
  list-style-type: none !important;
  margin-left: 0;
  padding-left: 0;
}
#top .avia_codeblock li::marker { content: ''; }

/* Die Listen, die doch eine Marke tragen, setzen sie selbst über ::before. */
#top .avia_codeblock .hsa-fuerwen li { padding-left: 30px; }
#top .avia_codeblock .hsa-abschluss__belege li { padding-left: 22px; }
#top .avia_codeblock .hsa-schritte li { padding-left: 0; }

/* ------------------------------------------------------------- Spezifität
   [Messen] Enfolds `#top .avia_codeblock p` (1-2-1) schlägt jede eigene
   Klassenregel ohne `#top .avia_codeblock` davor: Der Preisbetrag stand mit
   16 px statt 40 px, und die Häkchenliste hatte kein Einrücken, so dass das
   Häkchen auf dem ersten Buchstaben lag. Alle Textregeln in Codeblöcken
   brauchen deshalb dieselbe Wurzel. */

#top .avia_codeblock .hsa-tafel__betrag {
  font-family: var(--hsa-titel);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hsa-akzent);
  margin: 0;
  white-space: nowrap;
}
#top .avia_codeblock .hsa-tafel h3 { font-size: 20px; margin: 0 0 6px; }
#top .avia_codeblock .hsa-tafel p { font-size: 16px; line-height: 1.55; color: var(--hsa-neben); margin: 0; max-width: 52ch; }
#top .avia_codeblock .hsa-tafel__fuss { margin-top: 8px; font-size: 14px; }

#top .avia_codeblock .hsa-fuerwen li,
#top .avia_codeblock .hsa-liste--ja li,
#top .avia_codeblock .hsa-liste--nein li {
  position: relative;
  padding: 0 0 14px 30px;
  line-height: 1.5;
  font-size: 16px;
  max-width: 44ch;
}
#top .avia_codeblock .hsa-fuerwen li:last-child { padding-bottom: 0; }
#top .avia_codeblock .hsa-fuerwen h3 {
  font-size: 13px; margin: 0 0 18px;
  letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--hsa-sans); font-weight: 700; color: var(--hsa-neben);
}

#top .avia_codeblock .hsa-schritt__nr { font-size: 46px; }
#top .avia_codeblock .hsa-schritte h3 { font-size: 21px; margin: 0 0 9px; }
#top .avia_codeblock .hsa-schritte p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 42ch; }
#top .avia_codeblock .hsa-werte h3 { font-size: 18px; margin: 0 0 7px; }
#top .avia_codeblock .hsa-werte p { font-size: 15px; line-height: 1.55; color: var(--hsa-neben); margin: 0; }
#top .avia_codeblock .hsa-oton blockquote p {
  font-family: var(--hsa-titel); font-size: 24px; line-height: 1.35;
  font-weight: 500; letter-spacing: -0.015em; margin: 0 0 12px;
}
#top .avia_codeblock .hsa-ctaband__text {
  font-family: var(--hsa-titel); font-size: 21px; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em; margin: 0; max-width: 34ch;
}
#top .avia_codeblock .hsa-abschluss h2 { color: var(--hsa-auf-dunkel); max-width: 20ch; margin-bottom: 16px; }
#top .avia_codeblock .hsa-abschluss__zusage {
  font-size: 19px; line-height: 1.6; color: var(--hsa-neben-dunkel); max-width: 52ch; margin: 0 0 26px;
}
#top .avia_codeblock .hsa-abschluss__tel { margin: 20px 0 0; font-size: 15px; color: var(--hsa-neben-dunkel); }
/* Kupfer auf dem helleren Grün kam auf 5,32 : 1 — mit dem helleren Ton 6,09. */
#top .avia_codeblock .hsa-abschluss__tel a { color: #EDB79A; font-weight: 700; }
#top .avia_codeblock .hsa-karte-platzhalter p { font-size: 15px; color: var(--hsa-neben); max-width: 44ch; margin: 0; }
#top .avia_codeblock .hsa-belege strong { font-size: 15px; }
#top .avia_codeblock .hsa-belege span { color: var(--hsa-neben); }

/* Die Selbstzuordnung stand auf 646 px Höhe, davon die Hälfte leer:
   die beiden Spalten mittig ausrichten statt oben. */
#top .hsa-zuordnung-sec .flex_column { display: flex; flex-direction: column; justify-content: center; }

/* Der Preisbetrag blieb trotz gleicher Wurzel bei 16 px — Enfold setzt für
   Codeblock-Absätze eine eigene Regel mit `!important`. */
#top .avia_codeblock p.hsa-tafel__betrag { font-size: 40px !important; line-height: 1 !important; }
@media only screen and (max-width: 767px) {
  #top .avia_codeblock p.hsa-tafel__betrag { font-size: 30px !important; }
}

/* ------------------------------------------------------------- Antippflächen
   [Messen] Auf 360/390/412 px waren die Links der Kontaktleiste 23 px hoch und
   die verlinkten Kachelüberschriften 24 px. WCAG 2.2 (2.5.8) verlangt 24 px,
   unsere Vorgabe 44 px. Auf dem Schreibtisch bleibt die Zeilenhöhe, sonst
   reißt der Blockrahmen unnötig Luft in die Kacheln. */
@media only screen and (max-width: 767px) {
  #top .av-heading-link,
  #top .hsa-topbar a,
  #top .hsa-adresse a,
  #top .hsa-wege a,
  #top .hsa-fuss address a,
  #top .avia-icon-list .iconlist_title a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  #top .wpcf7 .wpcf7-list-item label { min-height: 44px; }
}

/* Auf dem Handy steht das Foto über dem Text — es ist der Blickfang, und die
   Textfläche wird sonst zu einem 600 px hohen dunklen Block ohne Bild. */
@media only screen and (max-width: 989px) {
  #top #wrap_all .hsa-hero-sec .entry-content-wrapper { display: flex; flex-direction: column; }
  #top #wrap_all .hsa-hero-sec .flex_column:first-child { order: 2; }
  #top #wrap_all .hsa-hero-sec .flex_column:last-child { order: 1; }
  #top #wrap_all .hsa-hero-sec .hsa-hero__bild img { min-height: 0; height: auto; aspect-ratio: 5 / 4; }
}


/* ------------------------------------------------------------- Hero-Spalten
   Im Markup steht das Foto zuerst. Auf dem Schreibtisch wandert es per
   `float: right` nach rechts, der Text steht links; auf dem Handy bleibt die
   natürliche Reihenfolge (Foto oben). Die Innenabstände setzt Enfold selbst
   über die Spalten-Attribute — eigenes CSS dagegen verliert gegen
   `av-zero-column-padding`. */
#top #wrap_all .hsa-hero-sec .flex_column:first-child {
  width: 46% !important;
  float: right;
  margin: 0 !important;
  align-self: stretch;
}
#top #wrap_all .hsa-hero-sec .flex_column:last-child {
  width: 54% !important;
  float: left;
  margin: 0 !important;
}
#top .hsa-hero-sec .flex_column:first-child .avia-image-container,
#top .hsa-hero-sec .flex_column:first-child .avia-image-container-inner,
#top .hsa-hero-sec .flex_column:first-child .avia_image { height: 100%; display: block; }

@media only screen and (max-width: 989px) {
  #top #wrap_all .hsa-hero-sec .flex_column:first-child,
  #top #wrap_all .hsa-hero-sec .flex_column:last-child {
    width: 100% !important;
    float: none;
  }
  #top #wrap_all .hsa-hero-sec .hsa-hero__bild img {
    min-height: 0;
    height: auto;
    aspect-ratio: 5 / 4;
  }
}

/* ------------------------------------------------------------- Seitenkopf
   [Messen] Über hellen Bildstellen (Border Collie, Hundeschnauze) war die
   Überschrift kaum zu lesen: ein flächiges Overlay verdunkelt gleichmäßig und
   trifft deshalb entweder das Motiv oder den Text. Ein Verlauf von links hält
   die Textseite dunkel und lässt das Motiv rechts stehen. */
#top .hsa-kopf-sec .av-section-color-overlay {
  opacity: 1 !important;
  /* Bis 58 % fast deckend — so weit reicht der Text; danach fällt es ab,
     damit das Motiv rechts stehen bleibt. Gemessen an der hellsten Stelle
     (Hundefell) reichten 0,6 nicht aus. */
  background: linear-gradient(96deg,
    rgba(26, 34, 29, .95) 0%,
    rgba(26, 34, 29, .92) 42%,
    rgba(26, 34, 29, .80) 58%,
    rgba(26, 34, 29, .34) 84%,
    rgba(26, 34, 29, .22) 100%) !important;
}
#top .hsa-kopf-sec .content { padding-top: 128px !important; padding-bottom: 108px !important; }
#top .hsa-kopf__h1 .av-special-heading-tag { max-width: 18ch; }
#top .hsa-kopf__vorspann p { max-width: 46ch; }
#top .hsa-kopf-sec .avia-buttonrow-wrap { margin-top: 30px; }

@media only screen and (max-width: 767px) {
  #top .hsa-kopf-sec .content { padding-top: 96px !important; padding-bottom: 72px !important; }
  #top .hsa-kopf-sec .av-section-color-overlay {
    background: linear-gradient(180deg,
      rgba(26, 34, 29, .70) 0%,
      rgba(26, 34, 29, .86) 60%,
      rgba(26, 34, 29, .94) 100%) !important;
  }
}

/* ------------------------------------------------------------- Bildsektionen
   [Messen] `bildsection()` vergibt keine `hsa-flaeche--*`-Klasse — die
   Textfarbregeln für dunkle Flächen griffen dort nicht, und die Überschrift
   der Seitenköpfe stand in Textbraun auf dem Foto. Nicht das Overlay war zu
   schwach, die Schriftfarbe war falsch. */
#top .hsa-bildsec,
#top .hsa-bildsec .avia_textblock,
#top .hsa-bildsec .avia_textblock p,
#top .hsa-bildsec .av-special-heading-tag,
#top .hsa-bildsec h1, #top .hsa-bildsec h2, #top .hsa-bildsec h3,
#top .hsa-bildsec p, #top .hsa-bildsec li,
#top .hsa-bildsec .avia-icon-list .iconlist_title { color: var(--hsa-auf-dunkel); }

#top .hsa-bildsec .hsa-etikett p { color: var(--hsa-akzent-hell); }
#top .hsa-bildsec .av-special-heading-tag { color: #FFFFFF; }
#top .hsa-bildsec .hsa-kopf__vorspann p,
#top .hsa-bildsec .hsa-hero__vorspann p { color: #E2E4E0; }
#top .hsa-bildsec .avia-icon-list .article-icon-entry { border-bottom-color: var(--hsa-linie-dunkel); }
#top .hsa-bildsec .avia-buttonrow-wrap > .avia-button:not(:first-of-type) {
  border-color: rgba(245, 245, 243, .5) !important;
  color: var(--hsa-auf-dunkel) !important;
}
#top .hsa-bildsec .avia-buttonrow-wrap > .avia-button:not(:first-of-type) .avia_iconbox_title {
  color: var(--hsa-auf-dunkel) !important;
}
#top .hsa-bildsec .avia-buttonrow-wrap > .avia-button:not(:first-of-type):hover {
  background-color: rgba(245, 245, 243, .12) !important;
}

/* Im Hero bleiben nach dem Innenabstand rund 450 px Breite — zwei volle Knöpfe
   passen dort nicht nebeneinander und brachen um. Der zweite wird zum Textlink:
   eine Hauptaktion, ein Nebenweg. */
#top .hsa-hero-sec .avia-buttonrow-wrap > .avia-button:not(:first-of-type) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 14px !important;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
#top .hsa-hero-sec .avia-buttonrow-wrap > .avia-button:not(:first-of-type) .avia_iconbox_title {
  color: var(--hsa-akzent-hell) !important;
}
#top .hsa-hero-sec .avia-buttonrow-wrap > .avia-button:not(:first-of-type):hover {
  background: transparent !important;
}
#top .hsa-hero-sec .avia-buttonrow-wrap { gap: 8px 18px; }

@media only screen and (max-width: 767px) {
  #top .hsa-hero-sec .avia-buttonrow-wrap > .avia-button:not(:first-of-type) {
    width: auto;
    justify-content: flex-start;
    padding-left: 0 !important;
  }
}

/* ------------------------------------------------------------- Überschriften
   [Messen] Der Wrapper `.av-special-heading` war 22 px hoch — genau sein
   Polster —, die h1 darin 119 px: Enfold lässt die Überschrift aus dem Umschlag
   herausragen (der Wrapper umschließt sie nicht). Damit stand jeder Folgetext
   direkt unter der letzten Zeile, ohne Abstand; das Polster wirkte ins Leere.
   `display: flow-root` schließt den Umschlag und der Abstand entsteht. */
#top .av-special-heading { display: flow-root; }

/* Das Hero-Foto füllt die Spalte auf voller Höhe. [Messen] Bildspalte 669 px
   gegen Textspalte 938 px — unter dem Bild stand eine 269 px hohe leere dunkle
   Fläche. Enfolds Spalten sind Floats und gleichen ihre Höhe nicht an; erst ein
   Flex-Container um beide macht `stretch` möglich. */
#top #wrap_all .hsa-hero-sec .entry-content-wrapper {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
  max-width: none;
}
#top #wrap_all .hsa-hero-sec .flex_column:first-child { display: flex; flex-direction: column; }
#top .hsa-hero-sec .flex_column:first-child > .avia-image-container { flex: 1 1 auto; width: 100%; }
/* Die Kette ist vier Ebenen tief (.avia-image-container →
   .avia-image-container-inner → .avia-image-overlay-wrap → img). `height: 100%`
   reicht dort nicht durch: Es setzt eine *definierte* Elternhöhe voraus, und die
   Spaltenhöhe ist bei Flex nur berechnet. Deshalb wird das Bild absolut über
   die Spalte gelegt. */
#top .hsa-hero-sec .flex_column:first-child > .avia-image-container { position: relative; }
#top .hsa-hero-sec .flex_column:first-child .avia-image-container-inner,
#top .hsa-hero-sec .flex_column:first-child .avia-image-overlay-wrap {
  position: absolute;
  inset: 0;
  display: block;
}
#top .hsa-hero__bild img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 989px) {
  #top #wrap_all .hsa-hero-sec .entry-content-wrapper { flex-direction: column; }
}


@media only screen and (max-width: 989px) {
  #top .hsa-hero-sec .flex_column:first-child .avia-image-container-inner,
  #top .hsa-hero-sec .flex_column:first-child .avia-image-overlay-wrap,
  #top .hsa-hero__bild img { position: static; inset: auto; }
  #top .hsa-hero__bild img { aspect-ratio: 5 / 4; height: auto; }
}

/* ------------------------------------------------------------- Ausrichtung
   [Messen] In Bildsektionen schiebt Enfold einen `.av-section-color-overlay-wrap`
   zwischen Sektion und Container. Der Kindselektor `> .container` greift dort
   nicht, und der Kopf stand auf 160 px statt auf 136 px wie alle anderen
   Sektionen — eine Fehlausrichtung von 24 px über die ganze Seite. */
#top .hsa-sec .container {
  max-width: var(--hsa-breite);
  padding-left: 26px;
  padding-right: 26px;
}
@media only screen and (max-width: 767px) {
  #top .hsa-sec .container { padding-left: 22px; padding-right: 22px; }
}
/* Randabfallende Sektionen bleiben ohne Container-Polster. */
#top .hsa-band-sec .container,
#top .hsa-hero-sec .container { padding-left: 0; padding-right: 0; max-width: none; }

/* Enfolds Hinweiskasten heißt `.av_promobox` mit Unterstrich — Regeln auf
   `.avia-promobox` griffen nie. Die Farben setzt der Shortcode selbst. */
#top .av_promobox {
  border: 0;
  border-left: 4px solid var(--hsa-akzent);
  border-radius: 0 var(--hsa-radius) var(--hsa-radius) 0;
  box-shadow: none;
  margin: 32px 0 0;
}
#top .av_promobox .avia-promocontent { padding: 17px 22px; }
#top .av_promobox .avia-promocontent p {
  font-size: 15px; line-height: 1.6; margin: 0; max-width: 76ch;
}

/* ------------------------------------------- Klebender Kopf auf Handy und Tablet */
/* Enfold fixiert den Kopf nur ab 1024 px (darunter ist der Burger aktiv und der Kopf
   scrollt mit). Auf schmalen Geräten ist das Menü damit nur oben erreichbar.
   `position: sticky` statt `fixed`: der Kopf bleibt im Fluss, es braucht kein
   Polster am Inhalt und beim Laden springt nichts. Die Infozeile klebt hier NICHT
   mit — zwei Balken kosten auf 844 px Höhe 139 px, also ein Sechstel des Bildes;
   sie scrollt weg, der Menübalken bleibt.
   Voraussetzung ist die `overflow-x: clip`-Regel weiter oben — mit `hidden` klebt
   nichts. */
@media only screen and (max-width: 1023px) {
  #top .hsa-topbar { position: static; }
  /* Enfold drückt den Kopf zweimal auf `relative` zurück, mit je einer anderen Kette:
     unter 768 px `.responsive #top #wrap_all #header` (3 IDs + 1 Klasse), zwischen 768
     und 989 px `.responsive.html_mobile_menu_tablet #top #wrap_all #header`
     (3 IDs + 2 Klassen). Wer nur die erste schlägt, hat auf dem Tablet nichts erreicht
     — gemessen: 390 px klebte, 768 px nicht. Diese Kette schlägt beide. */
  html.responsive.html_mobile_menu_tablet body#top #wrap_all #header {
    position: sticky; top: 0;
  }
  /* DRITTE FALLE: `#wrap_all` hat `overflow: hidden` — für ALLE Breiten. Damit ist es
     ein eigener Scrollbereich, und darin klebt kein `sticky`. Deshalb arbeitet Enfold
     auf dem Schreibtisch mit `position: fixed`. `clip` kappt genauso, erzeugt aber
     keinen Scrollbereich. Nur im Handy- und Tabletbereich geändert. */
  html.responsive body#top #wrap_all { overflow: clip; }
  /* VIERTE FALLE: Enfolds Burger-JS setzt beim Öffnen `padding: <Kopf-Offset> 0` inline
     auf `#av-burger-menu-ul` — als Offset nimmt es `offset().top`, und das ist bei einem
     klebenden Kopf die Scrollposition PLUS die Kopfhöhe. Gemessen: 900 px gescrollt →
     `padding-top: 981px`, das ganze Menü stand unter dem Bildrand und wirkte leer.
     Solange das Menü offen ist, wird der Kopf deshalb fest an die Oberkante gesetzt und
     das Polster auf die Kopfhöhe gezwungen (81 px, auf dem Tablet 91 px).
     Das Overlay bleibt UNTER dem Kopf (Enfold: z 100 gegen z 501) — dort sitzt das
     Schließen-Symbol, ein höherer z-index am Overlay macht das Menü unschließbar. */
  html.responsive.html_mobile_menu_tablet.av-burger-overlay-active body#top #wrap_all #header {
    position: fixed; top: 0;
  }
  html.av-burger-overlay-active body#top #av-burger-menu-ul {
    padding-top: 81px !important; padding-bottom: 40px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  html.av-burger-overlay-active body#top #av-burger-menu-ul { padding-top: 91px !important; }
}

/* Logo senkrecht mittig im Kopfbalken, auch auf Handy und Tablet.
   Enfold setzt unter 768 px `.responsive #top .logo { display: table; height: 80px
   !important }` und `.logo a { display: table-cell }`. Die feste Höhe von 80 px ist der
   Fehler: ist der Balken höher (Tablet: 91 px) oder rechnet das Gerät die Tabellenzelle
   anders, sitzt das Logo oben und darunter bleibt Luft. Flex mit `height: 100%` hängt die
   Box an die echte Balkenhöhe. `overflow: visible`, weil Enfolds `hidden` am .logo
   Unterlängen des Schriftzugs abschneiden kann. */
@media only screen and (max-width: 1023px) {
  html.responsive body#top .logo {
    display: flex !important; align-items: center; height: 80px !important;
    overflow: visible;
  }
  html.responsive body#top .logo a { display: flex !important; align-items: center; height: 100%; }
  html.responsive body#top .logo img,
  html.responsive body#top .logo svg { margin: 0 !important; align-self: center; }
  /* Der Balken MUSS so hoch sein wie die Logobox — sonst sitzt sie darin oben.
     `height: 100%` an der Logobox hilft nicht: ohne Enfolds feste 80 px hat der Balken
     keine eigene Höhe und beide schrumpfen auf 41 px zusammen (gemessen). */
  html.responsive body#top #header_main,
  html.responsive body#top #header_main .container { min-height: 80px; }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  html.responsive body#top .logo { height: 90px !important; }
  html.responsive body#top #header_main,
  html.responsive body#top #header_main .container { min-height: 90px; }
}