/* ===================================================================================================================== Theme mm-itservice (Paket 333) - freigegebener Mehrseiten-Entwurf. Farben aus dem Logo: Navy #243468, Tiefblau #18224A, Nacht #0E1533, Lavendel #CDCBE6, Hell #F4F3FA. Schrift IBM Plex Sans / Mono (OFL, selbst ausgeliefert). Keine Inline-Stile (CSP style-src 'self'). Umschalter arbeiten ohne Skript: Optionsfelder + CSS :has (Regeln am Ende dieser Datei, erzeugt). Quelle: werkzeuge/mm-theme-quelle.css, gebaut mit werkzeuge/mm-css-bauen.py ===================================================================================================================== */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/plex-sans-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("schrift/plex-sans-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("schrift/plex-sans-600.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("schrift/plex-sans-700.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("schrift/plex-mono-500.woff2") format("woff2"); } :root { --fokus: #243468; --navy: #243468; --tief: #18224A; --nacht: #0E1533; --mittel: #3A4D93; --navy-hover: #2E3F7C; --lav: #CDCBE6; --lav-dunkel: #B5B2D6; --lav-text: #8F94C4; --hell: #F4F3FA; --linie: #E3E1F0; --text: #3F4459; --leise: #5B5F70; --kopf: #18224A; --rot: #B42318; --rot-dunkel: #8F1C13; --rot-hell: #FFF4F2; --rot-linie: #F3C9C4; --rot-zart: #FDECEA; --rot-rand: #E8A39B; --rot-text: #5C140E; --gruen: #2F9E6B; --schrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --schatten: 0 40px 80px -50px rgba(14, 21, 51, .6); --rand: inset 0 0 0 1px var(--linie); --seite: 32px; } /* ------------------------------------------------------------------------------------------------ Grundlagen */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; } body { margin: 0; background: #FFFFFF; color: var(--text); font-family: var(--schrift); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; } ul, ol { padding: 0; list-style: none; } fieldset { border: 0; padding: 0; min-width: 0; } legend { padding: 0; } img, svg { max-width: 100%; } img { height: auto; display: block; } a { color: var(--navy); } a:hover { color: var(--tief); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; } /* Fokusrahmen IN dunklen Flaechen weiss (der Rahmen liegt ausserhalb des Elements, also auf der Flaeche darum); eine dunkle Karte, die selbst ein Link auf hellem Grund ist, behaelt den navy Rahmen */ .kurzzeile *, .vorschau *, .dd-karte--navy *, .karte--dunkel *, .kasten--dunkel *, .band--dunkel *, .cta *, .wege-band *, .person-karte *, .stufe-flaeche *, .itcheck-ergebnis *, .fenster *, .berater-ergebnis *, .fuss * { --fokus: #FFFFFF; } main { display: block; } main:focus { outline: none; } strong, b { font-weight: 600; } h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .mono { font-family: var(--mono); } .nw { white-space: nowrap; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .js-nur { display: none !important; } .js .js-nur { display: revert !important; } .js .js-nur.itcheck-fortschritt { display: flex !important; } .js .js-nur.wahl-feld { display: flex !important; } /* "Was ist betroffen?" erst, wenn das Skript die Auswahl beim Absenden in die Nachricht schreiben kann (Klasse bereit) */ .an-betroffen { display: none !important; } .anliegen.bereit .an-betroffen { display: flex !important; } .symbolvorrat { position: absolute; width: 0; height: 0; overflow: hidden; } .sprung { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tief); color: #FFFFFF; padding: 10px 16px; font-weight: 600; text-decoration: none; } .sprung:focus { top: 12px; color: #FFFFFF; } .vorschau-band { background: #FFF1DC; color: #6B3A00; text-align: center; font-size: 14px; padding: 8px 16px; } .huelle { max-width: 1240px; margin: 0 auto; padding: 0 var(--seite); position: relative; } /* Symbole */ .sym { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .symbol { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sym--haken { stroke-width: 2.2; } /* Sechseck */ .hex { flex: none; display: inline-flex; align-items: center; justify-content: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .hex .sym { width: 47%; height: 47%; } .hex--xs { width: 26px; height: 30px; } .hex--s { width: 34px; height: 38px; } .hex--m { width: 42px; height: 47px; } .hex--l { width: 48px; height: 54px; } .hex--hell { background: var(--hell); color: var(--navy); } .hex--weiss { background: #FFFFFF; color: var(--navy); } .hex--lav { background: var(--lav); color: var(--navy); } .hex--navy { background: var(--navy); color: #FFFFFF; } .hex--rot { background: var(--rot); color: #FFFFFF; } /* Oberzeile */ .ober { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mittel); } .ober::before { content: ""; flex: none; width: 12px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .ober--hell { color: var(--lav); } .ober--rot { color: var(--rot); } /* Knoepfe und Verweise */ .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; min-height: 52px; padding: 0 24px; border: 0; cursor: pointer; text-align: center; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; } .knopf .sym { width: 18px; height: 18px; } .knopf { max-width: 100%; } .knopf > span { min-width: 0; } .knopf--voll { background: var(--navy); color: #FFFFFF; } .knopf--voll:hover { background: var(--tief); color: #FFFFFF; } .knopf--rand { background: #FFFFFF; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } .knopf--rand:hover { background: var(--hell); color: var(--tief); } .knopf--weiss { background: #FFFFFF; color: var(--tief); } .knopf--weiss:hover { background: var(--linie); color: var(--tief); } .knopf--glas { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #5A6BAA; } .knopf--glas:hover { background: var(--navy-hover); color: #FFFFFF; } .knopf--rot { background: var(--rot); color: #FFFFFF; } .knopf--rot:hover { background: var(--rot-dunkel); color: #FFFFFF; } .knopf--klein { min-height: 46px; font-size: 15px; padding: 0 18px; } .knopf--kopf { min-height: 48px; font-size: 15px; padding: 0 20px; } .knopf--riesig { min-height: 84px; padding: 0 30px; font-size: 30px; gap: 16px; align-self: flex-start; } .knopf--riesig .sym { width: 30px; height: 30px; } .link { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 600; text-decoration: none; } .link .sym { width: 16px; height: 16px; } .link:hover { color: var(--tief); text-decoration: underline; text-underline-offset: 4px; } .link--hell { color: #FFFFFF; } .link--hell:hover { color: #FFFFFF; } /* Hakenlisten */ .haken { display: flex; flex-direction: column; gap: 10px; } .haken li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--text); } .haken .sym { width: 18px; height: 18px; margin-top: 2px; color: var(--navy); } .haken--gross li { font-size: 16.5px; } .haken--klein li { font-size: 15px; } .haken--hell li { color: #E3E1F0; font-size: 14px; line-height: 1.45; gap: 9px; } .haken--hell .sym { color: var(--lav); width: 16px; height: 16px; } .haken--raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px 24px; border-top: 1px solid var(--linie); padding-top: 18px; } .haken--raster li { font-size: 15.5px; line-height: 1.5; } .led { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #D92D20; animation: mm-led 2.4s ease-in-out infinite; } .led--hell { background: #F97066; width: 8px; height: 8px; } .led--gruen { background: #34D27B; width: 8px; height: 8px; } @keyframes mm-led { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* ------------------------------------------------------------------------------------------------ Kurzzeile und Kopf */ .kurzzeile { background: var(--tief); color: var(--lav); font-size: 13.5px; } .kurzzeile-innen { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; } .kurzzeile-text { color: var(--lav); } .kurzzeile-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .kurzzeile a { color: #E3E1F0; text-decoration: none; } .kurzzeile a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .kurzzeile .kurz-notfall { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #FFFFFF; } .kopf { background: #FFFFFF; border-bottom: 1px solid var(--linie); position: relative; z-index: 30; } .kopf-innen { min-height: 82px; display: flex; align-items: stretch; justify-content: space-between; gap: 16px 28px; } .logo { display: flex; align-items: center; flex: none; } .logo img { height: 46px; width: auto; } .hauptnav { display: flex; align-items: stretch; gap: 34px; } .dd { position: relative; display: flex; align-items: stretch; } .dd--mega { position: static; } .dd-knopf, .nav-link { font-size: 15.5px; font-weight: 500; color: var(--kopf); background: none; border: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; padding: 0 2px; cursor: pointer; display: flex; align-items: center; gap: 7px; text-decoration: none; transition: color .15s ease, border-color .15s ease; } .dd-knopf[data-aktiv="ja"], .nav-link[aria-current="page"] { border-bottom-color: var(--navy); color: var(--navy); } .nav-link:hover { color: var(--navy); border-bottom-color: var(--lav); } .dd:hover > .dd-knopf, .dd:focus-within > .dd-knopf { color: var(--navy); border-bottom-color: var(--navy); } .dd-pfeil { width: 14px; height: 14px; stroke-width: 2.2; transition: transform .2s ease; } .dd:hover .dd-pfeil, .dd:focus-within .dd-pfeil { transform: rotate(180deg); } .dd-panel { position: absolute; top: calc(100% - 1px); left: -24px; z-index: 40; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .dd--mega > .dd-panel { left: var(--seite); right: var(--seite); } .dd--rechts > .dd-panel { left: auto; right: -24px; } .dd:hover > .dd-panel, .dd:focus-within > .dd-panel { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } .dd.zu > .dd-panel { visibility: hidden; opacity: 0; pointer-events: none; } .dd-flaeche { background: #FFFFFF; box-shadow: 0 40px 80px -36px rgba(14, 21, 51, .6), var(--rand); } .dd-flaeche--zwei { width: 640px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; } .mega-raster { display: grid; grid-template-columns: minmax(0, 1fr) 330px; } .mega-spalten { padding: 24px 18px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mega-spalte { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mega-titel { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding: 2px 14px 8px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; } .dd-liste { display: flex; flex-direction: column; gap: 2px; } .dd-liste--rand { padding: 14px; } .dd-link { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; text-decoration: none; color: var(--kopf); transition: background-color .12s ease; } .dd-link:hover, .dd-link:focus-visible { background: var(--hell); color: var(--kopf); } .dd-link[aria-current="page"] { background: var(--hell); box-shadow: inset 3px 0 0 var(--navy); } .dd-link-text { display: flex; flex-direction: column; gap: 3px; } .dd-link-text b { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .dd-link-text > span { font-size: 13.5px; line-height: 1.45; color: var(--leise); } .mega-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 32px; background: var(--hell); border-top: 1px solid var(--linie); font-size: 14.5px; } .mega-fuss .link { font-size: 15px; } .vorschau { background: var(--tief); color: #FFFFFF; padding: 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .vorschau-ober, .dd-karte-ober { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav-text); } .vorschau-prisma { width: 124px; height: 66px; display: block; } .vorschau-prisma .v1 { fill: var(--nacht); } .vorschau-prisma .v2 { fill: var(--navy-hover); } .vorschau-prisma .v3 { fill: var(--mittel); } .vorschau-prisma .vo { fill: var(--lav); } .vorschau-prisma .vi { fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vorschau.neu .vorschau-prisma, .vorschau.neu .vorschau-titel { animation: mm-auf .25s ease; } @keyframes mm-auf { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } } .vorschau-titel { font-size: 21px; font-weight: 600; line-height: 1.25; } .vorschau-text { font-size: 14.5px; line-height: 1.55; color: var(--lav); } .vorschau .knopf { margin-top: auto; align-self: flex-start; } .dd-karte { padding: 22px; display: flex; flex-direction: column; gap: 12px; } .dd-karte--navy { background: var(--navy); color: #FFFFFF; } .dd-karte--navy .dd-karte-ober { color: var(--lav); } .dd-tel { color: #FFFFFF; text-decoration: none; display: flex; flex-direction: column; gap: 2px; } .dd-tel span { font-size: 13px; color: var(--lav); } .dd-tel b { font-size: 21px; font-weight: 600; } .dd-tel:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .dd-mail { color: #FFFFFF; font-size: 14.5px; word-break: break-word; } .dd-mail:hover { color: #FFFFFF; } .dd-zeiten { font-size: 13.5px; line-height: 1.5; color: var(--lav); } .dd-karte .knopf { min-height: 44px; font-size: 14.5px; margin-top: 4px; } .dd-karte--person { background: var(--hell); padding: 20px 20px 0; gap: 6px; position: relative; overflow: hidden; } .dd-karte--person .dd-karte-ober { color: var(--leise); } .dd-person-name { font-size: 18px; font-weight: 600; color: var(--kopf); } .dd-person-tel { font-size: 16px; font-weight: 600; text-decoration: none; position: relative; z-index: 1; } .dd-person-hex { position: absolute; right: -20px; bottom: -10px; width: 170px; height: 190px; background: var(--lav); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .dd-person-bild { position: relative; align-self: flex-end; height: 170px; width: auto; margin-top: 4px; } .kopf-rechts { display: flex; align-items: center; gap: 18px; } .kopf-tel { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; color: var(--kopf); } .kopf-tel span { font-size: 12px; color: var(--leise); } .kopf-tel b { font-size: 17px; font-weight: 600; } .kopf-mobil { display: none; align-items: center; gap: 8px; } .kopf-mobil-tel { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--lav); } .mobil > summary { list-style: none; } .mobil > summary::-webkit-details-marker { display: none; } .burger { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #FFFFFF; cursor: pointer; } .burger .sym { width: 22px; height: 22px; stroke-width: 2; } .burger-zu, .mobil[open] .burger-auf { display: none; } .mobil:not([open]) .mobil-panel { display: none; } .mobil[open] .burger-zu { display: block; } .mobil-panel { position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; border-top: 1px solid var(--linie); box-shadow: 0 24px 40px -24px rgba(14, 21, 51, .4); padding: 6px var(--seite) 22px; display: flex; flex-direction: column; max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; } .mobil-gruppe { border-bottom: 1px solid var(--linie); } .mobil-gruppe > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 4px; font-size: 17px; font-weight: 600; color: var(--kopf); cursor: pointer; } .mobil-gruppe > summary::-webkit-details-marker { display: none; } .mobil-pfeil { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s ease; } .mobil-gruppe[open] .mobil-pfeil { transform: rotate(180deg); } .mobil-gruppe ul { display: flex; flex-direction: column; padding-bottom: 10px; } .mobil-link { display: flex; gap: 12px; align-items: center; padding: 12px 4px; text-decoration: none; color: var(--kopf); } .mobil-link:hover { background: var(--hell); } .mobil-link[aria-current="page"] { background: var(--hell); box-shadow: inset 3px 0 0 var(--navy); } .mobil-link > span:last-child { display: flex; flex-direction: column; gap: 2px; } .mobil-link b { font-size: 15.5px; font-weight: 600; } .mobil-link b + span { font-size: 13.5px; color: var(--leise); line-height: 1.4; } .mobil-einzeln { display: flex; align-items: center; min-height: 56px; padding: 0 4px; font-size: 17px; font-weight: 600; color: var(--kopf); text-decoration: none; border-bottom: 1px solid var(--linie); } .mobil-einzeln[aria-current="page"] { color: var(--navy); } .mobil-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; } .mobil-knoepfe .knopf { font-size: 15px; padding: 0 12px; } /* ------------------------------------------------------------------------------------------------ Startseite: Kopf und Wabe */ .held-start { position: relative; overflow: hidden; background: #FFFFFF; } .held-start-flaeche { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; background: var(--hell); } .held-start-muster { position: absolute; right: -120px; top: -80px; width: 760px; height: auto; opacity: .55; fill: none; stroke: var(--linie); stroke-width: 1; } .held-start-innen { padding-top: 72px; padding-bottom: 88px; display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: center; } .held-start-text { flex: 1 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .held-start h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; font-weight: 600; letter-spacing: -.024em; color: var(--kopf); } .vorspann { font-size: 19px; line-height: 1.65; color: var(--text); max-width: 600px; } .fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-top: 1px solid var(--linie); padding-top: 22px; margin-top: 6px; max-width: 600px; } .fakten div { display: flex; flex-direction: column; gap: 4px; } .fakten dt { font-size: 15px; font-weight: 600; color: var(--kopf); } .fakten dd { font-size: 14px; line-height: 1.45; color: var(--leise); } .held-start-wabe { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; position: relative; } .wabe-svg { display: block; width: 100%; height: auto; overflow: visible; } .wabe-schatten { fill: var(--tief); opacity: .05; } .prisma { transition: transform .28s cubic-bezier(.2, .7, .2, 1); } .prisma .p1 { fill: var(--lav-dunkel); } .prisma .p2 { fill: var(--lav); } .prisma .p3 { fill: var(--linie); } .prisma .po { fill: #FFFFFF; stroke: var(--lav-dunkel); stroke-width: 1.2; transition: fill .2s ease; } .prisma .pi { fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .prisma .pt { fill: var(--navy); font-family: var(--schrift); font-size: 12.5px; font-weight: 600; text-anchor: middle; } /* Paket 354: Unterseiten zeichnen das Wabenbild wie die Startseite (Schrift 12,5 statt 11) */ .wabe--gebiet .prisma .pt { font-size: 12px; } .prisma .led { fill: var(--gruen); } .wabe-svg a { cursor: pointer; } .wabe-svg a:hover .prisma, .wabe--gebiet .prisma:hover { transform: translateY(-9px); } .wabe-svg a:hover .prisma .po, .wabe--gebiet .prisma:hover .po { fill: var(--hell); } .wabe--gebiet .prisma { cursor: pointer; } .prisma.aktiv { transform: translateY(-18px); } .prisma.aktiv.prisma--mitte { transform: translateY(-10px); } .prisma.aktiv .p1 { fill: var(--nacht); } .prisma.aktiv .p2 { fill: var(--tief); } .prisma.aktiv .p3 { fill: var(--navy-hover); } .prisma.aktiv .po { fill: var(--navy); stroke: var(--navy); } .prisma.aktiv .pi { stroke: #FFFFFF; } .prisma.aktiv .pt { fill: #FFFFFF; } .prisma--sitz .p1 { fill: var(--tief); } .prisma--sitz .p2 { fill: var(--navy); } .prisma--sitz .p3 { fill: var(--navy-hover); } .prisma--sitz .po { fill: var(--mittel); stroke: var(--mittel); } .prisma--sitz .pt { fill: #FFFFFF; } .prisma--strich .po { fill: var(--hell); stroke: var(--mittel); stroke-dasharray: 5 4; } .wabe figcaption { font-size: 14px; color: var(--leise); text-align: center; margin-top: 14px; } .wabe figcaption b { color: var(--kopf); font-weight: 600; } .wabe-info { position: relative; } .wabe-karte { background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(14, 21, 51, .55), var(--rand); padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .wabe-karte + .wabe-karte { margin-top: 12px; } .wabe-karte-text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 220px; min-width: 0; } .wabe-karte-titel { font-size: 20px; font-weight: 600; color: var(--kopf); } .wabe-karte-text > p:not(.wabe-karte-titel) { font-size: 15.5px; line-height: 1.55; } .wabe-karte-punkte { display: flex; flex-wrap: wrap; gap: 6px 18px; } .wabe-karte-punkte li { display: flex; gap: 7px; align-items: center; font-size: 14px; } .wabe-karte-punkte .sym { width: 15px; height: 15px; color: var(--navy); stroke-width: 2.4; } .wabe-karte .knopf { flex: none; align-self: center; } /* Auswahl-Chips (Optionsfelder) */ .wahl-chips, .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips--mitte { justify-content: center; } .wahl-chips input, .chips input, .umschalter input, .kacheln input, .reiter-liste input, .stufen-liste input, .itcheck-antworten input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .wahl-chips label, .chips label { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; padding: 0 14px; min-height: 40px; cursor: pointer; background: #FFFFFF; color: var(--navy); box-shadow: inset 0 0 0 1px var(--lav); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .chips--mitte label { font-size: 13.5px; min-height: 38px; padding: 0 12px; } .wahl-chips label:hover, .chips label:hover { box-shadow: inset 0 0 0 2px var(--navy); } .wahl-chips input:checked + label, .chips input:checked + label { background: var(--navy); color: #FFFFFF; box-shadow: none; } .wahl-chips input:focus-visible + label, .chips input:focus-visible + label, .umschalter input:focus-visible + label, .kacheln input:focus-visible + label, .reiter-liste input:focus-visible + label, .stufen-liste input:focus-visible + label, .itcheck-antworten input:focus-visible + label { outline: 2px solid var(--fokus); outline-offset: 2px; } /* ------------------------------------------------------------------------------------------------ Seitenkopf der Unterseiten */ .held-sub { position: relative; background: #FFFFFF; border-bottom: 1px solid var(--linie); } .held-sub-flaeche { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: var(--hell); } .held-sub--rot .held-sub-flaeche { background: var(--rot-hell); } .held-sub-innen { padding-top: 28px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 40px; } .held-sub--schmal .held-sub-innen { gap: 36px; padding-bottom: 72px; } .held-sub-raster { display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: center; } .held-sub--oben .held-sub-raster { align-items: flex-start; } .held-sub-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; } .held-sub--schmal .held-sub-text { max-width: 820px; gap: 16px; } .held-sub h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.022em; color: var(--kopf); } .held-sub-rechts { flex: 1 1 460px; min-width: 0; } .held-hinweis { font-size: 15px; line-height: 1.6; color: var(--leise); max-width: 520px; } .held-hinweis strong { color: var(--navy); } .krumen { font-size: 14px; } .krumen ol { display: flex; flex-wrap: wrap; gap: 8px; color: var(--leise); } .krumen li { display: flex; gap: 8px; } .krumen li + li::before { content: "/"; color: #A3A6C9; } .krumen a { color: var(--leise); text-decoration: none; } .krumen a:hover { color: var(--navy); text-decoration: underline; } .krumen [aria-current="page"] { color: var(--kopf); font-weight: 500; } .karte-schwebend { background: #FFFFFF; box-shadow: var(--schatten), var(--rand); padding: 30px; display: flex; flex-direction: column; gap: 22px; } /* Ueber uns: Foto im Sechseck mit Ansprechpartner */ .held-bild { position: relative; padding: 0 0 40px 30px; } .held-bild-hex { position: absolute; left: 0; top: 40px; width: 88%; aspect-ratio: 1 / 1; background: var(--lav); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); } .held-bild-foto { position: relative; width: 92%; aspect-ratio: 1 / 1; object-fit: cover; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); } .held-person { position: absolute; left: 0; bottom: 0; width: 340px; max-width: 92%; background: #FFFFFF; box-shadow: 0 24px 40px -20px rgba(14, 21, 51, .6), var(--rand); padding: 18px 18px 18px 166px; min-height: 116px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .held-person p { font-size: 14px; color: var(--leise); } .held-person .held-person-name { font-size: 17px; font-weight: 600; color: var(--kopf); } .held-person a { font-size: 16px; font-weight: 600; text-decoration: none; } .held-person img { position: absolute; left: 6px; bottom: 0; height: 150px; width: auto; } /* ------------------------------------------------------------------------------------------------ Abschnitte */ .sek { background: #FFFFFF; } .sek > .huelle { padding-top: 84px; padding-bottom: 84px; } .sek--hell { background: var(--hell); } .sek--eng > .huelle { padding-top: 48px; padding-bottom: 48px; } .sek--mittel > .huelle { padding-top: 72px; padding-bottom: 72px; } .sek--oben > .huelle { padding-top: 56px; } .sek--hell + .sek--hell > .huelle, .sek--weiss + .sek--weiss > .huelle { padding-top: 0; } .sek--weiss.sek--eng + .sek--weiss > .huelle { padding-top: 48px; } .sek--weiss + .sek--weiss.sek--eng > .huelle { padding-top: 0; } .sek-kopf { margin-bottom: 44px; } .sek-kopf-text { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .sek-kopf--rechts { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; } .sek h2, .faq h2, .zusagen h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.14; font-weight: 600; letter-spacing: -.016em; color: var(--kopf); } .lead { font-size: 18px; line-height: 1.65; color: var(--text); max-width: 640px; } .text-gross { font-size: 17px; line-height: 1.7; color: var(--text); } .text-mittel { font-size: 16.5px; line-height: 1.7; color: var(--text); } .klein { font-size: 15.5px; line-height: 1.6; } /* Karten */ .karten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .karten--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .karten--2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } .karte { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #FFFFFF; box-shadow: var(--rand); text-decoration: none; color: var(--text); } .karte h3 { font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--kopf); } .karte p { font-size: 15.5px; line-height: 1.6; color: var(--text); } .karte .link { margin-top: auto; font-size: 15px; } .karte--link { transition: box-shadow .2s ease, transform .2s ease; } .karte--link:hover { box-shadow: 0 22px 44px -26px rgba(24, 34, 74, .5), inset 0 0 0 1px var(--lav); transform: translateY(-3px); color: var(--text); } .karte--dunkel { background: var(--navy); box-shadow: none; } .karte--dunkel h3 { color: #FFFFFF; } .karte--dunkel p { color: #E3E1F0; } .karte--dunkel .karte-nummer { color: var(--lav); } .karte-nummer { font-size: 13px; color: var(--leise); } .karte-ersatz { margin-top: auto; font-size: 14px !important; color: var(--leise) !important; } .karte .haken li { font-size: 15.5px; } /* Schritte */ .schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px 24px; } .schritt { display: flex; flex-direction: column; gap: 14px; } .schritt-kopf { display: flex; align-items: center; } .schritt-nr { flex: none; width: 46px; height: 52px; background: var(--navy); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 15px; font-weight: 500; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .schritt-linie { flex: 1; height: 1px; background: var(--lav); margin-left: 12px; } .schritt:last-child .schritt-linie { background: transparent; } .schritt h3 { font-size: 19px; font-weight: 600; color: var(--kopf); } .schritt p { font-size: 15.5px; line-height: 1.6; } .wege-unten { margin-top: 52px; display: flex; flex-direction: column; gap: 16px; } .wege-unten-titel { font-size: 16px; font-weight: 600; color: var(--kopf); } .wege-unten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; } .weg-karte { display: flex; gap: 14px; align-items: center; padding: 20px; background: #FFFFFF; box-shadow: var(--rand); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .weg-karte:hover { box-shadow: 0 22px 44px -26px rgba(24, 34, 74, .5), inset 0 0 0 1px var(--lav); transform: translateY(-3px); } .weg-karte > span:last-child { display: flex; flex-direction: column; gap: 3px; } .weg-karte b { font-size: 17px; font-weight: 600; color: var(--kopf); } .weg-karte b + span { font-size: 14.5px; color: var(--leise); } /* Zweispaltig und Kasten */ .zwei { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; } .zwei--mitte { align-items: center; } .zwei-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; } .zwei-rechts { flex: 1 1 380px; min-width: 0; } .zwei-rechts--breit { flex: 1 1 520px; } .zwei-text .haken { margin-top: 2px; } .kasten { background: var(--hell); padding: 30px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--rand); } .sek--hell .kasten { background: #FFFFFF; } .sek--hell .kasten .hex--weiss { background: var(--hell); } .kasten-kopf { display: flex; align-items: center; gap: 14px; } .kasten h3, .kasten h4 { font-size: 19px; font-weight: 600; color: var(--kopf); } .kasten p { font-size: 15.5px; line-height: 1.6; } .kasten--dunkel, .sek--hell .kasten--dunkel { background: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } .kasten--dunkel h3 { color: #FFFFFF; } .kasten--dunkel p { color: #E3E1F0; } .kasten--dunkel strong { color: #FFFFFF; } /* Textspalten */ .textspalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px 64px; } .textspalte { display: flex; flex-direction: column; gap: 14px; } .textspalte h3 { font-size: 23px; line-height: 1.3; font-weight: 600; color: var(--kopf); } .textspalte .kasten { margin-top: 8px; } /* Hinweis-Band und Schwestermarke */ .band { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; padding: 30px 34px; background: var(--hell); box-shadow: var(--rand); } .sek--hell .band { background: #FFFFFF; } .band--dunkel { background: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); } .band--rot, .sek--hell .band--rot { background: var(--rot-hell); box-shadow: inset 0 0 0 1px var(--rot-linie); } .band-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .band-titel, .sek .band-titel { font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--kopf); line-height: 1.3; } .band-text p { font-size: 16px; line-height: 1.6; } .band--dunkel .band-titel, .sek .band--dunkel .band-titel { color: #FFFFFF; } .band--dunkel .band-text p { color: var(--lav); } .band-knopf { flex: none; } .marke-band { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; padding: 28px 32px; background: #FFFFFF; box-shadow: var(--rand); } .marke-etikett { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); padding: 6px 10px; background: var(--hell); } .marke-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .marke-titel, .sek .marke-titel { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--kopf); line-height: 1.35; } .marke-text p { font-size: 15.5px; line-height: 1.6; } /* Tabellen */ .tabelle-rahmen { overflow-x: auto; background: #FFFFFF; box-shadow: var(--rand); -webkit-overflow-scrolling: touch; } .tabelle { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; color: var(--text); } .tabelle th, .tabelle td { text-align: left; padding: 16px 22px; vertical-align: top; } .tabelle thead th { padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--kopf); } .tabelle thead th:first-child { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); width: 22%; } .tabelle tbody tr { border-top: 1px solid var(--linie); } .tabelle tbody th { font-weight: 600; color: var(--kopf); } .tabelle thead th.betont { background: var(--navy); color: #FFFFFF; } .tabelle td.betont { background: var(--hell); color: var(--kopf); font-weight: 500; } .fussnote { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--leise); max-width: 900px; } /* Haeufige Fragen */ .faq { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-top: 96px; padding-bottom: 96px; } .faq-kopf { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .faq-kopf p:last-child { font-size: 16px; line-height: 1.6; color: var(--leise); } .faq-kopf a { font-weight: 600; white-space: nowrap; } .faq-liste { flex: 2 1 560px; min-width: 0; border-top: 1px solid var(--linie); } .faq-frage { border-bottom: 1px solid var(--linie); } .faq-frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 600; color: var(--kopf); line-height: 1.4; } .faq-frage summary::-webkit-details-marker { display: none; } .faq-plus { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--hell); color: var(--navy); transition: transform .2s ease; } .faq-plus .sym { width: 16px; height: 16px; stroke-width: 2.2; } .faq-frage[open] .faq-plus { transform: rotate(45deg); } .faq-antwort { padding: 0 56px 24px 0; max-width: 820px; } .faq-antwort p { font-size: 16.5px; line-height: 1.7; } .sek--hell + .sek--weiss .faq, .wege-band + .sek--weiss .faq { padding-top: 96px; } /* Passt dazu */ .verwandt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; margin-top: 22px; } .verwandt-karte { display: flex; gap: 16px; align-items: center; padding: 22px; background: #FFFFFF; box-shadow: var(--rand); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; } .verwandt-karte:hover { box-shadow: 0 22px 44px -26px rgba(24, 34, 74, .5), inset 0 0 0 1px var(--lav); transform: translateY(-3px); } .verwandt-text { display: flex; flex-direction: column; gap: 4px; flex: 1; } .verwandt-text b { font-size: 17px; font-weight: 600; color: var(--kopf); } .verwandt-text span { font-size: 14.5px; line-height: 1.5; color: var(--leise); } .verwandt-pfeil { color: var(--navy); } /* Abschlussband */ .cta { background: var(--navy); position: relative; overflow: hidden; } .cta-muster { position: absolute; right: -40px; top: -30px; width: 460px; height: auto; opacity: .16; fill: none; stroke: var(--lav); stroke-width: 1.2; } .cta-innen { padding-top: 80px; padding-bottom: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; } .cta-text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .cta h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.14; font-weight: 600; letter-spacing: -.016em; color: #FFFFFF; } .cta p { font-size: 18px; line-height: 1.6; color: var(--lav); } /* ------------------------------------------------------------------------------------------------ Startseite: Bausteine */ .wege-band { background: var(--tief); } .wege { padding-top: 40px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; } .weg { display: flex; flex-direction: column; gap: 14px; padding: 26px; background: var(--navy); color: #FFFFFF; text-decoration: none; min-height: 190px; transition: background-color .15s ease; } .weg:hover { background: var(--navy-hover); color: #FFFFFF; } .weg-kopf { display: flex; justify-content: space-between; align-items: center; } .weg-pfeil { color: var(--lav); } .weg-titel { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .weg-text { font-size: 15px; line-height: 1.55; color: var(--lav); } .weg-tel { margin-top: auto; font-size: 20px; font-weight: 600; } .zusagen { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: stretch; } .person-karte { flex: 1 1 380px; min-width: 0; background: var(--navy); position: relative; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; } .person-muster { position: absolute; left: -40px; top: -20px; width: 420px; height: auto; opacity: .25; fill: none; stroke: var(--lav); stroke-width: 1.2; } .person-text { position: relative; padding: 34px 34px 0; display: flex; flex-direction: column; gap: 10px; } .person-ober { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); } .person-name { font-size: 30px; font-weight: 600; color: #FFFFFF; letter-spacing: -.01em; } .person-tel { font-size: 20px; font-weight: 600; color: #FFFFFF; text-decoration: none; } .person-tel:hover { color: #FFFFFF; text-decoration: underline; } .person-mail { font-size: 15.5px; color: var(--lav); } .person-mail:hover { color: #FFFFFF; } .person-bild { position: relative; width: 78%; align-self: flex-end; margin-top: 16px; } .zusagen-liste { flex: 1.4 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .zusagen-liste ol { border-top: 1px solid var(--linie); margin-top: 10px; } .zusagen-liste li { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--linie); } .zusagen-liste .nr { flex: none; font-family: var(--mono); font-size: 14px; color: var(--mittel); padding-top: 3px; } .zusagen-liste li > span:last-child { display: flex; flex-direction: column; gap: 6px; } .zusagen-liste b { font-size: 18px; font-weight: 600; color: var(--kopf); } .zusagen-liste b + span { font-size: 15.5px; line-height: 1.6; } .teaser-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 16px; } .teaser { text-decoration: none; padding: 40px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; min-height: 340px; transition: box-shadow .2s ease, transform .2s ease; } .teaser:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(24, 34, 74, .5); } .teaser--dunkel { background: var(--tief); color: #FFFFFF; } .teaser--dunkel:hover { color: #FFFFFF; } .teaser--dunkel p:not(.ober) { font-size: 16.5px; line-height: 1.6; color: var(--lav); max-width: 440px; } .teaser-muster { position: absolute; right: -30px; bottom: -40px; width: 260px; height: auto; opacity: .2; fill: none; stroke: var(--lav); stroke-width: 1.5; } .teaser-titel, .sek .teaser-titel { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; max-width: 440px; } .teaser--dunkel .teaser-titel { color: #FFFFFF; } .teaser-knopf { margin-top: auto; align-self: flex-start; position: relative; } .teaser--hell { background: #FFFFFF; box-shadow: var(--rand); flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; } .teaser--hell .teaser-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .teaser--hell p:not(.ober) { font-size: 16px; line-height: 1.6; color: var(--text); } .minikarte { flex: 1 1 220px; min-width: 0; max-width: 360px; margin: 0 auto; display: block; } .minikarte .mk { stroke-width: 1.3; fill: #FFFFFF; stroke: var(--lav); } .minikarte .mk--sitz { fill: var(--navy); stroke: var(--navy); } .minikarte .mk--fern { fill: var(--hell); stroke: var(--mittel); stroke-dasharray: 4 3; } .minikarte .mkt { font-family: var(--schrift); font-size: 9.5px; font-weight: 600; text-anchor: middle; fill: var(--navy); } .minikarte .mkt--sitz { fill: #FFFFFF; } /* ------------------------------------------------------------------------------------------------ Umschalter und Module */ .umschalter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--hell); box-shadow: var(--rand); align-self: flex-start; } .sek--hell .umschalter { background: #FFFFFF; } .umschalter label { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; padding: 0 18px; min-height: 44px; cursor: pointer; color: var(--navy); transition: background-color .15s ease, color .15s ease; } .umschalter label:hover { box-shadow: inset 0 0 0 2px var(--navy); } .umschalter input:checked + label { background: var(--navy); color: #FFFFFF; } .pille { flex: none; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; line-height: 1.3; } .pille--offen { background: var(--rot-zart); color: var(--rot-dunkel); } .pille--gut { background: var(--navy); color: #FFFFFF; } .pille--rot { background: var(--rot); color: #FFFFFF; } .fazit-rahmen { margin-top: 0; } .fazit { font-size: 16px; line-height: 1.6; color: var(--kopf); padding: 16px 18px; background: var(--hell); box-shadow: inset 4px 0 0 var(--navy); } .sek--hell .fazit { background: #FFFFFF; } .fazit + .fazit { margin-top: 10px; } .frage-zeile { font-size: 15px; font-weight: 600; color: var(--kopf); } /* Ohne/mit Betreuung */ .uk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px; } .uk-karte { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: #FFFFFF; box-shadow: var(--rand); transition: box-shadow .2s ease; } .uk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .uk-kopf h3 { font-size: 18px; font-weight: 600; color: var(--kopf); } .uk-karte p { font-size: 15.5px; line-height: 1.6; } /* Netzbereiche */ .netz { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--hell); box-shadow: inset 0 0 0 1px var(--lav); transition: background-color .2s ease, box-shadow .2s ease; } .netz-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .netz-name { font-size: 13px; color: var(--leise); } .netz-fw { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--kopf); } .netz-zonen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .zone { display: flex; flex-direction: column; gap: 8px; padding: 18px; min-height: 104px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--navy); transition: box-shadow .2s ease; } .zone--quelle { box-shadow: inset 0 0 0 1.5px var(--rot); } .zone-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .zone-kopf b { font-size: 16px; font-weight: 600; color: var(--kopf); } .zone p { font-size: 14px; line-height: 1.5; } .zone .pille { font-size: 12px; padding: 3px 9px; } /* 3-2-1 */ .kopien { display: flex; flex-direction: column; gap: 12px; } .kopie { display: flex; gap: 16px; align-items: center; padding: 16px 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--navy); transition: box-shadow .2s ease, opacity .2s ease; flex-wrap: wrap; } .kopie-nr { flex: none; width: 46px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--navy); color: #FFFFFF; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .kopie-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .kopie-text b { font-size: 17px; font-weight: 600; color: var(--kopf); } .kopie-text span { font-size: 14.5px; line-height: 1.5; } /* Entscheidungstabelle */ .tabelle--wahl thead th:not(:first-child) { font-size: 17px; background: var(--hell); color: var(--kopf); transition: background-color .2s ease, color .2s ease; } .tabelle--wahl td { transition: background-color .2s ease; } .wahl > .fazit-rahmen { margin-top: 16px; } /* Reiter */ .reiter { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; } .reiter-liste { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .reiter-liste label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; padding: 0 18px; min-height: 58px; cursor: pointer; background: var(--hell); color: var(--navy); transition: background-color .15s ease, color .15s ease; } .reiter-liste label:hover { box-shadow: inset 0 0 0 2px var(--navy); } .reiter-liste input:checked + label { background: var(--navy); color: #FFFFFF; } .reiter-label { display: flex; align-items: center; gap: 12px; } .reiter-pfeil { width: 16px; height: 16px; } .reiter-flaeche { flex: 1 1 560px; min-width: 0; } .reiter-panel { background: #FFFFFF; box-shadow: var(--rand); padding: 36px; display: flex; flex-direction: column; gap: 18px; } .reiter-panel + .reiter-panel { margin-top: 12px; } .reiter-panel h3 { font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--kopf); } /* Stufen (Hardware) */ .stufen { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: stretch; } .stufen-liste { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .stufen-liste label { width: 100%; display: flex; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; background: #FFFFFF; color: var(--kopf); box-shadow: var(--rand); } .stufen-liste input:checked + label { background: var(--hell); box-shadow: inset 4px 0 0 var(--navy); } .sek--hell .stufen-liste input:checked + label { background: #FFFFFF; box-shadow: inset 4px 0 0 var(--navy), var(--rand); } .stufe-nr { flex: none; width: 40px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--linie); color: var(--navy); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color .2s ease, color .2s ease; } .stufe-text { display: flex; flex-direction: column; gap: 3px; text-align: left; } .stufe-text b { font-size: 17px; font-weight: 600; } .stufe-text span { font-size: 14px; color: var(--leise); } .stufe-flaeche { flex: 1.3 1 480px; min-width: 0; background: var(--navy); color: #FFFFFF; position: relative; overflow: hidden; } .stufe-muster { position: absolute; right: -40px; bottom: -40px; width: 240px; height: auto; opacity: .14; fill: none; stroke: var(--lav); stroke-width: 2; } .stufe-panel { padding: 36px; display: flex; flex-direction: column; gap: 16px; position: relative; height: 100%; } .stufe-zaehler { font-size: 14px; color: var(--lav); } .stufe-panel h3 { font-size: 28px; line-height: 1.2; font-weight: 600; color: #FFFFFF; } .stufe-panel p:not(.stufe-zaehler) { font-size: 17px; line-height: 1.7; color: #E3E1F0; max-width: 560px; } .stufe-knoepfe { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; padding-top: 8px; } /* IT-Check */ .itcheck-fortschritt { flex-direction: column; gap: 8px; max-width: 360px; margin-bottom: 28px; } .itcheck-fortschritt p { font-size: 14px; color: var(--leise); } .balken { height: 8px; background: var(--linie); position: relative; overflow: hidden; } .balken span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--navy); transform-origin: left center; transform: scaleX(0); transition: transform .25s ease; } .itcheck-raster { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; } .itcheck-fragen { flex: 1.7 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .itcheck-frage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; padding: 18px 20px; background: #FFFFFF; box-shadow: var(--rand); transition: box-shadow .2s ease; } .itcheck-frage:has(.a-ja:checked) { box-shadow: inset 0 0 0 1px var(--lav), inset 4px 0 0 var(--navy); } .itcheck-frage:has(.a-nein:checked), .itcheck-frage:has(.a-weiss:checked) { box-shadow: inset 0 0 0 1px var(--rot-linie), inset 4px 0 0 #D92D20; } .itcheck-frage-text { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 340px; min-width: 0; } .itcheck-frage-text .nr { flex: none; font-size: 14px; color: var(--mittel); padding-top: 2px; } .itcheck-frage-text > span:last-child { display: flex; flex-direction: column; gap: 4px; } .itcheck-frage-text b { font-size: 16.5px; font-weight: 600; color: var(--kopf); line-height: 1.4; } .itcheck-frage-text b + span { font-size: 14px; color: var(--leise); } .itcheck-antworten { display: flex; gap: 6px; flex: none; } .itcheck-antworten label { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; padding: 0 14px; min-height: 44px; cursor: pointer; background: var(--hell); color: var(--navy); box-shadow: var(--rand); } .itcheck-antworten label:hover { box-shadow: inset 0 0 0 2px var(--navy); } .itcheck-antworten .a-ja:checked + label { background: var(--navy); color: #FFFFFF; box-shadow: none; } .itcheck-antworten .a-nein:checked + label, .itcheck-antworten .a-weiss:checked + label { background: var(--rot); color: #FFFFFF; box-shadow: none; } .itcheck-ergebnis { flex: 1 1 340px; min-width: 0; background: var(--navy); color: #FFFFFF; padding: 30px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; } .itcheck-ober { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); } .itcheck-zahl { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em; } .itcheck-von { font-size: 18px; font-weight: 500; color: var(--lav); letter-spacing: 0; } .itcheck-text { font-size: 15.5px; line-height: 1.6; color: #E3E1F0; } .itcheck-offen { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--mittel); padding-top: 14px; } .itcheck-offen li { display: flex; } .itcheck-offen a, .itcheck-offen li > span { display: flex; justify-content: space-between; gap: 10px; width: 100%; color: #FFFFFF; text-decoration: none; font-size: 15px; line-height: 1.45; padding: 6px 0; } .itcheck-offen a:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; } .itcheck-ziel { flex: none; color: var(--lav); display: inline-flex; align-items: center; gap: 6px; } .itcheck-ziel .sym { width: 14px; height: 14px; } .itcheck-hinweis { font-size: 13px; line-height: 1.5; color: var(--lav); } .itcheck-ergebnis .knopf { margin-top: 6px; } /* Formulare */ .formular { color: var(--text); } .formular-titel { font-size: 21px; font-weight: 600; color: var(--kopf); } .wahl-feld { display: flex; flex-direction: column; gap: 10px; } .wahl-feld legend { font-size: 15px; font-weight: 600; color: var(--kopf); margin-bottom: 10px; } .anliegen { counter-reset: schritt; } .anliegen .wahl-feld legend::before { counter-increment: schritt; content: counter(schritt) " · "; } .anliegen-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .anliegen-kopf h2 { font-size: 21px; font-weight: 600; color: var(--kopf); letter-spacing: 0; } .anliegen-kopf p { font-size: 13px; color: var(--leise); } .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kacheln--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .kacheln label { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 500; text-align: left; padding: 12px; min-height: 76px; cursor: pointer; background: var(--hell); color: var(--navy); box-shadow: var(--rand); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; line-height: 1.3; } .kacheln label:hover { box-shadow: inset 0 0 0 2px var(--navy); } .kacheln label .sym { width: 22px; height: 22px; } .kacheln label b { font-size: 15px; font-weight: 600; } .kacheln label b + span { font-size: 13px; opacity: .85; } .kacheln label:has(b) { gap: 2px; min-height: 64px; } .kacheln input:checked + label { background: var(--navy); color: #FFFFFF; box-shadow: none; } .kacheln--2 label { min-height: 48px; justify-content: center; font-size: 15px; font-weight: 600; padding: 0 12px; } .kacheln--rot label { background: var(--rot-hell); color: var(--rot-dunkel); box-shadow: inset 0 0 0 1px var(--rot-linie); font-size: 14.5px; font-weight: 600; } .kacheln--rot input:checked + label { background: var(--rot); color: #FFFFFF; } .kacheln--rot label:hover { box-shadow: inset 0 0 0 2px var(--rot); } .kacheln--schritt label { gap: 2px; font-size: 14.5px; font-weight: 600; padding: 10px 12px; min-height: 58px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--lav); } .kacheln--schritt label .mono { font-size: 12.5px; opacity: .8; font-weight: 400; } .alarm { background: var(--rot-hell); box-shadow: inset 0 0 0 1px var(--rot-linie), inset 4px 0 0 var(--rot); padding: 14px 18px; font-size: 15px; line-height: 1.5; color: var(--rot-text); } .alarm a { color: var(--rot-dunkel); font-weight: 600; } .alarm--knopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; } .alarm--knopf p { max-width: 340px; } .alarm--knopf .knopf { color: #FFFFFF; } .felder { display: grid; gap: 12px; } .felder--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .felder--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .feld label { font-size: 13.5px; font-weight: 500; color: var(--text); } .feld input, .feld textarea, .feld select { font-size: 16px; padding: 0 14px; min-height: 50px; border: 1.5px solid var(--lav); background: #FFFFFF; color: var(--kopf); width: 100%; border-radius: 0; } .feld textarea { padding: 12px 14px; min-height: 76px; resize: vertical; line-height: 1.5; } #k-nachricht { min-height: 120px; } .feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); } .feld--fehler input, .feld--fehler textarea { border-color: var(--rot); } .feld-fehler { font-size: 14px; color: var(--rot-dunkel); } .pflicht { color: var(--rot); } .optional { color: var(--leise); font-weight: 400; } .feld--haken { gap: 4px; } .haken-option { display: flex; gap: 12px; align-items: flex-start; font-size: 15px !important; line-height: 1.5; cursor: pointer; } .haken-option input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--navy); } .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .formular-meldung { background: #FFF1DC; color: #6B3A00; padding: 12px 16px; font-size: 14.5px; line-height: 1.5; } .formular-meldung--fehler { background: var(--rot-hell); color: var(--rot-text); box-shadow: inset 4px 0 0 var(--rot); } .formular-fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--linie); padding-top: 18px; } .formular-fuss p { font-size: 13px; line-height: 1.5; color: var(--leise); max-width: 320px; } .chips--klein label { min-height: 38px; font-size: 13.5px; } .wahl-feld--klein legend { font-size: 14px; margin-bottom: 8px; } /* Notfall */ .notfall-karte { box-shadow: var(--schatten), inset 0 0 0 1px var(--rot-linie); gap: 18px; } .notfall-titel, .held-sub .notfall-titel { font-size: 20px; font-weight: 600; color: var(--kopf); letter-spacing: 0; line-height: 1.3; } .notfall-fall { font-size: 15px; font-weight: 600; color: var(--rot-dunkel); margin-bottom: 4px; } .notfall-schritte { border-top: 1px solid var(--linie); } .notfall-schritte li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); } .notfall-nr { flex: none; width: 34px; height: 38px; background: var(--rot); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 14px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .notfall-schritte li > span:last-child { display: flex; flex-direction: column; gap: 4px; } .notfall-schritte b { font-size: 17px; font-weight: 600; color: var(--kopf); } .notfall-schritte b + span { font-size: 15px; line-height: 1.55; } /* Fernwartung schematisch */ .fernwartung { display: flex; flex-direction: column; gap: 14px; } .fenster { background: var(--tief); padding: 14px; box-shadow: 0 40px 80px -40px rgba(14, 21, 51, .7); } .fenster-innen { background: var(--hell); min-height: 330px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .fenster-leiste { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--linie); } .fenster-leiste .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--lav-dunkel); } .fenster-name { margin-left: 10px; font-size: 12px; color: var(--leise); } .fenster-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px; } .fenster-karte { display: flex; flex-direction: column; align-items: center; gap: 12px; background: #FFFFFF; padding: 26px 24px; box-shadow: 0 20px 40px -24px rgba(14, 21, 51, .45), var(--rand); max-width: 380px; } .fenster-titel { font-size: 19px; font-weight: 600; color: var(--kopf); text-align: center; } .fenster-karte p:not(.fenster-titel):not(.fenster-kennung) { font-size: 14.5px; line-height: 1.55; text-align: center; max-width: 320px; } .fenster-kennung { font-size: 26px; letter-spacing: .12em; color: var(--kopf); background: #FFFFFF; padding: 8px 16px; box-shadow: inset 0 0 0 1px var(--lav); } .fenster-knoepfe { display: flex; gap: 8px; } .fenster-knoepfe span { padding: 9px 16px; font-size: 14px; font-weight: 600; } .fk-rand { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); } .fk-voll { color: #FFFFFF; background: var(--navy); } .fenster-verbunden { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--navy); color: #FFFFFF; font-size: 13.5px; flex-wrap: wrap; } .fenster-verbunden > span:first-child { display: flex; align-items: center; gap: 8px; } .fenster-beenden { padding: 5px 10px; background: #FFFFFF; color: var(--kopf); font-weight: 600; } .fenster-hinweis { font-size: 13px; color: var(--leise); } /* Berater */ .berater { gap: 20px; } .berater-titel, .held-sub .berater-titel { font-size: 20px; font-weight: 600; color: var(--kopf); letter-spacing: 0; line-height: 1.3; } .berater-frage legend { font-size: 15px; font-weight: 600; color: var(--kopf); margin-bottom: 8px; } .berater-ergebnis { background: var(--navy); color: #FFFFFF; padding: 22px; display: flex; flex-direction: column; gap: 8px; } .berater-ober { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); } .empf { display: flex; flex-direction: column; gap: 6px; } .empf + .empf { border-top: 1px solid var(--mittel); padding-top: 12px; margin-top: 6px; } .empf-titel { font-size: 24px; font-weight: 600; line-height: 1.25; } .empf p:not(.empf-titel) { font-size: 15px; line-height: 1.55; color: #E3E1F0; } .empf-bedingung { font-size: 13.5px !important; color: var(--lav) !important; } /* Einsatzgebiet */ .gebiet { display: flex; flex-direction: column; gap: 18px; } .gebiet-karte { background: #FFFFFF; box-shadow: 0 30px 60px -40px rgba(14, 21, 51, .55), var(--rand); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .gebiet-karte + .gebiet-karte { margin-top: 10px; } .gebiet-titel { font-size: 19px; font-weight: 600; color: var(--kopf); } .gebiet-karte p:not(.gebiet-titel) { font-size: 15px; line-height: 1.6; } /* ------------------------------------------------------------------------------------------------ Kontaktseite */ .held-kontakt { background: var(--hell); border-bottom: 1px solid var(--linie); } .held-kontakt > .huelle { padding-top: 28px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 36px; } .held-kontakt-text { display: flex; flex-direction: column; gap: 16px; max-width: 760px; } .held-kontakt h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.022em; color: var(--kopf); } .kontakt-raster { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .kontakt-raster > .formular { flex: 1.6 1 560px; min-width: 0; padding: 32px; } .kontakt-seite { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .kontakt-karte { background: #FFFFFF; box-shadow: var(--rand); text-decoration: none; padding: 22px 26px; display: flex; gap: 14px; align-items: center; transition: box-shadow .2s ease, transform .2s ease; } .kontakt-karte:hover { box-shadow: 0 22px 44px -26px rgba(24, 34, 74, .5), inset 0 0 0 1px var(--lav); transform: translateY(-3px); } .kontakt-karte > span:last-child { display: flex; flex-direction: column; gap: 2px; } .kontakt-karte .klein { font-size: 13px; color: var(--leise); } .kontakt-karte b { font-size: 17px; font-weight: 600; color: var(--kopf); word-break: break-word; } .kontakt-karte--navy { background: var(--navy); color: #FFFFFF; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px; box-shadow: none; } .kontakt-karte--navy:hover { color: #FFFFFF; } .kontakt-karte-ober { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); } .kontakt-karte--navy b.kontakt-karte-tel { font-size: 30px; color: #FFFFFF; } .kontakt-karte--navy > span:last-child { font-size: 14.5px; color: var(--lav); } .kontakt-person { background: var(--hell); padding: 22px 26px 0; display: flex; gap: 16px; align-items: flex-end; overflow: hidden; box-shadow: var(--rand); } .kontakt-person > div { display: flex; flex-direction: column; gap: 4px; padding-bottom: 22px; } .kontakt-person .klein { font-size: 13px; color: var(--leise); } .kontakt-person b { font-size: 18px; font-weight: 600; color: var(--kopf); } .kontakt-person b + span { font-size: 14.5px; } .kontakt-person img { height: 130px; width: auto; margin-left: auto; } /* ------------------------------------------------------------------------------------------------ Redaktioneller Text */ .text { max-width: 820px; } .text h2 { font-size: 28px; line-height: 1.25; font-weight: 600; color: var(--kopf); margin: 40px 0 14px; letter-spacing: -.01em; } .text h2:first-child { margin-top: 0; } .text h3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--kopf); margin: 28px 0 10px; } .text p, .text li { font-size: 17px; line-height: 1.7; } .text p + p { margin-top: 14px; } .text ul, .text ol { margin: 14px 0; padding-left: 22px; } .text ul { list-style: disc; } .text ol { list-style: decimal; } .text li + li { margin-top: 6px; } .text a { text-decoration: underline; text-underline-offset: 3px; } .text--recht p, .text--recht li { font-size: 16px; } .stand { margin-top: 32px !important; font-size: 14px !important; color: var(--leise); } .danke-eilt { margin-top: 36px; font-size: 16px; } .danke-eilt a { font-weight: 600; } /* ------------------------------------------------------------------------------------------------ Fuss */ .fuss { background: var(--nacht); color: var(--lav); } .fuss-innen { padding-top: 72px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 52px; } .fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 40px 32px; } .fuss-marke { display: flex; flex-direction: column; gap: 18px; } .fuss-logo img { height: 44px; width: auto; } .fuss-marke p { font-size: 15px; line-height: 1.6; } .fuss a { color: #E3E1F0; text-decoration: none; } .fuss a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .fuss .fuss-tel { font-size: 22px; font-weight: 600; color: #FFFFFF; } .fuss-mail { font-size: 15px; } .fuss-spalte { display: flex; flex-direction: column; gap: 14px; } .fuss-titel { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lav-text); } .fuss-spalte ul { display: flex; flex-direction: column; gap: 9px; font-size: 15px; } .fuss-spalte a[aria-current="page"] { color: #FFFFFF; font-weight: 600; } .fuss-mitte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; border-top: 1px solid #24306A; padding-top: 28px; font-size: 14px; line-height: 1.6; } .fuss-mitte b { color: #FFFFFF; font-weight: 600; } .fuss-unten { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--lav-text); } .leiste { display: none; } /* ------------------------------------------------------------------------------------------------ Anpassungen */ @media (max-width: 1100px) { .held-sub-flaeche, .held-start-flaeche { display: none; } .held-sub-rechts, .held-start-wabe { flex-basis: 100%; } } @media (max-width: 1180px) { .hauptnav { gap: 24px; } .kopf-tel { display: none; } } @media (max-width: 1020px) { .hauptnav, .kopf-rechts { display: none; } .kopf-mobil { display: flex; } .kurzzeile-text { display: none; } .kurzzeile-innen { justify-content: flex-end; } .kopf-innen { min-height: 72px; } .logo img { height: 40px; } } @media (max-width: 760px) { .leiste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #FFFFFF; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 30px -18px rgba(14, 21, 51, .5); border-top: 1px solid var(--linie); } .leiste .knopf { min-height: 48px; font-size: 15px; padding: 0 12px; } .fuss--leiste { padding-bottom: 72px; } body:has(.mobil[open]) .leiste { display: none; } .felder--2, .felder--3 { grid-template-columns: minmax(0, 1fr); } .netz-zonen { grid-template-columns: minmax(0, 1fr); } .kacheln--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fakten { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { :root { --seite: 16px; } .sek > .huelle { padding-top: 52px; padding-bottom: 52px; } .sek--eng > .huelle { padding-top: 36px; padding-bottom: 36px; } .sek--mittel > .huelle { padding-top: 52px; padding-bottom: 52px; } .faq { padding-top: 60px; padding-bottom: 60px; } .held-start-innen { padding-top: 24px; padding-bottom: 56px; gap: 32px; } .held-sub-innen { padding-top: 20px; padding-bottom: 56px; gap: 28px; } .held-kontakt > .huelle { padding-bottom: 56px; gap: 28px; } .held-start-muster { display: none; } .vorspann { font-size: 17.5px; } .kurzzeile .nur-breit { display: none; } .karte, .kasten, .band, .marke-band, .reiter-panel, .stufe-panel, .karte-schwebend, .kontakt-raster > .formular, .itcheck-ergebnis { padding: 22px; } .band { gap: 16px; } .teaser { padding: 28px; min-height: 0; } .teaser-titel, .sek .teaser-titel { font-size: 25px; } .person-karte { min-height: 0; } .person-text { padding: 26px 26px 0; } .cta-innen { padding-top: 56px; padding-bottom: 56px; } .wege { padding-top: 24px; padding-bottom: 24px; } .weg { min-height: 0; } .knopf--riesig { font-size: 24px; min-height: 72px; padding: 0 22px; width: 100%; } .held-person { width: auto; right: 0; padding-left: 140px; } .held-person img { height: 128px; } .faq-antwort { padding-right: 0; } .faq-frage summary { font-size: 17px; } .text h2 { font-size: 24px; } .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kacheln--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .itcheck-antworten { width: 100%; } .itcheck-antworten label { flex: 1 1 0; justify-content: center; } .itcheck-ergebnis { position: static; } .umschalter { display: flex; width: 100%; } .umschalter label { flex: 1 1 auto; justify-content: center; text-align: center; padding: 0 12px; } .wabe-karte .knopf { width: 100%; } .dd-person-bild { height: 140px; } } @media (max-width: 380px) { .kacheln, .kacheln--4 { grid-template-columns: minmax(0, 1fr); } .kacheln label { min-height: 52px; flex-direction: row; align-items: center; } .mobil-knoepfe { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------------------------------------------ Paket 344: Feinschliff Lesbarkeit und Handwerk nach der Pruefung in sieben Breiten: Trennungen in Ueberschriften, Menue kraeftiger, Kopfzeile bei 1024 px ohne Ueberlauf, Tippflaechen 44 px, Schrift in Zeichnungen ab 12 px, kuerzere Handy-Ansicht. */ h1, h2, h3, h4 { hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; } p, li, dd { text-wrap: pretty; } .dd-knopf, .nav-link { font-weight: 600; white-space: nowrap; } .kurzzeile a, .kopf-tel b, .krumen a { white-space: nowrap; } .kurzzeile-innen { min-height: 44px; } .kurzzeile a { display: inline-flex; align-items: center; min-height: 44px; } .kopf-tel { min-height: 44px; justify-content: center; } .wahl-chips label, .chips label, .chips--mitte label { min-height: 44px; } a.link { min-height: 44px; margin-block: -9px; } .person-tel, .person-mail, .fuss .fuss-tel, .fuss-mail { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; } .person-tel { margin-block: -4px -10px; } .fuss .fuss-tel { margin-block: -6px -14px; } .fuss-spalte ul { gap: 0; } .fuss-spalte a { display: inline-flex; align-items: center; min-height: 32px; } .fuss-spalte { gap: 8px; } .krumen a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; } .held-stand { font-size: 14px; color: var(--leise); } .haken-option { min-height: 44px; align-items: center; } .fuss-zeiten { font-size: 14px; color: var(--lav); } .blick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 64px; align-items: start; } .blick--bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "bild text" "bild fakten"; align-items: start; } .blick--bild .blick-bild { grid-area: bild; } .blick--bild .blick-text { grid-area: text; } .blick--bild .blick-fakten { grid-area: fakten; } .blick-text { display: flex; flex-direction: column; gap: 14px; } .sek .blick h2 { font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mittel); display: flex; align-items: center; gap: 10px; } /* Paket 352: wie die Oberzeilen */ .sek .blick h2::before { content: ""; flex: none; width: 12px; height: 14px; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .blick-antwort { font-size: 20px; line-height: 1.55; color: var(--kopf); max-width: 62ch; } .blick-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--linie); } .blick-fakten > div { padding: 14px 0; border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; gap: 2px; } .blick-fakten > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .blick-fakten dt { font-size: 13.5px; font-weight: 600; color: var(--leise); } .blick-fakten dd { font-size: 15.5px; line-height: 1.5; color: var(--kopf); } .blick-fakten a { font-weight: 600; white-space: nowrap; } .blick-bild { margin: 0; aspect-ratio: 4 / 3; background: var(--hell); clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%); } .blick-bild img { width: 100%; height: 100%; object-fit: cover; } .blick-bild--platz { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px; background: repeating-linear-gradient(135deg, #EEEDF6 0 14px, #F4F3FA 14px 28px); } .platz-titel { font-family: var(--mono); font-size: 13px; color: var(--mittel); } .platz-motiv { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--kopf); max-width: 28ch; } .platz-masse { font-size: 13px; line-height: 1.5; color: var(--leise); } .held-bild--person { padding: 0 0 56px 30px; max-width: 520px; } .held-portraet { overflow-x: clip; position: relative; width: 88%; aspect-ratio: 1 / 1; margin-top: 8%; clip-path: polygon(0 -30%, 100% -30%, 100% 50%, 75% 97%, 25% 97%, 0 50%); } .held-portraet-hex { position: absolute; inset: 0; background: var(--navy); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); } .held-portraet img { position: absolute; left: 50%; bottom: 3%; height: 106%; width: auto; max-width: none; transform: translateX(-50%); } .held-person--ohne { padding-left: 22px; min-height: 0; } .weg { min-width: 0; } .held-person a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; } .karte--link { position: relative; } .karte-pfeil { position: absolute; top: 28px; right: 26px; color: var(--lav-dunkel); display: flex; transition: color .2s ease, transform .2s ease; } .karte-pfeil .sym { width: 18px; height: 18px; } .karte--link:hover .karte-pfeil { color: var(--navy); transform: translateX(3px); } .karte--dunkel .karte-pfeil { color: var(--lav); } .zusagen-liste ul { border-top: 1px solid var(--linie); margin-top: 10px; } .zusagen-liste li { align-items: flex-start; } .zusagen-liste .hex { margin-top: -4px; } .minikarte { flex: 1.2 1 244px; } .teaser--hell { padding: 32px; } .minikarte .mkt { font-size: 12.8px; } @media (min-width: 381px) { .knopf { white-space: nowrap; } } @media (min-width: 1021px) and (max-width: 1180px) { .kopf-innen { gap: 16px 20px; } .hauptnav { gap: 20px; } .knopf--kopf { padding: 0 16px; } /* Aufklappflaechen am rechten Rand der Kopfzeile ausrichten - sonst ragt "Service" ueber den Bildschirm */ .dd { position: static; } .dd:not(.dd--mega) > .dd-panel { left: auto; right: var(--seite); } } @media (max-width: 1100px) { .kurzzeile a[href^="mailto:"] { display: none; } } @media (max-width: 900px) { .blick, .blick--bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 24px; } .blick--bild .blick-bild, .blick--bild .blick-text, .blick--bild .blick-fakten { grid-area: auto; } .blick--bild .blick-bild { max-width: 560px; } } /* Finger statt Maus, oder schmale Ansicht: Verweislisten im Fuss in voller Tipphoehe */ @media (max-width: 1020px), (pointer: coarse) { .fuss-spalte a { min-height: 44px; } } @media (max-width: 640px) { /* Zeichnungen: Namen stehen in den Auswahlfeldern darunter bzw. im Menue - verkleinert waeren sie unlesbar */ .wabe--seite { display: none; } .wabe--gebiet .prisma .pt { display: none; } .held-start-wabe { display: none; } /* kuerzere Startseite: Eckdaten entfallen (stehen in den Abschnitten darunter), Karten als kompakte Zeilen */ .held-start .fakten { display: none; } .held-start-innen { padding-bottom: 40px; } .fuss-marke p { display: none; } .minikarte { max-width: 244px; } .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .weg { padding: 14px 12px; gap: 10px; } .weg-titel { font-size: 16px; } .kasten .knopf, .band-knopf { font-size: 15px; padding: 0 16px; gap: 8px; } .weg-text { display: none; } .weg-tel { font-size: 16px; margin-top: 0; } .karte--link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 18px; align-items: start; } .karte--link > .hex { grid-row: 1 / span 3; } .karte--link > :not(.hex) { grid-column: 2; } .karte--link h3 { font-size: 17.5px; padding-right: 26px; } .karte--link p { font-size: 15px; line-height: 1.5; } .karte-pfeil { top: 18px; right: 16px; } .karten { gap: 10px; } .zusagen-liste li { padding: 16px 0; gap: 14px; } .blick-antwort { font-size: 18px; } .blick-fakten { grid-template-columns: minmax(0, 1fr); } .blick-bild--platz { padding: 20px; } .schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 6px; } .schritt-kopf { grid-row: 1 / span 2; } .schritt-linie { display: none; } .schritt > :not(.schritt-kopf) { grid-column: 2; } .schritt h3 { align-self: center; } .person-karte { flex-direction: row; align-items: flex-end; } .person-text { padding: 22px 0 22px 22px; flex: 1 1 0; min-width: 0; } .person-name { font-size: 24px; } .person-mail { font-size: 14px; overflow-wrap: anywhere; } .person-bild { width: 38%; margin-top: 0; flex: none; } .teaser--dunkel .teaser-muster { width: 170px; } .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .fuss-marke { grid-column: 1 / -1; } .fuss-innen { padding-top: 52px; gap: 36px; } } @media (max-width: 380px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } .wege { grid-template-columns: minmax(0, 1fr); } .teaser { padding: 20px; } } /* ------------------------------------------------------------------------------------------------ Paket 349: Formulare (Engine 3.31.3) */ /* Fehleranzeige nach der Vereinbarung der Engine (assets/formular.js): .feld.fehler, .feld-fehler-text, .formular-meldung.fehler */ .feld.fehler input, .feld.fehler textarea, .feld.fehler select { border-color: var(--rot); } .feld-fehler-text { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--rot-dunkel); } .formular-meldung.fehler { margin: 0; border: 0; border-radius: 0; background: var(--rot-hell); color: var(--rot-text); box-shadow: inset 4px 0 0 var(--rot); font-weight: 600; } .formular-meldung.fehler:focus { outline: none; } .feld--haken.fehler .haken-option { color: var(--rot-text); } .feld--haken.fehler .haken-option input { outline: 2px solid var(--rot); outline-offset: 2px; } .wahl-feld.fehler .kacheln label, .wahl-feld.fehler .chips label { box-shadow: inset 0 0 0 1.5px var(--rot); } .wahl-feld > .feld-fehler-text { margin-top: -4px; } .feld-hinweis { margin-top: -10px; font-size: 13.5px; color: var(--leise); } .kontakt-anliegen { flex: 1.6 1 560px; min-width: 0; } /* Terminwahl im Kontaktformular: Tage als Leiste (mit Skript), Zeiten nach Tageszeit gruppiert */ .termin { display: grid; gap: 12px; padding: 20px; background: var(--hell); box-shadow: var(--rand); min-width: 0; } .termin > legend { float: left; width: 100%; font-size: 15px; font-weight: 600; color: var(--kopf); } .termin > legend + * { clear: both; } .termin.fehler { box-shadow: inset 0 0 0 1.5px var(--rot), inset 4px 0 0 var(--rot); } .termin-hinweis { font-size: 14px; line-height: 1.5; color: var(--leise); } .termin-tage { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scroll-snap-type: x proximity; scrollbar-width: thin; } .termin-tage[hidden], .termin-tag[hidden] { display: none; } .termin-tage button { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 76px; min-height: 58px; padding: 6px 10px; border: 0; cursor: pointer; background: #FFFFFF; color: var(--navy); box-shadow: inset 0 0 0 1px var(--lav); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .termin-tage button span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; } .termin-tage button b { font-size: 15px; font-weight: 600; } .termin-tage button:hover { box-shadow: inset 0 0 0 2px var(--navy); } .termin-tage button[aria-pressed="true"] { background: var(--navy); color: #FFFFFF; box-shadow: none; } .termin-tag { display: grid; gap: 10px; padding-top: 4px; } .termin-tag + .termin-tag, .termin-mehr .termin-tag { border-top: 1px solid var(--linie); padding-top: 14px; } .termin--tage .termin-tag { border-top: 0; padding-top: 0; } .termin-tagname { font-size: 15px; font-weight: 600; color: var(--kopf); } .termin-gruppe { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px 12px; align-items: center; } .termin-zeitraum { font-family: var(--mono); font-size: 12.5px; color: var(--leise); } .chips--zeit label { min-height: 44px; min-width: 70px; justify-content: center; font-family: var(--mono); font-size: 14.5px; } .termin-mehr > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--navy); list-style: none; } .termin-mehr > summary::-webkit-details-marker { display: none; } .termin-mehr > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; box-shadow: inset 0 0 0 1.5px var(--navy); font-weight: 600; } .termin-mehr[open] > summary::before { content: "–"; } .termin-mehr[open] { display: grid; gap: 10px; } .termin--tage .termin-mehr > summary { display: none; } .termin-fuss { font-size: 13px; line-height: 1.5; color: var(--leise); } .danke-termin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; align-self: flex-start; padding: 14px 20px; background: var(--hell); box-shadow: var(--rand); } .danke-termin .sym { width: 22px; height: 22px; color: var(--navy); } .danke-termin span { font-size: 14px; color: var(--leise); } .danke-termin b { font-size: 18px; font-weight: 600; color: var(--kopf); } /* Kopf ohne Raster (Suche, Wartung, 404, Danke): Text nicht auf 520 px Hoehe strecken (flex-basis in der Spalte) */ .held-sub-innen > .held-sub-text { flex: none; } /* Hinweisleiste (Verwaltung -> Firmendaten): hell, damit sie sich von der dunklen Kurzzeile abhebt */ .hinweisleiste { background: var(--lav); color: var(--nacht); } .hinweisleiste-innen { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; line-height: 1.45; text-align: center; } .hinweisleiste-innen .sym { flex: none; width: 18px; height: 18px; color: var(--navy); } .hinweisleiste-innen p { font-weight: 500; } /* Suchfeld, Suchseite, Wartungsseite */ .suchfeld { display: flex; flex-direction: column; gap: 8px; max-width: 640px; } .suchfeld label { font-size: 14px; font-weight: 600; color: var(--kopf); } .suchfeld-zeile { position: relative; display: flex; gap: 8px; } .suchfeld-zeile .sym { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--leise); pointer-events: none; } .suchfeld input { flex: 1 1 auto; min-width: 0; min-height: 54px; padding: 0 14px 0 46px; font-size: 16px; border: 1.5px solid var(--lav); background: #FFFFFF; color: var(--kopf); border-radius: 0; } .suchfeld input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); } .suchfeld .knopf { flex: none; min-height: 54px; } .such-zahl { font-size: 15px; color: var(--leise); } .such-liste { display: grid; gap: 10px; margin-bottom: 40px; } .such-treffer { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; background: #FFFFFF; box-shadow: var(--rand); text-decoration: none; color: var(--text); transition: box-shadow .15s ease; } .such-treffer:hover { box-shadow: inset 0 0 0 2px var(--navy); color: var(--text); } .such-titel { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--kopf); } .such-titel .sym { flex: none; width: 18px; height: 18px; color: var(--navy); } .such-pfad { font-size: 12.5px; color: var(--leise); overflow-wrap: anywhere; } .such-auszug { font-size: 15px; line-height: 1.55; } .such-auszug mark { background: var(--lav); color: var(--kopf); } .such-leer { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: #FFFFFF; box-shadow: var(--rand); } .such-leer > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .such-leer h2 { font-size: 22px; font-weight: 600; color: var(--kopf); line-height: 1.3; } .wartung-bis { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--kopf); } .wartung-bis .sym { flex: none; width: 20px; height: 20px; color: var(--navy); } .wartung-hinweis { font-size: 14px; color: var(--leise); } @media (max-width: 640px) { .termin { padding: 16px; } .termin-gruppe { grid-template-columns: minmax(0, 1fr); } .chips--zeit label { min-width: 64px; } .such-treffer { padding: 18px; } .such-leer { flex-direction: column; padding: 22px; } .hinweisleiste-innen { font-size: 14px; justify-content: flex-start; text-align: left; } } @media (max-width: 380px) { .suchfeld-zeile { flex-wrap: wrap; } .suchfeld .knopf { flex: 1 1 100%; } } /* ------------------------------------------------------------------------------------------------ Paket 351: kuerzere Startseite auf dem Handy */ /* Ziel: hoechstens 8 Bildschirmhoehen bei 390 x 844 (vorher 8,7). Am grossen Bildschirm aendert sich nichts. */ @media (max-width: 640px) { .seitentyp-start .sek > .huelle { padding-top: 44px; padding-bottom: 44px; } .seitentyp-start .sek--hell + .sek--hell > .huelle, .seitentyp-start .sek--weiss + .sek--weiss > .huelle { padding-top: 0; } .seitentyp-start .sek-kopf { margin-bottom: 26px; } /* Leistungen als Kacheln zu zweit, wie die Wege darueber; die Kurzbeschreibung steht auf der jeweiligen Seite */ .seitentyp-start .karten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .seitentyp-start .karten--4 .karte--link { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px 16px; } .seitentyp-start .karten--4 .karte--link > .hex { width: 36px; height: 40px; } .seitentyp-start .karten--4 .karte--link > .hex .sym { width: 18px; height: 18px; } .seitentyp-start .karten--4 .karte--link h3 { font-size: 16px; line-height: 1.3; padding-right: 0; text-wrap: wrap; } .seitentyp-start .karten--4 .karte--link p { display: none; } .seitentyp-start .karten--4 .karte-pfeil { top: 16px; right: 12px; } /* Zusagen enger gesetzt */ .seitentyp-start .zusagen { gap: 28px; } .seitentyp-start .zusagen-liste li { padding: 13px 0; } .seitentyp-start .zusagen-liste b { font-size: 17px; } .seitentyp-start .zusagen-liste b + span { font-size: 15px; line-height: 1.5; } /* Einsatzgebiet: die kleine Karte entfaellt (gross auf der Seite Einsatzgebiet) */ .seitentyp-start .teaser--hell .minikarte { display: none; } .seitentyp-start .teaser-raster { gap: 12px; } /* Paket 352: Leistungsseiten - die rechte Kopfspalte enthaelt nur das (auf dem Handy ausgeblendete) Wabenbild; ohne sie entfaellt eine leere Luecke */ .held-sub-rechts:has(> .wabe--seite:only-child) { display: none; } } /* ------------------------------------------------------------------------------------------------ Paket 351: Tablet (641-1100 px) */ /* Zwischen Handy und grossem Bildschirm stand bisher vieles untereinander und sehr gross (Startseite bei 1024 x 768: 10 Bildschirmhoehen). */ @media (min-width: 641px) and (max-width: 1100px) { /* Kopf der Startseite: Wabenbild nicht ueber die volle Breite strecken */ .held-start-wabe { max-width: 620px; margin-left: auto; margin-right: auto; } .held-sub-rechts > .wabe--seite { max-width: 560px; margin-left: auto; margin-right: auto; } /* Vier Wege: zwei mal zwei statt drei plus einer */ .wege:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Ansprechpartner als Zeile mit Bild rechts statt als 560 px hohe Karte */ .person-karte { flex-direction: row; align-items: flex-end; min-height: 0; flex-basis: 100%; } .person-text { padding: 32px 0 32px 32px; flex: 1 1 0; min-width: 0; } .person-bild { width: 34%; max-width: 280px; margin-top: 0; flex: none; } } @media (min-width: 900px) and (max-width: 1100px) { /* Kopf der Startseite: Text und Wabenbild nebeneinander wie am grossen Bildschirm */ .held-start-innen { flex-wrap: nowrap; gap: 40px; } .held-start-text { flex: 1 1 52%; } .held-start-wabe { flex: 1 1 48%; max-width: none; margin: 0; } .held-start .fakten { grid-template-columns: minmax(0, 1fr); gap: 12px; } .wege:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .seitentyp-start .karten--4:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 641px) and (max-width: 899px) { .seitentyp-start .karten--4:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Untereinander: erst die Zusagen, dann der Ansprechpartner (vorher stand die Karte vor der Ueberschrift) */ @media (max-width: 1100px) { .zusagen > .person-karte { order: 2; } } /* ------------------------------------------------------------------------------------------------ Paket 353: Wabenkarte ohne Springen */ /* Beim Wechsel des Bereichs (Klick auf ein Sechseck) war die Karte darunter je nach Text unterschiedlich hoch: Der Kopf richtete sich neu aus, Text links und Auswahl darunter sprangen. Jetzt liegen alle Karten uebereinander in derselben Zelle - die Flaeche ist immer so hoch wie die laengste Karte, gezeigt wird nur die gewaehlte. */ @supports selector(:has(*)) { .wabe-info, .gebiet-info { display: grid; } .wabe-info > .z, .gebiet-info > .z { grid-area: 1 / 1; margin-top: 0; } .wahl:has(.w1:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z1), .wahl:has(.w2:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z2), .wahl:has(.w3:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z3), .wahl:has(.w4:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z4), .wahl:has(.w5:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z5), .wahl:has(.w6:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z6), .wahl:has(.w7:checked) :is(.wabe-info, .gebiet-info) > .z:not(.z7) { display: flex; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } @media print { .kurzzeile, .kopf-mobil, .hauptnav, .kopf-rechts, .leiste, .cta, .wege-band, .verwandt, .held-start-wabe, .wabe { display: none !important; } .sek > .huelle { padding-top: 24px; padding-bottom: 24px; } } /* ------------------------------------------------------------------------------------------------ Umschalter ohne Skript (erzeugt) */ @supports selector(:has(*)) { .wahl:has(.w1:checked) .z:not(.z1), .wahl:has(.w2:checked) .z:not(.z2), .wahl:has(.w3:checked) .z:not(.z3), .wahl:has(.w4:checked) .z:not(.z4), .wahl:has(.w5:checked) .z:not(.z5), .wahl:has(.w6:checked) .z:not(.z6), .wahl:has(.w7:checked) .z:not(.z7) { display: none; } .wabe-karte + .wabe-karte, .gebiet-karte + .gebiet-karte, .reiter-panel + .reiter-panel, .fazit + .fazit { margin-top: 0; } .wahl:has(.w1:checked) .tabelle--wahl thead th.an-1, .wahl:has(.w2:checked) .tabelle--wahl thead th.an-2, .wahl:has(.w3:checked) .tabelle--wahl thead th.an-3, .wahl:has(.w4:checked) .tabelle--wahl thead th.an-4, .wahl:has(.w5:checked) .tabelle--wahl thead th.an-5, .wahl:has(.w6:checked) .tabelle--wahl thead th.an-6, .wahl:has(.w7:checked) .tabelle--wahl thead th.an-7 { background: var(--navy); color: #FFFFFF; } .wahl:has(.w1:checked) .tabelle--wahl td.an-1, .wahl:has(.w2:checked) .tabelle--wahl td.an-2, .wahl:has(.w3:checked) .tabelle--wahl td.an-3, .wahl:has(.w4:checked) .tabelle--wahl td.an-4, .wahl:has(.w5:checked) .tabelle--wahl td.an-5, .wahl:has(.w6:checked) .tabelle--wahl td.an-6, .wahl:has(.w7:checked) .tabelle--wahl td.an-7 { background: var(--hell); box-shadow: inset 2px 0 0 var(--navy); color: var(--kopf); } .wahl:has(.w1:checked) .stufe-nr.an-1, .wahl:has(.w2:checked) .stufe-nr.an-2, .wahl:has(.w3:checked) .stufe-nr.an-3, .wahl:has(.w4:checked) .stufe-nr.an-4, .wahl:has(.w5:checked) .stufe-nr.an-5, .wahl:has(.w6:checked) .stufe-nr.an-6, .wahl:has(.w7:checked) .stufe-nr.an-7 { background: var(--navy); color: #FFFFFF; } .wahl:has(.w1:checked) .uk-karte.t1-offen, .wahl:has(.w2:checked) .uk-karte.t2-offen, .wahl:has(.w3:checked) .uk-karte.t3-offen, .wahl:has(.w4:checked) .uk-karte.t4-offen, .wahl:has(.w5:checked) .uk-karte.t5-offen, .wahl:has(.w6:checked) .uk-karte.t6-offen, .wahl:has(.w7:checked) .uk-karte.t7-offen { box-shadow: inset 0 0 0 1px var(--linie), inset 4px 0 0 var(--rot-rand); } .wahl:has(.w1:checked) .uk-karte.t1-gut, .wahl:has(.w2:checked) .uk-karte.t2-gut, .wahl:has(.w3:checked) .uk-karte.t3-gut, .wahl:has(.w4:checked) .uk-karte.t4-gut, .wahl:has(.w5:checked) .uk-karte.t5-gut, .wahl:has(.w6:checked) .uk-karte.t6-gut, .wahl:has(.w7:checked) .uk-karte.t7-gut { box-shadow: inset 0 0 0 1px var(--lav), inset 4px 0 0 var(--navy); } .wahl:has(.w1:checked) .netz.t1-offen, .wahl:has(.w2:checked) .netz.t2-offen, .wahl:has(.w3:checked) .netz.t3-offen, .wahl:has(.w4:checked) .netz.t4-offen, .wahl:has(.w5:checked) .netz.t5-offen, .wahl:has(.w6:checked) .netz.t6-offen, .wahl:has(.w7:checked) .netz.t7-offen { background: #FFF7F6; box-shadow: inset 0 0 0 2px var(--rot-rand); } .wahl:has(.w1:checked) .zone.t1-offen, .wahl:has(.w2:checked) .zone.t2-offen, .wahl:has(.w3:checked) .zone.t3-offen, .wahl:has(.w4:checked) .zone.t4-offen, .wahl:has(.w5:checked) .zone.t5-offen, .wahl:has(.w6:checked) .zone.t6-offen, .wahl:has(.w7:checked) .zone.t7-offen { box-shadow: inset 0 0 0 1px var(--rot-rand); } .wahl:has(.w1:checked) .kopie.t1-offen, .wahl:has(.w2:checked) .kopie.t2-offen, .wahl:has(.w3:checked) .kopie.t3-offen, .wahl:has(.w4:checked) .kopie.t4-offen, .wahl:has(.w5:checked) .kopie.t5-offen, .wahl:has(.w6:checked) .kopie.t6-offen, .wahl:has(.w7:checked) .kopie.t7-offen { box-shadow: inset 0 0 0 1px var(--rot-rand); opacity: .82; } .wahl:has(.w1:checked) .kopie.t1-offen .kopie-nr, .wahl:has(.w2:checked) .kopie.t2-offen .kopie-nr, .wahl:has(.w3:checked) .kopie.t3-offen .kopie-nr, .wahl:has(.w4:checked) .kopie.t4-offen .kopie-nr, .wahl:has(.w5:checked) .kopie.t5-offen .kopie-nr, .wahl:has(.w6:checked) .kopie.t6-offen .kopie-nr, .wahl:has(.w7:checked) .kopie.t7-offen .kopie-nr { background: var(--rot-zart); color: var(--rot-dunkel); } .wahl:has(.w1:checked) .prisma-1, .wahl:has(.w2:checked) .prisma-2, .wahl:has(.w3:checked) .prisma-3, .wahl:has(.w4:checked) .prisma-4, .wahl:has(.w5:checked) .prisma-5, .wahl:has(.w6:checked) .prisma-6, .wahl:has(.w7:checked) .prisma-7 { transform: translateY(-20px); } .wahl:has(.w1:checked) .prisma-1 .p1, .wahl:has(.w2:checked) .prisma-2 .p1, .wahl:has(.w3:checked) .prisma-3 .p1, .wahl:has(.w4:checked) .prisma-4 .p1, .wahl:has(.w5:checked) .prisma-5 .p1, .wahl:has(.w6:checked) .prisma-6 .p1, .wahl:has(.w7:checked) .prisma-7 .p1 { fill: var(--nacht); } .wahl:has(.w1:checked) .prisma-1 .p2, .wahl:has(.w2:checked) .prisma-2 .p2, .wahl:has(.w3:checked) .prisma-3 .p2, .wahl:has(.w4:checked) .prisma-4 .p2, .wahl:has(.w5:checked) .prisma-5 .p2, .wahl:has(.w6:checked) .prisma-6 .p2, .wahl:has(.w7:checked) .prisma-7 .p2 { fill: var(--tief); } .wahl:has(.w1:checked) .prisma-1 .p3, .wahl:has(.w2:checked) .prisma-2 .p3, .wahl:has(.w3:checked) .prisma-3 .p3, .wahl:has(.w4:checked) .prisma-4 .p3, .wahl:has(.w5:checked) .prisma-5 .p3, .wahl:has(.w6:checked) .prisma-6 .p3, .wahl:has(.w7:checked) .prisma-7 .p3 { fill: var(--navy-hover); } .wahl:has(.w1:checked) .prisma-1 .po, .wahl:has(.w2:checked) .prisma-2 .po, .wahl:has(.w3:checked) .prisma-3 .po, .wahl:has(.w4:checked) .prisma-4 .po, .wahl:has(.w5:checked) .prisma-5 .po, .wahl:has(.w6:checked) .prisma-6 .po, .wahl:has(.w7:checked) .prisma-7 .po { fill: var(--navy); stroke: var(--navy); stroke-dasharray: none; } .wahl:has(.w1:checked) .prisma-1 .pi, .wahl:has(.w2:checked) .prisma-2 .pi, .wahl:has(.w3:checked) .prisma-3 .pi, .wahl:has(.w4:checked) .prisma-4 .pi, .wahl:has(.w5:checked) .prisma-5 .pi, .wahl:has(.w6:checked) .prisma-6 .pi, .wahl:has(.w7:checked) .prisma-7 .pi { stroke: #FFFFFF; } .wahl:has(.w1:checked) .prisma-1 .pt, .wahl:has(.w2:checked) .prisma-2 .pt, .wahl:has(.w3:checked) .prisma-3 .pt, .wahl:has(.w4:checked) .prisma-4 .pt, .wahl:has(.w5:checked) .prisma-5 .pt, .wahl:has(.w6:checked) .prisma-6 .pt, .wahl:has(.w7:checked) .prisma-7 .pt { fill: #FFFFFF; } .wahl:has(.w1:checked) .wabe--gebiet .prisma-1, .wahl:has(.w2:checked) .wabe--gebiet .prisma-2, .wahl:has(.w3:checked) .wabe--gebiet .prisma-3, .wahl:has(.w4:checked) .wabe--gebiet .prisma-4, .wahl:has(.w5:checked) .wabe--gebiet .prisma-5, .wahl:has(.w6:checked) .wabe--gebiet .prisma-6, .wahl:has(.w7:checked) .wabe--gebiet .prisma-7 { transform: translateY(-14px); } .wahl:has(.w1:checked) .prisma-1.prisma--mitte, .wahl:has(.w2:checked) .prisma-2.prisma--mitte, .wahl:has(.w3:checked) .prisma-3.prisma--mitte, .wahl:has(.w4:checked) .prisma-4.prisma--mitte, .wahl:has(.w5:checked) .prisma-5.prisma--mitte, .wahl:has(.w6:checked) .prisma-6.prisma--mitte, .wahl:has(.w7:checked) .prisma-7.prisma--mitte { transform: translateY(-8px); } .itcheck-offen li { display: none; } .itcheck:has(.q1.a-nein:checked, .q1.a-weiss:checked) .o1, .itcheck:has(.q2.a-nein:checked, .q2.a-weiss:checked) .o2, .itcheck:has(.q3.a-nein:checked, .q3.a-weiss:checked) .o3, .itcheck:has(.q4.a-nein:checked, .q4.a-weiss:checked) .o4, .itcheck:has(.q5.a-nein:checked, .q5.a-weiss:checked) .o5, .itcheck:has(.q6.a-nein:checked, .q6.a-weiss:checked) .o6, .itcheck:has(.q7.a-nein:checked, .q7.a-weiss:checked) .o7, .itcheck:has(.q8.a-nein:checked, .q8.a-weiss:checked) .o8, .itcheck:has(.q9.a-nein:checked, .q9.a-weiss:checked) .o9, .itcheck:has(.q10.a-nein:checked, .q10.a-weiss:checked) .o10, .itcheck:has(.q11.a-nein:checked, .q11.a-weiss:checked) .o11, .itcheck:has(.q12.a-nein:checked, .q12.a-weiss:checked) .o12 { display: flex; } .berater .empf, .berater .empf-bedingung { display: none; } .berater .empf + .empf { border-top: 0; padding-top: 0; margin-top: 0; } .berater:has(.b-zeit-ja:checked) .empf--vertrag { display: flex; } .berater:has(.b-zeit-nein:checked):has(.b-vorsorge-ja:checked) .empf--betreuung, .berater:has(.b-zeit-nein:checked):has(.b-oft-ja:checked) .empf--betreuung { display: flex; } .berater:has(.b-zeit-nein:checked):has(.b-vorsorge-nein:checked):has(.b-oft-nein:checked) .empf--aufwand { display: flex; } .alarm--stoerung { display: none; } form:has([data-stoerung]:checked) .alarm--stoerung { display: block; } form:has([data-stoerung]:checked) .alarm--knopf { display: flex; } .notfall-fall { display: none; } }