/* EW Walenstadt | Contao 5.7 / Eclipse X | Fassung 09 – 06.10.2026
   Einbindung nach Theme-Designer CSS. Pfade relativ zu diesem Stylesheet.
   Inhaltsbreiten und Farben zentral in Abschnitt 01 einstellen.
   Megamenü verwendet die reguläre Contao-Navigation, kein manuelles Modul. */

/* 01 – Variablen und lokale Schrift
________________________________________ */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --wew-content: 1240px;
  --wew-wide: 1527px;
  --wew-gutter: clamp(20px, 3vw, 40px);
  --wew-text: #19334c;
  --wew-blue: #00519e;
  --wew-green: #a8c812;
  --wew-news-arrow: #93b106;
  --wew-layer: #eaecf2;
  --wew-white: #fff;
  --wew-gap: 24px;
  --wew-radius: 24px;
  --wew-section: clamp(64px, 8vw, 160px);
  --wew-header-height: 168px;
  --wew-tracking-text: 0em;
  --wew-tracking-title: 0em;
  --wew-tracking-small: .015em;
  --wew-nav-offset: 42px; /* Navigation: Grundlinie etwa 133px ab Seitenanfang. */
  --wew-menu-delay: 300ms;
  --wew-hover-scale: 1.05;
  --wew-hover-duration: 240ms;
  --accentColor: var(--wew-blue);
  --secondColor: var(--wew-green);
  --footer-headline-color: var(--wew-text);
}

/* 02 – Typografie und gemeinsame Elemente
________________________________________ */
html { font-size: 20px; }
body, input, textarea, select, button {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: var(--wew-text);
  letter-spacing: var(--wew-tracking-text);
}
body { background: #fff; }
#contentwrapper * { hyphens: none; -webkit-hyphens: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Manrope', sans-serif;
  color: var(--wew-text);
  text-transform: none;
  letter-spacing: var(--wew-tracking-title);
}
h1, .h1 { font-size: clamp(47px, 5vw, 80px); line-height: 1.175; font-weight: 200; margin: 0 0 20px; }
h2 { font-size: clamp(23px, 2.5vw, 40px); line-height: 1.15; font-weight: 300; margin: 0 0 32px; }
div.h2, .wew-section-title { font-size: clamp(34px, 3.75vw, 60px); line-height: 1; font-weight: 200; margin-bottom: 64px; }
h3, .h3 { font-size: clamp(21px, 1.875vw, 30px); line-height: 1.4; font-weight: 400; margin: 0 0 24px; }
strong, b { font-weight: 700; }
small, .small { letter-spacing: var(--wew-tracking-small); font-size: 16px; line-height: 1.75; }
.xsmall { letter-spacing: var(--wew-tracking-small); font-size: 13px; line-height: 1.6923; }
p { margin: 0 0 16px; }
.ce_text p:last-child { margin-bottom: 0; }
#main a { color: var(--wew-blue); text-underline-offset: 5px; }
#main .ce_text a { text-decoration: underline; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wew-blue); outline-offset: 5px; }
img { max-width: 100%; height: auto; }
#main .ce_image img { border-radius: var(--wew-radius); }
#main .ce_hyperlink:not(.kachel) a.hyperlink_txt,
#main .wew-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wew-blue); color: #fff; border: 1px solid #fff;
  box-shadow: 0 0 0 2px var(--wew-blue); border-radius: 999px;
  padding: 10px 36px; font-size: 16px; line-height: 1.4; font-weight: 700;
  text-decoration: none; text-transform: uppercase;
}
#main .ce_hyperlink.second a.hyperlink_txt { background: var(--wew-green); box-shadow: 0 0 0 2px var(--wew-green); }

/* 03 – Breiten und Spalten
________________________________________ */
#wrapper, #container, #main, #main > .inside { width: 100%; max-width: none; }
#container { background: transparent !important; }
#main .mod_article { padding: 0; margin: 0 0 var(--wew-section); overflow: visible; }
#main .mod_article > .container {
  box-sizing: border-box; width: calc(100% - 2 * var(--wew-gutter));
  max-width: var(--wew-content); margin: 0 auto; padding: 0;
}
#main .mod_article.fullwidth > .container { max-width: var(--wew-wide); }
/* PCT liefert flex-basis und max-width zusätzlich zur width.
   Deshalb alle drei Grössen gemeinsam überschreiben; gap mitrechnen. */
