/* ============================================================
   Design-Refresh 2026 — Enfold-Overrides gegen css/tokens.css
   Phase 1: Typografie, Buttons, Links, Formulare, Fokus, Header.
   WICHTIG: KEINE globalen Textfarben — weisse Ueberschriften auf
   blauen ALB-Sektionen (custom_font='#ffffff') bleiben unangetastet.
   Laedt (via functions.php, Prio 999) NACH Enfolds dynamic_avia-CSS,
   daher gewinnen diese Regeln; !important nur wo Enfold hart setzt.
   ============================================================ */

/* ---------- Typografie ---------- */
body,
body.stretched {
  font-family: var(--mw-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.003em;
  color: var(--mw-ink);
}

h1, h2, h3, h4, h5, h6,
.av-special-heading-tag,
.avia-heading {
  font-family: var(--mw-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -.012em;
  line-height: 1.14;
  /* Serif in Versalien liest sich schwer -> Normalschreibung erzwingen.
     Betrifft CSS-hochgestellte Ueberschriften; echte Caps im Text -> Content-Fix. */
  text-transform: none !important;
}
h1, .av-special-heading h1.av-special-heading-tag { line-height: 1.08; }

/* Navigation bleibt Sans, etwas praeziser */
.main_menu .menu-item > a {
  font-family: var(--mw-font-sans) !important;
  font-weight: 550 !important;
  letter-spacing: .004em;
}

/* ---------- Buttons ---------- */
.avia-button,
a.avia-button,
.avia_button,
input[type="submit"],
#top .button {
  font-family: var(--mw-font-sans) !important;
  font-weight: 650 !important;
  border-radius: var(--mw-radius) !important;
  letter-spacing: .01em;
  border: 0 !important;
  transition: transform .18s var(--mw-ease),
              box-shadow .2s var(--mw-ease),
              background-color .2s var(--mw-ease),
              filter .2s var(--mw-ease) !important;
}
.avia-button:hover,
a.avia-button:hover,
input[type="submit"]:hover,
#top .button:hover {
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow);
}

/* Primaer-CTA: der groesste, zentrierte Button bekommt den Gold-Akzent
   (Blau+Gold wie im freigegebenen Entwurf). Falls das den falschen
   Button trifft -> Selektor gezielt anpassen. */
.avia-button.avia-size-x-large.avia-color-theme-color {
  background-color: var(--mw-accent) !important;
  color: #23180a !important;
}
.avia-button.avia-size-x-large.avia-color-theme-color:hover {
  background-color: var(--mw-accent-deep) !important;
  color: #ffffff !important;
}

/* ---------- Links im Inhalt ---------- */
.entry-content a:not(.avia-button):not(.button):not(.mw-widerruf-btn) {
  color: var(--mw-brand-bright);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s var(--mw-ease);
}
.entry-content a:not(.avia-button):not(.button):not(.mw-widerruf-btn):hover {
  color: var(--mw-brand-deep);
}

/* ---------- Formulare ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"],
textarea, select {
  font-family: var(--mw-font-sans) !important;
  border-radius: 10px !important;
  transition: border-color .18s var(--mw-ease), box-shadow .18s var(--mw-ease) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
  border-color: var(--mw-brand) !important;
  box-shadow: 0 0 0 3px var(--mw-brand-tint) !important;
  outline: none;
}

/* ---------- Header-Feinschliff ---------- */
#header_main {
  transition: box-shadow .3s var(--mw-ease), background-color .3s var(--mw-ease);
}
.html_header_sticky #header_main.header_scrolled {
  box-shadow: 0 8px 26px -20px rgba(6,26,44,.55);
}

/* ---------- Fokus sichtbar (A11y) ---------- */
a:focus-visible, .avia-button:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--mw-brand-bright) !important;
  outline-offset: 2px;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .avia-button, a.avia-button, input[type="submit"], #header_main,
  .mw-valuecard, .entry-content a,
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input[type="number"], input[type="search"], textarea, select {
    transition: none !important;
  }
  .avia-button:hover, a.avia-button:hover, input[type="submit"]:hover,
  .mw-valuecard:hover { transform: none !important; }
}

/* ============================================================
   Redesign-Komponenten (ALB) — via custom_class an Shortcodes
   ============================================================ */

/* Vorteils-Karten: av_icon_box (position top) + custom_class='mw-valuecard' */
.mw-valuecard.avia_iconbox {
  background: var(--mw-surface);
  border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--mw-shadow);
  height: 100%;
  transition: transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease);
}
.mw-valuecard.avia_iconbox:hover { transform: translateY(-4px); box-shadow: var(--mw-shadow-lg); }
.mw-valuecard .iconbox_icon {
  width: 54px !important; height: 54px !important; line-height: 54px !important;
  border-radius: 14px; background: var(--mw-brand-tint) !important; color: var(--mw-brand) !important;
  margin: 0 0 1rem 0 !important; font-size: 25px !important; border: 0 !important;
}
.mw-valuecard .iconbox_content_title { margin: 0 0 .4rem !important; font-size: 1.26rem !important; }
.mw-valuecard .iconbox_content_container,
.mw-valuecard .iconbox_content_container p { color: var(--mw-ink-soft) !important; font-size: .98rem; }

/* Sektions-Eyebrow (kleines Label ueber Ueberschriften) via custom_class='mw-eyebrow' */
.mw-eyebrow, .mw-eyebrow p {
  font-family: var(--mw-font-sans) !important;
  font-size: .84rem !important; font-weight: 700 !important;
  letter-spacing: .01em; text-transform: none; color: var(--mw-brand-bright) !important;
  margin: 0 0 .4rem !important;
}

/* Prozess-Schritte: av_textblock custom_class='mw-step' */
.mw-step .mw-stepnum {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--mw-brand); color: #fff !important; font-family: var(--mw-font-display);
  font-weight: 700; font-size: 1.2rem; margin-bottom: .7rem;
}
.mw-step h3, .mw-step h4 { font-size: 1.22rem !important; margin: .2rem 0 .35rem !important; }
.mw-step, .mw-step p { color: var(--mw-ink-soft) !important; }

/* Feature-Liste (simplr): av_textblock custom_class='mw-featureblock' */
.mw-featureblock ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.mw-featureblock li { position: relative; padding-left: 1.9rem; margin-bottom: .75rem; color: var(--mw-ink-soft); }
.mw-featureblock li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--mw-brand); font-weight: 700;
}

/* CTA-Band: Sektion custom_bg blau; Eyebrow gold */
.mw-cta-band .mw-eyebrow, .mw-cta-band .mw-eyebrow p { color: var(--mw-accent) !important; }

/* ============================================================
   Bespoke-Sektionen: eigenes Markup in av_codeblock,
   ALB dient nur als Layout-Huelle. So entsteht exakt der Entwurf.
   ============================================================ */

/* ---------- Hero ---------- */
.mw-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,3vw,4rem); align-items: center; }
.mw-hero .mw-eyebrow2 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mw-font-sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-brand-bright);
}
.mw-hero .mw-eyebrow2::before { content: ""; width: 26px; height: 2px; background: var(--mw-accent); display: inline-block; }
.mw-hero h1 {
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem); line-height: 1.06;
  letter-spacing: -.015em; margin: .9rem 0 0 !important;
}
.mw-hero h1 em { color: var(--mw-brand); font-style: italic; }
.mw-hero .mw-lead { font-size: 1.2rem; color: var(--mw-ink-soft); max-width: 32ch; margin-top: 1.2rem; line-height: 1.55; }
.mw-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.mw-btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mw-font-sans);
  font-weight: 650; font-size: 1.02rem; padding: .85rem 1.6rem; border-radius: var(--mw-radius);
  text-decoration: none !important; transition: transform .18s var(--mw-ease), box-shadow .18s var(--mw-ease);
}
.mw-btn--primary { background: var(--mw-accent); color: #23180a !important; box-shadow: 0 10px 22px -12px rgba(185,120,26,.9); }
.mw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(185,120,26,.95); }
.mw-btn--ghost { border: 1px solid var(--mw-line); color: var(--mw-ink) !important; }
.mw-btn--ghost:hover { border-color: var(--mw-brand); color: var(--mw-brand) !important; transform: translateY(-2px); }
.mw-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--mw-line);
  font-size: .85rem; color: var(--mw-ink-soft);
}
.mw-trust .mw-stars { color: var(--mw-star); letter-spacing: .06em; }
.mw-trust b { color: var(--mw-ink); }
.mw-hero__media { position: relative; justify-self: center; width: min(100%, 420px); }
.mw-portrait-arc {
  position: absolute; inset: -14px -14px auto auto; width: 100%; height: 100%;
  border-radius: 220px 220px 26px 26px;
  background: linear-gradient(160deg, var(--mw-brand), var(--mw-brand-deep)); z-index: 0;
}
.mw-portrait {
  position: relative; z-index: 1; aspect-ratio: 4/4.6; overflow: hidden;
  border-radius: 210px 210px 22px 22px; border: 6px solid var(--mw-surface); box-shadow: var(--mw-shadow-lg);
}
.mw-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% top; display: block; }
@media (max-width: 860px) {
  .mw-hero { grid-template-columns: 1fr; }
  .mw-hero__media { order: -1; width: min(78%, 320px); }
}
@media (prefers-reduced-motion: reduce) { .mw-btn, .mw-btn:hover { transition: none !important; transform: none !important; } }

/* H1 im Hero: Enfold-Groesse ueberschreiben */
.mw-hero h1, #top .mw-hero h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem) !important; }

/* ---------- Sektions-Kopf ---------- */
.mw-sec { max-width: 54ch; margin-bottom: 2.6rem; }
.mw-sec.mw-center { text-align: center; margin-inline: auto; }
.mw-sec .mw-eyebrow2 { display:inline-flex; align-items:center; gap:.55rem; font-family:var(--mw-font-sans);
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mw-brand-bright); }
.mw-sec .mw-eyebrow2::before { content:""; width:26px; height:2px; background:var(--mw-accent); display:inline-block; }
.mw-sec h2, #top .mw-sec h2 { font-family:var(--mw-font-display) !important; font-size:clamp(2rem,1.3rem+2.2vw,2.9rem) !important;
  line-height:1.12; letter-spacing:-.012em; margin:.7rem 0 0 !important; }
.mw-sec p { color:var(--mw-ink-soft); font-size:1.12rem; margin-top:.8rem; }

/* ---------- Karten-Raster ---------- */
.mw-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.mw-cards--3 { grid-template-columns:repeat(3,1fr); }
.mw-card { background:var(--mw-surface); border:1px solid var(--mw-line); border-radius:var(--mw-radius);
  padding:1.7rem 1.5rem; box-shadow:var(--mw-shadow); transition:transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease); }
.mw-card:hover { transform:translateY(-4px); box-shadow:var(--mw-shadow-lg); }
.mw-chip { width:52px; height:52px; border-radius:14px; background:var(--mw-brand-tint); color:var(--mw-brand);
  display:grid; place-items:center; margin-bottom:1rem; }
