/* ECOPLAN Relaunch 2026-11-02-k: Seitenhintergrund, Logo-Laufband, Icon-Badge, Überschriften ohne Wortumbruch, Prozesskacheln. Alles andere sind native Weblication-Elemente. */
html{background:#fff}
html body,html body main{background:transparent!important}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:radial-gradient(40vw 40vw at 14% 10%,rgba(0,154,146,.5),transparent 70%),radial-gradient(38vw 38vw at 90% 18%,rgba(94,140,255,.45),transparent 70%),radial-gradient(42vw 42vw at 76% 90%,rgba(255,170,130,.45),transparent 70%),radial-gradient(36vw 36vw at 6% 86%,rgba(120,230,200,.5),transparent 70%)}
/* k: Logo-Laufband: die Groesse kommt aus dem gewaehlten Layout (Design-CSS: var2401 --heightImage 100px, var2402 200px, var2403 280px).
   Das Design-CSS nutzt die Variable nur bei var1000, bei var24xx stehen feste 160px. Hier greift --heightImage auch fuer var24xx:
   Eintrag = --heightImage, Bild = 76 Prozent davon, der Rest ist Innenabstand (12 Prozent oben/unten, 30 Prozent seitlich). */
.listPictureGallery_var24{--heightImage:100px}
.listPictureGallery_var24 .listEntries .listEntriesInner>div,.listPictureGallery_var2401 .listEntries .listEntriesInner>div,.listPictureGallery_var2402 .listEntries .listEntriesInner>div,.listPictureGallery_var2403 .listEntries .listEntriesInner>div{height:var(--heightImage)}
.listPictureGallery_var24 .listEntries .listEntryInner,.listPictureGallery_var2401 .listEntries .listEntryInner,.listPictureGallery_var2402 .listEntries .listEntryInner,.listPictureGallery_var2403 .listEntries .listEntryInner{box-sizing:border-box;height:var(--heightImage);margin:0;padding:calc(var(--heightImage)*.12) calc(var(--heightImage)*.3)}
.listPictureGallery_var24 .listEntries .listEntryImage,.listPictureGallery_var2401 .listEntries .listEntryImage,.listPictureGallery_var2402 .listEntries .listEntryImage,.listPictureGallery_var2403 .listEntries .listEntryImage,.listPictureGallery_var24 .listEntries .listEntryImage picture,.listPictureGallery_var2401 .listEntries .listEntryImage picture,.listPictureGallery_var2402 .listEntries .listEntryImage picture,.listPictureGallery_var2403 .listEntries .listEntryImage picture,.listPictureGallery_var24 .listEntries .listEntryImage img,.listPictureGallery_var2401 .listEntries .listEntryImage img,.listPictureGallery_var2402 .listEntries .listEntryImage img,.listPictureGallery_var2403 .listEntries .listEntryImage img{height:calc(var(--heightImage)*.76)}
/* e: Icon-Badge (hellgrün, abgerundet, 56px) hinter den Kachel-Icons (30px) */
.elementPicture .picture img[width="44"],.elementPicture .picture img[width="30"]{box-sizing:content-box;display:block;width:30px;height:30px;padding:13px;background:#e0f2f0;border-radius:12px}

/* g: Überschriften ohne Silbentrennung und ohne Wortumbruch (auch Akkordeon-Überschriften).
   Das Design-CSS setzt ".elementHeadline .he{hyphens:auto}"; deshalb dieselbe Selektor-Spezifität, hier später geladen.
   Die Schriftgröße passt sich der Spaltenbreite an (7cqi = 7% der Containerbreite, maximal Standardgröße),
   damit auch lange Wörter in schmalen Spalten ganz hineinpassen. overflow-wrap:break-word greift nur im Notfall,
   wenn ein einzelnes Wort trotzdem breiter als die Spalte ist. */
h1,h2,h3,h4,h5,h6,.elementHeadline .he,.elementHeadline .wEditorWysiwyg,.elementAccordionPrimaryStyle_var20 .accordionHeader .accordionHeaderCaption{-webkit-hyphens:none;hyphens:none;word-break:normal;overflow-wrap:break-word}
.elementHeadline_var0{container-type:inline-size}
.elementHeadline_var0 .he{font-size:min(var(--fontSize),7cqi)}
/* h1: feste, spaltenunabhängige Größe (wächst/schrumpft nicht mehr mit der Spaltenaufteilung): 3,1vw, mindestens Mobilgröße, maximal Standardgröße */
.elementHeadline_var0 h1.he{font-size:clamp(2.1rem,3.1vw,var(--fontSize))}
/* g: Texte in Kacheln dürfen trennen (Silbentrennung, sonst Notumbruch) statt über die Kachel hinauszulaufen */
.elementBox p,.elementBox li{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
/* g: Prozesskacheln (6 Spalten): kleinerer Innenabstand und Schrift, damit lange Wörter wie "Automatisierungslogik" passen */
.elementContainerStandardColumns_var161616161616 .elementBox{padding-left:14px;padding-right:14px}
.elementContainerStandardColumns_var161616161616 .elementBox p{font-size:.875rem}

/* Kundenstimmen: runde Avatare (Bildvariante 60) mit fester Breite behalten ihre Größe.
   Das Seitenverhältnis 1:1 des Designs würde sonst ein quadratisches Feld in voller Spaltenbreite reservieren
   und einen großen Abstand zwischen Bild und Text erzeugen. */
.elementPicture_var60.elementPictureAspectRatio_var10:has(img[width]) figure picture{padding-bottom:0;height:auto!important}
.elementPicture_var60.elementPictureAspectRatio_var10:has(img[width]) figure{display:inline-block}