/* =========================================================================
   iwn-spacing.css  —  additive Overrides (KWER)
   -------------------------------------------------------------------------
   Wird in fe_page.html5 NACH <?= $this->stylesheets ?> eingebunden, gewinnt
   also per Source-Order. Fasst die generierten Contao-Stylesheets nicht an.
   ⚠ NICHT zusaetzlich in die externen Layout-Stylesheets (tl_layout.external)
   eintragen — sonst wird die Datei doppelt geladen (einmal ins kombinierte
   Theme-CSS gebacken, einmal per <link>). Einbindung NUR ueber fe_page.html5.
   Beim Aendern dieser Datei IMMER die Cache-Bust-Version im <link> in
   fe_page.html5 hochzaehlen (iwn-spacing.css?v=...zNN), sonst liefert der
   Browser das alte CSS aus dem Cache.

   Breakpoints (kaskadierend per max-width, damit die Stufen sauber greifen):
     >=1300  : Basis (aus den generierten Stylesheets)
     <=1299  : Stufe 1
     <= 991  : Stufe 2
     <= 767  : Stufe 3 (Mobile)

   Inhalt:
     1. Vertikale Section-Rhythmus-Skala (global)
     2. Header & Navigation (Hamburger, Social-Links)
     3. Hero / Startseite (Bild-Dimm, Tel/Mail-Icons, Headline-Mobile, #main-Emblem)
     4. Sub-Header (Unterseiten: Impressum/Datenschutz/404)
     5. #ueber-uns (Produktkarten + Slider-Kreis)
     6. #ventilatoren ("Unsere Werte")
     7. #kontakt
     8. Footer
     9. Diverses (cont-left-below, Scroll-Reveal)
   ========================================================================= */


/* =========================================================================
   1. VERTIKALE SECTION-RHYTHMUS-SKALA (global)
   Desktop-Basiswerte (>=1300px) bleiben unveraendert (Design erhalten); nach
   unten monoton fallend. Reihenfolge der Stufen NICHT vertauschen (kaskade).
   ========================================================================= */

/* ---- Stufe 1 : <= 1299px ------------------------------------------------ */
@media (max-width: 1299px) {
  .pad        { padding-top: 120px; padding-bottom: 120px; }
  .pad-top    { padding-top: 120px; }
  .pad-bot    { padding-bottom: 120px; }
  .pad-sm     { padding-top: 72px;  padding-bottom: 72px; }
  #full-white { padding-bottom: 120px; }
  .footer     { padding-top: 72px;  padding-bottom: 32px; }
}

/* ---- Stufe 2 : <= 991px ------------------------------------------------- */
@media (max-width: 991px) {
  .pad        { padding-top: 96px; padding-bottom: 96px; }
  .pad-top    { padding-top: 96px; }
  .pad-bot    { padding-bottom: 96px; }
  .pad-sm     { padding-top: 56px; padding-bottom: 56px; }
  #full-white { padding-bottom: 96px; }
  .footer     { padding-top: 56px; padding-bottom: 28px; }
}

/* ---- Stufe 3 : <= 767px (Mobile) --------------------------------------- */
@media (max-width: 767px) {
  .pad        { padding-top: 64px; padding-bottom: 64px; }
  .pad-top    { padding-top: 56px; }
  .pad-bot    { padding-bottom: 48px; }
  .pad-sm     { padding-top: 40px; padding-bottom: 40px; }
  #full-white { padding-bottom: 64px; }
  /* bewusst beibehaltenes Design-Detail: letzter weisser Block ohne Bottom-Pad */
  #full-white > .pad-bot { padding-bottom: 0; }
  .footer     { padding-top: 48px; padding-bottom: 24px; }
}


/* =========================================================================
   2. HEADER & NAVIGATION
   ========================================================================= */

