.msdesign-layout { --msd-porzellan: #f1f3f2; --msd-sand: #f6f0ea; --msd-tint: #efe4da; --msd-tint-2: #e6d7c8; --msd-fuge-fein: #dbe0dd; --msd-ink: #221e1c; --msd-text: #4e4744; --msd-label: #6a635e; --msd-kast: #91745b; --msd-kast-voll: #856950; --msd-kast-text: #79604a; --msd-kast-tief: #6f5541; --msd-braun: #241f1f; --msd-messing: #c9a271; --msd-nacht-text: #cfc4bd; --msd-gedaempft: #9a8f88; --msd-haus: Verdana, 'DejaVu Sans Web', Tahoma, Geneva, sans-serif; --msd-kurve: cubic-bezier(0.16, 0.84, 0.44, 1); --msd-r-klein: 12px; --msd-r-flaeche: 20px; --msd-r-karte: 24px; --msd-r-gross: 30px; --msd-weich: 0 28px 60px -34px rgba(70, 50, 38, 0.3), 0 2px 8px rgba(70, 50, 38, 0.04); --msd-weich-hoch: 0 36px 70px -30px rgba(70, 50, 38, 0.36), 0 2px 8px rgba(70, 50, 38, 0.05); --msd-rand: clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem); --msd-bahn: 76rem; --msd-sektion: clamp(3.5rem, 2.4rem + 4vw, 6.5rem); --msd-kopf-hoehe: 4.3rem; background: var(--msd-porzellan); color: var(--msd-text); font-family: var(--msd-haus); font-size: 1.04rem; line-height: 1.7; text-rendering: optimizeLegibility; } .msdesign-layout :where(h1, h2, h3, h4) { font-family: var(--msd-haus); color: var(--msd-ink); font-weight: 700; letter-spacing: -0.028em; line-height: 1.16; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; margin: 0; } .msdesign-layout :where(p) { margin: 0; text-wrap: pretty; } :where(.msdesign-layout) a { text-decoration: none; color: inherit; } .msdesign-layout :focus-visible { outline: 2px solid var(--msd-kast-voll); outline-offset: 3px; border-radius: 6px; } .msdesign-layout a[href^='mailto:'], .msdesign-layout a[href^='tel:'] { white-space: nowrap; } .msd-nur-vorlesen, .msd-galerie-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .msd-bahn { max-width: var(--msd-bahn); margin-inline: auto; padding-inline: var(--msd-rand); width: 100%; } .msd-bahn-schmal { max-width: 46rem; margin-inline: auto; padding-inline: var(--msd-rand); width: 100%; } .msd-sek { padding-block: var(--msd-sektion); } .msd-sek[data-anschluss] { padding-top: 0; } .msd-sek-sand { background: var(--msd-sand); } .msd-sek-weiss { background: #fff; } .msd-pille { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--msd-tint); color: var(--msd-kast-tief); border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.84rem; font-weight: 700; line-height: 1.3; } .msd-pille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--msd-kast); flex: 0 0 auto; } .msd-pille-dunkel { background: rgba(201, 162, 113, 0.18); color: var(--msd-messing); } .msd-pille-dunkel::before { background: var(--msd-messing); } .msd-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 50px; padding: 0.85rem 1.6rem; border-radius: var(--msd-r-klein); background: var(--msd-kast-voll); color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.3; text-align: center; border: 0; font-family: inherit; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(133, 105, 80, 0.7); transition: background 200ms ease; } .msd-knopf:hover { background: var(--msd-kast-tief); } .msd-knopf:disabled { opacity: 0.6; cursor: not-allowed; } .msd-knopf svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; } .msd-knopf-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 50px; padding: 0.85rem 1.3rem; border-radius: var(--msd-r-klein); background: #fff; color: var(--msd-ink); font-weight: 700; font-size: 0.95rem; line-height: 1.3; border: 0; font-family: inherit; cursor: pointer; box-shadow: var(--msd-weich); transition: background 200ms ease; } .msd-knopf-ghost:hover { background: var(--msd-tint); } .msd-knopf-ghost svg { width: 18px; height: 18px; stroke: var(--msd-kast); fill: none; stroke-width: 1.8; flex: 0 0 auto; } .msd-aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; } .msd-aktionen-mitte { justify-content: center; } .msd-rund { width: 52px; height: 52px; border-radius: 50%; background: var(--msd-tint); display: grid; place-items: center; flex: 0 0 auto; color: var(--msd-kast-tief); } .msd-rund svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .msd-rund-klein { width: 44px; height: 44px; } .msd-rund-klein svg { width: 20px; height: 20px; } .msd-kopf { text-align: center; max-width: 46rem; margin-inline: auto; } .msd-kopf > .msd-pille { margin-bottom: 1rem; } .msd-kopf p { margin-top: 1rem; font-size: 1.08rem; } .msd-kopf-links { text-align: left; margin-inline: 0; } .msd-h2 { font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.4rem); line-height: 1.16; } .msd-h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); } .msd-lede { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); line-height: 1.68; } .msd-mt { margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); } .msd-block-p + .msd-block-p { margin-top: 1rem; } .msd-textlink, .msd-inline-link { color: var(--msd-kast-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .msd-check, .msd-haken-liste { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.8rem; } .msd-check li, .msd-haken-liste li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.55; } .msd-check li::before, .msd-haken-liste li::before { content: ''; flex: 0 0 22px; height: 22px; margin-top: 0.1rem; border-radius: 50%; background: var(--msd-kast-voll) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; } .msd-haken { display: none; } .msd-karte-weiss { background: #fff; border-radius: var(--msd-r-karte); box-shadow: var(--msd-weich); } .msd-bild-rund { border-radius: var(--msd-r-gross); box-shadow: var(--msd-weich-hoch); overflow: hidden; position: relative; } .msd-bild-rund img { object-fit: cover; } .msd-bild-rund img.msd-bild-heizraum { object-position: 62% 40%; } .msd-schwebe { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 18px; padding: 0.8rem 1.1rem 0.8rem 0.8rem; box-shadow: var(--msd-weich-hoch); max-width: calc(100% - 2rem); } .msd-schwebe b { display: block; color: var(--msd-ink); font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.01em; } .msd-schwebe small { display: block; font-size: 0.8rem; color: var(--msd-label); line-height: 1.3; } .msd-schwebe-ol { top: 9%; left: -7%; } .msd-schwebe-ur { bottom: 9%; right: -6%; } .msd-schwebe-ul { bottom: 9%; left: -6%; } @media (prefers-reduced-motion: no-preference) { .msd-schwebe-ol { animation: msd-schweben 7s ease-in-out infinite; } .msd-schwebe-ur, .msd-schwebe-ul { animation: msd-schweben 8s ease-in-out infinite reverse; } } @keyframes msd-schweben { 50% { transform: translateY(-8px); } } .msd-header { position: sticky; top: 0; z-index: 50; background: rgba(241, 243, 242, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(219, 224, 221, 0.8); transition: transform 480ms cubic-bezier(0.16, 0.84, 0.44, 1), opacity 480ms ease, box-shadow 320ms ease; padding-top: env(safe-area-inset-top, 0px); } .msd-header[data-versteckt='true'] { transform: translateY(-105%); opacity: 0.6; transition: transform 750ms cubic-bezier(0.45, 0, 0.2, 1), opacity 750ms ease, box-shadow 320ms ease; } .msd-header[data-gescrollt='true'] { box-shadow: 0 14px 30px -26px rgba(70, 50, 38, 0.45); } .msd-header-inner { max-width: var(--msd-bahn); margin-inline: auto; padding-inline: var(--msd-rand); min-height: var(--msd-kopf-hoehe); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .msd-logo-link { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; } .msd-logo { height: 30px; width: auto; } .msd-nav { display: flex; gap: 0.2rem; font-size: 0.88rem; color: var(--msd-ink); } .msd-nav-link { padding: 0.6rem 0.8rem; border-radius: 10px; transition: background 200ms ease, color 200ms ease; white-space: nowrap; } .msd-nav-link:hover { background: rgba(239, 228, 218, 0.8); } .msd-nav-link[aria-current='page'] { color: var(--msd-kast-tief); font-weight: 700; } .msd-header-cta { min-height: 42px; padding: 0.55rem 1.1rem; font-size: 0.84rem; box-shadow: none; white-space: nowrap; } .msd-burger { display: none; width: 46px; height: 46px; border-radius: 14px; background: #fff; border: 0; box-shadow: var(--msd-weich); cursor: pointer; place-items: center; color: var(--msd-ink); } .msd-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; } .msd-mobile-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--msd-porzellan); border-bottom: 1px solid var(--msd-fuge-fein); box-shadow: 0 30px 50px -30px rgba(70, 50, 38, 0.45); padding: 0.8rem var(--msd-rand) 1.4rem; display: grid; gap: 0.45rem; max-height: calc(100dvh - var(--msd-kopf-hoehe)); overflow-y: auto; } .msd-mobile-link { display: flex; align-items: center; min-height: 52px; padding: 0.7rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: var(--msd-weich); color: var(--msd-ink); font-weight: 700; } .msd-mobile-link[aria-current='page'] { color: var(--msd-kast-tief); background: var(--msd-tint); } .msd-mobile-aktionen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; margin-top: 0.4rem; } @media (max-width: 1080px) { .msd-nav, .msd-header-cta { display: none; } .msd-burger { display: grid; } } @media (min-width: 1081px) { .msd-mobile-menu { display: none; } } .msd-held { padding-block: clamp(2.5rem, 1.6rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); background: radial-gradient(60rem 30rem at 85% 30%, #f3e9df 0%, rgba(243, 233, 223, 0) 70%), var(--msd-porzellan); } .msd-held-innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 1rem + 5vw, 5.5rem); align-items: center; } .msd-held h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem); line-height: 1.1; margin-top: 1.2rem; max-width: 19ch; } .msd-h1-klein { display: block; font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem); letter-spacing: 0; line-height: 1.4; color: var(--msd-kast-text); margin-bottom: 0.7rem; } .msd-held-lede { margin-top: 1.4rem; font-size: clamp(1.07rem, 1rem + 0.35vw, 1.22rem); line-height: 1.68; max-width: 44ch; } .msd-held .msd-aktionen { margin-top: 2rem; } .msd-held-bild { position: relative; } .msd-held-bild .msd-bild-rund { aspect-ratio: 4 / 4.6; max-height: 40rem; } .msd-vertrauen { margin-top: 2.2rem; display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: var(--msd-label); } .msd-vertrauen-bild { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; position: relative; flex: 0 0 auto; box-shadow: 0 0 0 4px #fff, var(--msd-weich); } .msd-vertrauen-bild img { object-fit: cover; object-position: 50% 18%; } .msd-vertrauen b { color: var(--msd-ink); display: block; font-size: 0.94rem; } .msd-seitenkopf { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem); background: radial-gradient(60rem 26rem at 80% 0%, #f3e9df 0%, rgba(243, 233, 223, 0) 70%), var(--msd-porzellan); } .msd-seitenkopf-innen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .msd-seitenkopf[data-ruhig='true'] .msd-seitenkopf-innen { grid-template-columns: minmax(0, 1fr); text-align: center; max-width: 52rem; } .msd-seitenkopf[data-ruhig='true'] .msd-aktionen { justify-content: center; } .msd-seitenkopf[data-ruhig='true'] .msd-seitenkopf-lede { margin-inline: auto; } .msd-seitenkopf h1 { font-size: clamp(1.95rem, 1.3rem + 2.7vw, 3.1rem); line-height: 1.13; margin-top: 1.1rem; } .msd-seitenkopf-lede { margin-top: 1.2rem; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); line-height: 1.68; max-width: 48ch; } .msd-seitenkopf .msd-aktionen { margin-top: 1.8rem; } .msd-seitenkopf-bild { aspect-ratio: 4 / 3.3; } .msd-seitenkopf + .msd-sek:not(.msd-sek-sand):not(.msd-sek-weiss) { padding-top: clamp(0.5rem, 0.2rem + 1vw, 1.5rem); } .msd-zahlenband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border-radius: var(--msd-r-gross); box-shadow: var(--msd-weich); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); gap: 1rem; margin: 0; } .msd-zahlenband > div { text-align: center; padding: 0.4rem; display: flex; flex-direction: column-reverse; } .msd-zahlenband > div + div { border-left: 1px solid var(--msd-fuge-fein); } .msd-zahlenband dd { margin: 0; } .msd-zahlenband b { display: block; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); color: var(--msd-kast-tief); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .msd-zahlenband dt { margin-top: 0.55rem; font-size: 0.92rem; color: var(--msd-label); } .msd-raster { display: grid; gap: 1.2rem; list-style: none; padding: 0; } .msd-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .msd-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msd-raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .msd-bildkarte { background: #fff; border-radius: var(--msd-r-karte); box-shadow: var(--msd-weich); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform 300ms var(--msd-kurve), box-shadow 300ms var(--msd-kurve); } a.msd-bildkarte:hover { transform: translateY(-4px); box-shadow: var(--msd-weich-hoch); } .msd-bildkarte-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; flex: 0 0 auto; } .msd-bildkarte-bild img { object-fit: cover; } .msd-bildkarte-inhalt { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; } .msd-bildkarte h3 { font-size: 1.12rem; line-height: 1.3; } .msd-bildkarte p { font-size: 0.93rem; line-height: 1.55; } .msd-bildkarte-mehr { margin-top: auto; padding-top: 0.6rem; font-size: 0.88rem; font-weight: 700; color: var(--msd-kast-text); } .msd-bildkarte-nummer { align-self: flex-start; background: var(--msd-tint); color: var(--msd-kast-tief); border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.78rem; font-weight: 700; } .msd-ikonkarte { background: #fff; border-radius: var(--msd-r-flaeche); padding: 1.5rem 1.4rem; box-shadow: var(--msd-weich); height: 100%; } .msd-ikonkarte h3 { margin-top: 1rem; font-size: 1.06rem; line-height: 1.3; } .msd-ikonkarte p { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.6; } .msd-zwischen-h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); text-align: center; } .msd-bildtext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .msd-bildtext[data-seite='links'] > .msd-bildtext-bild { order: -1; } .msd-bildtext-bild { position: relative; } .msd-bildtext-bild .msd-bild-rund { aspect-ratio: 4 / 3.2; } .msd-bildtext h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); margin-top: 1rem; } .msd-bildtext-kopf { display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; } .msd-bildtext-text .msd-block-p { margin-top: 1rem; max-width: 54ch; } .msd-bildtext-text .msd-aktionen { margin-top: 1.6rem; } .msd-stapel { display: grid; gap: clamp(3.5rem, 2rem + 4vw, 6rem); } .msd-lesetext > .msd-pille + h2, .msd-lesetext > .msd-leistung-nummer + h2 { margin-top: 1rem; } .msd-lesetext-rumpf { margin-top: 1.2rem; } .msd-lesetext > .msd-lesetext-rumpf:first-child { margin-top: 0; } .msd-lesetext .msd-aktionen { margin-top: 1.6rem; } .msd-sek:not(.msd-sek-sand):not(.msd-sek-weiss) + .msd-sek:not(.msd-sek-sand):not(.msd-sek-weiss), .msd-sek-sand + .msd-sek-sand, .msd-sek-weiss + .msd-sek-weiss, .msd-sek:not(.msd-sek-sand):not(.msd-sek-weiss) + .msd-schluss { padding-top: 0; } .msd-pillen { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; margin: 0; } .msd-pillen-mitte { justify-content: center; } .msd-pillen-abstand { margin-top: 1.4rem; } .msd-pillen a, .msd-pillen span { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px; background: #fff; border-radius: 999px; padding: 0.5rem 1.05rem; font-size: 0.88rem; color: var(--msd-ink); box-shadow: var(--msd-weich); transition: background 200ms ease; } .msd-pillen a:hover { background: var(--msd-tint); } .msd-pillen-haken span::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--msd-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f5541' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; flex: 0 0 auto; } .msd-weiterlesen-titel { font-weight: 700; color: var(--msd-ink); margin-bottom: 0.8rem; text-align: center; } .msd-gewerke { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; } .msd-gewerk { background: #fff; border-radius: 22px; padding: 1.4rem 1rem; text-align: center; box-shadow: var(--msd-weich); } .msd-gewerk .msd-rund { margin-inline: auto; } .msd-gewerk h3 { margin-top: 0.85rem; font-size: 0.95rem; line-height: 1.35; } .msd-warmkarte { background: linear-gradient(150deg, #f8f1ea 0%, #efe3d6 100%); border-radius: 36px; padding: clamp(1.8rem, 1rem + 3.5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; } .msd-warmkarte[data-einspaltig] { grid-template-columns: minmax(0, 1fr); text-align: center; } .msd-warmkarte[data-einspaltig] .msd-aktionen { justify-content: center; } .msd-warmkarte[data-einspaltig] .msd-block-p { margin-inline: auto; } .msd-warmkarte h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); margin-top: 1rem; } .msd-warmkarte h2:first-child { margin-top: 0; } .msd-warmkarte .msd-block-p { margin-top: 1rem; max-width: 52ch; } .msd-warmkarte .msd-aktionen { margin-top: 1.6rem; } .msd-warmkarte-bild { border-radius: var(--msd-r-karte); aspect-ratio: 1 / 1; overflow: hidden; position: relative; box-shadow: var(--msd-weich-hoch); } .msd-warmkarte-bild img { object-fit: cover; } .msd-warmkarte-bild-person img { object-position: 50% 15%; } .msd-stimme { background: #fff; border-radius: var(--msd-r-karte); padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--msd-weich); display: flex; flex-direction: column; height: 100%; } .msd-sterne { display: block; width: 88px; height: 16px; color: var(--msd-kast); } .msd-stimme blockquote { margin: 0.7rem 0 0; color: var(--msd-ink); line-height: 1.6; font-size: 0.96rem; } .msd-stimme-wer { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--msd-label); } .msd-stimme-wer i { width: 32px; height: 32px; border-radius: 50%; background: var(--msd-tint); display: grid; place-items: center; font-style: normal; font-weight: 700; color: var(--msd-kast-tief); font-size: 0.78rem; flex: 0 0 auto; } .msd-faq-liste { margin: clamp(2rem, 1.6rem + 2vw, 3rem) auto 0; max-width: 50rem; display: grid; gap: 0.8rem; } .msd-faq-item { background: #fff; border-radius: var(--msd-r-flaeche); box-shadow: var(--msd-weich); } .msd-faq-frage { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--msd-ink); font-size: 1rem; line-height: 1.45; min-height: 56px; } .msd-faq-frage::-webkit-details-marker { display: none; } .msd-faq-zeichen { width: 32px; height: 32px; border-radius: 50%; background: var(--msd-tint); position: relative; flex: 0 0 auto; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); } .msd-faq-zeichen::before, .msd-faq-zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; background: var(--msd-kast-tief); border-radius: 2px; transform: translate(-50%, -50%); } .msd-faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); } .msd-faq-item[open] .msd-faq-zeichen { transform: rotate(45deg); } .msd-faq-koerper { transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1); } .msd-faq-antwort { padding: 0 1.4rem 1.3rem; font-size: 0.96rem; line-height: 1.65; display: grid; gap: 0.7rem; } .msd-faq-antwort .msd-haken-liste { margin-top: 0.2rem; } .msd-faq-mehr { margin-top: 1.8rem; } .msd-schluss { padding-block: var(--msd-sektion) clamp(3rem, 2rem + 3vw, 5rem); } .msd-schluss-karte { background: var(--msd-braun); color: #fff; border-radius: 36px; padding: clamp(1.8rem, 1rem + 3.5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; box-shadow: var(--msd-weich-hoch); background-image: radial-gradient(40rem 20rem at 0% 0%, rgba(201, 162, 113, 0.16), transparent 60%); } .msd-schluss-karte h2 { color: #fff; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.14; } .msd-schluss-karte > div > p { margin-top: 1rem; color: var(--msd-nacht-text); max-width: 46ch; line-height: 1.72; } .msd-schluss-rechts { display: grid; gap: 1rem; justify-items: start; } .msd-tel-gross { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 48px; font-size: 1.15rem; font-weight: 700; color: var(--msd-messing); } .msd-tel-gross .msd-rund { width: 44px; height: 44px; background: rgba(201, 162, 113, 0.16); color: var(--msd-messing); } .msd-tel-gross .msd-rund svg { width: 20px; height: 20px; } .msd-footer { background: var(--msd-braun); color: var(--msd-nacht-text); font-size: 0.92rem; } .msd-footer-top { max-width: var(--msd-bahn); margin-inline: auto; padding: clamp(2.8rem, 2rem + 2.5vw, 4rem) var(--msd-rand) 2rem; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; } .msd-footer-logo { height: 32px; width: auto; } .msd-footer-address { margin-top: 1.2rem; font-style: normal; line-height: 1.85; } .msd-footer-address a { color: #fff; } .msd-footer-titel { color: #fff; font-weight: 700; font-size: 0.95rem; margin: 0 0 0.9rem; line-height: 1.3; } .msd-footer-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; align-content: start; } .msd-footer-liste a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 40px; color: var(--msd-nacht-text); transition: color 200ms ease; } .msd-footer-liste a:hover { color: #fff; } .msd-footer-liste svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .msd-footer-bottom { max-width: var(--msd-bahn); margin-inline: auto; padding: 1.3rem var(--msd-rand) calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.82rem; color: var(--msd-gedaempft); } .msd-footer-bottom p { margin: 0; } .msd-credit { color: var(--msd-gedaempft); } .msd-credit:hover { color: #fff; } @media (pointer: coarse) { .msd-footer-liste a { min-height: 44px; } } .msd-leistung-nummer { background: var(--msd-tint); color: var(--msd-kast-tief); border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.84rem; font-weight: 700; } .msd-ref-held { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; } .msd-bauteile-bild { position: relative; margin: 0; border-radius: var(--msd-r-gross); overflow: hidden; box-shadow: var(--msd-weich-hoch); } .msd-bauteile-bild img { object-fit: cover; } .msd-marke { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--msd-kast-tief); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.35), var(--msd-weich-hoch); border: 0; cursor: pointer; font-family: inherit; transition: background 200ms ease, color 200ms ease; z-index: 1; } .msd-marke[data-an='true'] { background: var(--msd-kast-voll); color: #fff; } .msd-bauteile-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .msd-bauteil { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0.8rem; align-items: start; background: #fff; border-radius: 16px; padding: 0.8rem 0.9rem; box-shadow: var(--msd-weich); transition: background 200ms ease; } .msd-bauteil[data-an='true'] { background: var(--msd-tint); } .msd-bauteil-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--msd-tint); display: grid; place-items: center; font-weight: 700; font-size: 0.78rem; color: var(--msd-kast-tief); } .msd-bauteil[data-an='true'] .msd-bauteil-nr { background: var(--msd-kast-voll); color: #fff; } .msd-bauteil b { display: block; color: var(--msd-ink); font-size: 0.93rem; line-height: 1.35; } .msd-bauteil-marke { color: var(--msd-kast-text); font-weight: 400; } .msd-bauteil p { font-size: 0.84rem; line-height: 1.45; color: var(--msd-label); margin-top: 0.15rem; } .msd-bauteile-rest { margin-top: 1.8rem; } .msd-bauteile-rest h3 { font-size: 1.05rem; margin-bottom: 0.9rem; } .msd-bauteil-ikon { width: 18px; height: 18px; color: var(--msd-kast); flex: 0 0 auto; } .msd-ref-text { display: grid; gap: 1rem; } .msd-referenz-zwischen { font-size: 1.15rem; margin-top: 0.8rem; } .msd-referenz-ratgeber { margin-top: 1.4rem; display: grid; gap: 0.7rem; } .msd-referenz-ratgeber-label { font-weight: 700; color: var(--msd-ink); } .msd-galerie { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .msd-galerie-knopf { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; border: 0; padding: 0; border-radius: var(--msd-r-flaeche); overflow: hidden; cursor: zoom-in; box-shadow: var(--msd-weich); background: var(--msd-tint); } .msd-galerie-img { object-fit: cover; transition: transform 600ms var(--msd-kurve); } .msd-galerie-knopf:hover .msd-galerie-img { transform: scale(1.03); } .msd-galerie-lupe { position: absolute; right: 0.8rem; bottom: 0.8rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--msd-kast-tief); display: grid; place-items: center; box-shadow: var(--msd-weich); } .msd-galerie-lupe svg { width: 20px; height: 20px; } .msd-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(27, 22, 20, 0.92); display: grid; place-items: center; padding: clamp(0.8rem, 3vw, 2.5rem); animation: msd-lightbox-auf 0.18s ease-out; } @keyframes msd-lightbox-auf { from { opacity: 0; } to { opacity: 1; } } .msd-lightbox-buehne { position: relative; width: min(100%, 62rem); display: flex; justify-content: center; } .msd-lightbox-figur { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 0.8rem; } .msd-lightbox-img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: var(--msd-r-flaeche); } .msd-lightbox-figur figcaption { display: flex; justify-content: space-between; gap: 1rem; color: var(--msd-nacht-text); font-size: 0.86rem; line-height: 1.45; } .msd-lightbox-zaehler { white-space: nowrap; } .msd-lightbox-zu, .msd-lightbox-pfeil { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; } .msd-lightbox-zu:hover, .msd-lightbox-pfeil:hover { background: rgba(255, 255, 255, 0.26); } .msd-lightbox-zu svg, .msd-lightbox-pfeil svg { width: 21px; height: 21px; } .msd-lightbox-zu { position: fixed; top: clamp(0.6rem, 2vw, 1.4rem); right: clamp(0.6rem, 2vw, 1.4rem); } .msd-lightbox-pfeil { top: 45%; transform: translateY(-50%); } .msd-lightbox-zurueck { left: -3.8rem; } .msd-lightbox-vor { right: -3.8rem; } @media (max-width: 1140px) { .msd-lightbox-zurueck { left: 0.5rem; } .msd-lightbox-vor { right: 0.5rem; } } .msd-artikel-karte { background: #fff; border-radius: var(--msd-r-karte); box-shadow: var(--msd-weich); padding: 1.5rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; height: 100%; transition: transform 300ms var(--msd-kurve), box-shadow 300ms var(--msd-kurve); } .msd-artikel-karte:hover { transform: translateY(-4px); box-shadow: var(--msd-weich-hoch); } .msd-artikel-karte-oben { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .msd-artikel-karte-datum { font-size: 0.8rem; color: var(--msd-label); white-space: nowrap; } .msd-artikel-karte h2, .msd-artikel-karte h3 { font-size: 1.08rem; line-height: 1.35; } .msd-artikel-karte-teaser { font-size: 0.9rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msd-artikel-karte-mehr { margin-top: auto; font-size: 0.86rem; font-weight: 700; color: var(--msd-kast-text); } .msd-artikel-karte-bild { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; } .msd-artikel-karte-bild img { object-fit: cover; } .msd-raster-breit { grid-column: span 2; } .msd-artikel-karte[data-gross] { background: linear-gradient(150deg, #f8f1ea 0%, #efe3d6 100%); padding: 2rem; } .msd-artikel-karte[data-gross] h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); } .msd-artikel-karte[data-gross] .msd-artikel-karte-teaser { -webkit-line-clamp: 4; font-size: 0.98rem; } .msd-artikel-kopf { text-align: center; max-width: 50rem; margin-inline: auto; padding-inline: var(--msd-rand); } .msd-artikel-kopf h1 { font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.85rem); line-height: 1.15; margin-top: 1.1rem; } .msd-artikel-kopf .msd-seitenkopf-lede { margin-inline: auto; } .msd-artikel-meta { margin-top: 1.4rem; display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.86rem; color: var(--msd-label); background: #fff; border-radius: 999px; padding: 0.4rem 1rem 0.4rem 0.4rem; box-shadow: var(--msd-weich); flex-wrap: wrap; justify-content: center; } .msd-artikel-meta-bild { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; position: relative; flex: 0 0 auto; } .msd-artikel-meta-bild img { object-fit: cover; object-position: 50% 18%; } .msd-bevorzugen-zeile { margin-top: 1.2rem; display: flex; justify-content: center; } .msd-bevorzugen { border-color: var(--msd-ink); color: var(--msd-ink); background: #fff; min-height: 44px; } .msd-bevorzugen:hover, .msd-bevorzugen:focus-visible { background: var(--msd-ink); color: #fff; } .msd-artikel { max-width: 44rem; margin-inline: auto; padding-inline: var(--msd-rand); } .msd-artikel-bild { position: relative; aspect-ratio: 16 / 9; border-radius: var(--msd-r-karte); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--msd-weich); } .msd-artikel-bild img { object-fit: cover; } .msd-artikel-rumpf { font-size: 1.06rem; line-height: 1.78; overflow-wrap: anywhere; } .msd-artikel-rumpf > * + * { margin-top: 1.1rem; } .msd-artikel-rumpf h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); margin-top: 2.6rem; } .msd-artikel-rumpf h3 { font-size: 1.15rem; margin-top: 2rem; } .msd-artikel-rumpf h4 { font-size: 1.02rem; margin-top: 1.6rem; } .msd-artikel-rumpf a { color: var(--msd-kast-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .msd-artikel-rumpf ul, .msd-artikel-rumpf ol { padding-left: 1.3rem; } .msd-artikel-rumpf ul { list-style: disc; } .msd-artikel-rumpf ol { list-style: decimal; } .msd-artikel-rumpf li + li { margin-top: 0.4rem; } .msd-artikel-rumpf li::marker { color: var(--msd-kast); } .msd-artikel-rumpf strong, .msd-artikel-rumpf b { color: var(--msd-ink); } .msd-artikel-rumpf table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .msd-post-tabelle { overflow-x: auto; background: #fff; border-radius: var(--msd-r-flaeche); box-shadow: var(--msd-weich); } .msd-post-tabelle table { min-width: 520px; } .msd-artikel-rumpf th, .msd-artikel-rumpf td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--msd-fuge-fein); vertical-align: top; } .msd-artikel-rumpf thead th { background: var(--msd-tint); color: var(--msd-kast-tief); font-size: 0.86rem; } .msd-artikel-rumpf tr:last-child td { border-bottom: 0; } .msd-artikel-rumpf caption { caption-side: bottom; padding: 0.7rem 1rem; font-size: 0.82rem; color: var(--msd-label); text-align: left; } .msd-tip { background: var(--msd-sand); border-radius: var(--msd-r-flaeche); padding: 1.2rem 1.4rem; display: grid; gap: 0.3rem; } .msd-tip b { color: var(--msd-ink); } .msd-post-faq { display: grid; gap: 0.7rem; } .msd-post-faq details { background: #fff; border-radius: 18px; box-shadow: var(--msd-weich); } .msd-post-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-weight: 700; color: var(--msd-ink); line-height: 1.45; } .msd-post-faq summary::-webkit-details-marker { display: none; } .msd-post-faq summary::after { content: '+'; width: 28px; height: 28px; border-radius: 50%; background: var(--msd-tint); display: grid; place-items: center; font-weight: 400; color: var(--msd-kast-tief); flex: 0 0 auto; transition: transform 320ms ease; } .msd-post-faq details[open] summary::after { transform: rotate(45deg); } .msd-post-faq details p { padding: 0 1.2rem 1.1rem; font-size: 0.97rem; } .msd-cta { background: var(--msd-braun); color: #fff; border-radius: var(--msd-r-karte); padding: 1.6rem 1.7rem; display: grid; gap: 0.8rem; justify-items: start; } .msd-cta b { display: block; font-size: 1.08rem; color: #fff; line-height: 1.4; } .msd-cta p { color: var(--msd-nacht-text); margin: 0; } .msd-artikel-rumpf .msd-cta a.btn, .msd-cta .btn { display: inline-flex; align-items: center; min-height: 48px; background: var(--msd-kast-voll); color: #fff; border-radius: var(--msd-r-klein); padding: 0.8rem 1.5rem; font-weight: 700; text-decoration: none; } .msd-zitat { margin: 0; background: var(--msd-sand); border-radius: var(--msd-r-flaeche); padding: 1.4rem 1.6rem; color: var(--msd-ink); font-size: 1.08rem; } .msd-zitat cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.88rem; color: var(--msd-label); } .msd-post-figure { margin: 0; } .msd-post-figure-bild { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: var(--msd-r-flaeche); overflow: hidden; } .msd-post-figure-bild img { object-fit: cover; } .msd-post-figure figcaption { margin-top: 0.5rem; font-size: 0.84rem; color: var(--msd-label); } .msd-form { display: grid; gap: 1rem; } .msd-formkarte { background: #fff; border-radius: var(--msd-r-karte); padding: clamp(1.3rem, 1rem + 1vw, 2rem); box-shadow: var(--msd-weich); } .msd-formkarte-titel { font-size: 1.15rem; margin-bottom: 1rem; } .msd-feld { display: grid; gap: 0.35rem; min-width: 0; } .msd-feld label, .msd-feld-titel { font-size: 0.86rem; font-weight: 700; color: var(--msd-ink); } .msd-feld input, .msd-feld select, .msd-feld textarea { font: inherit; font-size: 0.96rem; color: var(--msd-ink); background: var(--msd-porzellan); border: 1px solid transparent; border-radius: var(--msd-r-klein); padding: 0.75rem 0.9rem; min-height: 48px; width: 100%; min-width: 0; transition: border-color 200ms ease, background 200ms ease; } .msd-feld textarea { min-height: 120px; resize: vertical; } .msd-feld input:focus, .msd-feld select:focus, .msd-feld textarea:focus { outline: none; border-color: var(--msd-kast); background: #fff; } .msd-feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .msd-hilfe { font-size: 0.8rem; color: var(--msd-label); line-height: 1.45; } .msd-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; color: var(--msd-text); cursor: pointer; } .msd-consent input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--msd-kast-voll); } .msd-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .msd-fehler { background: #fbecea; color: #8a2d22; border-radius: var(--msd-r-klein); padding: 0.8rem 1rem; font-size: 0.9rem; } .msd-erfolg { background: var(--msd-sand); border-radius: var(--msd-r-flaeche); padding: 1.2rem 1.4rem; } .msd-wahl-reihe { display: flex; flex-wrap: wrap; gap: 0.5rem; } .msd-wahl-chip { font: inherit; font-size: 0.9rem; border: 0; border-radius: 999px; padding: 0.55rem 1rem; background: var(--msd-porzellan); color: var(--msd-ink); cursor: pointer; min-height: 42px; } .msd-wahl-chip[aria-pressed='true'] { background: var(--msd-kast-voll); color: #fff; } .msd-kontakt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; } .msd-kontakt-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; } .msd-kontakt-karte { background: #fff; border-radius: var(--msd-r-flaeche); padding: 1.3rem 1.4rem; box-shadow: var(--msd-weich); display: flex; gap: 1rem; align-items: flex-start; min-width: 0; } .msd-kontakt-karte-breit { grid-column: 1 / -1; } .msd-kontakt-karte b { display: block; color: var(--msd-ink); font-size: 0.98rem; line-height: 1.35; } .msd-kontakt-karte p, .msd-kontakt-karte address { font-size: 0.94rem; line-height: 1.6; font-style: normal; margin-top: 0.2rem; } .msd-kontakt-karte a { color: var(--msd-kast-text); font-weight: 700; } .msd-team-karte { background: #fff; border-radius: var(--msd-r-gross); box-shadow: var(--msd-weich); overflow: hidden; height: 100%; display: flex; flex-direction: column; } .msd-team-bild { position: relative; aspect-ratio: 4 / 3; } .msd-team-bild img { object-fit: cover; } .msd-team-text { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 0.3rem; } .msd-team-name { font-size: 1.25rem; } .msd-team-rolle { color: var(--msd-kast-text); font-weight: 700; font-size: 0.9rem; } .msd-team-kontakt { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; } .msd-team-kontakt div { display: flex; flex-wrap: wrap; gap: 0 0.5rem; } .msd-team-kontakt dt { color: var(--msd-label); } .msd-team-kontakt dd { margin: 0; } .msd-stelle { background: #fff; border-radius: var(--msd-r-gross); box-shadow: var(--msd-weich); padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); } .msd-stelle + .msd-stelle { margin-top: 1.2rem; } .msd-stelle-titel { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin-top: 1rem; } .msd-stelle-einleitung { margin-top: 0.9rem; max-width: 64ch; } .msd-stelle-abschnitte { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .msd-stelle-abschnitt { background: var(--msd-porzellan); border-radius: var(--msd-r-flaeche); padding: 1.2rem 1.2rem 1.3rem; } .msd-stelle-sub { font-size: 1rem; } .msd-stelle-abschnitt .msd-haken-liste { gap: 0.6rem; font-size: 0.9rem; margin-top: 0.8rem; } .msd-stelle-abschnitt .msd-haken-liste li::before { flex-basis: 20px; height: 20px; background-size: 11px; } .msd-stelle-abschnitt .msd-haken-liste b { color: var(--msd-ink); } .msd-ansprechpartner { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; } .msd-ansprechpartner-mitte { justify-content: center; text-align: left; } .msd-ansprechpartner-karte { background: #fff; border-radius: 18px; padding: 1rem 1.2rem; box-shadow: var(--msd-weich); display: flex; align-items: center; gap: 0.9rem; min-width: 0; } .msd-ansprechpartner-karte b { display: block; color: var(--msd-ink); } .msd-ansprechpartner-karte p { font-size: 0.92rem; line-height: 1.5; } .msd-ansprechpartner-karte a { color: var(--msd-kast-text); font-weight: 700; } .msd-karten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; } .msd-karte { background: #fff; border-radius: var(--msd-r-flaeche); padding: 1.5rem 1.4rem; box-shadow: var(--msd-weich); } .msd-karte-titel { font-size: 1.08rem; line-height: 1.3; } .msd-karte-text { margin-top: 0.45rem; font-size: 0.93rem; line-height: 1.6; } .msd-schritte { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; counter-reset: msd-s; } .msd-schritt { background: var(--msd-porzellan); border-radius: var(--msd-r-karte); padding: 1.4rem; } .msd-schritt-nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--msd-kast-voll); color: #fff; font-weight: 700; margin-bottom: 0.9rem; } .msd-gruss { margin-top: 1rem; display: grid; color: var(--msd-ink); } .msd-einbetten { margin-top: 1.2rem; background: #fff; border-radius: var(--msd-r-flaeche); padding: 1.4rem; box-shadow: var(--msd-weich); display: grid; gap: 1rem; justify-items: start; } .msd-typeform { margin-top: 1.2rem; min-height: 32rem; border-radius: var(--msd-r-flaeche); overflow: hidden; } .msd-badcheck { max-width: var(--msd-bahn); margin-inline: auto; padding-inline: var(--msd-rand); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: start; } .msd-badcheck-form { background: #fff; border-radius: var(--msd-r-gross); box-shadow: var(--msd-weich-hoch); padding: clamp(1.3rem, 1rem + 2vw, 2.6rem); min-width: 0; } .msd-fortschritt { margin-bottom: 1.6rem; } .msd-fortschritt-zeile { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; color: var(--msd-label); margin-bottom: 0.55rem; } .msd-fortschritt-zeile p { margin: 0; } .msd-fortschritt-bahn { height: 10px; background: var(--msd-porzellan); border-radius: 999px; overflow: hidden; } .msd-fortschritt-fuell { display: block; height: 100%; background: var(--msd-kast-voll); border-radius: 999px; transition: width 500ms var(--msd-kurve); } .msd-wizard-bild h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); margin-top: 0.9rem; outline: none; } .msd-wizard-hinweis { margin-top: 0.6rem; } .msd-wizard-optionen { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .msd-wizard-optionen[data-bilder='ja'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msd-wahlkachel { text-align: left; font: inherit; background: var(--msd-porzellan); border: 2px solid transparent; border-radius: 18px; padding: 1rem 1.1rem; cursor: pointer; display: flex; gap: 0.8rem; align-items: flex-start; color: var(--msd-text); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; min-height: 64px; } .msd-wahlkachel:hover { background: var(--msd-tint); } .msd-wahlkachel[data-aktiv='true'] { background: #fff; border-color: var(--msd-kast-voll); box-shadow: var(--msd-weich); } .msd-wahlkachel-marke { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--msd-tint-2); flex: 0 0 auto; margin-top: 0.1rem; background: #fff; } .msd-wahlkachel[data-aktiv='true'] .msd-wahlkachel-marke { border-color: var(--msd-kast-voll); background: var(--msd-kast-voll) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; } .msd-wahlkachel b { display: block; color: var(--msd-ink); font-size: 1rem; line-height: 1.35; } .msd-wahlkachel em { display: block; font-style: normal; font-size: 0.86rem; line-height: 1.45; color: var(--msd-label); margin-top: 0.2rem; } .msd-wahlkachel-bild { flex-direction: column; padding: 0.6rem 0.6rem 1rem; } .msd-wahlkachel-foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; } .msd-wahlkachel-foto img { object-fit: cover; } .msd-wahlkachel-quelle { position: absolute; left: 0.5rem; bottom: 0.5rem; background: rgba(255, 255, 255, 0.92); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.72rem; color: var(--msd-ink); } .msd-wahlkachel-inhalt { display: flex; gap: 0.7rem; padding-inline: 0.4rem; } .msd-wizard-nav { margin-top: 1.6rem; display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .msd-orientierung { margin-top: 1.2rem; background: var(--msd-sand); border-radius: var(--msd-r-flaeche); padding: 1.3rem 1.4rem; } .msd-orientierung-zahl { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); font-weight: 700; color: var(--msd-kast-tief); letter-spacing: -0.03em; line-height: 1.15; } .msd-orientierung-zahl span { font-size: 0.55em; color: var(--msd-label); font-weight: 400; letter-spacing: 0; } .msd-orientierung-hinweis { margin-top: 0.6rem; } .msd-orientierung-basis { margin-top: 0.8rem; font-size: 0.9rem; line-height: 1.6; } .msd-orientierung-weiter { margin-top: 1.2rem; } .msd-badcheck-form .msd-form { margin-top: 1.4rem; } .msd-badcheck-trust { background: var(--msd-sand); border-radius: var(--msd-r-gross); padding: clamp(1.3rem, 1rem + 1.5vw, 2rem); position: sticky; top: 1.5rem; } .msd-trust-titel { font-size: 1.1rem; } .msd-trust-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.7rem; } .msd-trust-liste li { background: #fff; border-radius: 16px; padding: 0.9rem 1rem; font-size: 0.88rem; line-height: 1.5; box-shadow: var(--msd-weich); } .msd-trust-liste b { display: block; color: var(--msd-ink); } .msd-danke { text-align: center; } .msd-danke .msd-block-p { margin-inline: auto; max-width: 52ch; } .msd-danke .msd-aktionen { justify-content: center; margin-top: 1.6rem; } .msd-danke > .msd-knopf { margin-top: 1.6rem; } .msd-danke h2 { margin-bottom: 1rem; } .msd-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .msd-weg { border-radius: var(--msd-r-gross); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); display: flex; flex-direction: column; background: #fff; box-shadow: var(--msd-weich); position: relative; } .msd-weg[data-warm] { background: linear-gradient(160deg, #f8f1ea 0%, #f1e6db 100%); } .msd-weg[data-warm] .msd-rund { background: #fff; } .msd-weg-oben { display: flex; align-items: center; gap: 1rem; padding-right: 3.5rem; } .msd-weg h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); } .msd-weg-von { font-size: 0.86rem; color: var(--msd-label); } .msd-weg-satz { margin-top: 1.2rem; font-size: 1.08rem; color: var(--msd-ink); line-height: 1.55; } .msd-weg .msd-check { margin-top: 1.3rem; } .msd-weg-passt { margin-top: auto; padding-top: 1.6rem; } .msd-weg-passt span { display: inline-block; background: rgba(255, 255, 255, 0.75); border-radius: 14px; padding: 0.7rem 1rem; font-size: 0.9rem; line-height: 1.45; } .msd-weg:not([data-warm]) .msd-weg-passt span { background: var(--msd-porzellan); } .msd-weg-neu { position: absolute; top: 1.4rem; right: 1.4rem; background: var(--msd-kast-voll); color: #fff; border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.76rem; font-weight: 700; } .msd-ringe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; list-style: none; padding: 0; } .msd-ringkarte { background: #fff; border-radius: var(--msd-r-karte); padding: 1.8rem 1.6rem; box-shadow: var(--msd-weich); text-align: center; } .msd-ring { width: 116px; height: 116px; margin: 0 auto 1.1rem; border-radius: 50%; background: conic-gradient(var(--msd-kast) calc(var(--msd-anteil) * 1%), var(--msd-tint) 0); display: grid; place-items: center; } .msd-ring::before { content: ''; grid-area: 1 / 1; width: 92px; height: 92px; border-radius: 50%; background: #fff; } .msd-ring span { grid-area: 1 / 1; position: relative; font-size: 1.55rem; font-weight: 700; color: var(--msd-ink); letter-spacing: -0.03em; white-space: nowrap; } .msd-ringkarte h3 { font-size: 1.02rem; line-height: 1.35; } .msd-ringkarte p { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.5; color: var(--msd-label); } .msd-frist { margin: 1.4rem auto 0; max-width: 46rem; display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 999px; padding: 0.7rem 1.4rem 0.7rem 0.7rem; box-shadow: var(--msd-weich); } .msd-frist .msd-rund { background: var(--msd-kast-voll); color: #fff; } .msd-frist p { font-size: 0.95rem; line-height: 1.45; } .msd-frist b { color: var(--msd-ink); } .msd-genauer { margin: 1.2rem auto 0; max-width: 46rem; background: rgba(255, 255, 255, 0.65); border-radius: var(--msd-r-flaeche); } .msd-genauer summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.3rem; font-weight: 700; color: var(--msd-ink); font-size: 0.95rem; min-height: 52px; } .msd-genauer summary::-webkit-details-marker { display: none; } .msd-genauer summary::after { content: '+'; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 400; color: var(--msd-kast-tief); transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); flex: 0 0 auto; } .msd-genauer[open] summary::after { transform: rotate(45deg); } .msd-genauer ul { list-style: none; margin: 0; padding: 0 1.3rem 1.2rem; display: grid; gap: 0.7rem; font-size: 0.92rem; line-height: 1.55; } .msd-genauer li b { color: var(--msd-ink); } .msd-genauer > p { padding: 0 1.3rem 1.2rem; font-size: 0.8rem; color: var(--msd-label); } .msd-schritte-lp { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; counter-reset: msd-lp; } .msd-schritte-lp li { background: var(--msd-porzellan); border-radius: var(--msd-r-karte); padding: 1.5rem 1.4rem 1.6rem; } .msd-schritte-lp li::before { counter-increment: msd-lp; content: counter(msd-lp); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--msd-kast-voll); color: #fff; font-weight: 700; font-size: 1.05rem; box-shadow: 0 0 0 6px #fff; } .msd-schritte-lp h3 { margin-top: 1rem; font-size: 1.06rem; line-height: 1.3; } .msd-schritte-lp p { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.55; } .msd-person-bild { position: relative; } .msd-person-bild .msd-bild-rund { aspect-ratio: 4 / 4.4; } .msd-person-bild .msd-bild-rund img { object-position: 50% 14%; } .msd-person-stimme { position: absolute; z-index: 2; left: 50%; bottom: -1.8rem; transform: translateX(-50%); width: min(88%, 22rem); background: #fff; border-radius: var(--msd-r-flaeche); padding: 1.1rem 1.3rem; box-shadow: var(--msd-weich-hoch); font-size: 0.9rem; line-height: 1.5; } .msd-person-stimme blockquote { margin: 0.3rem 0 0; color: var(--msd-ink); } .msd-person-stimme small { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--msd-label); } .msd-punkte { margin-top: 1.6rem; display: grid; gap: 0.9rem; list-style: none; padding: 0; } .msd-punkte li { display: flex; gap: 0.9rem; align-items: center; color: var(--msd-ink); font-weight: 700; font-size: 0.98rem; } .msd-lp-form .msd-feld-paar + .msd-feld-paar { margin-top: 0; } .msd-schluss-karte .msd-formkarte { box-shadow: none; } @media (max-width: 1100px) { .msd-gewerke { grid-template-columns: repeat(3, minmax(0, 1fr)); } .msd-raster-4, .msd-schritte-lp { grid-template-columns: repeat(2, minmax(0, 1fr)); } .msd-footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .msd-footer-marke { grid-column: 1 / -1; } .msd-badcheck { grid-template-columns: minmax(0, 1fr); } .msd-badcheck-trust { position: static; } } @media (max-width: 900px) { .msd-held-innen, .msd-seitenkopf-innen, .msd-bildtext, .msd-warmkarte, .msd-schluss-karte, .msd-ref-held, .msd-kontakt, .msd-wege { grid-template-columns: minmax(0, 1fr); } .msd-bildtext[data-seite='links'] > .msd-bildtext-bild { order: 0; } .msd-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .msd-ringe { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-inline: auto; } .msd-stelle-abschnitte { grid-template-columns: minmax(0, 1fr); } .msd-schwebe-ol { left: 4%; } .msd-schwebe-ur { right: 4%; } .msd-schwebe-ul { left: 4%; } .msd-raster-breit { grid-column: auto; } .msd-held-bild .msd-bild-rund { aspect-ratio: 4 / 3.6; } .msd-person-bild { margin-bottom: 2rem; } .msd-frist { border-radius: 22px; } .msd-warmkarte-bild { max-width: 28rem; } } @media (max-width: 620px) { .msd-raster-2, .msd-raster-3, .msd-kontakt-karten, .msd-schritte-lp { grid-template-columns: minmax(0, 1fr); } .msd-raster-4 { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .msd-raster-4 .msd-ikonkarte { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.15rem 1.2rem; } .msd-raster-4 .msd-ikonkarte .msd-rund { width: 44px; height: 44px; grid-row: 1 / span 2; } .msd-raster-4 .msd-ikonkarte .msd-rund svg { width: 20px; height: 20px; } .msd-raster-4 .msd-ikonkarte h3 { margin-top: 0.1rem; font-size: 1rem; } .msd-raster-4 .msd-ikonkarte p { margin-top: 0.3rem; font-size: 0.92rem; } .msd-gewerke { grid-template-columns: repeat(2, minmax(0, 1fr)); } .msd-zahlenband { grid-template-columns: minmax(0, 1fr); } .msd-zahlenband > div + div { border-left: 0; border-top: 1px solid var(--msd-fuge-fein); padding-top: 1rem; } .msd-footer-top { grid-template-columns: minmax(0, 1fr); } .msd-wizard-optionen, .msd-wizard-optionen[data-bilder='ja'] { grid-template-columns: minmax(0, 1fr); } .msd-feld-paar { grid-template-columns: minmax(0, 1fr); } .msd-held .msd-aktionen > *, .msd-seitenkopf .msd-aktionen > * { width: 100%; } .msd-held-bild .msd-bild-rund { aspect-ratio: 4 / 4.2; } .msd-schwebe { padding: 0.6rem 0.9rem 0.6rem 0.6rem; } .msd-schwebe b { font-size: 0.92rem; } .msd-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .msd-artikel-meta { border-radius: 22px; } .msd-mobile-aktionen { grid-template-columns: minmax(0, 1fr); } .msd-weg-oben { padding-right: 3rem; } } @media (max-width: 480px) { .msd-ansprechpartner-karte { flex-direction: column; align-items: flex-start; width: 100%; } .msd-warmkarte { padding: 1.5rem 1.2rem; border-radius: 28px; } .msd-schluss-karte { padding: 1.5rem 1.2rem; border-radius: 28px; } } @media (max-width: 620px) { .msd-raster-4.msd-raster-eins { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1800px) { .msdesign-layout { --msd-bahn: 82rem; } } @media (prefers-reduced-motion: reduce) { .msd-header, .msd-bildkarte, .msd-artikel-karte, .msd-galerie-img, .msd-fortschritt-fuell { transition: none; } }