#main .autogrid_row, #footer .autogrid_row {
  display: flex; flex-wrap: wrap; gap: var(--wew-gap); margin: 0;
}
#main .autogrid_row::before, #main .autogrid_row::after,
#footer .autogrid_row::before, #footer .autogrid_row::after { display: none; }
#main .autogrid_row > .column, #footer .autogrid_row > .column {
  --wew-col: 12;
  box-sizing: border-box; float: none; min-width: 0; padding: 0; margin: 0;
  width: calc((100% + var(--wew-gap)) * var(--wew-col) / 12 - var(--wew-gap));
  flex: 0 0 calc((100% + var(--wew-gap)) * var(--wew-col) / 12 - var(--wew-gap));
  max-width: none;
}
#main .autogrid_row > .col_1, #footer .autogrid_row > .col_1 { --wew-col: 1; }
#main .autogrid_row > .col_2, #footer .autogrid_row > .col_2 { --wew-col: 2; }
#main .autogrid_row > .col_3, #footer .autogrid_row > .col_3 { --wew-col: 3; }
#main .autogrid_row > .col_4, #footer .autogrid_row > .col_4 { --wew-col: 4; }
#main .autogrid_row > .col_5, #footer .autogrid_row > .col_5 { --wew-col: 5; }
#main .autogrid_row > .col_6, #footer .autogrid_row > .col_6 { --wew-col: 6; }
#main .autogrid_row > .col_7, #footer .autogrid_row > .col_7 { --wew-col: 7; }
#main .autogrid_row > .col_8, #footer .autogrid_row > .col_8 { --wew-col: 8; }
#main .autogrid_row > .col_9, #footer .autogrid_row > .col_9 { --wew-col: 9; }
#main .autogrid_row > .col_10, #footer .autogrid_row > .col_10 { --wew-col: 10; }
#main .autogrid_row > .col_11, #footer .autogrid_row > .col_11 { --wew-col: 11; }
#main .autogrid_row > .col_12, #footer .autogrid_row > .col_12 { --wew-col: 12; }
#main .column > .attributes { height: 100%; }
#main .mod_article:first-child { padding-top: 120px; }
#main .mod_article:last-child { margin-bottom: 0; }
body.home #main .mod_article:last-child h2 { font-size: clamp(34px, 3.75vw, 60px); line-height: 1; font-weight: 200; }
body.home #main .mod_article:first-child h1 { max-width: 1120px; margin: 0 auto 72px; text-align: center; }
#main .mod_article:first-child > .container > h2 + .autogrid_row { margin-top: 72px; }

/* 04 – Header: proportionale Grafik, über den Header hinaus
________________________________________ */
#fix-wrapper, #top-wrapper { position: relative; overflow: visible; }
#header { position: relative; z-index: 100; background: transparent !important; height: auto; overflow: visible; }
/* Die Grafiken gehören in die Hintergrundebene des gesamten Inhalts.
   Ein hoch gestapeltes Header-Pseudoelement verdeckte zuvor H1/News. */
#contentwrapper {
  background-color: #fff;
  background-image: url('../img/bg-header.jpg'), url('../img/bg-footer.jpg');
  background-position: center top, center bottom;
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat;
}
#header::before, #footer::before { content: none; display: none; }
#header > .inside {
  position: static; display: flex; align-items: center; gap: 28px;
  box-sizing: border-box; width: calc(100% - 2 * var(--wew-gutter)); max-width: var(--wew-content);
  min-height: var(--wew-header-height); margin: auto; padding: 0;
}
#header .logo { flex: 0 0 280px; width: 280px; height: 90px; margin: 0; }
#header .logo a { display: block; width: 100%; height: 100%; background: url('../img/logo-wew-ew-walenstadt.svg') left center / contain no-repeat; }
#header .mod_socials, #header .smartmenu, #header .clear { display: none; }
#header .mainmenu { margin-left: auto; order: 2; overflow: visible; }
#header .mod_search { order: 3; position: static; color: var(--wew-text); margin: 0; }
/* Kräftige, fontunabhängige Lupe; das vorhandene Suchmodul bleibt bedienbar. */
#header .mod_search, #header .ce_search_label { color: var(--wew-text) !important; opacity: 1 !important; }
#header .ce_search_label { position: relative; width: 22px; height: 22px; }
#header .ce_search_label > i { opacity: 0; }
#header .ce_search_label::before { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border: 2.5px solid currentColor; border-radius: 50%; box-sizing: content-box; }
#header .ce_search_label::after { content: ''; position: absolute; left: 13px; top: 13px; width: 8px; height: 2.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
#header .mainmenu ul, #header .mainmenu ol { list-style: none; margin: 0; padding: 0; }
#header .mainmenu .level_1, #header .mainmenu .floatbox > .inner { display: flex; align-items: center; gap: 8px; }
#header .mainmenu .floatbox { float: none; position: static; width: auto; flex: 0 0 auto; }
#header .mainmenu li.level_1 { float: none; margin: 0; flex: 0 0 auto; }
#header .mainmenu li.page_3 { display: none; } /* Startseiten-Link wird durch Logo ersetzt. */
#header .mainmenu a.a-level_1 { flex: 0 0 auto; text-transform: none; white-space: nowrap; hyphens: none; -webkit-hyphens: none; min-height: 0; height: auto; display: block; padding: 8px 12px; border-radius: 6px; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--wew-text); text-decoration: none; }
#header .mainmenu a.a-level_1 { opacity: 1 !important; }
#header .mainmenu li.level_1:is(:hover,:focus-within) > a.a-level_1:not(.active):not(.trail) { background: transparent; color: var(--wew-blue); }
#header .mainmenu a.a-level_1:is(.active,.trail),
#header .mainmenu a.a-level_1:is(.active,.trail):is(:hover,:focus-visible) { background: var(--wew-blue); color: #fff; opacity: 1 !important; }
#header .mainmenu a::after { border: 0; }
#header .mainmenu li.megamenu a::after { content: none !important; display: none !important; }
#header .mainmenu ul::after { display: none; } /* Theme-Dropdown-Pfeile */
#header .mmenu_trigger { display: none; }