.mw-card h3 { font-family:var(--mw-font-display) !important; font-size:1.26rem !important; margin:0 0 .45rem !important; }
.mw-card p { color:var(--mw-ink-soft); font-size:.98rem; margin:0; }
@media (max-width:900px){ .mw-cards, .mw-cards--3 { grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .mw-cards, .mw-cards--3 { grid-template-columns:1fr;} }

/* ---------- Leistungs-Kategorien ---------- */
.mw-catgroup + .mw-catgroup { margin-top:2.2rem; }
.mw-catgroup > h3 { font-family:var(--mw-font-display) !important; font-size:1.4rem !important; margin:0 0 1rem !important; }
.mw-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.mw-cat { display:flex; align-items:center; gap:.9rem; background:var(--mw-surface); border:1px solid var(--mw-line);
  border-radius:var(--mw-radius-sm,12px); padding:1rem 1.15rem; text-decoration:none !important;
  transition:border-color .2s var(--mw-ease), transform .2s var(--mw-ease); }
.mw-cat:hover { border-color:var(--mw-brand); transform:translateX(3px); }
.mw-cat .mw-chip { width:38px; height:38px; border-radius:10px; margin:0; flex:none; }
.mw-cat b { display:block; font-weight:600; color:var(--mw-ink); font-size:1rem; }
.mw-cat span:not(.mw-chip) { display:block; color:var(--mw-ink-soft); font-size:.84rem; }
/* Icon-Kaestchen bleibt Grid, sonst klebt das Symbol in der Ecke */
.mw-cat .mw-chip { display:grid; place-items:center; }
.mw-cat .mw-arrow { margin-left:auto; color:var(--mw-ink-soft); transition:transform .2s var(--mw-ease); }
.mw-cat:hover .mw-arrow { transform:translateX(4px); color:var(--mw-brand); }
@media (max-width:820px){ .mw-cats { grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .mw-cats { grid-template-columns:1fr;} }

/* ---------- Digital / Telefon-Mockup ---------- */
.mw-digital { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.mw-flist { list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:1rem; }
.mw-flist li { display:flex; gap:.8rem; align-items:flex-start; color:var(--mw-ink-soft); }
.mw-flist .mw-tick { flex:none; width:26px; height:26px; border-radius:8px; background:#f7e9ce; color:var(--mw-accent-deep);
  display:grid; place-items:center; font-weight:700; font-size:.85rem; margin-top:.1rem; }
.mw-flist b { color:var(--mw-ink); font-weight:600; }
.mw-phone { justify-self:center; width:min(260px,72%); aspect-ratio:9/18.5; border-radius:34px;
  background:var(--mw-brand-deep); padding:12px; box-shadow:var(--mw-shadow-lg); }
.mw-phone__screen { width:100%; height:100%; border-radius:24px; color:#eaf2fa; padding:1.3rem 1rem;
  background:linear-gradient(170deg,var(--mw-brand),var(--mw-brand-deep)); }
.mw-phone__top { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.mw-phone h4 { font-family:var(--mw-font-display) !important; font-size:1.2rem !important; color:#fff !important; margin:.3rem 0 1rem !important; }
.mw-appcard { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:.7rem .8rem; margin-bottom:.6rem; }
.mw-appcard small { opacity:.75; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; }
.mw-appcard div { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin-top:.2rem; }
.mw-dot { width:8px; height:8px; border-radius:50%; background:var(--mw-accent); display:inline-block; }
@media (max-width:780px){ .mw-digital { grid-template-columns:1fr; } .mw-phone { order:-1; } }

/* ---------- Prozess ---------- */
.mw-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.mw-step2 { position:relative; padding-top:2.9rem; }
.mw-step2 .mw-num { position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%;
  background:var(--mw-brand); color:#fff; display:grid; place-items:center;
  font-family:var(--mw-font-display); font-weight:700; font-size:1.05rem; }
.mw-step2:not(:last-child)::after { content:""; position:absolute; top:21px; left:52px; right:-8px; height:2px;
  background:linear-gradient(90deg,var(--mw-line),transparent); }
.mw-step2 h3 { font-family:var(--mw-font-display) !important; font-size:1.24rem !important; margin:0 0 .35rem !important; }
.mw-step2 p { color:var(--mw-ink-soft); font-size:.97rem; margin:0; }
@media (max-width:820px){ .mw-steps { grid-template-columns:repeat(2,1fr); gap:1.6rem 1.1rem; } .mw-step2::after { display:none !important; } }
@media (max-width:440px){ .mw-steps { grid-template-columns:1fr; } }

/* ---------- Bewertungs-Siegel ---------- */
.mw-sealwrap { text-align:center; }
.mw-seal { display:inline-flex; flex-direction:column; align-items:center; gap:.55rem; background:var(--mw-surface);
  border:1px solid var(--mw-line); border-radius:var(--mw-radius); padding:2rem 2.6rem; box-shadow:var(--mw-shadow); }
.mw-seal__badge { width:92px; height:92px; border-radius:50%; color:#fff; display:flex; flex-direction:column;
  justify-content:center; align-items:center; box-shadow:var(--mw-shadow-lg); margin-bottom:.3rem;
  background:radial-gradient(circle at 50% 32%, var(--mw-brand), var(--mw-brand-deep)); }
.mw-seal__badge b { font-family:var(--mw-font-display); font-size:1.7rem; line-height:1; }
.mw-seal__badge small { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:.15rem; }
.mw-seal .mw-stars { color:var(--mw-star); font-size:1.25rem; letter-spacing:.14em; }
.mw-seal .mw-src { font-weight:700; }
.mw-seal .mw-sub { color:var(--mw-ink-soft); font-size:.9rem; }

/* ---------- Gut zu wissen (Akkordeon ohne JS) ---------- */
.mw-faq { display:grid; gap:.8rem; max-width:820px; margin-inline:auto; }
.mw-faq details { background:var(--mw-surface); border:1px solid var(--mw-line); border-radius:var(--mw-radius-sm,12px); box-shadow:var(--mw-shadow); }
.mw-faq summary { cursor:pointer; list-style:none; padding:1.1rem 1.3rem; font-family:var(--mw-font-display);
  font-size:1.1rem; font-weight:600; color:var(--mw-ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mw-faq summary::-webkit-details-marker { display:none; }
.mw-faq summary::after { content:"+"; font-family:var(--mw-font-sans); font-size:1.5rem; color:var(--mw-brand); line-height:1; transition:transform .25s var(--mw-ease); }
.mw-faq details[open] summary::after { transform:rotate(45deg); }
.mw-faq details[open] summary { color:var(--mw-brand); }
.mw-faq .mw-faqbody { padding:0 1.3rem 1.3rem; color:var(--mw-ink-soft); }
.mw-faq .mw-faqbody p { color:var(--mw-ink-soft); max-width:64ch; }
.mw-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.mw-tags span { font-size:.76rem; background:var(--mw-brand-tint); color:var(--mw-brand); border-radius:999px; padding:.28rem .75rem; }

/* ---------- CTA-Band ---------- */
.mw-ctaband { background:linear-gradient(135deg,var(--mw-brand),var(--mw-brand-deep)); color:#eaf2fa;
  border-radius:26px; padding:clamp(2.2rem,2rem+2vw,3.6rem); text-align:center; }
.mw-ctaband h2, #top .mw-ctaband h2 { color:#fff !important; font-family:var(--mw-font-display) !important;
  font-size:clamp(1.9rem,1.3rem+2vw,2.7rem) !important; margin:.6rem 0 0 !important; }
.mw-ctaband .mw-eyebrow2 { color:var(--mw-accent); justify-content:center; }
.mw-ctaband p { color:#bbd3ea; margin:1rem auto 0; max-width:46ch; }
.mw-ctaband .mw-actions { justify-content:center; }
.mw-ctaband .mw-btn--ghost { border-color:rgba(255,255,255,.35); color:#eaf2fa !important; }
.mw-ctaband .mw-btn--ghost:hover { border-color:var(--mw-accent); color:#fff !important; }

/* ---------- Enfold-Blog-Grid im Karten-Look (wirkt auch auf anderen Seiten) ---------- */
.mw-bloggrid .slide-entry { background:var(--mw-surface); border:1px solid var(--mw-line); border-radius:var(--mw-radius);
  overflow:hidden; box-shadow:var(--mw-shadow); transition:transform .25s var(--mw-ease); }
.mw-bloggrid .slide-entry:hover { transform:translateY(-4px); }
.mw-bloggrid .slide-content { padding:1.1rem 1.3rem 1.4rem; }
.mw-bloggrid .slide-entry-title { font-family:var(--mw-font-display) !important; font-size:1.14rem !important; }

/* ============================================================
   Volle Browserbreite: Sektionen, Footer, Socket, Kopfleiste
   (Enfold begrenzte diese Wrapper site-weit auf ~92%)
   ============================================================ */
/* Kopf/Fuss immer ueber die volle Breite (site-weit) */
#top #footer, #top #socket, #top #header_meta, #top #header_main {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Sektions-Vollbreite NUR auf den Landing-Pages (Startseite + Regionalseiten).
   Auf normalen Textseiten wuerde das den Fliesstext randlos ziehen. */
body.mw-fullbleed #top #wrap_all .container_wrap,
body.mw-fullbleed #top #wrap_all .avia-section,
body.mw-fullbleed #top #main > .container_wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html, body { overflow-x: hidden; }

/* ---------- Kopfleiste dunkelblau (wie im Entwurf) ---------- */
#top #header_meta,
#top #header_meta .container { background-color: var(--mw-brand-deep) !important; border: 0 !important; }
#top #header_meta, #top #header_meta a, #top #header_meta .phone-info,
#top #header_meta .phone-info a, #top #header_meta .av-social-link-title,
#top #header_meta li a { color: #cbddee !important; }
#top #header_meta a:hover, #top #header_meta li a:hover { color: #ffffff !important; }
#top #header_meta .av-social-link a { color: #cbddee !important; }

/* ---------- Footer dunkelblau, Socket noch dunkler ---------- */
#top #footer { background-color: var(--mw-brand-deep) !important; color: #b3cbe3 !important; }
#top #footer h3, #top #footer .widgettitle {
  color: #7c9cbb !important; font-family: var(--mw-font-sans) !important;
  font-size: .8rem !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 700 !important;
}
#top #footer a { color: #cbddee !important; }
#top #footer a:hover { color: var(--mw-accent) !important; }
#top #footer .widget { border: 0 !important; }
#top #socket { background-color: #031d3a !important; color: #7c9cbb !important; border-top: 1px solid rgba(255,255,255,.12) !important; }
#top #socket a { color: #cbddee !important; }
#top #socket a:hover { color: var(--mw-accent) !important; }

/* ---------- CTA-Band: Eyebrow fett, mehr Luft ---------- */
.mw-ctaband { padding: clamp(3rem, 2.4rem + 2.4vw, 4.6rem) clamp(1.6rem, 1rem + 3vw, 3.4rem) !important; }
.mw-ctaband .mw-eyebrow2 { font-weight: 800 !important; letter-spacing: .16em; margin-bottom: .5rem; }
.mw-ctaband .mw-actions { margin-top: 2.2rem; }

/* ---------- Schriftgroessen naeher am Entwurf ---------- */
#top .mw-sec h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem) !important; }
#top .mw-card h3 { font-size: 1.3rem !important; }
#top .mw-step2 h3 { font-size: 1.28rem !important; }
.mw-sec p { font-size: 1.15rem; }
.mw-card p, .mw-step2 p { font-size: 1rem; }

/* Aeussere Content-Container-Begrenzung aufheben, wenn die Seite aus ALB-Sektionen
   besteht (nur dann traegt der Container die Klasse av-section-cont-open).
   Die Sektionen bringen ihre eigenen inneren Container fuer die Lesebreite mit.
   Wirkt zugleich auf den Footer, der bei Enfold in diesem Container landet. */
body.mw-fullbleed #top #main > .container_wrap:not(.avia-section) > .container.av-section-cont-open {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inhalte innerhalb der jetzt vollbreiten Sektionen wieder auf Lesebreite zentrieren */
#top .avia-section > .container,
#top #footer > .container,
#top #socket > .container,
#top #header_meta > .container,
#top #header_main > .container {
  width: 100% !important;
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(18px, 4vw, 50px) !important;
  padding-right: clamp(18px, 4vw, 50px) !important;
}

/* ---------- Header-Buttons in der Hauptmenuezeile (Enfold-Menuepunkte) ---------- */
#top .main_menu .av-menu-button-colored > a .avia-menu-text,
#top .main_menu .av-menu-button-bordered > a .avia-menu-text { padding: 0 !important; border: 0 !important; }
#top .main_menu .av-menu-button-colored > a,
#top .main_menu .av-menu-button-bordered > a {
  font-family: var(--mw-font-sans) !important; font-weight: 650 !important;
  border-radius: var(--mw-radius) !important; padding: .55rem 1.15rem !important;
  margin-left: .5rem; line-height: 1.2 !important; height: auto !important;
  transition: transform .18s var(--mw-ease), box-shadow .18s var(--mw-ease), background-color .18s !important;
}
#top .main_menu .av-menu-button-colored > a {
  background: var(--mw-accent) !important; color: #23180a !important;
  box-shadow: 0 8px 18px -10px rgba(185,120,26,.9);
}
#top .main_menu .av-menu-button-colored > a:hover { background: var(--mw-accent-deep) !important; color: #fff !important; transform: translateY(-2px); }
#top .main_menu .av-menu-button-bordered > a {
  border: 1px solid var(--mw-line) !important; color: var(--mw-ink) !important; background: transparent !important;
}
#top .main_menu .av-menu-button-bordered > a:hover { border-color: var(--mw-brand) !important; color: var(--mw-brand) !important; transform: translateY(-2px); }
/* Unterstrich-Effekt der normalen Menuepunkte hier unterdruecken */
#top .main_menu .av-menu-button-colored > a::after,
#top .main_menu .av-menu-button-bordered > a::after { display: none !important; }

/* Header-Buttons vertikal in der Menuezeile zentrieren + Text-Hintergrund entfernen */
#top .main_menu ul > li.av-menu-button-colored,
#top .main_menu ul > li.av-menu-button-bordered { display: flex !important; align-items: center !important; }
#top .main_menu li.av-menu-button-colored > a,
#top .main_menu li.av-menu-button-bordered > a { display: inline-flex !important; align-items: center !important; }
#top .main_menu li.av-menu-button-colored .avia-menu-text,
#top .main_menu li.av-menu-button-bordered .avia-menu-text,
#top .main_menu li.av-menu-button-colored .avia-menu-fx,
#top .main_menu li.av-menu-button-bordered .avia-menu-fx {
  background: transparent !important; color: inherit !important; border: 0 !important; box-shadow: none !important;
}
#top .main_menu li.av-menu-button-colored .avia-menu-fx,
#top .main_menu li.av-menu-button-bordered .avia-menu-fx { display: none !important; }

/* ---------- Footer-Inhalte (Entwurfs-Struktur) ---------- */
.mw-footer-logo { max-width: 210px; height: auto; margin-bottom: 1rem;
  filter: brightness(0) invert(1); opacity: .95; }   /* Logo weiss auf Dunkelblau */
.mw-footer-claim { color: #8faac6 !important; font-size: .92rem; max-width: 34ch; line-height: 1.6; }
.mw-footer-legal { font-size: .85rem; margin-top: 1.1rem !important; }
.mw-footer-legal a { color: #cbddee !important; }
#top #footer .mw-footer-list, #top #footer .mw-footer-contact { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#top #footer .mw-footer-list li, #top #footer .mw-footer-contact li { padding: .3rem 0 !important; border: 0 !important; }
#top #footer .mw-footer-list li::before, #top #footer .mw-footer-contact li::before { content: none !important; }
.mw-footer-adr { color: #b3cbe3 !important; line-height: 1.8; margin-bottom: .9rem !important; }
.mw-footer-adr strong { color: #ffffff !important; }
#top #footer .widget { padding-right: 1.2rem; }
/* Socket: Sterne-Zeile mittig und ruhig */
#top #socket .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }

/* ============================================================
   Feinschliff-Runde 2
   ============================================================ */

/* ---------- Menue: Buttons IMMER inline mit den Menuepunkten ---------- */
#top #header_main .av-main-nav { display: flex !important; align-items: center !important; }
#top #header_main .av-main-nav > li { display: flex !important; align-items: center !important; height: auto !important; }
#top #header_main .av-main-nav > li > a {
  display: flex !important; align-items: center !important;
  height: auto !important; line-height: 1.4 !important;
}
/* Logo etwas von der Oberkante loesen, gleicher Abstand nach unten */
#top #header_main { padding-top: 14px !important; padding-bottom: 14px !important; }
#top .av-logo-container .logo, #top .av-logo-container .logo a { display: flex !important; align-items: center !important; }

/* ---------- Hero neu: Bild vollbreit oben, Text darunter auf Hellblau ---------- */
.mw-hero2__media { width: 100vw; margin-left: calc(50% - 50vw); }
.mw-hero2__media img {
  width: 100%; height: auto; display: block;
  max-height: clamp(320px, 46vw, 620px); object-fit: cover; object-position: center 22%;
}
.mw-hero2__copy { padding-top: clamp(1.8rem, 1.4rem + 1.8vw, 3rem); max-width: 860px; }
.mw-hero2 .mw-lead { max-width: 54ch; }
.mw-hero2 h1, #top .mw-hero2 h1 {
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem) !important; line-height: 1.07;
  letter-spacing: -.015em; margin: .8rem 0 0 !important;
}
.mw-hero2 h1 em { color: var(--mw-brand); font-style: italic; }

/* ---------- Ratgeber: Datum auf gleichen Innenabstand wie der Text ---------- */
#top .mw-bloggrid .slide-meta,
#top .mw-bloggrid .slide-meta-del,
#top .mw-bloggrid .slide-entry .slide-meta time,
#top .mw-bloggrid .av-vertical-delimiter { padding-left: 1.3rem !important; padding-right: 1.3rem !important; }
#top .mw-bloggrid .slide-entry .slide-content { padding-left: 1.3rem !important; padding-right: 1.3rem !important; }

/* ---------- CTA-Band: alles groesser ---------- */
.mw-ctaband .mw-eyebrow2 { font-size: .95rem !important; }
#top .mw-ctaband h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.3rem) !important; }
.mw-ctaband p { font-size: 1.28rem !important; max-width: 52ch; }
.mw-ctaband .mw-btn { font-size: 1.1rem !important; padding: 1rem 1.9rem !important; }

/* ---------- Einheitliches dunkles Blau: Kopfleiste, Footer, Socket ---------- */
#top #header_meta, #top #header_meta .container,
#top #footer, #top #socket { background-color: #031d3a !important; }
#top #footer { color: #b8cfe6 !important; }

/* ---------- Footer-Kontakt mit Symbolen ---------- */
#top #footer .mw-footer-contact li { display: flex !important; align-items: center; gap: .6rem; }
#top #footer .mw-footer-contact svg { flex: none; width: 17px; height: 17px; color: var(--mw-accent); }
.mw-hero2__copy { padding-bottom: clamp(2rem, 1.6rem + 2vw, 3.4rem); }

/* ---------- Hero responsiv: Text IM Bild (gross) / darunter (klein) ---------- */
.mw-hero2 { position: relative; }
.mw-hero2__media { position: relative; }

/* Breite Fenster: Bildausschnitt festhalten, Raender unscharf fuellen.

   Vorher lief das Bild ueber die volle Breite und wurde per object-fit: cover
   hochgezoomt — auf 2560px war von einem 1200er Bild kaum noch Kontext uebrig.
   Jetzt bleibt das scharfe Bild bei --mw-hero-max stehen, und links und rechts
   setzt es sich unscharf fort (wie Hochkant-Videos im Fernsehen). Die weiche
   Maske an den Kanten verhindert die sichtbare Naht.

   Die Bild-URL kommt als --mw-hero-img aus dem Hero-Markup (build_hero).
   Fehlt sie, greift nichts davon und der Hero sieht aus wie zuvor. */
.mw-hero2__media { overflow: hidden; }
.mw-hero2__media::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--mw-hero-img); background-size: cover;
  background-position: center 22%;
  filter: blur(38px) saturate(.85); transform: scale(1.12);
}
.mw-hero2__media picture {
  position: relative; z-index: 1; display: block;
  max-width: var(--mw-hero-max, 1600px); margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
/* Ohne Bild-Variable keine Randfuellung — dann bleibt es beim alten Verhalten. */
.mw-hero2__media:not([style*="--mw-hero-img"])::before { content: none; }
.mw-hero2__media:not([style*="--mw-hero-img"]) picture {
  max-width: none; -webkit-mask-image: none; mask-image: none;
}

@media (min-width: 900px) {
  .mw-hero2__media img { min-height: 470px; max-height: clamp(470px, 46vw, 680px); }
  /* Der Aufheller gehoert ueber Bild und Randfuellung, sonst schluckt ihn der Blur. */
  .mw-hero2__media::after { z-index: 2; }
  /* sanfter Aufheller links, damit die Schrift sicher lesbar bleibt */
  .mw-hero2__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 38%, rgba(255,255,255,0) 72%);
  }
  .mw-hero2__copy {
    position: absolute; top: 50%; left: 0; transform: translateY(-50%);
    max-width: 47%; z-index: 2;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }
  .mw-hero2 .mw-lead { max-width: 40ch; }
  .mw-hero2 .mw-trust { border-top-color: rgba(18,33,48,.2); }
}

/* kleine Screens: Bild oben, Text darunter auf Hellblau (Standardfluss) */
@media (max-width: 899px) {
  .mw-hero2__media img { max-height: 60vh; object-position: center 20%; }
  .mw-hero2__copy { position: static; max-width: none; }
}

/* Eyebrow als Basis-Regel (gilt ueberall, nicht nur in bestimmten Sektionen) */
.mw-eyebrow2 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mw-font-sans); font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-brand-bright);
}
.mw-eyebrow2::before { content: ""; width: 26px; height: 2px; background: var(--mw-accent); display: inline-block; flex: none; }

