/*
 * Eigene, byte-identitaets-neutrale Layout-Overrides.
 * Greifen NICHT in das gespiegelte Markup ein, sondern korrigieren nur per CSS
 * gezielt einzelne Seiten — so bleibt die Korrektur an einer Stelle auffindbar.
 * Alle Regeln eng gescoped (Seiten-ID / #tm-main), damit Header/Footer
 * (Chrome) und andere Seiten unberuehrt bleiben.
 */

/* ==========================================================================
 * Kontaktseite (page-id-256) — Mobil einheitlich linksbuendig
 * Desktop bleibt 2-spaltig/rechtsbuendig; unterhalb des UIkit-@m-Breakpoints
 * (960px) wirkte der Mix aus links-/rechts-Ausrichtung unruhig. Auf Mobil
 * (1 Spalte) alles nach links.
 * ==========================================================================*/
@media (max-width: 959px) {
  /* Adressspalte "Naturhaus Lanz GmbH": rechtsbuendige Ueberschrift + Links
     nach links ziehen (UIkits .uk-text-right setzt !important). */
  .page-id-256 #page\#5 .uk-text-right {
    text-align: left !important;
  }
}

/* ==========================================================================
 * Papier-Textur feiner (39 Seiten mit .bg-paper, 11 Referenz-Sektionen)
 *
 * Problem: custom-css-js/13.css setzt .bg-paper auf `background-size: 170% auto`
 * und .bg-paper-half auf `170% 50%`. Die Texturdatei heisst zwar
 * paper-bg-2470-47.jpg, ist aber nur 1600x584 gross. 170% der Viewportbreite
 * heisst also: auf 1280px wird die Kachel 2176px breit (1,36x hochskaliert),
 * auf einem 2560px-Monitor 4352px (2,7x) — daher das grobe, weiche, gezerrte
 * Korn. Bei .bg-paper-half kommt hinzu, dass `170% 50%` die beiden Achsen
 * unabhaengig skaliert und das Seitenverhaeltnis damit sichtbar verzerrt.
 *
 * Fix: feste Kachelbreite statt Prozent. Damit ist das Korn auf jedem Monitor
 * gleich fein und (weil unter Nativgroesse) immer scharf statt interpoliert.
 * Die Textur ist dafuer gut geeignet: gemessener Helligkeitssprung an den
 * Kachelnaehten 0,84/255 horizontal und 0,46/255 vertikal — unsichtbar.
 *
 * Feinheit zentral ueber --nl-paper-tile justierbar: kleinerer Wert = feineres
 * Korn (Nativgroesse waere 1600px, 800px entspricht 0,5x).
 * ==========================================================================*/
:root {
  --nl-paper-tile: 800px;
}

/* Flaechen-Variante: kachelt bereits (13.css setzt kein background-repeat),
   deshalb aendert sich hier ausschliesslich die Kornfeinheit — kein Layout. */
.bg-paper {
  background-size: var(--nl-paper-tile) auto !important;
  background-repeat: repeat !important;
}

/* Streifen-Varianten: standen auf no-repeat, wodurch die Kachel selbst die
   sichtbare Flaeche war. Mit repeat-x bleibt der Streifen unten ueber die
   volle Breite, die Hoehe richtet sich jetzt aber nach der Kachel
   (--nl-paper-tile x 0,365) statt nach der Viewportbreite. */
.bg-paper-half,
[class*="uk-background-width-1-1"][data-src*="paper-bg"] {
  background-size: var(--nl-paper-tile) auto !important;
  background-repeat: repeat-x !important;
  background-position: center bottom !important;
}

/* !important ist hier nicht Bequemlichkeit: die YOOtheme-Builder-Styles geben
   pro Seite `#page\#N .bg-paper{}` aus (Spezifitaet 1,1,0). Aktuell sind diese
   Regeln leer, wuerden eine reine Klassenregel aber jederzeit ueberstimmen,
   sobald sie Inhalt bekommen. */

/* ==========================================================================
 * Side-Menü, Panel "Unterstützung" (41 Seiten)
 *
 * Das Plugin side-menu-pro stapelt den Inhalt als vier gleichwertige <p> ohne
 * jede Hierarchie: Portrait, Frage, Name, Kontaktdaten sehen identisch aus.
 * Hier bekommt der Block eine Leserichtung — Portrait, Anrede, Name als Person,
 * Kontakt als abgesetzter Handlungsblock.
 *
 * Die klickbaren tel:/mailto:-Links stehen im Markup (in den Seiten-JSONs),
 * die Gestaltung liegt hier — eine Stelle statt 41.
 *
 * Spezifitaet: `.sm-extra-text *` im Plugin-CSS setzt color (0,1,0). Alle
 * Regeln unten liegen mit Klasse + Element darueber, deshalb kein !important.
 * ==========================================================================*/
.sm-extra-text {
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 22px;
  line-height: 1.5;
}

/* Portrait: aus dem harten Quadrat ein Squircle mit feinem Lichtrand.
   Groesser als die 100px aus dem Markup — bei 350px Panelbreite lag rechts
   ungenutzter Raum. */