/* ---- Mobile Sidepanel: Slide-down-Animation beim Oeffnen --------------- */
/* Das JS setzt beim Hamburger-Klick `.sidePanelOpen` auf einen Vorfahren.
   Original schaltete hart `display:none` -> `inline-block` (nicht animierbar).
   Hier: Panel bleibt IMMER gerendert (fixed, aus dem Fluss -> kein Layout-
   Einfluss, auf Desktop ungenutzt da Hamburger dort display:none), ist im
   Ruhezustand per `translateY(-100%)` ueber den eigenen oberen Rand geschoben
   + unsichtbar; beim Oeffnen slidet es nach unten an seinen Platz und faded ein.
   translateY(-100%) ist relativ zur EIGENEN Hoehe -> positions-/anchor-sicher.
   visibility 0s mit Delay laesst es waehrend des Zu-Slidens sichtbar, danach
   erst inaktiv (Tab-Fokus/AT). Schliessen animiert rueckwaerts mit. */
.sidebar-panel {
  display: block;
  position: fixed;
  z-index: 90;
  width: 100%;
  background-color: #FFFFFF;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              opacity   .35s ease,
              visibility 0s linear .45s;
}
.sidePanelOpen .sidebar-panel {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              opacity   .3s ease,
              visibility 0s;
  -webkit-box-shadow: 0px -10px 17px 8px #000, 0px 0px 25px 10px rgba(0, 0, 0, 0.24);
  box-shadow: 0px -10px 17px 8px #000, 0px 0px 25px 10px rgba(0, 0, 0, 0.24);
}
/* Barrierefrei: ohne Bewegungswunsch nur ein dezentes Ein-/Ausblenden. */
@media (prefers-reduced-motion: reduce) {
  .sidebar-panel,
  .sidePanelOpen .sidebar-panel {
    transform: none;
    transition: opacity .25s ease, visibility 0s;
  }
}

/* ---- Hamburger: gesamte Flaeche klickbar ------------------------------- */
/* Der JS-Klick-Handler haengt an .x (dem Button). Das Padding (blauer Rand)
   lag auf .hamburger -> gehoerte nicht zum Button, war nicht klickbar (nur die
   duennen Striche reagierten). Padding vom Wrapper auf den Button verlagern:
   so ist der Button inkl. Padding die Klickflaeche. Groesse/Position bleiben. */
.hamburger { padding: 0; }
.scr .hamburger { padding-top: 0; }
.hamburger .lines-button.x { padding: 15px 12px 20px; }
.scr .hamburger .lines-button.x { padding-top: 17px; }
/* Hover: Box dunkelt ab; obere & untere Linie laufen EINMAL kurz zur Mitte
   zusammen und wieder auseinander (one-shot, transform unabhaengig vom `top`
   der Linien). Nur im geschlossenen Zustand (:not(.close)) -> X-Animation
   bleibt unberuehrt. (.hamburger hat bereits transition:all .3s.) */
.hamburger:hover { background-color: #006d96; }
@keyframes iwnBurgerConvergeDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.7rem); } }
@keyframes iwnBurgerConvergeUp   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7rem); } }
.lines-button.x:not(.close):hover .lines::after  { animation: iwnBurgerConvergeDown .5s ease-in-out; } /* obere Linie */
.lines-button.x:not(.close):hover .lines::before { animation: iwnBurgerConvergeUp   .5s ease-in-out; } /* untere Linie */

/* ---- Header Telefon/Mail-Links: Hover-Effekt --------------------------- */
/* #header .socialhead a (E-Mail + Telefon, blau). Bisher nur opacity:0.6.
   Stattdessen: Unterstreichung faehrt von links ein + Farbe dunkelt ab. */