/* Menue-Flex nur am Desktop: auf Mobil wieder Enfolds Burger-Verhalten */
@media (max-width: 989px) {
  #top #header_main .av-main-nav { display: block !important; }
  #top #header_main .av-main-nav > li { display: none !important; }
  #top #header_main .av-main-nav > li.av-burger-menu-main { display: block !important; }
  #top #header_main { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* ============================================================
   Feinschliff-Runde 3
   ============================================================ */

/* ---------- Hero: Kopf nicht anschneiden, keine blauen Balken ---------- */
.mw-hero2__media img { object-position: center 8% !important; }
@media (min-width: 900px) {
  #top .mw-hero-section > .container { padding-top: 0 !important; padding-bottom: 0 !important; }
  #top .mw-hero-section .entry-content-wrapper { margin: 0 !important; }
  .mw-hero2__copy { padding-top: 0 !important; padding-bottom: 0 !important; }
  .mw-hero2__media { margin-bottom: 0 !important; }
}

/* ---------- Burger-Menue: Buttons ordentlich statt "hingeklatscht" ---------- */
@media (max-width: 989px) {
  #top .av-burger-overlay .av-menu-button-colored > a,
  #top .av-burger-overlay .av-menu-button-bordered > a,
  #top #av-burger-menu-ul .av-menu-button-colored > a,
  #top #av-burger-menu-ul .av-menu-button-bordered > a {
    display: inline-flex !important; align-items: center; justify-content: center;
    margin: .5rem auto !important; padding: .8rem 1.6rem !important;
    border-radius: var(--mw-radius) !important; font-weight: 650 !important; min-width: 220px;
  }
  #top .av-burger-overlay .av-menu-button-colored > a,
  #top #av-burger-menu-ul .av-menu-button-colored > a {
    background: var(--mw-accent) !important; color: #23180a !important;
  }
  #top .av-burger-overlay .av-menu-button-bordered > a,
  #top #av-burger-menu-ul .av-menu-button-bordered > a {
    border: 1px solid rgba(255,255,255,.4) !important;
  }
}

/* ---------- simplr-Liste: groesser + saubere Ausrichtung an den Haken ---------- */
.mw-flist { gap: 1.15rem; }
.mw-flist li { font-size: 1.08rem; line-height: 1.55; align-items: flex-start; }
.mw-flist .mw-tick { width: 28px; height: 28px; margin-top: .1rem; font-size: .95rem; }
.mw-flist li > span:last-child { padding-top: .1rem; }

/* ---------- Bewertungs-Badge: helleres Blau, lesbar ---------- */
.mw-seal__badge {
  background: radial-gradient(circle at 50% 30%, #2a8fdc, var(--mw-brand-bright)) !important;
}
.mw-seal__badge b { font-size: 1.9rem !important; }
.mw-seal__badge small { opacity: 1 !important; }

/* ---------- Bewertungen: zwei gleichberechtigte Karten ---------- */
.mw-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.mw-revcard { background: var(--mw-surface); border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  padding: 1.6rem 1.5rem; box-shadow: var(--mw-shadow); }
.mw-revcard h3 { font-family: var(--mw-font-display) !important; font-size: 1.2rem !important; margin: 0 0 1rem !important; }
.mw-revcard img { max-width: 200px; height: auto; }
@media (max-width: 860px) { .mw-reviews { grid-template-columns: 1fr; } }

/* ---------- Ratgeber: Datum buendig mit Ueberschrift/Text ---------- */
#top .mw-bloggrid .slide-meta,
#top .mw-bloggrid .slide-meta-del,
#top .mw-bloggrid .slide-entry .slide-meta time { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; }
#top .mw-bloggrid .slide-entry .slide-content { padding: 1.1rem 1.3rem 1.4rem !important; }
#top .mw-bloggrid .slide-entry .slide-meta { padding: 0 1.3rem !important; }

/* ---------- Footer: keine weisse Trennlinie, kein weisser Rand unten ---------- */
#top #socket { border-top: 0 !important; }
html, body, #top { background-color: #031d3a; }
#top #wrap_all { background-color: transparent; }
#top #socket { padding-bottom: 1.4rem !important; margin-bottom: 0 !important; }

/* Socket-Aufbau: Zeile 1 = Copyright + Social, Zeile 2 = ProvenExpert-Sterne mittig */
#top #socket .container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; row-gap: .9rem; }
#top #socket .copyright { order: 1; flex: 1 1 auto; text-align: left; }
#top #socket .social_bookmarks { order: 2; flex: 0 0 auto; margin: 0 !important; }
#top #socket .mw-pe-line, #top #socket .avia-provenexpert, #top #socket .provenexpert-rating {
  order: 3; flex: 0 0 100%; text-align: center !important; justify-content: center;
}