/* 05 – Automatisches Megamenü: Bereiche > fünf Spalten > Unterseiten
   Öffnet per Hover oder Tastaturfokus; Mobile nutzt die PCT-Navigation.
________________________________________ */
@media (min-width: 768px) {
  #header .mainmenu, #header .mainmenu li.megamenu.level_1 { position: static; }
  #header .mainmenu { display: flex; min-height: var(--wew-header-height); }
  #header .mainmenu .level_1, #header .mainmenu .floatbox > .inner { align-items: stretch; }
  #header .mainmenu li.level_1 { display: flex; align-items: center; min-height: var(--wew-header-height); }
  #header .mainmenu li.level_1.page_3 { display: none; }
  #header .mainmenu .floatbox { display: flex; }
  #header .mainmenu a.a-level_1, #header .mod_search { transform: translateY(var(--wew-nav-offset)); }
  /* Sichtbarkeit schliesst verzögert, deshalb bleibt auch die Klickfläche
     während des Übergangs erhalten. Öffnen und erneutes Betreten sofort. */
  #header .mainmenu li.submenu > ul {
    display: block !important; visibility: hidden; opacity: 0;
    transition: opacity 100ms linear var(--wew-menu-delay), visibility 0s linear calc(var(--wew-menu-delay) + 100ms);
  }
  #header .mainmenu li.submenu:is(:hover,:focus-within) > ul {
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    position: absolute !important; top: 100% !important; left: 0 !important; right: 0;
    display: grid !important; grid-template-columns: .9fr 1.1fr 1.2fr 1.5fr 1fr;
    gap: 36px; box-sizing: border-box; width: 100%; max-width: none;
    padding: 64px max(var(--wew-gutter), calc((100% - var(--wew-wide)) / 2));
    background: #fff; border-block: 1px solid var(--wew-layer); box-shadow: none;
    visibility: hidden; opacity: 0; transform: none;
  }
  #header .mainmenu li.megamenu.level_1:is(:hover,:focus-within) > ul.level_2 { visibility: visible; opacity: 1; transition-delay: 0s; }
  #header .mainmenu li.megamenu > ul.level_2 > li { width: auto; float: none; position: static; background: none; border: 0; }
  #header .mainmenu li.megamenu a.a-level_2 {
    display: block; padding: 0; margin: 0 0 12px; background: none; color: var(--wew-text);
    font-size: 30px; line-height: 42px; font-weight: 300; text-transform: none; text-align: left; white-space: normal; text-decoration: none;
  }
  #header .mainmenu li.megamenu a.a-level_2::before {
    content: ''; display: block; width: 44px; height: 48px; margin-bottom: 18px;
    background: var(--wew-text); -webkit-mask: var(--wew-icon) center / contain no-repeat; mask: var(--wew-icon) center / contain no-repeat;
  }
  #header .mainmenu li.megamenu ul.level_3 {
    position: static !important; display: block !important; width: auto; padding: 0; margin: 0;
    opacity: 1 !important; visibility: inherit !important; transition: none; transform: none !important; background: transparent; box-shadow: none;
  }
  #header .mainmenu li.megamenu ul.level_3 li { float: none; width: auto; border: 0; background: transparent; }
  #header .mainmenu li.megamenu a.a-level_3 { display: block; padding: 6px 0; color: var(--wew-text); background: none; font-size: 16px; line-height: 28px; font-weight: 500; text-transform: none; text-align: left; white-space: normal; text-decoration: none; }
  #header .mainmenu li.megamenu a:is(:hover,:focus-visible) { color: var(--wew-blue); }
  #header .mainmenu li.megamenu a.a-level_1:not(.active):not(.trail):hover { color: var(--wew-blue); }
}
.i-wasser, .wasser { --wew-icon: url('../img/i-wasser.svg'); }
.i-strom, .strom { --wew-icon: url('../img/i-strom.svg'); }
.i-kommunikation, .kommunikation { --wew-icon: url('../img/i-kommunikation.svg'); }
.i-elektroinstallationen, .elektroinstallationen { --wew-icon: url('../img/i-elektroinstallationen.svg'); }
.i-fachgeschaeft, .fachgeschaeft, .fachgeschäft { --wew-icon: url('../img/i-fachgeschaeft.svg'); }
.i-service, .service { --wew-icon: url('../img/i-service.svg'); }

