footer h4 {
    font-weight: 600 !important; /* Demi statt Bold - wirkte zu klotzig (fetter als das Logo) */
    color: #FFFFFF !important;
    background-color: #131F45 !important;
    padding: 0px 5px !important;
    display: inline-block !important;
text-transform:uppercase !important;
}

footer .ce_text h4 {
    color: #FFFFFF !important;
}

/* Slider: Text in der blauen Box (bg-accent) weiss statt schwarz */
.ce_revolutionslider_text.bg-accent {
    color: #ffffff !important;
}

/* Infobox (+++ Hallenbad-/Saison-Hinweis): Hintergrund Ozeanblau, Text + Icon Sonnengelb (CD-Palette) */
.ce_infobox.ce_infobox_info {
    background-color: #131F45 !important;
}
.ce_infobox.ce_infobox_info,
.ce_infobox.ce_infobox_info h2,
.ce_infobox.ce_infobox_info strong,
.ce_infobox.ce_infobox_info i,
.ce_infobox.ce_infobox_info .fa {
    color: #ED9F2C !important;
}

/* =====================================================================
   CORPORATE FONT - Eurostile LT Std (Hausschrift laut CD-Styleguide)
   woff2 liegen in fonts/ (aus dem CD-Logo-/Font-Paket).
   Hinweis: Web-Embedding-Lizenz wird nachgezogen.
   ===================================================================== */
@font-face {
    font-family: 'Eurostile LT Std';
    src: url('fonts/EurostileLTStd-Regular.woff2?v=2026-06-07') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Eurostile LT Std';
    src: url('fonts/EurostileLTStd-Demi.woff2?v=2026-06-07') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Eurostile LT Std';
    src: url('fonts/EurostileLTStd-Bold.woff2?v=2026-06-07') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
/* Extended-Schnitt fuer optionale grosse Headlines (per Klasse einsetzbar) */
@font-face {
    font-family: 'Eurostile LT Std Ex2';
    src: url('fonts/EurostileLTStd-BoldEx2.woff2?v=2026-06-07') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Alle Ueberschriften + Slider-Captions in Eurostile, kraeftig (Bold) statt Light */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font_headline,
.ce_revolutionslider_text {
    font-family: 'Eurostile LT Std', 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
}

/* Hero-Ueberschrift (H1) im Extended-Schnitt - wie die Wortmarke "STADTWERKE" im CD */
h1, .h1 {
    font-family: 'Eurostile LT Std Ex2', 'Eurostile LT Std', sans-serif !important;
    font-weight: 700 !important;
}

/* Startseiten-H1 "Willkommen ..." - Zeichenabstand enger (Ex2 laeuft sonst sehr breit) */
#article-13420 h1, #article-13420 .h1 {
    letter-spacing: -0.03em !important;
}

/* ---------------------------------------------------------------------
   NAVIGATION (Haupt- + Subnavigation) in Eurostile.
   ZURUECKSETZEN: einfach diesen Block bis "END NAVI-FONT" entfernen,
   dann faellt die Navigation auf die Theme-Schrift (Open Sans) zurueck.
   --------------------------------------------------------------------- */
.mainmenu a,
.mobile_horizontal a,
.mobile_vertical a,
.submenu_v4 a {
    font-family: 'Eurostile LT Std', 'Open Sans', sans-serif !important;
}

/* Hauptmenue (oberste Ebene) in Grossbuchstaben */
.mainmenu a.a-level_1,
.mobile_horizontal a.a-level_1,
.mobile_vertical a.a-level_1 {
    text-transform: uppercase !important;
}

/* Hauptmenue kleiner + etwas Abstand zum Logo (klebte vorher direkt darunter) */
.mainmenu a.a-level_1 {
    font-size: 14px !important;
    letter-spacing: 0.03em !important;
}
.mainmenu {
    margin-top: 10px !important;
}
/* END NAVI-FONT */

/* =====================================================================
   BODY-SCHRIFT - Montserrat (selbst gehostet, ersetzt Open Sans als
   Fliesstext-Schrift; Eurostile bleibt fuer Ueberschriften/Navi/Slider).
   Testweise - kann durch Entfernen dieses Blocks zurueckgesetzt werden.
   ===================================================================== */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-regular.woff2?v=2026-06-07') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-medium.woff2?v=2026-06-07') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-semibold.woff2?v=2026-06-07') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-bold.woff2?v=2026-06-07') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Fliesstext + Formularelemente auf Montserrat (Ueberschriften/Navi/Slider
   bleiben Eurostile, da deren Regeln spezifischer sind). */