.sm-extra-text .nl-sm-photo {
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

/* Anrede tritt zurueck, damit Name und Kontakt vorne liegen. */
.sm-extra-text p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}

/* Der Name ist die Person, nicht Fliesstext. */
.sm-extra-text .nl-sm-name {
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-top: 12px;
}

/* Kontakt als eigener Handlungsblock, optisch abgesetzt. */
.sm-extra-text .nl-sm-contact {
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 7px;
  justify-items: start;
}
/* <br> im geerbten Markup wuerde im Grid eine Leerzeile erzeugen. */
.sm-extra-text .nl-sm-contact br {
  display: none;
}

.sm-extra-text a.nl-sm-tel,
.sm-extra-text a.nl-sm-mail {
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  border-bottom: 1px solid rgba(219, 152, 0, 0.55);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* Ziffern auf gleiche Laufweite — Telefonnummern lesen sich sonst unruhig. */
.sm-extra-text a.nl-sm-tel {
  font-variant-numeric: tabular-nums;
}
.sm-extra-text a.nl-sm-tel:hover,
.sm-extra-text a.nl-sm-mail:hover {
  color: #f0b52a;
  border-bottom-color: #f0b52a;
}
/* Fokusring war komplett abwesend — Tastaturbedienung braucht ihn. */
.sm-extra-text a.nl-sm-tel:focus-visible,
.sm-extra-text a.nl-sm-mail:focus-visible {
  outline: 2px solid #f0b52a;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
 * Referenzen-Slider: Ortsüberschrift auf Mobil sichtbar machen
 *
 * Die <h2> je Slide (Au, Gummersbach, …) ist im Markup und im Layout vorhanden
 * — sie belegt gemessen 76x44px direkt über dem Beschreibungstext — wird auf
 * schmalen Viewports aber nicht lesbar dargestellt. Auf Desktop liegt der Text
 * auf dem Slide-Foto, auf Mobil steht er auf weißem Grund; die Textfarbe kommt
 * dort aus UIkits uk-inverse-*-Klassen, die die Slideshow beim Initialisieren
 * je nach Bildhelligkeit selbst setzt und damit hell werden kann.
 *
 * Deshalb hier eine explizite Farbe statt Verlass auf den Inverse-Modus, dazu
 * linksbündig wie der restliche Slide-Inhalt (die Rechtsbündigkeit stammt aus
 * der Desktop-Ansicht, wo die Überschrift am Bildrand sitzt).
 * ==========================================================================*/
@media (max-width: 990px) {
  /* Die Theme-Regel `#slider-referenzen .el-content h2` nutzt dieselbe
     Spezifitaet UND !important und steht spaeter — deshalb hier zusaetzlich
     .big-border im Selektor, um sie zu ueberstimmen. */
  #slider-referenzen .el-content h2.big-border,
  #slider-referenzen .el-content h2.big-border .headline {
    color: #443135 !important;
    text-align: left !important;
  }
  #slider-referenzen .el-content h2.big-border {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.1;
  }
  /* Der 40px-Einzug stammt aus dem Desktop-Layout und schiebt die Überschrift
     auf Mobil aus der Flucht des Beschreibungstextes. */
  /* 30px statt der 40px aus dem Desktop-Layout: der Beschreibungstext darunter
     sitzt durch das Padding von .custom-container 30px weiter innen, so
     fluchten Überschrift und Text. */
  #slider-referenzen header.right-align-header {
    margin-left: 30px;
  }
}

/* ==========================================================================
 * Bildergalerie "Betriebsgebäude" auf Mobil zweispaltig
 *
 * Das Masonry-Grid steht bis 640px auf uk-child-width-1-1, also einspaltig.
 * Bei hochformatigen Aufnahmen (958x1277) ergibt das eine sehr lange
 * Scrollstrecke. Zweispaltig halbiert sie.
 *
 * Adressiert über das masonry-Attribut, damit ausschliesslich Galerien dieser
 * Bauart betroffen sind und keine anderen uk-child-width-1-1-Raster.
 * ==========================================================================*/
@media (max-width: 639px) {
  .uk-grid[uk-grid*='masonry'].uk-child-width-1-1 > * {
    width: 50%;
  }
}

/* ==========================================================================
 * Broschüren-Teaser im Footer auf Mobil stapeln
 *
 * Bild und Überschrift liegen im selben <p>, der Text umfließt das Bild. Bei
 * 211px Bildbreite in einem 351px-Absatz bleiben der Überschrift nur 84px —
 * "Aktuelle Broschüre" bricht dann mitten im Wortpaar um und die Bildunterkante
 * schneidet den Fließtext.
 *
 * Angesprochen über das <h7> im Absatz: ein Element, das es nur in diesem
 * Teaser gibt (kein gültiges HTML-Tag, stammt aus dem YOOtheme-Export). Damit
 * bleibt garantiert jedes andere Footer-Bild — Logo, Social-Icons, Trustpilot —
 * unberührt.
 * ==========================================================================*/