/* 06 – News: gleiche Höhe innerhalb einer Reihe, frei wachsende Texte
________________________________________ */
body.home .mod_newslist { overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--wew-gap); }
body.home .mod_newslist .layout_latest {
  display: flex; flex-direction: column; position: relative; box-sizing: border-box;
  min-height: 400px; padding: 32px 38px 24px; margin: 0;
  color: #fff; background: var(--wew-green); border-radius: var(--wew-radius);
  box-shadow: 0 6px 24px #19334c35;
}
body.home .layout_latest .info { font-size: 0; margin-bottom: 18px; }
body.home .layout_latest .info time { font-size: 16px; line-height: 28px; font-weight: 800; text-transform: uppercase; }
body.home .layout_latest h2 { font-size: 40px; line-height: 46px; font-weight: 300; margin-bottom: 24px; }
body.home #main .layout_latest h2 a { color: #fff; text-decoration: none; }
body.home .layout_latest .ce_text { margin-bottom: 36px; }
body.home .layout_latest .more { margin: auto 0 0 auto; }
body.home #main .layout_latest .more a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #fff; box-shadow: inset 0 0 0 3px var(--wew-green); border-radius: 50%; background: var(--wew-layer); color: var(--wew-news-arrow); font-size: 0; text-decoration: none; }
/* Gestreckter Titel-Link macht die ganze Karte anklickbar. */
body.home #main .layout_latest h2 a { position: static; }
body.home #main .layout_latest h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--wew-radius); }
body.home #main .layout_latest .more a { position: relative; z-index: 2; }
body.home .layout_latest .more a::before { content: ''; position: absolute; left: 13px; top: 18px; width: 11px; height: 2px; background: currentColor; }
body.home .layout_latest .more a::after { content: ''; position: absolute; left: 17px; top: 15px; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
body.home #main .layout_latest h2 { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }
body.home .mod_newslist > .more { grid-column: 1 / -1; text-align: center; margin: 48px 0 0; padding: 4px 4px 8px; overflow: visible; }
body.home #main .mod_newslist > .more a { display: inline-block; padding: 10px 44px; border-radius: 999px; background: var(--wew-green); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--wew-green); color: #fff; font-size: 16px; font-weight: 800; text-transform: uppercase; text-decoration: none; }

/* 07 – Blaue Themenkacheln: kompletter Hyperlink als Klickfläche
________________________________________ */
#main .mod_article:has(.kachel) .article-overlay { display: none; }
#main .mod_article:has(.kachel)::before, #main .mod_article:has(.kachel)::after { display: none; }
#main .mod_article:has(.kachel) .autogrid_row + .autogrid_row { margin-top: var(--wew-gap); }
#main .kachel { background: var(--wew-blue) var(--wew-tile) center / cover no-repeat; margin: 0; }
#main .kachel a.hyperlink_txt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; width: 100%; min-height: 0; aspect-ratio: 1.5; padding: 32px 20px;
  color: #fff; font-size: 30px; line-height: 42px; font-weight: 400;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; text-decoration: none;
}
#main .kachel a::after { content: ''; flex: 0 0 24px; width: 24px; height: 30px; background: var(--wew-icon) center / contain no-repeat; }
#main .kachel a.hyperlink_txt:is(:hover,:focus-visible,:active) {
  background-color: transparent; color: #fff; opacity: 1 !important;
}
#main .kachel a.hyperlink_txt { opacity: 1 !important; }
#main .kachel a:focus-visible { outline-offset: -6px; outline-color: #fff; }
.wasser { --wew-tile: url('../img/bg-wasser.png'); }
.strom { --wew-tile: url('../img/bg-strom.png'); }
.kommunikation { --wew-tile: url('../img/bg-kommunikation.png'); }
.elektroinstallationen { --wew-tile: url('../img/bg-elektroinstallationen.png'); }
.fachgeschaeft, .fachgeschäft { --wew-tile: url('../img/bg-fachgeschaeft.png'); }
.service { --wew-tile: url('../img/bg-service.png'); }

/* 08 – Akkordeons: PCT-Verhalten beibehalten
________________________________________ */
#main .autogrid_row + .ce_accordion { margin-top: 88px; }
#main .ce_accordion { margin: 0; border: 0; border-top: 1px solid #d4d8e0; }
#main .ce_accordion:last-child { border-bottom: 1px solid #d4d8e0; }
#main .ce_accordion .toggler { box-sizing: border-box; position: relative; width: 100%; border: 0; background: transparent; padding: 32px 70px 32px 38px; text-align: left; font-size: 30px; line-height: 42px; font-weight: 400; color: var(--wew-text); }
#main .ce_accordion .toggler::before { display: none; }
#main .ce_accordion .toggler::after { content: ''; position: absolute; right: 44px; top: 40px; width: 18px; height: 18px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
#main .ce_accordion .toggler.active::after { transform: rotate(225deg); top: 49px; }
#main .ce_accordion:has(.toggler.active) { background: var(--wew-layer); }
#main .ce_accordion .accordion > div { padding: 0 38px 56px; }
/* Nur einspaltige Texte begrenzen; Spalten-Sets behalten ihre Breite. */
#main .ce_accordion .accordion > div > .ce_text { max-width: 800px; width: 100%; box-sizing: border-box; }