.socialhead a          { position: relative; }
.socialhead a:hover    { opacity: 1; color: #006d96; }
.socialhead a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.socialhead a:hover::after { transform: scaleX(1); }


/* =========================================================================
   3. HERO / STARTSEITE
   ========================================================================= */

/* ---- Header-Bilder abdunkeln: filter brightness(0.8) ------------------- */
/* Startseite: Hero-Slider-Bild. `.home-slider img` ist der etablierte Hook
   (das interne Stylesheet dimmt es bereits via opacity:0.85). Die Telefon/
   Mail-Icons liegen ebenfalls im Slider (.header-tel-mail) -> explizit wieder
   auf filter:none, damit NUR das grosse Hero-Bild abgedunkelt wird.
   Impressum/Datenschutz/404 (= .sub-header) tragen den Filter am ::before. */
.home-slider img { filter: brightness(0.8); }
.home-slider .header-tel-mail img { filter: none; }

/* ---- Hero Telefon/Mail-Icons: Link-Klickflaeche auf Icon begrenzen ------ */
/* Die ce_image-Bilder sind via customTpl ce_image_link in <a> gewickelt;
   inline-<a> um ein Block-<figure> -> Klickflaeche auf das Icon begrenzen. */
.header-tel-mail .tel-mail-link { display: inline-block; }
/* Hover: schwarze Strich-Icons (JPG, weisse Kachel) werden dezent grau.
   contrast() statt opacity -> Kachel bleibt deckend (kein Durchscheinen). */
.header-tel-mail .tel-mail-link img { transition: filter .3s ease; }
.header-tel-mail .tel-mail-link:hover img { filter: contrast(0.5); }

/* ---- Hero-Headline auf Mobile: nicht aus dem Bild laufen --------------- */
/* Hero-Headline lief rechts aus dem Bild (width:230px sprengte das lange Wort
   "TUNNELLUEFTUNGSTECHNIK") und kollidierte mit den schwebenden Telefon/Mail-
   Icons (.header-tel-mail, right:0, ~48px Spalte). Box mitwachsen lassen, aber
   Icon-Spalte rechts freihalten + Umbruch erlauben. */
@media (max-width: 767px) {
  .starttext    { width: auto !important; max-width: calc(100vw - 84px); }
  .starttext h1 { overflow-wrap: break-word; }
}

/* ---- #main IWN-Emblem: nicht mehr clippen / nicht hinter Folge-Sektion --- */
/* War CSS-Background auf #main (background-bw.svg, bottom -130px) -> unten an
   der #main-Box geclippt + vom nachfolgenden Schweissbild (spaeteres
   Geschwister) ueberdeckt. Jetzt als ::after-Pseudoelement: ueberlaeuft die
   #main-Box und liegt per z-index VOR der Folge-Sektion. Nur >=1300px, da das
   Original das Bild darunter ohnehin ausblendet (background-size:0).
   NUR auf der Startseite (body.starts) -> Unterseiten (body.unters) bleiben
   ohne #main-Hintergrundbild. */
#main { background-image: none; }
@media (min-width: 1300px) {
  body.starts #main::after {
    content: "";
    position: absolute;
    left: -1.5%;
    bottom: -130px;
    width: 297px;
    height: 252px;
    background: url("../grafiken/background-bw.svg") left bottom no-repeat;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
  }
}


/* =========================================================================
   4. SUB-HEADER (Unterseiten: Impressum/Datenschutz/404)
   ========================================================================= */

/* Startseite hat einen 100vh-Hero-Slider (article 1, nur Home). Unterseiten
   (body.unters) bekommen via fe_page.html5 ein <div.sub-header> mit dem
   Seitentitel. Gleicher Look (Metallic-Bild aus dem Hero, weisse uppercase-
   Headline) aber kuerzer (42vh statt 100vh). Die fixe Nav (#nav, position:fixed)
   ueberlagert das Band oben automatisch -> Titel unten ausgerichtet, damit er
   nicht hinter der Nav sitzt.
   Impressum/Datenschutz: editierbarer Header-ARTIKEL (inColumn=header, cssID
   sub-header) mit einer Headline-CE. 404: gleiches Band ueber's Template
   (.sub-header__inside > h1). Beide Strukturen teilen sich `.sub-header`. */
.sub-header {
  position: relative;
  height: 42vh;
  min-height: 320px;
  background-color: #20242a;
  display: flex;
  align-items: flex-end;
}
/* Bild liegt im ::before, damit filter:brightness(0.8) NUR das Bild abdunkelt
   und nicht den weissen Titel (filter auf .sub-header wuerde die Kinder mit
   erfassen). Absolut positioniert -> kein Flex-Item, Titel-Ausrichtung bleibt. */