@media (max-width: 639px) {
  /* Nicht auf volle Breite stapeln: die Datei ist ein 211px-Thumbnail
     (lanz-broschuere-thumbnail-211x…) und wäre hochskaliert unscharf, bei
     Hochformat zudem fast bildschirmfüllend. Stattdessen den Umfluss behalten
     und das Bild so weit verkleinern, dass der Titel einzeilig danebenpasst. */
  footer p:has(> h7) img {
    float: left;
    width: 122px;
    height: auto;
    margin: 0 16px 10px 0;
  }
  footer p:has(> h7) > h7 {
    display: block;
    margin-bottom: 8px;
  }
}

/* ==========================================================================
 * Broschüren-Links: Größenverhältnis geraderücken (alle Viewports)
 *
 * Die Links stehen im Original auf 23px — größer als ihre eigene Überschrift
 * (22,95px) und 26% über dem Fließtext (18,2px). Ein CTA sollte nicht größer
 * sein als die Zeile darüber; zusammen mit dem 55px-Handzeiger und 73px Einzug
 * brach "PDF herunterladen" selbst auf Desktop mit 313px Platz zweizeilig um.
 *
 * Eng auf die Footer-Teaser gescoped: .more gibt es zehnmal im Content, u.a.
 * als "Mehr erfahren" im Referenzen-Slider — das bleibt unverändert.
 * ==========================================================================*/
footer .uk-panel:has(h7) a.more {
  font-size: 19px;
  line-height: 1.4;
  padding-left: 54px;
}
footer .uk-panel:has(h7) a.more::before {
  width: 42px;
  height: 42px;
}
/* Auf Mobil eine Stufe kleiner, damit der Link in der Restbreite neben dem Bild
   (213px) einzeilig bleibt. Muss NACH der Basisregel stehen — gleiche
   Spezifitaet, es entscheidet die Reihenfolge. */
@media (max-width: 639px) {
  footer .uk-panel:has(h7) a.more {
    font-size: 17px;
    padding-left: 46px;
  }
  footer .uk-panel:has(h7) a.more::before {
    width: 36px;
    height: 36px;
  }
}

/* Lightbox-Links der Galerien (`.nl-lightbox-link` im gespiegelten Markup).
   Der Link soll sich nicht wie ein Textlink verhalten, aber erkennbar
   anklickbar sein — und Tastaturbedienung braucht einen Fokusring. */