/* 09 – Grüne Infokacheln
________________________________________ */
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; height: 100%; min-height: 480px; padding: 36px 38px;
  border-radius: var(--wew-radius); background-color: var(--wew-green);
  
  color: #fff;
}
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads)::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: var(--wew-info-icon) var(--wew-info-position) / var(--wew-info-size, 70%) auto no-repeat; opacity: .18;
}
.formulare, .Formulare { --wew-info-icon: url('../img/i-formulare.svg'); --wew-info-size: 55%; --wew-info-position: -36px calc(100% - 28px); }
.tarife, .Tarife { --wew-info-icon: url('../img/i-tarife.svg'); --wew-info-size: 50%; --wew-info-position: calc(100% + 16px) 30px; }
.downloads, .Downloads { --wew-info-icon: url('../img/i-downloads.svg'); --wew-info-position: calc(100% + 24px) 75%; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) h3 { color: #fff; margin-bottom: 24px; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) ul { list-style: none; padding: 0; margin: 0; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) li { list-style: none; padding: 0; margin: 0 0 12px; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) li::before { display: none; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) a { color: #fff; text-decoration: none; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) a:hover { text-decoration: underline; }

/* 10 – Ansprechpartner: bestehende PCT-Teambox, E-Mail-Overlay bleibt
________________________________________ */
#main .ce_teambox { margin: 0; height: 100%; border-radius: var(--wew-radius); overflow: hidden; background: var(--wew-layer); }
#main .ce_teambox .teambox_inside { display: flex; height: 100%; }
#main .ce_teambox .image { flex: 0 0 40%; width: 40%; margin: 0; }
#main .ce_teambox .image figure { height: 100%; margin: 0; }
#main .ce_teambox .image img { display: block; width: 100%; height: 100%; object-fit: cover; }
#main .ce_teambox .teambox_content { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 18px 20px 28px; text-align: left; }
#main .ce_teambox .description { order: -3; align-self: flex-start; background: var(--wew-blue); color: #fff; padding: 2px 18px; margin: 0 0 12px; font-size: 13px; line-height: 22px; font-weight: 800; text-transform: uppercase; }
#main .ce_teambox .description p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
#main .ce_teambox .function { color: var(--wew-text); order: -2; margin: 0 0 24px; font-size: 16px; line-height: 28px; font-weight: 700; }
#main .ce_teambox .name { font-size: 30px; line-height: 42px; font-weight: 300; margin: 0 0 4px; }
#main .ce_teambox .phone a, #main .ce_teambox .email a { color: var(--wew-text); text-decoration: none; }
#main .ce_teambox .phone a:hover, #main .ce_teambox .email a:hover { text-decoration: underline; }
#main .ce_teambox .phone, #main .ce_teambox .email { font-size: 20px; line-height: 30px; overflow-wrap: anywhere; }
#main .ce_teambox .socials:empty { display: none; }

/* 11 – Footer und Pikett
________________________________________ */
#footer {
  position: relative; isolation: isolate; color: var(--wew-text); background: transparent !important;
  padding: 160px 0 72px; margin-top: 0; overflow: visible;
}
#footer > .inside { box-sizing: border-box; width: calc(100% - 2 * var(--wew-gutter)); max-width: var(--wew-content); padding: 0; margin: auto; }
#footer, #footer p, #footer table, #footer a { font-size: 16px; line-height: 28px; color: var(--wew-text); }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer h6 { color: var(--wew-text); font-size: 16px; line-height: 28px; font-weight: 800; letter-spacing: 0; margin: 0; }
#footer .ce_table { margin: 0 0 16px; }
#footer table { width: auto; border-collapse: collapse; background: none; margin: 0; }
#footer td, #footer th { border: 0; padding: 0; background: transparent; vertical-align: top; text-align: left; color: var(--wew-text); font-weight: 500; }
#footer td:first-child, #footer th:first-child { box-sizing: border-box; width: 57px; min-width: 57px; max-width: 57px; padding-right: 10px; white-space: nowrap; }
#footer .mod_socials { display: flex; gap: 12px; margin-top: 18px; }
#footer .mod_socials a i { background: transparent; color: inherit; width: auto; height: auto; line-height: 1; margin: 0; padding: 0; border-radius: 0; }
#footer .mod_socials a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--wew-text); font-size: 17px; }
#footer .mod_socials a:is(:hover,:focus-visible), #footer .mod_socials a { color: #fff !important; background: var(--wew-text) !important; text-decoration: none !important; }
#footer .mod_socials a i, #footer .mod_socials a i:is(:hover,:focus) { color: #fff !important; background: transparent !important; font-size: inherit; }
#footer .mod_socials a::before, #footer .mod_socials a::after { content: none !important; }
#footer > .inside > .ce_text { margin-top: 48px; }
#footer > .inside > .ce_text p, #footer > .inside > .ce_text a { font-size: 13px; line-height: 22px; }
.pikett { width: 176px; aspect-ratio: 1; border-radius: 50%; padding: 5px; border: 2px solid var(--wew-green); margin: 0 auto; transform: rotate(12deg); }
#footer .pikett a { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 0 10px; background: var(--wew-green); color: #fff; border-radius: 50%; font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
#footer .pikett a:is(:hover,:focus-visible) { color: #fff; text-decoration: none; }
.pikett br { display: none; }
.pikett span { display: block; font-size: 40px; line-height: 46px; font-weight: 300; }

