@charset "UTF-8";
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/oswald-500-normal-latin.woff2') format('woff2')} @font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/oswald-600-normal-latin.woff2') format('woff2')} @font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/oswald-700-normal-latin.woff2') format('woff2')} @font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/roboto-400-normal-latin.woff2') format('woff2')} @font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/roboto-500-normal-latin.woff2') format('woff2')} @font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('https://demo195.demoserver-media-nord.com/wp-content/uploads/fonts/roboto-700-normal-latin.woff2') format('woff2')} /* ================================================================ Grundlagen */ :root{ --akzent:#008FD6; --akzent-tief:#0A6FA8; /* Standardwelt: Objektservice */ --anthrazit:#1F2933; --grau:#EEF2F5; --linie:#D7DEE4; --rund:4px; /* kantig, nicht verspielt */ --schatten:0 10px 30px rgba(31,41,51,.13); } .th-w-th{--akzent:#008FD6;--akzent-tief:#0A6FA8} .th-w-delme{--akzent:#33689E;--akzent-tief:#2A567F} .th-w-monteur{--akzent:#BE6F22;--akzent-tief:#9C5A17} body,p,li,td,th,input,textarea,select,button, #page-container p,#page-container li,#page-container td,#page-container .et_pb_text,#page-container .et_pb_text p, #page-container .et_pb_blurb_description,#page-container .et_pb_toggle_content{font-family:'Roboto','Segoe UI',Arial,sans-serif!important} body{color:#52606D;font-size:17px;line-height:1.7;background:#FFFFFF; -webkit-font-smoothing:antialiased} /* Ueberschriften: Oswald in Versalien. Divis Theme-Optionen stehen auf Arial, sonst laedt Divi eine Schrift von fonts.gstatic.com nach. */ h1,h2,h3,h4,h5,h6, #page-container .et_pb_heading h1,#page-container .et_pb_heading h2,#page-container .et_pb_heading h3,#page-container .et_pb_heading h4, #page-container .et_pb_blurb_title,#page-container .et_pb_toggle_title{ font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;color:#1F2933;line-height:1.1; text-transform:uppercase;letter-spacing:.005em} h1,#page-container .et_pb_heading h1{font-weight:700!important;font-size:clamp(2.3rem,4.6vw,3.9rem)} h2,#page-container .et_pb_heading h2{font-weight:600!important;font-size:clamp(1.8rem,3vw,2.6rem)} h3,#page-container .et_pb_heading h3{font-weight:600!important;font-size:1.32rem;letter-spacing:.015em} h4,#page-container .et_pb_heading h4{font-weight:600!important;font-size:1.05rem;letter-spacing:.04em} #page-container a{color:#0A6FA8;text-decoration:none} #page-container a:hover{text-decoration:underline} #page-container strong,#page-container b{color:#1F2933;font-weight:500} /* Regel 2: alles auf derselben Kante. Keine mittigen Textinseln. */ #page-container .et_pb_row{width:92%;max-width:1360px} #page-container .th-papier{background:#EEF2F5} #page-container .th-anker{background:#1F2933} #page-container .th-anker h1,#page-container .th-anker h2,#page-container .th-anker h3,#page-container .th-anker h4{color:#FFFFFF!important} #page-container .th-anker p,#page-container .th-anker li{color:#C3CFDA} /* ==================================================================== Kicker */ #page-container .th-kick p{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:14px;letter-spacing:.18em; text-transform:uppercase;color:var(--akzent);margin:0 0 12px} #page-container .th-kick-hell p{color:#7FCBEE} /* Regel 1: Die Ueberschrift begrenzt sich selbst, der Block bleibt linksbuendig. 34ch, weil Oswald-Versalien breit laufen und sonst dreizeilig umbrechen. */ #page-container .th-kopfzeile .et_pb_heading h2{max-width:34ch} /* ============================================================== Kopfbereich */ .et-l--header .et_pb_section{padding:0!important} .et-l--header .et_pb_row{padding:0!important;width:92%;max-width:1360px; flex-wrap:nowrap!important;display:flex;align-items:center;min-height:86px} .et-l--header .th-kopfzeile .et_pb_column{width:auto!important;flex:0 0 auto; margin:0!important;padding:0!important} .et-l--header .th-topbar .et_pb_column{width:50%!important;flex:1 1 50%;margin:0!important} .et-l--header .th-topbar-rechts{text-align:right} .et-l--header .th-kopf-marke{flex:0 0 auto;margin-right:26px!important} /* Drei Klassen - sonst gewinnt die Sammelregel .th-kopfzeile .et_pb_column{flex:0 0 auto} und die Spalte waechst nicht. */ .et-l--header .th-kopfzeile .th-kopf-menue{flex:1 1 auto!important} .et-l--header .th-kopf-knopf{flex:0 0 auto;margin-left:18px!important; text-align:right} /* Der Knopf im Kopf ist kein Handlungsknopf im Inhalt - 17px/34px waren dort zu wuchtig und schoben die Zeile auseinander (Ole, 11.09.2026). */ /* Mit #page-container davor - die Grundregel bringt eine ID mit und liess sonst 10px Aussenabstand rechts stehen (gemessen 11.09.2026). */ #page-container .et-l--header .et_pb_button_module_wrapper{display:inline-block; margin:0!important} body #page-container .et-l--header a.et_pb_button.th-telknopf{padding:10px 20px!important; font-size:14.5px!important;letter-spacing:.03em!important} .et-l--header .th-logo img{max-height:50px;width:auto;display:block} .et-l--header{background:#FFFFFF;position:sticky;top:0;z-index:9000; border-bottom:3px solid #1F2933} .admin-bar .et-l--header{top:32px} /* Divi macht #page-container zum Scroll-Kontext, das verhindert sticky. Kein overflow-x auf html/body - das hebt das Haften wieder auf. */ #page-container{overflow:visible!important;overflow-x:clip!important} /* Dunkle Infoleiste ueber dem Kopf */ .et-l--header .th-topbar{background:#1F2933} .et-l--header .th-topbar .et_pb_row{min-height:0} .et-l--header .th-topbar p{margin:0;font-size:14px;color:#AFBCC6} .et-l--header .th-topbar a{color:#FFFFFF;font-weight:500} .et-l--header .th-topbar .et_pb_column{padding:10px 0!important} /* Menue mittig zwischen Logo und Telefonknopf. Divis .et_pb_menu__wrap schrumpft auf die Breite der Punkte, das Menue klebte dadurch links am Logo und rechts blieben 120 bis 190px frei (Ole, 17.09.2026). Nur am Desktop - darunter sitzt dort der Knopf fuer das Handymenue. */ @media (min-width:981px){ .et-l--header .th-menue .et_pb_menu_inner_container, .et-l--header .th-menue .et_pb_menu__wrap, .et-l--header .th-menue .et_pb_menu__menu, .et-l--header .th-menue .et_pb_menu__menu>nav{flex:1 1 auto!important; justify-content:center!important;width:100%} } /* Tablet quer (981-1180px): sonst brechen UEBER UNS und KONTAKT in eine zweite Zeile (gemessen bei 1024px, 17.09.2026). */ @media (min-width:981px) and (max-width:1180px){ .et-l--header .th-menue nav>ul>li>a{font-size:13.5px!important; letter-spacing:.01em!important;padding:10px 6px!important} body #page-container .et-l--header a.et_pb_button.th-telknopf{padding:9px 12px!important; font-size:13.5px!important} .et-l--header .th-logo img{max-height:40px!important} /* Divi gibt jedem Menuepunkt 11px Innenabstand links und rechts */ .et-l--header .th-menue .et-menu>li{padding-left:0!important; padding-right:0!important} .et-l--header .th-kopf-knopf{margin-left:10px!important} } /* Menue in Oswald-Versalien */ .et-l--header .th-menue .et_pb_menu__menu>nav>ul{display:flex;justify-content:center;gap:2px} .et-l--header .th-menue nav>ul>li>a{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:500;font-size:16px; letter-spacing:.04em;text-transform:uppercase;color:#1F2933; padding:10px 14px!important;display:block} .et-l--header .th-menue nav>ul>li>a:hover{color:#0A6FA8;opacity:1;text-decoration:none} .et-l--header .th-menue nav>ul>li.current-menu-item>a, .et-l--header .th-menue nav>ul>li.current-menu-ancestor>a{color:#008FD6; box-shadow:inset 0 -3px 0 #008FD6} /* Die Klappliste richtet sich nach dem laengsten Punkt, statt ihn umzubrechen. Divi gibt ihr feste 250px - damit standen "Immobilien- & Baudienstleistungen", "Brand- & Wasserschadenbeseitigung" und "Aussenanlagen- & Bueroreinigung" zweizeilig (Ole, 28.10.2026). */ .et-l--header .th-menue .et_pb_menu__menu>nav>ul>li>ul{border-top:3px solid var(--akzent); border-radius:0;box-shadow:var(--schatten);padding:8px; width:max-content!important;min-width:250px;max-width:360px} .et-l--header .th-menue ul li ul li a{font-family:'Roboto','Segoe UI',Arial,sans-serif;font-size:15px;font-weight:400; text-transform:none;letter-spacing:0;padding:9px 12px!important;width:auto; white-space:nowrap} .et-l--header .th-menue ul li ul li a:hover{background:#EEF2F5;color:#0A6FA8} .et-l--header .th-menue nav>ul>li.th-nav-delme>ul{border-top-color:#33689E} .et-l--header .th-menue nav>ul>li.th-nav-monteur>ul{border-top-color:#BE6F22} /* Handy-Menue: Divi haengt es an den naechsten Vorfahren mit position relative. Die ganze Kette muss static sein, sonst ist es nur so breit wie die Spalte. */ .et-l--header .et_pb_section,.et-l--header .et_pb_row,.et-l--header .et_pb_column, .et-l--header .et_pb_menu,.et-l--header .et_pb_menu_inner_container, .et-l--header .et_pb_menu__wrap,.et-l--header .et_mobile_nav_menu{position:static!important} .et-l--header .et_mobile_menu{position:absolute!important;left:0;right:0;top:100%; width:auto!important;border-top:3px solid var(--akzent);box-shadow:var(--schatten); padding:8px 20px} .et-l--header .mobile_menu_bar:before{color:#1F2933;font-size:30px} body .et-l--header .et_mobile_menu li a{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-weight:600!important; font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:#1F2933!important; border-bottom:1px solid #D7DEE4;padding:14px 4px} body .et-l--header .et_mobile_menu li li a{font-family:'Roboto','Segoe UI',Arial,sans-serif!important;font-weight:400!important; font-size:15px;text-transform:none;letter-spacing:0;color:#52606D!important;padding-left:18px} /* Die Sektion traegt nur das Skript fuer die Klappliste - sie darf nichts malen und keinen Platz brauchen. */ #page-container .et-l--header .th-menueschalter, #page-container .et-l--header .th-menueschalter .et_pb_row, #page-container .et-l--header .th-menueschalter .et_pb_module{padding:0!important;margin:0!important; min-height:0!important;display:block} /* Cookie-Banner: Zustimmen und Ablehnen sind gleichwertig. Complianz faerbt "Akzeptieren" ab Werk kraeftig und "Ablehnen" blass - der Zustimmen-Knopf darf aber nicht hervorgehoben sein (Ole, 11.11.2026). Beide bekommen deshalb dieselbe Farbe, dieselbe Schriftfarbe und dieselbe Breite. */ #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny{ background-color:#008FD6!important;border-color:#008FD6!important; color:#FFFFFF!important;font-weight:600!important} #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover, #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover{ background-color:#0A6FA8!important;border-color:#0A6FA8!important; color:#FFFFFF!important} /* Gleiche Breite, damit auch die Groesse nicht lenkt. */ #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons{display:flex;gap:10px} #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{ flex:1 1 0;min-width:0} /* Solange der Banner steht, sitzt die Barrierefreiheits-Schaltflaeche genau auf dem Knopf "Einstellungen ansehen" (beide unten rechts, der Knopf liegt mit z-index 100099 obendrauf). Sie rueckt deshalb hoch, bis der Banner weg ist - danach steht sie wieder an ihrem Platz (gemessen 11.11.2026). */ body:has(.cmplz-cookiebanner.cmplz-show) #dvmd_acsb_button{bottom:300px!important} @media (max-width:767px){ body:has(.cmplz-cookiebanner.cmplz-show) #dvmd_acsb_button{bottom:auto!important; top:96px!important} } /* ====================================================================== Hero */ #page-container .th-hero,#page-container .th-kopf{position:relative;overflow:hidden;background:#151D25} #page-container .th-hero .et_pb_row,#page-container .th-hero .et_pb_column,#page-container .th-hero .et_pb_module, #page-container .th-kopf .et_pb_row,#page-container .th-kopf .et_pb_column,#page-container .th-kopf .et_pb_module{position:static} #page-container .th-hero .th-kopfbild,#page-container .th-kopf .th-kopfbild{position:absolute!important;inset:0; margin:0!important;width:100%;height:100%;z-index:0} #page-container .th-hero .th-kopfbild .et_pb_image_wrap,#page-container .th-hero .th-kopfbild img, #page-container .th-kopf .th-kopfbild .et_pb_image_wrap,#page-container .th-kopf .th-kopfbild img{width:100%; height:100%;display:block} #page-container .th-hero .th-kopfbild img,#page-container .th-kopf .th-kopfbild img{object-fit:cover; object-position:center} /* Der Schleier liegt als eigenes span im Inhalt. Als :after der Sektion war er im Baum vorhanden und malte trotzdem nichts (gemessen 2026-09-10). */ #page-container .th-hero .et_pb_code,#page-container .th-kopf .et_pb_code, #page-container .th-hero .et_pb_code_inner,#page-container .th-kopf .et_pb_code_inner{position:static; padding:0;margin:0} #page-container .th-schleier{position:absolute;inset:0;z-index:1;pointer-events:none;display:block} /* Gespiegelt: das beklebte Fahrzeug bleibt links im Licht, der Text steht rechts auf der dunklen Seite (Ole, 11.09.2026). */ /* Kopfbild Betriebshof: Transporter und Tuer mit Logo liegen in der linken Haelfte und bleiben hell, dunkel wird es erst unter dem Text. */ #page-container .th-hero .th-schleier{background:linear-gradient(92deg,rgba(16,23,30,.12) 0%, rgba(16,23,30,.22) 51%,rgba(16,23,30,.84) 59%,rgba(16,23,30,.95) 100%)} #page-container .th-hero .th-kopfbild img{object-position:0% 45%} #page-container .th-hero .th-inhalt{margin-left:auto!important;max-width:52%; text-align:right} #page-container .th-hero .th-inhalt p,#page-container .th-hero .th-inhalt h1{margin-left:auto; text-align:right} /* Der Knopf ist inline-block - margin-left:auto greift da nicht. Die Ausrichtung kommt von der Spalte, der Faktenbalken nimmt sie zurueck. */ #page-container .th-hero>.et_pb_row>.et_pb_column{text-align:right} #page-container .th-hero .th-fakten .et_pb_column{text-align:left} #page-container .th-hero a.et_pb_button.th-inhalt{max-width:none;width:auto} #page-container .th-hero .et_pb_button_module_wrapper{margin:0 0 10px 14px!important; width:auto} #page-container .th-kopf .th-schleier{background:linear-gradient(92deg,rgba(16,23,30,.96), rgba(16,23,30,.62))} #page-container .th-hero .th-inhalt,#page-container .th-kopf .th-inhalt, #page-container .th-hero .th-fakten,#page-container .th-hero .th-fakten .et_pb_column, #page-container .th-hero .th-fakten .et_pb_module{position:relative!important;z-index:2} #page-container .th-hero h1{color:#FFFFFF!important;max-width:21ch} #page-container .th-hero .th-sub p{max-width:44ch} #page-container .th-kopf h1{color:#FFFFFF!important;max-width:24ch} #page-container .th-sub p{color:#C4D0D9;font-size:19px;max-width:46ch;margin-bottom:28px} /* Markenkarte links im Kopfbild: DELME-Logo und SHK-Zeichen, zusammen ein Link in den Sanitaerbereich (Ole, 14.10.2026). Die Karte liegt absolut ueber dem Foto - Zeile und Spalte der Sektion stehen auf position:static, Bezugspunkt ist deshalb die Sektion selbst. Der innere Kasten wiederholt die Breitenregel der Divi-Zeile, damit die Karte auf deren linker Kante sitzt. */ #page-container .th-heromarke{position:absolute;left:0;right:0;top:50%;z-index:3; transform:translateY(calc(-50% - 54px));pointer-events:none} #page-container .th-heromarke-innen{width:90%;max-width:1360px;margin:0 auto;text-align:left} #page-container a.th-heromarke-karte{pointer-events:auto;display:inline-block;position:relative; width:382px;max-width:100%;background:#FFFFFF;border-radius:4px;padding:24px 26px 20px; box-shadow:0 18px 44px rgba(8,14,20,.34);text-decoration:none; border-top:3px solid #33689E; animation:th-marke-rein .72s cubic-bezier(.22,.78,.3,1) .45s both} #page-container a.th-heromarke-karte:hover{box-shadow:0 22px 52px rgba(8,14,20,.42)} /* Die Fahne sitzt in der oberen rechten Ecke und ragt etwas heraus. */ #page-container .th-heromarke-neu{position:absolute;top:-13px;right:-10px; background:#008FD6;color:#FFFFFF;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:13px; text-transform:uppercase;letter-spacing:.09em;padding:5px 12px 4px;border-radius:3px; box-shadow:0 6px 16px rgba(8,14,20,.28)} #page-container .th-heromarke-logo{display:block;width:182px;height:auto;margin:0 0 17px} #page-container .th-heromarke-strich{display:block;height:1px;background:#D7DEE4;margin:0 0 16px} #page-container .th-heromarke-zeile{display:flex;align-items:center;gap:14px} #page-container .th-heromarke-zeile img{width:62px;height:62px;flex:none;display:block} #page-container .th-heromarke-zeile span{font-family:'Roboto','Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.4; color:#1F2933;font-weight:500} #page-container .th-heromarke-mehr{display:block;margin-top:17px;padding-top:14px; border-top:1px solid #D7DEE4;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:16px; text-transform:uppercase;letter-spacing:.04em;color:#33689E} #page-container a.th-heromarke-karte:hover .th-heromarke-mehr{color:#2A567F} @keyframes th-marke-rein{ from{opacity:0;transform:translate3d(-54px,0,0)} to{opacity:1;transform:none} } @media (prefers-reduced-motion:reduce){ #page-container a.th-heromarke-karte{animation:none} } /* Zwischen 981 und 1180px wird die helle Haelfte knapp - schmalere Karte. */ @media (min-width:981px) and (max-width:1180px){ #page-container a.th-heromarke-karte{width:324px;padding:19px 21px 17px} #page-container .th-heromarke-logo{width:158px;margin-bottom:14px} #page-container .th-heromarke-zeile img{width:55px;height:55px} #page-container .th-heromarke-zeile span{font-size:15px} #page-container .th-heromarke-mehr{font-size:15px} } /* Faktenbalken im Kopfbild - eigene dunkle Flaeche, sonst rechts unlesbar */ #page-container .th-fakten{position:relative;z-index:2;background:rgba(10,16,22,.92); border-top:3px solid var(--akzent);margin-top:20px} /* Trennlinie links statt rechts: so hat JEDE Spalte denselben Abstand zwischen Linie und Text - auch die erste (Ole, 11.09.2026). */ #page-container .th-fakten .et_pb_column{padding:26px 22px 28px 26px!important; border-left:1px solid rgba(255,255,255,.13)} #page-container .th-fakten .et_pb_row{padding-left:0!important;padding-right:0!important} #page-container .th-fakten h4,#page-container .th-fakten .et_pb_heading{margin-bottom:2px!important} #page-container .th-fakten h4{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-weight:600!important;color:#FFFFFF!important; font-size:17px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px; padding-bottom:0} #page-container .th-fakten p{color:#A8B8C4;font-size:14.5px;margin:0;padding:0} #page-container .th-fakten .et_pb_module{margin-bottom:0!important} /* ================================================== Bereiche: gewichtete Felder Keine drei gleich grossen Karten. Das Hauptgeschaeft bekommt die breite Kachel, die Nebenbereiche je eine schmale. */ /* Divi gibt den Spalten einer Zeile eine feste Hoehe. Erst height:auto laesst sie sich auf die hoechste Spalte dehnen - sonst steht jede Karte anders hoch da (gemessen 11.09.2026). */ #page-container .th-felder .et_pb_column{margin-bottom:20px!important;height:auto!important; align-self:stretch!important;display:flex;flex-direction:column} #page-container .th-felder .et_pb_column>.et_pb_module:last-child{margin-bottom:0} #page-container .th-feld{background:#FFFFFF;border:1px solid #D7DEE4;border-radius:var(--rund); overflow:hidden;border-top:6px solid var(--akzent);height:100%; transition:box-shadow .18s ease,transform .18s ease} #page-container .th-feld:hover{box-shadow:var(--schatten);transform:translateY(-3px)} /* Divi zentriert jeden Blurb-Inhalt in 550px. In der Kachel liess das links und rechts neben dem Bild Weiss stehen (gemessen 11.09.2026). */ #page-container .th-feld .et_pb_blurb_content,#page-container .th-karte .et_pb_blurb_content, #page-container .th-zeile .et_pb_blurb_content,#page-container .th-kontaktbox .et_pb_blurb_content{ max-width:none!important;margin:0!important;width:100%} #page-container .th-feld .et_pb_main_blurb_image{margin:0;display:block} #page-container .th-feld .et_pb_image_wrap img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} /* Divis Blurb rendert den Titel vor dem Inhalt. Die Markenzeile steht im Inhalt und landet dadurch UNTER der Ueberschrift. display:contents macht die Kinder der Beschreibung zu Flex-Kindern des Containers, dann laesst sich die Marke per order nach oben ziehen - der Rest braucht dafuer eine hoehere Ordnung als der Titel (gemessen 2026-09-11). */ /* Die ganze Kette auf Flex, damit der Container die Kachel fuellt - sonst hat margin-top:auto auf dem Link nichts, wovon es sich abstossen kann (gemessen 11.09.2026). */ #page-container .th-feld:not(.th-feld-quer), #page-container .th-feld:not(.th-feld-quer) .et_pb_blurb_content{display:flex; flex-direction:column;height:100%} #page-container .th-feld:not(.th-feld-quer) .et_pb_blurb_container{flex:1 1 auto} #page-container .th-feld .et_pb_blurb_container{padding:26px 30px 30px;display:flex; flex-direction:column} /* Divi nennt die Blurb-Ueberschrift et_pb_module_header, nicht et_pb_blurb_title - mit der falschen Klasse greift keine Regel (gemessen 2026-09-11). */ #page-container .th-feld .et_pb_blurb_description{display:contents} #page-container .th-feld .marke{order:1;margin:0 0 6px} #page-container .th-feld .et_pb_blurb_container>.et_pb_module_header{order:2;margin:0 0 10px; padding-bottom:0} #page-container .th-feld .et_pb_blurb_description>*:not(.marke){order:3} #page-container .th-feld .et_pb_blurb_description>p{margin-bottom:12px} #page-container .th-feld h4{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-size:1.32rem;font-weight:600!important; text-transform:uppercase;letter-spacing:.015em;margin-bottom:9px;color:#1F2933} #page-container .th-feld h4 a{color:#1F2933} #page-container .th-feld p{font-size:16px;margin-bottom:14px} #page-container .th-feld .marke{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--akzent);display:block;margin-bottom:7px} #page-container .th-feld .mehr{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;letter-spacing:.08em;font-size:14px; text-transform:uppercase;color:var(--akzent);display:inline-block} /* wpautop legt den Link in ein eigenes . Flex-Kind ist deshalb dieses , nicht der Link - margin-top:auto muss dorthin, sonst haengt der Link am Text statt am Kachelboden (gemessen 11.09.2026). */ #page-container .th-feld .et_pb_blurb_description>*:last-child{ margin-top:auto;margin-bottom:0} #page-container .th-feld ul{list-style:none;padding:0;margin:0 0 16px;display:grid; grid-template-columns:1fr 1fr;gap:4px 24px;font-size:16px} #page-container .th-feld li{padding-left:17px;position:relative} #page-container .th-feld li:before{content:"";position:absolute;left:0;top:12px;width:7px;height:2px; background:var(--akzent)} /* Die breite Kachel: Bild links, Inhalt rechts */ #page-container .th-feld-quer .et_pb_blurb_content{display:flex;align-items:stretch; max-width:none} #page-container .th-feld-quer .et_pb_main_blurb_image{flex:0 0 44%} #page-container .th-feld-quer .et_pb_image_wrap{height:100%} #page-container .th-feld-quer .et_pb_image_wrap img{height:100%;aspect-ratio:auto; min-height:280px;max-height:360px} #page-container .th-feld-quer .et_pb_blurb_container{flex:1 1 auto;display:flex;flex-direction:column; justify-content:center} #page-container .th-feld-th{--akzent:#008FD6;--akzent-tief:#0A6FA8} #page-container .th-feld-delme{--akzent:#33689E;--akzent-tief:#2A567F} #page-container .th-feld-monteur{--akzent:#BE6F22;--akzent-tief:#9C5A17} /* ============================== Leistungen: Zeilen mit Trennlinien, ohne Zahlen */ #page-container .th-zeilen{border-top:2px solid #1F2933} #page-container .th-zeilen .et_pb_column{margin:0!important} #page-container .th-zeile{padding:26px 0;border-bottom:1px solid #D7DEE4} #page-container .th-zeile .et_pb_blurb_container{padding:0} #page-container .th-zeile h4{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-size:1.12rem;font-weight:600!important; text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px;color:#1F2933} #page-container .th-zeile p{margin:0;font-size:16px} /* Leistungen mit Bild - kantige Kacheln, gleiche Kante */ #page-container .th-karten .et_pb_column{margin-bottom:20px!important} #page-container .th-karte{background:#FFFFFF;border:1px solid #D7DEE4;border-radius:var(--rund); overflow:hidden;height:100%;border-top:4px solid var(--akzent); transition:box-shadow .18s ease,transform .18s ease} #page-container .th-karte:hover{box-shadow:var(--schatten);transform:translateY(-3px)} #page-container .th-karte .et_pb_main_blurb_image{margin:0;display:block} #page-container .th-karte .et_pb_image_wrap img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} #page-container .th-karte .et_pb_blurb_container{padding:24px 26px 28px} #page-container .th-karte h4{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-size:1.15rem;font-weight:600!important; text-transform:uppercase;letter-spacing:.02em;margin-bottom:7px;color:#1F2933} #page-container .th-karte p{font-size:15.5px;line-height:1.65;margin:0} /* ================================ Text neben Bild und Ueberschrift neben Text Die Lesebreite entsteht aus der schmalen SPALTE, nicht aus max-width. */ #page-container .th-split .th-bild img{width:100%;border-radius:var(--rund);aspect-ratio:4/3; object-fit:cover;display:block} #page-container .th-check ul{list-style:none;padding:0;margin:6px 0 18px} #page-container .th-check li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16px} #page-container .th-check li:before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px; background:var(--akzent)} /* ================================================================= Zulassung */ #page-container .th-zulassung{background:#FFFFFF;border:1px solid #D7DEE4;border-left:6px solid var(--akzent);border-radius:var(--rund);padding:34px 36px} #page-container .th-zulassung h2{font-size:1.5rem;margin-bottom:14px} #page-container .th-zulassung blockquote{margin:16px 0;padding:18px 22px;background:#EEF2F5; border:0;border-left:3px solid var(--akzent);font-size:15.5px;font-style:normal; color:#1F2933} #page-container .th-zulassung .th-hinweis{font-size:15px;color:#52606D;margin:14px 0 0} #page-container .th-siegel{display:inline-block;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:13px; letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF; background:var(--akzent);padding:8px 16px;margin-bottom:16px} /* ================================================================== Tabelle */ #page-container .th-tabelle-huelle{overflow-x:auto} #page-container .th-tabelle table{width:100%;border-collapse:collapse;background:#FFFFFF; border:1px solid #D7DEE4;font-size:15.5px} #page-container .th-tabelle th,#page-container .th-tabelle td{padding:14px 18px;text-align:left; border-bottom:1px solid #D7DEE4;vertical-align:top} #page-container .th-tabelle th{width:33.333%;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:14px; text-transform:uppercase;letter-spacing:.04em;color:#1F2933;background:#EEF2F5} #page-container .th-tabelle tr:last-child th,#page-container .th-tabelle tr:last-child td{border-bottom:0} /* =================================================================== Fragen */ #page-container .th-frage{background:#FFFFFF;border:1px solid #D7DEE4;border-radius:var(--rund); margin-bottom:14px!important;overflow:hidden} #page-container .th-frage .et_pb_toggle_title{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-weight:600!important; font-size:17px;text-transform:uppercase;letter-spacing:.015em;color:#1F2933; padding:18px 52px 18px 22px;line-height:1.32} #page-container .th-frage .et_pb_toggle_content{padding:0 22px 20px;font-size:15.5px} #page-container .th-frage .et_pb_toggle_content p{margin:0} #page-container .th-frage.et_pb_toggle_open{border-color:var(--akzent);border-top:3px solid var(--akzent)} #page-container .th-frage .et_pb_toggle_title:before{color:var(--akzent);font-size:20px;right:20px} /* ================================================================== Knoepfe */ #page-container .et_pb_button_module_wrapper{display:inline-block;margin:0 10px 10px 0!important} #page-container .et_pb_button{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-weight:600!important; padding:17px 34px!important;border-radius:var(--rund)!important; font-size:16px!important;letter-spacing:.05em!important;text-transform:uppercase; transition:transform .16s,box-shadow .16s} #page-container .et_pb_button:hover{transform:translateY(-2px);box-shadow:var(--schatten); text-decoration:none} #page-container .et_pb_button:after,#page-container .et_pb_button:before{display:none!important} /* ====================================================================== CTA */ /* Zentriert - die einzige Ausnahme auf der Seite. Damit sie nicht wie ein Versehen aussieht, ist ALLES im Block zentriert: Ueberschrift, Text und Knoepfe (Ole, 11.09.2026). */ #page-container .th-cta,#page-container .th-cta .et_pb_column{text-align:center} /* Divi setzt text-align je Textmodul - ohne !important bleibt der Absatz linksbuendig, obwohl die Spalte zentriert ist. */ #page-container .th-cta .et_pb_text,#page-container .th-cta .et_pb_text_inner, #page-container .th-cta p,#page-container .th-cta h2{text-align:center!important} #page-container .th-cta{background:var(--akzent-tief)} #page-container .th-cta h2{color:#FFFFFF!important;max-width:30ch; margin-left:auto;margin-right:auto} #page-container .th-cta p{color:rgba(255,255,255,.9);font-size:19px;max-width:56ch; margin:0 auto 30px} /* Symmetrischer Abstand: die Grundregel setzt 10px nur nach rechts, damit stuenden zwei Knoepfe neben der Mitte. */ #page-container .th-cta .et_pb_button_module_wrapper{margin:0 7px 0!important} #page-container .th-cta .et_pb_column>*:last-child{margin-bottom:0!important} body #page-container .et_pb_section.th-cta .et_pb_button{background-color:#FFFFFF!important; color:var(--akzent-tief)!important;border-color:#FFFFFF!important} body #page-container .et_pb_section.th-cta .et_pb_button:hover{color:var(--akzent-tief)!important; background-color:#FFFFFF!important} /* .et_pb_button.th-geist, NICHT .th-geist .et_pb_button - die eigene Klasse landet auf demselben wie .et_pb_button. */ body #page-container .et_pb_section.th-cta .et_pb_button.th-geist{background-color:rgba(0,0,0,0)!important; color:#FFFFFF!important;border-color:rgba(255,255,255,.7)!important} body #page-container .et_pb_section.th-cta .et_pb_button.th-geist:hover{color:#FFFFFF!important; background-color:rgba(255,255,255,.14)!important} /* Formularkasten auf der Kontaktseite - im Fussbereich liegt eine eigene Fassung, deshalb ein eigener Name. */ #page-container .th-formfeld{background:#EEF2F5;padding:34px!important} #page-container .th-formfeld .et_pb_contact_form_container{background:none!important; border:0!important;padding:0!important;margin:0} #page-container .th-formfeld .et_pb_contact_field{padding:0 0 12px!important; width:100%!important;max-width:100%;float:none} #page-container .th-formfeld input[type=text],#page-container .th-formfeld input[type=email], #page-container .th-formfeld textarea{background:#FFFFFF!important} #page-container .th-formfeld .et_pb_contact_field[data-type="text"] textarea{min-height:150px} /* ================================================================= Kontakt */ #page-container .th-kontaktkarte{background:#FFFFFF;border:1px solid #D7DEE4; border-top:5px solid var(--akzent);border-radius:var(--rund);padding:28px 28px 30px; height:100%} #page-container .th-kontaktkarte h3{font-size:1.2rem;margin:0 0 4px} #page-container .th-kontaktkarte .th-zweck{font-size:14.5px;color:#8996A3;margin-bottom:14px} #page-container .th-kontaktkarte ul{list-style:none;padding:0;margin:0} #page-container .th-kontaktkarte li{padding:10px 0;border-top:1px solid #D7DEE4;font-size:16px; display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} #page-container .th-kontaktkarte li span{color:#8996A3;font-size:14px} #page-container .th-kontaktkarte a{font-weight:500;word-break:break-word} /* Formular - Divis eigene Regeln brauchen #page-container davor */ #page-container .et_pb_contact_form_container{background:#FFFFFF;border:1px solid #D7DEE4; border-top:5px solid var(--akzent);border-radius:var(--rund);padding:30px 30px 24px} #page-container .et_pb_contact_field{display:block!important;padding:0 1.5% 18px!important} #page-container .et_pb_contact_field[data-type="text"]{width:100%!important} #page-container .et_pb_contact_field[data-type="text"] textarea{min-height:170px} #page-container .et_pb_contact_form_label{display:block;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:13px; text-transform:uppercase;letter-spacing:.06em;color:#1F2933;margin-bottom:6px} #page-container .et_pb_contact_form input[type=text],#page-container .et_pb_contact_form input[type=email], #page-container .et_pb_contact_form textarea{background:#EEF2F5!important;border:1px solid #D7DEE4!important; border-radius:var(--rund)!important;padding:13px 15px!important;font-size:16px!important; color:#1F2933!important;width:100%} #page-container .et_pb_contact_form input:focus,#page-container .et_pb_contact_form textarea:focus{ border-color:var(--akzent)!important;outline:2px solid rgba(0,143,214,.16)} /* Der Absendeknopf ist ein button und stand mit der Rechenaufgabe in einem Flex-Container - er wurde auf deren Hoehe gestreckt (91px statt 54). */ body #page-container .et_pb_section .et_pb_contact_form .et_pb_button, body #page-container .et_pb_section button.et_pb_contact_submit{background:var(--akzent-tief)!important; color:#FFFFFF!important;border:2px solid var(--akzent-tief)!important; width:auto!important;height:auto!important;min-height:0!important; display:inline-block!important;white-space:nowrap!important;line-height:1.25!important; padding:16px 30px!important;align-self:flex-start!important;flex:0 0 auto!important} #page-container .et_pb_button_wrapper{display:flex;align-items:flex-start} #page-container .et_pb_contact_right{display:flex;align-items:center;gap:12px;justify-content:flex-start} #page-container .et_pb_contact_right p{margin:0} #page-container .et_pb_contact_captcha{background:#EEF2F5!important;border:1px solid #D7DEE4!important; border-radius:var(--rund)!important;padding:13px 15px!important} #page-container .et_pb_contact_captcha_question{color:#52606D;font-size:15px} /* Karte auf Klick - laedt Google erst nach einer Zustimmung */ #page-container .mn-maps{border-radius:var(--rund);overflow:hidden} #page-container .mn-karte-halt{background:#FFFFFF;border:1px solid #D7DEE4; border-top:5px solid var(--akzent);padding:38px 28px} #page-container .mn-karte-halt strong{display:block;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-size:1.15rem; text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;color:#1F2933} #page-container .mn-karte-halt p{max-width:62ch;margin:0 0 16px;font-size:15.5px} #page-container .mn-karte-halt button{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-weight:600;font-size:15px; letter-spacing:.05em;text-transform:uppercase;background:var(--akzent-tief);color:#FFFFFF; border:0;border-radius:var(--rund);padding:15px 28px;cursor:pointer} #page-container .mn-karte-halt button:hover{background:var(--akzent)} #page-container .mn-karte-extern{margin-top:14px!important;font-size:14.5px} #page-container .mn-maps iframe{display:block;width:100%;min-height:440px;border:0} /* ================================================================= Galerie */ #page-container .th-galerie .et_pb_gallery_items{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} #page-container .th-galerie .et_pb_gallery_item{width:100%!important;margin:0!important; border-radius:var(--rund);overflow:hidden} #page-container .th-galerie .et_pb_gallery_image img{width:100%;aspect-ratio:4/3;object-fit:cover; display:block;transition:transform .3s ease} #page-container .th-galerie .et_pb_gallery_item:hover img{transform:scale(1.05)} /* ============================================================== Rechtstexte */ #page-container .th-rechtstext h2{font-size:1.35rem;margin:34px 0 10px} #page-container .th-rechtstext h2:first-child{margin-top:0} #page-container .th-rechtstext p{font-size:16px;margin-bottom:14px} #page-container .mn-offen{background:#FEF3F2;border:1px solid #F5B5AE;border-left:6px solid #C0392B; border-radius:var(--rund);padding:26px 28px;margin-bottom:34px} #page-container .mn-offen strong{display:block;color:#8E241A;font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-size:1.05rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} #page-container .mn-offen p,#page-container .mn-offen li{font-size:15px;color:#6B2A22} #page-container .mn-offen ul{margin:10px 0 10px 20px} #page-container .mn-offen li{margin-bottom:7px} /* Markenband unter dem Seitenkopf: Logo links, Satz rechts, eine Linie. Ein mittiger Text neben einem linken Logo sah nach Zufall aus. */ #page-container .th-markenband .et_pb_column{display:flex;flex-direction:column; justify-content:center;margin-bottom:0!important} #page-container .th-markenband .et_pb_column:first-child{border-right:1px solid #D7DEE4; padding-right:36px!important} #page-container .th-markenband .et_pb_column:last-child{padding-left:36px!important} #page-container .th-markenband .et_pb_module{margin-bottom:0!important} #page-container .th-markenband p{font-size:17.5px;line-height:1.72;margin:0;max-width:70ch} /* Logo C liegt quer (5:1). Ueber die Breite begrenzen, nicht ueber die Hoehe - sonst laeuft es aus der Spalte (25.09.2026). */ #page-container .th-delme-logo img{width:100%;max-width:290px;height:auto;display:block} /* Fuelltext neben einer angebrochenen Kachelreihe */ #page-container .th-fuelltext{padding:4px 0 0 12px!important} #page-container .th-fuelltext h3{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-size:1.22rem; font-weight:600!important;margin:0 0 12px;color:#1F2933} #page-container .th-fuelltext h3:after{content:"";display:block;width:46px;height:3px; background:var(--akzent);margin-top:12px} #page-container .th-fuelltext p{font-size:16px;line-height:1.72;margin:0 0 12px} #page-container .th-fuelltext .et_pb_module:last-child p{margin-bottom:0} /* ================================================================ Fussbereich */ /* Aufbau nach Oles Vorlage: heller Kontaktblock mit Formular, Karte auf Klick, dunkler Linkbereich, schmale Leiste. KEINE Copyright-Zeile. */ .et-l--footer .et_pb_row{padding:0!important;width:92%;max-width:1360px; align-items:flex-start} /* --- 1. Kontaktblock, heller Grund --------------------------------------- */ .et-l--footer .th-fusskontakt .et_pb_column{margin:0!important} .et-l--footer .th-fusskontakt .et_pb_column:first-child{ width:46%!important;padding-right:5%!important} .et-l--footer .th-fusskontakt .et_pb_column:last-child{width:54%!important} .et-l--footer .th-fusskontakt h2{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-size:36px; color:#1F2933!important;margin:0 0 14px;max-width:22ch} .et-l--footer .th-fusskontakt .th-kick p{color:#008FD6} .et-l--footer .th-fusskontakt p{color:#52606D;font-size:16.5px;line-height:1.75} #page-container .et-l--footer .th-fusskontakt a{color:#0A6FA8} #page-container .et-l--footer .th-fusskontakt a:hover{color:#008FD6} /* Kontaktkasten: Symbol in eigener Flaeche links, Text daneben. */ .et-l--footer .th-kontaktbox{background:#EEF2F5;border-left:3px solid #008FD6; padding:15px 18px 15px 74px!important;margin:0 0 12px!important; position:relative;min-height:74px;text-align:left} .et-l--footer .th-kontaktbox:before{content:"☎︎";position:absolute;left:15px;top:15px; width:44px;height:44px;background:#1F2933;color:#FFFFFF;font-size:21px; line-height:44px;text-align:center;font-family:sans-serif} .et-l--footer .th-kontaktbox.hotline:before{content:"☏︎";font-size:25px} .et-l--footer .th-kontaktbox.mail:before{content:"✉︎"} .et-l--footer .th-kontaktbox.ort:before{content:"⌂";font-size:26px} .et-l--footer .th-kontaktbox.zeit:before{content:"◷";font-size:24px} .et-l--footer .th-kontaktbox .et_pb_module_header{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important; font-weight:600!important;font-size:13px!important;letter-spacing:.14em; text-transform:uppercase;color:#52606D!important;margin:0 0 3px!important; padding:0!important} .et-l--footer .th-kontaktbox p{margin:0;font-size:17px;color:#1F2933; line-height:1.5;font-weight:500} #page-container .et-l--footer .th-kontaktbox a{color:#1F2933;font-weight:600} #page-container .et-l--footer .th-kontaktbox:last-child{margin-bottom:0!important} .et-l--footer .th-kontaktbox span{font-size:14.5px;color:#52606D;font-weight:400} /* Formular im grauen Kasten, alle Felder untereinander. */ .et-l--footer .th-formkasten{background:#EEF2F5;padding:30px!important} .et-l--footer .th-formkasten>.et_pb_text{margin-bottom:14px!important} /* Keine zweite Karte im Kasten: der graue Kasten IST die Karte. Ohne den #page-container -Vorsatz bleiben Grund und Rahmen der Divi-Grundregel stehen, und die Beschriftungen kleben an deren Kante (gesehen 11.09.2026). */ #page-container .et-l--footer .th-formkasten .et_pb_contact_form_container{ background:none!important;border:0!important;padding:0!important;margin:0} #page-container .et-l--footer .th-formkasten .et_pb_contact_main_title{font-family:'Oswald','Arial Narrow',Impact,sans-serif!important; font-size:15px!important;font-weight:600!important;letter-spacing:.14em; text-transform:uppercase;color:#52606D!important;margin:0 0 18px!important; padding:0 0 14px!important;border-bottom:1px solid #D7DEE4} #page-container .et-l--footer .th-formkasten .et_pb_contact_field{padding:0 0 6px!important; width:100%!important;max-width:100%;float:none} #page-container .et-l--footer .th-formkasten .et_pb_contact_form_label{margin-bottom:3px} #page-container .et-l--footer .th-formkasten input[type=text], #page-container .et-l--footer .th-formkasten input[type=email]{padding:11px 15px!important} /* Beide Spalten auf dieselbe Hoehe. Das Textfeld nimmt die Differenz auf, damit der graue Kasten genau mit dem letzten Kontaktkasten endet - ohne dass eine feste Hoehe im CSS steht. */ #page-container .et-l--footer .th-fusskontakt{align-items:stretch} #page-container .et-l--footer .th-formkasten{display:flex;flex-direction:column} #page-container .et-l--footer .th-formkasten .et_pb_contact_form_container, #page-container .et-l--footer .th-formkasten .et_pb_contact, #page-container .et-l--footer .th-formkasten .et_pb_contact_form{flex:1 1 auto; display:flex;flex-direction:column} #page-container .et-l--footer .th-formkasten .et_pb_contact_field[data-type="text"]{ flex:1 1 auto;display:flex!important;flex-direction:column} #page-container .et-l--footer .th-formkasten .et_pb_contact_field[data-type="text"] textarea{ flex:1 1 auto;min-height:76px!important;height:auto} .et-l--footer .th-formkasten input[type=text], .et-l--footer .th-formkasten input[type=email], .et-l--footer .th-formkasten textarea{background:#FFFFFF!important} /* --- 2. Karte auf Klick -------------------------------------------------- */ /* Volle Fensterbreite. Divi setzt die Zeilenbreite mit ID-Auswahl (#page-container .et_pb_row_x{width:90%}) - ohne #page-container und !important bleibt die Karte in der 1360er-Spur stehen. Die Grundgrafik haengt bau_th.grund_css() an, ihre Adresse steht erst nach dem Hochladen fest. */ #page-container .et-l--footer .th-fusskarte{background-color:#EEF2F5;background-size:cover; background-position:center;background-repeat:no-repeat} #page-container .et-l--footer .th-fusskarte .et_pb_row{width:100%!important; max-width:none!important;margin:0!important} #page-container .et-l--footer .th-fusskarte .et_pb_column{padding:0!important; margin:0!important;width:100%!important} #page-container .et-l--footer .th-fusskarte .et_pb_code, #page-container .et-l--footer .th-fusskarte .et_pb_code_inner{padding:0;margin:0} #page-container .et-l--footer .th-fusskarte .mn-maps{border-radius:0;max-width:none; width:92%;max-width:1360px;margin:0 auto} /* Der Hinweiskasten steht mittig auf dem Plan, mit einer Nadel obendrauf. Ole am 11.09.2026: der Block soll auffallen, nicht nur dastehen. */ #page-container .et-l--footer .th-fusskarte .mn-karte-halt{position:relative; max-width:640px;margin:0 auto;background:#FFFFFF;border:1px solid #D7DEE4; border-top:5px solid var(--akzent);border-radius:var(--rund); padding:64px 44px 44px;text-align:center; box-shadow:0 22px 60px rgba(16,23,30,.22)} #page-container .et-l--footer .th-fusskarte .mn-karte-halt:before{content:""; position:absolute;left:50%;top:22px;width:30px;height:30px;margin-left:-15px; background:var(--akzent);border-radius:50% 50% 50% 0; transform:rotate(-45deg);box-shadow:0 5px 14px rgba(16,23,30,.3)} #page-container .et-l--footer .th-fusskarte .mn-karte-halt:after{content:""; position:absolute;left:50%;top:31px;width:10px;height:10px;margin-left:-5px; background:#FFFFFF;border-radius:50%} #page-container .et-l--footer .th-fusskarte .mn-karte-halt strong{font-size:1.3rem} #page-container .et-l--footer .th-fusskarte .mn-karte-halt p{max-width:48ch; margin-left:auto;margin-right:auto} #page-container .et-l--footer .th-fusskarte .mn-karte-halt button{margin-top:4px} /* --- 3. Dunkler Linkbereich ---------------------------------------------- */ .et-l--footer{background:#1F2933} .et-l--footer .th-fusszeile h4,.et-l--footer .th-fussleiste h4{ font-family:'Oswald','Arial Narrow',Impact,sans-serif!important;font-weight:600!important;font-size:14px; letter-spacing:.14em;text-transform:uppercase;color:#008FD6!important; margin:0 0 14px!important} #page-container .et-l--footer .th-fusszeile .et_pb_heading{margin-bottom:0!important} #page-container .et-l--footer .th-fusszeile .et_pb_text{margin-bottom:26px!important} #page-container .et-l--footer .th-fusszeile .et_pb_column>*:last-child{margin-bottom:0!important} .et-l--footer .th-fusszeile p{color:#AEBCC8;font-size:15.5px;line-height:1.9} #page-container .et-l--footer .th-fusszeile a{color:#DCE5EC} #page-container .et-l--footer .th-fussleiste a{color:#AEBCC8} #page-container .et-l--footer .th-fusszeile a:hover,#page-container .et-l--footer .th-fussleiste a:hover{color:#008FD6} .et-l--footer .th-fuss-marke{padding-right:6%!important} .et-l--footer .th-fuss-logo img{max-height:56px;width:auto;margin-bottom:18px} .et-l--footer .th-fuss-delme img{width:100%;max-width:190px;height:auto; margin:2px 0 16px} /* --- 4. Fussleiste ------------------------------------------------------- */ .et-l--footer .th-fussleiste{border-top:1px solid rgba(255,255,255,.1)} .et-l--footer .th-fussleiste .et_pb_column{margin:0!important;width:50%!important; display:flex;align-items:center} .et-l--footer .th-fussmenue,.et-l--footer .th-fussmenue .et_pb_menu__wrap, .et-l--footer .th-fussmenue .et_pb_menu__menu,.et-l--footer .th-fussmenue nav, .et-l--footer .th-fussmenue .et_pb_menu_inner_container{background:transparent!important} .et-l--footer .th-fussmenue{width:100%} .et-l--footer .th-fussmenue nav ul{display:flex;gap:22px;flex-wrap:wrap} #page-container .et-l--footer .th-fussmenue nav ul li a{font-family:'Oswald','Arial Narrow',Impact,sans-serif;font-size:14px; text-transform:uppercase;letter-spacing:.05em;color:#AEBCC8;padding:0} .et-l--footer .th-fussmenue nav ul li a:hover{color:#FFFFFF;opacity:1} /* Rechts Platz lassen: der Knopf des Accessibility-Bundles klebt fixed unten rechts und lag sonst auf dem Media-Nord-Logo. */ .et-l--footer .th-mn{justify-content:flex-end;padding-right:60px!important} .et-l--footer .th-mn img{max-height:58px;width:auto;max-width:100%;display:block} .et-l--footer .th-mn .et_pb_image{margin:0} /* ============================================= Firmenblock: ein Raster Kopfspalte und Beschriftungsspalte der Tabelle stehen auf derselben Kante. Ohne Rinne, sonst faengt der Text 20px zu weit rechts an. */ #page-container .th-firmenkopf .et_pb_column{margin-right:0!important} /* 18px sind die Polsterung der Tabellenzelle darunter - ohne sie steht der Kopf 18px weiter links als die Beschriftungen. */ #page-container .th-firmenkopf .et_pb_column:first-child{width:33.333%!important; padding:0 40px 0 18px!important} #page-container .th-firmenkopf .et_pb_column:last-child{width:66.667%!important; padding-left:18px!important} #page-container .th-firmenkopf{margin-bottom:34px!important} /* ================================================================== Anhang */ #page-container .th-anhang,#page-container .th-anhang .et_pb_row,#page-container .th-anhang .et_pb_column, #page-container .th-anhang .et_pb_module{padding:0!important;margin:0!important;height:0; overflow:hidden} /* ============================================================== Umbruchpunkte */ /* Bis 1340px das Menue enger - bei 1280px brach KONTAKT sonst in eine zweite Zeile, seit der Telefonknopf an der rechten Kante steht (17.09.2026). */ @media (max-width:1340px){ .et-l--header .th-menue nav>ul>li>a{font-size:14.5px;padding:10px 9px!important} .et-l--header .th-logo img{max-height:44px} } @media (max-width:980px){ /* Die Spiegelung des Kopfbildes braucht Breite. Auf dem Telefon steht der Text wieder links und ueber die volle Breite. */ #page-container .th-hero .th-inhalt{max-width:none!important;margin-left:0!important; text-align:left} #page-container .th-hero .th-inhalt p,#page-container .th-hero .th-inhalt h1{margin-left:0; text-align:left} #page-container .th-hero>.et_pb_row>.et_pb_column{text-align:left} #page-container .th-hero .et_pb_button_module_wrapper{margin:0 14px 10px 0!important} #page-container .th-hero .th-kopfbild img{object-position:center} #page-container .th-hero .th-schleier{background:linear-gradient(180deg,rgba(16,23,30,.86) 0%, rgba(16,23,30,.93) 100%)} /* Auf Tablet und Telefon kein Platz neben dem Text: die Karte steht im normalen Fluss unter den Knoepfen. */ #page-container .th-heromarke{position:relative;transform:none;margin-top:24px; left:auto;right:auto;top:auto} #page-container .th-heromarke-innen{width:100%;max-width:none} #page-container a.th-heromarke-karte{width:400px;animation:none} body{font-size:16px} #page-container .th-galerie .et_pb_gallery_items{grid-template-columns:repeat(3,1fr)} #page-container .th-sub p{font-size:17px} /* Das Flex sitzt auf .et_pb_blurb_content, nicht auf der Kachel selbst - mit der falschen Klasse blieb die breite Kachel auf dem Handy zweispaltig und ragte rechts heraus (gemessen 2026-09-11). */ #page-container .th-feld-quer .et_pb_blurb_content{display:block} #page-container .th-feld-quer .et_pb_main_blurb_image{flex:none;width:100%} #page-container .th-feld-quer .et_pb_image_wrap img{aspect-ratio:16/10;min-height:0; max-height:none;height:auto} #page-container .th-fakten .et_pb_column{border-right:0;border-bottom:1px solid rgba(255,255,255,.13); padding:20px 0!important} #page-container .th-fakten .et_pb_column:last-child{border-bottom:0} .et-l--footer .th-mn{text-align:left;padding-right:0;margin-top:22px} .et-l--header .th-kopf-knopf{display:none} .et-l--header .th-topbar{display:none} /* Kopfleiste auf dem Telefon: Divi setzt der Sektion trotz 0px im Modul 48px Polster oben und unten, der Balken war dadurch 185px hoch (gemessen 28.10.2026). Logo groesser, Burger an die rechte Kante. */ /* Mit #page-container davor - sonst gewinnt #page-container .et_pb_section aus dem 767er Block, weil eine ID jede Klasse schlaegt (gemessen 28.10.2026). */ #page-container .et-l--header .et_pb_section{padding-top:0!important;padding-bottom:0!important} .et-l--header .th-kopfzeile{padding:9px 0!important} .et-l--header .th-logo img{max-height:58px!important} .et-l--header .th-kopf-marke{flex:0 0 auto!important;width:auto!important} .et-l--header .th-kopf-menue{flex:1 1 auto!important;width:auto!important} .et-l--header .th-menue .et_pb_menu_inner_container, .et-l--header .th-menue .et_pb_menu__wrap{justify-content:flex-end!important} .et-l--header .th-menue .et_pb_menu_inner_container{width:100%} .et-l--header .th-menue .et_mobile_nav_menu{margin-right:0} /* Die Klappliste stand komplett offen und lief unten aus dem Bild. Jetzt sind die Unterpunkte zu, ein Pfeil klappt sie auf, und die Liste selbst scrollt, wenn mehrere offen sind. */ .et-l--header .et_mobile_menu{max-height:calc(100vh - 96px);overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .et-l--header .et_mobile_menu li.menu-item-has-children{position:relative} .et-l--header .et_mobile_menu li.menu-item-has-children>ul{display:none!important} .et-l--header .et_mobile_menu li.th-offen>ul{display:block!important} .et-l--header .th-auf{position:absolute;right:0;top:0;width:48px;height:46px; padding:0;border:0;background:none;cursor:pointer;z-index:3;appearance:none} .et-l--header .th-auf:before{content:"";position:absolute;left:50%;top:50%; width:9px;height:9px;margin:-7px 0 0 -5px;border-right:2px solid #52606D; border-bottom:2px solid #52606D;transform:rotate(45deg);transition:transform .18s} .et-l--header .et_mobile_menu li.th-offen>.th-auf:before{transform:rotate(-135deg); margin-top:-2px} .et-l--header .et_mobile_menu li.menu-item-has-children>a{padding-right:52px} } @media (max-width:767px){ /* Rechenfrage und Absendeknopf untereinander - nebeneinander ragten sie auf 390px 135px nach rechts heraus (gemessen 11.09.2026). */ #page-container .et_contact_bottom_container{float:none!important;width:100%;max-width:100%; display:block;margin-top:10px} #page-container .et_pb_contact_right{flex-wrap:wrap;margin-bottom:14px} #page-container .et_pb_button_wrapper{display:block;width:100%} body #page-container .et_pb_section button.et_pb_contact_submit{width:100%;display:block;text-align:center; box-sizing:border-box;max-width:100%;padding-left:12px!important;padding-right:12px!important} #page-container .et_pb_section{padding-top:48px!important;padding-bottom:48px!important} #page-container .th-hero{padding-top:64px!important;padding-bottom:0!important} #page-container .th-kopf{padding-top:54px!important;padding-bottom:54px!important} #page-container .th-anhang{padding:0!important} #page-container .th-galerie .et_pb_gallery_items{grid-template-columns:repeat(2,1fr);gap:11px} #page-container .th-tabelle th{width:42%} #page-container .th-feld ul{grid-template-columns:1fr} #page-container .et_pb_button_module_wrapper{display:block;margin-right:0!important} #page-container .th-cta .et_pb_button_module_wrapper{margin:0 0 12px!important} #page-container .et_pb_button{display:block;text-align:center} #page-container .th-kontaktkarte li{flex-direction:column;gap:2px} } #page-container .et-l--footer .th-fusskarte{background-image:linear-gradient(rgba(238,242,245,.3),rgba(238,242,245,.3)),url(https://th-delmenhorst.de/wp-content/uploads/2026/09/stadtplan-hintergrund.png)}