@charset "UTF-8"; /* ========================================================================== Musterseiten – gemeinsames Grundgerüst (heimseiten.de) Firmenstil kommt aus /files/muster//stil.css (nur Variablen + Feinheiten). Abschnitte sind native Contao-Elementgruppen mit CSS-Klasse (abschnitt + Typ). ========================================================================== */ @font-face { font-family: "Inter"; src: url(schriften/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Manrope"; src: url(schriften/manrope.woff2) format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Fraunces"; src: url(schriften/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Outfit"; src: url(schriften/outfit.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "DM Sans"; src: url(schriften/dm-sans.woff2) format("woff2"); font-weight: 100 1000; font-display: swap; } @font-face { font-family: "Playfair Display"; src: url(schriften/playfair-display.woff2) format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url(schriften/source-serif-4.woff2) format("woff2"); font-weight: 200 900; font-display: swap; } @font-face { font-family: "Work Sans"; src: url(schriften/work-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url(schriften/bricolage-grotesque.woff2) format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url(schriften/barlow-condensed-600.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url(schriften/barlow-condensed.woff2) format("woff2"); font-weight: 700; font-display: swap; } :root { --primaer: #1f5f8b; --primaer-dunkel: #164666; --akzent: #f0a020; --auf-primaer: #fff; --auf-akzent: #1b1b1b; --text: #22262b; --text-leise: #5b636d; --grund: #ffffff; --flaeche: #f4f6f8; --linie: #e3e7eb; --dunkel: #14181d; --auf-dunkel: #e9edf1; --schrift-titel: "Manrope", system-ui, sans-serif; --schrift-text: "Inter", system-ui, sans-serif; --titel-gewicht: 750; --titel-transform: none; --titel-abstand: -0.02em; --radius: 14px; --radius-klein: 8px; --schatten: 0 1px 2px rgb(16 24 32 / .06), 0 8px 24px rgb(16 24 32 / .08); --schatten-hoch: 0 2px 4px rgb(16 24 32 / .06), 0 20px 48px rgb(16 24 32 / .14); --breite: 1200px; --rand: clamp(20px, 4vw, 40px); --abschnitt: clamp(64px, 9vw, 120px); --kopf-hoehe: 84px; --weich: cubic-bezier(.22, .61, .36, 1); /* Navigation wie contao57.heimseiten.com – einzige Variable ist die Markenfarbe */ --nav-breakpoint: 1024; --nav-color: var(--text); --nav-active-color: var(--primaer); --nav-item-line-height: 1.5; --nav-font-size: 17px; --nav-font-weight: 500; --nav-mobile-background: #fff; --nav-mobile-color: var(--text); --nav-mobile-active-background: #f8f8f8; --nav-mobile-active-color: var(--primaer); --nav-mobile-active-border-color: var(--primaer); --nav-mobile-btn-clr: var(--primaer); --nav-mobile-separator-color: #ddd; --nav-mobile-padding: 92px 20px 20px; --nav-mobile-font-size: 18px; --nav-mobile-backdrop-height: 0; --nav-submenu-background: #fff; --nav-burger-line-color: var(--primaer); /* Variablen des lesbaren CSS-Frameworks (FARBEN, Tabellenlinien, Fett) auf die Firmenfarben legen */ --color_1: var(--primaer); --color_2: var(--akzent); --color_3: var(--dunkel); --color_4: var(--text-leise); --border_color: var(--linie); --font_weight_strong: 700; } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--weich); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); } body { margin: 0; background: var(--grund); color: var(--text); font: 400 clamp(16px, 1.05vw + 11px, 18px)/1.65 var(--schrift-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primaer); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .2s; } a:hover { color: var(--primaer-dunkel); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); text-transform: var(--titel-transform); letter-spacing: var(--titel-abstand); line-height: 1.12; margin: 0 0 .5em; color: inherit; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 4.6vw + .6rem, 4.4rem); } h2 { font-size: clamp(1.8rem, 2.6vw + .7rem, 3rem); } h3 { font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); letter-spacing: -0.01em; } ul { padding-left: 1.2em; } .invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } :focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; } /* ---------- Entwurfs-Hinweis ---------- */ .EntwurfHinweis { background: var(--dunkel); color: var(--auf-dunkel); font-size: 13.5px; line-height: 1.4; } .EntwurfHinweis .innen { max-width: var(--breite); margin: 0 auto; padding: 8px var(--rand); display: flex; gap: 16px; align-items: center; justify-content: center; text-align: center; } .EntwurfHinweis a { color: #fff; } .EntwurfSchließen { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 6px; } .EntwurfSchließen:hover { opacity: 1; } .EntwurfHinweis.weg { display: none; } /* ---------- Kopf ---------- */ .Kopf { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; } .Kopf.kompakt { border-color: var(--linie); box-shadow: 0 6px 24px rgb(16 24 32 / .06); } .Kopf > .innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); min-height: var(--kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: min-height .3s var(--weich); } .Kopf.kompakt > .innen { min-height: 68px; } .Kopf .content-html { display: contents; } .Logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.1; } .Logo img { height: 52px; width: auto; transition: height .3s var(--weich); } .Kopf.kompakt .Logo img { height: 42px; } .LogoSvg img { height: 58px; } .Kopf.kompakt .LogoSvg img { height: 48px; } .Logo small { display: block; font: 500 .72rem/1.3 var(--schrift-text); color: var(--text-leise); letter-spacing: .02em; text-transform: none; } .Logo:hover { color: var(--text); } /* Desktop-Navigation */ body.nav-is-desktop .navigation-main .level_1 { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } body.nav-is-desktop .navigation-main .level_1 > li > :is(a, strong) { display: block; padding: 10px 14px; border-radius: 999px; font-size: var(--nav-font-size); font-weight: var(--nav-font-weight); color: var(--nav-color); text-decoration: none; position: relative; transition: color .2s, background .2s; } body.nav-is-desktop .navigation-main .level_1 > li > a:hover { background: var(--flaeche); color: var(--primaer); } body.nav-is-desktop .navigation-main .level_1 > li > strong { color: var(--nav-active-color); } /* Gleitende Hover-Fläche (basis.js): ersetzt den Hintergrund des einzelnen Punktes, mit Skript und Maus */ .NaviFläche { display: none; } body.nav-is-desktop .navigation-main .NaviFläche { display: block; position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; padding: 0 !important; margin: 0 !important; border: 0 !important; background: var(--flaeche); opacity: 0; pointer-events: none; transition: translate .32s var(--weich), width .32s var(--weich), height .32s var(--weich), opacity .2s ease; } body.nav-is-desktop .navigation-main .naviFlächeAn > .NaviFläche { opacity: 1; } body.nav-is-desktop .navigation-main .level_1 { position: relative; } body.nav-is-desktop .navigation-main :is(.level_1, .level_2) > li > :is(a, strong) { position: relative; z-index: 1; } @media (hover: hover) and (pointer: fine) { .js body.nav-is-desktop .navigation-main .level_1 > li:not(:last-child) > a:hover, .js body.nav-is-desktop .navigation-main .level_2 a:hover { background: transparent; } } @media (prefers-reduced-motion: reduce) { .NaviFläche { transition: opacity .15s !important; } } body.nav-is-desktop .navigation-main .level_1 > li > strong::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--primaer); } body.nav-is-desktop .navigation-main .level_1 > li:last-child > :is(a, strong) { background: var(--primaer); color: var(--auf-primaer); margin-left: 8px; } body.nav-is-desktop .navigation-main .level_1 > li:last-child > a:hover { background: var(--primaer-dunkel); } body.nav-is-desktop .navigation-main .level_1 > li:last-child > strong::after { display: none; } /* Mobile Navigation (Struktur wie contao57: .ul-wrapper + Core-navigation.css) */ body.nav-is-mobile .navigation-main :is(a, strong) { padding: 12px 10px !important; margin: 0 !important; text-decoration: none; } body.nav-is-mobile .navigation-main ul { list-style: none; padding: 0; margin: 0; } body.nav-is-mobile .navigation-main .level_1 > li { border-bottom: 1px solid var(--nav-mobile-separator-color); } body.nav-is-mobile .navigation-main .level_1 > li > :is(a, strong) { display: block; font-size: var(--nav-mobile-font-size); color: var(--nav-mobile-color); } body.nav-is-mobile .navigation-main .level_1 > li > strong { color: var(--nav-mobile-active-color); background: var(--nav-mobile-active-background); border-left: 3px solid var(--nav-mobile-active-border-color); } .navigation-main .level_1 .ul-wrapper { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .35s var(--weich); } /* Handy: Unterliste liegt in der Hülle; Contao blendet nur direkte Kinder ein, deshalb hier immer da und per Hülle animiert */ body.nav-is-mobile .navigation-main li > .ul-wrapper > ul { display: flex; visibility: hidden; transition: visibility .35s; } body.nav-is-mobile .navigation-main li.nav-expanded > .ul-wrapper > ul { visibility: visible; } .navigation-main .level_1 li.nav-expanded > .ul-wrapper { grid-template-rows: 1fr; } /* Desktop-Untermenü (Niels 31.10.): die Hülle .ul-wrapper ist nur fürs mobile Aufklappen da; am Desktop zeigt Contao nur ein direktes Kind-ul (li.nav-expanded > ul), deshalb die Hülle dort auflösen */ /* Handy: backdrop-filter macht die Kopfzeile zum Bezugsrahmen für das fixe Menü, es war nur kopfhoch (bis 31.10.) */ body.navigation-open .Kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--grund); } body.nav-is-mobile .navigation-main { padding-top: calc(var(--kopf-unten, 112px) + 12px) !important; } body.nav-is-mobile .navigation-main .btn-toggle-submenu::after { background: var(--primaer) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 22px no-repeat; } body.nav-is-desktop .navigation-main .level_1 .ul-wrapper { display: contents; } body.nav-is-desktop .navigation-main li.nav-expanded > .ul-wrapper > ul { display: flex; } body.nav-is-desktop .navigation-main .level_2 { min-width: 230px; padding: 6px; border-radius: var(--radius); box-shadow: var(--schatten-hoch); border: 1px solid var(--linie); top: calc(100% + 6px); } body.nav-is-desktop .navigation-main .level_2::before { display: none; } body.nav-is-desktop .navigation-main .level_2 li { border: 0 !important; } body.nav-is-desktop .navigation-main .level_2 :is(a, strong) { font-size: .98rem; font-weight: 500; padding: 10px 14px; border-radius: var(--radius-klein); color: var(--text); transition: background .2s, color .2s; } body.nav-is-desktop .navigation-main .level_2 a:hover, body.nav-is-desktop .navigation-main .level_2 strong { background: var(--flaeche); color: var(--primaer); } .navigation-main .level_1 .ul-wrapper > ul { min-height: 0; } .nav-burger { z-index: 60; } /* ---------- Abschnitte ---------- */ main { display: block; } .mod_article { position: relative; } .Abschnitt { padding: var(--abschnitt) var(--rand); position: relative; } .Abschnitt > * { max-width: var(--breite); margin-left: auto; margin-right: auto; } .Abschnitt.Fläche { background: var(--flaeche); } .Abschnitt.dunkel { background: var(--dunkel); color: var(--auf-dunkel); } .Abschnitt.dunkel a:not(.Knopf) { color: #fff; } .AbschnittKopf, .Abschnitt .content-headline { text-align: center; max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); } .AbschnittKopf .rte, .AbschnittKopf p { color: var(--text-leise); font-size: 1.08em; } .dunkel .AbschnittKopf p { color: color-mix(in srgb, var(--auf-dunkel) 80%, transparent); } .Oberzeile { display: inline-block; font: 650 .78rem/1 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--primaer); margin-bottom: 14px; } .links .AbschnittKopf, .AbschnittKopf.links { text-align: left; margin-left: 0; } /* Knöpfe (im Fließtext als ) */ .Knopf, a.Knopf, .KnopfLink a, .content-hyperlink:not(:has(img)) > a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; transition: transform .25s var(--weich), box-shadow .25s, background .2s; box-shadow: 0 6px 18px color-mix(in srgb, var(--akzent) 35%, transparent); } .Knopf::after, .KnopfLink a::after, .content-hyperlink:not(:has(img)) > a::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-pfeil) center/contain no-repeat; mask: var(--i-pfeil) center/contain no-repeat; transition: transform .25s var(--weich); } .Knopf:hover, .KnopfLink a:hover, .content-hyperlink:not(:has(img)) > a:hover { transform: translateY(-2px); color: var(--auf-akzent); box-shadow: 0 10px 26px color-mix(in srgb, var(--akzent) 45%, transparent); } .Knopf:hover::after, .KnopfLink a:hover::after, .content-hyperlink:not(:has(img)) > a:hover::after { transform: translateX(4px); } a.Knopf.zweit { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; } a.Knopf.zweit:hover { background: rgb(255 255 255 / .12); } .Knöpfe, p:has(> .Knopf + .Knopf) { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* ---------- Hero ---------- */ .Abschnitt.Hero { padding: 0; min-height: min(86vh, 820px); display: grid; isolation: isolate; overflow: hidden; color: #fff; } .Abschnitt.Hero > * { grid-area: 1 / 1; max-width: none; margin: 0; } .Hero .content-image, .Hero .content-image figure { height: 100%; margin: 0; } .Hero .content-image img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s var(--weich) both; } .Hero .content-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(10 14 20 / .82) 0%, rgb(10 14 20 / .55) 45%, rgb(10 14 20 / .12) 100%); z-index: 1; } .Hero .content-image { position: relative; z-index: -1; } .Hero .content-text { align-self: center; width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(96px, 12vw, 160px) var(--rand); position: relative; z-index: 2; } .Hero .content-text > * { max-width: 680px; } .Hero .content-text h1 { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); } .Hero .content-text p { font-size: clamp(1.05rem, .5vw + 1rem, 1.3rem); color: rgb(255 255 255 / .9); } .Hero .Oberzeile { color: var(--akzent); } .Hero a.Knopf.zweit { color: #fff; } @keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } } /* Hero geteilt (Text links, Bild rechts) */ .Abschnitt.Hero.geteilt { color: var(--text); min-height: 0; grid-template-columns: 1.05fr 1fr; padding: clamp(48px, 7vw, 96px) var(--rand); max-width: none; gap: clamp(32px, 5vw, 72px); align-items: center; background: linear-gradient(180deg, var(--flaeche), var(--grund)); } .Abschnitt.Hero.geteilt > * { grid-area: auto; } .Hero.geteilt .content-text { padding: 0; max-width: 620px; margin-left: auto; order: -1; } .Hero.geteilt .content-text h1 { color: var(--text); text-shadow: none; } .Hero.geteilt .content-text p { color: var(--text-leise); } .Hero.geteilt .content-image { z-index: 0; max-width: 620px; } .Hero.geteilt .content-image::after { display: none; } .Hero.geteilt .content-image img { border-radius: calc(var(--radius) * 1.6); box-shadow: var(--schatten-hoch); aspect-ratio: 4 / 3.4; animation: none; } .Hero.geteilt a.Knopf.zweit { color: var(--text); } /* Seitenkopf der Unterseiten */ .Abschnitt.Seitenkopf { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); background: var(--flaeche); overflow: hidden; } .Abschnitt.Seitenkopf::before { content: ""; position: absolute; right: -10vw; top: -30%; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primaer) 16%, transparent), transparent); pointer-events: none; } .Seitenkopf .content-text { max-width: var(--breite); } .Seitenkopf .content-text > * { max-width: 760px; } .Seitenkopf h1 { font-size: clamp(2.1rem, 3.6vw + .6rem, 3.6rem); } .Seitenkopf p { color: var(--text-leise); font-size: 1.12em; } /* ---------- Leistungen (Karten) ---------- */ .Abschnitt.Leistungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 2vw, 24px); } .Abschnitt.Leistungen > * { margin: 0; max-width: none; } .Abschnitt.Leistungen > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto clamp(16px, 3vw, 32px); } .Abschnitt.Leistungen { padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); } .Karte { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(24px, 2.4vw, 32px); position: relative; transition: transform .35s var(--weich), box-shadow .35s var(--weich), border-color .35s; } /* Karten heben sich IMMER vom Hintergrund ab (Niels 31.10.: keine weißen Kacheln auf Weiß): auf weißem Abschnitt getönte Fläche, auf heller Fläche weiß mit Schatten, auf dunklem Abschnitt halbtransparent hell */ .Karte { background: color-mix(in srgb, var(--primaer) 6%, var(--grund)); border-color: color-mix(in srgb, var(--primaer) 10%, transparent); } .Fläche .Karte { background: var(--grund); border-color: transparent; box-shadow: var(--schatten); } .dunkel .Karte { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); } .Karte:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); border-color: transparent; } /* Symbol frei ohne Kachel (Niels 31.10., Vorbild jh3yy): ::before hält nur den Platz, ::after ist das Symbol */ .Karte::before { content: ""; display: block; width: 36px; height: 36px; margin-bottom: 18px; } .Karte::after { content: ""; position: absolute; top: clamp(24px, 2.4vw, 32px); left: clamp(24px, 2.4vw, 32px); width: 36px; height: 36px; background: var(--primaer); -webkit-mask: var(--icon, var(--i-haken)) center/contain no-repeat; mask: var(--icon, var(--i-haken)) center/contain no-repeat; transform-origin: 50% 60%; transition: background .35s; } .Karte:hover::after, .Karte:focus-within::after, .Karte.bentoAktiv::after { animation: symbol-wippen .7s var(--weich); } /* Symbol als SVG (basis.js): Linien werden gezeichnet (pathLength=1), beim Hereinscrollen und bei jedem Überfahren */ .Karte.mitSymbol::after { display: none; } .KartenSymbol { position: absolute; top: clamp(24px, 2.4vw, 32px); left: clamp(24px, 2.4vw, 32px); width: 36px; height: 36px; color: var(--primaer); overflow: visible; transition: color .35s; } .Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect) { stroke-dasharray: 1; animation: symbol-zeichnen 1.1s var(--weich) both; } .Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect):nth-child(2) { animation-delay: .12s; } .Karte.zeichnen .KartenSymbol :is(path, circle, ellipse, line, polyline, polygon, rect):nth-child(n+3) { animation-delay: .24s; } @keyframes symbol-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes symbol-wippen { 0% { transform: none; } 30% { transform: translateY(-5px) rotate(-10deg) scale(1.14); } 60% { transform: translateY(0) rotate(6deg) scale(1.04); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .Karte::after { animation: none !important; } } .Karte.ohneIcon::before, .Karte.ohneIcon::after { display: none; } .Bento { position: relative; isolation: isolate; } .Bento > .Karte:nth-of-type(6n + 1) { --ton-kraeftig: #5b43a0; } .Bento > .Karte:nth-of-type(6n + 2) { --ton-kraeftig: #8a5d00; } .Bento > .Karte:nth-of-type(6n + 3) { --ton-kraeftig: #1d6a43; } .Bento > .Karte:nth-of-type(6n + 4) { --ton-kraeftig: #a3304f; } .Bento > .Karte:nth-of-type(6n + 5) { --ton-kraeftig: #0b5f80; } .Bento > .Karte:nth-of-type(6n + 6) { --ton-kraeftig: #a3470f; } .Bento > .Karte { --ton: color-mix(in oklab, var(--ton-kraeftig) 14%, var(--grund)); } .BentoFläche { display: none; } @media (hover: hover) and (pointer: fine) { .BentoFläche { display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; background-color: var(--ton, transparent); transition: translate .45s var(--weich), width .45s var(--weich), height .45s var(--weich), opacity .25s, background-color .45s; } .bentoLäuft > .BentoFläche { opacity: 1; } .BentoSprung > .BentoFläche { transition: opacity .25s; } .Bento > .Karte:hover { transform: none; } .Bento > .Karte, .js .Bento > .Karte.einblenden { transition: opacity .8s var(--weich), transform .8s var(--weich), background-color .3s, border-color .3s, box-shadow .3s; transition-delay: var(--verz, 0s), var(--verz, 0s), 0s, 0s, 0s; } .Bento.bentoLäuft > .Karte.bentoAktiv { background-color: transparent; border-color: transparent; box-shadow: none; } .Bento > .Karte.bentoAktiv::after { background: var(--ton-kraeftig); } .Bento > .Karte.bentoAktiv .KartenSymbol { color: var(--ton-kraeftig); } .Bento > .Karte.bentoAktiv a { color: var(--ton-kraeftig); } } @media (prefers-reduced-motion: reduce) { .BentoFläche { transition: opacity .15s, background-color .15s !important; } } .Karte h3 { margin-bottom: .45em; } .Karte p, .Karte li { color: var(--text-leise); font-size: .97em; } .Karte ul { margin: .6em 0 0; padding-left: 1.1em; } /* ---------- Text + Bild ---------- */ .Abschnitt.TextBild { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); } .Abschnitt.TextBild > * { margin: 0; max-width: none; } .TextBild.BildLinks > .content-image { order: -1; } /* Hochkant-Foto neben Text (Porträt): nicht auf 5:4 quer beschneiden, Gesicht oben halten */ .TextBild.Hochformat .content-image { max-width: 460px; justify-self: center; } .TextBild.Hochformat .content-image img { aspect-ratio: 4 / 5; object-position: 50% 18%; } /* isolation: sonst rutscht das Deko-Rechteck (z-index -1) hinter den Hintergrund von .Fläche und verschwindet */ .TextBild .content-image { position: relative; isolation: isolate; } .TextBild .content-image img { border-radius: calc(var(--radius) * 1.4); box-shadow: var(--schatten-hoch); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } .TextBild .content-image::before { content: ""; position: absolute; inset: auto -18px -18px auto; width: 55%; height: 55%; border-radius: calc(var(--radius) * 1.4); background: color-mix(in srgb, var(--akzent) 22%, transparent); z-index: -1; } .TextBild.BildLinks .content-image::before { inset: auto auto -18px -18px; } .TextBild .content-text ul { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; } .TextBild .content-text li { position: relative; padding-left: 34px; } .TextBild .content-text li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--primaer) 13%, transparent); } .TextBild .content-text li::after { content: ""; position: absolute; left: 5px; top: calc(.2em + 5px); width: 12px; height: 12px; background: var(--primaer); -webkit-mask: var(--i-haken) center/contain no-repeat; mask: var(--i-haken) center/contain no-repeat; } /* ---------- Zahlen ---------- */ .Abschnitt.Zahlen { background: var(--primaer); color: var(--auf-primaer); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); overflow: hidden; } .Abschnitt.Zahlen > * { margin: 0; max-width: none; } .Zahl { text-align: center; } .Zahl h3 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: .1em; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .Zahl p { opacity: .85; font-size: .98em; } /* ---------- Ablauf ---------- */ .Abschnitt.Ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: schritt; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); } .Abschnitt.Ablauf > * { margin: 0; max-width: none; } .Abschnitt.Ablauf > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto clamp(8px, 2vw, 24px); } .Schritt { counter-increment: schritt; position: relative; padding-top: 72px; } .Schritt::before { content: counter(schritt, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 800 2.6rem/1 var(--schrift-titel); color: transparent; -webkit-text-stroke: 1.5px var(--primaer); } .Schritt::after { content: ""; position: absolute; top: 22px; left: 76px; right: -12px; height: 1px; background: linear-gradient(90deg, var(--linie), transparent); } .Schritt:last-child::after { display: none; } .Schritt p { color: var(--text-leise); } /* ---------- Galerie ---------- */ .content-gallery ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; } .content-gallery li { margin: 0; overflow: hidden; border-radius: var(--radius-klein); } .content-gallery figure { margin: 0; } .content-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--weich), filter .4s; } .content-gallery li:hover img { transform: scale(1.06); } .content-gallery figcaption { font-size: .85em; color: var(--text-leise); padding: 8px 2px 0; } /* ---------- Zitat / Hinweis ---------- */ .Abschnitt.Zitat .content-text { max-width: 860px; text-align: center; } .Abschnitt.Zitat blockquote, .Abschnitt.Zitat .content-text p:first-child { font: 500 clamp(1.3rem, 1.4vw + 1rem, 1.9rem)/1.4 var(--schrift-titel); letter-spacing: -0.01em; margin: 0 0 .8em; } /* ---------- CTA ---------- */ .Abschnitt.Aufruf { background: var(--dunkel); color: var(--auf-dunkel); overflow: hidden; isolation: isolate; text-align: center; } .Abschnitt.Aufruf::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primaer) 55%, transparent), transparent); z-index: -1; animation: schweben 14s ease-in-out infinite alternate; } .Abschnitt.Aufruf .content-text { max-width: 760px; } .Abschnitt.Aufruf h2 { color: #fff; } .Abschnitt.Aufruf p { color: color-mix(in srgb, var(--auf-dunkel) 85%, transparent); font-size: 1.1em; } .Abschnitt.Aufruf p:has(.Knopf) { justify-content: center; } @keyframes schweben { to { transform: translate(-12vw, 18%); } } /* Farbverläufe der Abschnitte treiben ganz langsam (Niels 30.10.): nur transform auf eigenen Ebenen, daher ohne Neuzeichnen. Hero „geteilt“: zum linearen Verlauf ein weicher Farbschein, der wandert; Seitenkopf: sein Farbfleck wandert und atmet. */ .Abschnitt.Seitenkopf::before { animation: verlauf-treiben 24s ease-in-out infinite alternate; } .Abschnitt.Hero.geteilt { overflow: hidden; isolation: isolate; } .Abschnitt.Hero.geteilt::before { content: ""; position: absolute; z-index: -1; left: -12%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--akzent) 16%, transparent), transparent); pointer-events: none; animation: verlauf-treiben 28s ease-in-out infinite alternate; } @keyframes verlauf-treiben { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5vw, 8%) scale(1.1); } 100% { transform: translate(-3vw, 14%) scale(.95); } } @media (prefers-reduced-motion: reduce) { .Abschnitt.Seitenkopf::before, .Abschnitt.Hero.geteilt::before, .Abschnitt.Aufruf::before { animation: none; } } /* ---------- Kontakt ---------- */ .Abschnitt.Kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; padding-left: max(var(--rand), (100% - var(--breite)) / 2); padding-right: max(var(--rand), (100% - var(--breite)) / 2); } .Abschnitt.Kontakt > * { margin: 0; max-width: none; } .Abschnitt.Kontakt > .AbschnittKopf { grid-column: 1 / -1; margin: 0 auto 16px; } .Kontakt .Karte a { font-weight: 600; text-decoration: none; } /* Bento-Raster (Niels 31.10.): Karten unterschiedlich groß, je nach Anzahl. Erste Karte zwei Zeilen hoch, Titel unten. */ @media (min-width: 901px) { .Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) { grid-row: span 2; display: flex; flex-direction: column; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte)::before { margin-bottom: auto; padding-bottom: 48px; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte)::after, .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) .KartenSymbol { width: 48px; height: 48px; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte)) > .Karte:nth-child(1 of .Karte) h3 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(2 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(1 of .Karte) { grid-column: span 2; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(3 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(n+2 of .Karte) { grid-column: span 2; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(4 of .Karte)) > .Karte:nth-child(2 of .Karte) { grid-column: span 2; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(5 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(5 of .Karte), .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(8 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(8 of .Karte) { grid-column: 1 / -1; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(6 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(6 of .Karte), .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(9 of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-child(9 of .Karte) { grid-column: span 2; } } @media (min-width: 601px) and (max-width: 900px) { .Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .Abschnitt:is(.Leistungen, .Kontakt) > .Karte:nth-child(1 of .Karte) { grid-column: 1 / -1; } .Abschnitt:is(.Leistungen, .Kontakt):has(> .Karte:nth-child(even of .Karte):nth-last-child(1 of .Karte)) > .Karte:nth-last-child(1 of .Karte) { grid-column: 1 / -1; } } @media (max-width: 600px) { .Abschnitt:is(.Leistungen, .Kontakt) { grid-template-columns: minmax(0, 1fr); } } /* ---------- FAQ ---------- */ .Abschnitt.FAQ > .content-text:not(.AbschnittKopf) { max-width: 860px; border-bottom: 1px solid var(--linie); } .FAQ .content-text:not(.AbschnittKopf) h3 { margin: 0; padding: 22px 48px 22px 0; cursor: pointer; position: relative; font-size: 1.15rem; } .FAQ .content-text:not(.AbschnittKopf) h3::after { content: ""; position: absolute; right: 6px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--primaer); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); } .FAQ .offen h3::after { transform: rotate(45deg); } .FAQ .content-text:not(.AbschnittKopf) .rte { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--weich); } .FAQ .content-text:not(.AbschnittKopf) .rte > * { overflow: hidden; min-height: 0; } /* offen braucht dieselbe Spezifität wie die Grundregel darüber, sonst blieb die Antwort zu (bis 31.10. auf allen Seiten) */ .FAQ .content-text.offen:not(.AbschnittKopf) .rte { grid-template-rows: 1fr; } .FAQ .AntwortInnen { overflow: hidden; color: var(--text-leise); } .FAQ .AntwortInnen::after { content: ""; display: block; height: 22px; } /* Abstand unten fährt mit auf und zu */ /* ---------- Fließtext-Seiten (Impressum, Datenschutz) ---------- */ .Abschnitt.Text .content-text { max-width: 820px; } .Abschnitt.Text .content-text:not(.AbschnittKopf) h2 { font-size: 1.5rem; margin-top: 1.6em; } .Abschnitt.Text h3 { font-size: 1.15rem; margin-top: 1.4em; } /* ---------- Fuß ---------- */ .Fuß { background: var(--dunkel); color: var(--auf-dunkel); font-size: .95rem; } .Fuß > .innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--rand) 32px; } .Fuß .content-element-group { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .Fuß a { color: #fff; text-decoration: none; } .Fuß a:hover { text-decoration: underline; color: #fff; } .Fuß h3 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .9; margin-bottom: 1em; } .Fuß p { color: color-mix(in srgb, var(--auf-dunkel) 78%, transparent); } .Fuß .FußMarke { font: var(--titel-gewicht) 1.4rem/1.2 var(--schrift-titel); color: #fff; margin-bottom: .6em; text-transform: var(--titel-transform); } .FußUnten { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / .12); padding-top: 22px; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; opacity: .75; } /* seit 30.10. ein Textelement (Kunde bearbeitet den Fuß): Absatz mit zwei Teilen, links und rechts */ .FußUnten .rte, .FußUnten p { display: contents; } .FußUnten p > span { display: block; } /* ---------- Bewegung: Einblenden beim Scrollen ---------- */ .js .einblenden { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--weich), transform .8s var(--weich); transition-delay: var(--verz, 0s); } .js .einblenden.sichtbar { opacity: 1; transform: none; } .js .Hero .content-text > * { animation: hoch .9s var(--weich) both; } .js .Hero .content-text > :nth-child(2) { animation-delay: .12s; } .js .Hero .content-text > :nth-child(3) { animation-delay: .24s; } .js .Hero .content-text > :nth-child(4) { animation-delay: .36s; } @keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ---------- Icons (Masken) ---------- */ :root { --i-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --i-haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); } /* Kartensymbole: erzeugt von werkzeuge/symbole.mjs (Lucide 0.556.0, ISC-Lizenz, lucide.dev; Kerze und Balkon eigene). Nicht von Hand ändern. */ .IconAbschluss { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E"); } .IconAntenne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12 7 2'/%3E%3Cpath d='m7 12 5-10'/%3E%3Cpath d='m12 12 5-10'/%3E%3Cpath d='m17 12 5-10'/%3E%3Cpath d='M4.5 7h15'/%3E%3Cpath d='M12 16v6'/%3E%3C/svg%3E"); } .IconAnzeige { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); } .IconAuge { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .IconAuto { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); } .IconAutofront { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 8-2 2-1.5-3.7A2 2 0 0 0 15.646 5H8.4a2 2 0 0 0-1.903 1.257L5 10 3 8'/%3E%3Cpath d='M7 14h.01'/%3E%3Cpath d='M17 14h.01'/%3E%3Crect width='18' height='8' x='3' y='10' rx='2'/%3E%3Cpath d='M5 18v2'/%3E%3Cpath d='M19 18v2'/%3E%3C/svg%3E"); } .IconBalkon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='3' width='12' height='9'/%3E%3Cpath d='M12 3v9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M4 12v8'/%3E%3Cpath d='M8 12v8'/%3E%3Cpath d='M12 12v8'/%3E%3Cpath d='M16 12v8'/%3E%3Cpath d='M20 12v8'/%3E%3C/svg%3E"); } .IconBauhelm { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5'/%3E%3Cpath d='M14 6a6 6 0 0 1 6 6v3'/%3E%3Cpath d='M4 15v-3a6 6 0 0 1 6-6'/%3E%3Crect x='2' y='15' width='20' height='4' rx='1'/%3E%3C/svg%3E"); } .IconBaustelle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='8' rx='1'/%3E%3Cpath d='M17 14v7'/%3E%3Cpath d='M7 14v7'/%3E%3Cpath d='M17 3v3'/%3E%3Cpath d='M7 3v3'/%3E%3Cpath d='M10 14 2.3 6.3'/%3E%3Cpath d='m14 6 7.7 7.7'/%3E%3Cpath d='m8 6 8 8'/%3E%3C/svg%3E"); } .IconBildschirm { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E"); } .IconBlatt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); } .IconBlitz { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E"); } .IconBlume { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E"); } .IconBrief { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); } .IconBrille { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='15' r='4'/%3E%3Ccircle cx='18' cy='15' r='4'/%3E%3Cpath d='M14 15a2 2 0 0 0-2-2 2 2 0 0 0-2 2'/%3E%3Cpath d='M2.5 13 5 7c.7-1.3 1.4-2 3-2'/%3E%3Cpath d='M21.5 13 19 7c-.7-1.3-1.5-2-3-2'/%3E%3C/svg%3E"); } .IconCheckliste { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); } .IconDose { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='m4 8 16-4'/%3E%3Cpath d='m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8'/%3E%3C/svg%3E"); } .IconDruck { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6'/%3E%3Crect x='6' y='14' width='12' height='8' rx='1'/%3E%3C/svg%3E"); } .IconEi { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2C8 2 4 8 4 14a8 8 0 0 0 16 0c0-6-4-12-8-12'/%3E%3C/svg%3E"); } .IconEuro { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12'/%3E%3Cpath d='M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E"); } .IconFarbrolle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E"); } .IconFeuerlöscher { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6.5V3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3.5'/%3E%3Cpath d='M9 18h8'/%3E%3Cpath d='M18 3h-3'/%3E%3Cpath d='M11 3a6 6 0 0 0-6 6v11'/%3E%3Cpath d='M5 13h4'/%3E%3Cpath d='M17 10a4 4 0 0 0-8 0v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2Z'/%3E%3C/svg%3E"); } .IconFlamme { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E"); } .IconFunkeln { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); } .IconGebäude { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); } .IconGlocke { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20a1 1 0 0 1-1-1v-1a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1Z'/%3E%3Cpath d='M20 16a8 8 0 1 0-16 0'/%3E%3Cpath d='M12 4v4'/%3E%3Cpath d='M10 4h4'/%3E%3C/svg%3E"); } .IconHagel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242'/%3E%3Cpath d='M16 14v2'/%3E%3Cpath d='M8 14v2'/%3E%3Cpath d='M16 20h.01'/%3E%3Cpath d='M8 20h.01'/%3E%3Cpath d='M12 16v2'/%3E%3Cpath d='M12 22h.01'/%3E%3C/svg%3E"); } .IconHaken { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .IconHammer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E"); } .IconHaus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .IconHaussteuerung { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12V8.964'/%3E%3Cpath d='M14 12V8.964'/%3E%3Cpath d='M15 12a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8.5 21H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-2'/%3E%3C/svg%3E"); } .IconHerz { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E"); } .IconJalousie { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18'/%3E%3Cpath d='M20 7H8'/%3E%3Cpath d='M20 11H8'/%3E%3Cpath d='M10 19h10'/%3E%3Cpath d='M8 15h12'/%3E%3Cpath d='M4 3v14'/%3E%3Ccircle cx='4' cy='19' r='2'/%3E%3C/svg%3E"); } .IconKabel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 19a1 1 0 0 1-1-1v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a1 1 0 0 1-1 1z'/%3E%3Cpath d='M17 21v-2'/%3E%3Cpath d='M19 14V6.5a1 1 0 0 0-7 0v11a1 1 0 0 1-7 0V10'/%3E%3Cpath d='M21 21v-2'/%3E%3Cpath d='M3 5V3'/%3E%3Cpath d='M4 10a2 2 0 0 1-2-2V6a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2z'/%3E%3Cpath d='M7 5V3'/%3E%3C/svg%3E"); } .IconKerze { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5c1.7 1.9 2.2 3 2.2 3.9a2.2 2.2 0 0 1-4.4 0c0-.9.5-2 2.2-3.9z'/%3E%3Cpath d='M12 8.6V10'/%3E%3Crect x='9' y='10' width='6' height='11' rx='1'/%3E%3Cpath d='M6 21h12'/%3E%3C/svg%3E"); } .IconLamellen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='M15 3v18'/%3E%3C/svg%3E"); } .IconLampe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); } .IconLineal { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E"); } .IconLkw { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } .IconLüfter { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z'/%3E%3Cpath d='M12 12v.01'/%3E%3C/svg%3E"); } .IconMond { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E"); } .IconNetzwerk { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/%3E%3Cpath d='M12 12V8'/%3E%3C/svg%3E"); } .IconOhr { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0'/%3E%3Cpath d='M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4'/%3E%3C/svg%3E"); } .IconOrt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .IconParken { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 17V7h4a3 3 0 0 1 0 6H9'/%3E%3C/svg%3E"); } .IconPinsel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.622 17.897-10.68-2.913'/%3E%3Cpath d='M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z'/%3E%3Cpath d='M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15'/%3E%3C/svg%3E"); } .IconPlan { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13'/%3E%3Cpath d='m8 6 2-2'/%3E%3Cpath d='m18 16 2-2'/%3E%3Cpath d='m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17'/%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E"); } .IconPräsentation { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20'/%3E%3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3'/%3E%3Cpath d='m7 21 5-5 5 5'/%3E%3C/svg%3E"); } .IconRauchmelder { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21c0-2.5 2-2.5 2-5'/%3E%3Cpath d='M16 21c0-2.5 2-2.5 2-5'/%3E%3Cpath d='m19 8-.8 3a1.25 1.25 0 0 1-1.2 1H7a1.25 1.25 0 0 1-1.2-1L5 8'/%3E%3Cpath d='M21 3a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M6 21c0-2.5 2-2.5 2-5'/%3E%3C/svg%3E"); } .IconRollo { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17V5a2 2 0 0 0-2-2H4'/%3E%3Cpath d='M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E"); } .IconSchale { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M19.5 12 22 6'/%3E%3Cpath d='M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62'/%3E%3Cpath d='M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62'/%3E%3Cpath d='M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62'/%3E%3C/svg%3E"); } .IconSchaufel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.56 4.56a1.5 1.5 0 0 1 0 2.122l-.47.47a3 3 0 0 1-4.212-.03 3 3 0 0 1 0-4.243l.44-.44a1.5 1.5 0 0 1 2.121 0z'/%3E%3Cpath d='M3 22a1 1 0 0 1-1-1v-3.586a1 1 0 0 1 .293-.707l3.355-3.355a1.205 1.205 0 0 1 1.704 0l3.296 3.296a1.205 1.205 0 0 1 0 1.704l-3.355 3.355a1 1 0 0 1-.707.293z'/%3E%3Cpath d='m9 15 7.879-7.878'/%3E%3C/svg%3E"); } .IconSchere { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12 12 12'/%3E%3Cpath d='M20 4 8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8 20 20'/%3E%3C/svg%3E"); } .IconSchichten { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E"); } .IconSchild { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .IconSchriftzug { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M9 20h6'/%3E%3C/svg%3E"); } .IconSchule { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M18 5v16'/%3E%3Cpath d='m4 6 7.106-3.79a2 2 0 0 1 1.788 0L20 6'/%3E%3Cpath d='m6 11-3.52 2.147a1 1 0 0 0-.48.854V19a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a1 1 0 0 0-.48-.853L18 11'/%3E%3Cpath d='M6 5v16'/%3E%3Ccircle cx='12' cy='9' r='2'/%3E%3C/svg%3E"); } .IconSessel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z'/%3E%3Cpath d='M5 18v2'/%3E%3Cpath d='M19 18v2'/%3E%3C/svg%3E"); } .IconSetzling { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); } .IconSofa { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z'/%3E%3Cpath d='M4 18v2'/%3E%3Cpath d='M20 18v2'/%3E%3Cpath d='M12 4v9'/%3E%3C/svg%3E"); } .IconSonne { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); } .IconSpraydose { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h.01'/%3E%3Cpath d='M7 5h.01'/%3E%3Cpath d='M11 7h.01'/%3E%3Cpath d='M3 7h.01'/%3E%3Cpath d='M7 9h.01'/%3E%3Cpath d='M3 11h.01'/%3E%3Crect width='4' height='4' x='15' y='5'/%3E%3Cpath d='m19 9 2 2v10c0 .6-.4 1-1 1h-6c-.6 0-1-.4-1-1V11l2-2'/%3E%3Cpath d='m13 14 8-2'/%3E%3Cpath d='m13 19 8-2'/%3E%3C/svg%3E"); } .IconSpritze { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4'/%3E%3Cpath d='m17 7 3-3'/%3E%3Cpath d='M19 9 8.7 19.3c-1 1-2.5 1-3.4 0l-.6-.6c-1-1-1-2.5 0-3.4L15 5'/%3E%3Cpath d='m9 11 4 4'/%3E%3Cpath d='m5 19-3 3'/%3E%3Cpath d='m14 4 6 6'/%3E%3C/svg%3E"); } .IconSpule { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 13.44 4.442 17.082A2 2 0 0 0 4.982 21H19a2 2 0 0 0 .558-3.921l-1.115-.32A2 2 0 0 1 17 14.837V7.66'/%3E%3Cpath d='m7 10.56 12.558-3.642A2 2 0 0 0 19.018 3H5a2 2 0 0 0-.558 3.921l1.115.32A2 2 0 0 1 7 9.163v7.178'/%3E%3C/svg%3E"); } .IconStern { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); } .IconStoff { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E"); } .IconSuche { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E"); } .IconTasse { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E"); } .IconTeam { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); } .IconTelefon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); } .IconThermometer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E"); } .IconTropfen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); } .IconTür { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20H2'/%3E%3Cpath d='M11 4.562v16.157a1 1 0 0 0 1.242.97L19 20V5.562a2 2 0 0 0-1.515-1.94l-4-1A2 2 0 0 0 11 4.561z'/%3E%3Cpath d='M11 4H8a2 2 0 0 0-2 2v14'/%3E%3Cpath d='M14 12h.01'/%3E%3Cpath d='M22 20h-3'/%3E%3C/svg%3E"); } .IconUhr { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); } .IconVase { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v5.632c0 .424-.272.795-.653.982A6 6 0 0 0 6 14c.006 4 3 7 5 8'/%3E%3Cpath d='M10 5H8a2 2 0 0 0 0 4h.68'/%3E%3Cpath d='M14 2v5.632c0 .424.272.795.652.982A6 6 0 0 1 18 14c0 4-3 7-5 8'/%3E%3Cpath d='M14 5h2a2 2 0 0 1 0 4h-.68'/%3E%3Cpath d='M18 22H6'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E"); } .IconVorhang { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10s3-3 3-8'/%3E%3Cpath d='M22 10s-3-3-3-8'/%3E%3Cpath d='M10 2c0 4.4-3.6 8-8 8'/%3E%3Cpath d='M14 2c0 4.4 3.6 8 8 8'/%3E%3Cpath d='M2 10s2 2 2 5'/%3E%3Cpath d='M22 10s-2 2-2 5'/%3E%3Cpath d='M8 15h8'/%3E%3Cpath d='M2 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M14 22v-1a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); } .IconWärme { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 8a4 4 0 0 0-1.645 7.647'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3C/svg%3E"); } .IconWarnung { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .IconWegweiser { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8'/%3E%3Cpath d='M12 3v3'/%3E%3Cpath d='M18 6a2 2 0 0 1 1.387.56l2.307 2.22a1 1 0 0 1 0 1.44l-2.307 2.22A2 2 0 0 1 18 13H6a2 2 0 0 1-1.387-.56l-2.306-2.22a1 1 0 0 1 0-1.44l2.306-2.22A2 2 0 0 1 6 6z'/%3E%3C/svg%3E"); } .IconWeizen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 22 16 8'/%3E%3Cpath d='M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z'/%3E%3Cpath d='M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z'/%3E%3Cpath d='M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3Cpath d='M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z'/%3E%3C/svg%3E"); } .IconWerkzeug { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z'/%3E%3C/svg%3E"); } .IconWerkzeugkoffer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 15h4'/%3E%3Cpath d='m14.817 10.995-.971-1.45 1.034-1.232a2 2 0 0 0-2.025-3.238l-1.82.364L9.91 3.885a2 2 0 0 0-3.625.748L6.141 6.55l-1.725.426a2 2 0 0 0-.19 3.756l.657.27'/%3E%3Cpath d='m18.822 10.995 2.26-5.38a1 1 0 0 0-.557-1.318L16.954 2.9a1 1 0 0 0-1.281.533l-.924 2.122'/%3E%3Cpath d='M4 12.006A1 1 0 0 1 4.994 11H19a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .IconZiegel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M12 9v6'/%3E%3Cpath d='M16 15v6'/%3E%3Cpath d='M16 3v6'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 15v6'/%3E%3Cpath d='M8 3v6'/%3E%3C/svg%3E"); } /* Ende Kartensymbole */ /* ---------- Mobil ---------- */ @media (max-width: 900px) { .Abschnitt.TextBild, .Abschnitt.Hero.geteilt { grid-template-columns: 1fr; } .TextBild.BildLinks > .content-image { order: 0; } .Hero.geteilt .content-text { margin: 0; } .Fuß .content-element-group { grid-template-columns: 1fr; gap: 28px; } .Schritt::after { display: none; } .Abschnitt.Hero { min-height: 78vh; } .EntwurfHinweis { font-size: 12.5px; } .Logo img { height: 44px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js .einblenden { opacity: 1; transform: none; } @view-transition { navigation: none; } } /* Oberzeile steht im Fließtext, soll aber ÜBER der Überschrift erscheinen */ .content-text:has(.Oberzeile) { display: flex; flex-direction: column; } .content-text:has(.Oberzeile) > .rte { display: contents; } .content-text .Oberzeile { order: -1; } .AbschnittKopf:has(.Oberzeile) { align-items: center; } .AbschnittKopf.links:has(.Oberzeile), .links .AbschnittKopf:has(.Oberzeile) { align-items: flex-start; } .Hero .content-text:has(.Oberzeile) > *, .Seitenkopf .content-text:has(.Oberzeile) > * { max-width: 680px; } .Hero.geteilt .content-text:has(.Oberzeile) { align-items: flex-start; } /* ---------- Logo-Vorschläge (/logos) ---------- */ .LogoRaster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .LogoRaster { grid-template-columns: 1fr; } } .LogoVorschlag.imKopf { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer); } .LogoVorschlag figcaption em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: var(--primaer); } .LogoVorschlag { margin: 0; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; transition: transform .35s var(--weich), box-shadow .35s; } .LogoVorschlag:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); } .LogoFläche { aspect-ratio: 16 / 7; display: grid; place-items: center; padding: 28px; background: #fff; } .LogoFläche img { max-height: 100%; max-width: 100%; width: auto; } .LogoVorschlag figcaption { padding: 12px 18px; border-top: 1px solid var(--linie); font-size: .92rem; color: var(--text-leise); } .LogoVorschlag figcaption strong { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primaer); color: var(--auf-primaer); margin-right: 8px; font-size: .85rem; } /* ---------- Freie Kernelemente (Beispielseite und eigene Inhalte der Kunden) ---------- */ .Abschnitt.Text > .content-text + *, .Abschnitt.Text > * + * { margin-top: clamp(28px, 4vw, 44px); } .Abschnitt.Text > * { max-width: 860px; } .content-text.media--left > figure, .content-text .media--left figure { float: left; margin: 4px 28px 12px 0; max-width: 42%; } .content-text.media--right > figure, .content-text .media--right figure { float: right; margin: 4px 0 12px 28px; max-width: 42%; } .content-text figure img { border-radius: var(--radius-klein); } .content-text::after { content: ""; display: table; clear: both; } .content-list ul, .content-list ol { padding-left: 1.3em; line-height: 1.8; } /* Liste neben einem umflossenen Bild: ohne eigenen Block rückten die Punkte bis ans Bild (Niels 30.10.) */ .content-text.media :is(ul, ol), .content-text .media :is(ul, ol) { display: flow-root; padding-left: 1.3em; } /* breite Tabellen scrollen auf dem Handy in ihrem eigenen Kasten statt die Seite seitlich zu verschieben (Abnahme 30.10.) */ .content-table { max-width: 100%; overflow-x: auto; } .content-table table { width: 100%; border-collapse: collapse; background: var(--grund); border-radius: var(--radius-klein); overflow: hidden; box-shadow: var(--schatten); font-size: .97em; } .content-table th { background: var(--primaer); color: var(--auf-primaer); text-align: left; font-weight: 600; } .content-table th, .content-table td { padding: 12px 16px; } .content-table tbody tr:nth-child(even) td { background: var(--flaeche); } .content-table td, .content-table th { transition: background .2s, color .2s; } @media (hover: hover) { .content-table table tbody tr:hover > * { background: color-mix(in srgb, var(--primaer) 9%, var(--grund)); } .content-table table:has(td:nth-child(1):hover) td:nth-child(1) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(1):hover) thead th:nth-child(1) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(2):hover) td:nth-child(2) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(2):hover) thead th:nth-child(2) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(3):hover) td:nth-child(3) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(3):hover) thead th:nth-child(3) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(4):hover) td:nth-child(4) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(4):hover) thead th:nth-child(4) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(5):hover) td:nth-child(5) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(5):hover) thead th:nth-child(5) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(6):hover) td:nth-child(6) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(6):hover) thead th:nth-child(6) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(7):hover) td:nth-child(7) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(7):hover) thead th:nth-child(7) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:nth-child(8):hover) td:nth-child(8) { background: color-mix(in srgb, var(--primaer) 7%, var(--grund)); } .content-table table:has(td:nth-child(8):hover) thead th:nth-child(8) { background: color-mix(in srgb, var(--primaer) 82%, #000); } .content-table table:has(td:hover) tbody tr:hover > td:hover { background: color-mix(in srgb, var(--akzent) 24%, var(--grund)); } } .content-image figcaption { font-size: .88em; color: var(--text-leise); margin-top: 8px; } .content-image img { border-radius: var(--radius-klein); } /* Akkordeon (Contao-Kern, handorgel) */ .content-accordion { --akk-flaeche: color-mix(in srgb, var(--primaer) 5%, var(--grund)); } .Fläche .content-accordion { --akk-flaeche: var(--grund); } .content-accordion .handorgel__header { margin: 10px 0 0; background: var(--akk-flaeche); border-radius: var(--radius-klein); transition: border-radius .2s; } .content-accordion .handorgel__header--open { border-radius: var(--radius-klein) var(--radius-klein) 0 0; } .content-accordion .handorgel__header__button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; padding: 18px 60px 18px 24px; position: relative; font: var(--titel-gewicht) 1.1rem/1.3 var(--schrift-titel); color: var(--text); } .content-accordion .handorgel__header__button::after { content: ""; position: absolute; right: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--primaer); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); } .content-accordion .handorgel__header--open .handorgel__header__button::after { transform: rotate(45deg); } .content-accordion .handorgel__content, .content-accordion .handorgel__content--open { transition: height .4s var(--weich); } .content-accordion .handorgel__content { background: var(--akk-flaeche); border-top: 1px solid var(--linie); border-radius: 0 0 var(--radius-klein) var(--radius-klein); } .content-accordion .handorgel__content__inner { padding: 18px 24px 22px; color: var(--text-leise); } .content-accordion .handorgel__content__inner > :last-child, .content-accordion .handorgel__content__inner .rte > :last-child { margin-bottom: 0; } /* Slider (Contao-Kern, swiper) */ .content-swiper .swiper { padding-bottom: 44px; --swiper-navigation-size: 48px; --swiper-navigation-sides-offset: 18px; --swiper-navigation-top-offset: calc(50% - 22px); } .content-swiper .swiper-slide figure { margin: 0; } .content-swiper img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); } .content-swiper .swiper-button-prev, .content-swiper .swiper-button-next { width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--text); box-shadow: 0 4px 16px rgb(16 24 32 / .18); transition: background .2s, color .2s, transform .25s var(--weich); } .content-swiper .swiper-button-prev:hover, .content-swiper .swiper-button-next:hover { background: var(--primaer); color: var(--auf-primaer); transform: scale(1.06); } .content-swiper .swiper-navigation-icon { width: 11px; height: 18px; } .content-swiper .swiper-pagination { bottom: 8px !important; } .content-swiper .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px !important; background: var(--text-leise); opacity: .35; transition: width .3s var(--weich), opacity .3s, background .3s; border-radius: 999px; } .content-swiper .swiper-pagination-bullet-active { width: 26px; opacity: 1; background: var(--primaer); } @media (max-width: 640px) { .content-swiper .swiper-button-prev, .content-swiper .swiper-button-next { width: 40px; height: 40px; } .content-swiper .swiper { --swiper-navigation-sides-offset: 10px; } } /* ---------- Lightbox: jedes Inhaltsbild öffnet groß (basis.js) ---------- */ .LichtboxBild { cursor: zoom-in; } .Lichtbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; } /* Der dunkle Grund ist eine eigene Ebene (nicht ::backdrop): er blendet erst nach dem Flug des Bildes ein (basis.js) */ .Lichtbox::backdrop { background: transparent; } .LichtboxGrund { position: absolute; inset: 0; background: rgb(8 10 14 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .Lichtbox[open] { display: grid; place-items: center; } .Lichtbox figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 12px; max-width: calc(100vw - 160px); } .LichtboxRahmen { display: block; overflow: hidden; border-radius: var(--radius-klein); box-shadow: 0 20px 60px rgb(0 0 0 / .5); } .Lichtbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; } /* lädt noch: nichts zeigen; ohne Flug (kein Vorschaubild im Bild, weniger Bewegung): einblenden; Blättern: neues Bild gleitet herein */ .Lichtbox.wartet > * { opacity: 0; } .Lichtbox.blenden .LichtboxGrund { animation: lb-ein .25s var(--weich); } .Lichtbox.blenden figure { animation: lb-bild .3s var(--weich); } /* solange die Lightbox offen ist: Vorschaubilder ohne Hover-Zoom, sonst landet der Rückflug auf einer anderen Größe */ .lichtboxOffen .LichtboxBild { transform: none !important; transition: none !important; } .Lichtbox.fliegt .LichtboxRahmen { will-change: transform; } .Lichtbox figcaption { font-size: .95rem; color: rgb(255 255 255 / .85); text-align: center; } .Lichtbox figcaption:empty { display: none; } .Lichtbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background .2s, transform .25s var(--weich); } .Lichtbox button:hover, .Lichtbox button:focus-visible { background: rgb(255 255 255 / .26); transform: scale(1.06); outline: none; } .Lichtbox button svg { width: 22px; height: 22px; } .Lichtbox .LichtboxSchließen { top: 18px; right: 18px; } .Lichtbox .LichtboxZurück { left: 24px; top: 50%; margin-top: -26px; } .Lichtbox .LichtboxWeiter { right: 24px; top: 50%; margin-top: -26px; } .Lichtbox .LichtboxZahl { position: absolute; top: 30px; left: 28px; font-size: .9rem; color: rgb(255 255 255 / .7); } .Lichtbox.einzeln .LichtboxZurück, .Lichtbox.einzeln .LichtboxWeiter, .Lichtbox.einzeln .LichtboxZahl { display: none; } @media (max-width: 640px) { .Lichtbox figure { max-width: calc(100vw - 24px); } .Lichtbox .LichtboxZurück, .Lichtbox .LichtboxWeiter { top: auto; bottom: 20px; margin: 0; } .Lichtbox .LichtboxZurück { left: calc(50% - 64px); } .Lichtbox .LichtboxWeiter { right: calc(50% - 64px); } .Lichtbox img { max-height: calc(100vh - 180px); } } @keyframes lb-ein { from { opacity: 0; } } @keyframes lb-bild { from { opacity: 0; transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { .Lichtbox * { animation: none !important; } } /* Aufklapp-Text aus dem Editor (TinyMCE-Knopf „Akkordeon“ =
), animiert wie die FAQ */ .rte details { border-bottom: 1px solid var(--linie); } .rte details summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-weight: 650; } .rte details summary::-webkit-details-marker { display: none; } .rte details summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--primaer); -webkit-mask: var(--i-plus) center/contain no-repeat; mask: var(--i-plus) center/contain no-repeat; transition: transform .35s var(--weich); } .rte details[open] summary::after { transform: rotate(45deg); } .rte details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--weich), content-visibility .4s allow-discrete; } .rte details[open]::details-content { block-size: auto; } .rte details > :not(summary) { color: var(--text-leise); } .rte details > :last-child:not(summary) { padding-bottom: 16px; } html { interpolate-size: allow-keywords; } /* ---------- Video (YouTube/Vimeo mit Vorschaubild, Niels 30.10.: direkt auf der Seite abspielbar) ---------- Contao lädt das Video erst nach dem Klick auf das Poster und nennt dabei die Übertragung der IP-Adresse. */ :is(.content-vimeo, .content-youtube) { max-width: 960px; margin-left: auto; margin-right: auto; } :is(.content-vimeo, .content-youtube) figure { position: relative; margin: 0; border-radius: calc(var(--radius) * 1.4); overflow: hidden; box-shadow: var(--schatten-hoch); background: #000; aspect-ratio: 16 / 9; } :is(.content-vimeo, .content-youtube) figure.aspect--4\:3 { aspect-ratio: 4 / 3; } :is(.content-vimeo, .content-youtube) figure.aspect--9\:16 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; } :is(.content-vimeo, .content-youtube) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } :is(.content-vimeo, .content-youtube) button[data-splash-screen] { all: unset; position: absolute; inset: 0; display: block; cursor: pointer; } :is(.content-vimeo, .content-youtube) button[data-splash-screen] img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--weich), filter .4s; } :is(.content-vimeo, .content-youtube) button[data-splash-screen]:is(:hover, :focus-visible) img { transform: scale(1.03); filter: brightness(.92); } :is(.content-vimeo, .content-youtube) button[data-splash-screen]::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--primaer); box-shadow: 0 10px 30px rgb(0 0 0 / .35); transition: transform .3s var(--weich); } :is(.content-vimeo, .content-youtube) button[data-splash-screen]::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -11px; background: var(--auf-primaer, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4l15 8-15 8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4l15 8-15 8z'/%3E%3C/svg%3E") center / contain no-repeat; } :is(.content-vimeo, .content-youtube) button[data-splash-screen]:is(:hover, :focus-visible)::before { transform: scale(1.08); } :is(.content-vimeo, .content-youtube) button[data-splash-screen] > span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 10px 20px; font-size: .9rem; line-height: 1.4; color: #fff; text-align: center; background: rgb(0 0 0 / .72); } :is(.content-vimeo, .content-youtube) figcaption { padding: 10px 2px 0; font-size: .92rem; color: var(--text-leise); }