/* Zusätzliche PCT-Farb-/Schriftregeln explizit abgleichen. */
#main h1, #main h2, #main h3, #main .ce_headline { color: var(--wew-text); }
#main h1, #main h2, #main h3, #main .ce_headline, #main .ce_teambox .name,
#header .mainmenu a, #footer h6 { font-family: 'Manrope', sans-serif; }
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) h3 { color: #fff; }
#main h1, #main h2, #main h3, #main div.h2, #main .ce_teambox .name,
#main .kachel a, #main .layout_latest .ce_text, #footer { hyphens: none; -webkit-hyphens: none; }
#footer h6 p, #footer h6 a { color: var(--wew-text); }
#header .burger_lines, #header .burger_lines::before, #header .burger_lines::after { background-color: var(--wew-text); }
.top-link { background: var(--wew-layer); border-color: var(--wew-text); }
.top-link a, .top-link a i { color: var(--wew-text); }
.top-link .progress-ring circle { stroke: var(--wew-blue); }

/* 12 – Dezente Vergrösserung um das Zentrum
________________________________________ */
body.home .layout_latest, body.home .mod_newslist > .more a,
#main .ce_hyperlink:not(.kachel) a, #main .wew-button,
#main .kachel, #footer .mod_socials a, .pikett {
  transform-origin: center;
  transition: transform var(--wew-hover-duration) ease;
}
/* Übergeordnete PCT-Blockelemente dürfen die Vergrösserung nicht abschneiden. */
#main .ce_hyperlink, #main .column, #main .column > .attributes,
#footer .column, #footer .column > .attributes, #footer .mod_socials { overflow: visible; }
@media (hover: hover) and (pointer: fine) {
  body.home .layout_latest:hover, body.home .mod_newslist > .more a:hover,
  #main .ce_hyperlink:not(.kachel) a:hover, #main .wew-button:hover,
  #main .kachel:hover, #footer .mod_socials a:hover { transform: scale(var(--wew-hover-scale)); }
  .pikett:is(:hover,:focus-within) { transform: rotate(0deg) scale(var(--wew-hover-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  body.home .layout_latest:hover, body.home .mod_newslist > .more a:hover,
  #main .ce_hyperlink:not(.kachel) a:hover, #main .wew-button:hover,
  #main .kachel:hover, #footer .mod_socials a:hover { transform: none; }
  .pikett:is(:hover,:focus-within) { transform: rotate(0deg); }
}
@media (min-width: 1200px) { #header .logo { transform: translateY(11px); } }

/* 13 – Tablet und Mobile (<768px)
________________________________________ */
@media (min-width:768px) and (max-width:1199px) {
  #header .logo { flex-basis: 190px; width: 190px; }
  #header > .inside { gap: 12px; }
  #header .mainmenu .level_1, #header .mainmenu .floatbox > .inner { gap: 2px; }
  #header .mainmenu a.a-level_1 { flex: 0 0 auto; font-size: 16px; padding: 8px; }
  #header .mainmenu li.megamenu a.a-level_2 { font-size: 23px; line-height: 1.4; overflow-wrap: anywhere; }
  #header .mainmenu li.megamenu.level_1 > ul.level_2 { gap: 20px; }
  body.home .layout_latest h2 { font-size: 30px; line-height: 1.2; }
  body.home .mod_newslist .layout_latest { padding: 24px; }
  #main .kachel a.hyperlink_txt { font-size: clamp(16px, 2vw, 23px); line-height: 1.4; padding-inline: 12px; gap: 6px; min-height: 0; }
  #main .kachel a::after { flex-basis: 18px; width: 18px; height: 24px; }
}
@media (min-width:768px) and (max-width:999px) {
  #header .logo { flex-basis: 160px; width: 160px; }
  #header .mainmenu a.a-level_1 { font-size: 15px; padding-inline: 6px; }
}
@media (max-width:767px) {
  :root { --wew-gap: 24px; --wew-radius: 18px; --wew-header-height: 110px; }
  html { font-size: 15px; }
  body, input, textarea, select, button { font-size: 15px; line-height: 1.5; }
  h1, .h1 { font-size: 47px; line-height: 1.175; overflow-wrap: anywhere; }
  h2 { font-size: 23px; line-height: 1.15; }
  div.h2, .wew-section-title { font-size: 34px; line-height: 1; margin-bottom: 32px; }
  h3, .h3 { font-size: 21px; line-height: 1.4; }
  small, .small { letter-spacing: var(--wew-tracking-small); font-size: 14px; line-height: 1.75; }
  .xsmall { letter-spacing: var(--wew-tracking-small); font-size: 11px; line-height: 1.6923; }
  #main .autogrid_row > .column, #footer .autogrid_row > .column { --wew-col: 12; width: 100%; flex-basis: 100%; max-width: 100%; }
  #main .mod_article:first-child { padding-top: 40px; }
  body.home #main .mod_article:first-child h1 { margin-bottom: 40px; }
  #main .mod_article:first-child > .container > h2 + .autogrid_row { margin-top: 32px; }
  #header .logo { flex: 0 0 180px; width: 180px; height: 64px; }
  #header .mainmenu { display: none !important; }
  #header .mmenu_trigger { position: static; transform: none; display: flex; order: 4; margin-left: auto; color: var(--wew-text); }
  #header .mod_search { margin-left: auto; }
  #contentwrapper { background-size: 100% auto, auto 800px; }
  .mm-menu, nav.mobile_vertical { font-family: 'Manrope', sans-serif; color: var(--wew-text); }
  .mm-menu .a-level_1, nav.mobile_vertical .a-level_1 { font-size: 15px; }
  .mm-menu .a-level_2, nav.mobile_vertical .a-level_2 { font-size: 21px; }
  .mm-menu .a-level_3, nav.mobile_vertical .a-level_3 { font-size: 14px; }
  body.home .mod_newslist { grid-template-columns: 1fr; }
  body.home .mod_newslist .layout_latest { min-height: 280px; padding: 28px; }
  body.home .layout_latest h2 { font-size: 23px; line-height: 1.15; }
  body.home .layout_latest .info time { font-size: 14px; }
  #main .kachel a.hyperlink_txt { min-height: 0; aspect-ratio: 1.5; font-size: 21px; line-height: 1.4; }
  #main .autogrid_row + .ce_accordion { margin-top: 40px; }
  #main .ce_accordion .toggler { font-size: 21px; line-height: 1.4; padding: 24px 54px 24px 20px; }
  #main .ce_accordion .toggler::after { right: 24px; top: 28px; width: 14px; height: 14px; }
  #main .ce_accordion .toggler.active::after { top: 36px; }
  #main .ce_accordion .accordion > div { padding: 0 20px 32px; }
  #main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) { min-height: 330px; padding: 28px; }
  #main .ce_teambox .teambox_content { padding: 16px; }
  #main .ce_teambox .name { font-size: 21px; line-height: 1.4; }
  #main .ce_teambox .description p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
#main .ce_teambox .function { font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
  #main .ce_teambox .phone a, #main .ce_teambox .email a { color: var(--wew-text); text-decoration: none; }
#main .ce_teambox .phone a:hover, #main .ce_teambox .email a:hover { text-decoration: underline; }
#main .ce_teambox .phone, #main .ce_teambox .email { font-size: 15px; line-height: 1.5; }
  #main .ce_teambox .description { font-size: 11px; line-height: 22px; padding-inline: 12px; }
  #footer { padding: 80px 0 40px; margin-top: 0; }

  #footer, #footer p, #footer table, #footer a, #footer h6 { color: var(--wew-text); font-size: 14px; line-height: 1.75; }
  #footer > .inside > .ce_text p, #footer > .inside > .ce_text a { font-size: 11px; }
  .pikett { margin: 12px 0; }
  #mmenu { color: var(--wew-text); }
  #mmenu .mod_navigation li > a { font-family: 'Manrope', sans-serif; color: var(--wew-text); font-weight: 500; hyphens: none; -webkit-hyphens: none; }
  #mmenu .mod_navigation a.a-level_1 { font-size: 15px; line-height: 30px; }
  #mmenu .mod_navigation a.a-level_2 { font-size: 21px; line-height: 42px; }
  #mmenu .mod_navigation a.a-level_3 { font-size: 14px; line-height: 28px; }
  #mmenu .mod_navigation a:is(.active,.trail,.open) { color: var(--wew-blue); font-weight: 700; }
  #mmenu .mod_navigation li.submenu .opener { min-height: 38px; width: 38px; }
  #mmenu .mod_socials a i { color: var(--wew-text); }

}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

@media (max-width: 599px) {
  body.home #main h1 { overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
}
/* Kleine Texte/Labels mit eigener, zentral einstellbarer Laufweite. */
#header .mainmenu a, #main .kachel a { letter-spacing: var(--wew-tracking-text); }
#main .layout_latest .info time, #main .ce_teambox .description,
#main .ce_hyperlink:not(.kachel) a, #main .mod_newslist > .more a,
#footer, #footer h6 { letter-spacing: var(--wew-tracking-small); }

/* 14 – Feinschliff: gezielte PCT-Hover-/Fokusregeln, Fassung 09
________________________________________ */
/* PCTs allgemeine Footer-Hoverregel ist spezifischer als ein einfacher
   .pikett a:hover. Farbe für Link UND enthaltene Texte festschreiben. */
#footer .pikett a, #footer .pikett a:is(:hover,:focus,:focus-visible,:active),
#footer .pikett a span { color: #fff !important; text-decoration: none !important; }

/* .has_focus wird von PCT auf die ganze Box gesetzt. Für das Overlay zählt
   ausschliesslich der Bildlink, auch bei Tastaturbedienung. */
#main .ce_teambox:not(.hover_image) .image {
  position: relative; flex-basis: min(40%, 243px); width: min(40%, 243px);
  max-width: 243px; overflow: hidden;
}
#main .ce_teambox:not(.hover_image) .image > a { position: relative; display: block; height: 100%; }
#main .ce_teambox:not(.hover_image) .image .overlay,
#main .ce_teambox:not(.hover_image).has_focus .image .overlay {
  opacity: 0; pointer-events: none; transition: opacity 240ms ease;
}
@media (hover: hover) {
  #main .ce_teambox:not(.hover_image) .image > a:hover .overlay { opacity: 1; }
}
#main .ce_teambox:not(.hover_image) .image > a:focus-visible .overlay { opacity: 1; }

/* PCTs vorhandene Unterlinie benutzen; nur Farbe und Zustände korrigieren.
   Linie sitzt am Textspan, daher unabhängig vom darüberliegenden Icon. */
@media (min-width: 768px) {
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3) { opacity: 1 !important; }
  #header .mainmenu li.megamenu a.a-level_2::before { background-color: var(--wew-text); }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3) > span {
    position: relative; display: inline-block; color: inherit;
  }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3) > span::before {
    content: ''; position: absolute; display: block; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--wew-blue);
    transform: scaleX(0); transform-origin: center;
    transition: transform 300ms ease-in-out;
  }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3):is(:hover,:focus-visible) > span::before {
    transform: scaleX(1);
  }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3):is(.active,.trail),
  #header .mainmenu li.megamenu li:is(.active,.trail) > a:is(.a-level_2,.a-level_3) {
    color: var(--wew-blue); text-decoration: none;
  }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3):is(.active,.trail) > span::before,
  #header .mainmenu li.megamenu li:is(.active,.trail) > a:is(.a-level_2,.a-level_3) > span::before {
    transform: scaleX(0) !important;
  }
}