/* 50px-Padding des Content-Wrappers auf Sektions-Seiten entfernen
   (erzeugte die hellblauen Balken ueber/unter dem Hero-Bild) */
body.mw-fullbleed #top #main > .container_wrap:not(.avia-section) > .container.av-section-cont-open > .content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------- Eigenes Bewertungs-Karussell ---------- */
.mw-rev__scores { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.mw-score { display: flex; align-items: center; gap: .9rem; background: var(--mw-surface);
  border: 1px solid var(--mw-line); border-radius: var(--mw-radius); padding: 1rem 1.4rem;
  box-shadow: var(--mw-shadow); text-decoration: none !important; min-width: 260px; }
a.mw-score:hover { border-color: var(--mw-brand); transform: translateY(-2px); transition: .2s var(--mw-ease); }
.mw-score__num { font-family: var(--mw-font-display); font-size: 2.1rem; font-weight: 700; color: var(--mw-brand); line-height: 1; }
.mw-score__body { display: flex; flex-direction: column; gap: .15rem; }
.mw-score__stars { color: var(--mw-star); letter-spacing: .08em; font-size: 1.05rem; }
.mw-score__src { color: var(--mw-ink-soft); font-size: .88rem; }

.mw-rev__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.mw-rev__viewport::-webkit-scrollbar { display: none; }
.mw-rev__track { display: flex; gap: 18px; padding: 4px; }
.mw-revitem { flex: 0 0 clamp(260px, 32%, 380px); scroll-snap-align: start;
  background: var(--mw-surface); border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  padding: 1.5rem 1.4rem; box-shadow: var(--mw-shadow); display: flex; flex-direction: column; }
.mw-revitem__stars { color: var(--mw-star); letter-spacing: .1em; margin-bottom: .7rem; }
.mw-revitem__text { font-family: var(--mw-font-display); font-size: 1.05rem; line-height: 1.5;
  color: var(--mw-ink); margin: 0 0 1.1rem; }
.mw-revitem__who { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.mw-revitem__who img, .mw-revitem__avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.mw-revitem__avatar { background: var(--mw-brand-tint); color: var(--mw-brand); display: grid; place-items: center; font-weight: 700; }
.mw-revitem__who b { display: block; font-size: .92rem; }
.mw-revitem__who small { color: var(--mw-ink-soft); font-size: .78rem; }
.mw-rev__nav { display: flex; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.mw-rev__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--mw-line);
  background: var(--mw-surface); color: var(--mw-brand); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, transform .2s; }
.mw-rev__btn:hover { border-color: var(--mw-brand); transform: translateY(-2px); }

/* ============================================================
   Feinschliff-Runde 4 — Hero
   ============================================================ */

/* 1) Die hellblauen Balken: Enfold gibt dem inneren main.content der Sektion
      50px Innenabstand oben/unten — dort schien der Sektions-Hintergrund durch. */
#top .mw-hero-section > .container > .content,
#top .mw-hero-section .container > main.content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#top .mw-hero-section { background-color: transparent !important; }

/* 2) Kopf nie anschneiden: Bild oben buendig, Beschnitt nur unten.
      Dazu etwas mehr Hoehe, damit weniger vom Bild verloren geht. */
.mw-hero2__media img { object-position: center top !important; }
@media (min-width: 900px) {
  .mw-hero2__media img {
    min-height: 520px !important;
    max-height: clamp(520px, 52vw, 760px) !important;
  }
}
@media (max-width: 899px) {
  .mw-hero2__media img { max-height: 62vh !important; object-position: center top !important; }
}

/* 3) Fliesstext im Hero groesser */
.mw-hero2 .mw-lead {
  font-size: clamp(1.12rem, 1rem + .45vw, 1.35rem) !important;
  line-height: 1.6 !important;
  color: var(--mw-ink-soft);
}

/* Zusatzzeile in der Bewertungs-Kachel (Weiterempfehlungsquote) */
.mw-score__extra { display: block; font-size: .82rem; color: var(--mw-ink-soft); margin-top: .1rem; }

/* ============================================================
   Bewertungs-Siegel nebeneinander: ProvenExpert (Original) + Google (eigen)
   Beide exakt quadratisch in --seal (Standard 300px), gleiche Anmutung.
   ============================================================ */
.mw-badges {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px);
  justify-content: center; align-items: flex-start;
}
.mw-badges > .mw-badge,
.mw-badges .mw-badge--pe > * {
  width: var(--seal); max-width: 100%;
}
.mw-badge--pe, .mw-badge--google, .mw-badge--empty {
  width: var(--seal); height: var(--seal);
  background: var(--mw-surface);
  border: 1px solid var(--mw-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(6,26,44,.05), 0 10px 26px -18px rgba(6,26,44,.30);
  overflow: hidden;
}
/* ProvenExpert liefert eigenes Markup — nur einpassen, nicht umgestalten */
.mw-badge--pe { display: flex; align-items: center; justify-content: center; padding: 0; }
.mw-badge--pe iframe, .mw-badge--pe img, .mw-badge--pe > div { max-width: 100%; }

.mw-badge--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 1rem; text-align: center;
  font-family: var(--mw-font-sans); font-size: .82rem; color: var(--mw-ink-soft);
  border-style: dashed;
}

/* --- Google-Kachel: Aufbau und Groessen dem PE-Siegel nachempfunden --- */
.mw-badge--google {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0;
  font-family: var(--mw-font-sans); color: #3f3f3f;
  border-radius: 3px; box-shadow: none; border-color: #dcdcdc;
}
.mw-badge--pe, .mw-badge--empty { border-radius: 3px; box-shadow: none; border-color: #dcdcdc; }

.mw-badge__title {
  font-size: 13px; line-height: 1.3; text-align: center; color: #4a4a4a;
  padding: 10px 12px 9px; flex: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Baender randlos ueber die volle Breite, wie beim Original */
.mw-badge__bar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #3c3c3b; color: #fff; height: 36px; flex: none;
  font-size: 17px; font-weight: 600;
}
.mw-badge__ribbon {
  background: var(--mw-brand); color: #fff; text-align: center; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 0;
}
.mw-badge__stars {
  text-align: center; color: var(--mw-star); font-size: 18px; letter-spacing: .1em;
  margin-top: 14px; flex: none;
}
.mw-badge__count {
  text-align: center; font-size: 16px; font-weight: 700; color: #3f3f3f;
  margin-top: 5px; flex: none;
}
.mw-badge__slides { position: relative; flex: 1 1 auto; min-height: 0; margin: 16px 12px 0; }
.mw-badge__slide {
  position: absolute; inset: 0; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--mw-ease);
}
.mw-badge__slide.is-on { opacity: 1; visibility: visible; }
.mw-badge__slide blockquote {
  position: relative; margin: 0; padding: 8px 10px; background: #fff;
  border: 1px solid var(--mw-brand); border-radius: 5px;
  font-size: 11px; line-height: 1.45; font-style: italic; color: #333; text-align: left;
}
/* kleine Sprechblasen-Spitze nach oben, wie beim PE-Siegel */
.mw-badge__slide blockquote::before,
.mw-badge__slide blockquote::after {
  content: ""; position: absolute; left: 16px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.mw-badge__slide blockquote::before { top: -7px; border-bottom: 7px solid var(--mw-brand); }
.mw-badge__slide blockquote::after  { top: -6px; border-bottom: 6px solid #fff; }
.mw-badge__slide figcaption { font-size: 9.5px; color: #777; text-align: right; }
.mw-badge__foot {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; color: #8a8a8a; flex: none;
  padding: 6px 12px; margin-top: 8px; background: #f7f7f7; border-top: 1px solid #ededed;
}
.mw-badge__foot a { color: #8a8a8a !important; text-decoration: none; }
.mw-badge__foot a:hover { color: var(--mw-brand) !important; text-decoration: underline; }

/* Enfold-Grundstile aus der Kachel heraushalten */
#top .mw-badge--google blockquote {
  background: #fff !important; font-size: 11px !important; line-height: 1.45 !important;
  border-left-width: 1px !important; color: #333 !important;
}
#top .mw-badge--google p { margin: 0 !important; }

@media (max-width: 700px) {
  .mw-badges { --seal: min(300px, 88vw); }
}

/* ============================================================
   simplr-Sektion: freigestelltes App-Foto auf heller Buehne
   Die Geraete sind weiss, der Sektionsgrund auch — deshalb eine
   blau getoente Flaeche dahinter und eine weiche Kontur am Bild.
   ============================================================ */
.mw-stage { position: relative; display: flex; justify-content: center; align-items: center; }
/* weiche Buehne: blau getoenter Verlauf, laeuft nach aussen aus */
.mw-stage::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 108%; height: 92%;
  border-radius: 42px;
  background:
    radial-gradient(78% 62% at 50% 42%, rgba(5,86,148,.14) 0%, rgba(5,86,148,.06) 46%, rgba(5,86,148,0) 74%),
    linear-gradient(160deg, var(--mw-brand-tint) 0%, #f2f7fc 55%, rgba(255,255,255,0) 100%);
}
/* feiner Ring als Abgrenzung zur weissen Sektion */
.mw-stage::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(5,86,148,.10);
}
.mw-stage img {
  position: relative; z-index: 1;
  width: 100%; max-width: 470px; height: auto; display: block;
  /* folgt der Silhouette der Geraete: Tiefe + zarte helle Kante */
  filter:
    drop-shadow(0 22px 38px rgba(5,52,110,.26))
    drop-shadow(0 3px 6px rgba(5,52,110,.16))
    drop-shadow(0 0 1px rgba(5,86,148,.35));
}
@media (max-width: 899px) {
  .mw-stage { margin-top: 2rem; }
  .mw-stage img { max-width: 340px; }
  .mw-stage::before { width: 112%; height: 88%; border-radius: 30px; }
}

/* Querverweise im CTA-Band sichtbar, aber nicht schreiend */
#top .mw-ctaband p a {
  color: #fff !important; text-decoration: none;
  border-bottom: 1px solid rgba(232,168,48,.75);
  padding-bottom: 1px; transition: border-color .2s var(--mw-ease), color .2s var(--mw-ease);
}
#top .mw-ctaband p a:hover { color: var(--mw-accent) !important; border-bottom-color: var(--mw-accent); }

/* CTA-Absatz: Zeilen gleichmaessig verteilen statt einzelnes Wort in Zeile 4 */
#top .mw-ctaband p { max-width: 58ch; text-wrap: balance; }

/* ---------- Hero: kleine Bestandskunden-Zeile unter den Buttons ---------- */
.mw-hero2__hint {
  margin: .9rem 0 0 !important;
  font-size: .92rem; color: var(--mw-ink-soft);
}
.mw-hero2__hint a {
  color: var(--mw-brand-bright); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(10,111,191,.35); padding-bottom: 1px;
  transition: border-color .2s var(--mw-ease), color .2s var(--mw-ease);
}
.mw-hero2__hint a:hover { color: var(--mw-brand-deep); border-bottom-color: var(--mw-brand-deep); }

/* ============================================================
   Titelleiste auf Textseiten (nicht Landing-Pages):
   - genug Abstand zum Header, damit lange Ueberschriften nicht angeschnitten
     werden und nicht unter den Header rutschen
   - Breadcrumbs sauber UNTER die Ueberschrift statt oben rechts hineinlaufend
   ============================================================ */
/* Fixierter Desktop-Header ist 148px hoch, Enfold reservierte oben aber nur ~119px
   Freiraum -> der Header verdeckte den oberen Rand von Hero-Bild und Ueberschrift.
   Freiraum an die echte Header-Hoehe angleichen (nur wo der Header fixiert ist). */
@media (min-width: 990px) {
  #top #main { padding-top: 148px !important; }
}

/* ------------------------------------------------------------
   Titelleiste entfällt, es bleibt die Breadcrumb-Zeile (Vorgabe Willi, 31.07.2026)
   Der Enfold-Balken trägt keine Überschrift mehr — functions.php
   (mw_titelleiste_ohne_ueberschrift) leert das Titel-Argument, wodurch Enfold
   das <h1> gar nicht erst ausgibt. Übrig bleibt eine schmale, rechtsbündige
   Breadcrumb-Zeile ohne Fläche und ohne Trennlinie.
   Die H1 steht jetzt im Inhalt (.mw-inhalt-titel) und ist dort an Bild und
   Textspalte ausgerichtet, statt in einem eigenen Block über die volle
   Containerbreite zu laufen. Bei Beiträgen steht sie damit über dem Bild.
   Seiten mit eigenem Hero setzen header_title_bar=hidden_title_bar und haben
   ohnehin keine Leiste (fullbleed wie bisher).
   ------------------------------------------------------------ */
#top .title_container {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
/* Die Linie des folgenden Abschnitts würde sonst wie der alte Balkenrand wirken */
#top .title_container + .container_wrap { border-top: 0 !important; }

#top .title_container .container {
  display: block !important;
  min-height: 0 !important;
}
/* Sicherheitsnetz: Archive (Blog/Kategorie) laufen nicht über is_singular(),
   dort liefert Enfold die Titelzeile weiter aus — sichtbar sein soll sie nicht. */