.sub-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../bilder/slider-header/3d-view-camera-shutter.jpg") center center / cover no-repeat;
  filter: brightness(0.8);
  z-index: 0;
}
/* Titel-Linkskante EXAKT wie der Seiteninhalt: #container nutzt prozentuale
   Seiten-Margins, die je (verworrenem) Theme-Breakpoint wechseln:
   10% >=1300 | 5% 992-1299 | 10% 768-991 | 5% <=767. Das Band ist auf jeder
   Breite vollbreit (left:0), also spiegeln dieselben %-Werte als padding die
   Ausrichtung 1:1 (links & rechts). Direktes Kind = Artikel-CE (.ce_text) bzw.
   Template (.sub-header__inside). */
.sub-header > * {
  position: relative;   /* ueber dem ::before-Bild */
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10% 48px;
}
@media (max-width: 1299px) { .sub-header > * { padding-left: 5%;  padding-right: 5%;  } }
@media (max-width: 991px)  { .sub-header > * { padding-left: 10%; padding-right: 10%; } }
@media (max-width: 767px)  {
  .sub-header { height: 32vh; min-height: 240px; }
  .sub-header > * { padding-left: 5%; padding-right: 5%; padding-bottom: 32px; }
}
.sub-header :is(h1, h2, p) {
  margin: 0;
  color: #fff;
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
}


/* =========================================================================
   5. #ueber-uns  (Produktkarten + Slider-Kreis)
   ========================================================================= */

/* ---- Sektions-Ueberschrift "UNSERE PRODUKTE" --------------------------- */
/* Text-CE (cssID prod-head) oben in Artikel 322, vor dem .grid1. Kicker (h4)
   "IWN METALL" + Headline (h2) "UNSERE PRODUKTE", zentriert + blau. Der
   .grid1-Toppadding wandert ueber die Ueberschrift (sonst doppelter Abstand). */