/* Textlinks ohne dauerhafte Unterstreichung: Hintergrundlinie wächst aus
   der Mitte. Mehrzeilige Links bleiben normal umbrechbar. Bestehende
   dauerhaft unterstrichene Fliesstextlinks werden nicht verändert. */
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) a,
#main .ce_teambox .phone a, #main .ce_teambox .email a,
#footer a:not(.mod_socials a):not(.pikett a):not(.ce_hyperlink a) {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: center bottom;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 300ms ease-in-out, color 180ms ease;
}
#main .ce_text:is(.formulare,.tarife,.downloads,.Formulare,.Tarife,.Downloads) a:is(:hover,:focus-visible),
#main .ce_teambox .phone a:is(:hover,:focus-visible),
#main .ce_teambox .email a:is(:hover,:focus-visible),
#footer a:not(.mod_socials a):not(.pikett a):not(.ce_hyperlink a):is(:hover,:focus-visible) {
  background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
  #header .mainmenu li.megamenu a > span::before,
  #main .ce_teambox .image .overlay { transition: none; }
}

/* 15 – Mobile Infokacheln: Iconmasse wie kurz oberhalb des Spaltenumbruchs.
   Feste Grafikbreiten verhindern den Grössensprung beim Stapeln der Kacheln. */
@media (max-width: 767px) {
  #main .ce_text:is(.formulare,.Formulare) { --wew-info-size: 124px; }
  #main .ce_text:is(.tarife,.Tarife) { --wew-info-size: 112px; }
  #main .ce_text:is(.downloads,.Downloads) { --wew-info-size: 158px; }
}