#top .title_container .main-title { display: none !important; }

#top .title_container .breadcrumb,
#top .title_container .breadcrumbs,
#top .title_container .avia-breadcrumbs {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: normal !important;
  font-family: var(--mw-font-sans) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
  color: var(--mw-ink-soft) !important;
}
#top .title_container .breadcrumb a { color: var(--mw-ink-soft) !important; text-decoration: none !important; }
#top .title_container .breadcrumb a:hover { color: var(--mw-brand) !important; text-decoration: underline !important; }
#top .title_container .breadcrumb .breadcrumb_last { color: var(--mw-ink) !important; }

@media (max-width: 767px) {
  #top .title_container { padding-top: 12px !important; }
  #top .title_container .breadcrumb,
  #top .title_container .breadcrumbs,
  #top .title_container .avia-breadcrumbs { font-size: .78rem !important; }
}

/* Die H1 im Inhalt — gleiche Display-Optik wie zuvor im Balken, aber bündig
   mit Bild und Textspalte, weil sie in der .entry-content-wrapper sitzt. */
#top .mw-inhalt-titel {
  margin: 0 0 1.1rem !important;
  font-family: var(--mw-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(1.85rem, 1.15rem + 1.9vw, 2.85rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -.01em !important;
  color: var(--mw-ink) !important;
  text-transform: none !important;
}
@media (max-width: 767px) {
  #top .mw-inhalt-titel { margin-bottom: .85rem !important; }
}
/* Container-Hülle für Seiten, die mit einer vollbreiten Sektion beginnen
   (functions.php: mw_inhalt_beginnt_vollbreit) — nur Träger, keine Fläche. */
#top .mw-titel-wrap { background: transparent !important; border: 0 !important; padding: 0 !important; }
#top .mw-titel-wrap .mw-inhalt-titel { margin-bottom: 1.4rem !important; }

/* ============================================================
   Buttons site-weit vereinheitlichen (Enfold avia-button im Content).
   Merkregel: Termin = Geld = Gold. Buttons, die auf einen Termin verlinken
   (Zoho-Booking, /termin, Terminvereinbarung), werden gold; alle anderen weiss.
   Hover analog zu den Menue-Buttons (leichtes Anheben, Farbwechsel).
   Die Landing-Page-Buttons (.mw-btn) sind davon unberuehrt.
   ============================================================ */

/* Basis: alle Content-Buttons -> weiss mit dunkler Schrift, dezenter Rahmen */
#top .avia-button.avia-color-theme-color,
#top .avia-button.avia-color-theme-color-subtle,
#top .avia-button.avia-color-theme-color-highlight,
#top .avia-button.avia-color-custom {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--mw-ink) !important;
  border: 1px solid var(--mw-line) !important;
  text-shadow: none !important;
}
#top .avia-button.avia-color-theme-color .avia_button_icon,
#top .avia-button.avia-color-custom .avia_button_icon {
  background: transparent !important; border-color: var(--mw-line) !important; color: var(--mw-ink) !important;
}
#top .avia-button.avia-color-theme-color:hover,
#top .avia-button.avia-color-theme-color-subtle:hover,
#top .avia-button.avia-color-theme-color-highlight:hover,
#top .avia-button.avia-color-custom:hover {
  background: #ffffff !important;
  color: var(--mw-brand) !important;
  border-color: var(--mw-brand) !important;
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow);
}

/* Termin-Buttons -> Gold mit dunkler Schrift (gewinnen ueber die Weiss-Basis,
   weil hoehere Spezifitaet durch Klasse + Attribut-Selektor und spaetere Position) */
#top .avia-button[href*="zohobookings"],
#top .avia-button[href*="termin"],
#top .avia-button[href*="beratungstermin"] {
  background: var(--mw-accent) !important;
  background-image: none !important;
  color: #23180a !important;
  border: 0 !important;
  text-shadow: none !important;
}
#top .avia-button[href*="zohobookings"] .avia_button_icon,
#top .avia-button[href*="termin"] .avia_button_icon,
#top .avia-button[href*="beratungstermin"] .avia_button_icon {
  background: transparent !important; border-color: rgba(0,0,0,.2) !important; color: #23180a !important;
}
#top .avia-button[href*="zohobookings"]:hover,
#top .avia-button[href*="termin"]:hover,
#top .avia-button[href*="beratungstermin"]:hover {
  background: var(--mw-accent-deep) !important;
  color: #ffffff !important;
  border: 0 !important;
  transform: translateY(-2px);
  box-shadow: var(--mw-shadow);
}
#top .avia-button[href*="zohobookings"]:hover .avia_button_icon,
#top .avia-button[href*="termin"]:hover .avia_button_icon,
#top .avia-button[href*="beratungstermin"]:hover .avia_button_icon { color:#fff !important; }

/* ---------- SEO-Lesetext-Abschnitt (Startseite) ---------- */
.mw-seo { max-width: 900px; margin: 1.6rem auto 0; }
.mw-seo p { color: var(--mw-ink-soft); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.1rem; }
.mw-seo h3 {
  font-family: var(--mw-font-display) !important;
  font-size: 1.32rem !important; color: var(--mw-ink) !important;
  margin: 1.8rem 0 .6rem !important; line-height: 1.25;
}
.mw-seo a { color: var(--mw-brand-bright); text-underline-offset: 2px; }
.mw-seo a:hover { color: var(--mw-brand-deep); }

/* ---------- Akkordeons zweispaltig (Wissens-/SEO-Sektion) ---------- */
.mw-faq--2col { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; align-items: start; }
.mw-faq--2col > details { margin: 0 !important; }
@media (max-width: 780px) { .mw-faq--2col { grid-template-columns: 1fr; } }
/* linksbuendige Sektions-Ueberschrift + Intro in der Wissens-Sektion */
.mw-wiss .mw-sec { text-align: left; margin-left: 0; }
.mw-wiss .mw-sec p { margin-left: 0; }

/* ============================================================
   Lokal-Sektion "Vor Ort in <Stadt>" — gestaltet (nicht nur Text):
   zweispaltig, Marken-Panel mit Standort-Pin + Stadtteil-Chips.
   ============================================================ */
.mw-local {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
}
.mw-local__intro h2 { margin: .4rem 0 .9rem !important; }
.mw-local__intro p {
  color: var(--mw-ink-soft); font-size: 1.08rem; line-height: 1.72;
  margin: 0 0 1rem; max-width: 48ch;
}
.mw-local__intro p:last-child { margin-bottom: 0; }
.mw-local__panel {
  position: relative; background: linear-gradient(155deg, var(--mw-brand-tint) 0%, #f3f8fd 60%, #ffffff 100%);
  border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--mw-shadow);
}
.mw-local__pin {
  width: 46px; height: 46px; border-radius: 13px; background: var(--mw-brand);
  color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(5,86,148,.5);
}
.mw-local__pin svg { width: 24px; height: 24px; }
.mw-local__label {
  display: block; font-family: var(--mw-font-sans); font-weight: 700;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mw-brand-deep); margin: 1rem 0 .75rem;
}
.mw-local__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mw-local__chips span {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius-pill);
  padding: .42rem .9rem; font-size: .92rem; font-weight: 600; color: var(--mw-brand-deep);
}
.mw-local__note {
  margin: 1.1rem 0 0 !important; font-size: .9rem; color: var(--mw-ink-soft); line-height: 1.5;
}
@media (max-width: 820px) {
  .mw-local { grid-template-columns: 1fr; gap: 1.8rem; }
  .mw-local__intro p { max-width: none; }
}

/* ---------- /simplr/-Seite ---------- */
.mw-simplr-logo { display:block; height:38px; width:auto; margin:.2rem 0 .9rem; }
.mw-digital--rev .mw-stage { order:0; }
@media (max-width:780px){ .mw-digital--rev .mw-stage { order:-1; } }

/* ============================================================
   /simplr/ — eigenständiger als die Startseite:
   blauer Marken-Hero + Zwei-Wege-Abschluss (Login / Registrieren)
   ============================================================ */
#top .mw-shero-section {
  background: linear-gradient(135deg, #033472 0%, #055694 52%, #0a6fbf 100%) !important;
}
.mw-shero { color: #fff; }
.mw-shero h1, #top .mw-shero h1 { color: #fff !important; }
.mw-shero h1 em { color: #9fd0f5; }
.mw-shero .mw-lead { color: rgba(255,255,255,.9); }
.mw-shero .mw-eyebrow2 { color: #9fd0f5; }
.mw-shero .mw-eyebrow2::before { background: var(--mw-accent); }
.mw-shero__hint { margin: .9rem 0 0 !important; font-size: .92rem; color: rgba(255,255,255,.82); }
.mw-shero__hint a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(232,168,48,.8); }
.mw-shero__hint a:hover { color: var(--mw-accent); }
.mw-shero .mw-btn--ghost { color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; background: transparent !important; }
.mw-shero .mw-btn--ghost:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.mw-simplr-logo { height: 40px; width: auto; display: block; margin: .2rem 0 1rem; }
.mw-simplr-logo--white { filter: brightness(0) invert(1); opacity: .96; }
/* Bühne im blauen Hero: heller Schimmer statt der hellblauen Fläche */
.mw-shero .mw-stage::before { background: radial-gradient(70% 60% at 55% 42%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); }
.mw-shero .mw-stage::after { border-color: rgba(255,255,255,.18); }

/* Zwei-Wege-Abschluss */
.mw-paths { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); }
.mw-path {
  background: var(--mw-surface); border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; align-items: flex-start;
}
.mw-path__icon {
  width: 48px; height: 48px; border-radius: 13px; background: var(--mw-brand-tint); color: var(--mw-brand);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.mw-path h3 { font-size: 1.35rem !important; margin: 0 0 .5rem !important; }
.mw-path p { color: var(--mw-ink-soft); margin: 0 0 1.3rem; flex: 1 1 auto; }
.mw-path .mw-btn { width: 100%; text-align: center; }
@media (max-width: 720px) { .mw-paths { grid-template-columns: 1fr; } }

/* ============================================================
   /simplr/ — bewusst anders als die Startseite:
   blauer Produkt-Hero + eigene Feature-Liste.
   ============================================================ */
#top .mw-shero-section { background: linear-gradient(158deg, #032a5e 0%, #055694 52%, #0a6fbf 118%) !important; }
.mw-shero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem,4vw,3.6rem); align-items: center; }
/* Logo bewusst gross: es traegt die Marke im Hero (Wunsch Willi, 31.07.2026).
   Quelldatei ist 1000x447 px, bei 80px Hoehe also gestochen scharf. */