.nl-lightbox-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}
.nl-lightbox-link img {
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.nl-lightbox-link:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}
.nl-lightbox-link:focus-visible {
  outline: 2px solid #db9800;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .nl-lightbox-link img,
  .nl-lightbox-link:hover img {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
 * Ansprechpartner-Block: Buttonleiste an den umgebenden Satz angleichen
 *
 * Die drei Kontakt-Buttons (Telefon / E-Mail / Kontakt) liegen in einem Grid,
 * das text-align:center trägt, während der restliche Blockinhalt — Fliesstext,
 * "Ihr Ansprechpartner", die Kontaktdaten und der Button "Das Schwarzwald
 * Blockhaus" — linksbündig steht. Auf schmalen Viewports fiel dieser Mischsatz
 * auf, weil alles untereinander rutscht.
 *
 * Angesprochen über die tel:-Schaltfläche im Grid: dieses Grid kommt pro Seite
 * genau einmal vor. Bewusst NICHT über `.uk-grid`/`.el-item` verallgemeinert —
 * das sind YOOtheme-Bausteine, die überall im Content vorkommen.
 * ==========================================================================*/
@media (max-width: 959px) {
  /* Der eigentliche Grund war nicht text-align, sondern die Box: der Container
     ist 300px breit in 351px Raum und stand auf margin:auto — also mittig,
     während der restliche Blockinhalt links beginnt. Auto-Rand nur links
     aufheben, damit die Leiste linksbündig andockt. */
  .uk-width-medium:has(a.uk-button[href^='tel:']) {
    margin-left: 0 !important;
  }
  /* Der Button-Text selbst bleibt mittig (so gehört es sich), aber die
     Grid-Spalten sollen nicht zusätzlich zentrieren. */
  .uk-grid:has(> .el-item > a.uk-button[href^='tel:']),
  .uk-grid:has(> .el-item > a.uk-button[href^='tel:']) > .el-item {
    text-align: left;
  }
}

/* ==========================================================================
 * Mobiler Header: Logo und Bauhöhe zurücknehmen
 *
 * Gemessen waren es 127px Headerhöhe mit einem 100px hohen Logo — auf 375px
 * Breite nimmt das rund ein Sechstel des Bildschirms ein, und weil der Header
 * als Overlay über dem Hero liegt, schiebt sich das Logo in den Fließtext.
 * Der Breakpoint folgt uk-hidden@l: bis 1199px ist der Mobil-Header aktiv.
 * ==========================================================================*/
@media (max-width: 1199px) {
  .tm-header-mobile .uk-logo img {
    /* Theme setzt die Höhe per Inline-Attribut und Klassenregel. */
    height: 54px !important;
    width: auto !important;
    /* Das Theme setzt object-fit:cover — bei jeder Abweichung im
       Seitenverhältnis würde der Schriftzug unter dem Signet beschnitten. */
    object-fit: contain !important;
    display: block !important;
    /* Das Theme gibt dem Bild margin-top:6px. Das war die Quelle des Überhangs,
       durch den das Logo an der Balkenkante klebte — nicht die Zeilenhöhe. */
    margin: 0 !important;
  }
  /* line-height:0 nimmt dem <picture> den restlichen Zeilenüberhang, das Padding
     setzt bewusst gleich viel Luft über und unter das Logo. */
  .tm-header-mobile .uk-logo {
    display: flex;
    align-items: center;
    line-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .tm-header-mobile .uk-logo picture {
    display: block;
    line-height: 0;
  }
  /* Die Navbar-Gruppen tragen eine eigene Mindesthöhe (gemessen 127px), die die
     Ersparnis am Logo sonst vollständig auffrisst — sie müssen alle mit. */
  .tm-header-mobile .uk-navbar,
  .tm-header-mobile .uk-navbar-left,
  .tm-header-mobile .uk-navbar-center,
  .tm-header-mobile .uk-navbar-right,
  .tm-header-mobile .uk-navbar-item,
  .tm-header-mobile .uk-navbar-toggle,
  .tm-header-mobile .uk-logo {
    /* 68px, nicht 62: das <picture> um das Logo behält 6px Zeilenkasten, den es
       weder über display noch line-height abgibt. Bei 62px ragte das Logo je 3px
       oben und unten heraus und wirkte abgeschnitten. Der Balken nimmt deshalb
       die Höhe an, die der Inhalt wirklich braucht — statt 127px vorher. */
    min-height: 76px;
    height: auto;
  }
}

/* ==========================================================================
 * Side-Menü: Tablet-Lücke schliessen (768–1090px)
 *
 * Das Plugin injiziert per JS ein <style id="side-menu-js-css"> mit
 * `@media (max-width: 1090px){#side-menu-1{display:none}}`. Der Wert 1090px
 * traf nicht nur Mobil, sondern auch Tablets und kleine Laptops — dort blieb
 * der Schnellzugriff ohne Ersatz weg. Unter 768px übernimmt jetzt
 * src/components/MobileActionBar.astro, darüber soll das Side-Menü sichtbar sein.
 *
 * Der Selektor braucht ID + Klasse (1,1,0), weil die Plugin-Regel mit reiner ID
 * (1,0,0) arbeitet und per JS NACH dieser Datei eingefügt wird — mit gleicher
 * Spezifitaet würde sie sonst gewinnen. Deshalb kein !important nötig.
 * ==========================================================================*/
@media (min-width: 768px) {
  #side-menu-1.side-menu {
    display: block;
  }
}

/* ==========================================================================
 * Footer-Schlusszeile: Rechtslinks + Partner-Logo auf eine Zeile
 *
 * Das gespiegelte Markup ist ein UIkit-Grid aus drei Spalten: eine leere,
 * dann die Rechtslinks (#footer#6), dann der Partner-Link (#footer#7). Die
 * Breitenklasse `uk-width-1-3@m` greift erst ab 960px — darunter sind alle drei
 * Spalten 100% breit und stapeln, weshalb das Logo unter den Links landete.
 *
 * Die Spalten werden hier auf Inhaltsbreite gesetzt, statt das Gutter-System
 * anzutasten: das padding-left der Grid-Kinder bleibt als Abstand erhalten.
 * Angesprochen über :has(), damit kein zusaetzliches Markup nötig ist — die
 * anderen Footer-Grids bleiben dadurch unberührt.
 * ==========================================================================*/
@media (max-width: 959px) {
  .uk-grid:has(> * > #footer\#7) {
    align-items: center;
    justify-content: center;
    /* UIkits Gutter (negatives margin-left am Container, padding-left an den
       Kindern) geht mit justify-content:center nicht auf — die linke Boxkante
       landete 2px ausserhalb des Viewports. Beides neutralisieren und den
       Abstand stattdessen als gap führen, dann zentriert es exakt. */
    margin-left: 0;
    gap: 4px 26px;
  }
  /* Spalten schrumpfen auf ihren Inhalt, statt je 100% zu belegen. */
  .uk-grid:has(> * > #footer\#7) > * {
    width: auto;
    flex: 0 1 auto;
    padding-left: 0;
  }
  /* Leere Platzhalterspalte des Builders entfernen. */
  .uk-grid:has(> * > #footer\#7) > *:has(> div:empty) {
    display: none;
  }
  /* uk-grid-margin setzt beim Umbruch einen Zeilenabstand, der die Elemente
     gegeneinander versetzen würde. */
  .uk-grid:has(> * > #footer\#7) > .uk-grid-margin {
    margin-top: 0;
  }
  /* Die Rechtslinks liegen als <ul> mit inline-block-<li> vor und brauchen
     keinen Blockabstand mehr, sobald sie Teil der Zeile sind. */
  .uk-grid:has(> * > #footer\#7) #footer\#6,
  .uk-grid:has(> * > #footer\#7) #footer\#7 {
    margin-bottom: 0;
  }
  .uk-grid:has(> * > #footer\#7) #footer\#6 ul,
  .uk-grid:has(> * > #footer\#7) #footer\#7 p {
    margin: 0;
  }
}

/* Unter 480px reicht der Platz nicht für Links + Wortmarke (gemessen 327px
 * Bedarf bei 371px nutzbarer Breite). Dann nur das Icon zeigen — der Schriftzug
 * wird visuell versteckt, bleibt für Screenreader aber lesbar, damit der Link
 * seinen zugänglichen Namen behält. */
@media (max-width: 479px) {
  .nhl-partner-link > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
 * Rechtslinks: gleichmässige Abstände
 *
 * Die <li> stehen auf inline-block, wodurch Markup-Whitespace als Wortabstand
 * mitzählt. Hinter dem Impressum-Link stehen drei Leerzeichen — gemessen 19,7px
 * Lücke zu "Datenschutz" gegenüber 4,9px zwischen "Datenschutz" und "Cookies".
 * Als Flex-Container werden Whitespace-Textknoten nicht zu Items, die Abstände
 * kommen dann allein aus gap und sind damit gleich.
 * ==========================================================================*/
#footer\#6 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
/* Der Whitespace steht INNERHALB des <li>, hinter dem </a>. Als Block-Container
   rendert das <li> ihn als Inline-Inhalt und wird dadurch breiter. Als
   Flex-Container bleiben Textknoten aus reinem Whitespace ungerendert.
   Achtung: das gilt nur für echten Whitespace. Die eigentliche Ursache der
   ungleichen Abstände waren zwei geschützte Leerzeichen (U+00A0) hinter dem
   Impressum-Link — NBSP ist kein CSS-Whitespace und liess sich nur im Markup
   entfernen, nicht hier. */
#footer\#6 li {
  display: flex;
}

/* ==========================================================================
 * Footer-Inhalt auf Mobil zentrieren
 *
 * Alle Panels stehen auf text-align:start, während das Logo darüber zentriert
 * ist — das erzeugte den unruhigen Mischsatz. Die Panels tragen zudem feste
 * Breiten (uk-width-medium/large/xlarge), die schmaler als die Spalte sind und
 * deshalb links andocken; sie brauchen zusätzlich einen Auto-Rand.
 * ==========================================================================*/
@media (max-width: 959px) {
  footer [id^='footer#'] {
    text-align: center;
  }
  /* Feste Panelbreiten mittig setzen, statt links andocken zu lassen. */
  footer [id^='footer#'].uk-width-medium,
  footer [id^='footer#'].uk-width-large,
  footer [id^='footer#'].uk-width-xlarge,
  footer [id^='footer#'] .uk-width-medium,
  footer [id^='footer#'] .uk-width-large,
  footer [id^='footer#'] .uk-width-xlarge {
    margin-left: auto;
    margin-right: auto;
  }
  /* Die Zierlinie unter den Überschriften ist ein ::after mit fester Breite,
     aber position:absolute und left:-15px — deshalb bleiben auto-Margins hier
     ohne Wirkung (sie loesen sich bei gesetztem left zu 0 auf). Stattdessen left
     ueberschreiben und um die halbe Eigenbreite zurueckschieben.
     !important, weil die Theme-Regel dieselbe Spezifitaetsklasse hat und spaeter
     geladen wird. */
  footer [id^='footer#'] .uk-heading-line::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* Listen und Icon-Reihen mittig ausrichten (Social-Links, Rechtslinks). */
  footer [id^='footer#'] ul {
    justify-content: center;
  }

  /* Social-Icons liegen in einer <figure> ohne footer#N-ID und werden von der
     Regel oben nicht erfasst.
     WICHTIG: hier NICHT auf `footer .uk-panel` oder `footer .uk-text-left`
     verallgemeinern. Das <footer>-Element umschliesst auf mehreren Seiten auch
     seitenspezifischen Inhalt (z.B. der Probewohnen-Text auf
     /blockhaus/probewohnen/ liegt darin) — eine breite Regel zentriert diesen
     Fliesstext mit, waehrend benachbarte Buttons in <main> linksbündig bleiben. */
  footer figure.footer-social {
    text-align: center;
  }

  /* Trustpilot und Google-Rezensionen tragen ebenfalls keine footer#N-ID, aber
     eindeutige Inhalte: das TrustBox-Widget bzw. die aggregateRating-Auszeichnung.
     Darüber lassen sie sich per :has() genau treffen — anders als über
     `.uk-panel`/`.uk-text-left`, was auch Seiteninhalt im <footer> erfasst hätte.
     !important, weil UIkits .uk-text-left selbst mit !important arbeitet. */
  footer .uk-panel:has(.trustpilot-widget),
  footer .uk-panel:has([itemprop='aggregateRating']) {
    text-align: center !important;
  }
  /* Die Bewertungszeile (5.0 + Sterne) ist ein eigener Flex-Container mit
     Inline-Style und richtet sich nicht nach text-align. */
  footer .uk-panel:has([itemprop='aggregateRating']) div[style*='display: flex'] {
    justify-content: center;
  }
  /* Dasselbe gilt für die Zeile "GOOGLE REZENSIONEN": die <h4> trägt inline
     `display:flex; align-items:center` (Icon + Text) und stand deshalb trotz
     text-align:center weiterhin links — Flex-Container richten sich nach
     justify-content, nicht nach text-align. */
  footer .uk-panel:has([itemprop='aggregateRating']) h4 {
    justify-content: center;
  }
  /* Das TrustBox-Widget rendert ein iframe mit fester Breite von 400px in einen
     351px breiten Container — es ragte 70px nach links heraus. Breite deckeln
     und mittig setzen. */
  footer .trustpilot-widget,
  footer .trustpilot-widget iframe {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  footer .trustpilot-widget iframe {
    display: block;
    /* Das TrustBox-Script positioniert das iframe per inline
       `position:relative; left:-70px`, um seine 400px-Standardbreite im
       schmaleren Container auszugleichen. Da die Breite hier auf 100% gedeckelt
       ist, bleibt davon nur ein Versatz nach links übrig. */
    left: 0 !important;
  }
}

/* ==========================================================================
 * Monatsangebot-Kreis im Hero der Startseite (nur dort, ab Breakpoint L)
 *
 * Herkunft: Die Regeln standen in custom-css-js/840.css, die als tote Datei mit
 * LANZASTRO-68 von allen Seiten entfernt wurde — sie hing zu diesem Zeitpunkt an
 * jeder der ~100 Seiten, obwohl der Kreis nur auf der Startseite vorkommt. Hier
 * stehen sie deshalb nicht als Wiederherstellung der Datei, sondern nur mit dem,
 * was das Markup tatsächlich benutzt: `shadow-pulse-big` war schon damals
 * definiert, aber von keiner Regel referenziert, und bleibt draußen.
 *
 * Ohne diese Regeln ist der Kreis kein Kreis — Größe, Farbe und Rundung stecken
 * allein in `.pulse-1`. Das Markup in index.json liefert nur die Hülle und das
 * Ziel-Element, das /assets/nl/monatsangebot.js mit dem Monatstext füllt.
 * ==========================================================================*/
.pulse-wrapper {
  padding: 20px;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(254, 182, 17, 0.2);
  }
  100% {
    box-shadow: 0 0 0 35px rgba(254, 182, 17, 0);
  }
}

.pulse-1 {
  float: left;
  /* Zieht den Kreis aus der vertikalen Mitte der Hero-Zeile nach oben, auf rund
     ein Drittel der Hero-Höhe. Stand ursprünglich als Inline-Style (-220px) im
     Markup; seit der Hero-Inhalt unten verankert ist, braucht es den größeren
     Wert — und dafür keine Sonderregel je Fenstergröße mehr. */
  margin: -390px 0 0;
  width: 250px;
  height: 250px;
  color: #fff;
  text-align: center;
  background: #db9901;
  border-radius: 50%;
  border-color: #db9901;
  animation: shadow-pulse 2s infinite;
}

/* (Das 220px-Extra-Padding, das index.json früher ab 1930px auf die Hero-Zeile
   legte, ist entfallen: Seit der Hero-Inhalt unten verankert ist, schob es den
   Hero nur noch über die Fensterhöhe und damit das Scroll-Symbol aus dem Bild.) */

/* Der Kreis auf die rechte Kante des Burger-Icons ausrichten.
 *
 * Im Markup hängt er im Inhaltsraster (1/5-Spalte), das Burger-Icon dagegen im
 * Header-Raster. Beide laufen unterschiedlich breit, der Kreis wanderte relativ
 * zum Icon deshalb mit der Fensterbreite: bei 1200px stand er 65px rechts über
 * das Icon hinaus, ab 1700px klaffte eine feste Lücke von 140px. Absolut an der
 * Hero-Sektion verankert steht er auf jeder Breite an derselben Kante.
 *
 * Die Rechnung bildet den rechten Rand des Header-Containers nach (max-width
 * 1466px, zentriert, mindestens 95px Rand); die 10px oben drauf sind das
 * Innenpadding des Burger-Buttons — bündig sein soll der Kreis mit den
 * sichtbaren Strichen, nicht mit der unsichtbaren Button-Box.
 *
 * Nebeneffekt, bewusst: Aus dem Fluss genommen bestimmt der Kreis die Höhe der
 * Hero-Zeile nicht mehr mit. */
/* Ab 1024px, weil der Kreis genau dort eingeblendet wird — eine höhere Grenze
   würde ihn im Bereich darunter im alten Fluss stehen lassen (bei 1024px ragte
   er dann rechts aus dem Fenster) und beim Umschalten sichtbar springen. */
@media (min-width: 1024px) {
  body.home .uk-container.uk-position-relative:has(.uk-position-absolute.uk-width-1-1) {
    position: static !important;
  }

  body.home .uk-grid-item-match:has(> .uk-panel > #page\#2) > .uk-panel {
    position: static;
  }

  body.home .pulse-wrapper {
    padding: 0;
  }

  body.home #page\#2 {
    position: absolute;
    right: 90px;
    /* Kreis-Mitte auf rund ein Drittel der Hero-Höhe (125px = halber Kreis).
       Der Mindestwert hält ihn auf flachen Fenstern von der Kopfzeile weg. */
    top: max(calc(34% - 125px), 130px);
    width: 250px !important;
    margin: 0 !important;
  }

  body.home .pulse-1 {
    margin-top: 0 !important;
  }
}

/* Ab 1656px hat der Header-Container seine Maximalbreite erreicht und wird
   zentriert — sein rechter Rand wächst dann mit dem Fenster mit, statt bei
   festen 95px zu bleiben. Von da an folgt der Kreis derselben Rechnung. */
@media (min-width: 1656px) {
  body.home #page\#2 {
    right: calc((100vw - 1466px) / 2 + 3px);
  }
}

/* Das überlappende Zimmerer-Bild im Hero (ab XL sichtbar) soll unten links aus
   dem Hero herausragen, in die Papier-Sektion darunter hineinlaufen und von der
   H1 angeschnitten werden. Im Markup hängt es per `left`/`bottom` an einem
   0 Pixel hohen Hilfs-Panel mitten im Grid — dessen Lage hängt an Grid-Höhe und
   Container-Rand und wandert damit bei jeder Fensterbreite woanders hin. Ab
   ~2000px stand das Bild dadurch mitten in der Fläche statt am Rand.
   Deshalb wird der Bezugspunkt auf die Hero-Sektion selbst umgehängt (die
   beiden `position: relative` dazwischen fallen weg, sie tragen im Hero nichts
   anderes) — dann sind `left`/`bottom` direkte Angaben zur Hero-Kante und
   sitzen auf jeder Breite gleich. `!important` durchgehend, weil UIkits
   Position-Utilities und das Inline-`style` im Markup sonst gewinnen.
   Die Breite wächst mit dem Fenster mit, bleibt aber unter der 1300px-Grenze
   des `srcset`.

   Gilt für alle 15 Seiten mit diesem Hero-Typ (Startseite, /blockhaus/ samt
   Unterseiten, die Regionalseiten, /ueber-uns/, /zimmerei/, /blockhaus-roadmap/)
   — sie tragen im Markup dieselben `left: -100px; bottom: -210px` und hatten
   damit auch dasselbe Problem. Die `:has()`-Selektoren zielen bewusst auf
   `.uk-position-absolute.uk-width-2xlarge`: Auf den Referenz- und Regionalseiten
   ist `uk-width-2xlarge` ohne `uk-position-absolute` der Textblock im Hero, der
   von diesen Regeln nicht angefasst werden darf. */
/* Die Hero-Sektion darf das überstehende Bild nicht abschneiden. Auf allen
   Seiten außer der Startseite trägt sie `uk-section-overflow-hidden` — die
   Geometrie stimmte dort zwar (das Bild ragt 80px in die Folgesektion), zu
   sehen war davon aber nichts. Die Startseite kommt ohne die Klasse und war
   deshalb die einzige, auf der die Überlappung sichtbar wurde. */
.uk-section-default:has([uk-height-viewport].uk-background-cover .uk-position-absolute.uk-width-1-1),
[uk-height-viewport].uk-background-cover:has(.uk-position-absolute.uk-width-1-1) {
  overflow: visible !important;
}

@media (min-width: 1600px) {
  .uk-panel:has(> .uk-position-absolute.uk-width-1-1) {
    position: static;
  }

  .uk-container.uk-position-relative:has(.uk-position-absolute.uk-width-1-1) {
    position: static !important;
  }

  .uk-position-absolute.uk-width-1-1 {
    left: -20px !important;
    bottom: -80px !important;
  }

  .uk-position-absolute.uk-width-1-1 img {
    width: 100%;
    height: auto;
  }

  /* Die Breite wächst mit dem Fenster — und zwar mit beiden Richtungen: Über
     `58vh` wird das Bild auf hohen Fenstern höher und rückt damit weiter nach
     oben. Das ist nötig, weil die Überschrift an der Fenstermitte hängt (Höhe
     des ersten Side-Menü-Icons), das Bild aber an der Hero-Unterkante: Ohne
     die Höhenkopplung klafft zwischen beiden auf hohen Fenstern eine Lücke von
     bis zu 158px, statt dass die Überschrift das Bild anschneidet. */
  .uk-position-absolute.uk-width-1-1.uk-width-2xlarge {
    width: clamp(750px, max(34vw, 58vh), 950px) !important;
  }
}

/* ==========================================================================
 * Hero-Textblock: gleiche Einrückung auf allen Seiten
 *
 * Die geklonten Seiten bauen den Hero in zwei Varianten: die Mehrheit legt um
 * die Textzeile noch einen inneren `uk-container` (Textblock beginnt dadurch
 * bei 243px), die Referenz-Detailseiten, /impressum/ und /datenschutz/ nicht
 * (Textblock beginnt bei 80px, also 163px weiter links). Beides nebeneinander
 * fällt beim Seitenwechsel als Sprung auf.
 *
 * Statt in ~17 JSONs einen Container nachzurüsten, bekommt die Zeile hier
 * dieselbe Breite, die der innere Container hätte. Zwei Selektoren, weil der
 * Container mal in einer `uk-width-1-1`-Hülle steckt (Referenzseiten) und mal
 * direkt in der Hero-Sektion (/impressum/). Das `:not(:has(> .uk-container))`
 * hält die Mehrheitsvariante heraus — dort säße sonst eine zweite Begrenzung
 * um die, die schon da ist. `[uk-height-viewport]` grenzt auf den Hero ein;
 * spätere Sektionen mit Hintergrundbild bleiben unberührt.
 * ==========================================================================*/
@media (min-width: 960px) {
  [uk-height-viewport].uk-background-cover > .uk-width-1-1 > .uk-container > .uk-grid:has(h1),
  [uk-height-viewport].uk-background-cover > .uk-container:not(:has(> .uk-container)) > .uk-grid:has(h1) {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Gleicher Bodenabstand unter der Überschrift. Wo im Hero unter der
     Textzeile noch das überlappende Bild folgt, liefert dessen Zeilenabstand
     40px; wo es fehlt (Referenzseiten, /impressum/, /datenschutz/), sitzt die
     Überschrift sonst 40px tiefer. `:not(:has(+ .uk-grid))` trifft genau die
     Fälle ohne diese Folgezeile. */
  [uk-height-viewport].uk-background-cover .uk-container:not(:has(+ .uk-grid)) > .uk-grid:has(h1) {
    padding-bottom: 40px;
  }
}

/* ==========================================================================
 * Hero-Überschrift auf Höhe des ersten Side-Menü-Icons
 *
 * Bis hierher hing der Hero-Inhalt an der Unterkante — dadurch begann die
 * Überschrift je nach Zeilenzahl woanders, und insgesamt recht tief. Ab dem
 * Breakpoint, ab dem die Icon-Leiste rechts eingeblendet wird (1091px), richtet
 * sie sich jetzt oben aus, und zwar auf der Oberkante des ersten Icons.
 *
 * Die Leiste ist am Fenster zentriert und 430px hoch, ihr erstes Icon beginnt
 * also bei `50vh - 215px` (auf sechs Fenstergrößen exakt nachgemessen). Die
 * zusätzlichen 382px bzw. 342px sind der Vorlauf, den Kopfzeilen-Platzhalter
 * und Container-Abstände oberhalb der Überschrift beisteuern — er springt bei
 * 1650px um 40px, weil dort die Kopfzeile ihre Höhe wechselt.
 *
 * Unterhalb von 1091px gibt es keine Icon-Leiste; dort bleibt es bei der
 * Ausrichtung an der Unterkante.
 * ========================================================================== */
@media (min-width: 1091px) {
  [uk-height-viewport].uk-background-cover {
    align-items: flex-start !important;
    padding-top: calc(50vh - 342px) !important;
  }

  /* Der Vorlauf über der Überschrift steckt in den Seiten-CSS-Blöcken der
     einzelnen Seiten (dort als `#page#0{padding-top:…}`) und würde sich sonst
     auf die Ausrichtung oben draufaddieren. */
  [uk-height-viewport].uk-background-cover .uk-panel:has(> .ce-headline) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (min-width: 1650px) {
  [uk-height-viewport].uk-background-cover {
    padding-top: calc(50vh - 382px) !important;
  }
}

/* (Die Lücke, die zwischen Überschrift und Bild entsteht — beide hängen an
   unterschiedlichen Bezügen, 50vh und 85vh — wird nicht über die Schriftgröße
   geschlossen, sondern über die Höhe des Bildes: siehe dessen `width` weiter
   oben, die mit der Fensterhöhe mitwächst. Die Schrift bleibt damit exakt auf
   dem Wert, den das Theme vorgibt.) */

/* Alle Hero-Sektionen mit demselben Bodenabstand: Ein Teil der Seiten trägt
 * `uk-section-large` (140px), der Rest `uk-section` (70px). Weil der Hero-Inhalt
 * unten verankert ist, schlägt dieser Unterschied direkt auf die Höhe der
 * Überschrift durch — 200px über der Hero-Kante auf den einen, 130px auf den
 * anderen Seiten. Der kleinere Wert gewinnt, weil ein größerer den Hero über
 * die Fensterhöhe schieben und das Scroll-Symbol darunter verdrängen würde. */
[uk-height-viewport].uk-background-cover {
  padding-bottom: 70px !important;
}

/* Der Hero ist ein Flex-Container (`uk-flex uk-flex-bottom`, verankert den
 * Inhalt unten). Auf den Seiten, die zwischen Hero und Inhalts-Container keine
 * `uk-width-1-1`-Hülle haben, wird der Container damit selbst zum Flex-Item und
 * schrumpft auf Inhaltsbreite — die Überschrift rückt dann in die Mitte statt
 * an ihren Platz links. Die volle Breite stellt das wieder her. */
[uk-height-viewport].uk-background-cover > .uk-container {
  width: 100%;
}

/* Der Puls ist eine Endlosanimation direkt neben der H1. Wer
   `prefers-reduced-motion` gesetzt hat, bekommt den Kreis in seiner Ruhelage —
   Größe, Farbe und Text bleiben, nur die Bewegung fällt weg. Das alte 840.css
   hatte diese Rücksicht nicht; sie kostet hier nichts. */
@media (prefers-reduced-motion: reduce) {
  .pulse-1 {
    animation: none;
  }
}