/* 16 – Megamenü und Newstitel: flexible Mindestbreiten und Silbentrennung.
   Sprache des Dokuments muss Deutsch sein (lang="de" oder "de-CH"). */
@media (min-width: 768px) {
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    grid-template-columns: minmax(0, .8fr) minmax(0, .85fr) minmax(0, 1.2fr) minmax(0, 1.65fr) minmax(0, 1.25fr);
    column-gap: clamp(12px, 2vw, 30px);
    min-width: 0;
  }
  #header .mainmenu li.megamenu > ul.level_2 > li {
    min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3),
  #header .mainmenu li.megamenu a:is(.a-level_2,.a-level_3) > span {
    min-width: 0; max-width: 100%; box-sizing: border-box;
    white-space: normal; word-break: normal; overflow-wrap: anywhere;
    hyphens: auto; -webkit-hyphens: auto;
  }
  #header .mainmenu li.megamenu a.a-level_2 {
    font-size: clamp(18px, 1.875vw, 30px); line-height: 1.4;
  }
  body.home #main .layout_latest h2 {
    font-size: clamp(23px, 2.5vw, 40px); line-height: 1.15;
  }
}
/* Die globale Trennsperre galt auch auf dem Link, daher dort ausdrücklich
   aufheben. anywhere ist nur die Absicherung für Wörter ohne Trennstelle. */
body.home #main .layout_latest h2,
body.home #main .layout_latest h2 a,
body.home #main .layout_latest h2 a span {
  min-width: 0; max-width: 100%; white-space: normal;
  word-break: normal; overflow-wrap: anywhere;
  hyphens: auto; -webkit-hyphens: auto;
}

/* 17 – Megamenü: drei + zwei Bereiche auf Tablet, fünf auf Desktop.
   Jede Bereichs-LI enthält Überschrift und Unterseiten als geschlossene Gruppe. */
@media (min-width: 768px) {
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    align-items: start; align-content: start;
    max-height: calc(100vh - var(--wew-header-height) - 16px);
    max-height: calc(100dvh - var(--wew-header-height) - 16px);
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior-y: contain; scrollbar-gutter: stable;
  }
  /* Kurze Bereichsnamen nicht in einzelne Buchstaben/Silben aufteilen. */
  #header .mainmenu li.megamenu a.a-level_2:is(.i-wasser,.i-strom,.wasser,.strom),
  #header .mainmenu li.megamenu a.a-level_2:is(.i-wasser,.i-strom,.wasser,.strom) > span {
    white-space: nowrap; overflow-wrap: normal;
    hyphens: none; -webkit-hyphens: none;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 36px); row-gap: 36px;
    padding-block: 32px;
  }
  #header .mainmenu li.megamenu a.a-level_2 {
    font-size: clamp(21px, 2vw, 24px); line-height: 1.4;
  }
}
@media (min-width: 1200px) {
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.25fr) minmax(0, 1.55fr) minmax(0, 1.1fr);
    column-gap: clamp(20px, 2vw, 30px);
  }
}

/* 18 – Breite Desktopansichten wie im Entwurf: lange Titel erhalten
   ihre tatsächliche Inhaltsbreite. Wasser und Strom teilen den Rest.
   Dadurch verdrängt eine breitere Fachgeschäft-Spalte nicht Elektroinstallationen. */
@media (min-width: 1440px) {
  #header .mainmenu li.megamenu.level_1 > ul.level_2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) max-content max-content max-content;
    column-gap: clamp(20px, 2vw, 30px);
  }
  #header .mainmenu li.megamenu a.a-level_2,
  #header .mainmenu li.megamenu a.a-level_2 > span {
    white-space: nowrap; overflow-wrap: normal;
    hyphens: none; -webkit-hyphens: none;
  }
}