.mw-shero__logo { height: 80px; width: auto; max-width: 100%; display: block; margin: 0 0 1.2rem; }
@media only screen and (max-width: 767px) {
  .mw-shero__logo { height: 64px; }
}
.mw-shero, #top .mw-shero h1, .mw-shero p { color: #fff !important; }
.mw-shero .mw-eyebrow2 { color: #bcd8f2 !important; }
.mw-shero .mw-eyebrow2::before { background: var(--mw-accent); }
#top .mw-shero h1 { font-size: clamp(2.3rem,1.5rem+3vw,3.8rem) !important; line-height: 1.07; letter-spacing: -.015em; margin: .3rem 0 0 !important; }
.mw-shero .mw-lead { color: #dcecf9 !important; max-width: 46ch; font-size: clamp(1.1rem,1rem+.4vw,1.32rem) !important; }
.mw-shero .mw-actions { margin-top: 1.8rem; }
.mw-shero__hint { margin: 1rem 0 0 !important; font-size: .95rem; color: #bcd8f2 !important; }
.mw-shero__hint a { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.mw-shero__media img { width: 100%; max-width: 470px; margin-inline: auto; display: block; filter: drop-shadow(0 30px 55px rgba(0,18,42,.55)); }
.mw-btn--light { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; }
.mw-btn--light:hover { background: #fff !important; color: var(--mw-brand-deep) !important; }
@media (max-width: 820px) { .mw-shero { grid-template-columns: 1fr; } .mw-shero__media { order: -1; } }

/* Feature-Liste (statt Karten wie auf der Startseite) */
.mw-slist { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem 2.6rem; margin-top: 2rem; }
.mw-slist__item { display: flex; gap: 1rem; align-items: flex-start; }
.mw-slist__ic { flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--mw-brand-tint); color: var(--mw-brand); display: grid; place-items: center; }
.mw-slist__ic svg { width: 24px; height: 24px; }
#top .mw-slist__item h3 { font-size: 1.2rem !important; margin: .15rem 0 .35rem !important; }
.mw-slist__item p { color: var(--mw-ink-soft); margin: 0; line-height: 1.6; }
@media (max-width: 700px) { .mw-slist { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ============================================================
   Spartenseiten — Sektionen ausgestaltet (TOC, FAQ, Haupttext, Teaser)
   ============================================================ */

/* --- Inhaltsverzeichnis als Karte, zweispaltig --- */
#top .avia_auto_toc {
  background: var(--mw-paper); border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  padding: clamp(1.3rem,2.5vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
  box-shadow: var(--mw-shadow); margin: 1.4rem 0 2.6rem;
}
#top .avia_auto_toc .widgettitle {
  font-family: var(--mw-font-sans) !important; font-size: .8rem !important; font-weight: 700 !important;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-brand-bright) !important;
  margin: 0 0 1rem !important; padding: 0 !important; border: 0 !important;
}
#top .avia-toc-container { columns: 2; column-gap: 2.6rem; }
@media (max-width: 700px) { #top .avia-toc-container { columns: 1; } }
#top .avia_auto_toc ul { margin: 0 !important; list-style: none !important; }
#top .avia_auto_toc li { break-inside: avoid; margin: 0 0 .55rem !important; padding: 0 !important; }
#top .avia_auto_toc a { color: var(--mw-ink-soft) !important; text-decoration: none; border: 0 !important; }
#top .avia_auto_toc a:hover { color: var(--mw-brand) !important; }

/* --- FAQ-Toggles im Startseiten-Akkordeon-Stil --- */
#top .togglecontainer .av_toggle_section {
  background: #fff; border: 1px solid var(--mw-line) !important; border-radius: 12px !important;
  margin-bottom: .7rem; overflow: hidden; box-shadow: 0 1px 2px rgba(6,26,44,.04);
}
#top .togglecontainer .toggler {
  border: 0 !important; background: #fff !important;
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  /* FAQ-Fragen kleiner als die Sektions-Ueberschriften (Groesse der CTA-Karte, 1.32rem) */
  font-size: 1.32rem !important; color: var(--mw-ink) !important;
  /* linkes Padding groesser als das absolut positionierte +/- Icon (~10-25px),
     damit der erste Buchstabe nicht ueberdeckt wird */
  padding: 1.05rem 1.3rem 1.05rem 2.9rem !important;
}
#top .togglecontainer .toggler:hover { background: var(--mw-paper) !important; }
#top .togglecontainer .toggler.activeTitle { color: var(--mw-brand) !important; background: var(--mw-paper) !important; }
/* Antwort bündig unter dem Titeltext (gleicher linker Einzug) */
#top .togglecontainer .toggle_wrap .toggle_content { padding: .2rem 1.3rem 1.15rem 2.9rem !important; color: var(--mw-ink-soft); }
#top .togglecontainer .toggler .toggle_icon,
#top .togglecontainer .toggler .toggle_icon_container { border-color: var(--mw-line) !important; color: var(--mw-brand) !important; }

/* --- Haupttext: Themenblöcke absetzen (nur Struktur/Optik, kein Texteingriff) --- */
.mw-spartentext { max-width: 820px; }
.mw-spartentext h3 {
  margin-top: 2.6rem !important; padding-top: 1.5rem; border-top: 1px solid var(--mw-line);
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  font-size: 1.55rem !important; line-height: 1.25;
}
.mw-spartentext h3:first-child { margin-top: .3rem !important; padding-top: 0; border-top: 0; }
.mw-spartentext p, .mw-spartentext li { color: var(--mw-ink-soft); line-height: 1.75; }

/* --- "Das könnte Dich auch interessieren" als Karten --- */
#top .custom-snippet {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  overflow: hidden; box-shadow: var(--mw-shadow); height: 100%;
  transition: transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease);
}
#top .custom-snippet:hover { transform: translateY(-4px); box-shadow: var(--mw-shadow-lg); }
#top .custom-snippet .snippet-image-wrapper { aspect-ratio: 16/10; margin: 0; }
#top .custom-snippet h3 { font-size: 1.15rem !important; margin: 0 !important; padding: 1rem 1.2rem .3rem; }
#top .custom-snippet p { padding: 0 1.2rem 1.2rem; margin: 0; color: var(--mw-ink-soft); }

/* --- Leistungserweiterungen (av_postslider) als Karten — gleicher Look wie oben --- */
#top .mw-leistung-band .slide-entry {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  overflow: hidden; box-shadow: var(--mw-shadow);
  transition: transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease);
}
#top .mw-leistung-band .slide-entry:hover { transform: translateY(-4px); box-shadow: var(--mw-shadow-lg); }
#top .mw-leistung-band .slide-image { margin: 0 !important; border-radius: 0 !important; display: block; }
#top .mw-leistung-band .slide-entry .slide-content { padding: 0 !important; margin-top: 0 !important; }
#top .mw-leistung-band .slide-entry-title { font-size: 1.15rem !important; margin: 0 !important; padding: 1rem 1.2rem .35rem !important; }
#top .mw-leistung-band .slide-entry-title a { color: var(--mw-ink) !important; }
#top .mw-leistung-band .slide-entry-excerpt { padding: 0 1.2rem 1.2rem !important; margin: 0 !important; color: var(--mw-ink-soft); }
/* Kategorie-/Datum-Meta ausblenden -> cleaner Karten-Look wie die Teaser-Karten */
#top .mw-leistung-band .blog-categories,
#top .mw-leistung-band .av-vertical-delimiter,
#top .mw-leistung-band .entry-footer { display: none !important; }

/* --- Spartenseiten: einheitliche große Abschnitts-Überschriften + Abstände --- */
#top .mw-h-lg h2, #top .mw-h-lg h3, #top .mw-intro h2,
#top .mw-spartentext h2, #top .mw-spartentext h3,
#top .mw-h-lg .av-special-heading-tag {
  font-family: var(--mw-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.55rem !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em; color: var(--mw-ink) !important;
  margin: 0 0 .9rem !important;
}
/* Abstand Hero -> Einleitung */
.mw-intro { margin-top: clamp(2rem, 1.4rem + 2.5vw, 3.6rem) !important; }
/* Leistungs-Band: Heading-Abstand innerhalb der neuen Sektion */
.mw-leistung-band .av-special-heading { margin-bottom: 1.4rem !important; }

/* ============================================================
   Spartenseiten — einheitliche Lesespalte (820px) für Textelemente,
   breite Bänder nur für Carousel/Karten. + mehr Hero-Abstand (Desktop).
   ============================================================ */
/* Lesespalte: alle Leseelemente auf gleiche Breite + linke Flucht */
#top .mw-intro,
#top .mw-spartentext,
#top .mw-lese,
#top .avia_auto_toc,
#top .togglecontainer,
#top .mw-h-lg {
  max-width: 820px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Hero -> Einleitung: padding statt margin (margin kollabiert durch Enfold-Wrapper
   -> sichtbarer Abstand war 0). Padding kollabiert nie und erzeugt echten Abstand. */
@media (min-width: 900px) {
  #top .mw-intro { margin-top: 0 !important; padding-top: 5.5rem !important; }
}

/* ============================================================
   Spartenseiten — Artikel mit rechter Sidebar (Lesespalte + sticky Nav/CTA)
   ============================================================ */
@media (min-width: 990px) {
  /* Spalten-Klassen direkt targeten (Enfold bricht sie aus der Sektion aus);
     Breiten exakt auf 100% (64 + 4 + 32), Enfold-Eigenmargins ueberschreiben. */
  #top .flex_column.mw-article__main { width: 70% !important; margin: 0 !important; float: left !important; clear: none !important; }
  #top .flex_column.mw-article__side { width: 27% !important; margin: 0 0 0 3% !important; float: left !important; clear: none !important;
    /* "Unten-sticky": ist die Sidebar hoeher als das Fenster, wird top negativ, damit
       sie beim Scrollen hochwandert und mit ihrer UNTERKANTE (Buchungsfeld) am unteren
       Fensterrand andockt. Der genaue Wert haengt von Sidebar-/Fensterhoehe ab und wird
       per JS (sparten-sidebar.js) in --mw-side-top gesetzt; Fallback = 168px (Header). */
    position: sticky; top: var(--mw-side-top, 168px); align-self: flex-start; }
  /* alles nach den Spalten wieder in Vollbreite (Float clearen) */
  #top .flex_column.mw-article__side ~ * { clear: both; }
  #top .mw-leistung-band, #top .mw-lese { clear: both; }
  /* Leseelemente duerfen die volle Spaltenbreite nutzen */
  #top .mw-article__main .mw-intro,
  #top .mw-article__main .mw-spartentext,
  #top .mw-article__main .togglecontainer,
  #top .mw-article__main .mw-h-lg { max-width: none !important; }
  #top .mw-article__main .mw-intro { padding-top: 0 !important; }
  /* leere Artikel-Huelle darf keinen Leerraum erzeugen; Abstand zum Hero moderat
     (Enfolds Content-Top-Padding ~70px war zu viel -> leicht hochziehen auf ~52px;
     die 18px "Ueberlappung" betreffen nur die leere Sektionsoberkante ueber der
     Hero-Bildunterkante, kein Inhalt). */
  #top .avia-section.mw-article { padding: 0 !important; margin-top: -18px !important; }
  /* Einleitung + TOC starten buendig auf gleicher Hoehe: KEIN Extra-padding-top */
  #top .flex_column.mw-article__main { padding-top: 0 !important; }
}
/* Sticky-Enabler: Enfold setzt auf html/#top/#wrap_all overflow-x:hidden gegen
   horizontalen Scroll — das erzwingt overflow-y:auto und bricht position:sticky.
   overflow-x:clip klippt weiterhin horizontal, erzeugt aber KEINEN Scroll-Container,
   Sticky bleibt heil. Nur auf Artikel-Seiten (mit .mw-article), Fallback = nicht-sticky. */