body, p, li, td, th, dd, dt, blockquote,
.ce_text, .ce_text_extented,
button, input, select, textarea {
    font-family: 'Montserrat', 'Open Sans', Arial, sans-serif !important;
}

/* =====================================================================
   CTA-AKZENT - Haupt-Buttons in Sonnengelb (#ED9F2C) mit Ozeanblau-Text,
   Hover invertiert (analog Styleguide-Button). "Weiterlesen" bleibt dezent.
   ZURUECKSETZEN: diesen Block bis "END CTA-AKZENT" entfernen.
   ===================================================================== */
.ce_button a,
.ce_form button[type="submit"],
.ce_form input[type="submit"],
form button[type="submit"],
form input[type="submit"],
.submit {
    background-color: #ED9F2C !important;
    color: #131F45 !important;
    border-color: #ED9F2C !important;
}
.ce_button a:hover,
.ce_form button[type="submit"]:hover,
.ce_form input[type="submit"]:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover,
.submit:hover {
    background-color: #131F45 !important;
    color: #ffffff !important;
    border-color: #131F45 !important;
}
/* END CTA-AKZENT */

/* =====================================================================
   FOOTER - hellgrauer Text -> schwarz (Ueberschriften in den dunklen
   Boxen bleiben weiss, da footer h4 oben mit !important gesetzt ist).
   ===================================================================== */
#footer,
#footer p,
#footer li,
#footer td,
#footer th,
#footer strong,
#footer span,
#footer .content,
#footer a {
    color: #000 !important;
}
#footer a:hover {
    color: #000 !important;
    text-decoration: underline !important;
}

/* Footer-Tabelle "Oeffnungszeiten Verwaltung": horizontalen Scrollbar
   forciert ausblenden. */
#footer .ce_table,
#footer .ce_table table {
    overflow-x: hidden !important;
}
#footer .ce_table table {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
}

/* =====================================================================
   KUNDENSERVICE-ICONS (#article-13429: Antraege + digitales Formular).
   Zeitgemaesse Micro-Animation:
   - dauerhaftes, sanftes Schweben (automatisch sichtbar, links/rechts
     zeitversetzt)
   - beim Hover hebt das Icon an, wird leicht groesser und bekommt einen
     weichen Schatten
   Hinweis: ein Dauer-Flip wirkte platt, weil ein 360deg-rotateY ohne
   perspective auf dem direkten Eltern-Element nur zusammenquetscht statt
   sich raeumlich zu drehen.
   ===================================================================== */
#article-13429 .image_container {
    overflow: visible;
}
#article-13429 .image_container img {
    will-change: transform;
    -webkit-animation: sw-icon-float 3.2s ease-in-out infinite;
    animation: sw-icon-float 3.2s ease-in-out infinite;
    -webkit-transition: -webkit-transform .35s ease, filter .35s ease;
    transition: transform .35s ease, filter .35s ease;
}
/* rechte Spalte zeitversetzt, damit nicht alle synchron schweben */
#article-13429 .column:nth-child(even) .image_container img {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
}
#article-13429 .ce_iconbox:hover .image_container img {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: translateY(-6px) scale(1.12);
    transform: translateY(-6px) scale(1.12);
    -webkit-filter: drop-shadow(0 10px 14px rgba(19,31,69,.25));
    filter: drop-shadow(0 10px 14px rgba(19,31,69,.25));
}
@-webkit-keyframes sw-icon-float {
    0%, 100% { -webkit-transform: translateY(0); }
    50% { -webkit-transform: translateY(-9px); }
}
@keyframes sw-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
    #article-13429 .image_container img {
        -webkit-animation: none;
        animation: none;
    }
}

/* =====================================================================
   STARTSEITEN-H1 "Willkommen bei Ihren Stadtwerken Mayen" auf Mobil.
   Problem: Ex2-Schnitt zu breit -> Titel lief in 4 Zeilen.
   Loesung: fluide Verkleinerung + schmalerer Normalschnitt, damit die
   beiden durch <br> getrennten Teile je auf eine Zeile passen (max 2).
   ===================================================================== */
@media (max-width: 767px) {
    #article-13420 h1,
    #article-13420 .h1 {
        font-family: 'Eurostile LT Std', 'Open Sans', sans-serif !important;
        font-size: clamp(20px, 6vw, 34px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.01em !important;
    }
}