.prod-head            { text-align: center; padding-top: 100px; }
.prod-head h4,
.prod-head h2         { color: #0082b2; }
.grid1                { padding-top: 0; }

/* ---- Karten-Headline: lange Woerter umbrechen -------------------------- */
/* z.B. "Brandschutzabsperrklappen" (25 Zeichen) sprengte mobil die schmale
   Spalte ueber den Viewport hinaus. break-word bricht nur wenn noetig (Desktop
   unveraendert); hyphens:auto trennt sauber an Silben (html lang=de). */
.headl-komp h3 { overflow-wrap: break-word; hyphens: auto; }

/* ---- Technische-Daten-Tabellen auf Mobile: Rinne + nicht ueberlaufen ---- */
/* Die 2-spaltigen Datentabellen (Kompakt 100/200): Label-Zelle (.col_first,
   links) / Wert-Zelle (.col_last, rechtsbuendig). Probleme auf schmalen Handys:
   (1) keine Rinne -> lange Labels klebten am Wert ("TEMPERATURFESTIGKEIT400°C").
   (2) table-layout:auto dehnt die Tabelle auf die BEVORZUGTE Inhaltsbreite
       (~359px) und laeuft ueber die schmale Spalte hinaus -> Text ragt rechts
       raus. Das lange Label-Wort "TEMPERATURFESTIGKEIT" (unbrechbar) treibt die
       min-content-Breite hoch.
   Fix: `width:100%` zwingt die Tabelle in den Container; Schrift leicht
   verkleinern (0.8em), damit Labels einzeilig bleiben UND alles in die Spalte
   passt (bis ~320px); 10px-Rinne fuer den Abstand; lange Werte duerfen brechen.
   Nur <=767px; Desktop unveraendert. */
@media (max-width: 767px) {
  .grid1 .ce_table table { width: 100%; }
  .grid1 .ce_table td { font-size: 0.8em; }
  .grid1 .ce_table td.col_first { padding-right: 10px; }
  .grid1 .ce_table td.col_last  { padding-left: 10px; overflow-wrap: break-word; }
}

/* ---- Produktkarten: Zeilen spaltenuebergreifend ausrichten (Subgrid) ---- */
/* .grid1 ist ein 2-Spalten-Grid; jede Karte (.ce_rs_column_start) ist ein
   eigener Block, daher rasten Headline / Slider / Subline / Tabelle NICHT
   spaltenuebergreifend ein. Bricht die rechte Headline ("Brandschutzabsperr-
   klappen ...") auf eine Zeile mehr um, rutscht alles darunter nach unten,
   waehrend die kuerzere linke Headline oben bleibt -> Slider+Tabellen liegen
   versetzt. Fix per CSS-Subgrid: die 4 sichtbaren Zeilen der Karte (Headline,
   Slider, Subline, Tabelle; das rocksolid-<script> ist display:none, also kein
   Grid-Item) uebernehmen die Zeilen des Eltern-Grids -> beide Spalten Zeile fuer
   Zeile buendig, ganz ohne feste Hoehen. Nur im 2-Spalten-Zustand (>=992px);
   darunter ist .grid1 einspaltig (Karten stapeln, Ausrichtung irrelevant). */
@media (min-width: 992px) {
  .grid1 { grid-template-rows: auto auto auto auto; align-items: start; }
  .grid1 > .ce_rs_column_start {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}
/* RockSolid-Grid-Blowout / Resize-Bug ([[reference-rocksolid-grid-safari]]):
   Beim Verkleinern des Fensters blieb der Slider auf seiner zuletzt gemessenen
   Pixelbreite haengen und blaehte die `1fr`-Grid-Spalte ueber den Viewport auf
   (col 630px @ 375px Viewport -> horizontaler Overflow, Kreis "komisch"). Die
   aufgeblaehte Spalte liess RockSolid wiederum die zu grosse Breite messen
   (Rueckkopplung). `min-width:0` auf die Grid-Items kappt den automatischen
   Mindest-Trackanteil (sonst = min-content = Slider-Breite) -> Spalte schrumpft
   beim Resize korrekt mit, RockSolid misst wieder richtig. Fresh-Load war nie
   betroffen; nur Drag-Resize. Gilt in beiden Layouts (1- und 2-spaltig). */
.grid1 > .ce_rs_column_start { min-width: 0; }

/* ---- Produktkarten-Slider als Kreis ------------------------------------ */
/* Die rocksolid_slider sind 3:2-Rechtecke (mehrere Bilder, navigierbar). Statt
   den ganzen Slider quadratisch zu zwingen (zerstoert RockSolids JS-Hoehen,
   Slide-Transitions UND klippt die Pfeile), wird NUR das Bild-Element
   .rsts-crop rund geclippt. Die Prev/Next-Pfeile liegen als Geschwister
   AUSSERHALB von .rsts-crop (direkt in .rsts-view) -> bleiben sichtbar &
   klickbar, die Slide-Uebergaenge (transforms) bleiben voll funktionsfaehig.
   clip-path: circle(closest-side) = Kreis mit Durchmesser = kleinere Seite
   (= Slide-Hoehe). Beim Navigieren schieben die Bilder hinter dem festen Kreis
   durch. Trifft NUR die .grid1-Slider, nicht den Hero-Slider.
   LINKSBUENDIG (User-Wunsch): Bild ist 3:2 -> Slide-Hoehe = 2/3 der Breite,
   Kreis-Radius = closest-side = Hoehe/2 = Breite/3. Zentrum bei 33.333% der
   Breite => linke Kreiskante exakt an der Spalten-Linkskante. Verhaeltnis-
   konstant => breakpoint-unabhaengig (gilt solange die Bilder 3:2 sind).

   GANZES BILD im Kreis (User-Wunsch): ein 3:2-Bild kann einen Vollkreis nicht
   ohne Beschnitt fuellen. Daher Bild "contained": per transform auf ~2/3
   verkleinern, `transform-origin: left center` -> linke Kante bleibt an der
   Kreis-Linkskante, vertikal zentriert, Breite = Kreisdurchmesser. Die
   nicht abgedeckten Kappen oben/unten (+ geclippte Bildecken) zeigen die
   Hintergrundfarbe `#EEF1F3` (hellgrau), die der clip-path zum Kreis formt.
   Die Produktbilder (weisser Hintergrund) gehen so nahezu nahtlos ueber. */
.grid1 .mod_rocksolid_slider .rsts-crop {
  -webkit-clip-path: circle(closest-side at 33.333% center);
  clip-path: circle(closest-side at 33.333% center);
  background: #EEF1F3;
}
.grid1 .mod_rocksolid_slider img {
  transform: scale(0.9);   /* User-Wunsch: Bild fuellt den Kreis staerker (vorher 0.6667 contained) */
  transform-origin: left center;
}
/* Einspaltig: Der volle Kreis (closest-side = 2/3 der Spaltenbreite) wirkt in
   der breiten Einzelspalte zu gross. Kreis stattdessen MITSKALIEREND auf ~50%:
   `25vw` = Radius (Durchmesser 50vw), linksbuendig, Pfeile seitlich (`right:6px`
   vom Rand reingeholt). NB: greift effektiv nur im Bereich **768-991px** — bei
   <=767px ueberschreibt der Block weiter unten beides (groesserer 42vw-Kreis +
   Pfeile darunter). 25vw setzt voraus, dass die Spalte ~Viewport ist (einspaltig
   gegeben). */
@media (max-width: 991px) {
  .grid1 .mod_rocksolid_slider .rsts-crop {
    -webkit-clip-path: circle(25vw at 25vw center);
    clip-path: circle(25vw at 25vw center);
  }
  /* Hier ist der Kreis 25vw (= ~halbe Spaltenbreite), nicht closest-side ->
     Bild etwas staerker verkleinern (~0.55), damit die Breite zum kleineren
     Kreis passt. */
  .grid1 .mod_rocksolid_slider img { transform: scale(0.74); }  /* fuellt den 25vw-Kreis (rund), vorher 0.55 contained */
  .grid1 .mod_rocksolid_slider .rsts-prev,
  .grid1 .mod_rocksolid_slider .rsts-next { right: 6px !important; }
}
/* Handy (<=767px): groesserer Kreis + Pfeile DARUNTER. User-Wunsch: runde
   Bilder groesser; wenn die Pfeile seitlich keinen Platz mehr haben, kommen sie
   unter den Kreis (linker Pfeil links, rechter rechts). Kreis 42vw Radius
   (84vw Durchmesser), linksbuendig; das contained Bild entsprechend groesser
   skalieren (~0.89 = Durchmesser/Spaltenbreite). Pfeile: per padding-bottom
   Platz unter dem Slider schaffen und die absolut positionierten Pfeile dort hin
   verlegen -> top:100% (unter die .rsts-view). (>=768px bleiben sie seitlich.) */
@media (max-width: 767px) {
  .grid1 .mod_rocksolid_slider .rsts-crop {
    -webkit-clip-path: circle(42vw at 42vw center);
    clip-path: circle(42vw at 42vw center);
  }
  .grid1 .mod_rocksolid_slider img { transform: scale(1.2); }   /* fuellt den 42vw-Kreis (rund), vorher 0.89 contained */
  .grid1 .mod_rocksolid_slider { padding-bottom: 72px; }
  .grid1 .mod_rocksolid_slider .rsts-prev,
  .grid1 .mod_rocksolid_slider .rsts-next {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 14px;
  }
  .grid1 .mod_rocksolid_slider .rsts-prev { left: 0 !important;  right: auto !important; }
  .grid1 .mod_rocksolid_slider .rsts-next { right: 0 !important; left: auto !important; }
}


/* =========================================================================
   6. #ventilatoren  ("Unsere Werte")
   ========================================================================= */

/* ---- Fettzeilen grossschreiben (Werte + Kontakt-Namen) ----------------- */
/* Die <strong>-Lead-ins der "Unsere Werte" (#ventilatoren) und die beiden
   Ansprechpartner-Namen im Kontakt (#kontakt) per text-transform in
   Grossbuchstaben (Inhalt bleibt unangetastet). Trifft genau diese 5 p>strong;
   Headlines (h2/h3/h4 strong) und Footer sind nicht betroffen. */
#ventilatoren p strong,
#kontakt p strong { text-transform: uppercase; }

/* ---- MEHR-LESEN-Link: Hover schwarz ------------------------------------ */
/* Basis: .arrow-button a ist blau (#0082b2), der Pfeil daneben ist ein blaues
   Background-SVG (arrow_blue_new.svg) im ::before. Beim Hover Text -> schwarz
   und Pfeil per filter:brightness(0) ebenfalls schwarz (faerbt jedes einfarbige
   SVG voll schwarz, kein zweites Asset noetig). Gilt global; aktuell existiert
   nur diese eine .arrow-button-Instanz (Startseite). */
.arrow-button a,
.arrow-button a::before { transition: color .2s ease, filter .2s ease; }
.arrow-button a:hover           { color: #000; }
.arrow-button a:hover::before   { filter: brightness(0); }

/* ---- MEHR-LESEN-Link: gleiche Schriftgroesse wie die Werte-Lead-ins ----- */
/* Auf die Groesse von #ventilatoren p strong bringen. Beide erben dieselbe
   Artikel-Basis, also sind gleiche em = gleiche Pixelgroesse. `p` skaliert
   responsiv (1.4/1.1/1.0/0.9em), der Link war abweichend (1.5/1.5/1.2/1.0em)
   -> hier 1:1 gespiegelt. ID-Scope schlaegt `.arrow-button a` (0,1,1) ohne
   !important. Das Pfeil-SVG im ::before ist fix 32x17px (font-unabhaengig) und
   bleibt unveraendert. */
#ventilatoren .arrow-button a                          { font-size: 1.4em; }
@media (max-width: 1299px) { #ventilatoren .arrow-button a { font-size: 1.1em; } }
@media (max-width: 991px)  { #ventilatoren .arrow-button a { font-size: 1em;   } }
@media (max-width: 767px)  { #ventilatoren .arrow-button a { font-size: 0.9em; } }

/* ---- .arrow-einzeln: einzelner Pfeil-Link, Hover-Animation ------------- */
/* DOM: .arrow-einzeln a > img(arrow_blue_new.svg, blau). Beim Hover faehrt der
   Pfeil leicht nach rechts (translateX) und wird schwarz (filter:brightness(0)
   faerbt das einfarbige SVG voll schwarz). Leichtes Ueberschwingen via
   cubic-bezier fuer den "coolen" Effekt; filter weich linear. */
.arrow-einzeln img {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), filter .25s ease;
  will-change: transform;
}
.arrow-einzeln a:hover img {
  transform: translateX(10px);
  filter: brightness(0);
}

/* ---- "Unsere Werte": mehr Abstand zwischen den 3 Zeilen ---------------- */
/* Die drei Werte sind drei <p> (je <strong>Titel</strong><br>Text) in
   .ce_text.border-left. Basis `p{margin:10px 0}` -> ~10px (kollabiert) zwischen
   den Bloecken. `p + p` trifft NUR die Luecken zwischen aufeinanderfolgenden
   Absaetzen (2. und 3. Zeile) -> mehr Luft zwischen den Werten; der Abstand h2 ->
   erster Absatz bleibt unveraendert (erster <p> hat keinen p-Vorgaenger). */
#ventilatoren .ce_text p + p { margin-top: 30px; }


/* =========================================================================
   7. #kontakt
   ========================================================================= */

/* ---- Mobile: Abstand zwischen Bild und Text ---------------------------- */
/* Im #kontakt-Artikel stapeln Bild (.ce_image, oben) und Text (.ce_text mit
   "Service & Kontakt", unten) untereinander -> es gibt keine flex/grid/float-
   Regel. `.mod_article [class*="ce_"]{margin:0}` nullt zudem alle CE-Margins,
   d.h. der Text klebt direkt am Bild. Etwas Luft zwischen Bild und Ueberschrift.
   Nur <=767px (Desktop/Tablet unveraendert); die ID schlaegt die margin:0-Regel
   ohne !important, `>` trifft nur das direkte Text-CE. */
@media (max-width: 767px) {
  #kontakt > .ce_text { margin-top: 30px; }
}

/* ---- Adressblock Markus Moser: enger + mehr Abstand darueber ----------- */
/* Der 2. <p> in der Kontakt-.ce_text ist der Moser-Block: "MARKUS MOSER I
   Geschaeftsfuehrer"<br>"Zederhaus 173"<br>"5584 Zederhaus" -> die Zeilen sind
   br-getrennt im SELBEN Absatz, ihr Abstand = line-height (Basis p 1.8em).
   Enger ziehen via kleinerer line-height; gleichzeitig mehr Luft zum Intro-
   Absatz darueber via margin-top (Basis-Luecke ~10px, kollabiert).
   nth-of-type(2) = Moser-Absatz (Reihenfolge: Intro, Moser, Tel/Mail, Nowotny,
   Nowotny-Mail) -> bei Aenderung der Absatzfolge nachziehen. */
#kontakt .ce_text p:nth-of-type(2) {
  margin-top: 30px;
  line-height: 1.4;
}


/* =========================================================================
   8. FOOTER
   ========================================================================= */

/* ---- "created by kwer"-Logo: weiss (Footer-Hintergrund ist grau) ------- */
/* Inline-SVG, Pfade ohne fill-Attribut => default schwarz; CSS schlaegt das. */
.kwer-copyright svg,
.kwer-copyright svg path { fill: #FFFFFF; }

/* ---- Bottom-Left: Farbe + Abstand zwischen den Links ------------------- */
/* Enthaelt © / Impressum / Datenschutz. Auf grauem Footer (#7A8087) war der
   Text reinweiss -> auf Wunsch "etwas grauer": #ababab, Hover wieder voll weiss.
   `#footer a` (ID-Spezifitaet) faerbt die Links weiss -> Link-Regeln mit
   `#footer` praefixen, um sie ohne !important zu schlagen. Der <span> erbt
   ungehindert von .iwn-footer__bottom-left. */
.iwn-footer__bottom-left { color: #ababab; }
#footer .iwn-footer__bottom-left a { color: #ababab; transition: color .2s ease; }
#footer .iwn-footer__bottom-left a:hover { color: #fff; }
/* Mobile: gestapelt (grid) mit etwas row-gap; Tablet/Desktop: inline auf einer
   Zeile mit mehr Abstand zwischen den Eintraegen. */
@media (max-width: 767px) {
  .iwn-footer__bottom-left { row-gap: 10px; }
  /* Abstand zwischen Links-Block und "created by kwer" (beide gestapelt im
     grid .iwn-footer__bottom). */
  .iwn-footer__bottom { row-gap: 20px; }
}
@media (min-width: 768px) {
  .iwn-footer__bottom-left a { margin-left: 28px; }
}


/* =========================================================================
   9. DIVERSES
   ========================================================================= */

/* ---- #ventilatoren u.a.: Inhalt stand rechts buendig an ---------------- */
/* .cont-left-below hat width:90% + padding-left:10% bei content-box => Summe
   100% => Inhalt klebt am rechten Rand (ab 992px; darunter ist padding-left
   nur 5% -> dort schon 5% Luft). border-box macht width:90% zur Gesamtbreite
   => 10% Rechts-Luft, linker Rand bleibt unveraendert. */
@media (min-width: 992px) {
  .cont-left-below { box-sizing: border-box; }
}

/* ---- Scroll-Reveal: Elemente faden beim Einscrollen von unten ein ------- */
/* Klasse .reveal-up wird per files/js/iwn-reveal.js gesetzt (ohne JS bleibt
   alles sichtbar). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up            { opacity: 0; transform: translateY(40px);
                          transition: opacity .8s ease, transform .8s ease; }
  .reveal-up.is-visible { opacity: 1; transform: none; }
}