html:has(.mw-article), html:has(body.mw-article-layout) { overflow-x: clip !important; overflow-y: visible !important; }
html:has(.mw-article) #top, html:has(.mw-article) #wrap_all,
html:has(body.mw-article-layout) #top, html:has(body.mw-article-layout) #wrap_all { overflow-x: clip !important; overflow-y: visible !important; }
/* TOC in der Sidebar: einspaltig, kompakter */
.mw-article__side .avia_auto_toc { margin: 0 0 1.3rem !important; }
.mw-article__side .avia-toc-container { columns: 1 !important; }
/* Beratungs-Karte in der Sidebar */
.mw-side-cta {
  background: linear-gradient(158deg, #032a5e 0%, #055694 100%);
  color: #fff; border-radius: var(--mw-radius); padding: 1.6rem 1.5rem; box-shadow: var(--mw-shadow-lg);
}
.mw-side-cta__eyebrow { display:block; font-family:var(--mw-font-sans); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#bcd8f2; margin-bottom:.45rem; }
#top .mw-side-cta h3 { color:#fff !important; font-family:var(--mw-font-display) !important; font-size:1.32rem !important; margin:0 0 .5rem !important; }
.mw-side-cta p { color:#dcecf9; font-size:.98rem; line-height:1.55; margin:0 0 1.15rem; }
.mw-side-cta .mw-btn--primary { display:block; text-align:center; }

/* ---- Mobile (<990px): Spalten stapeln. Ohne Eingriff landet die Sidebar (TOC +
   Buchungsfeld) GANZ UNTEN nach dem kompletten Haupttext. Darum den Spalten-Container
   auf Flex stellen und die Sidebar per order nach oben ziehen (direkt nach dem Hero).
   Scope via :has(> .mw-article__side) -> trifft nur den Artikel-Spaltencontainer. ---- */
@media (max-width: 989px) {
  #top .entry-content-wrapper:has(> .mw-article__side) { display: flex; flex-direction: column; }
  #top .entry-content-wrapper:has(> .mw-article__side) > .flex_column {
    width: 100% !important; margin-left: 0 !important; float: none !important; }
  #top .entry-content-wrapper:has(> .mw-article__side) > .mw-article__side { order: -1; }
  /* auf Mobile statisch, kein sticky/max-height */
  #top .flex_column.mw-article__side { position: static !important; max-height: none !important; overflow: visible !important; }
  /* Buchungsfeld auf Mobile ausblenden: der Hero hat dort bereits einen
     "Beratung buchen"-Button; so bleibt die Reihenfolge Hero -> TOC -> Einleitung. */
  #top .mw-article__side .mw-side-cta { display: none !important; }
}

/* ============================================================
   Portfolio-Seiten (Fachinfo) — Optik der Sparten, ohne Hero (ADR-079)
   ============================================================ */
/* Titelleiste: siehe den site-weiten Block „Titelleiste entfällt" weiter oben —
   hier ist nichts Eigenes mehr nötig, Balken und Titel sind überall weg. */

/* Spaltenverhaeltnis wie auf den Sparten (70/27), ohne senkrechte Trennlinie */
@media (min-width: 990px) {
  #top.mw-article-layout .template-page.content { width: 70% !important; margin-right: 3% !important; border: 0 !important; }
  #top.mw-article-layout .sidebar {
    width: 27% !important; padding-left: 0 !important;
    position: sticky; top: var(--mw-side-top, 168px); align-self: flex-start;
  }
  /* Enfold gibt der inneren Sidebar 50px Rand -> sichtbare Luecke war 86px. Auf 4px
     reduziert (=40px sichtbar): enger, aber noch etwas luftiger als die Sparten (36px). */
  #top.mw-article-layout .sidebar .inner_sidebar { margin-left: 4px !important; }
}

/* Unter 990px stapeln statt zu quetschen: Enfold macht die Sidebar dort nur ~145px
   schmal — der Beratungs-Button brach dann pro Zeichen um (597px hoch). */
@media (max-width: 989px) {
  #top.mw-article-layout .template-page.content,
  #top.mw-article-layout .sidebar {
    width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  #top.mw-article-layout .sidebar { position: static !important; }
  #top.mw-article-layout .sidebar .inner_sidebar { margin-left: 0 !important; }
}

/* Senkrechte Trennlinie: in JEDER Breite weg (Enfold zeichnet sie ueber mehrere
   Selektoren/Breakpoints — deshalb bewusst ausserhalb des Media-Querys). */
#top.mw-article-layout .sidebar,
#top.mw-article-layout .sidebar .inner_sidebar,
#top.mw-article-layout .content,
#top.mw-article-layout .template-page.content {
  border-left: 0 !important; border-right: 0 !important; box-shadow: none !important;
}
#top.mw-article-layout .sidebar:before, #top.mw-article-layout .sidebar:after,
#top.mw-article-layout .inner_sidebar:before, #top.mw-article-layout .inner_sidebar:after { display: none !important; }

/* Lesespalte + Typografie */
#top.mw-article-layout .entry-content-wrapper > .av_textblock_section .avia_textblock,
#top.mw-article-layout .entry-content-wrapper .togglecontainer,
#top.mw-article-layout .mw-portfolio-foot { max-width: 820px; }
#top.mw-article-layout .entry-content-wrapper h1,
#top.mw-article-layout .entry-content-wrapper h2,
#top.mw-article-layout .entry-content-wrapper h3 {
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  font-size: 1.55rem !important; line-height: 1.25 !important;
  letter-spacing: -.01em; color: var(--mw-ink) !important;
}
#top.mw-article-layout .entry-content-wrapper p,
#top.mw-article-layout .entry-content-wrapper li { color: var(--mw-ink-soft); line-height: 1.75; }

/* Bild ueber die Textbreite, weiche Ecken, kein Beschnitt */
#top.mw-article-layout .entry-content-wrapper .avia_image {
  border-radius: var(--mw-radius); box-shadow: var(--mw-shadow);
  width: 100% !important; max-height: none !important;
}

/* Die generierten CTA-Buttons im Inhalt entfallen — der Weg fuehrt ueber die Seitenleiste.
   Wichtig: auch die leeren Huellen kollabieren, sonst bleibt ihr Leerraum stehen. Zwischen FAQ
   und Fuss-Passus lagen sonst ~115px aus vier Quellen (FAQ-Rand, unsichtbarer Abstandshalter
   der Pipeline, leere Button-Spalte, Aussenabstand der Fuss-Spalte). */
#top.mw-article-layout .entry-content-wrapper .avia-button-wrap { display: none !important; }
#top.mw-article-layout .entry-content-wrapper .flex_column_table:has(.avia-button-wrap) { display: none !important; }
#top.mw-article-layout .entry-content-wrapper .hr-invisible { height: 0 !important; margin: 0 !important; }
#top.mw-article-layout .entry-content-wrapper .togglecontainer { margin-bottom: 10px !important; }
#top.mw-article-layout .entry-content-wrapper > .flex_column:last-child { margin-top: 14px !important; }

/* Seitenleiste: Menue als ruhige Karte, Schriftgroesse wie das TOC der Sparten */
#top.mw-article-layout .sidebar .widget_nav_menu,
#top.mw-article-layout .sidebar .widget_pages {
  background: var(--mw-paper); border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius); padding: 1.2rem 1.3rem; margin-bottom: 1.3rem;
}
#top.mw-article-layout .sidebar .widget_nav_menu .widgettitle {
  font-family: var(--mw-font-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-brand-bright);
  margin: 0 0 .8rem;
}
#top.mw-article-layout .sidebar .widget_nav_menu li { border: 0 !important; padding: var(--mw-sidebar-menu-gap) 0 !important; background: transparent !important; }
#top.mw-article-layout .sidebar .widget_nav_menu a {
  color: var(--mw-ink-soft) !important; font-size: .7rem !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  line-height: var(--mw-sidebar-menu-lh) !important; text-decoration: none; border: 0 !important;
}
#top.mw-article-layout .sidebar .widget_nav_menu a:hover { color: var(--mw-brand) !important; }
/* aktueller Eintrag dezent: nur fett + blau — Enfold rueckt ihn sonst per left:-51px aus */
#top.mw-article-layout .sidebar .current-menu-item { position: static !important; left: auto !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; }
#top.mw-article-layout .sidebar .current-menu-item > a {
  font-weight: 700 !important; color: var(--mw-brand) !important; background: transparent !important;
}

/* Beratungs-Karte in der Portfolio-Seitenleiste (aus functions.php) */
.mw-side-cta--portfolio { margin-top: .2rem; }
/* Farbkonzept: Gold = Termin, Weiss = Seite */
.mw-side-cta__btn {
  display: block; text-align: center; margin-top: .7rem; padding: .7rem 1rem;
  /* lange Komposita wie "Berufsunfaehigkeitsversicherung" duerfen umbrechen */
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; word-break: break-word;
  background: #fff; color: var(--mw-brand-deep) !important; border-radius: var(--mw-radius);
  font-weight: 650; font-size: .95rem; line-height: 1.35; text-decoration: none !important;
  transition: background .2s var(--mw-ease);
}
.mw-side-cta__btn:hover { background: #eef4fb; }

/* Fuss-Passus unter dem Portfolio */
.mw-portfolio-foot { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--mw-line); }
.mw-portfolio-foot p { margin: 0 0 .5rem; }
.mw-portfolio-foot__hinweis { font-style: italic; color: var(--mw-ink-soft); font-size: .95rem; }
.mw-portfolio-foot__regio { font-weight: 600; color: var(--mw-brand); font-size: .95rem; }
.mw-portfolio-foot__regio a { color: var(--mw-brand) !important; }
.mw-portfolio-foot__ki { font-size: .8rem; color: #9aa7b4; }

/* FAQ im Portfolio: gleiche Optik wie auf den Sparten */
#top.mw-article-layout .togglecontainer .av_toggle_section {
  background: #fff; border: 1px solid var(--mw-line) !important; border-radius: 12px !important;
  margin-bottom: .7rem; overflow: hidden; box-shadow: 0 1px 2px rgba(6,26,44,.04);
}
#top.mw-article-layout .togglecontainer .toggler {
  border: 0 !important; background: #fff !important;
  font-family: var(--mw-font-display) !important; font-weight: 600 !important;
  font-size: 1.32rem !important; color: var(--mw-ink) !important;
  padding: 1.05rem 1.3rem 1.05rem 2.9rem !important;
}
#top.mw-article-layout .togglecontainer .toggle_wrap .toggle_content {
  padding: .2rem 1.3rem 1.15rem 2.9rem !important; color: var(--mw-ink-soft);
}

/* ============================================================
   Ratgeber-Uebersicht (Blog-Index/Archiv) als Karten-Raster (ADR-081)
   Enfold rendert "single-small"; hier nur per CSS in Karten ueberfuehrt.
   ============================================================ */
#top.blog .container_wrap .content.av-main-index,
#top.archive .container_wrap .content.av-main-index,
#top.category .container_wrap .content.av-main-index {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
  max-width: 1200px; margin: 0 auto; float: none !important; width: 100% !important;
}
#top.blog .content.av-main-index > .post-entry,
#top.archive .content.av-main-index > .post-entry,
#top.category .content.av-main-index > .post-entry {
  background: #fff; border: 1px solid var(--mw-line); border-radius: var(--mw-radius);
  overflow: hidden; box-shadow: var(--mw-shadow); margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
  transition: transform .25s var(--mw-ease), box-shadow .25s var(--mw-ease);
}
#top.blog .content.av-main-index > .post-entry:hover,
#top.archive .content.av-main-index > .post-entry:hover,
#top.category .content.av-main-index > .post-entry:hover {
  transform: translateY(-4px); box-shadow: var(--mw-shadow-lg);
}
/* Vorschaubild gross und randlos oben */
#top.blog .post-entry .blog-meta, #top.archive .post-entry .blog-meta, #top.category .post-entry .blog-meta {
  float: none !important; width: 100% !important; margin: 0 !important;
}
#top.blog .post-entry .small-preview, #top.archive .post-entry .small-preview, #top.category .post-entry .small-preview {
  width: 100% !important; height: 190px !important; margin: 0 !important; border-radius: 0 !important;
}
#top.blog .post-entry .small-preview img, #top.archive .post-entry .small-preview img,
#top.category .post-entry .small-preview img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* Textbereich */
#top.blog .post-entry .entry-content-wrapper, #top.archive .post-entry .entry-content-wrapper,
#top.category .post-entry .entry-content-wrapper {
  padding: 1.1rem 1.2rem 1.3rem !important; margin: 0 !important; text-align: left !important;
  display: flex; flex-direction: column; flex: 1;
}
#top.blog .post-entry .entry-title, #top.blog .post-entry h2,
#top.archive .post-entry .entry-title, #top.category .post-entry .entry-title {
  font-family: var(--mw-font-display) !important; font-size: 1.12rem !important;
  line-height: 1.3 !important; margin: 0 0 .5rem !important; text-align: left !important;
}
#top.blog .post-entry .entry-content-header, #top.archive .post-entry .entry-content-header,
#top.category .post-entry .entry-content-header { margin: 0 0 .4rem !important; }
#top.blog .post-entry .blog-categories, #top.archive .post-entry .blog-categories,
#top.category .post-entry .blog-categories {
  font-size: .72rem !important; letter-spacing: .1em; margin: .15rem 0 0 !important; display: block;
}
/* Teaser auf 4 Zeilen begrenzen -> gleich hohe Karten */
#top.blog .post-entry .entry-content, #top.archive .post-entry .entry-content,
#top.category .post-entry .entry-content {
  font-size: .92rem; color: var(--mw-ink-soft); text-align: left !important;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0 0 .2rem !important;
}
#top.blog .post-entry .read-more-link, #top.archive .post-entry .read-more-link { margin-top: .5rem; font-size: .85rem; }
#top.blog .post-entry .read-more-link a { color: var(--mw-brand) !important; }
#top.blog .post-entry .post-meta-infos, #top.archive .post-entry .post-meta-infos,
#top.category .post-entry .post-meta-infos {
  margin-top: auto; padding-top: .8rem; font-size: .78rem; text-align: left !important;
}
#top.blog .post-entry .av-vertical-delimiter, #top.blog .post-entry .post_delimiter,
#top.archive .post-entry .post_delimiter, #top.category .post-entry .post_delimiter { display: none !important; }
@media (max-width: 1100px){
  #top.blog .container_wrap .content.av-main-index,
  #top.archive .container_wrap .content.av-main-index,
  #top.category .container_wrap .content.av-main-index { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px){
  #top.blog .container_wrap .content.av-main-index,
  #top.archive .container_wrap .content.av-main-index,
  #top.category .container_wrap .content.av-main-index { grid-template-columns: 1fr; }
}

