@charset "UTF-8";
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url('https://media-nord.com/wp-content/uploads/fonts/oswald-variabel-latin.woff2') format('woff2')} @font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('https://media-nord.com/wp-content/uploads/fonts/opensans-variabel-latin.woff2') format('woff2')} /* ============================================================== 1 Variablen */ :root,.mn-hell,body.page-id-343 #main-content,body.page-id-282 #main-content,body.page-id-284 #main-content,body.page-id-288 #main-content,body.page-id-290 #main-content{ --mn-marke:#2266FF;--mn-tief:#003A75;--mn-tief-2:#002A55;--mn-nacht-grund:#04101F; --mn-akzent:#1F5AE6;--mn-akzent-stark:#003A75; /* gegen #FFFFFF 5,7:1, gegen #E4EDFB 4,9:1 */ --mn-flaeche:#FFFFFF;--mn-flaeche-2:#F2F6FC;--mn-flaeche-3:#E4EDFB; --mn-karte:#FFFFFF;--mn-karte-3:#E4EDFB;--mn-rand:#DCE3EE; --mn-text:#1B2A3D;--mn-text-leise:#55647C;--mn-ueberschrift:#003A75; --mn-knopf:#2266FF;--mn-knopf-text:#FFFFFF;--mn-knopf-schein:0 10px 28px rgba(34,102,255,.32); --mn-knopf-schein-hover:0 0 0 4px rgba(34,102,255,.18),0 14px 40px rgba(34,102,255,.55); --mn-schatten:0 30px 80px -20px rgba(0,30,75,.28),0 8px 24px -8px rgba(0,30,75,.12); --mn-lichtkante:0 0 0 0 rgba(0,0,0,0); --mn-buehne:radial-gradient(980px 560px at 80% 36%,rgba(34,102,255,.42) 0,rgba(34,102,255,0) 66%), radial-gradient(760px 520px at 4% 112%,rgba(34,102,255,.26) 0,rgba(34,102,255,0) 62%), linear-gradient(158deg,#04101F 0,#01244A 56%,#003A75 100%); --mn-karte-dunkel:radial-gradient(620px 420px at 100% 0,rgba(34,102,255,.45) 0,rgba(34,102,255,0) 70%), linear-gradient(150deg,#04101F 0,#003A75 100%); --mn-band:#2266FF;--mn-fuss:#031326;--mn-fuss-2:#020C19; --mn-lese:880px;--mn-raster:1240px;--mn-kopf-hoehe:84px;--mn-radius:24px;color-scheme:light} html.mn-nacht,body.mn-nacht{ --mn-akzent:#7CA6FF;--mn-akzent-stark:#B5CCFF; --mn-flaeche:#04101F;--mn-flaeche-2:#071A30;--mn-flaeche-3:#0A2341; --mn-karte:#0A1F3A;--mn-karte-3:#0C2A52;--mn-rand:#1B3558; --mn-text:#C9D6EA;--mn-text-leise:#8FA3C4;--mn-ueberschrift:#F2F6FF; --mn-knopf:#F2F6FF;--mn-knopf-text:#04101F; --mn-knopf-schein:0 0 0 1px rgba(255,255,255,.55),0 0 26px rgba(124,166,255,.55); --mn-knopf-schein-hover:0 0 0 1px #fff,0 0 44px rgba(124,166,255,.95); --mn-schatten:0 30px 80px -20px rgba(0,0,0,.75),0 8px 24px -8px rgba(0,0,0,.5); --mn-lichtkante:inset 0 1px 0 rgba(160,195,255,.42),inset 0 0 0 1px rgba(124,166,255,.16); --mn-buehne:radial-gradient(1100px 620px at 82% 30%,rgba(34,102,255,.34) 0,rgba(34,102,255,0) 64%), radial-gradient(700px 480px at 0 115%,rgba(34,102,255,.16) 0,rgba(34,102,255,0) 60%), linear-gradient(165deg,#020A14 0,#04101F 50%,#01244A 100%); --mn-karte-dunkel:radial-gradient(620px 420px at 100% 0,rgba(124,166,255,.5) 0,rgba(34,102,255,0) 70%), linear-gradient(150deg,#0B2E66 0,#1A4FC4 100%); --mn-band:#123A8F;--mn-fuss:#020A14;--mn-fuss-2:#01060D; color-scheme:dark} .mn-dunkel,#page-container .et-l--header,#page-container .et-l--footer{ --mn-text:#D7E2F3;--mn-text-leise:#A3B6D6;--mn-ueberschrift:#FFFFFF;--mn-akzent:#9DBBFF;--mn-akzent-stark:#FFFFFF; --mn-rand:rgba(255,255,255,.16);--mn-karte:rgba(255,255,255,.06); color:var(--mn-text)} .mn-nacht .mn-hell,.mn-nacht.page-id-343 #main-content,.mn-nacht.page-id-282 #main-content,.mn-nacht.page-id-284 #main-content,.mn-nacht.page-id-288 #main-content,.mn-nacht.page-id-290 #main-content{ --mn-marke:#2266FF;--mn-tief:#003A75;--mn-tief-2:#002A55;--mn-nacht-grund:#04101F; --mn-akzent:#1F5AE6;--mn-akzent-stark:#003A75; /* gegen #FFFFFF 5,7:1, gegen #E4EDFB 4,9:1 */ --mn-flaeche:#FFFFFF;--mn-flaeche-2:#F2F6FC;--mn-flaeche-3:#E4EDFB; --mn-karte:#FFFFFF;--mn-karte-3:#E4EDFB;--mn-rand:#DCE3EE; --mn-text:#1B2A3D;--mn-text-leise:#55647C;--mn-ueberschrift:#003A75; --mn-knopf:#2266FF;--mn-knopf-text:#FFFFFF;--mn-knopf-schein:0 10px 28px rgba(34,102,255,.32); --mn-knopf-schein-hover:0 0 0 4px rgba(34,102,255,.18),0 14px 40px rgba(34,102,255,.55); --mn-schatten:0 30px 80px -20px rgba(0,30,75,.28),0 8px 24px -8px rgba(0,30,75,.12); --mn-lichtkante:0 0 0 0 rgba(0,0,0,0); --mn-buehne:radial-gradient(980px 560px at 80% 36%,rgba(34,102,255,.42) 0,rgba(34,102,255,0) 66%), radial-gradient(760px 520px at 4% 112%,rgba(34,102,255,.26) 0,rgba(34,102,255,0) 62%), linear-gradient(158deg,#04101F 0,#01244A 56%,#003A75 100%); --mn-karte-dunkel:radial-gradient(620px 420px at 100% 0,rgba(34,102,255,.45) 0,rgba(34,102,255,0) 70%), linear-gradient(150deg,#04101F 0,#003A75 100%); --mn-band:#2266FF;--mn-fuss:#031326;--mn-fuss-2:#020C19; color:var(--mn-text);color-scheme:light} body,.mn-dunkel,.mn-hell,#page-container .et-l--header,#page-container .et-l--footer{--gcid-primary-color:var(--mn-akzent);--gcid-secondary-color:var(--mn-akzent); --gcid-heading-color:var(--mn-ueberschrift);--gcid-body-color:var(--mn-text);--gcid-link-color:var(--mn-akzent);} /* ============================================================== 2 Grund und Schrift */ #page-container{overflow:visible!important;overflow-x:clip!important} html{scroll-behavior:smooth;scroll-padding-top:120px} body,#page-container,#et-main-area,#main-content{background-color:var(--mn-flaeche)} body .et_pb_section{background-color:var(--mn-flaeche)} /* Divi gibt jeder Zeile 27 px oben und unten. Bei zehn Zeilen sind das 540 px Luft, die niemand sieht und jeder scrollt (Ole 19.09.). Abstaende stehen in diesem Stylesheet, nicht im Zeilenvorgabewert. Der Hero behaelt seine Zeile: dort verteilt Divi den Rest der Bildschirmhoehe ueber margin:auto. */ #page-container #main-content .et_pb_row{padding-top:0!important;padding-bottom:0!important} #page-container .mn-kopfbuehne>.et_pb_row{padding-top:27px!important;padding-bottom:27px!important} body,#page-container{color:var(--mn-text);font-family:'Open Sans',Arial,sans-serif;font-size:18px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased} #page-container p,#page-container li,#page-container td,#page-container th,#page-container .et_pb_blurb_description{font-family:'Open Sans',Arial,sans-serif} #page-container h1,#page-container h2,#page-container h3,#page-container h4,#page-container .mn-wie-h1{font-family:'Oswald',Arial,sans-serif!important;text-transform:none;font-weight:600} body h1,body h2,body h3,body h4,body .mn-wie-h1{color:var(--mn-ueberschrift)} #page-container h1,#page-container .mn-wie-h1{font-size:clamp(38px,2.48vw + 28.3px,64px);line-height:1.05;letter-spacing:-.01em;padding-bottom:24px} #page-container h2{font-size:clamp(30px,1.33vw + 24.8px,44px);line-height:1.1;letter-spacing:-.005em;padding-bottom:14px} #page-container h3{font-size:22px;line-height:1.3;font-weight:500;padding-bottom:8px} #page-container h4{font-size:18px;line-height:1.3;font-weight:500} body a{color:var(--mn-akzent)} #page-container .et_pb_text p{padding-bottom:16px} #page-container .et_pb_text p:last-child{padding-bottom:0} /* Ole 20.09.: linksbuendiger Fliesstext nutzt die VOLLE Breite seines Behaelters. Ein Absatz mit max-width in einem 1240 breiten Feld sieht aus wie ein halb gefuelltes Feld. Nur mittig gesetzte Bloecke behalten ein Mass, sonst laeuft eine zentrierte Zeile ueber die ganze Breite auseinander. Wird ein Absatz dadurch zu lang, bekommt er zusaetzlich die Klasse mn-zwei (zwei Spalten ab 1100 px). */ #page-container .mn-lese{max-width:none} #page-container .mn-mitte{text-align:center} #page-container .mn-mitte .mn-lese,#page-container .mn-mitte.mn-lese{max-width:var(--mn-lese);margin-left:auto;margin-right:auto} @media(min-width:1100px){ #page-container .mn-zwei p{column-count:2;column-gap:56px} #page-container .mn-mitte .mn-zwei p{column-count:1} } #page-container .mn-leise,#page-container .mn-leise p{color:var(--mn-text-leise)} #page-container .mn-klein p{font-size:15px;line-height:24px;color:var(--mn-text-leise)} #page-container .mn-leitsatz p{font-size:27px;line-height:1.45;font-weight:400;color:var(--mn-ueberschrift);max-width:900px} #page-container .mn-akzentwort{color:var(--mn-akzent)} #page-container .et_pb_module.et_pb_heading{margin-bottom:0!important} /* Etikett: Pille */ #page-container .mn-etikett{margin-bottom:16px!important} #page-container .mn-etikett p,#page-container span.mn-etikett{display:inline-block;font-size:13px;line-height:16px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:var(--mn-akzent);padding:8px 14px!important;border-radius:999px; background:color-mix(in srgb,var(--mn-akzent) 12%,transparent);border:1px solid color-mix(in srgb,var(--mn-akzent) 28%,transparent)} /* Versalien-Fassung zum Vergleich */ .mn-versal h1,.mn-versal h2,.mn-versal h3,.mn-versal .mn-wie-h1,h1.mn-versal,h2.mn-versal,h3.mn-versal,.mn-wie-h1.mn-versal{ text-transform:uppercase!important;letter-spacing:.005em!important;font-weight:700!important} @media(max-width:767px){ body,#page-container{font-size:17px} #page-container h3{font-size:20px} #page-container .mn-leitsatz p{font-size:21px} #page-container .mn-etikett p,#page-container span.mn-etikett{font-size:12px} } /* ============================================================== 3 Knoepfe und Links */ #page-container a.mn-knopf,body #page-container .et_pb_section a.mn-knopf.et_pb_button{display:inline-flex;align-items:center;gap:10px;font-family:'Open Sans',Arial,sans-serif!important; font-size:16px!important;line-height:20px!important;font-weight:600!important;letter-spacing:.01em;text-transform:none;text-decoration:none; padding:16px 30px!important;border-radius:999px!important;border:0!important;cursor:pointer; background:var(--mn-knopf)!important;color:var(--mn-knopf-text)!important;box-shadow:var(--mn-knopf-schein); transition:transform .25s,box-shadow .25s,background-color .25s} #page-container a.mn-knopf:hover,body #page-container .et_pb_section a.mn-knopf.et_pb_button:hover{transform:translateY(-2px);box-shadow:var(--mn-knopf-schein-hover);padding:16px 30px!important} body #page-container .et_pb_section a.mn-knopf.et_pb_button:after{display:none!important} #page-container a.mn-knopf.mn-pfeil:after{content:"\2192";display:inline-block!important;position:static;opacity:1;margin:0;font-family:inherit; font-size:18px;line-height:20px;transition:transform .25s} #page-container a.mn-knopf.mn-pfeil:hover:after{transform:translateX(5px)} /* weiss: fuer Band und dunkle Buehne */ #page-container a.mn-knopf.mn-knopf-hell{background:#FFFFFF!important;color:#003A75!important;box-shadow:0 10px 28px rgba(0,16,48,.28)} #page-container a.mn-knopf.mn-knopf-hell:hover{box-shadow:0 0 0 4px rgba(255,255,255,.22),0 0 44px rgba(255,255,255,.55)} /* Glas: zweiter Knopf auf dunkel */ #page-container a.mn-knopf.mn-knopf-glas{background:rgba(255,255,255,.08)!important;color:#FFFFFF!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} #page-container a.mn-knopf.mn-knopf-glas:hover{background:rgba(255,255,255,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 32px rgba(124,166,255,.5)} /* --- Anruf-Knoepfe: zwei Beschriftungen in einem Link (Ole 21.09.) --- Am Handy waehlt ein Tipp wirklich, dort genuegt die Einladung. Ab Tablet ruft niemand per Klick an, deshalb steht dort die Nummer. Umgeschaltet wird allein hier - kein JavaScript, kein zweiter Link. `display:none` nimmt die ausgeblendete Fassung auch aus dem Vorlesebaum; zusaetzlich traegt jeder tel:-Knopf ein aria-label. Grenze 768 px = Tablet hochkant. */ #page-container a.mn-knopf .mn-anruf-lang{display:none} @media(min-width:768px){ #page-container a.mn-knopf .mn-anruf-kurz{display:none} #page-container a.mn-knopf .mn-anruf-lang{display:inline} } #page-container .mn-knopfzeile p{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:0} #page-container a.mn-mehr{display:inline-block;font-weight:600;font-size:16px;line-height:24px;color:var(--mn-akzent);text-decoration:none; border-bottom:2px solid color-mix(in srgb,var(--mn-akzent) 40%,transparent);padding-bottom:2px;transition:border-color .2s,color .2s} #page-container a.mn-mehr:after{content:"\2192";display:inline-block;margin-left:8px;transition:transform .2s} #page-container a.mn-mehr:hover{color:var(--mn-akzent-stark);border-color:currentColor} #page-container a.mn-mehr:hover:after{transform:translateX(4px)} #page-container a:focus-visible,#page-container button:focus-visible{outline:2px solid var(--mn-akzent);outline-offset:3px;border-radius:6px} /* Pillen (Sprungmarken im Hero) */ #page-container .mn-pillen p{display:flex;flex-wrap:wrap;gap:10px;padding:0} #page-container .mn-pillen a{display:inline-block;font-size:15px;line-height:20px;font-weight:600;color:var(--mn-text);text-decoration:none; padding:10px 18px;border-radius:999px;background:var(--mn-karte);border:1px solid var(--mn-rand); transition:background-color .2s,border-color .2s,color .2s,transform .2s} #page-container .mn-pillen a:hover{background:var(--mn-marke);border-color:var(--mn-marke);color:#fff;transform:translateY(-1px)} /* ============================================================== 4 Kopf: schwebende Glasleiste */ /* Ole 19.09.: die Glasleiste steht GENAU auf dem Inhaltsraster (90 % bis 1240 px), linke und rechte Kante fluchten mit H1, Karten und Kacheln. Deshalb kein seitlicher Innenabstand an der Kopfebene. */ #page-container .et-l--header{position:sticky;top:0;z-index:999;padding:16px 0 0;background:transparent;pointer-events:none} #page-container:has(.mn-unterkopf) .et-l--header{margin-bottom:calc(-1 * var(--mn-kopf-hoehe))} #page-container .et-l--header .et_pb_section{padding:0!important;background:transparent!important} #page-container .et-l--header .et_pb_row{pointer-events:auto;box-sizing:border-box;width:90%!important;max-width:var(--mn-raster)!important;height:68px; margin:0 auto;padding:0 10px 0 22px!important;display:flex!important;flex-wrap:nowrap!important;align-items:center; justify-content:space-between;gap:24px;position:relative;border-radius:22px; background:rgba(4,16,31,.8);border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 50px -12px rgba(0,12,36,.55),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);transition:background-color .3s} .mn-nacht #page-container .et-l--header .et_pb_row{background:rgba(2,10,20,.78);border-color:rgba(124,166,255,.22)} #page-container .et-l--header .et_pb_row:after{display:none} #page-container .et-l--header .et_pb_column{width:auto!important;flex:0 0 auto;margin:0!important;float:none;min-height:0} #page-container .et-l--header .et_pb_column.mn-menuespalte{flex:1 1 auto} #page-container .et-l--header .et_pb_module{margin-bottom:0!important} #page-container .et-l--header .mn-skript{display:none} #page-container .et-l--header .mn-logo img{height:50px;width:auto;display:block} #page-container .et-l--header .et_pb_menu{background:transparent} #page-container .et-l--header .et_pb_menu .et_pb_menu__menu>nav>ul{justify-content:center} #page-container .et-l--header .et_pb_menu .et_pb_menu__wrap,#page-container .et-l--header .et_pb_menu .et_pb_menu_inner_container{justify-content:center;width:100%} /* Ole 20.09.: das Hauptmenue bricht NIE um. Punkte in einer Zeile, Abstand mitwachsend (14 bis 28 px zwischen zwei Punkten), Schrift 15 bis 16 px. Reicht der Platz nicht, uebernimmt das Klappmenue. */ #page-container .et-l--header .et_pb_menu .et-menu{flex-wrap:nowrap!important;align-items:center} #page-container .et-l--header .et_pb_menu .et-menu>li{padding:0 clamp(7px,.9vw,14px);margin:0;white-space:nowrap;flex:0 0 auto} #page-container .et-l--header .et_pb_menu .et-menu>li>a{font-family:'Open Sans',Arial,sans-serif; font-size:clamp(15px,.28vw + 11px,16px);line-height:20px;font-weight:600;white-space:nowrap; letter-spacing:.01em;text-transform:none;color:#E6EEFB;padding:24px 0;opacity:1;transition:color .2s} #page-container .et-l--header .et_pb_menu .et-menu>li>a:hover,#page-container .et-l--header .et_pb_menu .et-menu>li.current-menu-item>a{color:#FFFFFF;opacity:1; text-shadow:0 0 18px rgba(124,166,255,.9)} /* Pfeil am Aufklapper: Divi setzt ihn absolut an die Oberkante, dort sitzt er auf dem Leistenrand. */ #page-container .et-l--header .et_pb_menu .et-menu>li.menu-item-has-children>a{padding-right:19px} #page-container .et-l--header .et_pb_menu .et-menu>li.menu-item-has-children>a:after{position:absolute;top:50%;right:0;left:auto; transform:translateY(-50%);font-size:15px;line-height:1;opacity:.7;transition:opacity .2s} #page-container .et-l--header .et_pb_menu .et-menu>li.menu-item-has-children:hover>a:after, #page-container .et-l--header .et_pb_menu .et-menu>li.menu-item-has-children:focus-within>a:after{opacity:1} /* Aufklapper unter KI-Loesungen: strikt einspaltig, eine Zeile je Punkt, gleiche linke Kante. Der durchsichtige obere Rand schliesst die Luecke zur Leiste, damit die Maus nicht herausfaellt. */ #page-container .et-l--header .et_pb_menu .et-menu>li.menu-item-has-children:focus-within>ul.sub-menu{opacity:1;visibility:visible} #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu{display:block;flex-direction:column;flex-wrap:nowrap; width:auto;min-width:264px;padding:10px 0;border:0;border-radius:18px;background:#061321; box-shadow:0 24px 50px rgba(0,10,30,.55),inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)} .mn-nacht #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu{background:#030C17; box-shadow:0 24px 50px rgba(0,6,18,.6),inset 0 0 0 1px rgba(124,166,255,.24)} #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu>li{display:block;width:100%;float:none;padding:0;margin:0; white-space:nowrap} #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu>li>a{display:block;width:100%;box-sizing:border-box; font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:22px;font-weight:600;white-space:nowrap; color:#E6EEFB;padding:11px 24px;opacity:1;background:transparent;transition:background-color .2s,color .2s} #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu>li>a:hover, #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu>li>a:focus-visible, #page-container .et-l--header .et_pb_menu .et-menu li ul.sub-menu>li.current-menu-item>a{color:#FFFFFF; background:rgba(124,166,255,.18)} #page-container .et-l--header .mobile_menu_bar:before{color:#FFFFFF;font-size:34px} #page-container .mn-aktionen .et_pb_code_inner{display:flex;align-items:center;gap:8px} #page-container .et-l--header a.mn-knopf{font-size:15px!important;padding:14px 22px!important} #page-container .et-l--header a.mn-knopf:hover{padding:14px 22px!important} #page-container .et-l--header a.mn-knopf svg{width:16px;height:16px;display:block;flex:0 0 auto} #mn-nachtknopf{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07); color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto; transition:background-color .2s,box-shadow .2s,transform .3s} #mn-nachtknopf:hover{background:rgba(255,255,255,.16);box-shadow:0 0 24px rgba(124,166,255,.6);transform:rotate(18deg)} #mn-nachtknopf svg{width:21px;height:21px;display:block} #mn-nachtknopf .mn-sonne{display:none} .mn-nacht #mn-nachtknopf .mn-sonne{display:block;color:#FFD98A} .mn-nacht #mn-nachtknopf .mn-mond{display:none} /* Messfassung des Menues: liegt ausserhalb des Blickfelds und behaelt ihre natuerliche Breite, damit das Kopfskript auch dann messen kann, wenn das Klappmenue schon uebernommen hat. */ #page-container .et-l--header .mn-kopf-mess{position:absolute;top:0;left:-10000px;visibility:hidden;pointer-events:none} #page-container .et-l--header .mn-kopf-mess .et-menu{display:flex;flex-wrap:nowrap;white-space:nowrap} /* Das Hoerer-Symbol blieb bis 20.09. unter 1240 px aus, weil neben "Sprechen wir drüber" kein Platz war. Ab Tablet steht dort jetzt die kuerzere Nummer, das Symbol passt also wieder (Ole 21.09.). Nur auf sehr schmalen Geraeten bleibt es aus, dort zaehlt jeder Pixel neben dem Nachtknopf. */ @media(max-width:400px){ #page-container .et-l--header a.mn-knopf svg{display:none} } #page-container .et-l--header.mn-eng .et_pb_menu .et_pb_menu__menu{display:none!important} #page-container .et-l--header.mn-eng .et_pb_menu .et_mobile_nav_menu{display:block!important} #page-container .et-l--header.mn-eng .et_pb_section,#page-container .et-l--header.mn-eng .et_pb_column,#page-container .et-l--header.mn-eng .et_pb_menu,#page-container .et-l--header.mn-eng .et_pb_menu_inner_container, #page-container .et-l--header.mn-eng .et_pb_menu__wrap,#page-container .et-l--header.mn-eng .et_mobile_nav_menu,#page-container .et-l--header.mn-eng .mobile_nav{position:static!important} #page-container .et-l--header.mn-eng .et_pb_column.mn-logospalte{margin-right:auto!important} #page-container .et-l--header.mn-eng .et_pb_column.mn-menuespalte{order:3;flex:0 0 auto} #page-container .et-l--header.mn-eng .et_pb_menu__wrap{justify-content:flex-end} #page-container .et-l--header.mn-eng .mobile_menu_bar{display:flex;align-items:center;justify-content:center;width:44px;height:48px} #page-container .et-l--header.mn-eng .et_mobile_menu{position:absolute;left:0;right:0;top:calc(100% + 8px);width:100%;padding:8px 20px 14px;border:0; border-radius:20px;background:#061321;box-shadow:0 24px 50px rgba(0,10,30,.55),inset 0 0 0 1px rgba(255,255,255,.14)} #page-container .et-l--header.mn-eng .et_mobile_menu li{display:block;width:100%;float:none} #page-container .et-l--header.mn-eng .et_mobile_menu li a{font-family:'Open Sans',Arial,sans-serif;font-size:17px;font-weight:600;color:#E6EEFB; padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.12);background:transparent} #page-container .et-l--header.mn-eng .et_mobile_menu li:last-child>a{border-bottom:0} #page-container .et-l--header.mn-eng .et_mobile_menu .sub-menu{display:block!important;visibility:visible!important;opacity:1!important; position:static!important;width:auto;min-width:0;padding:0 0 0 18px;margin:0;background:transparent;box-shadow:none; border-left:1px solid rgba(124,166,255,.3)} #page-container .et-l--header.mn-eng .et_mobile_menu .sub-menu li a{font-size:16px;font-weight:400;color:#C9D9F2;padding:12px 4px} @media(max-width:1100px){ #page-container .et-l--header .et_pb_menu .et_pb_menu__menu{display:none!important} #page-container .et-l--header .et_pb_menu .et_mobile_nav_menu{display:block!important} #page-container .et-l--header .et_pb_section,#page-container .et-l--header .et_pb_column,#page-container .et-l--header .et_pb_menu,#page-container .et-l--header .et_pb_menu_inner_container, #page-container .et-l--header .et_pb_menu__wrap,#page-container .et-l--header .et_mobile_nav_menu,#page-container .et-l--header .mobile_nav{position:static!important} #page-container .et-l--header .et_pb_column.mn-logospalte{margin-right:auto!important} #page-container .et-l--header .et_pb_column.mn-menuespalte{order:3;flex:0 0 auto} #page-container .et-l--header .et_pb_menu__wrap{justify-content:flex-end} #page-container .et-l--header .mobile_menu_bar{display:flex;align-items:center;justify-content:center;width:44px;height:48px} #page-container .et-l--header .et_mobile_menu{position:absolute;left:0;right:0;top:calc(100% + 8px);width:100%;padding:8px 20px 14px;border:0; border-radius:20px;background:#061321;box-shadow:0 24px 50px rgba(0,10,30,.55),inset 0 0 0 1px rgba(255,255,255,.14)} #page-container .et-l--header .et_mobile_menu li{display:block;width:100%;float:none} #page-container .et-l--header .et_mobile_menu li a{font-family:'Open Sans',Arial,sans-serif;font-size:17px;font-weight:600;color:#E6EEFB; padding:15px 4px;border-bottom:1px solid rgba(255,255,255,.12);background:transparent} #page-container .et-l--header .et_mobile_menu li:last-child>a{border-bottom:0} #page-container .et-l--header .et_mobile_menu .sub-menu{display:block!important;visibility:visible!important;opacity:1!important; position:static!important;width:auto;min-width:0;padding:0 0 0 18px;margin:0;background:transparent;box-shadow:none; border-left:1px solid rgba(124,166,255,.3)} #page-container .et-l--header .et_mobile_menu .sub-menu li a{font-size:16px;font-weight:400;color:#C9D9F2;padding:12px 4px} } @media(max-width:980px){ :root{--mn-kopf-hoehe:72px} #page-container .et-l--header{padding:12px 0 0} #page-container .et-l--header .et_pb_row{height:60px;gap:8px;padding:0 6px 0 14px!important;border-radius:20px} #page-container .et-l--header .mn-logo img{height:42px} #page-container .et-l--header a.mn-knopf{font-size:13px!important;padding:12px 15px!important;letter-spacing:0;white-space:nowrap} #page-container .et-l--header a.mn-knopf:hover{padding:12px 15px!important} #mn-nachtknopf{width:44px;height:44px} } @media(max-width:374px){#page-container .et-l--header a.mn-knopf{font-size:12px!important;padding:11px 11px!important}} /* ============================================================== 5 Dunkle Buehne, Hero, Film-Rahmen */ #page-container .mn-buehne-dunkel{position:relative;background:var(--mn-buehne)!important;overflow:hidden} #page-container .mn-buehne-dunkel>.et_pb_row{position:relative;z-index:1} /* feine Lichtlinie am unteren Rand */ #page-container .mn-buehne-dunkel:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(140,180,255,.85) 60%,rgba(255,255,255,0) 100%)} /* nachts: Sternenhimmel ueber der Buehne (drei versetzte Punktraster, wirken unregelmaessig) */ .mn-nacht #page-container .mn-buehne-dunkel:not(.mn-himmel):not(.mn-himmel-ruhig):before{content:"";position:absolute;inset:0;opacity:.9;background-image: radial-gradient(1.2px 1.2px at 40px 60px,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 51%), radial-gradient(1px 1px at 150px 190px,rgba(200,220,255,.8) 50%,rgba(255,255,255,0) 51%), radial-gradient(1.6px 1.6px at 260px 90px,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 51%), radial-gradient(1px 1px at 90px 330px,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 51%); background-size:307px 263px,419px 347px,541px 431px,233px 389px; -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.25) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.25) 70%,rgba(0,0,0,0) 100%)} #page-container .mn-kopfbuehne .et_pb_row{align-items:center} #page-container .mn-kopfbuehne h1{max-width:none} #page-container .mn-nb{white-space:nowrap} #page-container .mn-kopfbuehne h1 .mn-akzentwort{display:block} #page-container .mn-kopfbuehne .mn-unter p{font-size:20px;line-height:1.55;max-width:560px;padding-bottom:0} #page-container .mn-kopfbuehne .mn-unter{margin-bottom:36px!important} #page-container .mn-kopfbuehne .mn-knopfzeile{margin-bottom:44px!important} #page-container .mn-mittig-v{align-self:center} #page-container .mn-film{position:relative;width:152%;aspect-ratio:16/10;border-radius:var(--mn-radius);overflow:hidden; background:radial-gradient(520px 320px at 72% 22%,rgba(124,166,255,.55) 0,rgba(34,102,255,0) 70%), linear-gradient(140deg,#0A2A5E 0,#04101F 58%,#0B3A86 130%); box-shadow:0 50px 110px -30px rgba(0,8,30,.85),0 0 0 1px rgba(160,195,255,.28),0 0 90px -10px rgba(34,102,255,.55), inset 0 1px 0 rgba(255,255,255,.25)} #page-container .mn-film img,#page-container .mn-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} #page-container .mn-film:before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 88px), repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 88px)} #page-container .mn-film .mn-film-hinweis{position:absolute;left:28px;bottom:24px;font-size:13px;line-height:16px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)} #page-container .mn-kopfbuehne .et_pb_code,#page-container .mn-kopfbuehne .et_pb_code_inner{margin:0!important} @media(max-width:980px){ #page-container .mn-film{width:100%;margin-top:16px} #page-container .mn-kopfbuehne .mn-unter p{font-size:18px} #page-container .mn-kopfbuehne .mn-knopfzeile{margin-bottom:32px!important} } /* ============================================================== 5b Hero vollflaechig und Nacht-Buehne (mn_buehne.py) */ #page-container .mn-kopfbuehne{min-height:min(100vh,900px);min-height:min(100svh,900px);display:flex;flex-direction:column;justify-content:flex-start; background:var(--mn-buehne)!important;padding-top:clamp(140px,18vh,190px)!important} #page-container .mn-kopfbuehne>.et_pb_row{flex:0 0 auto} #page-container .mn-hero-inhalt{max-width:780px} /* gestauchter Textblock: Etikett 12, H1 16, Satz 24, Knopf 10 + Kleinzeile 20, Pillen */ #page-container .mn-kopfbuehne h1{font-size:clamp(38px,min(2.48vw + 28.3px,7.6vh),64px);padding-bottom:16px} #page-container .mn-kopfbuehne .mn-etikett{margin-bottom:12px!important} #page-container .mn-kopfbuehne .mn-unter{margin-bottom:24px!important} #page-container .mn-kopfbuehne .mn-knopfzeile{margin-bottom:10px!important} #page-container .mn-kopfbuehne .mn-kleinzeile{margin-bottom:20px!important} #page-container .mn-kopfbuehne .mn-pillen{margin-bottom:0!important} /* Ebene Bild/Film: Zeile, Spalte, Modul ohne eigene Flaeche, damit .mn-hero-bg sich auf die Sektion bezieht */ #page-container .mn-kopfbuehne>.et_pb_row.mn-hero-bgzeile,#page-container .mn-hero-bgzeile .et_pb_column,#page-container .mn-hero-bgzeile .et_pb_module, #page-container .mn-hero-bgzeile .et_pb_code_inner{position:static!important;height:0;min-height:0;margin:0!important;padding:0!important;z-index:auto} #page-container .mn-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} #page-container .mn-hero-bg img,#page-container .mn-hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 40%;display:block} /* Film liegt ueber dem Poster und blendet erst auf, wenn er wirklich laeuft (sonst Schwarzbild) */ #page-container .mn-hero-film{opacity:0;transition:opacity 1.2s ease} #page-container .mn-hero-bg.mn-film-laeuft .mn-hero-film{opacity:1} /* feines Raster rechts (nur solange kein Bild da ist) */ #page-container .mn-hero-bg:before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(90deg,rgba(160,195,255,.07) 0 1px,transparent 1px 96px), repeating-linear-gradient(0deg,rgba(160,195,255,.07) 0 1px,transparent 1px 96px); -webkit-mask-image:radial-gradient(70% 90% at 78% 40%,#000 0,rgba(0,0,0,0) 78%);mask-image:radial-gradient(70% 90% at 78% 40%,#000 0,rgba(0,0,0,0) 78%); transition:opacity .6s} #page-container .mn-hero-bg.mn-hat-bild:before,.mn-nacht #page-container .mn-hero-bg:before{opacity:0} /* Verlauf links dunkel, rechts frei: Schrift bleibt lesbar. Untere Kante dunkel auslaufen lassen, damit der Hero buendig ins Band uebergeht und dort kein heller Streifen steht (Ole 19.09.). */ #page-container .mn-hero-bg:after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(2,10,23,.9) 0,rgba(2,10,23,.34) 9%,rgba(2,10,23,0) 20%), linear-gradient(90deg,rgba(2,10,23,.85) 0,rgba(2,10,23,.62) 36%,rgba(2,10,23,0) 72%)} /* Tag: langsam wandernder Lichtschein hinter dem Laptop (Ring, damit der Bildschirm die hellste Stelle bleibt) */ #page-container .mn-hero-glanz{position:absolute;z-index:0;left:48%;top:2%;width:58%;height:92%;border-radius:50%;pointer-events:none; mix-blend-mode:screen;opacity:1;transition:opacity .6s;filter:blur(30px); background:radial-gradient(closest-side,rgba(124,166,255,0) 0,rgba(124,166,255,0) 34%,rgba(132,180,255,.42) 62%,rgba(34,102,255,.12) 86%,rgba(34,102,255,0) 100%)} .mn-nacht #page-container .mn-hero-glanz{opacity:0} /* Tag: langsam wandernder Lichtschein */ #page-container .mn-kopfbuehne:before{content:"";position:absolute;z-index:0;left:38%;top:-30%;width:70%;height:130%;border-radius:50%; background:radial-gradient(closest-side,rgba(34,102,255,.55) 0,rgba(34,102,255,.18) 48%,rgba(34,102,255,0) 100%); opacity:1;transition:opacity .6s;will-change:transform} .mn-nacht #page-container .mn-kopfbuehne:before{opacity:0;background:radial-gradient(closest-side,rgba(34,102,255,.55) 0,rgba(34,102,255,0) 100%); -webkit-mask-image:none;mask-image:none;background-size:auto} /* Himmel-Ebene (vom Skript eingesetzt) */ #page-container .mn-himmel-ebene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} #page-container .mn-himmel-ebene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s} #page-container .mn-nachtgrund{position:absolute;inset:0;opacity:0;transition:opacity .6s; background:radial-gradient(120% 80% at 70% 108%,rgba(18,74,160,.55) 0,rgba(18,74,160,0) 60%),linear-gradient(180deg,#01050D 0,#031127 52%,#062B57 100%)} .mn-nacht #page-container .mn-nachtgrund,.mn-nacht #page-container .mn-himmel-ebene canvas{opacity:1} #page-container .mn-kopfbuehne:has(.mn-hat-bild) canvas{-webkit-mask-image:radial-gradient(34% 50% at 77% 52%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 62%,#000 100%); mask-image:radial-gradient(34% 50% at 77% 52%,rgba(0,0,0,0) 0,rgba(0,0,0,0) 62%,#000 100%)} .mn-nacht #page-container .mn-kopfbuehne:has(.mn-hat-bild) .mn-nachtgrund{opacity:.94; -webkit-mask-image:radial-gradient(44% 66% at 77% 50%,rgba(0,0,0,.12) 0,rgba(0,0,0,.2) 52%,#000 100%); mask-image:radial-gradient(44% 66% at 77% 50%,rgba(0,0,0,.12) 0,rgba(0,0,0,.2) 52%,#000 100%)} /* mit Bild: Kueste nur nachts (am Tag stuende der Turm vor dem Geraet) */ #page-container .mn-kopfbuehne:has(.mn-hat-bild) .mn-kueste{opacity:0;transition:opacity .6s} .mn-nacht #page-container .mn-kopfbuehne:has(.mn-hat-bild) .mn-kueste{opacity:1} /* Nordlicht (Ole 19.09.: wirkte in der Aufnahme streifig). Die Streifen kamen von einer Schleier-Maske mit harten Kanten alle 64 px. Die ist raus. Jetzt vier weit weichgezeichnete Schleier (Radius 78 bis 116 px), die mit 29 / 37 / 43 / 53 s gegeneinander driften - die Ueberlagerung erzeugt den Vorhang, nicht eine Maske. Ueber dem Laptop bleibt nur ein Rest stehen, damit der Bildschirm die hellste Stelle im Bild ist. */ #page-container .mn-polar{position:absolute;inset:0;opacity:0;transition:opacity .9s;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%)} #page-container .mn-kopfbuehne:has(.mn-hat-bild) .mn-polar{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%),radial-gradient(42% 60% at 77% 50%,rgba(0,0,0,.05) 0,rgba(0,0,0,.14) 46%,rgba(0,0,0,.6) 78%,#000 100%); mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%),radial-gradient(42% 60% at 77% 50%,rgba(0,0,0,.05) 0,rgba(0,0,0,.14) 46%,rgba(0,0,0,.6) 78%,#000 100%); -webkit-mask-composite:source-in;mask-composite:intersect} .mn-nacht #page-container .mn-polar{opacity:1} #page-container .mn-polar i{position:absolute;top:-20%;height:88%;border-radius:50%;filter:blur(84px);opacity:.62;will-change:transform,opacity} #page-container .mn-polar i:nth-child(1){left:-4%;width:60%;background:linear-gradient(180deg,rgba(63,224,200,0) 0,rgba(63,224,200,.44) 36%,rgba(34,102,255,.3) 68%,rgba(34,102,255,0) 100%); animation:mn-polar-1 29s ease-in-out infinite alternate} #page-container .mn-polar i:nth-child(2){left:24%;width:54%;height:76%;filter:blur(92px);background:linear-gradient(180deg,rgba(124,166,255,0) 0,rgba(84,150,255,.38) 42%,rgba(63,224,200,.2) 76%,rgba(63,224,200,0) 100%); animation:mn-polar-2 37s ease-in-out infinite alternate} #page-container .mn-polar i:nth-child(3){left:52%;width:52%;height:84%;filter:blur(78px);background:linear-gradient(180deg,rgba(63,224,200,0) 0,rgba(63,224,200,.36) 38%,rgba(34,102,255,.22) 72%,rgba(34,102,255,0) 100%); animation:mn-polar-3 43s ease-in-out infinite alternate} #page-container .mn-polar i:nth-child(4){left:8%;width:84%;top:-8%;height:70%;filter:blur(116px);background:linear-gradient(180deg,rgba(34,102,255,0) 0,rgba(34,102,255,.24) 46%,rgba(63,224,200,.13) 78%,rgba(63,224,200,0) 100%); animation:mn-polar-4 53s ease-in-out infinite alternate} @keyframes mn-polar-1{from{transform:translate3d(-7%,3%,0) skewX(-15deg) scaleY(.9);opacity:.4}to{transform:translate3d(8%,-3%,0) skewX(-3deg) scaleY(1.12);opacity:.78}} @keyframes mn-polar-2{from{transform:translate3d(7%,-2%,0) skewX(10deg) scaleY(1.1);opacity:.72}to{transform:translate3d(-9%,4%,0) skewX(-8deg) scaleY(.88);opacity:.34}} @keyframes mn-polar-3{from{transform:translate3d(-5%,4%,0) skewX(-5deg) scaleY(.92);opacity:.32}to{transform:translate3d(7%,-4%,0) skewX(13deg) scaleY(1.14);opacity:.7}} @keyframes mn-polar-4{from{transform:translate3d(6%,2%,0) skewX(6deg) scaleY(1.06);opacity:.5}to{transform:translate3d(-7%,-3%,0) skewX(-6deg) scaleY(.9);opacity:.22}} #page-container .mn-himmel-ruhig .mn-polar{opacity:0} .mn-nacht #page-container .mn-himmel-ruhig .mn-polar{opacity:.5} /* Kueste mit Leuchtturm */ #page-container .mn-kueste{position:absolute;left:0;right:0;bottom:0;height:120px;color:#020A17} #page-container .mn-kueste svg{display:block;fill:currentColor} #page-container .mn-kueste .mn-land{position:absolute;left:0;bottom:0;width:100%;height:100%} #page-container .mn-turm{position:absolute;right:6.5%;bottom:46px;width:123px;height:205px} #page-container .mn-turm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} #page-container .mn-turm .mn-streif{fill:rgba(124,166,255,.2)} #page-container .mn-turm .mn-licht,#page-container .mn-turm .mn-fenster{fill:#0B2E66;transition:fill .6s} .mn-nacht #page-container .mn-turm .mn-licht{fill:#F4F8FF} .mn-nacht #page-container .mn-turm .mn-fenster{fill:#FFD98A} .mn-nacht #page-container .mn-kueste{color:#01050C} #page-container .mn-kegel{position:absolute;left:33.3%;top:22.7%;width:min(58vw,860px);height:190px;margin-top:-95px;transform-origin:0 50%; background:linear-gradient(90deg,rgba(214,234,255,.62) 0,rgba(170,205,255,.2) 45%,rgba(170,205,255,0) 88%); -webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%);opacity:0;transition:opacity .6s; animation:mn-kegel 9s ease-in-out infinite alternate;will-change:transform} #page-container .mn-lampe{position:absolute;left:33.3%;top:22.7%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;opacity:0;transition:opacity .6s; background:radial-gradient(closest-side,rgba(235,245,255,.95) 0,rgba(170,205,255,.35) 30%,rgba(170,205,255,0) 100%); animation:mn-lampe 9s ease-in-out infinite alternate} .mn-nacht #page-container .mn-kegel,.mn-nacht #page-container .mn-lampe{opacity:1} @keyframes mn-kegel{from{transform:scaleX(1)}to{transform:scaleX(-1)}} @keyframes mn-lampe{0%,100%{transform:scale(.55)}50%{transform:scale(1.5)}} @keyframes mn-schein{from{transform:translate(-14%,6%) scale(.92)}to{transform:translate(10%,-5%) scale(1.1)}} /* Abspielknopf ueber dem Motiv (erst einsetzen, wenn der Film da ist) */ #page-container a.mn-abspiel{position:absolute;z-index:1;right:16%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:18px; color:#fff;font-weight:600;font-size:16px;text-decoration:none} #page-container a.mn-abspiel:before{content:"";width:132px;height:132px;border-radius:50%;background:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.18),0 0 60px rgba(34,102,255,.7);transition:transform .3s,box-shadow .3s} #page-container a.mn-abspiel:after{content:"";position:absolute;top:44px;left:50%;margin-left:-13px;border-style:solid;border-width:22px 0 22px 36px; border-color:transparent transparent transparent #003A75} #page-container a.mn-abspiel:hover:before{transform:scale(1.06);box-shadow:0 0 0 14px rgba(255,255,255,.24),0 0 80px rgba(34,102,255,.95)} /* Umschalten: weicher Uebergang 0,6 s (View Transition, sonst CSS-Uebergaenge) */ ::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:ease} body,#page-container,#et-main-area,#main-content,body .et_pb_section,#page-container .mn-karte,#page-container .mn-probe-raster>div{transition:background-color .6s,color .6s} #mn-nachtknopf{position:relative} #mn-nachtknopf svg{position:absolute;left:50%;top:50%;margin:-10.5px 0 0 -10.5px;display:block!important; transition:opacity .6s,transform .6s cubic-bezier(.3,1.4,.5,1)} #mn-nachtknopf .mn-sonne{opacity:0;transform:rotate(-120deg) scale(.3);color:#FFD98A} #mn-nachtknopf .mn-mond{opacity:1;transform:none} .mn-nacht #mn-nachtknopf .mn-sonne{opacity:1;transform:none} .mn-nacht #mn-nachtknopf .mn-mond{opacity:0;transform:rotate(120deg) scale(.3);display:block} @media(prefers-reduced-motion:no-preference){ #page-container .mn-kopfbuehne:before{animation:mn-schein 24s ease-in-out infinite alternate} #page-container .mn-hero-glanz{animation:mn-glanz 14s ease-in-out infinite alternate} } @keyframes mn-glanz{from{transform:translate3d(-7%,4%,0) scale(.9);opacity:.5}to{transform:translate3d(6%,-4%,0) scale(1.12);opacity:.95}} @media(prefers-reduced-motion:reduce){ #page-container .mn-polar i,#page-container .mn-kegel,#page-container .mn-lampe,#page-container .mn-hero-glanz{animation:none} #page-container .mn-kegel{transform:scaleX(1)} ::view-transition-old(root),::view-transition-new(root){animation:none} #mn-nachtknopf svg,#page-container .mn-himmel-ebene *{transition:none} } @media(max-width:980px){ #page-container .mn-kopfbuehne{min-height:0;justify-content:flex-start;padding-top:104px!important} #page-container .mn-hero-bg:after{background:linear-gradient(180deg,rgba(2,10,23,.78) 0,rgba(2,10,23,.55) 62%,rgba(2,10,23,0) 100%)} #page-container .mn-hero-bg img,#page-container .mn-hero-bg video{object-position:72% 50%} #page-container .mn-kopfbuehne:has(.mn-hat-hochkant){padding-bottom:calc(74vw + 40px)!important} /* Hochkant-Film und sein Poster sind 4:5, nicht 9:16: weniger Platz noetig */ #page-container .mn-kopfbuehne:has(.mn-hat-film){padding-bottom:calc(60vw + 40px)!important} #page-container .mn-hat-hochkant img,#page-container .mn-hat-hochkant video{top:auto;bottom:0;height:auto;object-position:50% 100%; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 30%)} #page-container .mn-kopfbuehne:has(.mn-hat-hochkant) .mn-nachtgrund,#page-container .mn-kopfbuehne:has(.mn-hat-hochkant) .mn-polar,#page-container .mn-kopfbuehne:has(.mn-hat-hochkant) canvas{-webkit-mask-image:none;mask-image:none} .mn-nacht #page-container .mn-kopfbuehne:has(.mn-hat-hochkant) .mn-nachtgrund{opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.15) 66%,rgba(0,0,0,.15) 100%); mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.15) 66%,rgba(0,0,0,.15) 100%)} #page-container .mn-kueste{height:84px} #page-container .mn-turm{right:7%;bottom:30px;width:66px;height:110px} #page-container .mn-kegel{width:88vw;height:110px;margin-top:-55px} #page-container .mn-lampe{width:64px;height:64px;margin:-32px 0 0 -32px} #page-container .mn-polar i{filter:blur(48px)} #page-container .mn-polar i:nth-child(1){left:-10%;width:80%} #page-container .mn-polar i:nth-child(2){left:30%;width:78%;filter:blur(54px)} #page-container .mn-polar i:nth-child(3){display:none} #page-container .mn-polar i:nth-child(4){left:-6%;width:104%;filter:blur(64px)} #page-container .mn-kopfbuehne:before{left:0;width:130%} } /* ============================================================== 6 Aufrufband (Ole 19.09.: nur noch Frage und Knopf) Schmal (80 px), schliesst oben buendig an den Hero an, keine Belege mehr. */ #page-container .mn-band{background:var(--mn-band)!important;position:relative;overflow:hidden;padding:0!important;margin-top:0!important} #page-container .mn-band:before{content:"";position:absolute;right:-4%;top:-60%;bottom:-60%;width:42%;transform:skewX(-18deg); background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.12) 100%)} #page-container .mn-band .et_pb_row{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 28px; min-height:80px;padding-top:0!important;padding-bottom:0!important} #page-container .mn-band .et_pb_row:after{display:none} #page-container .mn-band .et_pb_column{width:auto!important;margin:0!important;float:none;min-height:0} #page-container .mn-band .mn-frage{flex:0 1 auto;border:0;padding:0;margin:0!important} #page-container .mn-band .mn-frage p{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;padding:0;font-family:'Oswald',Arial,sans-serif!important;font-size:23px;line-height:1.2; font-weight:500;color:#FFFFFF} #page-container .mn-band a.mn-knopf{padding:12px 24px!important} #page-container .mn-band a.mn-knopf:hover{padding:12px 24px!important} @media(max-width:767px){ #page-container .mn-band .et_pb_row{min-height:0;padding:18px 0!important;gap:12px} #page-container .mn-band .mn-frage p{flex-direction:column;align-items:flex-start;font-size:20px;gap:12px} } /* ============================================================== 7 Angebots-Karten (haftend) */ /* Kopfblock (Etikett, H2, Einleitungssatz) zum Inhalt: 36 statt 64 (Ole 19.09.) */ #page-container .mn-kartenkopf{margin-bottom:36px} #page-container .mn-karte{display:flex!important;align-items:stretch;padding:0!important;overflow:hidden;height:580px;max-height:600px; margin-bottom:32px;border-radius:var(--mn-radius);background:var(--mn-karte); box-shadow:var(--mn-schatten),var(--mn-lichtkante);transition:background-color .3s} #page-container .mn-karte:after{display:none} #page-container .mn-karte>.et_pb_column{float:none;margin:0!important} #page-container .mn-karte>.mn-k-text{width:55%!important;padding:56px 64px;align-self:center} #page-container .mn-karte>.mn-k-bild{width:45%!important;padding:0;position:relative;overflow:hidden} #page-container .mn-karte h3{font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.005em;padding-bottom:12px} #page-container .mn-karte .mn-k-satz p{font-size:19px;line-height:1.5;padding-bottom:20px} #page-container .mn-karte .mn-etikett{margin-bottom:20px!important} #page-container .mn-k-bild .et_pb_module,#page-container .mn-k-bild .et_pb_code_inner,#page-container .mn-k-bild .et_pb_image_wrap{height:100%;margin:0!important;display:block;position:static} #page-container .mn-k-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s} #page-container .mn-karte:hover .mn-k-bild img{transform:scale(1.04)} #page-container .mn-ph{height:100%;min-height:280px;display:flex;align-items:flex-end;padding:28px;position:relative} #page-container .mn-ph span{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);position:relative} #page-container .mn-ph-1{background:radial-gradient(420px 320px at 70% 25%,#6B9BFF 0,rgba(34,102,255,0) 70%),linear-gradient(160deg,#2266FF 0,#003A75 100%)} #page-container .mn-ph-2{background:radial-gradient(420px 320px at 30% 80%,#2266FF 0,rgba(34,102,255,0) 70%),linear-gradient(200deg,#0A2A5E 0,#04101F 100%)} #page-container .mn-ph-3{background:radial-gradient(420px 320px at 60% 60%,#FFFFFF 0,rgba(255,255,255,0) 70%),linear-gradient(160deg,#9DBBFF 0,#2266FF 100%)} /* eigene Flaeche je Karte */ #page-container .mn-karte.mn-karte-dunkel{background:var(--mn-karte-dunkel)} #page-container .mn-karte.mn-karte-blau{background:var(--mn-karte-3)} /* Stichpunkte mit kraeftigem Haken (gezeichnet, kein Emoji, kein Bild) */ #page-container ul.mn-haken{list-style:none;padding:4px 0 28px;margin:0} #page-container ul.mn-haken li{position:relative;padding:7px 0 7px 40px;font-size:17px;line-height:26px;font-weight:600;color:var(--mn-text)} #page-container ul.mn-haken li:before{content:"";position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:var(--mn-marke); box-shadow:0 4px 12px rgba(34,102,255,.4)} #page-container ul.mn-haken li:after{content:"";position:absolute;left:8.5px;top:13px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0; transform:rotate(45deg)} @media(min-width:981px){ #page-container #main-content .mn-haft{position:sticky} #page-container #main-content .mn-haft-1{top:110px} #page-container #main-content .mn-haft-2{top:130px} #page-container #main-content .mn-haft-3{top:150px} /* nach dem Loesen der letzten Karte nur die Luft der Sektion (56 px), kein zusaetzlicher Kartenabstand */ #page-container #main-content .mn-stapel .mn-haft-3{margin-bottom:0!important} } @media(max-width:980px){ #page-container .mn-karte{display:flex!important;flex-direction:column-reverse;height:auto;max-height:none;margin-bottom:24px} #page-container .mn-karte>.mn-k-text{width:100%!important;padding:32px 24px 36px} #page-container .mn-karte>.mn-k-bild{width:100%!important;height:240px} #page-container .mn-karte h3{font-size:26px} #page-container .mn-karte .mn-k-satz p{font-size:17px} #page-container .mn-ph{min-height:0} #page-container .mn-kartenkopf{margin-bottom:28px} } /* ============================================================== 8 Bildkacheln mit Hover-Schleier */ #page-container .mn-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} #page-container .mn-kachel{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff; background:linear-gradient(160deg,#0B3A86 0,#04101F 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} #page-container .mn-kachel:nth-child(2){background:radial-gradient(300px 260px at 80% 10%,#2266FF 0,rgba(34,102,255,0) 70%),linear-gradient(160deg,#01244A 0,#04101F 100%)} #page-container .mn-kachel:nth-child(3){background:linear-gradient(200deg,#2266FF 0,#003A75 55%,#04101F 100%)} #page-container .mn-kachel:nth-child(4){background:radial-gradient(300px 300px at 20% 30%,#6B9BFF 0,rgba(34,102,255,0) 70%),linear-gradient(160deg,#003A75 0,#04101F 100%)} #page-container .mn-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s} #page-container .mn-kachel:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,16,31,0) 38%,rgba(4,16,31,.92) 100%); transition:background-color .35s} #page-container .mn-kachel:hover:before{background-color:rgba(0,58,117,.55)} #page-container .mn-kachel:hover img{transform:scale(1.05)} #page-container .mn-kachel .mn-kachel-text{position:absolute;z-index:2;left:24px;right:24px;bottom:24px;display:block} #page-container .mn-kachel strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:22px;line-height:1.25;font-weight:500;color:#fff;padding-bottom:6px} #page-container .mn-kachel small{display:block;font-size:14px;line-height:21px;color:#C4D3EC} #page-container .mn-kachel em{display:inline-block;font-style:normal;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:#fff;padding:5px 10px;border-radius:999px;background:rgba(34,102,255,.85);margin-bottom:12px} #page-container .mn-kachel:after{content:"\2192";position:absolute;z-index:2;right:20px;top:20px;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s} #page-container .mn-kachel:hover:after{opacity:1;transform:none} @media(max-width:980px){#page-container .mn-kacheln{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){#page-container .mn-kacheln{grid-template-columns:1fr}#page-container .mn-kachel{aspect-ratio:4/3}} /* ============================================================== 5c Startseite v3 */ #page-container .mn-kopfbuehne .mn-kleinzeile p{font-size:14px;line-height:20px;color:var(--mn-text-leise);padding:0} /* Schaufenster: 3 x 2 ueber die volle Breite, 3:2, 6 px Steg, Beschriftung unten links, Hover-Schleier; Handy wischbar */ #page-container .et_pb_row.mn-vollbreit{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important} #page-container .mn-schau{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 6px} #page-container .mn-schau a,#page-container .mn-schau .mn-schau-platz{position:relative;display:block;aspect-ratio:3/2;overflow:hidden; text-decoration:none;color:#fff;background:linear-gradient(160deg,#0B3A86 0,#04101F 100%)} #page-container .mn-schau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)} #page-container .mn-schau a:hover img{transform:scale(1.045)} #page-container .mn-schau a:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(2,10,23,0) 48%,rgba(2,10,23,.9) 100%); transition:background-color .35s} #page-container .mn-schau a:hover:before{background-color:rgba(0,58,117,.42)} #page-container .mn-schau .mn-schau-text{position:absolute;z-index:2;left:32px;right:88px;bottom:28px;display:block} #page-container .mn-schau strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:26px;line-height:1.2;font-weight:500;color:#fff} #page-container .mn-schau small{display:block;font-size:15px;line-height:22px;color:#C9D8F0;padding-top:4px} #page-container .mn-schau a:after{content:"\2192";position:absolute;z-index:2;right:28px;bottom:28px;width:48px;height:48px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:20px;color:#003A75;background:#fff;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s} #page-container .mn-schau a:hover:after{opacity:1;transform:none} #page-container .mn-schau .mn-schau-platz{display:flex;align-items:flex-end;padding:28px 32px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)} /* Ole 19.09.: der Link steht direkt unter dem Raster, nicht in einem eigenen hohen Block */ #page-container .mn-schau-fuss{margin-top:26px!important;margin-bottom:0!important} #page-container .mn-schau-fuss p{padding:0} #page-container .mn-wischhinweis{display:none} @media(max-width:980px){#page-container .mn-schau{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){ #page-container .mn-schau{display:flex;gap:6px;padding:0 5vw;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-padding:0 5vw} #page-container .mn-schau::-webkit-scrollbar{display:none} #page-container .mn-schau a,#page-container .mn-schau .mn-schau-platz{flex:0 0 84vw;scroll-snap-align:start;border-radius:16px} #page-container .mn-schau .mn-schau-text{left:20px;right:20px;bottom:18px} #page-container .mn-schau strong{font-size:21px} #page-container .mn-schau small{font-size:14px} #page-container .mn-wischhinweis{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-text-leise);padding:16px 5vw 0} #page-container .mn-schau-fuss{margin-top:22px!important} } #page-container .mn-k-bild figure{position:relative;margin:0;height:100%} /* eingebrannte Kennzeichnung unten rechts darf nie abgeschnitten werden: Ecke ist Anker fuer Ausschnitt und Hover-Zoom */ #page-container .mn-k-bild img{object-position:100% 100%;transform-origin:100% 100%} #page-container .mn-k-bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 24px 20px;font-size:14px;line-height:20px;font-weight:600;color:#fff; background:linear-gradient(180deg,rgba(2,10,23,0) 0,rgba(2,10,23,.82) 100%)} /* Haftkarten (Ole 19.09.): in haftender Position VOLLSTAENDIG sichtbar, auch bei 650 bis 780 px Fensterhoehe. Versatz = Kopfleiste (16 + 68) + 12, Staffelung 12. Hoehe an das Fenster gebunden, Inhalt kompakter. */ @media(min-width:981px){ #page-container .mn-karte{--haft-versatz:120px;height:min(520px,calc(100vh - var(--haft-versatz) - 32px));height:min(520px,calc(100svh - var(--haft-versatz) - 32px)); max-height:none;margin-bottom:24px} #page-container #main-content .mn-haft-1{top:96px} #page-container #main-content .mn-haft-2{top:108px} #page-container #main-content .mn-haft-3{top:120px} #page-container .mn-karte>.mn-k-text{padding:40px 48px} #page-container .mn-karte h3{font-size:29px;padding-bottom:10px} #page-container .mn-karte .mn-etikett{margin-bottom:14px!important} #page-container .mn-karte .mn-k-satz p{font-size:18px;padding-bottom:14px} #page-container .mn-karte ul.mn-haken{padding:0 0 20px} #page-container .mn-karte ul.mn-haken li{padding:5px 0 5px 38px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-container .mn-karte ul.mn-haken li:before{top:6px} #page-container .mn-karte ul.mn-haken li:after{top:11px} #page-container .mn-karte .mn-knopfzeile{margin-bottom:0!important} } @media(min-width:981px) and (max-height:800px){ #page-container .mn-karte>.mn-k-text{padding:32px 44px} #page-container .mn-karte h3{font-size:26px;padding-bottom:8px} #page-container .mn-karte .mn-etikett{margin-bottom:10px!important} #page-container .mn-karte .mn-k-satz p{font-size:16px;padding-bottom:10px} #page-container .mn-karte ul.mn-haken{padding-bottom:16px} #page-container .mn-karte ul.mn-haken li{font-size:16px;line-height:24px;padding:4px 0 4px 36px} #page-container .mn-karte ul.mn-haken li:before{top:4px} #page-container .mn-karte ul.mn-haken li:after{top:9px} #page-container .mn-karte a.mn-knopf{padding:13px 26px!important} #page-container .mn-karte a.mn-knopf:hover{padding:13px 26px!important} } @media(min-width:981px) and (max-height:620px){ #page-container #main-content .mn-haft{position:relative;top:auto} #page-container .mn-karte{height:auto;min-height:440px} #page-container #main-content .mn-stapel:after{display:none} } /* Bildplaetze mit festem Seitenverhaeltnis: Angebots-Karten 4:5, KI-Kacheln 4:3 */ @media(min-width:981px){ #page-container .mn-karte>.mn-k-bild{width:auto!important;flex:0 0 auto;height:100%;aspect-ratio:4/5} #page-container .mn-karte>.mn-k-text{width:auto!important;flex:1 1 0} } @media(max-width:980px){#page-container .mn-karte>.mn-k-bild{height:auto;aspect-ratio:4/5;max-height:none}} #page-container .mn-kacheln-43{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} #page-container .mn-kachel-43{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--mn-karte);box-shadow:inset 0 0 0 1px var(--mn-rand); transition:transform .35s,box-shadow .35s} #page-container .mn-kachel-43:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(160,195,255,.5),0 30px 60px -24px rgba(0,8,30,.8)} #page-container .mn-kachel-43 .mn-k43-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(160deg,#0B3A86 0,#04101F 100%)} #page-container .mn-kachel-43:nth-child(2) .mn-k43-bild{background:radial-gradient(300px 260px at 80% 10%,#2266FF 0,rgba(34,102,255,0) 70%),linear-gradient(160deg,#01244A 0,#04101F 100%)} #page-container .mn-kachel-43:nth-child(3) .mn-k43-bild{background:linear-gradient(200deg,#2266FF 0,#003A75 55%,#04101F 100%)} #page-container .mn-kachel-43:nth-child(4) .mn-k43-bild{background:radial-gradient(300px 300px at 20% 30%,#6B9BFF 0,rgba(34,102,255,0) 70%),linear-gradient(160deg,#003A75 0,#04101F 100%)} #page-container .mn-k43-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s} #page-container .mn-kachel-43:hover .mn-k43-bild img{transform:scale(1.05)} /* Serie ki2: Hauptobjekt sitzt rechts der Mitte, unten links ist dunkler Raum. Bild groesser anlegen und links/unten beschneiden, unten weich in die Karte auslaufen lassen (Abschnitt ist dunkel, Karte durchscheinend) */ #page-container .mn-k43-bild:has(img){background:none!important;-webkit-mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0) 100%)} #page-container .mn-k43-bild img{inset:auto;right:0;top:-7%;width:118%;height:118%;max-width:none;transform-origin:60% 45%} #page-container .mn-k43-bild em{position:absolute;z-index:1;left:16px;top:16px;font-style:normal;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:#fff;padding:6px 11px;border-radius:999px;background:rgba(34,102,255,.9)} #page-container .mn-k43-bild em.mn-moeglich{background:rgba(4,16,31,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} #page-container .mn-k43-bild span{position:absolute;left:16px;bottom:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)} #page-container .mn-k43-text{padding:24px 24px 28px} #page-container .mn-k43-text b{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-akzent);padding-bottom:10px} #page-container .mn-k43-text h3{font-size:22px;line-height:1.25;padding-bottom:10px} #page-container .mn-k43-text p{font-size:15px;line-height:1.55;color:var(--mn-text-leise);padding:0} #page-container .mn-k43-text{display:flex;flex-direction:column;flex:1 1 auto} #page-container .mn-k43-text h3{font-size:26px;font-weight:600} #page-container .mn-k43-text ul{list-style:none;padding:6px 0 22px;margin:0} #page-container .mn-k43-text li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:22px;color:var(--mn-text);border-top:1px solid var(--mn-rand)} #page-container .mn-k43-text li:first-child{border-top:0} #page-container .mn-k43-text li:before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;background:var(--mn-akzent)} #page-container .mn-k43-text li.mn-mehrzeile{color:var(--mn-text-leise);font-style:italic} #page-container .mn-k43-text li.mn-mehrzeile:before{display:none} #page-container .mn-k43-text a.mn-mehr{margin-top:auto;align-self:flex-start;font-size:15px} @media(max-width:1100px){#page-container .mn-kacheln-43{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){#page-container .mn-kacheln-43{grid-template-columns:1fr}} /* Kachel-Unterzeile KI */ #page-container .mn-unter-kacheln{margin-top:32px!important;margin-bottom:0!important} #page-container .mn-unter-kacheln p{font-size:20px;line-height:1.5;color:var(--mn-ueberschrift);max-width:900px} #page-container .mn-unter-kacheln p+p{font-size:16px;padding-top:4px} #page-container div.mn-kachel{cursor:default} /* Leitsatz gross */ #page-container .mn-leit-gross p{font-family:'Oswald',Arial,sans-serif!important;font-size:clamp(26px,1.5vw + 20px,40px);line-height:1.3;font-weight:400;color:var(--mn-ueberschrift);max-width:1040px;padding:0} #page-container .mn-leit-gross p span{color:var(--mn-akzent)} /* Festpreis-Karte */ #page-container .mn-preiszeile{display:flex!important;align-items:stretch;gap:0;padding:0!important;border-radius:var(--mn-radius);overflow:hidden;margin-top:56px; background:var(--mn-karte);box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-preiszeile:after{display:none} #page-container .mn-preiszeile>.et_pb_column{float:none;margin:0!important} #page-container .mn-preiszeile>.mn-preis-l{width:42%!important;padding:56px 48px;background:var(--mn-karte-dunkel)} #page-container .mn-preiszeile>.mn-preis-r{width:58%!important;padding:56px 64px} #page-container .mn-preis p{padding:0 0 20px;font-size:17px;line-height:1.4;color:var(--mn-text)} #page-container .mn-preis strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:clamp(44px,2vw + 30px,64px);line-height:1.05;font-weight:600;color:var(--mn-ueberschrift)} #page-container .mn-preis p.mn-fein{font-size:14px;color:var(--mn-text-leise);padding:12px 0 0} #page-container .mn-preis-r ul.mn-haken{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding-bottom:20px} #page-container .mn-preis-unter{margin-top:40px!important} @media(max-width:980px){ #page-container .mn-preiszeile{flex-direction:column;margin-top:40px} #page-container .mn-preiszeile>.mn-preis-l,#page-container .mn-preiszeile>.mn-preis-r{width:100%!important;padding:36px 24px} #page-container .mn-preis-r ul.mn-haken{grid-template-columns:1fr} } /* Stimmen und Ansprechpartner */ #page-container .mn-stimmen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:48px 0 32px} #page-container .mn-stimmen blockquote{margin:0;padding:36px;border:0;border-radius:var(--mn-radius);background:var(--mn-karte);box-shadow:var(--mn-schatten),var(--mn-lichtkante); font-size:18px;line-height:1.6;color:var(--mn-text)} #page-container .mn-stimmen blockquote:before{content:"\201E";display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:64px;line-height:.7;color:var(--mn-akzent);padding-bottom:8px} #page-container .mn-stimmen cite{display:block;font-style:normal;font-size:14px;font-weight:600;color:var(--mn-text-leise);padding-top:16px} /* Ansprechpartner: Ole 19.09. nicht mehr neben dem Slider, sondern als schmale Zeile darunter */ #page-container .mn-partner{padding:26px 32px;border-radius:var(--mn-radius);background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante);margin-top:32px; display:grid;grid-template-columns:minmax(210px,1fr) 2.2fr;gap:6px 44px;align-items:start} #page-container .mn-partner h3{font-size:22px;padding:0;align-self:center} #page-container .mn-partner p{font-size:16px;line-height:1.6;padding:0;grid-column:2} #page-container .mn-partner p+p{padding-top:10px} @media(max-width:980px){#page-container .mn-stimmen{grid-template-columns:1fr} #page-container .mn-partner{grid-template-columns:1fr;gap:10px;padding:24px;margin-top:24px} #page-container .mn-partner p{grid-column:1}} /* Trustindex-Slider: volle Inhaltsbreite, ohne Kopf mit Gesamtnote, Karten folgen Tag und Nacht */ #page-container .mn-bewertungen{margin:26px 0 22px;min-height:120px} #page-container .mn-stimmen-fuss{margin-top:0!important} #page-container .mn-stimmen-fuss p{padding:0} /* Das Widget bringt fuer Layout 5 ein max-width:calc(100% - 285px) am Karten-Behaelter und flex:0 0 25 % je Karte mit. Dadurch blieb rechts rund ein Sechstel der Breite leer. Beides wird hier aufgehoben: Behaelter volle Breite, drei Karten am Desktop, zwei am Tablet, eine am Handy. Die Pfeile liegen im Widget selbst (absolut, left/right 1 px) und bleiben damit innerhalb der Inhaltsbreite. */ #page-container .mn-bewertungen .ti-widget,#page-container .mn-bewertungen .ti-widget-container{width:100%!important;max-width:none!important} #page-container .mn-bewertungen .ti-widget .ti-reviews-container{width:100%!important;max-width:100%!important} #page-container .mn-bewertungen .ti-widget .ti-review-item{flex:0 0 33.333%!important;width:33.333%!important;max-width:33.333%!important} @media(max-width:980px){#page-container .mn-bewertungen .ti-widget .ti-review-item{flex:0 0 50%!important;width:50%!important;max-width:50%!important}} @media(max-width:600px){#page-container .mn-bewertungen .ti-widget .ti-review-item{flex:0 0 100%!important;width:100%!important;max-width:100%!important}} /* Einwilligungs-Platzhalter: volle Inhaltsbreite, Text und Knopf mittig, gleiche Kartenoptik wie die Bewertungen */ #page-container .mn-ti-hinweis{max-width:none;padding:32px;border-radius:20px;background:var(--mn-karte);box-shadow:var(--mn-lichtkante),0 14px 34px -18px rgba(0,30,75,.35); text-align:center} #page-container .mn-ti-hinweis p{font-size:16px;line-height:1.55;color:var(--mn-text);padding:0 0 16px;max-width:680px;margin:0 auto} #page-container .mn-ti-hinweis p:last-child{padding:0} #page-container .mn-bewertungen .ti-widget .ti-header,#page-container .mn-bewertungen .ti-widget .ti-footer,#page-container .mn-bewertungen .ti-widget .ti-rating-text, #page-container .mn-bewertungen .ti-widget .ti-verified-by,#page-container .mn-bewertungen .ti-widget .ti-large-logo{display:none!important} #page-container .mn-bewertungen .ti-widget .ti-review-item>.ti-inner,#page-container .mn-bewertungen .ti-widget .ti-review-item .ti-inner{background:var(--mn-karte)!important; border:0!important;border-radius:20px!important;box-shadow:var(--mn-lichtkante),0 14px 34px -18px rgba(0,30,75,.35)!important;padding:24px!important} #page-container .mn-bewertungen .ti-widget .ti-review-content,#page-container .mn-bewertungen .ti-widget .ti-review-text-container{color:var(--mn-text)!important; font-family:'Open Sans',Arial,sans-serif!important;font-size:15px!important;line-height:1.55!important} #page-container .mn-bewertungen .ti-widget .ti-name{color:var(--mn-ueberschrift)!important;font-family:'Open Sans',Arial,sans-serif!important;font-weight:600!important} #page-container .mn-bewertungen .ti-widget .ti-date{color:var(--mn-text-leise)!important} #page-container .mn-bewertungen .ti-widget .ti-read-more span{color:var(--mn-akzent)!important} #page-container .mn-bewertungen .ti-widget .ti-controls .ti-next,#page-container .mn-bewertungen .ti-widget .ti-controls .ti-prev{background:var(--mn-karte)!important; box-shadow:var(--mn-lichtkante),0 6px 18px rgba(0,30,75,.25)!important} #page-container .mn-bewertungen .ti-widget .ti-controls .ti-next:before,#page-container .mn-bewertungen .ti-widget .ti-controls .ti-prev:before, #page-container .mn-bewertungen .ti-widget .ti-controls .ti-next:after,#page-container .mn-bewertungen .ti-widget .ti-controls .ti-prev:after{background:var(--mn-akzent)!important} /* helle Fassung der Bereichs-Kacheln (KI-Beratung): weisse Karte mit Schatten, Bild ohne Auslauf */ #page-container .mn-kacheln-hell .mn-kachel-43{box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-kacheln-hell .mn-kachel-43:hover{box-shadow:0 36px 80px -24px rgba(0,30,75,.4),var(--mn-lichtkante)} #page-container .mn-kacheln-hell .mn-k43-bild:has(img){-webkit-mask-image:none;mask-image:none} /* helle Bildserie: randlos oben in der weissen Karte (Radius 20, Karte gibt die Kante), kein Beschnitt; nachts duenner Rand, leicht abgedunkelt */ #page-container .mn-kacheln-hell .mn-k43-bild img{inset:0;width:100%;height:100%;transform-origin:50% 50%} .mn-nacht #page-container .mn-kacheln-hell .mn-k43-bild{box-shadow:inset 0 0 0 1px rgba(124,166,255,.28)} .mn-nacht #page-container .mn-kacheln-hell .mn-k43-bild img{filter:brightness(.92) saturate(.96)} .mn-nacht #page-container .mn-kacheln-hell .mn-kachel-43{box-shadow:inset 0 0 0 1px var(--mn-rand),var(--mn-schatten)} #page-container .mn-unter-kacheln a.mn-mehr{margin-right:28px} /* KI-Beratung: 2 x 2, Kachel quer, zwei Zonen (Bild 44 / Text 56), Akzentlinie links, Hover hebt und laesst die Linie leuchten. Ole 19.09. (Feinschliff): Das Hauptobjekt (Kompass, Wuerfel, Tafel, Schild) sass bei object-fit:cover halb ausserhalb - die Zone ist hochkant, die Bilder sind 4:3. Jetzt steht jedes Bild VOLLSTAENDIG (contain) in voller Zonenbreite; den Rest der Zone fuellt dasselbe Bild stark weichgezeichnet, deshalb gibt es keine Balken und keine Kante. Alle vier Kacheln sind gleich hoch (grid-auto-rows:1fr ueber beide Reihen). */ #page-container .mn-kacheln-quer{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:28px} #page-container .mn-kachel-quer{position:relative;display:grid;grid-template-columns:44% 1fr;min-height:310px;border-radius:20px;overflow:hidden; background:var(--mn-karte);box-shadow:var(--mn-schatten),var(--mn-lichtkante);transition:transform .35s,box-shadow .35s} #page-container .mn-kachel-quer:before{content:"";position:absolute;z-index:3;left:0;top:0;bottom:0;width:4px;background:var(--mn-marke);transition:box-shadow .35s,width .35s} #page-container .mn-kachel-quer:hover{transform:translateY(-6px);box-shadow:0 40px 90px -26px rgba(0,30,75,.42),var(--mn-lichtkante)} #page-container .mn-kachel-quer:hover:before{width:5px;box-shadow:0 0 22px 2px rgba(34,102,255,.85)} #page-container .mn-kq-bild{position:relative;overflow:hidden;background:var(--mn-flaeche-3);border-right:1px solid var(--mn-rand)} /* Randlos fuellend, keine sichtbare Bildkante (Ole 19.09.). In der Zone steht die Hochformat-Fassung: Hauptobjekt oben, unten ruhige Flaeche fuer den Titel. Am Handy liegt ueber source das Querformat. */ #page-container .mn-kq-bild picture{display:contents} #page-container .mn-kq-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0; display:block;transition:transform .8s} #page-container .mn-kachel-quer:hover .mn-kq-bild img{transform:scale(1.05)} #page-container .mn-kq-bild h3{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:48px 22px 18px 26px;font-size:24px;line-height:1.2;font-weight:600; color:#003A75;background:linear-gradient(180deg,rgba(231,239,252,0) 0,rgba(231,239,252,.86) 44%,rgba(231,239,252,.97) 100%)} #page-container .mn-kq-text{padding:22px 28px 24px;min-width:0} #page-container .mn-kq-text ul{padding-top:0} .mn-nacht #page-container .mn-kq-bild img{filter:brightness(.9) saturate(.96)} .mn-nacht #page-container .mn-kq-bild h3{color:#F2F6FF;background:linear-gradient(180deg,rgba(7,22,44,0) 0,rgba(7,22,44,.9) 46%,rgba(7,22,44,.98) 100%)} .mn-nacht #page-container .mn-kachel-quer{box-shadow:inset 0 0 0 1px var(--mn-rand),var(--mn-schatten)} @media(max-width:1100px){#page-container .mn-kacheln-quer{grid-template-columns:1fr;grid-auto-rows:auto}} @media(max-width:767px){ #page-container .mn-kachel-quer{grid-template-columns:1fr;min-height:0} #page-container .mn-kq-bild{aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--mn-rand)} #page-container .mn-kq-bild img{object-position:50% 50%} #page-container .mn-kq-bild h3{padding:56px 20px 16px 24px;font-size:22px} #page-container .mn-kq-text{padding:22px 22px 26px 26px} } /* Ausrichtung: in mittigen Abschnittskoepfen folgen Etikett, H2, Satz, Knopf und Zeile darunter derselben Achse (auch am Handy) */ #page-container .mn-mitte .et_pb_module,#page-container .mn-mitte .et_pb_text_inner,#page-container .mn-mitte .et_pb_module_header,#page-container .mn-mitte h2{text-align:center!important} #page-container .mn-mitte .mn-lese,#page-container .mn-mitte h2{margin-left:auto!important;margin-right:auto!important} #page-container .mn-mitte .mn-knopfzeile p{justify-content:center} /* Fragen: aufklappbar, Antwort steht im HTML. Ole 19.09.: volle Inhaltsbreite, ab 1100 px zwei Spalten, Kopf und Akkordeon gleich breit. Spalten sind gleich gefuellt, weil die Fragen nach Hoehe verteilt werden. */ /* Zwei feste Spalten ab 1100 px: die Fragen stehen im HTML in zwei Bloecken, deshalb springt beim Aufklappen nichts in die andere Spalte (das waere bei column-count passiert). Der Text fuellt die Spalte ganz aus, keine halb gefuellten Felder (Ole 19.09.). */ #page-container .mn-fragen{max-width:none;margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start} @media(max-width:1099px){#page-container .mn-fragen{grid-template-columns:1fr;gap:0}} #page-container .mn-fragen details{border-top:1px solid var(--mn-rand)} #page-container .mn-fragen-spalte>details:last-child{border-bottom:1px solid var(--mn-rand)} #page-container .mn-fragen summary{list-style:none;cursor:pointer;position:relative;padding:18px 56px 18px 0} #page-container .mn-fragen summary::-webkit-details-marker{display:none} #page-container .mn-fragen summary h3{padding:0;font-size:21px;line-height:1.3;transition:color .2s} #page-container .mn-fragen summary:hover h3{color:var(--mn-akzent)} #page-container .mn-fragen summary:after{content:"+";position:absolute;right:0;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;display:flex; align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--mn-akzent);border:1px solid var(--mn-rand);transition:transform .3s,background-color .3s} #page-container .mn-fragen details[open] summary:after{transform:rotate(45deg);background:color-mix(in srgb,var(--mn-akzent) 14%,transparent)} #page-container .mn-fragen details p{padding:0 44px 22px 0;max-width:none} #page-container .mn-fragen summary{padding-right:44px} #page-container .mn-schluss .mn-mail p{font-size:16px;color:var(--mn-text-leise);padding-top:8px} /* ============================================================== 5d Unterseiten (mn_unter.py) */ /* --- Ein Abstands-System fuer alle Unterseiten (Ole 19.09.): Sektion 72 / 48, zwischen zwei Zeilen einer Sektion immer 40 px. Keine Einzelfall-Werte mehr. --- */ :root{--mn-luft:40px} #page-container .mn-abschnitt>.et_pb_row+.et_pb_row{margin-top:var(--mn-luft)!important} #page-container .mn-abschnitt>.et_pb_row.mn-kartenkopf{margin-bottom:0} #page-container .mn-abschnitt>.et_pb_row.mn-vollbreit+.et_pb_row{margin-top:26px!important} @media(max-width:767px){:root{--mn-luft:30px}} /* Kaesten auf dunkler Buehne: helle Flaeche wuerde helle Schrift tragen (Kontrastfehler) */ .mn-dunkel #page-container .mn-klartext,.mn-dunkel #page-container .mn-merk,.mn-dunkel #page-container .mn-zitatkasten{ background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .mn-dunkel #page-container .mn-klartext p,.mn-dunkel #page-container .mn-merk li,.mn-dunkel #page-container .mn-merk p, .mn-dunkel #page-container .mn-zitatkasten p{color:#D7E2F3} .mn-dunkel #page-container .mn-klartext strong,.mn-dunkel #page-container .mn-merk strong{color:#FFFFFF} .mn-dunkel #page-container .mn-merk li{border-top-color:rgba(255,255,255,.16)} /* mittige Bloecke: alles auf einer Achse, auch die Linkzeile darunter */ #page-container .mn-mitte .mn-unterlinks p,#page-container .mn-schluss .mn-unterlinks p{justify-content:center} #page-container .mn-mitte .mn-mail p,#page-container .mn-mitte .mn-kleinzeile p{text-align:center} /* --- Hero der Unterseiten: niedriger als die Startseite, Inhalt ohne Scrollen sichtbar --- */ #page-container .mn-kopfbuehne.mn-hero-klein{min-height:min(62svh,600px);padding-top:clamp(124px,14vh,160px)!important; padding-bottom:64px!important;justify-content:center} #page-container .mn-hero-klein .mn-hero-inhalt{max-width:820px} #page-container .mn-hero-klein h1{font-size:clamp(34px,min(1.9vw + 24px,6.6vh),54px);padding-bottom:14px} #page-container .mn-hero-klein .mn-etikett{margin-bottom:12px!important} #page-container .mn-hero-klein .mn-unter p{font-size:19px;line-height:1.55;max-width:660px} #page-container .mn-hero-klein .mn-unter{margin-bottom:22px!important} #page-container .mn-hero-klein .mn-knopfzeile{margin-bottom:10px!important} #page-container .mn-hero-klein .mn-kleinzeile{margin-bottom:18px!important} #page-container .mn-hero-klein .mn-hero-glanz{display:none} #page-container .mn-hero-klein .mn-hero-bg img{object-position:74% 46%} /* Die Aussparung um das Geraet gilt nur fuer das Startseiten-Motiv; hier liegt der Himmel ueber dem ganzen Bild */ #page-container .mn-hero-klein:has(.mn-hat-bild) canvas{-webkit-mask-image:none;mask-image:none} .mn-nacht #page-container .mn-hero-klein:has(.mn-hat-bild) .mn-nachtgrund{opacity:.86;-webkit-mask-image:none;mask-image:none} #page-container .mn-hero-klein:has(.mn-hat-bild) .mn-polar{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.3) 82%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 0,#000 48%,rgba(0,0,0,.3) 82%,rgba(0,0,0,0) 100%); -webkit-mask-composite:source-over;mask-composite:add} #page-container .mn-hero-klein .mn-hero-bg:after{background: linear-gradient(0deg,rgba(2,10,23,.92) 0,rgba(2,10,23,.3) 13%,rgba(2,10,23,0) 28%), linear-gradient(90deg,rgba(2,10,23,.9) 0,rgba(2,10,23,.66) 40%,rgba(2,10,23,.05) 80%)} @media(max-width:980px){ #page-container .mn-kopfbuehne.mn-hero-klein{min-height:0;padding-top:104px!important;padding-bottom:48px!important} #page-container .mn-hero-klein .mn-hero-bg img{object-position:66% 50%} #page-container .mn-hero-klein .mn-hero-bg:after{background:linear-gradient(180deg,rgba(2,10,23,.8) 0,rgba(2,10,23,.62) 58%,rgba(2,10,23,.4) 100%)} } /* --- Zeitleiste statt Nummern (Ole 19.09.: keine Ziffern, keine durchgezaehlten Kacheln) --- */ #page-container ol.mn-schritte{list-style:none;margin:0;padding:0 0 0 30px;position:relative} #page-container ol.mn-schritte:before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px; background:linear-gradient(180deg,rgba(0,0,0,0) 0,var(--mn-rand) 8%,var(--mn-rand) 92%,rgba(0,0,0,0) 100%)} #page-container ol.mn-schritte li{position:relative;display:grid;grid-template-columns:minmax(200px,.85fr) 1.6fr;gap:8px 44px; padding:20px 0;border-top:1px solid var(--mn-rand)} #page-container ol.mn-schritte li:first-child{border-top:0;padding-top:4px} #page-container ol.mn-schritte li:before{content:"";position:absolute;left:-30px;top:30px;width:11px;height:11px;border-radius:50%; background:var(--mn-flaeche);box-shadow:0 0 0 1px var(--mn-akzent),0 0 0 5px color-mix(in srgb,var(--mn-akzent) 14%,transparent)} #page-container ol.mn-schritte li:first-child:before{top:14px} #page-container ol.mn-schritte h3{font-size:21px;line-height:1.25;padding:0} #page-container ol.mn-schritte p{font-size:16px;line-height:1.6;color:var(--mn-text-leise);padding:0} .mn-dunkel #page-container ol.mn-schritte li:before{background:#04101F} @media(max-width:900px){ #page-container ol.mn-schritte li{grid-template-columns:1fr;gap:6px} #page-container ol.mn-schritte li:before{top:24px} } /* --- Kartenraster der Einzelloesungen --- */ #page-container .mn-loesungen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #page-container .mn-loesung{position:relative;display:flex;flex-direction:column;padding:26px 26px 28px;border-radius:20px; background:var(--mn-karte);box-shadow:inset 0 0 0 1px var(--mn-rand),0 18px 40px -26px rgba(0,30,75,.4); transition:transform .35s,box-shadow .35s} #page-container .mn-loesung:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mn-akzent) 48%,transparent),0 30px 62px -28px rgba(0,30,75,.55)} /* Ole 19.09.: keine Nummern auf den Karten. Stattdessen eine feine Akzentlinie ueber dem Titel. */ #page-container .mn-loesung:before{content:"";display:block;width:30px;height:2px;background:var(--mn-akzent); border-radius:2px;margin-bottom:16px;transition:width .35s} #page-container .mn-loesung:hover:before{width:48px} #page-container .mn-loesung h3{font-size:21px;line-height:1.25;padding-bottom:10px} #page-container .mn-loesung p{font-size:15px;line-height:1.6;color:var(--mn-text-leise);padding:0 0 10px} #page-container .mn-loesung p:last-of-type{padding-bottom:0} #page-container .mn-loesung p.mn-passt{margin-top:auto;padding:14px 0 0;border-top:1px solid var(--mn-rand);font-size:14px;line-height:1.5} #page-container .mn-loesung p.mn-passt strong{color:var(--mn-text)} #page-container .mn-loesung a.mn-mehr{align-self:flex-start;margin-top:12px;font-size:15px} #page-container .mn-loesungen-vier{grid-template-columns:repeat(4,1fr)} #page-container .mn-loesung ul.mn-bpunkte{list-style:none;padding:4px 0 16px;margin:0} #page-container .mn-loesung ul.mn-bpunkte li{position:relative;padding:8px 0 8px 22px;font-size:15px;line-height:22px; color:var(--mn-text);border-top:1px solid var(--mn-rand)} #page-container .mn-loesung ul.mn-bpunkte li:first-child{border-top:0} #page-container .mn-loesung ul.mn-bpunkte li:before{content:"";position:absolute;left:0;top:18px;width:10px;height:2px;background:var(--mn-akzent)} #page-container .mn-loesung ul.mn-bpunkte li.mn-mehrzeile{color:var(--mn-text-leise);font-style:italic} #page-container .mn-loesung ul.mn-bpunkte li.mn-mehrzeile:before{display:none} #page-container .mn-loesung ul.mn-bpunkte+a.mn-mehr{margin-top:auto} @media(max-width:1180px){#page-container .mn-loesungen-vier{grid-template-columns:1fr 1fr}} @media(max-width:1100px){#page-container .mn-loesungen{grid-template-columns:1fr 1fr}} @media(max-width:640px){#page-container .mn-loesungen,#page-container .mn-loesungen-vier{grid-template-columns:1fr}} /* --- Netzwerk-Bloecke (Instagram, Facebook, LinkedIn, TikTok), vier gleichwertige Kacheln --- */ #page-container .mn-netze{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} #page-container .mn-netz{display:flex;flex-direction:column;padding:28px 30px 30px;border-radius:20px;background:var(--mn-karte); box-shadow:inset 0 0 0 1px var(--mn-rand),0 18px 40px -26px rgba(0,30,75,.4);transition:transform .35s,box-shadow .35s} #page-container .mn-netz:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mn-akzent) 48%,transparent),0 30px 62px -28px rgba(0,30,75,.55)} #page-container .mn-netz .mn-netzkopf{display:flex;align-items:center;gap:14px;padding-bottom:12px} #page-container .mn-netz svg.mn-glyph{width:28px;height:28px;display:block;flex:0 0 auto;color:var(--mn-akzent)} #page-container .mn-netz h3{font-size:22px;line-height:1.2;padding:0} #page-container .mn-netz p{font-size:16px;line-height:1.6;color:var(--mn-text-leise);padding:0} @media(max-width:820px){#page-container .mn-netze{grid-template-columns:1fr}} /* --- Bildband zwischen zwei Textbloecken --- */ #page-container .mn-bildband{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} #page-container .mn-bildband figure{margin:0;position:relative;border-radius:20px;overflow:hidden; background:linear-gradient(160deg,#0B3A86 0,#04101F 100%);box-shadow:0 22px 50px -28px rgba(0,30,75,.55)} #page-container .mn-bildband img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover} #page-container .mn-bildband.mn-band-breit img{aspect-ratio:21/9} #page-container .mn-bildband figcaption{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 16px;font-size:14px;line-height:20px; font-weight:600;color:#fff;background:linear-gradient(180deg,rgba(2,10,23,0) 0,rgba(2,10,23,.86) 100%)} @media(max-width:640px){#page-container .mn-bildband.mn-band-breit img{aspect-ratio:16/9}} /* --- Geraetepaar: echte Aufnahme einer Kundenseite im Laptop- und im Handyrahmen --- Ole 21.09.: "Der Handy-Screenshot passt ueberhaupt nicht in den vorgesehenen Rahmen und ist weit nach unten gerutscht." Ursache war nicht das Bild, sondern diese Regel: prozentuale INNENABSTAENDE rechnen in CSS gegen die Breite des ELTERNELEMENTS. Das `padding:3.4%` aus geraete_mn.py waren damit 3,4 Prozent von 1240 px (der Zeile) statt von 211 px (dem Handy) - der Bildschirm kam auf 124 x 361 statt 194 x 431 px, darunter blieb eine weisse Flaeche. Jetzt steht der Wert umgerechnet hier: 3,4 % des Handys sind 3,4 % x 17 % (bzw. 22 %) der Zeile. Beim Hero-Rahmen stimmt es, dort sitzt das Handy in einer eigenen Huelle. */ #page-container .mn-geraetepaar{position:relative;display:block;padding:0;margin:0} #page-container .mn-geraetepaar .mn-laptop{width:84%} /* Ole 21.09.: Das Handy hing 73 bis 86 px unter dem Rechner und lief in die Bildbeschriftung. Ursache war der Innenabstand `padding:0 0 4%` der Figur - `bottom:0` sass damit unter der Unterkante des Laptops. Jetzt stehen beide Geraete auf einer Linie und ueberlappen sich nur seitlich, wie ein Geraetepaar im Schaufenster. */ #page-container .mn-geraetepaar .mn-handy{position:absolute;right:0;bottom:0;width:17%;padding:.578%} #page-container .mn-geraetepaar figcaption{padding:16px 4px 0;font-size:14px;line-height:20px;color:var(--mn-text-leise)} @media(max-width:700px){ /* Am Handy nebeneinander waere der Bildschirm des Handys 70 px breit - dort untereinander, mittig, ohne Leerflaeche und ohne Ueberlappung mit der Beschriftung. */ #page-container .mn-geraetepaar{display:flex;flex-direction:column;align-items:center} #page-container .mn-geraetepaar .mn-laptop{width:100%} #page-container .mn-geraetepaar .mn-handy{position:static;width:52%;padding:2.29%;margin-top:18px} #page-container .mn-geraetepaar figcaption{align-self:stretch} } /* --- Kasten "Im Klartext" und Strich-Kasten --- */ #page-container .mn-klartext{border-left:4px solid var(--mn-marke);border-radius:0 18px 18px 0;padding:22px 26px; background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante)} #page-container .mn-klartext strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:19px;line-height:1.25;font-weight:600;color:var(--mn-ueberschrift);padding-bottom:6px} #page-container .mn-klartext p{font-size:16px;line-height:1.6;color:var(--mn-text);padding:0} #page-container .mn-merk{border-radius:20px;padding:28px 30px;background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante)} #page-container .mn-merk strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:22px;line-height:1.25;font-weight:600;color:var(--mn-ueberschrift);padding-bottom:4px} #page-container .mn-merk ul{list-style:none;padding:10px 0 14px;margin:0} #page-container .mn-merk li{position:relative;padding:9px 0 9px 30px;font-size:16px;line-height:1.55;color:var(--mn-text); border-top:1px solid var(--mn-rand)} #page-container .mn-merk li:first-child{border-top:0} #page-container .mn-merk li:before{content:"";position:absolute;left:0;top:19px;width:16px;height:2px;background:var(--mn-akzent)} #page-container .mn-merk p{font-size:16px;line-height:1.6;color:var(--mn-text-leise);padding:0} /* --- Text und hochkantes Bild nebeneinander --- */ #page-container .mn-textbild{display:grid;grid-template-columns:1.4fr .85fr;gap:44px;align-items:start} #page-container .mn-textbild.mn-bild-links{grid-template-columns:.85fr 1.4fr} #page-container .mn-textbild .mn-tb-bild{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--mn-schatten),var(--mn-lichtkante); position:relative} #page-container .mn-textbild .mn-tb-bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover} #page-container .mn-textbild.mn-bild-quer .mn-tb-bild img{aspect-ratio:4/3} #page-container .mn-textbild.mn-bild-links .mn-tb-bild{order:-1} #page-container .mn-textbild figcaption{padding:12px 4px 0;font-size:14px;line-height:20px;color:var(--mn-text-leise)} /* langer Text neben kurzem Bild: das Bild laeuft mit, damit daneben keine leere Flaeche steht */ @media(min-width:901px){#page-container .mn-textbild .mn-tb-bild{position:sticky;top:112px}} #page-container .mn-textbild ol.mn-schritte li{grid-template-columns:1fr;gap:6px} #page-container .mn-textbild ol.mn-schritte li:before{top:24px} #page-container .mn-textbild ol.mn-schritte li:first-child:before{top:8px} #page-container .mn-textbild h2,#page-container .mn-textbild h3{padding-bottom:12px} #page-container .mn-textbild p{padding-bottom:14px} #page-container .mn-textbild p:last-child{padding-bottom:0} @media(max-width:900px){ #page-container .mn-textbild,#page-container .mn-textbild.mn-bild-links{grid-template-columns:1fr;gap:26px} #page-container .mn-textbild.mn-bild-links .mn-tb-bild{order:0} } /* --- grosser Abschnitt mit Bild im Wechsel (KI-Beratung) --- */ #page-container .mn-teile{display:grid;gap:8px} #page-container .mn-teil{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;padding:36px 0; border-top:1px solid var(--mn-rand)} #page-container .mn-teil:first-child{border-top:0;padding-top:4px} #page-container .mn-teil:nth-child(even) .mn-teil-bild{order:2} #page-container .mn-teil-bild{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-teil-bild img{display:block;width:100%;height:auto} #page-container .mn-teil h3{font-size:30px;line-height:1.15;padding-bottom:10px} #page-container .mn-teil p{font-size:17px;line-height:1.6;padding:0 0 6px} #page-container .mn-teil ul{list-style:none;padding:10px 0 0;margin:0} #page-container .mn-teil li{position:relative;padding:9px 0 9px 26px;font-size:16px;line-height:1.55;border-top:1px solid var(--mn-rand)} #page-container .mn-teil li:before{content:"";position:absolute;left:0;top:19px;width:14px;height:2px;background:var(--mn-akzent)} #page-container .mn-teil a.mn-mehr{display:inline-block;margin-top:16px} .mn-nacht #page-container .mn-teil-bild img{filter:brightness(.92) saturate(.96)} @media(max-width:900px){ #page-container .mn-teil{grid-template-columns:1fr;gap:22px;padding:28px 0} #page-container .mn-teil:nth-child(even) .mn-teil-bild{order:0} #page-container .mn-teil h3{font-size:26px} } /* --- Festpreis-Karte --- */ #page-container .mn-preis-karte{display:grid;grid-template-columns:.8fr 1.2fr;border-radius:24px;overflow:hidden; background:var(--mn-karte);box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-preis-l{padding:40px 40px 36px;background:var(--mn-karte-dunkel)} #page-container .mn-preis-l p{padding:0 0 12px;font-size:17px;line-height:1.35;color:#D7E2F3} #page-container .mn-preis-l strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:clamp(40px,2vw + 28px,58px);line-height:1.03;font-weight:600;color:#fff} #page-container .mn-preis-l p.mn-fein{font-size:14px;line-height:1.5;color:#A3B6D6;padding:14px 0 0} #page-container .mn-preis-r{padding:36px 40px 34px} #page-container .mn-preis-r ul.mn-haken{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:0 0 18px} #page-container .mn-preis-r ul.mn-haken li{font-size:16px;line-height:24px} #page-container .mn-preis-r .mn-knopfzeile p{padding:0} #page-container .mn-preis-unterzeile{padding-top:18px} #page-container .mn-preis-unterzeile p{font-size:16px;line-height:1.6;color:var(--mn-text-leise);padding:0} .mn-nacht #page-container .mn-preis-karte{box-shadow:0 0 0 1px rgba(124,166,255,.6),0 0 70px -6px rgba(34,102,255,.5),var(--mn-schatten)} @media(max-width:900px){ #page-container .mn-preis-karte{grid-template-columns:1fr} #page-container .mn-preis-l{padding:32px 26px 28px} #page-container .mn-preis-r{padding:28px 26px 30px} #page-container .mn-preis-r ul.mn-haken{grid-template-columns:1fr} } /* --- Referenzen: Filter und Raster --- */ #page-container .mn-filter{display:grid;gap:12px;margin-bottom:24px} #page-container .mn-filter-reihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center} #page-container .mn-filter-reihe .mn-fkopf{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--mn-text-leise);margin-right:8px;min-width:68px} #page-container button.mn-fpille{font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:18px;font-weight:600;color:var(--mn-text); padding:9px 16px;border-radius:999px;background:var(--mn-karte);border:1px solid var(--mn-rand);cursor:pointer; transition:background-color .2s,border-color .2s,color .2s} #page-container button.mn-fpille:hover{border-color:var(--mn-akzent);color:var(--mn-akzent)} #page-container button.mn-fpille[aria-pressed="true"]{background:var(--mn-marke);border-color:var(--mn-marke);color:#fff} #page-container .mn-treffer{font-size:14px;line-height:20px;color:var(--mn-text-leise);padding:16px 0 0} #page-container .mn-schau a.mn-aus{display:none} #page-container .mn-schau.mn-schau-ref{grid-template-columns:repeat(3,1fr)} @media(max-width:980px){#page-container .mn-schau.mn-schau-ref{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){ #page-container .mn-schau.mn-schau-ref{display:grid;grid-template-columns:1fr;overflow:visible;padding:0 5vw} #page-container .mn-schau.mn-schau-ref a{flex:none} } /* --- Ganzseiten-Aufnahme im Browserrahmen --- */ #page-container figure.mn-schirm-rahmen{margin:0;border-radius:18px;overflow:hidden;background:#0A1F3A; box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-schirm-leiste{display:flex;align-items:center;gap:8px;padding:12px 16px; background:linear-gradient(180deg,#0E2646 0,#0A1F3A 100%)} #page-container .mn-schirm-leiste i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.26)} #page-container .mn-schirm-leiste b{margin-left:12px;font-family:'Open Sans',Arial,sans-serif;font-size:13px;line-height:18px;font-weight:400; color:#A3B6D6;padding:5px 15px;border-radius:999px;background:rgba(255,255,255,.07)} #page-container .mn-schirm-bild{position:relative;max-height:660px;overflow:hidden} #page-container .mn-schirm-bild img{display:block;width:100%;height:auto} #page-container .mn-schirm-bild:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;pointer-events:none; background:linear-gradient(180deg,rgba(4,16,31,0) 0,rgba(4,16,31,.9) 100%)} #page-container figure.mn-schirm-rahmen figcaption{padding:14px 18px 16px;font-size:14px;line-height:20px;color:#A3B6D6; background:#0A1F3A} @media(max-width:767px){#page-container .mn-schirm-bild{max-height:420px}} /* --- Kontakt --- */ #page-container .mn-anrufkarte{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;padding:30px 34px;border-radius:22px; background:var(--mn-karte-dunkel);box-shadow:var(--mn-schatten)} #page-container .mn-anrufkarte .mn-ak-text{flex:1 1 260px} #page-container .mn-anrufkarte span.mn-ak-klein{display:block;font-size:14px;line-height:20px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:#9DBBFF;padding-bottom:8px} #page-container .mn-anrufkarte a.mn-nummer{display:inline-block;font-family:'Oswald',Arial,sans-serif!important;font-size:clamp(30px,1.6vw + 20px,44px);line-height:1.08; font-weight:600;color:#fff;text-decoration:none} #page-container .mn-anrufkarte a.mn-nummer:hover{text-shadow:0 0 22px rgba(124,166,255,.9)} #page-container .mn-anrufkarte p{padding:8px 0 0;font-size:15px;line-height:1.5;color:#C9D6EA} #page-container ul.mn-angaben{list-style:none;margin:0;padding:0} #page-container ul.mn-angaben li{display:grid;grid-template-columns:210px 1fr;gap:20px;padding:13px 0;border-top:1px solid var(--mn-rand); font-size:16px;line-height:1.55} #page-container ul.mn-angaben li:first-child{border-top:0} #page-container ul.mn-angaben li b{font-weight:600;color:var(--mn-text-leise)} @media(max-width:600px){#page-container ul.mn-angaben li{grid-template-columns:1fr;gap:2px}} /* --- Divi-Kontaktformular in unserer Gestaltung --- */ #page-container .mn-form.et_pb_contact_form_container{margin:0!important;padding:0} #page-container .mn-form .et_pb_contact_form{display:flex;flex-wrap:wrap;gap:18px 20px} #page-container .mn-form .et_pb_contact_field{padding:0!important;margin:0!important;flex:1 1 calc(50% - 10px);max-width:none} #page-container .mn-form .et_pb_contact_field.mn-feld-voll{flex:1 1 100%} #page-container .mn-form .et_pb_contact_form_label{display:block;font-size:14px;line-height:20px;font-weight:600; color:var(--mn-text-leise);padding:0 0 6px} #page-container .mn-form .mn-feld-ohne-titel .et_pb_contact_form_label,#page-container .mn-form .et_pb_contact_field_options_title{display:none} #page-container .mn-form input.input,#page-container .mn-form select.input,#page-container .mn-form textarea.input{width:100%;box-sizing:border-box; font-family:'Open Sans',Arial,sans-serif!important;font-size:16px!important;line-height:24px;color:var(--mn-text)!important; background:var(--mn-karte)!important;border:1px solid var(--mn-rand)!important;border-radius:12px!important; padding:13px 16px!important;transition:border-color .2s,box-shadow .2s} #page-container .mn-form textarea.input{min-height:150px;resize:vertical} #page-container .mn-form input.input:focus,#page-container .mn-form select.input:focus,#page-container .mn-form textarea.input:focus{ border-color:var(--mn-akzent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mn-akzent) 18%,transparent);outline:none} #page-container .mn-form .et_pb_contact_field_options_list{display:block} #page-container .mn-form .et_pb_contact_field_checkbox{display:block;position:relative} #page-container .mn-form .et_pb_contact_field_checkbox label{position:relative;display:block;padding:2px 0 2px 34px;font-size:15px; line-height:1.5;color:var(--mn-text);cursor:pointer} #page-container .mn-form .et_pb_contact_field_checkbox label i{position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px; background:var(--mn-karte);box-shadow:inset 0 0 0 1px var(--mn-rand);display:block} #page-container .mn-form .et_pb_contact_field_checkbox input[type=checkbox]:checked+label i{background:var(--mn-marke); box-shadow:inset 0 0 0 1px var(--mn-marke)} #page-container .mn-form .et_pb_contact_field_checkbox input[type=checkbox]:checked+label i:before{content:"";position:absolute; left:8px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} #page-container .mn-form .et_contact_bottom_container{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;width:100%; float:none;margin:0;padding-top:4px} #page-container .mn-form .et_pb_contact_right{margin:0;padding:0!important;border:0} #page-container .mn-form .et_pb_contact_right p{display:flex;align-items:center;gap:10px;padding:0;font-size:15px;color:var(--mn-text-leise)} #page-container .mn-form .et_pb_contact_right label{display:flex;align-items:center;gap:10px} #page-container .mn-form input.et_pb_contact_captcha{width:76px!important;text-align:center;padding:11px 8px!important} #page-container .mn-form .et_pb_button_wrapper{margin:0} #page-container .mn-form button.et_pb_contact_submit{display:inline-flex;align-items:center;gap:10px; font-family:'Open Sans',Arial,sans-serif!important;font-size:16px!important;line-height:20px!important;font-weight:600!important; text-transform:none;padding:16px 30px!important;border-radius:999px!important;border:0!important;cursor:pointer; background:var(--mn-knopf)!important;color:var(--mn-knopf-text)!important;box-shadow:var(--mn-knopf-schein); transition:transform .25s,box-shadow .25s} #page-container .mn-form button.et_pb_contact_submit:after{display:none!important} #page-container .mn-form button.et_pb_contact_submit:hover{transform:translateY(-2px);box-shadow:var(--mn-knopf-schein-hover);padding:16px 30px!important} #page-container .mn-form .et-pb-contact-message{font-size:16px;line-height:1.6;color:var(--mn-text)} #page-container .mn-form .et-pb-contact-message ul{padding:0 0 12px;margin:0;list-style:none;color:#C0392B} #page-container .mn-formfuss{padding-top:14px} #page-container .mn-formfuss p{font-size:14px;line-height:1.55;color:var(--mn-text-leise);padding:0} @media(max-width:700px){#page-container .mn-form .et_pb_contact_field{flex:1 1 100%}} /* --- Tabellen (Steckbrief, Qualifikationen, Fakten) --- */ #page-container table.mn-tab{width:100%;border-collapse:collapse;border:0;background:transparent} #page-container table.mn-tab th,#page-container table.mn-tab td{text-align:left;vertical-align:top;padding:13px 0;border:0; border-top:1px solid var(--mn-rand);font-size:16px;line-height:1.55} #page-container table.mn-tab tr:first-child th,#page-container table.mn-tab tr:first-child td{border-top:0} #page-container table.mn-tab th{width:32%;font-weight:600;color:var(--mn-text-leise);padding-right:24px} #page-container table.mn-tab tr.mn-gruppe th{font-family:'Oswald',Arial,sans-serif!important;font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--mn-akzent);padding-top:22px;width:auto} #page-container table.mn-tab td.mn-jahr{width:12%;white-space:nowrap;color:var(--mn-text-leise)} #page-container table.mn-tab td.mn-quelle{width:34%;color:var(--mn-text-leise)} @media(max-width:700px){ #page-container table.mn-tab th,#page-container table.mn-tab td{display:block;width:auto;padding:4px 0;border-top:0} #page-container table.mn-tab th{padding-top:16px;border-top:1px solid var(--mn-rand)} #page-container table.mn-tab tr.mn-gruppe th{padding-top:24px} } /* --- kleine Helfer --- */ #page-container .mn-zweispaltig{column-count:2;column-gap:48px} #page-container .mn-zweispaltig li{break-inside:avoid} @media(max-width:820px){#page-container .mn-zweispaltig{column-count:1}} #page-container .mn-hinweiszeile p{font-size:15px;line-height:1.6;color:var(--mn-text-leise);padding:0} #page-container .mn-unterlinks{padding-top:6px} #page-container .mn-unterlinks p{display:flex;flex-wrap:wrap;gap:12px 30px;padding:0} #page-container .mn-zitatkasten{border-left:4px solid var(--mn-marke);border-radius:0 18px 18px 0;padding:22px 26px; background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante)} #page-container .mn-zitatkasten p{font-size:16px;line-height:1.7;color:var(--mn-text);padding:0 0 8px} #page-container .mn-zitatkasten p:last-child{padding-bottom:0} /* --- Kopfmenue mit Aufklapper --- Der Aufklapper wird seit 20.09. vollstaendig in mn_stil.py gestaltet (Abschnitt 4 Kopf, einspaltig, undurchsichtig, Pfeil mittig). Hier stehen nur noch Farbwerte, die dort fehlen. */ #page-container .et-l--header .et_pb_menu .et-menu li.menu-item-has-children>a:first-child:after{color:#9DBBFF} /* U5-QA (20.09.) Anfang: Ergaenzungen aus der Schlusspruefung Bau Stufe 5. Nur anhaengen, nichts ersetzen. */ /* Kaesten auf dunkler Buehne, Korrektur: Die Regeln weiter oben lauten ".mn-dunkel #page-container ..." und greifen nie, weil mn-dunkel an der SEKTION INNERHALB von #page-container haengt. Auf der neuen Seite KI-Telefonassistent stand der Kasten "Was der Assistent nicht macht" deshalb dunkel auf dunkel. */ #page-container .mn-dunkel .mn-klartext,#page-container .mn-dunkel .mn-merk,#page-container .mn-dunkel .mn-zitatkasten{ background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} #page-container .mn-dunkel .mn-klartext p,#page-container .mn-dunkel .mn-merk li,#page-container .mn-dunkel .mn-merk p, #page-container .mn-dunkel .mn-zitatkasten p{color:#D7E2F3} #page-container .mn-dunkel .mn-klartext strong,#page-container .mn-dunkel .mn-merk strong{color:#FFFFFF} #page-container .mn-dunkel .mn-merk li{border-top-color:rgba(255,255,255,.16)} /* Brotkrume im Hero einer Seite in zweiter Ebene (z. B. Telefonassistent unter Kundenservice) */ #page-container .mn-krume{margin-bottom:10px!important} #page-container .mn-krume p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0;font-size:14px;line-height:20px} #page-container .mn-krume a{color:var(--mn-text-leise);text-decoration:none;font-weight:600;letter-spacing:.01em} #page-container .mn-krume a:hover{color:var(--mn-akzent)} #page-container .mn-krume a+a:before{content:"\2192";display:inline-block;margin-right:10px;opacity:.6} /* Hub-Bloecke der Bereichsseiten (Textstand v6): Bild und Text im Wechsel, nie eine Textwueste. Der erste Block ist der groesste. Ohne Bild laeuft der Text zweispaltig, damit keine ueberlangen Zeilen entstehen. */ #page-container .mn-hub{display:flex;flex-direction:column;gap:22px} #page-container .mn-hub-block{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:center; padding:26px 30px;border-radius:var(--mn-radius);background:var(--mn-karte); border:1px solid var(--mn-rand);box-shadow:var(--mn-lichtkante)} #page-container .mn-hub-block:nth-child(even){grid-template-columns:1fr 420px} #page-container .mn-hub-block:nth-child(even) .mn-hub-bild{order:2} #page-container .mn-hub-block.mn-hub-gross{padding:34px 36px;background:var(--mn-flaeche-3)} #page-container .mn-hub-block.mn-hub-ohne-bild{grid-template-columns:1fr} #page-container .mn-hub-block.mn-hub-nacht{background:var(--mn-buehne);border-color:rgba(124,166,255,.24)} #page-container .mn-hub-block.mn-hub-nacht .mn-hub-text h2{color:#FFFFFF} #page-container .mn-hub-block.mn-hub-nacht .mn-hub-text p{color:#D7E2F3} #page-container .mn-hub-block.mn-hub-nacht .mn-hub-text p.mn-passt strong{color:#FFFFFF} #page-container .mn-hub-bild{margin:0} #page-container .mn-hub-bild img{display:block;width:100%;height:auto;border-radius:18px} #page-container .mn-hub-bild figcaption{font-size:14px;line-height:1.5;color:var(--mn-text-leise);padding-top:8px} #page-container .mn-hub-nacht .mn-hub-bild figcaption{color:#A3B6D6} #page-container .mn-hub-text h2{font-size:clamp(22px,.55vw + 18px,26px);line-height:1.22;padding-bottom:10px} #page-container .mn-hub-gross .mn-hub-text h2{font-size:clamp(24px,.8vw + 18px,30px)} #page-container .mn-hub-text p{font-size:16px;line-height:1.65;color:var(--mn-text);padding-bottom:12px} #page-container .mn-hub-text p:last-of-type{padding-bottom:0} #page-container .mn-hub-text a.mn-mehr{margin-top:14px} #page-container .mn-hub-text a.mn-mehr+a.mn-mehr{margin-left:26px} /* Ohne Bild: Ueberschrift links, Text rechts. Kein column-count je Absatz - ein kurzer Absatz liesse die zweite Spalte fast leer und saehe aus wie ein halb gefuelltes Feld (Ole 20.09.). */ @media(min-width:1000px){ #page-container .mn-hub-block.mn-hub-ohne-bild .mn-hub-text{display:grid;grid-template-columns:320px 1fr; gap:10px 40px;align-items:start} #page-container .mn-hub-block.mn-hub-ohne-bild .mn-hub-text h2{grid-column:1;padding-bottom:0} #page-container .mn-hub-block.mn-hub-ohne-bild .mn-hub-text>*:not(h2){grid-column:2} /* ein Link als Rasterkind wuerde sonst ueber die ganze Spalte unterstrichen */ #page-container .mn-hub-block.mn-hub-ohne-bild .mn-hub-text>a.mn-mehr{justify-self:start} } @media(max-width:900px){ #page-container .mn-hub-block,#page-container .mn-hub-block:nth-child(even){grid-template-columns:1fr;gap:20px;padding:22px} #page-container .mn-hub-block:nth-child(even) .mn-hub-bild{order:0} } /* U5-QA Ende */ /* S7 (20.09.) Anfang: Leistungsseiten unter den Hubs. Nur anhaengen, nichts ersetzen. */ /* --- "Passt auch dazu": drei Bildkarten zu den Geschwisterseiten --- */ #page-container .mn-passt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #page-container .mn-passt-karten a{display:flex;flex-direction:column;border-radius:20px;overflow:hidden; background:var(--mn-karte);box-shadow:inset 0 0 0 1px var(--mn-rand),0 18px 40px -26px rgba(0,30,75,.4); text-decoration:none;transition:transform .35s,box-shadow .35s} #page-container .mn-passt-karten a:hover{transform:translateY(-5px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mn-akzent) 48%,transparent),0 30px 62px -28px rgba(0,30,75,.55)} /* 2:1 wie die Hero-Motive selbst: so wird nichts beschnitten und die Kennzeichnung bleibt im Bild */ #page-container .mn-passt-karten img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover} #page-container .mn-passt-karten .mn-pk-text{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px} #page-container .mn-passt-karten strong{font-family:'Oswald',Arial,sans-serif!important;font-size:20px;line-height:1.25;font-weight:600;color:var(--mn-ueberschrift)} #page-container .mn-passt-karten small{font-size:15px;line-height:1.6;color:var(--mn-text-leise)} #page-container .mn-passt-karten em{margin-top:auto;padding-top:6px;font-style:normal;font-size:15px;font-weight:600; color:var(--mn-akzent)} #page-container .mn-passt-karten a:hover em{text-decoration:underline} .mn-dunkel #page-container .mn-passt-karten a{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .mn-dunkel #page-container .mn-passt-karten strong{color:#FFFFFF} .mn-dunkel #page-container .mn-passt-karten small{color:#D7E2F3} @media(max-width:980px){#page-container .mn-passt-karten{grid-template-columns:1fr 1fr}} @media(max-width:640px){#page-container .mn-passt-karten{grid-template-columns:1fr}} /* --- Bildband innerhalb eines Hub-Blocks (vier Netzwerk-Plaketten im Social-Media-Block) --- */ #page-container .mn-hub-text .mn-bildband{margin-top:16px;gap:12px;grid-template-columns:repeat(4,1fr)} #page-container .mn-hub-text .mn-bildband img{aspect-ratio:1/1} #page-container .mn-hub-text .mn-bildband figcaption{padding:34px 12px 10px;font-size:12px;line-height:16px} @media(max-width:640px){#page-container .mn-hub-text .mn-bildband{grid-template-columns:1fr 1fr}} /* --- Uebersicht: der Auffangbereich als breite Karte unter den vier Bereichskarten --- */ #page-container .mn-loesungen.mn-loesungen-breit{grid-template-columns:1fr;margin-top:20px} @media(min-width:1000px){ #page-container .mn-loesungen-breit .mn-loesung{display:grid;grid-template-columns:320px 1fr;gap:6px 40px;align-items:start} #page-container .mn-loesungen-breit .mn-loesung:before{grid-column:1/-1} #page-container .mn-loesungen-breit .mn-loesung h3{grid-column:1;grid-row:2} #page-container .mn-loesungen-breit .mn-loesung p{grid-column:1;grid-row:3;padding-bottom:0} #page-container .mn-loesungen-breit .mn-loesung ul.mn-bpunkte{grid-column:2;grid-row:2/5;padding-top:0} #page-container .mn-loesungen-breit .mn-loesung a.mn-mehr{grid-column:1;grid-row:4;justify-self:start;margin-top:14px} } /* --- Startseite: breites Band "Individuelle Lösungen" unter den vier Bereichskacheln --- Ole 21.09.: Das Band klebte an den Kacheln (gemessen: 0 px in 1440, 900 und 390 px Breite). Der Abstand ist jetzt derselbe wie der Spaltenabstand des Kachelrasters. */ #page-container .mn-band-individuell{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:center; margin-top:20px;border-radius:22px;padding:26px 30px;background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} #page-container .mn-band-individuell .mn-bi-bild img{display:block;width:100%;height:auto;border-radius:16px;aspect-ratio:2/1; object-fit:cover} #page-container .mn-band-individuell h3{font-size:clamp(22px,.6vw + 18px,26px);line-height:1.2;padding-bottom:8px;color:#FFFFFF} #page-container .mn-band-individuell p{font-size:16px;line-height:1.65;color:#D7E2F3;padding-bottom:10px} #page-container .mn-band-individuell ul.mn-bpunkte{list-style:none;padding:2px 0 12px;margin:0} #page-container .mn-band-individuell ul.mn-bpunkte li{position:relative;padding:7px 0 7px 22px;font-size:15px;line-height:22px; color:#D7E2F3;border-top:1px solid rgba(255,255,255,.16)} #page-container .mn-band-individuell ul.mn-bpunkte li:first-child{border-top:0} #page-container .mn-band-individuell ul.mn-bpunkte li:before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px; background:var(--mn-akzent)} #page-container .mn-band-individuell ul.mn-bpunkte li.mn-mehrzeile{color:#A3B6D6;font-style:italic} #page-container .mn-band-individuell ul.mn-bpunkte li.mn-mehrzeile:before{display:none} @media(max-width:900px){#page-container .mn-band-individuell{grid-template-columns:1fr;gap:20px;padding:22px}} /* zweiter Textlink in einer Bereichskachel */ #page-container .mn-k43-text a.mn-mehr.mn-mehr-zweit{display:block;margin-top:8px;font-size:15px} /* --- Mustertext als Zitatblock innerhalb eines Hub-Absatzes --- */ #page-container .mn-zitatkasten.mn-zitat-block{display:block;margin-top:8px} /* --- Einzelnes Band-Bild unter einem Kartenraster: mittig, ruhiger Ausschnitt statt Vollbreite --- */ #page-container .mn-bildband.mn-band-einzel{grid-template-columns:1fr;max-width:900px;margin-left:auto;margin-right:auto} #page-container .mn-bildband.mn-band-einzel img{aspect-ratio:16/9} /* --- Karte ohne Bild in einem Bild-Abschnitt: gleicher Rahmen wie die Bildkarten --- */ #page-container .mn-sachkarte{border-radius:20px;padding:26px 28px;background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante)} #page-container .mn-sachkarte strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:20px;line-height:1.25;font-weight:600; color:var(--mn-ueberschrift);padding-bottom:8px} #page-container .mn-sachkarte p{font-size:16px;line-height:1.65;color:var(--mn-text);padding:0 0 10px} #page-container .mn-sachkarte p:last-child{padding-bottom:0} .mn-dunkel #page-container .mn-sachkarte{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .mn-dunkel #page-container .mn-sachkarte p{color:#D7E2F3} .mn-dunkel #page-container .mn-sachkarte strong{color:#FFFFFF} /* Die Brotkrume steht schon im U5-QA-Block; hier wird sie nicht noch einmal gesetzt. */ /* --- Keine leeren Spalten: Spaltenzahl folgt der Kartenzahl (Befund 20.09.) --- */ /* Drei feste Spalten liessen bei vier Karten zwei und bei zwei Karten eine Spalte leer. */ #page-container .mn-loesungen.mn-loesungen-zwei{grid-template-columns:repeat(2,1fr)} @media(max-width:820px){#page-container .mn-loesungen.mn-loesungen-zwei{grid-template-columns:1fr}} /* --- Handy-Rahmen ohne Uhrzeit: die Zeichen ruecken nach rechts --- */ #page-container .mn-handy .mn-status.mn-status-ohne-uhr{justify-content:flex-end} /* --- Nacht: das Hero-Bild der Unterseiten bleibt sichtbar (Ole 20.09.) --- Befund: Der Nachtgrund lag mit 86 Prozent Deckung und ohne Maske ueber dem GANZEN Hero, dazu das Nordlicht im Screen-Modus. Gemessen auf /ki-avatar/: Ortsauflösung der rechten Bildhaelfte (Streuung der Helligkeit) faellt von 44 auf 11 - das Motiv war nur noch ein Schatten, die eingebrannte Kennzeichnung kaum lesbar. Jetzt liegt der dunkle Grund nur noch links unter der Schrift und laeuft bis 64 Prozent der Breite aus; rechts bleibt ein Hauch. Das Nordlicht wird nach rechts hin ebenso zurueckgenommen, sonst verwaschen die Konturen im Screen-Modus. Die Sterne duerfen darueber liegen. Die Regeln muessen spezifischer sein als der U5-Block weiter oben, deshalb `.mn-kopfbuehne` davor. Der Startseiten-Hero (Film) ist nicht betroffen, er traegt kein `.mn-hero-klein`. */ .mn-nacht #page-container .mn-kopfbuehne.mn-hero-klein:has(.mn-hat-bild) .mn-nachtgrund{opacity:1; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 34%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.07) 76%,rgba(0,0,0,.05) 100%); mask-image:linear-gradient(90deg,#000 0,#000 34%,rgba(0,0,0,.58) 48%,rgba(0,0,0,.2) 62%,rgba(0,0,0,.07) 76%,rgba(0,0,0,.05) 100%)} .mn-nacht #page-container .mn-kopfbuehne.mn-hero-klein:has(.mn-hat-bild) .mn-polar{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%),linear-gradient(90deg,#000 0,#000 30%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.08) 100%); mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.35) 84%,rgba(0,0,0,0) 100%),linear-gradient(90deg,#000 0,#000 30%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.08) 100%); -webkit-mask-composite:source-in;mask-composite:intersect} @media(max-width:980px){ /* Am Handy steht die Schrift ueber dem Bild, nicht daneben: dort bleibt es beim Verlauf von oben. */ .mn-nacht #page-container .mn-kopfbuehne.mn-hero-klein:has(.mn-hat-bild) .mn-nachtgrund{ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.22) 100%); mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.5) 58%,rgba(0,0,0,.22) 100%)} } /* --- Hero an der Unterkante: rettet die eingebrannte KI-Kennzeichnung im Personenbild --- */ /* Muss spezifischer sein als `#page-container .mn-hero-klein .mn-hero-bg img{object-position:74% 46%}` weiter oben - sonst gewinnt die allgemeine Regel trotz spaeterer Stelle. Die Waagerechte bleibt bei 74 bzw. 66 Prozent, nur die Senkrechte wandert nach unten. */ #page-container .mn-hero-bild-unten .mn-hero-bg img.mn-hero-poster{object-position:74% 100%} /* Am Handy laeuft das Hochformat (1080x1350 = 0,80) in einen Rahmen von rund 0,59: `cover` schneidet dort rund 26 Prozent der BREITE weg. Bei 66 Prozent Lage fielen davon 9 Prozent rechts weg - genug, um "Echt · geklont" anzuschneiden. Rechts verankert bleibt die Kennzeichnung ganz, das Gesicht liegt weiterhin im Ausschnitt (nachgemessen). */ @media(max-width:980px){#page-container .mn-hero-bild-unten .mn-hero-bg img.mn-hero-poster{object-position:100% 100%}} /* --- Bildbeschriftungen einheitlich (Ole 21.09.) --- Befund: Die Beschriftung klebte mit 4 px am linken Rand (`.mn-textbild`, `.mn-geraetepaar`) oder hatte gar keinen seitlichen Abstand (`.mn-hub-bild`), lief damit in die Rundung des Bildes und war mit 14 px auf 20 px Zeile kleiner gesetzt als der Fliesstext. Ole: "Das haben wir bei ziemlich allen Bildern." Jetzt ist sie der FUSS des Bildes: gleiche Breite, unten dieselbe Rundung, ruhige Flaeche, 15 px auf 1,5 Zeilen, 20 px Innenabstand. Das Ueberlagerungs-Band `.mn-bildband figcaption` bleibt, wie es ist - dort liegt die Schrift bewusst IM Bild auf einem Verlauf. */ #page-container .mn-textbild .mn-tb-bild figcaption, #page-container .mn-hub-bild figcaption, #page-container .mn-teil-bild figcaption, #page-container .mn-geraetepaar figcaption{ padding:13px 20px 14px;font-size:15px;line-height:1.5;font-weight:500;letter-spacing:0; color:var(--mn-text-leise);background:var(--mn-flaeche-2); border-radius:0 0 18px 18px;margin:0} /* Auf dunkler Flaeche traegt die helle Systemflaeche nicht - dort ein Hauch Licht auf dem Grund. `--mn-text-leise` ist unter `.mn-dunkel` ohnehin schon der helle Wert. */ #page-container .mn-dunkel .mn-textbild .mn-tb-bild figcaption, #page-container .mn-dunkel .mn-hub-bild figcaption, #page-container .mn-hub-nacht .mn-hub-bild figcaption, #page-container .mn-dunkel .mn-teil-bild figcaption, #page-container .mn-dunkel .mn-geraetepaar figcaption{background:rgba(255,255,255,.07)} /* Das Bild gibt die Rundung nur noch nach oben - Bild und Beschriftung lesen sich als ein Block. */ #page-container .mn-hub-bild:has(figcaption) img, #page-container .mn-teil-bild:has(figcaption) img{border-radius:18px 18px 0 0} #page-container .mn-hub-bild:has(figcaption), #page-container .mn-teil-bild:has(figcaption){border-radius:18px;overflow:hidden} /* Das Geraetepaar ist eine Zeichnung ohne eigene Rundung: dort bleibt die Beschriftung eine Zeile darunter, nur mit demselben Mass und ohne eigene Flaeche. */ #page-container .mn-geraetepaar figcaption{background:transparent;padding:14px 2px 0;border-radius:0} @media(max-width:640px){ #page-container .mn-textbild .mn-tb-bild figcaption, #page-container .mn-hub-bild figcaption, #page-container .mn-teil-bild figcaption{padding:12px 16px 13px;font-size:14px} } /* --- Oles Punkte 6, 9, 10, 11 (21.09.): /webseiten/ umgebaut, Preise auf eigener Seite --- Die acht Bloecke "was dazugehoert" laufen ueber die volle Containerbreite in zwei Spalten. Bewusst keine Karten und keine Ziffern: Karten haetten bei acht Stueck wie eine durchgezaehlte Wand gewirkt (Ole 19.09.: kein Durchzaehlen). Getrennt wird mit feinen Linien. */ #page-container .mn-bloecke{display:grid;grid-template-columns:1fr 1fr;gap:0 44px} #page-container .mn-bloecke article{padding:20px 0 22px;border-top:1px solid var(--mn-rand)} #page-container .mn-bloecke article:nth-child(1),#page-container .mn-bloecke article:nth-child(2){border-top:0;padding-top:0} #page-container .mn-bloecke h3{font-size:21px;line-height:1.25;padding-bottom:8px} #page-container .mn-bloecke p{font-size:16px;line-height:1.65;color:var(--mn-text-leise);padding:0} @media(max-width:900px){ #page-container .mn-bloecke{grid-template-columns:1fr} #page-container .mn-bloecke article:nth-child(2){border-top:1px solid var(--mn-rand);padding-top:20px} } /* Schmales Band: ein Satz und ein Knopf. Steht auf /webseiten/ an der Stelle, an der bis zum 21.09. die Festpreis-Karte stand - ohne Betrag, der steht jetzt auf /webseiten/preise/. */ #page-container .mn-hinweisband{display:grid;grid-template-columns:1fr auto;gap:18px 34px;align-items:center; border-radius:22px;padding:24px 30px;background:var(--mn-flaeche-3);box-shadow:var(--mn-lichtkante)} #page-container .mn-hinweisband p{font-size:17px;line-height:1.6;color:var(--mn-text);padding:0} #page-container .mn-hinweisband .mn-knopf{margin:0;white-space:nowrap} .mn-dunkel #page-container .mn-hinweisband{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .mn-dunkel #page-container .mn-hinweisband p{color:#D7E2F3} @media(max-width:700px){#page-container .mn-hinweisband{grid-template-columns:1fr;padding:22px;justify-items:start}} /* Die Laufzeit steht unter der Preiskarte, vor der leisen Schlusszeile - sie ist eine Zusage und keine Fussnote, deshalb in der normalen Textfarbe. */ #page-container .mn-preis-unterzeile p.mn-preis-laufzeit{color:var(--mn-text);padding-bottom:10px} /* Im Text neben einem Bild laufen die Bloecke einspaltig - 44 px Spaltenabstand in einer 735-px-Spalte ergaeben zwei zu schmale Saeulen. */ #page-container .mn-textbild .mn-bloecke{grid-template-columns:1fr} #page-container .mn-textbild .mn-bloecke article:nth-child(2){border-top:1px solid var(--mn-rand);padding-top:20px} /* Kurzer Text neben hochkantem Bild (Ole 21.09., /webseiten/ "Wer pflegt die Webseite nach dem Start?": der Text reichte nur bis zur halben Bildhoehe, darunter stand eine leere Spalte). Gemessen mit pruef_spalten.py ueber alle Seiten: acht .mn-textbild-Bloecke lagen unter 0,7. Alle anderen Zweispalter der Seite (.mn-hub-block, .mn-teil) stehen laengst mittig - dort entsteht deshalb kein Loch. `.mn-textbild` war der einzige oben buendige. NICHT geloest wird das ueber senkrechtes Zentrieren (Ole 21.09. ausdruecklich: dann steht die Flaeche oben UND unten leer, das ist schlimmer). Der Text bleibt oben buendig mit der Bildoberkante; ausgeglichen wird ueber die Textmenge und das Bildformat. Beschneiden auf Querformat scheidet bei den Personenbildern aus - unten rechts stehen die eingebrannten Kennzeichnungen "Mit KI erstellt" und "Echt - geklont". */ @media(min-width:901px){ #page-container .mn-textbild.mn-tb-schmal{grid-template-columns:1.4fr .62fr} #page-container .mn-textbild.mn-tb-schmal.mn-bild-links{grid-template-columns:.62fr 1.4fr} } /* --- Preistafel (Ole 21.09., Punkt 18): zwei gleich hohe Karten statt einer geteilten --- Links die einmalige Erstellung, rechts der laufende Betrieb. Jeder Betrag traegt darueber, WOFUER er ist. Beide Karten stehen auf der dunklen Markenflaeche - dieselbe, die die bisherige Preisspalte schon hatte. Damit stimmt der Kontrast in Tag und Nacht ohne zweite Farbwelt. */ /* Ole 21.09., Nachtrag: Die Karten stehen weiter auseinander, dazwischen ein Pluszeichen als runde Glasmarke in Markenblau. Es macht sichtbar, dass beide Teile zusammen das Paket sind und nicht "entweder ... oder". Eigene Spalte statt absoluter Lage: dann bleibt der Abstand in jeder Breite gleich und am Handy rutscht die Marke von selbst zwischen die Karten. */ #page-container .mn-preistafel{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch} /* Erster Versuch: Markenblau zu 16 Prozent auf der Kartenfarbe. Auf heller Flaeche wurde daraus fast Weiss, und das weisse Pluszeichen war unsichtbar (an der Aufnahme gesehen). Jetzt volles Markenblau mit weissem Zeichen - 34 px sind grosse Schrift, verlangt sind 3:1, gemessen 4,6:1. */ #page-container .mn-pt-plus{align-self:center;justify-self:center;display:flex;align-items:center; justify-content:center;width:62px;height:62px;border-radius:50%;background:var(--mn-akzent); box-shadow:0 0 0 7px color-mix(in srgb,var(--mn-akzent) 13%,transparent), 0 18px 40px -26px rgba(0,30,75,.55)} #page-container .mn-pt-plus span[aria-hidden]{font-family:'Oswald',Arial,sans-serif!important;font-size:34px;line-height:1;font-weight:600;color:#FFFFFF} #page-container .mn-pt-vorleser{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0!important; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .mn-nacht #page-container .mn-pt-plus{box-shadow:inset 0 0 0 1px rgba(124,166,255,.7),0 0 46px -8px rgba(34,102,255,.5)} /* Eine ruhige Zeile unter beiden Karten: ein Paket, zwei Teile. */ #page-container p.mn-pt-summe{text-align:center;padding:18px 0 0;font-size:16px;line-height:1.5; color:var(--mn-text-leise)} #page-container .mn-pt-karte{display:flex;flex-direction:column;border-radius:24px;padding:34px 36px 30px; background:var(--mn-karte-dunkel);box-shadow:var(--mn-schatten),var(--mn-lichtkante)} #page-container .mn-pt-ueber{font-family:'Oswald',Arial,sans-serif!important;font-size:13px;line-height:1.35;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:#A3B6D6;padding:0 0 14px} #page-container .mn-pt-betrag{padding:0} #page-container .mn-pt-betrag strong{display:block;font-family:'Oswald',Arial,sans-serif!important;font-size:clamp(40px,2vw + 28px,58px);line-height:1.02; font-weight:600;color:#FFFFFF} #page-container .mn-pt-unter{font-size:16px;line-height:1.5;color:#D7E2F3;padding:10px 0 20px;margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.16)} #page-container .mn-pt-karte ul.mn-haken{padding:0;margin-top:auto} #page-container .mn-pt-karte ul.mn-haken li{font-size:16px;line-height:24px;color:#D7E2F3;padding:6px 0 6px 36px} #page-container .mn-pt-karte ul.mn-haken li:before{top:7px;width:22px;height:22px} #page-container .mn-pt-karte ul.mn-haken li:after{left:7.5px;top:12px} #page-container .mn-preistafel+.mn-preis-unterzeile{padding-top:22px} #page-container p.mn-pt-knopf{text-align:center;padding:22px 0 0} .mn-nacht #page-container .mn-pt-karte{box-shadow:0 0 0 1px rgba(124,166,255,.55),0 0 70px -10px rgba(34,102,255,.45),var(--mn-schatten)} @media(max-width:820px){ #page-container .mn-preistafel{grid-template-columns:1fr} #page-container .mn-pt-karte{padding:28px 26px 24px} /* Untereinander sitzt die Marke von selbst zwischen den Karten, nur etwas kleiner. */ #page-container .mn-pt-plus{width:54px;height:54px} #page-container .mn-pt-plus span[aria-hidden]{font-size:30px} } /* Zwischenueberschriften im Erklaerblock, damit Grafik und Text dieselbe Ordnung haben */ #page-container h3.mn-umfang-kopf{font-size:20px;line-height:1.25;padding:0 0 12px} #page-container h3.mn-umfang-kopf+ul{margin-bottom:28px} /* --- Vier Bereiche auf /ki-beratung/ (Ole 21.09.) --- Befund am Bild: Zwei der vier Motive liegen im Hochformat (1200 x 1500) vor, die anderen beiden quer (1600 x 1200). `.mn-teil-bild img` hatte kein festes Seitenverhaeltnis - die Hochformate bauten dadurch rund 900 px hoch, die Querformate 480 px, und weil der Block senkrecht zentriert war, stand der Text daneben mitten in einer grossen Leerflaeche. Gemessen mit pruef_spalten.py: Verhaeltnis Text zu Bild 0,46 und 0,52. Jetzt: alle vier Bilder im selben Querformat (3:2, `cover`), oben buendig statt mittig. */ #page-container .mn-teil{align-items:start} #page-container .mn-teil-bild img{aspect-ratio:3/2;object-fit:cover;max-height:360px} #page-container .mn-teil:nth-child(even){grid-template-columns:1.2fr .8fr} /* Hochkantes Bild eine Spur niedriger, damit Text- und Bildunterkante zusammenliegen. Der Beschnitt kommt von OBEN (`object-position` unten): dort steht nur der dunkle Raum. Unten bleiben die eingebrannten Kennzeichnungen vollstaendig im Bild. */ #page-container .mn-textbild.mn-bild-kurz .mn-tb-bild img{aspect-ratio:5/6;object-position:50% 100%} /* ===== Oles Punkte 21, 22, 23a (21.09.) ===================================================== */ /* --- Einzelbild-Baender ueber die volle Inhaltsbreite --- Ein Bild, das allein in der Mitte steht, lief bisher 900 px breit in einem 1240er Feld: links und rechts blieb je eine Handbreit leer, waehrend Karten und Zweierbaender daneben ueber die ganze Breite gehen. Jetzt nimmt es dieselbe Breite wie alles andere und steht im ruhigen Breitformat 21:9 - dasselbe Mass wie `.mn-band-breit`, damit es auf allen Seiten gleich aussieht. WICHTIG: Die Regel haengt an der EIGENEN Klasse `.mn-band-einzel`. Sie darf keine Bilder in Zweispaltern, Kacheln oder den vier Bereichsbloecken von /ki-beratung/ treffen - genau so war am 21.09. schon einmal ein Bild auf 900 px Hoehe aufgeblasen worden. */ #page-container .mn-bildband.mn-band-einzel{grid-template-columns:1fr;max-width:none;margin-left:0;margin-right:0} #page-container .mn-bildband.mn-band-einzel img{aspect-ratio:21/9;object-fit:cover;object-position:50% 50%} /* Fokuspunkt je Bild: `unten` rettet eine eingebrannte Kennzeichnung an der Unterkante, `oben` ein Motiv, dessen Hauptobjekt im oberen Drittel sitzt. */ #page-container .mn-bildband.mn-band-einzel.mn-fokus-unten img{object-position:50% 100%} #page-container .mn-bildband.mn-band-einzel.mn-fokus-oben img{object-position:50% 0} #page-container .mn-bildband.mn-band-einzel.mn-fokus-hoch img{object-position:50% 30%} @media(max-width:640px){#page-container .mn-bildband.mn-band-einzel img{aspect-ratio:16/9}} /* --- Zweispalter buendig: schmalere Bildspalte und flacheres Bild --- Gemessen mit pruef_spalten.py: In sieben Bloecken reichte der Text nur bis zu rund 60 Prozent der Bildhoehe. Senkrecht zentriert wird nicht (Ole 21.09. ausdruecklich), ausgeglichen wird ueber Spaltenbreite und Bildformat. `mn-tb-eng` ist die staerkste Stufe: schmale Bildspalte plus Querformat. Der Beschnitt kommt von der Seite, nicht von unten - unten stehen bei den Personenbildern die eingebrannten Kennzeichnungen. */ @media(min-width:901px){ #page-container .mn-textbild.mn-tb-eng{grid-template-columns:1.6fr .5fr} #page-container .mn-textbild.mn-tb-eng.mn-bild-links{grid-template-columns:.5fr 1.6fr} #page-container .mn-textbild.mn-tb-eng .mn-tb-bild img{aspect-ratio:3/4} /* Flach: dieselbe Spaltenbreite, das Bild wird nur niedriger beschnitten (4:5 auf 1:1, also ein Fuenftel der Hoehe). Der Beschnitt kommt von OBEN - unten stehen bei Personenbildern die eingebrannten Kennzeichnungen, die nie angeschnitten werden duerfen. */ #page-container .mn-textbild.mn-tb-flach .mn-tb-bild img{aspect-ratio:1/1;object-position:50% 100%} } /* --- Hero mit Person (Ole 21.09., Punkt 22): /ki-loesungen/marketing/ki-avatar/ --- Befund: Das Motiv ist 2:1, der Hero-Rahmen rund 2,4:1. `object-fit: cover` fuellt die Breite und schneidet die ueberstehende Hoehe weg; mit `object-position ... 100%` fiel alles oben weg - genau dort steht der Kopf. Gemessen bei 1440 x 900 lag die Stirn oberhalb der Sektionskante, das Gesicht damit hinter der schwebenden Kopfleiste. Jetzt steht das Bild als eigene Flaeche rechts, beginnt unterhalb der Kopfleiste und laeuft nach links und nach oben per Maske ins Dunkel aus (dieselbe Technik wie der Projekt-Hero). Der Beschnitt kommt dadurch von der SEITE: die Hoehe des Motivs bleibt vollstaendig, Gesicht oben und die eingebrannten Kennzeichnungen unten rechts stehen ganz im Bild. Am Handy (bis 980 px) laeuft weiter das Hochformat aus dem Bildelement, dort ist nichts zu tun. */ @media(min-width:981px){ #page-container .mn-hero-person .mn-hero-bg img.mn-hero-poster{ inset:104px 0 0 auto;width:min(58%,880px);height:calc(100% - 104px); object-fit:cover;object-position:100% 0; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 12%,#000 30%,#000 100%), linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 88%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 12%,#000 30%,#000 100%), linear-gradient(180deg,rgba(0,0,0,0) 0,#000 9%,#000 88%,rgba(0,0,0,0) 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* Der Verlauf ueber dem Bild darf die Person nicht noch einmal abdunkeln: er endet frueher. */ #page-container .mn-hero-person .mn-hero-bg:after{background: linear-gradient(0deg,rgba(2,10,23,.9) 0,rgba(2,10,23,.34) 9%,rgba(2,10,23,0) 20%), linear-gradient(90deg,rgba(2,10,23,.85) 0,rgba(2,10,23,.45) 30%,rgba(2,10,23,0) 52%)} /* Die Schrift bleibt links von der Person, damit sich beides nicht ueberlagert. */ #page-container .mn-hero-person .mn-hero-inhalt{max-width:min(52%,640px)} } /* S7 Ende */ /* ============================================================== 9 Schriftprobe (nur Testseite) */ #page-container .mn-probe-raster{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:56px 0 48px} #page-container .mn-probe-raster>div{padding:40px;border-radius:var(--mn-radius);background:var(--mn-flaeche-2);box-shadow:var(--mn-lichtkante)} #page-container .mn-probe-raster .mn-wie-h1{padding-bottom:0;margin-top:20px} @media(max-width:980px){#page-container .mn-probe-raster{grid-template-columns:1fr}#page-container .mn-probe-raster>div{padding:28px 24px}} /* ============================================================== 10 Schluss */ #page-container .mn-schluss h2{font-size:clamp(34px,1.9vw + 26.6px,54px);max-width:820px} #page-container .mn-schluss.mn-mitte h2,#page-container .mn-schluss .mn-mitte h2{margin-left:auto;margin-right:auto} #page-container .mn-schluss .mn-knopfzeile p{justify-content:center} #page-container .mn-telefon a{font-family:'Oswald',Arial,sans-serif!important;font-size:26px;font-weight:500;color:#fff;text-decoration:none} /* ============================================================== 11 Bewegung: Einblenden beim Scrollen (reines CSS) */ @media(prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ #page-container .mn-auf{animation:mn-auf linear both;animation-timeline:view();animation-range:entry 0% entry 38%} } #page-container .mn-kopfbuehne .mn-film{animation:mn-film-ein 1.1s cubic-bezier(.2,.7,.2,1) .15s both} } @keyframes mn-auf{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}} @keyframes mn-film-ein{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} #page-container .et_animated{opacity:1!important;animation:none!important;transform:none!important} #page-container a.mn-knopf,#page-container .mn-kachel img,#page-container .mn-k-bild img,#mn-nachtknopf{transition:none} } /* ============================================================== 12 Fuss */ #page-container .et-l--footer .mn-fuss{background:linear-gradient(180deg,var(--mn-fuss) 0,var(--mn-fuss-2) 100%)!important;position:relative} #page-container .et-l--footer .mn-fuss:before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(140,180,255,.6) 50%,rgba(255,255,255,0) 100%)} #page-container .et-l--footer .mn-fussleiste-s{background:var(--mn-fuss-2)!important} #page-container .et-l--footer .et_pb_row{align-items:flex-start} #page-container .et-l--footer,#page-container .et-l--footer p,#page-container .et-l--footer li{font-size:16px;line-height:27px} #page-container .et-l--footer a{color:#FFFFFF;text-decoration:none;transition:color .2s} #page-container .et-l--footer a:hover{color:#9DBBFF} #page-container .et-l--footer h4{font-family:'Open Sans',Arial,sans-serif!important;font-size:13px;line-height:16px;font-weight:600;text-transform:uppercase; letter-spacing:.08em;color:#9DBBFF;padding-bottom:18px} #page-container .et-l--footer .mn-fusslogo{margin-bottom:24px!important} #page-container .et-l--footer .mn-fusslogo img{height:72px;width:auto;display:block} #page-container .et-l--footer ul{list-style:none;padding:0;margin:0} #page-container .et-l--footer .mn-fuss-anruf a{font-family:'Oswald',Arial,sans-serif!important;font-size:24px;line-height:1.3;font-weight:500} #page-container .et-l--footer .et_pb_menu{background:transparent} #page-container .et-l--footer .et_pb_menu .et_pb_menu__menu{display:block!important} #page-container .et-l--footer .et_pb_menu .et_mobile_nav_menu{display:none!important} #page-container .et-l--footer .et_pb_menu .et_pb_menu__wrap{justify-content:flex-start} #page-container .et-l--footer .et_pb_menu .et-menu{margin:0} #page-container .et-l--footer .et_pb_menu .et-menu>li{padding:0 24px 0 0} #page-container .et-l--footer .et_pb_menu .et-menu>li>a{color:#A3B6D6;font-size:14px;padding:4px 0;font-weight:400} #page-container .et-l--footer .mn-fussleiste{align-items:center} #page-container .et-l--footer .mn-fussnote p{font-size:14px;color:#7F94B8;text-align:right} @media(max-width:980px){ #page-container .et-l--footer .mn-fussnote p{text-align:left} #page-container .et-l--footer .et_pb_row>.et_pb_column:not(:last-child){margin-bottom:40px} } body.page-id-343 #main-content h1,body.page-id-343 #main-content h2,body.page-id-343 #main-content h3,body.page-id-343 #main-content h4,body.page-id-282 #main-content h1,body.page-id-282 #main-content h2,body.page-id-282 #main-content h3,body.page-id-282 #main-content h4,body.page-id-284 #main-content h1,body.page-id-284 #main-content h2,body.page-id-284 #main-content h3,body.page-id-284 #main-content h4,body.page-id-288 #main-content h1,body.page-id-288 #main-content h2,body.page-id-288 #main-content h3,body.page-id-288 #main-content h4,body.page-id-290 #main-content h1,body.page-id-290 #main-content h2,body.page-id-290 #main-content h3,body.page-id-290 #main-content h4{color:var(--mn-ueberschrift)!important} body.page-id-343 #main-content p,body.page-id-343 #main-content li,body.page-id-343 #main-content td,body.page-id-343 #main-content th,body.page-id-343 #main-content span,body.page-id-282 #main-content p,body.page-id-282 #main-content li,body.page-id-282 #main-content td,body.page-id-282 #main-content th,body.page-id-282 #main-content span,body.page-id-284 #main-content p,body.page-id-284 #main-content li,body.page-id-284 #main-content td,body.page-id-284 #main-content th,body.page-id-284 #main-content span,body.page-id-288 #main-content p,body.page-id-288 #main-content li,body.page-id-288 #main-content td,body.page-id-288 #main-content th,body.page-id-288 #main-content span,body.page-id-290 #main-content p,body.page-id-290 #main-content li,body.page-id-290 #main-content td,body.page-id-290 #main-content th,body.page-id-290 #main-content span{color:var(--mn-text)!important} body.page-id-343 #main-content a,body.page-id-282 #main-content a,body.page-id-284 #main-content a,body.page-id-288 #main-content a,body.page-id-290 #main-content a{color:var(--mn-akzent)!important} /* ============================================================== 13 ALT: Bau 1/2 (Seiten 280, 343). Faellt weg, wenn die Startseite ersetzt ist. */ #page-container .mn-hero h1{font-size:44px;line-height:52px;font-weight:500;letter-spacing:0;max-width:920px} #page-container .mn-hero h1 span{font-weight:300;color:#55647C} #page-container .mn-hero .mn-h1{margin-bottom:0!important} #page-container .mn-hero .mn-unter{max-width:780px;margin-bottom:16px!important} #page-container .mn-hero .mn-zweitlink{display:inline-block;margin:8px 0 0;vertical-align:middle} #page-container .mn-hero .et_pb_code{margin-bottom:0!important} #page-container .et_pb_button_module_wrapper{display:inline-block;margin:8px 24px 0 0} body #page-container .et_pb_section .et_pb_button:not(.mn-knopf){font-family:'Open Sans',Arial,sans-serif!important;font-size:16px!important;font-weight:600; padding:14px 28px!important;line-height:20px!important;border-radius:999px!important} body #page-container .et_pb_section .et_pb_button:not(.mn-knopf):hover{padding:14px 28px!important} body #page-container .et_pb_section .et_pb_button:not(.mn-knopf):after{display:none!important} #page-container .mn-laptop{position:relative;width:100%;filter:drop-shadow(0 30px 40px rgba(0,25,60,.28))} #page-container .mn-laptop .mn-deckel{background:#14171c;border-radius:2.4% 2.4% 0 0/3.6% 3.6% 0 0;padding:2% 2% 2.4%;position:relative; width:86%;margin:0 auto;box-sizing:border-box;border:1px solid #2b3038;border-bottom:0} #page-container .mn-laptop .mn-deckel:before{content:"";position:absolute;left:50%;top:1%;width:.7%;aspect-ratio:1;border-radius:50%; background:#2f3540;transform:translateX(-50%)} #page-container .mn-laptop .mn-schirm{aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:2px;position:relative; container-type:size} #page-container .mn-laptop .mn-basis{width:100%;aspect-ratio:100/2.6;background:linear-gradient(180deg,#e3e6eb 0%,#c3c8d1 55%,#9aa1ad 100%); border-radius:0 0 3% 3%/0 0 90% 90%;position:relative} #page-container .mn-laptop .mn-basis:before{content:"";position:absolute;left:50%;top:0;width:14%;height:38%;transform:translateX(-50%); background:#aab0bb;border-radius:0 0 40% 40%/0 0 100% 100%} #page-container .mn-handy{position:relative;width:100%;aspect-ratio:9/19.1;background:#14171c;border-radius:15%/7.2%;padding:3.4%; box-sizing:border-box;border:1px solid #2b3038;filter:drop-shadow(0 26px 34px rgba(0,25,60,.34))} #page-container .mn-handy .mn-schirm{width:100%;height:100%;overflow:hidden;background:#fff;border-radius:12.5%/5.9%;position:relative; container-type:size;display:flex;flex-direction:column} #page-container .mn-handy .mn-status{flex:0 0 5.6cqh;display:flex;align-items:center;justify-content:space-between;padding:0 8cqw 0 9cqw; background:#fff;color:#111;font:600 3.9cqw/1 'Open Sans',Arial,sans-serif;position:relative;z-index:2} #page-container .mn-handy .mn-status:before{content:"";position:absolute;left:50%;top:50%;width:26cqw;height:3.3cqh;border-radius:99px; background:#14171c;transform:translate(-50%,-50%)} #page-container .mn-handy .mn-status i{display:flex;gap:1.2cqw;align-items:flex-end;font-style:normal} #page-container .mn-handy .mn-status i b{display:block;width:.9cqw;background:#111;border-radius:1px} #page-container .mn-handy .mn-status i b:nth-child(1){height:1.2cqw}.mn-handy .mn-status i b:nth-child(2){height:1.9cqw} #page-container .mn-handy .mn-status i b:nth-child(3){height:2.6cqw}.mn-handy .mn-status i b:nth-child(4){height:3.3cqw} #page-container .mn-handy .mn-status i u{display:block;width:6.4cqw;height:3cqw;border:1px solid #111;border-radius:.9cqw;margin-left:1.6cqw; position:relative;text-decoration:none} #page-container .mn-handy .mn-status i u:before{content:"";position:absolute;inset:.35cqw;right:1.4cqw;background:#111;border-radius:.4cqw} #page-container .mn-handy .mn-status.mn-dunkelstatus{background:#000;color:#fff} #page-container .mn-handy .mn-status.mn-dunkelstatus i b,.mn-handy .mn-status.mn-dunkelstatus i u:before{background:#fff} #page-container .mn-handy .mn-status.mn-dunkelstatus i u{border-color:#fff} #page-container .mn-handy .mn-flaeche{flex:1 1 auto;overflow:hidden;position:relative;container-type:size} #page-container .mn-schirm img.mn-seite,.mn-flaeche img.mn-seite{display:block;width:100%;height:auto;max-width:none} #page-container .mn-buehne{position:relative;width:100%;margin:0 auto} #page-container .mn-buehne .mn-b-laptop{width:82%} #page-container .mn-buehne .mn-b-handy{position:absolute;right:1%;bottom:-3%;width:19%} #page-container .mn-hero-a{position:relative;z-index:2;background:linear-gradient(180deg,#fff 0,#F4F7FB 52%,#EAF0FA 100%)} #page-container .mn-hero-a .mn-buehnenzeile{margin-top:32px} #page-container .mn-hero-a .mn-buehne{margin-bottom:-184px;z-index:3} body #page-container .et_pb_section.mn-nach-hero-a{padding-top:280px!important} #page-container .mn-hero-b{position:relative;overflow:hidden;background:linear-gradient(180deg,#002A55 0,#003A75 100%)} #page-container .mn-hero-b h1 span{color:#A9C3F2} @media(min-width:981px){#page-container .mn-hero-b .mn-buehne{width:106%}} @media(max-width:767px){ #page-container .mn-hero h1{font-size:30px;line-height:38px} #page-container .mn-hero-a .mn-buehne{margin-bottom:-56px} body #page-container .et_pb_section.mn-nach-hero-a{padding-top:112px!important} } #page-container .mn-bereich{margin-top:96px!important} #page-container .mn-bild img{display:block;width:100%;height:auto;border-radius:16px} #page-container ul.mn-zeilen{list-style:none;padding:8px 0 16px;margin:0} #page-container ul.mn-zeilen li{position:relative;padding:12px 0 12px 32px;border-top:1px solid var(--mn-rand);line-height:26px} #page-container ul.mn-zeilen li:last-child{border-bottom:1px solid var(--mn-rand)} #page-container ul.mn-zeilen li:before{content:"";position:absolute;left:0;top:24px;width:16px;height:2px;background:var(--mn-akzent)} #page-container .mn-leitband .mn-leitsatz p{color:#fff} #page-container .mn-referenzen{margin-top:48px!important} #page-container .mn-referenz{background:var(--mn-karte);border-radius:16px;overflow:hidden;box-shadow:0 12px 32px -12px rgba(0,35,85,.2);margin-bottom:0!important} #page-container .mn-referenz .et_pb_blurb_content{max-width:none!important;margin:0!important;width:100%;text-align:left} #page-container .mn-referenz .et_pb_main_blurb_image{display:block;margin:0;width:100%;overflow:hidden} #page-container .mn-referenz .et_pb_main_blurb_image .et_pb_image_wrap{display:block;width:100%} #page-container .mn-referenz .et_pb_main_blurb_image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} #page-container .mn-referenz .et_pb_blurb_container{padding:24px 32px 28px;display:block} #page-container .mn-ole-bild img{display:block;width:100%;max-width:240px;aspect-ratio:1;object-fit:cover;border-radius:16px} #page-container .mn-zitat p{font-family:'Oswald',Arial,sans-serif!important;font-size:22px;line-height:32px;color:var(--mn-ueberschrift);border-left:3px solid var(--mn-akzent);padding:0 0 0 24px;margin:8px 0 24px} #page-container .mn-fakten table{width:100%;border-collapse:collapse;border:0;background:transparent} #page-container .mn-fakten th,#page-container .mn-fakten td{text-align:left;vertical-align:top;padding:12px 0;border:0;border-top:1px solid var(--mn-rand);font-size:15px;line-height:24px} #page-container .mn-fakten th{width:30%;font-weight:600;padding-right:24px} #page-container .mn-frage{border-top:1px solid var(--mn-rand);padding-top:24px;margin-bottom:40px!important} #page-container .mn-termin{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:40px;align-self:center} /* A8-Bewegung Anfang */ /* Die alte, scrollgebundene Einblendung wird stillgelegt (Begruendung: mn_animation.py). Die Klasse bleibt im Markup, damit keine Seite neu gebaut werden muss. */ @media(prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ #page-container .mn-auf{animation:none} } } @media(prefers-reduced-motion:no-preference){ html.mn-a8{--a8-hoch:22px;--a8-quer:46px;--a8-klein:.95;--a8-gross:1.04;--a8-dauer:560ms} html.mn-a8.a8-stark{--a8-hoch:30px;--a8-quer:58px;--a8-klein:.93;--a8-gross:1.05;--a8-dauer:660ms} /* Bewusst OHNE will-change: auf /referenzen/ warten 76 Kacheln gleichzeitig. Jede von ihnen dauerhaft auf eine eigene Ebene zu heben, kostet mehr, als es bringt - Chrome hebt Deckkraft und Transform waehrend des Uebergangs ohnehin auf eine Ebene. */ html.mn-a8 #main-content [data-a8]:not(.a8-da){opacity:0} html.mn-a8 #main-content [data-a8=auf]:not(.a8-da){transform:translate3d(0,var(--a8-hoch),0)} html.mn-a8 #main-content [data-a8=links]:not(.a8-da){transform:translate3d(calc(0px - var(--a8-quer)),0,0)} html.mn-a8 #main-content [data-a8=rechts]:not(.a8-da){transform:translate3d(var(--a8-quer),0,0)} html.mn-a8 #main-content [data-a8=pop]:not(.a8-da){transform:scale(var(--a8-klein)) translate3d(0,14px,0)} html.mn-a8 #main-content [data-a8=zoom]:not(.a8-da){transform:scale(var(--a8-gross))} html.mn-a8 #main-content [data-a8].a8-da{opacity:1;transform:none; transition:opacity var(--a8-dauer) cubic-bezier(.22,.68,.24,1) var(--a8-halt,0ms), transform var(--a8-dauer) cubic-bezier(.22,.68,.24,1) var(--a8-halt,0ms)} /* Nach dem Lauf raeumt das Skript auf: kein Uebergang mehr im Weg (wichtig fuer den Filter auf /referenzen/, der die Kacheln selbst ein- und ausblendet). */ html.mn-a8 #main-content [data-a8].a8-fertig{transition:none} /* Am Handy stehen die Spalten untereinander. Seitliche Bewegung waere dort sinnlos und koennte eine waagerechte Bildlaufleiste erzeugen - sie wird zum Aufsteigen. */ @media(max-width:900px){ html.mn-a8 #main-content [data-a8=links]:not(.a8-da), html.mn-a8 #main-content [data-a8=rechts]:not(.a8-da){transform:translate3d(0,var(--a8-hoch),0)} } } /* A8-Bewegung Ende */ /* R6-Referenzen Anfang */ /* Kopf einer Referenz (Ole 21.09.): rechts das Studio-Mockup des Kunden, links auf dem dunklen Markengrund H1, Einleitung und Knoepfe. Der Uebergang ist eine Maske AUF DEM BILD, keine Farbflaeche darueber. Eine Farbflaeche muesste die Flaeche der Sektion treffen, und die ist ein Verlauf (var(--mn-buehne)) - an der Naht staende dann eine Kante, und nachts eine andere als tags. Mit der Maske laeuft das Bild in genau den Grund aus, der darunter liegt, in jeder Fassung. Zwei Masken, zwei Elemente: waagerecht am inneren Element, senkrecht am aeusseren. Zusammengesetzt ginge es nur ueber mask-composite, das aeltere Browser nicht koennen. */ #page-container .mn-ref-kopf{position:relative;overflow:hidden} #page-container .mn-ref-kopf>.et_pb_row.mn-refhero-zeile,#page-container .mn-refhero-zeile .et_pb_column, #page-container .mn-refhero-zeile .et_pb_module,#page-container .mn-refhero-zeile .et_pb_code_inner{ position:static!important;height:0;min-height:0;width:100%;margin:0!important;padding:0!important; z-index:auto} #page-container .mn-refhero-bild{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0; pointer-events:none; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 13%,#000 84%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 13%,#000 84%,rgba(0,0,0,0) 100%)} #page-container .mn-refhero-innen{display:block;width:100%;height:100%; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.16) 15%,rgba(0,0,0,.5) 33%, rgba(0,0,0,.86) 53%,#000 70%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.16) 15%,rgba(0,0,0,.5) 33%, rgba(0,0,0,.86) 53%,#000 70%)} #page-container .mn-refhero-innen img{display:block;width:100%;height:100%;object-fit:cover; object-position:58% 50%} #page-container .mn-ref-kopf .mn-hero-inhalt{position:relative;z-index:2;max-width:52%} /* Die Textzeile liegt ueber dem ganzen Kopf, auch ueber dem Mockup rechts - dort faengt sie sonst jeden Klick ab, und Chrome bietet kein "Bild speichern" an (Ole 21.09.). Sie laesst Klicks deshalb durch; die Spalte mit Text und Knoepfen nimmt sie wieder an. */ #page-container .mn-refhero-textzeile{position:relative;z-index:2;pointer-events:none} #page-container .mn-refhero-textzeile .mn-hero-inhalt{pointer-events:auto} @media(max-width:1280px){ #page-container .mn-refhero-bild{width:56%} #page-container .mn-ref-kopf .mn-hero-inhalt{max-width:56%} } /* Am Handy steht das Mockup ueber dem Text, in voller Breite und ganz: das Geraet darf nicht angeschnitten sein, deshalb kein object-fit:cover, sondern die eigene Hoehe des Bildes. */ @media(max-width:980px){ #page-container .mn-ref-kopf>.et_pb_row.mn-refhero-zeile,#page-container .mn-refhero-zeile .et_pb_column, #page-container .mn-refhero-zeile .et_pb_module,#page-container .mn-refhero-zeile .et_pb_code_inner{height:auto} #page-container .mn-refhero-bild{position:relative;width:auto;margin:0 -5% 26px; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 8%,#000 64%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 8%,#000 64%,rgba(0,0,0,0) 100%)} #page-container .mn-refhero-innen{height:auto; -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 9%,#000 91%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0,#000 9%,#000 91%,rgba(0,0,0,0) 100%)} #page-container .mn-refhero-innen img{height:auto;object-fit:contain} #page-container .mn-ref-kopf .mn-hero-inhalt{max-width:none} } /* Ole 21.09.: Rechtsklick auf die Bilder. Das Hero-Mockup lag unter einer Ebene, die pointer-events:none traegt - damit war auch das Bild selbst nicht mehr anzusprechen ("Bild speichern" fehlte im Menue). Die Ebene bleibt durchlaessig, das Bild darin nicht: so faengt die Maske keine Klicks ab, das echte img aber schon. */ #page-container .mn-refhero-innen img{pointer-events:auto} /* Geraeterahmen in der Seite */ #page-container figure.mn-ref-rahmen{margin:0;border-radius:18px;overflow:hidden;background:#0A1F3A; box-shadow:0 30px 70px rgba(2,16,38,.30)} #page-container .mn-ref-bild{position:relative;display:block;height:420px;overflow:hidden;background:#0A1F3A} #page-container .mn-ref-bild img{display:block;width:100%;height:auto} #page-container .mn-ref-bild:after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px; pointer-events:none;background:linear-gradient(180deg,rgba(10,31,58,0),rgba(10,31,58,.92))} #page-container .mn-schirm-leiste{pointer-events:none} #page-container .mn-ref-bild:focus-visible{outline:3px solid var(--mn-akzent);outline-offset:3px} #page-container figure.mn-ref-rahmen figcaption{padding:14px 18px 16px;font-size:14px;line-height:20px; color:#A3B6D6;background:#0A1F3A;text-align:center} #page-container figure.mn-ref-rahmen figcaption a{color:#CFE0FF} /* Sichtbare Bildbeschriftung (Ole 21.09.): steht unter der Vorschau und unter der Handy-Ansicht, nennt Branche und Ort. Der Bedienhinweis bleibt darunter, leiser. */ #page-container .mn-bildtext{display:block;font-size:15px;line-height:22px;font-weight:600;color:#DCE7F8} #page-container figure.mn-ref-rahmen figcaption .mn-bildhinweis{display:block;margin-top:4px; font-size:13px;line-height:19px;color:#A3B6D6} #page-container figure.mn-ref-handy figcaption .mn-bildtext{font-size:14px;line-height:20px; font-weight:600;color:var(--mn-text-leise)} #page-container .mn-ref-aufzeile{margin:18px 0 0!important;text-align:center} #page-container .mn-ref-rahmen.mn-offen .mn-ref-bild,#page-container .mn-ref-rahmen:target .mn-ref-bild{height:auto;overflow:visible} #page-container .mn-ref-rahmen.mn-offen .mn-ref-bild:after,#page-container .mn-ref-rahmen:target .mn-ref-bild:after{display:none} @media(min-width:981px) and (hover:hover) and (pointer:fine){ #page-container .mn-ref-bild{height:min(560px,70vh);overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin} #page-container .mn-ref-bild:after{display:none} #page-container .mn-ref-aufzeile{display:none} } /* Dieselbe Seite am Handy, neben dem Rahmen */ #page-container figure.mn-ref-handy{margin:0;text-align:center} #page-container .mn-ref-handyschirm{display:block;max-width:300px;margin:0 auto;border-radius:22px; overflow:hidden;background:#0A1F3A;padding:8px;box-shadow:0 20px 50px rgba(2,16,38,.26)} #page-container .mn-ref-handyschirm img{display:block;width:100%;height:auto;border-radius:14px} #page-container figure.mn-ref-handy figcaption{padding:12px 4px 0;font-size:14px;line-height:20px; color:var(--mn-text-leise);text-align:center;max-width:300px;margin:0 auto} @media(max-width:980px){#page-container .mn-ref-handyspalte{margin-top:28px}} /* Uebersicht: Divis Modul "Filterbares Portfolio" sieht aus wie die Kacheln der Startseite. Das Modul zieht die Projekte selbst aus dem Inhaltstyp, deshalb erscheint jede neue Referenz ohne weiteres Zutun - gestaltet wird hier, nicht im Inhalt. */ #page-container .mn-portfolio{margin:0!important} #page-container .mn-portfolio .et_pb_portfolio_filters{margin:0 0 20px} #page-container .mn-portfolio .et_pb_portfolio_filters ul{display:flex;flex-wrap:wrap;gap:8px;padding:0 6px!important; margin:0;list-style:none!important} #page-container .mn-portfolio .et_pb_portfolio_filters li{float:none;margin:0;font-size:14px;line-height:18px} #page-container .mn-portfolio .et_pb_portfolio_filters li a{display:block;margin:0;padding:9px 16px; border:1px solid var(--mn-rand);border-radius:999px;background:var(--mn-karte);color:var(--mn-text); font-family:'Open Sans',Arial,sans-serif;font-weight:600;text-decoration:none} #page-container .mn-portfolio .et_pb_portfolio_filters li a:hover{border-color:var(--mn-akzent); color:var(--mn-akzent);background:var(--mn-karte)} #page-container .mn-portfolio .et_pb_portfolio_filters li a.active{background:var(--mn-marke); border-color:var(--mn-marke);color:#fff} #page-container .mn-portfolio .et_pb_portfolio_items{display:grid!important;grid-template-columns:repeat(3,1fr); gap:6px;padding:0 6px} @media(min-width:1280px){#page-container .mn-portfolio .et_pb_portfolio_items{grid-template-columns:repeat(4,1fr)}} @media(max-width:980px){#page-container .mn-portfolio .et_pb_portfolio_items{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){#page-container .mn-portfolio .et_pb_portfolio_items{grid-template-columns:1fr}} #page-container .mn-portfolio .et_pb_portfolio_item{position:relative;margin:0!important;padding:0; aspect-ratio:3/2;overflow:hidden;border-radius:20px;background:#0A1F3A} #page-container .mn-portfolio .et_pb_portfolio_item.mn-ort-aus{display:none!important} #page-container .mn-portfolio .et_portfolio_image{position:absolute;inset:0;display:block;padding:0;margin:0} #page-container .mn-portfolio .et_portfolio_image img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:top;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)} #page-container .mn-portfolio .et_pb_portfolio_item:hover .et_portfolio_image img{transform:scale(1.045)} #page-container .mn-portfolio .et_portfolio_image:before,#page-container .mn-portfolio .et_portfolio_image:after{display:none} /* Namensband (Ole 20.09.): Auf der kleinen Kachel muss ohne Ueberfahren lesbar sein, wer das ist und was der Betrieb macht. Der alte schraege Verlauf liess weisse Schrift auf hellen Aufnahmen verschwinden. Jetzt ein waagerechtes Band ueber dem unteren Drittel, das unten fast deckend wird - damit traegt es auf hellen wie dunklen Aufnahmen, in Tag und Nacht. Wichtig ist die Stapelung: Divis Bildlink liegt als ganzflaechiges a auf Ebene 3 und hatte Band und Beschriftung auf Ebene 1 und 2 vollstaendig verdeckt - die Kacheln waren dadurch stumm. Band und Text liegen deshalb auf Ebene 4 und 5 und lassen Klicks durch. Das Band ist ein echtes span und kein Pseudo-Element: Divi setzt auf .et_pb_portfolio_item:before ein content:none, das jede eigene :before-Regel aushebelt (gemessen am gerenderten Stil, content kam als none zurueck). */ #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband{position:absolute;left:0;right:0; bottom:0;top:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end; padding:24px;pointer-events:none; transition:background .4s,padding-bottom .35s cubic-bezier(.2,.7,.2,1); background:linear-gradient(180deg,rgba(2,10,23,0) 34%,rgba(2,10,23,.5) 58%, rgba(2,10,23,.86) 80%,rgba(2,10,23,.96) 100%)} #page-container .mn-portfolio .et_pb_portfolio_item:hover .mn-kachelband{background: linear-gradient(180deg,rgba(0,58,117,.34) 0,rgba(2,10,23,.62) 58%,rgba(2,10,23,.9) 80%, rgba(2,10,23,.97) 100%)} /* Beim Ueberfahren faehrt die Spalte leicht hoch und macht Platz fuer "Projekt ansehen". */ @media(hover:hover) and (pointer:fine){ #page-container .mn-portfolio .et_pb_portfolio_item:hover .mn-kachelband{padding-bottom:30px} } #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband .et_pb_module_header{position:static; margin:0;padding:0;font-family:'Oswald',Arial,sans-serif!important; font-size:25px;line-height:1.15;font-weight:500;color:#fff;pointer-events:none; text-shadow:0 2px 14px rgba(2,10,23,.7)} #page-container .mn-portfolio .et_pb_portfolio_item .et_pb_module_header a{color:#fff;text-decoration:none} #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband .post-meta{position:static; margin:3px 0 0;padding:0;font-size:15px;line-height:21px;color:#DCE7F8;font-weight:600; pointer-events:none;text-shadow:0 2px 12px rgba(2,10,23,.7)} #page-container .mn-portfolio .et_pb_portfolio_item .post-meta a{color:#DCE7F8;text-decoration:none; pointer-events:none} #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelauf{display:block;overflow:hidden; max-height:0;font-size:14px;line-height:20px;font-weight:600;color:#9FC6FF;opacity:0; pointer-events:none;transition:opacity .3s,max-height .35s cubic-bezier(.2,.7,.2,1)} @media(hover:hover) and (pointer:fine){ #page-container .mn-portfolio .et_pb_portfolio_item:hover .mn-kachelauf{opacity:1;max-height:26px; margin-top:6px} } #page-container .mn-portfolio .et_pb_portfolio_item .et_portfolio_image{z-index:0} #page-container .mn-portfolio .et_pb_portfolio_item>a:first-of-type{position:absolute;inset:0;z-index:3; display:block;border-radius:20px} /* Filterleiste (Ole 21.09.): Branchen und Ort in EINER Leiste, die beim Scrollen unter der Kopfleiste kleben bleibt - so laesst sich die Branche mitten im langen Raster wechseln. Gebaut mit position:sticky an einem eigenen Element, nicht mit Divis Haft-Option: die legt jedes haftende Modul als Kopie ins DOM (Machbarkeitstest 19.09.). Bedingungen, am Baum geprueft: Ueber der Leiste liegt kein Vorfahr mit overflow ausser #page-container{overflow-x:clip} - `clip` auf einer Achse bei `visible` auf der anderen macht keinen Scrollbehaelter und hebt das Kleben nicht auf (in Chrome nachgemessen). Der Kopf liegt auf Ebene 999, die Kachelbaender auf 4 und 5: die Leiste steht auf 20 - unter dem Kopf, ueber den Kacheln. */ #page-container .mn-filtermarke{height:1px;margin:0;padding:0;pointer-events:none} /* Ole 21.09.: Das Kachelraster laeuft randlos ueber die volle Seitenbreite, die Leiste steht mittig auf Inhaltsbreite darueber - deshalb die Breite hier und nicht an der Zeile. */ #page-container .mn-filterleiste{position:sticky;top:calc(var(--mn-kopf-hoehe) + 10px);z-index:20; box-sizing:border-box;width:90%;max-width:var(--mn-raster); display:flex;align-items:center;gap:8px 16px;margin:0 auto 18px;padding:6px 6px; border:1px solid transparent;border-radius:18px; transition:background-color .25s,border-color .25s,box-shadow .25s,padding .25s} /* Glasgrund erst im Klebezustand - ungeklebt steht die Leiste ruhig unter dem Einleitungstext. Nur Grund, Rand und Schatten aendern sich, nicht die Hoehe: sonst ruckt das Raster. */ #page-container .mn-filterleiste.mn-klebt{padding:6px 12px;background:rgba(255,255,255,.88); border-color:var(--mn-rand);box-shadow:0 16px 38px -16px rgba(0,12,36,.45); backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)} .mn-nacht #page-container .mn-filterleiste.mn-klebt{background:rgba(2,10,20,.84); border-color:rgba(124,166,255,.22);box-shadow:0 16px 38px -16px rgba(0,0,0,.6)} #page-container .mn-filterstreifen{flex:1 1 auto;min-width:0} #page-container .mn-filterleiste .et_pb_portfolio_filters{margin:0} /* Am Rechner und am Tablet bleiben ALLE Branchen sichtbar (Ole 21.09.): umbrochen in zwei bis drei ausgerichtete Zeilen, nicht wischbar. Damit die Leiste im Klebezustand wenig vom Raster verdeckt, sind die Pillen hier flacher als im uebrigen Bau - und zwar in beiden Zustaenden gleich. Wuerden sie beim Kleben schrumpfen, aenderte sich die Hoehe der Leiste und das Raster darunter ruckte im Moment des Klebens. */ #page-container .mn-filterleiste .et_pb_portfolio_filters ul{padding:0!important;gap:5px} #page-container .mn-filterleiste .et_pb_portfolio_filters li a{padding:6px 13px;font-size:13px; line-height:17px} @media(max-width:1280px){ #page-container .mn-filterleiste .et_pb_portfolio_filters li a{padding:5px 11px;font-size:12.5px} } /* Ab Tablet abwaerts bekommt die Pillenreihe die ganze Breite und die Ortsauswahl ruecht in eine eigene Zeile darunter. Gemessen (21.09.): Alle 13 Branchennamen zusammen bauen 1.739 px. Neben dem Auswahlfeld blieben bei 768 px nur 491 px Reihe - das waren fuenf Pillenzeilen und 174 px Leiste. Mit voller Breite sind es drei Zeilen. */ @media(max-width:1024px){ #page-container .mn-filterleiste .et_pb_portfolio_filters li a{padding:5px 10px;font-size:12px; line-height:16px} #page-container .mn-filterleiste{gap:6px 10px;flex-wrap:wrap} #page-container .mn-filterstreifen{flex:1 1 100%} #page-container .mn-ortwahl{margin-left:auto} } /* Ortsauswahl rechts: ein Feld statt einer zweiten Pillenreihe */ #page-container .mn-ortwahl{flex:0 0 auto;display:flex;align-items:center;gap:8px} #page-container .mn-ortwahl label{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--mn-text-leise)} #page-container select.mn-ortfeld{font-family:'Open Sans',Arial,sans-serif;font-size:14px;line-height:18px; font-weight:600;color:var(--mn-text);background-color:var(--mn-karte);border:1px solid var(--mn-rand); border-radius:999px;padding:8px 32px 8px 14px;max-width:190px;appearance:none;-webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer} #page-container select.mn-ortfeld:hover{border-color:var(--mn-akzent);color:var(--mn-akzent)} #page-container select.mn-ortfeld:focus-visible{outline:2px solid var(--mn-akzent);outline-offset:2px} /* Der Sprung ans Raster darf nicht unter der Leiste landen */ #page-container .mn-portfolio,#page-container #raster{scroll-margin-top:calc(var(--mn-kopf-hoehe) + 110px)} @media(max-width:767px){ /* Am Handy EINE wischbare Zeile statt sieben Zeilen Pillen, mit weichem Auslauf rechts. Die Ortsauswahl steht daneben und wischt nicht mit. */ #page-container .mn-filterleiste{gap:8px;padding:6px 4px;flex-wrap:nowrap} #page-container .mn-filterstreifen{flex:1 1 auto} #page-container .mn-filterstreifen{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)} #page-container .mn-filterstreifen::-webkit-scrollbar{display:none} #page-container .mn-filterleiste .et_pb_portfolio_filters ul{flex-wrap:nowrap;padding:1px 0!important} #page-container .mn-filterleiste .et_pb_portfolio_filters li{flex:0 0 auto;max-width:none} /* In der wischbaren Zeile darf kein Branchenname umbrechen - sonst wird die Leiste doppelt so hoch und die Pille zweizeilig (gemessen an "Bestattung und Trauerbegleitung"). */ #page-container .mn-filterleiste .et_pb_portfolio_filters li a{white-space:nowrap;font-size:13px; padding:6px 12px} #page-container .mn-ortwahl label{display:none} #page-container select.mn-ortfeld{max-width:118px;padding:7px 26px 7px 11px;font-size:13px} } #page-container .mn-treffer{margin:16px 0 0!important;padding:0 6px;font-size:15px;font-weight:600; color:var(--mn-text)} #page-container .mn-treffer:empty{display:none} /* Ole 21.09.: Unter dem Raster steht nichts mehr. Die Statuszeile bleibt im Dokument, aber unsichtbar - ein Vorleser sagt nach dem Filtern weiterhin, welche Auswahl jetzt gilt. Kein display:none: das nimmt die Zeile auch aus dem Vorlesebaum. */ #page-container .mn-nurvorleser{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0!important; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} #page-container .mn-portfolio-zeile{margin-bottom:0!important} #page-container .mn-rasterhinweis{margin:6px 0 0!important;padding:0 6px;font-size:15px;line-height:24px; color:var(--mn-text-leise)} #page-container .mn-filter-reihe{flex-wrap:wrap} @media(max-width:767px){ /* Am Handy stand jede Branche in einer eigenen Zeile: Divi gibt den Punkten dort eine feste Breite, zwei passten dadurch nie nebeneinander. Mit width:auto packen sie sich. */ #page-container .mn-portfolio .et_pb_portfolio_filters li{flex:0 0 auto;width:auto;max-width:100%} #page-container .mn-portfolio .et_pb_portfolio_filters li a{padding:8px 13px;font-size:13px} #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband{padding:20px} #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband .et_pb_module_header{font-size:22px} #page-container .mn-portfolio .et_pb_portfolio_item .mn-kachelband .post-meta{font-size:14px} } /* Dasselbe Band auf den Kacheln "Weitere Referenzen" am Fuss einer Referenzseite. Nur die Variante mn-schau-ref wird angefasst - das Schaufenster der Startseite bleibt, wie es ist. */ #page-container .mn-schau-ref a:before{background:linear-gradient(180deg,rgba(2,10,23,0) 0, rgba(2,10,23,.55) 42%,rgba(2,10,23,.88) 74%,rgba(2,10,23,.96) 100%);top:38%} #page-container .mn-schau-ref .mn-schau-text{left:24px;right:24px;bottom:22px; transition:transform .35s cubic-bezier(.2,.7,.2,1)} #page-container .mn-schau-ref strong{font-size:25px;text-shadow:0 2px 14px rgba(2,10,23,.65)} #page-container .mn-schau-ref small{font-size:15px;line-height:22px;color:#DCE7F8;font-weight:600; text-shadow:0 2px 12px rgba(2,10,23,.65)} @media(hover:hover) and (pointer:fine){ #page-container .mn-schau-ref a:hover .mn-schau-text{transform:translateY(-6px)} } @media(max-width:767px){ #page-container .mn-schau-ref .mn-schau-text{left:20px;right:20px;bottom:18px} #page-container .mn-schau-ref strong{font-size:22px} #page-container .mn-schau-ref small{font-size:14px} } /* Dritter Abschnitt (v8 Runde 3, Ole 21.09.): der Ratgeberteil laeuft ueber die volle Inhaltsbreite - keine Lesebreite, weil er unter zwei schmaleren Abschnitten steht und sonst wie ein halb gefuelltes Feld wirkt. Abstand oben und unten rund 68 px. */ #page-container .et_pb_row.mn-dritter{margin-top:68px!important;margin-bottom:0!important} #page-container .mn-dritter p{max-width:none} @media(max-width:767px){#page-container .et_pb_row.mn-dritter{margin-top:46px!important}} /* "Fuer wen dieser Aufbau passt" (v8, 21.09.): abgesetzter Kasten am Ende des Abschnitts. Farben nur ueber Variablen, damit der Kasten in Tag und Nacht traegt. Der Text laeuft ueber die ganze Breite des Kastens - eine Lesebreite mitten in einer 1240 breiten Karte sieht aus wie ein halb gefuelltes Feld. */ #page-container .mn-fuerwen{margin-top:48px!important;padding:28px 32px; border-radius:0 var(--mn-radius) var(--mn-radius) 0; background:var(--mn-karte);border:1px solid var(--mn-rand);border-left:4px solid var(--mn-akzent)} #page-container .mn-fuerwen h3{margin:0 0 12px;font-size:21px;line-height:1.3;color:var(--mn-ueberschrift)} #page-container .mn-fuerwen p{margin:0;max-width:none} @media(max-width:767px){#page-container .mn-fuerwen{padding:22px;margin-top:34px!important}} /* Die beiden Weiterleser unter "Weitere Referenzen" standen ohne Abstand nebeneinander und lasen sich wie ein Satz. Jetzt eine Reihe mit echtem Abstand, die am Handy umbricht. */ #page-container .mn-schau-fuss p{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0!important} /* Abschnittsbilder (Ole 21.09.): je Textabschnitt ein Bild aus der echten Kundenseite im CSS-Geraeterahmen daneben. Ein Raster mit drei Feldern - Ueberschrift, Bild, Text. Am Rechner steht das Bild in einer eigenen Spalte ueber beide Zeilen und ist OBEN buendig (align-items:start; nie mittig, sonst steht Leerflaeche ueber dem Text). Am Handy faellt das Raster in eine Spalte, und das Bild steht zwischen Ueberschrift und Text. Die Seite wechselt je Abschnitt (mn-bild-rechts / mn-bild-links). */ /* Drei Zeilen, nicht zwei: Ist das Bild hoeher als Ueberschrift plus Text, verteilt das Raster die uebrige Hoehe sonst auf die Zeilen - zwischen Ueberschrift und Text stand dadurch ein Loch von rund 70 px (im dritten Abschnitt von Timm & Golz gemessen). Die dritte Zeile mit 1fr nimmt den Rest auf, Ueberschrift und Text bleiben zusammen. */ #page-container .mn-absblock{display:grid;align-items:start;column-gap:46px;row-gap:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"kopf bild" "text bild" "rest bild"} #page-container .mn-absblock.mn-bild-links{grid-template-areas:"bild kopf" "bild text" "bild rest"} #page-container .mn-absblock.mn-ohne-bild{display:block} /* Zwischen zwei Abschnitten Luft. Divis Zeilen haben im Bau keinen eigenen Innenabstand (Hausregel 19.09.), sonst stossen Bildunterschrift und naechste Ueberschrift aneinander. */ #page-container .et_pb_row.mn-absatzzeile + .et_pb_row.mn-absatzzeile{margin-top:62px!important} @media(max-width:767px){ #page-container .et_pb_row.mn-absatzzeile + .et_pb_row.mn-absatzzeile{margin-top:42px!important} } #page-container .mn-absblock .mn-ab-kopf{grid-area:kopf;margin:0} #page-container .mn-absblock .mn-ab-text{grid-area:text;min-width:0} #page-container .mn-absblock .mn-ab-text p:last-child{padding-bottom:0} #page-container .mn-absblock .mn-ab-bild{grid-area:bild;margin:0;align-self:start} /* Hochkant: der Handy-Rahmen braucht weniger Platz als eine halbe Zeile, sonst bleibt neben dem Geraet eine leere Flaeche stehen. */ #page-container .mn-absblock.mn-ab-hochkant{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)} #page-container .mn-absblock.mn-ab-hochkant.mn-bild-links{grid-template-columns:minmax(0,1fr) minmax(0,1.85fr)} /* Fensterrahmen um die Aufnahme. Ueber dem Bild liegt nichts - der Rechtsklick muss das img treffen (Ole 21.09.). */ #page-container .mn-ab-rahmen{display:block;border-radius:16px;overflow:hidden;background:#0A1F3A; box-shadow:0 22px 52px -20px rgba(2,16,38,.45)} #page-container .mn-ab-leiste{display:flex;align-items:center;gap:7px;padding:9px 13px; background:linear-gradient(180deg,#0E2646 0,#0A1F3A 100%)} #page-container .mn-ab-leiste i{display:block;width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.26)} #page-container .mn-ab-leiste b{margin-left:10px;font-family:'Open Sans',Arial,sans-serif;font-size:12px; line-height:16px;font-weight:400;color:#A3B6D6;padding:3px 12px;border-radius:999px; background:rgba(255,255,255,.07)} #page-container .mn-ab-flaeche{display:block} #page-container .mn-ab-flaeche img{display:block;width:100%;height:auto} #page-container .mn-ab-handyschirm{display:block;max-width:320px;margin:0 auto;border-radius:24px; overflow:hidden;background:#0A1F3A;padding:8px;box-shadow:0 20px 48px -18px rgba(2,16,38,.42)} #page-container .mn-ab-handyschirm img{display:block;width:100%;height:auto;border-radius:16px} /* Bildunterschrift steht MITTIG unter dem Bild beziehungsweise unter dem Geraeterahmen (Ole 22.09.). Beim Handy-Rahmen ist das Geraet schmaler als seine Spalte (max-width plus margin:auto) - eine linksbuendige Unterschrift sass deshalb sichtbar seitlich versetzt. Die Unterschrift bekommt hier dieselbe Breite wie der Rahmen und dieselbe Mitte. */ #page-container .mn-ab-bild figcaption{padding:11px 2px 0;font-size:14px;line-height:20px; color:var(--mn-text-leise);text-align:center} #page-container .mn-ab-bild figcaption .mn-bildtext{font-size:14px;line-height:20px;font-weight:600; color:var(--mn-text-leise)} #page-container .mn-ab-bild.mn-ab-handy figcaption{max-width:320px;margin:0 auto} /* Weiterleser unter dem zweiten Abschnitt (Ole 22.09.): Der Knopf "Seite live ansehen" steht in einer eigenen Zeile, die beiden Textlinks stehen darunter NEBENEINANDER in einer Zeile. Kein flex-wrap: sonst rutscht bei knapper Spalte genau ein Link allein in die naechste Zeile - das war der Befund, der zu dieser Regel gefuehrt hat. Erst am Handy (unter 480 px) stehen sie untereinander, dann linksbuendig. */ #page-container .mn-ab-knopfzeile{margin-top:24px} #page-container .mn-ab-knopfzeile p{margin:0!important;padding:0!important} #page-container .mn-ab-linkzeile{margin-top:14px} #page-container .mn-ab-linkzeile p{display:flex;flex-wrap:nowrap;align-items:baseline; gap:8px 30px;margin:0!important;padding:0!important} #page-container .mn-ab-linkzeile p a{white-space:nowrap} @media(max-width:480px){ #page-container .mn-ab-linkzeile p{flex-direction:column;align-items:flex-start;gap:10px} } @media(max-width:980px){ #page-container .mn-absblock,#page-container .mn-absblock.mn-bild-links,#page-container .mn-absblock.mn-ab-hochkant, #page-container .mn-absblock.mn-ab-hochkant.mn-bild-links{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:"kopf" "bild" "text";column-gap:0} #page-container .mn-absblock .mn-ab-bild{margin:6px 0 26px} } @media(max-width:767px){ #page-container .mn-ab-handyschirm{max-width:270px} #page-container .mn-ab-bild.mn-ab-handy figcaption{max-width:270px} #page-container .mn-absblock .mn-ab-bild{margin:4px 0 22px} } /* Steckbrief einer Referenz: Beschriftung schmaler, Werte duerfen umbrechen */ body.single-project #page-container .mn-tab th{width:32%} body.single-project #page-container .mn-tab td{word-break:break-word} /* R6-Referenzen Ende */ /* K10-Kontaktfeld Anfang */ /* Bau Stufe 10: mitlaufender Kontakt-Knopf rechts, Auswahlfeld, Verlassen-Fenster. Steht bewusst als letzter Block: die Huelle haengt nach dem Start am Koerper der Seite und damit AUSSERHALB von #page-container - die Regeln tragen deshalb kein #page-container davor. (Kein spitzes Klammerzeichen in diesem Block: die Bridge wuerde das CSS still kuerzen.) */ /* ---- Halter in der Kopfleiste ---- Nur fuer den Fall OHNE JavaScript. Die Glasleiste traegt backdrop-filter und wuerde zum Bezugsrahmen fuer position:fixed; die Halter-Zeile bekommt deshalb nichts davon und keine Hoehe. Mit JavaScript ist sie nach dem ersten Bild ohnehin leer. */ #page-container .et-l--header .et_pb_row.mn-k10-halter{display:block!important;width:auto!important; max-width:none!important;height:0!important;min-height:0!important;margin:0!important; padding:0!important;border:0!important;border-radius:0!important;background:none!important; box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; position:static!important;pointer-events:none} #page-container .et-l--header .mn-k10-halter .et_pb_column, #page-container .et-l--header .mn-k10-halter .et_pb_module, #page-container .et-l--header .mn-k10-halter .et_pb_code_inner{position:static!important;margin:0!important; padding:0!important;min-height:0!important} .mn-k10{position:static} /* ---- der hochkante Knopf am rechten Rand ---- Ab 768 px sichtbar. Die Breite ist so gewaehlt, dass er in den Seitenrand des Inhaltsrasters passt (Raster 90 %, hoechstens 1240 px): bei 1024 px bleiben 51 px Rand, bei 768 px 38 px - deshalb wird der Knopf unter 900 px schmaler. Gemessen wird das in pruef_kontaktfeld.py. */ .mn-k10-knopf{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:1000; display:none;align-items:center;justify-content:center;box-sizing:border-box; width:44px;padding:22px 0;border:0;text-decoration:none;cursor:pointer;pointer-events:auto; color:#FFFFFF;background:var(--mn-marke);border-radius:16px 0 0 16px; box-shadow:0 18px 44px -12px rgba(0,14,44,.6),inset 1px 0 0 rgba(255,255,255,.18); transition:background-color .25s,box-shadow .25s,opacity .25s,transform .25s cubic-bezier(.22,.68,.24,1)} .mn-k10-knopf-wort{writing-mode:vertical-rl;font-family:'Open Sans',Arial,sans-serif; font-size:13px;line-height:16px;font-weight:600;letter-spacing:.16em;text-transform:uppercase} .mn-k10-knopf:hover{transform:translateY(-50%) translateX(-3px); box-shadow:0 22px 54px -12px rgba(0,14,44,.7),inset 1px 0 0 rgba(255,255,255,.3)} .mn-k10-knopf:focus-visible,.mn-k10-rund:focus-visible,.mn-k10-weg:focus-visible, .mn-k10-zu:focus-visible{outline:3px solid #7CA6FF;outline-offset:3px} @media(min-width:768px){.mn-k10-knopf{display:flex}} @media(min-width:768px) and (max-width:900px){.mn-k10-knopf{width:38px;padding:18px 0} .mn-k10-knopf-wort{font-size:12px;letter-spacing:.12em}} .mn-nacht .mn-k10-knopf,.mn-nacht .mn-k10-rund{background:var(--mn-knopf); color:var(--mn-knopf-text);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 26px rgba(124,166,255,.5)} /* ---- runder Knopf am Handy (unter 768 px) ---- */ .mn-k10-rund{position:fixed;right:16px;bottom:16px;z-index:1000;display:flex; align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px; border:0;border-radius:50%;text-decoration:none;cursor:pointer;pointer-events:auto; color:#FFFFFF;background:var(--mn-marke); box-shadow:0 14px 34px -8px rgba(0,14,44,.65),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .25s cubic-bezier(.22,.68,.24,1),box-shadow .25s,opacity .25s} .mn-k10-rund svg{width:24px;height:24px;display:block} .mn-k10-rund:active{transform:scale(.94)} @media(min-width:768px){.mn-k10-rund{display:none}} /* ---- Schleier und Feld ---- Das Feld ist eine KARTE, keine Spalte ueber die ganze Fensterhoehe: sie ist nur so hoch wie ihr Inhalt und sitzt auf derselben Hoehe wie der Knopf. Eine randlose Spalte stand zur Haelfte leer (erste Aufnahme am 22.09.), die Karte fuegt sich in die Formensprache der Seite ein (Radius, Schatten, Kartenflaeche). Am Handy wird daraus eine Tafel von unten. */ .mn-k10-schleier[hidden],.mn-k10-feld[hidden],.mn-k10-chat[hidden]{display:none} .mn-k10-schleier{position:fixed;inset:0;z-index:1001;pointer-events:auto; background:rgba(3,12,26,.52);opacity:0;transition:opacity .3s cubic-bezier(.22,.68,.24,1)} .mn-k10-auf .mn-k10-schleier{opacity:1} .mn-k10-feld{position:fixed;top:50%;right:16px;z-index:1002;box-sizing:border-box; width:min(396px,calc(100vw - 32px));max-height:calc(100vh - 32px); padding:30px 26px 26px;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain; background:var(--mn-karte);color:var(--mn-text);border-radius:26px; border:1px solid var(--mn-rand);box-shadow:var(--mn-schatten); transform:translate(calc(100% + 40px),-50%);transition:transform .34s cubic-bezier(.22,.68,.24,1)} .mn-k10-auf .mn-k10-feld{transform:translate(0,-50%)} .mn-k10-feld:focus{outline:none} /* Solange die Karte offen ist, tritt der Knopf zur Seite - sonst laege er darunter. */ .mn-k10-auf .mn-k10-knopf{opacity:0;pointer-events:none;transform:translate(60px,-50%)} .mn-k10-auf .mn-k10-rund{opacity:0;pointer-events:none;transform:translateY(96px)} .mn-k10-titel{font-family:'Oswald',Arial,sans-serif;font-size:25px;line-height:1.25;font-weight:500; color:var(--mn-ueberschrift);padding:0 46px 10px 0;margin:0} .mn-k10-vor{font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:1.55; color:var(--mn-text-leise);padding:0 0 22px;margin:0} .mn-k10-zu{position:absolute;top:20px;right:20px;width:40px;height:40px;display:flex; align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:50%; cursor:pointer;color:var(--mn-text-leise);background:var(--mn-flaeche-2); transition:background-color .2s,color .2s} .mn-k10-zu:hover{color:var(--mn-ueberschrift);background:var(--mn-flaeche-3)} .mn-k10-zu svg{width:18px;height:18px;display:block} /* ---- die drei Wege ---- */ .mn-k10-wege{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .mn-k10-wege li{margin:0;padding:0} .mn-k10-weg{display:flex;align-items:center;gap:16px;box-sizing:border-box;width:100%; padding:18px 18px;border-radius:18px;text-decoration:none;background:var(--mn-flaeche-2); box-shadow:inset 0 0 0 1px var(--mn-rand); transition:transform .22s cubic-bezier(.22,.68,.24,1),box-shadow .22s,background-color .22s} .mn-k10-weg:hover{transform:translateY(-2px);background:var(--mn-flaeche-3); box-shadow:inset 0 0 0 1px var(--mn-akzent),0 16px 34px -18px rgba(0,16,48,.6)} .mn-k10-symbol{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center; justify-content:center;border-radius:14px;color:#FFFFFF;background:var(--mn-marke)} .mn-k10-symbol svg{width:21px;height:21px;display:block} .mn-k10-wort{flex:1 1 auto;min-width:0} .mn-k10-wort b{display:block;font-family:'Open Sans',Arial,sans-serif;font-size:17px; line-height:23px;font-weight:600;color:var(--mn-ueberschrift)} .mn-k10-wort span{display:block;font-family:'Open Sans',Arial,sans-serif;font-size:14px; line-height:20px;color:var(--mn-text-leise)} .mn-k10-pfeil{flex:0 0 auto;font-size:19px;line-height:1;color:var(--mn-akzent); transition:transform .22s cubic-bezier(.22,.68,.24,1)} .mn-k10-weg:hover .mn-k10-pfeil{transform:translateX(4px)} /* ---- Platz fuer den Text-Chatbot (Stufe 2, Ole 22.09.: jetzt NICHT einbauen) ---- Der Platz ist vorbereitet und ausgeblendet. Stufe 2 nimmt das Attribut `hidden` weg und setzt den Baustein hier hinein - Knopf, Feld und Bedienung bleiben, wie sie sind. */ .mn-k10-chat{margin-top:18px;padding-top:18px;border-top:1px solid var(--mn-rand)} /* ---- Handy: aus der Karte wird eine Tafel von unten, direkt ueber dem runden Knopf ---- */ @media(max-width:767px){ .mn-k10-feld{top:auto;bottom:12px;right:12px;left:12px;width:auto; max-height:calc(100vh - 96px);padding:26px 18px 20px;border-radius:24px; transform:translateY(calc(100% + 28px))} .mn-k10-auf .mn-k10-feld{transform:translateY(0)} .mn-k10-titel{font-size:23px} .mn-k10-weg{padding:15px 14px;gap:13px} .mn-k10-symbol{width:40px;height:40px} } /* Flache Fenster (Oles Windows-Skalierung laesst oft nur 650 px Hoehe): enger setzen. */ @media(min-width:768px) and (max-height:620px){ .mn-k10-feld{padding:24px 22px 20px} .mn-k10-titel{font-size:22px;padding-bottom:8px} .mn-k10-vor{padding-bottom:16px} .mn-k10-weg{padding:13px 14px} .mn-k10-symbol{width:40px;height:40px} } /* ---- Ruhe: wer weniger Bewegung eingestellt hat, bekommt keine ---- */ @media(prefers-reduced-motion:reduce){ .mn-k10-knopf,.mn-k10-rund,.mn-k10-feld,.mn-k10-schleier,.mn-k10-weg,.mn-k10-pfeil, .mn-k10-zu{transition:none!important} .mn-k10-knopf:hover{transform:translateY(-50%)} .mn-k10-weg:hover{transform:none} } /* ---- beim Drucken hat ein schwebender Knopf nichts zu suchen ---- */ @media print{.mn-k10{display:none}} /* K10-Kontaktfeld Ende */ /* M9-Megamenue Anfang */ /* Bau Stufe 9: Aufklapper "KI-Loesungen" als breites Feld mit fuenf Spalten. Steht bewusst HINTER Abschnitt 4 des Stylesheets: dieselben Selektoren, spaeter gesetzt. Alles ausserhalb von li.mn-mega bleibt wie es war (Webseiten, KI-Beratung: einspaltig). */ /* ---- das Feld selbst: an der Glasleiste ausgerichtet, nie breiter als das Fenster ---- Bezugsrahmen muss die ZEILE der Kopfleiste sein, nicht der Menuepunkt und nicht die Spalte. Gemessen am 22.09.: ohne die folgenden `static` sass das Feld 90 px links der Fenstermitte, weil Divi der Spalte und dem Menue-Modul `position:relative` gibt. Dieselbe Liste steht in mn_stil._KOPF_ENG fuer das Klappmenue - hier gilt sie fuer die breite Ansicht. */ #page-container .et-l--header .et_pb_column.mn-menuespalte,#page-container .et-l--header .et_pb_menu,#page-container .et-l--header .et_pb_menu_inner_container, #page-container .et-l--header .et_pb_menu__wrap,#page-container .et-l--header .et_pb_menu__menu,#page-container .et-l--header .et_pb_menu__menu>nav{position:static} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega{position:static} /* Bezugsrahmen ist der Rahmen INNEN der Leiste (Polsterkasten), nicht der Textbereich: die beiden ungleichen Innenabstaende (22 links, 10 rechts) spielen also keine Rolle. Gemessen: `left:50%` trifft die Fenstermitte auf den Pixel genau, eine Korrektur waere ein Fehler. */ /* Breite GENAU wie die Glasleiste (90 % bis 1240 px, Ole 19.09.: Kopf steht auf dem Inhaltsraster). Ein schmaleres Feld gaebe zwei verschiedene linke Kanten uebereinander. */ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu{position:absolute;top:calc(100% + 12px);left:50%;right:auto; transform:translateX(-50%);width:min(1240px,90vw);min-width:0;max-width:none; display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start; gap:0 18px;padding:24px 26px 22px;border-radius:20px; /* Ole 22.09.: kuenftig 5 bis 10 Leistungsseiten je Bereich. Das Feld waechst mit, bleibt aber im Fenster - erst wenn es nicht mehr passt, bekommt es eine eigene Bildlaufleiste. Bei zehn Eintraegen je Spalte sind es rund 430 px, das passt auch in ein 650 px hohes Fenster (Oles Windows-Skalierung) ohne zu scrollen. */ max-height:min(640px,calc(100vh - 132px));max-height:min(640px,calc(100svh - 132px)); overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin; scrollbar-color:rgba(124,166,255,.45) transparent} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu::-webkit-scrollbar{width:8px} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu::-webkit-scrollbar-thumb{background:rgba(124,166,255,.45);border-radius:8px} /* ---- M9b (Ole 24.09.): Aufklapper oeffnen NUR ueber dem Wort, nicht schon in der Leiste ---- Befund: der Link war so hoch wie die ganze Leiste (24 px Innenabstand oben und unten), und Divi oeffnet per `li:hover`. Wer von oben in die Leiste fuhr, riss das Feld schon am oberen Leistenrand auf - 20 px ueber dem Wort. Dazu lag eine 14 px hohe Bruecke ueber die GANZE Leistenbreite unter der Leiste und hielt das Feld auch unter Logo und Nummer offen. Jetzt: die Trefferflaeche ist das Wort plus 8 px. Die Hoehe der Leiste traegt der Listenpunkt (16 px oben und unten), damit Leiste und kleine Aufklapper genau da bleiben, wo sie waren. */ #page-container .et-l--header .et_pb_menu .et-menu>li{padding-top:16px;padding-bottom:16px} #page-container .et-l--header .et_pb_menu .et-menu>li>a{position:relative;padding-top:8px;padding-bottom:8px} /* Sobald das Skript laeuft (Klasse mn-klappt an der Liste), oeffnet NUR noch das Skript: mit kurzer Verzoegerung, erst ueber dem Wort, zu 200 ms nach dem Verlassen. Divis eigenes `li:hover`, `et-hover` und das `:focus-within` aus Abschnitt 4 sind damit abgeschaltet - ohne Skript gilt weiter Divis Verhalten. Ausgenommen ist Divis Tipp-Klasse `et-touch-hover`: auf Tablets faengt Divi den ersten Tipp selbst ab (es entsteht gar kein Klick), und genau dieser Weg oeffnete das Feld bisher - er bleibt, wie er war. */ #page-container .et-l--header .et_pb_menu .et-menu.mn-klappt>li:not(.mn-offen):not(.et-touch-hover)>ul.sub-menu{opacity:0!important; visibility:hidden!important;pointer-events:none!important} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-offen>ul.sub-menu{opacity:1;visibility:visible} /* Die alte Bruecke am Feld (Abschnitt 4, 14 px ueber die ganze Feldbreite) reicht beim breiten Feld unter Logo und Nummer. Ersetzt durch eine schmale Bruecke NUR unter dem Wort, die erst greift, wenn das Feld offen ist. 34 px reichen vom Wort bis zum Feld (gemessen 28 px). */ #page-container .et-l--header .et_pb_menu .et-menu.mn-klappt>li>ul.sub-menu:before{display:none} #page-container .et-l--header .et_pb_menu .et-menu.mn-klappt>li.menu-item-has-children>a:before{content:"";position:absolute; left:-8px;right:-8px;top:100%;height:34px;pointer-events:none} #page-container .et-l--header .et_pb_menu .et-menu.mn-klappt>li.mn-offen>a:before{pointer-events:auto} /* ---- Spaltenkopf: der Bereich, Link auf seine Hubseite ---- */ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li{display:block;width:auto;float:none;margin:0;padding:0;white-space:normal} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li>a{display:block;width:auto;box-sizing:border-box;white-space:normal; font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:20px;font-weight:600; color:#FFFFFF;padding:8px 10px 10px;margin:0 0 7px;border-radius:10px; border-bottom:1px solid rgba(124,166,255,.32)} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li>a:hover, #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li>a:focus-visible, #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li.current-menu-item>a{color:#FFFFFF;background:rgba(124,166,255,.22)} #page-container .et-l--header .mn-mega-zeile{display:block;font-size:14px;line-height:19px;font-weight:400; color:#A3B6D6;padding:1px 10px 0} /* ---- dritte Ebene: die Leistungsseiten, untereinander in ihrer Spalte ---- Kein eigenes Feld, kein Schatten, keine Verschiebung nach rechts: die Liste steht im Fluss. */ /* M9b: `inherit` statt `visible` - sonst blieben die Leistungsseiten bei geschlossenem Feld mit Tab erreichbar (unsichtbar), und Tab sprang am Spaltenkopf vorbei mitten ins Feld. */ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu{position:static;display:block;opacity:1;visibility:inherit; transform:none;width:auto;min-width:0;max-width:none;padding:0;margin:0;border:0;border-radius:0; background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu:before{display:none} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li{display:block;width:auto;float:none;padding:0;margin:0; white-space:normal} /* Ole 22.09.: 15 px ist die Untergrenze, auch wenn eine Spalte zehn Eintraege traegt. Gewonnen wird Hoehe ueber den Innenabstand (7 px), nicht ueber kleinere Schrift. */ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li>a{display:block;width:auto;box-sizing:border-box; white-space:normal;font-family:'Open Sans',Arial,sans-serif;font-size:15px;line-height:20px; font-weight:400;color:#C9D9F2;padding:7px 10px;border-radius:8px;background:transparent} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li>a:hover, #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li>a:focus-visible, #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li.current-menu-item>a{color:#FFFFFF;background:rgba(124,166,255,.18)} /* Divi haengt an jeden Punkt mit Kindern einen Pfeil. Im Feld hat er nichts zu melden. */ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu li.menu-item-has-children>a:after{display:none!important} /* Nacht: die Flaeche des Feldes kommt aus Abschnitt 4 (dort fuer alle Aufklapper gesetzt), hier wird nur der Trennstrich der Spaltenkoepfe etwas kraeftiger. */ .mn-nacht #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li>a{border-bottom-color:rgba(124,166,255,.38)} /* Schmale Rechner (1100 bis 1160 px, darunter uebernimmt das Klappmenue): das Feld schrumpft mit dem Fenster mit, die fuenf Spalten bleiben. Enger wird nur die einzelne Spalte. */ @media(max-width:1200px){ #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu{gap:0 12px;padding:20px 18px 18px} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega ul.sub-menu ul.sub-menu>li>a{padding:7px 8px} #page-container .et-l--header .et_pb_menu .et-menu>li.mn-mega>ul.sub-menu>li>a{padding:8px 8px 10px} } /* Das Klappmenue haengt in der klebenden Kopfleiste: was unter den Fensterrand rutscht, ist ohne eigene Bildlaufleiste NICHT erreichbar. Gemessen am 22.09.: zugeklappt endete die Liste bei 776 px (Fenster 811), aufgeklappt bei 1202 px. Mit der dritten Ebene ist das Pflicht - und es war schon vorher zu lang fuer ein Fenster von 650 px (Oles Windows-Skalierung). */ #page-container .et-l--header.mn-eng .et_mobile_menu{max-height:calc(100vh - 104px);max-height:calc(100svh - 104px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* Die Beschreibungszeile gehoert ins breite Feld. Divi klont die Navigation fuer das Klappmenue und nimmt sie mit - dort ist sie nur ein Bruch in einer Liste aus Links. */ #page-container .et-l--header.mn-eng .et_mobile_menu .mn-mega-zeile{display:none} #page-container .et-l--header.mn-eng .et_mobile_menu .sub-menu .sub-menu{display:none!important;padding:0 0 8px 16px;margin:0 0 4px; border-left:1px solid rgba(124,166,255,.3);background:transparent} #page-container .et-l--header.mn-eng .et_mobile_menu li.mn-offen>.sub-menu{display:block!important} #page-container .et-l--header.mn-eng .et_mobile_menu .sub-menu .sub-menu li a{font-size:15px;line-height:22px;font-weight:400; color:#B9CCE8;padding:11px 4px} #page-container .et-l--header.mn-eng .et_mobile_menu li.mn-hat-drittes{position:relative} #page-container .et-l--header.mn-eng .et_mobile_menu li.mn-hat-drittes>a{padding-right:52px} #page-container .et-l--header.mn-eng .et_mobile_menu button.mn-mobil-auf{position:absolute;top:2px;right:0;width:46px;height:46px; display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0; border-radius:12px;background:rgba(255,255,255,.06);color:#C9D9F2;cursor:pointer;z-index:2} #page-container .et-l--header.mn-eng .et_mobile_menu button.mn-mobil-auf:hover{background:rgba(124,166,255,.22);color:#FFFFFF} #page-container .et-l--header.mn-eng .et_mobile_menu button.mn-mobil-auf svg{width:18px;height:18px;display:block;transition:transform .25s} #page-container .et-l--header.mn-eng .et_mobile_menu li.mn-offen>button.mn-mobil-auf svg{transform:rotate(180deg)} @media(max-width:1100px){ /* Das Klappmenue haengt in der klebenden Kopfleiste: was unter den Fensterrand rutscht, ist ohne eigene Bildlaufleiste NICHT erreichbar. Gemessen am 22.09.: zugeklappt endete die Liste bei 776 px (Fenster 811), aufgeklappt bei 1202 px. Mit der dritten Ebene ist das Pflicht - und es war schon vorher zu lang fuer ein Fenster von 650 px (Oles Windows-Skalierung). */ #page-container .et-l--header .et_mobile_menu{max-height:calc(100vh - 104px);max-height:calc(100svh - 104px); overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* Die Beschreibungszeile gehoert ins breite Feld. Divi klont die Navigation fuer das Klappmenue und nimmt sie mit - dort ist sie nur ein Bruch in einer Liste aus Links. */ #page-container .et-l--header .et_mobile_menu .mn-mega-zeile{display:none} #page-container .et-l--header .et_mobile_menu .sub-menu .sub-menu{display:none!important;padding:0 0 8px 16px;margin:0 0 4px; border-left:1px solid rgba(124,166,255,.3);background:transparent} #page-container .et-l--header .et_mobile_menu li.mn-offen>.sub-menu{display:block!important} #page-container .et-l--header .et_mobile_menu .sub-menu .sub-menu li a{font-size:15px;line-height:22px;font-weight:400; color:#B9CCE8;padding:11px 4px} #page-container .et-l--header .et_mobile_menu li.mn-hat-drittes{position:relative} #page-container .et-l--header .et_mobile_menu li.mn-hat-drittes>a{padding-right:52px} #page-container .et-l--header .et_mobile_menu button.mn-mobil-auf{position:absolute;top:2px;right:0;width:46px;height:46px; display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0; border-radius:12px;background:rgba(255,255,255,.06);color:#C9D9F2;cursor:pointer;z-index:2} #page-container .et-l--header .et_mobile_menu button.mn-mobil-auf:hover{background:rgba(124,166,255,.22);color:#FFFFFF} #page-container .et-l--header .et_mobile_menu button.mn-mobil-auf svg{width:18px;height:18px;display:block;transition:transform .25s} #page-container .et-l--header .et_mobile_menu li.mn-offen>button.mn-mobil-auf svg{transform:rotate(180deg)} } /* M9-Megamenue Ende */ /* F15-Freigabe Anfang */ /* Ole 24.09.: Text markieren, Rechtsklick und Bild speichern sollen gehen. Das Plugin All-In-One Security (Copy Protection) setzt :root auf user-select:none - hier aufgehoben. Die Plugin-Handler (oncontextmenu, ondragstart) nimmt mn-f15-skript in der Kopfleiste weg. */ html,body,#page-container,#page-container *{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important} /* Knoepfe und Menues bleiben ohne Textauswahl */ #page-container .mn-knopf,#page-container .mn-knopf *,#page-container .et-menu a,#page-container .et_mobile_menu a,#page-container .mobile_menu_bar,#page-container .mn-k10-knopf,#page-container .mn-k10-knopf *,#page-container .mn-k10-rund,#page-container .mn-k10-rund *,html body .mn-k10-knopf,html body .mn-k10-knopf *,html body .mn-k10-rund,html body .mn-k10-rund *{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important} /* Hero: die Ebene bleibt durchlaessig (Verlauf und Film fangen nichts ab), das Bild darin nimmt den Rechtsklick an - wie bei den Projektseiten (Ole 21.09.). Die Textzeile liegt ueber dem ganzen Kopf; sie laesst durch, ihre Textspalte nimmt wieder an. */ #page-container .mn-hero-bg img{pointer-events:auto} #page-container .mn-kopfbuehne>.et_pb_row:has(>.et_pb_column.mn-hero-inhalt){pointer-events:none} #page-container .mn-kopfbuehne>.et_pb_row:has(>.et_pb_column.mn-hero-inhalt)>.et_pb_column{pointer-events:auto} /* Referenz-Karten: der Verlauf (a:before) lag ueber dem Bild */ #page-container .mn-schau a:before{pointer-events:none} /* F15-Freigabe Ende */ /* B16-Blog Anfang */ /* Beitragsliste auf /blog/ (Divi-Blog-Modul): Karten wie auf den Unterseiten, drei Spalten, mobil eine */ #page-container .mn-blogliste .et_pb_blog_posts,#page-container .mn-blogliste .et_pb_ajax_pagination_container:not(:has(>.et_pb_blog_posts)){display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:stretch} /* Einleitung: zwei Absaetze nebeneinander, mobil untereinander */ #page-container .mn-blog-einleitung .et_pb_text_inner{display:grid;grid-template-columns:1fr 1fr;gap:16px 56px} #page-container .mn-blog-einleitung p{padding-bottom:0!important} @media(max-width:980px){#page-container .mn-blog-einleitung .et_pb_text_inner{grid-template-columns:1fr}} #page-container .mn-blogliste article.et_pb_post{display:flex;flex-direction:column;width:auto!important;margin:0!important;padding:0!important; border:1px solid var(--mn-rand)!important;border-radius:var(--mn-radius);overflow:hidden;background:var(--mn-karte); box-shadow:var(--mn-lichtkante);transition:transform .25s,box-shadow .25s} #page-container .mn-blogliste article.et_pb_post:hover{transform:translateY(-3px);box-shadow:var(--mn-schatten)} #page-container .mn-blogliste .entry-featured-image-url{display:block;margin:0!important;aspect-ratio:16/9;overflow:hidden} #page-container .mn-blogliste .entry-featured-image-url img{display:block;width:100%;height:100%;object-fit:cover} #page-container .mn-blogliste .entry-title{padding:22px 26px 6px!important;font-size:22px!important;line-height:1.3!important} #page-container .mn-blogliste .entry-title a{color:var(--mn-ueberschrift)!important;text-decoration:none} #page-container .mn-blogliste .post-meta{padding:0 26px!important;margin:0!important;font-size:14px!important;color:var(--mn-text-leise)!important} #page-container .mn-blogliste .post-content{padding:10px 26px 26px} #page-container .mn-blogliste .post-content p,#page-container .mn-blogliste .post-content{font-size:16px!important;line-height:1.6!important;color:var(--mn-text)!important} #page-container .mn-blogliste .pagination,#page-container .mn-blogliste .wp-pagenavi{grid-column:1/-1;padding-top:8px} #page-container .mn-blogliste .pagination a{color:var(--mn-akzent)!important;font-weight:600} #page-container .mn-blogliste .et_overlay{display:none!important} /* Leere Liste: Divis Hinweis (H1, duzt) ausblenden, eigene Zeile zeigen, bis der erste Beitrag da ist */ #page-container .mn-blogliste>.entry{display:none!important} #page-container .mn-blog-leer p{color:var(--mn-text-leise)} #page-container #beitraege:has(article.et_pb_post) .mn-blog-leer{display:none} @media(max-width:980px){#page-container .mn-blogliste .et_pb_blog_posts,#page-container .mn-blogliste .et_pb_ajax_pagination_container:not(:has(>.et_pb_blog_posts)){grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){#page-container .mn-blogliste .et_pb_blog_posts,#page-container .mn-blogliste .et_pb_ajax_pagination_container:not(:has(>.et_pb_blog_posts)){grid-template-columns:minmax(0,1fr);gap:24px}} /* Beitrag: Hero mit Beitragsbild als echtem img (Bildmodul), Titel und Datum aus dem Titelmodul */ #page-container .mn-kopfbuehne .mn-hero-bgzeile .et_pb_module.mn-beitragsbild{position:absolute!important;inset:0;height:auto!important; width:100%!important;max-width:none!important;margin:0!important} #page-container .mn-beitragsbild .et_pb_image_wrap{position:absolute;inset:0;display:block;width:100%;height:100%} #page-container .mn-beitragskopf .et_pb_post_title{background:none!important;padding:0!important;margin:0 0 18px!important} #page-container .mn-beitragskopf .et_pb_post_title .entry-title{color:#FFFFFF!important;font-size:clamp(32px,min(1.7vw + 22px,6vh),50px)!important; line-height:1.1!important;padding-bottom:12px!important} #page-container .mn-beitragskopf .et_pb_post_title .et_pb_title_meta_container,#page-container .mn-beitragskopf .et_pb_post_title .et_pb_title_meta_container a{ color:#D7E2F3!important;font-size:15px!important} /* Inhalt in Lesebreite, Schrift wie die Unterseiten */ #page-container .mn-beitrag>.et_pb_row{max-width:760px!important;width:90%!important} #page-container .mn-beitragstext h2{font-size:clamp(26px,1vw + 20px,34px);padding:36px 0 12px} #page-container .mn-beitragstext h3{font-size:22px;padding:24px 0 8px} #page-container .mn-beitragstext p{padding-bottom:18px;font-size:18px;line-height:1.7} #page-container .mn-beitragstext ul,#page-container .mn-beitragstext ol{margin:0 0 22px;padding-left:24px;line-height:1.7} #page-container .mn-beitragstext li{padding:3px 0} #page-container .mn-beitragstext li::marker{color:var(--mn-akzent)} #page-container .mn-beitragstext blockquote{margin:28px 0;padding:6px 0 6px 26px;border-left:4px solid var(--mn-marke); font-size:22px;line-height:1.5;color:var(--mn-ueberschrift);font-style:normal} #page-container .mn-beitragstext blockquote p{font-size:inherit;line-height:inherit;padding-bottom:8px} #page-container .mn-beitragstext blockquote cite{display:block;font-size:15px;font-style:normal;color:var(--mn-text-leise)} #page-container .mn-beitragstext img{border-radius:16px;height:auto} #page-container .mn-beitragstext figcaption{font-size:14px;color:var(--mn-text-leise);padding-top:8px} #page-container .mn-beitragstext a{text-decoration:underline;text-underline-offset:3px} /* Kasten am Ende eines Beitrags. Inhalt kommt aus dem Beitrag: Gruppe oder div mit Klasse mn-betrieb-kasten */ #page-container .mn-betrieb-kasten{margin:40px 0 8px;padding:28px 32px;border-radius:var(--mn-radius);background:var(--mn-flaeche-2); box-shadow:inset 0 0 0 1px var(--mn-rand),var(--mn-lichtkante);border-left:4px solid var(--mn-marke)} #page-container .mn-betrieb-kasten h2,#page-container .mn-betrieb-kasten h3{padding-top:0!important;font-size:24px!important} #page-container .mn-betrieb-kasten p:last-child,#page-container .mn-betrieb-kasten ul:last-child{padding-bottom:0;margin-bottom:0} #page-container .mn-zurueck p{padding-top:8px} @media(max-width:767px){ #page-container .mn-beitragstext p{font-size:17px} #page-container .mn-beitragstext blockquote{font-size:19px;padding-left:18px} #page-container .mn-betrieb-kasten{padding:22px 20px} } /* B16-Blog Ende */