/* --- Ratgeber-Uebersicht: Feinschliff nach Review --- */
/* Titelleiste: siehe den site-weiten Block „Titelleiste entfällt" weiter oben. */
/* Schriftgroessen wie die "Das koennte Dich auch interessieren"-Karten:
   Ueberschrift 1.15rem, Teaser 0.75rem (statt 0.92rem) */
#top.blog .post-entry .entry-title, #top.blog .post-entry h2,
#top.archive .post-entry .entry-title, #top.category .post-entry .entry-title {
  font-size: 1.15rem !important; line-height: 1.14 !important;
}
#top.blog .post-entry .entry-content, #top.archive .post-entry .entry-content,
#top.category .post-entry .entry-content {
  font-size: .75rem !important; line-height: 1.65 !important; -webkit-line-clamp: 5;
}
#top.blog .post-entry .blog-categories, #top.archive .post-entry .blog-categories,
#top.category .post-entry .blog-categories { font-size: .68rem !important; }
/* Kommentar-Angabe entfaellt (Kommentare sind deaktiviert) */
#top.blog .post-entry .comment-container,
#top.archive .post-entry .comment-container,
#top.category .post-entry .comment-container { display: none !important; }
#top.blog .post-entry .post-meta-infos .text-sep:first-of-type,
#top.archive .post-entry .post-meta-infos .text-sep:first-of-type { display: none !important; }
#top.blog .post-entry .post-meta-infos, #top.archive .post-entry .post-meta-infos,
#top.category .post-entry .post-meta-infos { font-size: .72rem !important; }

/* --- Artikel-Seitenleiste (Story C2) --- */
/* Roh-Kategorienliste (45 Eintraege inkl. "Allgemein"/Karteileichen) ersetzt durch
   die kuratierte Themen-Liste aus functions.php */
#top.single-post .sidebar .widget_categories { display: none !important; }
#top.single-post .sidebar .mw-themen-widget {
  background: var(--mw-paper); border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius); padding: 1.2rem 1.3rem; margin-bottom: 1.3rem;
}
#top.single-post .mw-themen-widget .widgettitle {
  font-family: var(--mw-font-sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mw-brand-bright);
  margin: 0 0 .8rem; padding: 0; border: 0;
}
/* Enfold floatet Widget-Listen (float:left) -> die Box fiel zusammen und die
   Themen liefen hinter die Beratungs-Karte. Float aufheben + Box umschliessen. */
#top.single-post .mw-themen-widget { display: flow-root; }
#top.single-post .mw-themen-widget ul {
  margin: 0 !important; list-style: none !important; float: none !important; width: 100% !important;
}
#top.single-post .mw-themen-widget li { margin: 0 !important; padding: .18rem 0 !important; border: 0 !important; }
#top.single-post .mw-themen-widget a {
  color: var(--mw-ink-soft) !important; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.45; text-decoration: none; border: 0 !important;
}
#top.single-post .mw-themen-widget a:hover { color: var(--mw-brand) !important; }
#top.single-post .mw-themen-widget .mw-aktuell a { font-weight: 700; color: var(--mw-brand) !important; }
/* Teilen-Leiste dezenter */
#top.single-post .av-share-box { margin-top: 1.4rem; }
#top.single-post .av-share-box .av-share-link-description { font-size: .8rem; color: var(--mw-ink-soft); }

/* --- "Das koennte Dich auch interessieren" unter Artikeln (Story C3) --- */
#top.single-post .related_posts { border-top: 1px solid var(--mw-line); padding-top: 1.4rem; margin-top: 1.6rem; }
#top.single-post .related_posts > h3, #top.single-post .related_posts .related_title {
  font-family: var(--mw-font-display) !important; font-size: 1.32rem !important;
  font-weight: 600 !important; color: var(--mw-ink) !important; margin: 0 0 1rem !important;
}
#top.single-post .related_posts .related_column {
  background: #fff; border: 1px solid var(--mw-line) !important; border-radius: var(--mw-radius);
  box-shadow: var(--mw-shadow); padding: .7rem !important; margin-bottom: .9rem !important;
  transition: transform .2s var(--mw-ease), box-shadow .2s var(--mw-ease);
}
#top.single-post .related_posts .related_column:hover { transform: translateY(-3px); box-shadow: var(--mw-shadow-lg); }
/* runde Mini-Bilder -> quadratisch mit weichen Ecken, passend zum Kartenbild */
#top.single-post .related_posts .related-format-icon,
#top.single-post .related_posts .related_image,
#top.single-post .related_posts img {
  border-radius: 10px !important; width: 64px !important; height: 64px !important; object-fit: cover;
}
#top.single-post .related_posts .related_title a, #top.single-post .related_posts a strong {
  font-family: var(--mw-font-display); font-size: .95rem; line-height: 1.3; color: var(--mw-ink) !important;
}
#top.single-post .related_posts a:hover strong { color: var(--mw-brand) !important; }
/* Teilen-Leiste ruhiger einbinden */
#top.single-post .av-share-box > h5, #top.single-post .av-share-box .av-share-link-description {
  font-family: var(--mw-font-sans); font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mw-ink-soft);
}

/* ── Seitenleisten-Menues global: kompakter Zeilenabstand ──────────────────
   Gilt fuer ALLE Sidebar-Menues, nicht nur das Artikel-/Portfolio-Layout
   (das seine eigene Karten-Optik oben mitbringt und dieselben Tokens nutzt).
   Anlass: das KFZ-Info-Menue mit 100+ Punkten schob die Beratungs-Karte
   weit unter den sichtbaren Bereich. */
#top .sidebar .widget_nav_menu li,
#top .sidebar .widget_pages li {
  padding-top: var(--mw-sidebar-menu-gap) !important;
  padding-bottom: var(--mw-sidebar-menu-gap) !important;
}
#top .sidebar .widget_nav_menu a,
#top .sidebar .widget_pages a {
  line-height: var(--mw-sidebar-menu-lh) !important;
}

/* ── Einzelne Kachel im Kachelblock (Seitentypen 2a/2b) ──────────────────
   Solange es zu einer Sparte erst eine Zielgruppenseite gibt, steht im
   Dreier-Raster nur eine Karte — die wirkt verloren. Dann quer ueber die
   Lesebreite statt als schmale Spalte. Greift nur, wenn die Spalte wirklich
   allein steht und eine Kachel enthaelt (die Artikel-Seitenleiste ist
   ebenfalls av_one_third, hat aber keine Kachel). */
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) {
  width: 100% !important;
  margin-left: 0 !important;
}
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) .snippet-link {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.6rem;
  align-content: center;
  border: 1px solid var(--mw-line);
  border-radius: var(--mw-radius);
  background: #fff;
  padding: 1rem 1.4rem 1rem 1rem;
  box-shadow: var(--mw-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) .snippet-link:hover {
  box-shadow: var(--mw-shadow-lg);
  transform: translateY(-2px);
}
/* Bild links ueber beide Zeilen, Titel und Text rechts daneben — sonst rutscht
   der Beschreibungstext unter das Bild (die Kachel ist eine flache Link-Liste). */
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) .snippet-image-wrapper {
  grid-column: 1;
  grid-row: 1 / -1;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
}
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0;
}
#top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: .45rem 0 0;
}
@media only screen and (max-width: 767px) {
  #top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) .snippet-link {
    grid-template-columns: 1fr;
  }
  #top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) .snippet-image-wrapper,
  #top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) h3,
  #top .flex_column.av_one_third:first-of-type:last-of-type:has(.custom-snippet) p {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── Portfolio: H1 sieht aus wie die bisherige H2 (ADR-089) ──────────────
   Die erste Überschrift ist jetzt eine H1 — strukturell, nicht optisch:
   ohne diese Regel würde sie als Standard-H1 deutlich größer erscheinen. */
#top.single-portfolio .avia_textblock h1 {
  font-size: 1.55rem;        /* = 24,8px, exakt die bisherige H2-Groesse */
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 10px;
}

/* ---------- Themen-Hierarchie: [mw_kinderkacheln] / [mw_geschwister] (ADR-096) ----
   Die Karten selbst kommen aus .custom-snippet (siehe oben) — hier steht nur das
   Raster. Anders als der ALB-Kachelblock ist die Spaltenzahl nicht fest: ein Hub
   mit sieben Themen fuellt die Reihen auf, statt bei drei zu brechen. */
#top .mw-kachelraster { margin: 2.8rem 0 0; }
#top .mw-kachelraster__titel {
  font-family: var(--mw-font-display) !important;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem) !important;
  line-height: 1.15; margin: 0 0 1.4rem !important;
}
#top .mw-kachelraster__raster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch;
}
@media (max-width: 900px) { #top .mw-kachelraster__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #top .mw-kachelraster__raster { grid-template-columns: 1fr; } }

/* ============================================================
   Autorenbox — fachliche Freigabe unter Beiträgen (ADR-105)
   Macht die redaktionelle Verantwortung sichtbar (Art. 50 KI-VO)
   und stärkt zugleich das E-E-A-T-Signal. Bewusst leise: eine
   Signatur, kein Badge.
   ============================================================ */
#top .mw-autorenbox {
  display: flex; align-items: center; gap: .9rem;
  margin: 2rem 0 0 !important;
  padding: .85rem 1.1rem;
  background: var(--mw-paper);
  border: 1px solid var(--mw-line);
  border-left: 3px solid var(--mw-brand);
  border-radius: var(--mw-radius);
}
#top .mw-autorenbox__bild {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: var(--mw-radius-pill); object-fit: cover;
  border: 1px solid var(--mw-line);
}
#top .mw-autorenbox__text { min-width: 0; }
#top .mw-autorenbox p { margin: 0 !important; }
#top .mw-autorenbox__name {
  font-family: var(--mw-font-display) !important;
  font-size: 1rem !important; font-weight: 600 !important;
  line-height: 1.3 !important; color: var(--mw-ink) !important;
}
#top .mw-autorenbox__rolle { font-weight: 400; color: var(--mw-ink-soft); }
#top .mw-autorenbox__rolle::before { content: " · "; }
#top .mw-autorenbox__meta {
  margin-top: .2rem !important;
  font-size: .82rem !important; line-height: 1.45 !important;
  color: var(--mw-ink-soft) !important;
}
#top .mw-autorenbox__meta a { color: var(--mw-brand-bright) !important; }

/* Lesespalte: gleiche Breite wie Text und Fuß-Passus (siehe .mw-portfolio-foot) */
#top.mw-article-layout .mw-autorenbox { max-width: 820px; }

@media (max-width: 560px) {
  #top .mw-autorenbox { align-items: flex-start; gap: .7rem; padding: .75rem .9rem; }
  #top .mw-autorenbox__bild { width: 44px; height: 44px; }
  /* Rolle bricht in eine eigene Zeile — der Trennpunkt entfällt dabei */
  #top .mw-autorenbox__rolle { display: block; }
  #top .mw-autorenbox__rolle::before { content: none; }
}

/* ---------------------------------------------------------------------------
   Kampagnen-Landingpages (ADR-104)

   Die Seite traegt ihre Rolle im Meta mw_seitentyp; functions.php setzt daraus
   die Body-Klasse. Hier faellt alles weg, was von der einen Handlung ablenkt:
   Hauptmenue, Burger, Suche, Sekundaer-Leiste. Logo und Telefonnummer bleiben.

   Bewusst nur Ausblenden statt Header-Umbau — Enfold rendert den Header selbst,
   ein Fork von header.php braeche beim naechsten Theme-Update.
--------------------------------------------------------------------------- */
.mw-landingpage #top #header .av-main-nav-wrap,
.mw-landingpage #top #header .av-burger-menu-main,
.mw-landingpage #top #menu-item-search {
  display: none !important;
}

/* Die Meta-Leiste bleibt — dort steht die Telefonnummer (.phone-info), und die
   ist auf einer Landingpage die zweite Handlung neben dem Buchungs-Button.
   Weg muss nur, was daneben ablenkt. */
.mw-landingpage #top #header_meta .av-social-link,
.mw-landingpage #top #header_meta .sub_menu > ul,
.mw-landingpage #top #header_meta nav {
  display: none !important;
}

/* Ohne Menue braucht der Header seine Mindesthoehe nicht mehr — sonst steht das
   Logo in einem auffaellig hohen, leeren Balken. */
.mw-landingpage #top #header_main .container {
  min-height: 0;
}