/* ========================================================================== DIE MEIEREI – Website-Design Farben, Schrift und Abstände sind zentral als Variablen definiert (:root). Hinweis: Diese Datei wird automatisch aus src/meierei.src.css erzeugt – alle Regeln sind mit "body.dm-site" abgesichert, damit Theme- oder Page-Builder-Styles das Design nicht überschreiben. ========================================================================== */ @font-face { font-family: "DM Oswald"; font-style: normal; font-display: swap; font-weight: 200 700; src: url("../fonts/oswald-latin-ext.woff2") format("woff2-variations"), url("../fonts/oswald-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "DM Oswald"; font-style: normal; font-display: swap; font-weight: 200 700; src: url("../fonts/oswald-latin.woff2") format("woff2-variations"), url("../fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Markenfarben (Gestaltungsleitfaden) */ --dm-gelb: #e6aa00; --dm-creme: #f5f1e8; --dm-anthrazit: #2b2b2b; --dm-oliv: #787d28; --dm-weiss: #ffffff; --dm-orange: #c8501e; /* Anwendung */ --dm-text: var(--dm-anthrazit); --dm-text-soft: rgba(43, 43, 43, .76); --dm-line: rgba(43, 43, 43, .12); --dm-heading: var(--dm-anthrazit); /* auf hellem Grund; Gelb nur auf dunklem Grund (Kontrast) */ /* Schrift */ --dm-font: "DM Oswald", "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --dm-font-text: var(--dm-font); /* hier ggf. ergänzende Fließtextschrift eintragen */ --dm-fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40 → 64 px */ --dm-fs-h2: clamp(2rem, 1.55rem + 1.8vw, 2.75rem); /* 32 → 44 px */ --dm-fs-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); /* 22 → 28 px */ --dm-fs-body: clamp(1rem, .95rem + .25vw, 1.125rem); /* 16 → 18 px */ --dm-fs-small: .9375rem; /* Raster & Abstände (8-px-Basis) */ --dm-max: 1280px; --dm-narrow: 880px; --dm-gutter: clamp(20px, 4.4vw, 64px); --dm-gap: clamp(16px, 2vw, 32px); --dm-section-y: clamp(72px, 9vw, 136px); --dm-radius: 10px; --dm-header-h: 80px; --dm-shadow: 0 1px 2px rgba(43, 43, 43, .06), 0 12px 32px rgba(43, 43, 43, .08); --dm-ease: cubic-bezier(.2, .7, .2, 1); } @media (max-width: 1023px) { :root { --dm-header-h: 68px; } } /* ---------- Basis ---------- */ html.dm-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--dm-header-h); } @media (prefers-reduced-motion: reduce) { html.dm-html { scroll-behavior: auto; } } body.dm-site { margin: 0; padding: 0; background: var(--dm-weiss); color: var(--dm-text); font-family: var(--dm-font-text); font-weight: 400; font-size: var(--dm-fs-body); line-height: 1.6; letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html.dm-lock { overflow: hidden; } body.dm-site *, body.dm-site *::before, body.dm-site *::after { box-sizing: border-box; } body.dm-site img, body.dm-site picture, body.dm-site svg, body.dm-site video { max-width: 100%; } body.dm-site img { height: auto; display: block; border: 0; } body.dm-site a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } body.dm-site a:focus-visible, body.dm-site button:focus-visible, body.dm-site [tabindex]:focus-visible { outline: 3px solid var(--dm-gelb); outline-offset: 3px; border-radius: 4px; } body.dm-site h1, body.dm-site h2, body.dm-site h3, body.dm-site h4, body.dm-site h5, body.dm-site h6 { font-family: var(--dm-font); color: var(--dm-heading); margin: 0; padding: 0; line-height: 1.08; letter-spacing: .005em; text-transform: none; font-style: normal; } body.dm-site p { margin: 0 0 1em; } body.dm-site p:last-child { margin-bottom: 0; } body.dm-site ul, body.dm-site ol { margin: 0; padding: 0; } body.dm-site button { font: inherit; color: inherit; } body.dm-site figure { margin: 0; } body.dm-site strong, body.dm-site b { font-weight: 600; } body.dm-site .dm-sr, body.dm-site .dm-skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.dm-site .dm-skip { position: fixed; top: 12px; left: 12px; z-index: 2000; background: var(--dm-anthrazit); color: var(--dm-weiss); padding: 12px 20px; border-radius: 999px; text-decoration: none; } body.dm-site .dm-main { display: block; outline: none; } /* ---------- Layout ---------- */ body.dm-site .dm-container { width: 100%; max-width: calc(var(--dm-max) + 2 * var(--dm-gutter)); margin-inline: auto; padding-inline: var(--dm-gutter); position: relative; z-index: 1; } body.dm-site .dm-container--narrow { max-width: calc(var(--dm-narrow) + 2 * var(--dm-gutter)); } body.dm-site .dm-section { position: relative; padding-block: var(--dm-section-y); overflow: hidden; } body.dm-site .dm-section--creme { background: var(--dm-creme); } body.dm-site .dm-section--weiss { background: var(--dm-weiss); } body.dm-site .dm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--dm-gap); } /* ---------- Typografie ---------- */ body.dm-site .dm-h1 { font-size: var(--dm-fs-h1); font-weight: 700; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; } body.dm-site .dm-h2 { font-size: var(--dm-fs-h2); font-weight: 700; text-transform: uppercase; line-height: 1.06; } body.dm-site .dm-h3 { font-size: var(--dm-fs-h3); font-weight: 700; text-transform: uppercase; line-height: 1.1; } body.dm-site .dm-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; font-family: var(--dm-font); font-size: .9375rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dm-text); } body.dm-site .dm-kicker::before { content: ""; width: 32px; height: 3px; border-radius: 3px; background: var(--dm-gelb); flex: none; } body.dm-site .dm-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.55; color: var(--dm-text-soft); max-width: 60ch; } body.dm-site .dm-text { color: var(--dm-text-soft); max-width: 62ch; } body.dm-site .dm-mark { background: linear-gradient(transparent 60%, rgba(230, 170, 0, .62) 60%, rgba(230, 170, 0, .62) 90%, transparent 90%); padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } body.dm-site .dm-gelb { color: var(--dm-gelb); } body.dm-site .dm-center { text-align: center; } body.dm-site .dm-center .dm-lead, body.dm-site .dm-center .dm-text { margin-inline: auto; } body.dm-site .dm-section-head { margin-bottom: clamp(40px, 5vw, 64px); } body.dm-site .dm-section-head .dm-h2 + .dm-lead { margin-top: 20px; } /* ---------- Buttons ---------- */ body.dm-site .dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; font-family: var(--dm-font); font-size: 1rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--dm-anthrazit); transition: background-color .2s var(--dm-ease), color .2s var(--dm-ease), border-color .2s var(--dm-ease), transform .2s var(--dm-ease); } body.dm-site .dm-btn .dm-icon { width: 20px; height: 20px; flex: none; stroke-width: 2.8; } body.dm-site .dm-btn:hover { transform: translateY(-1px); } body.dm-site .dm-btn--primary { background: var(--dm-gelb); border-color: var(--dm-gelb); color: var(--dm-anthrazit); } body.dm-site .dm-btn--primary:hover { background: var(--dm-anthrazit); border-color: var(--dm-anthrazit); color: var(--dm-weiss); } body.dm-site .dm-btn--outline { border-color: var(--dm-anthrazit); color: var(--dm-anthrazit); } body.dm-site .dm-btn--outline:hover { background: var(--dm-anthrazit); color: var(--dm-weiss); } body.dm-site .dm-btn--light { border-color: rgba(255, 255, 255, .85); color: var(--dm-weiss); } body.dm-site .dm-btn--light:hover { background: var(--dm-weiss); border-color: var(--dm-weiss); color: var(--dm-anthrazit); } body.dm-site .dm-btn--small { min-height: 44px; padding: 8px 18px; font-size: .9375rem; } body.dm-site .dm-btn--block { width: 100%; } body.dm-site .dm-btns { display: flex; flex-wrap: wrap; gap: 12px 16px; } body.dm-site .dm-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; font-family: var(--dm-font); font-size: .9375rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--dm-anthrazit); border-bottom: 2px solid transparent; transition: border-color .2s; } body.dm-site .dm-link-btn .dm-icon { width: 18px; height: 18px; stroke-width: 2.8; } body.dm-site .dm-link-btn:hover { border-bottom-color: var(--dm-gelb); } /* ---------- Piktogramme & Kreise ---------- */ body.dm-site .dm-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; } body.dm-site .dm-circle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--dm-oliv); color: var(--dm-weiss); } body.dm-site .dm-circle .dm-icon { width: 58%; height: 58%; stroke-width: 2.2; } body.dm-site .dm-circle--md { width: 64px; height: 64px; } body.dm-site .dm-circle--lg { width: 96px; height: 96px; } body.dm-site .dm-circle--gelb { background: var(--dm-gelb); color: var(--dm-anthrazit); } body.dm-site .dm-circle--orange { background: var(--dm-orange); } body.dm-site .dm-besteck { position: absolute; z-index: 0; pointer-events: none; color: var(--dm-weiss); width: clamp(320px, 42vw, 620px); height: auto; opacity: .75; } /* ---------- Header ---------- */ body.dm-site .dm-header { position: sticky; top: 0; z-index: 900; background: rgba(255, 255, 255, .97); transition: box-shadow .3s var(--dm-ease); } body.dm-site .dm-header.is-scrolled { box-shadow: 0 1px 0 var(--dm-line), 0 10px 30px rgba(43, 43, 43, .06); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.dm-site .dm-header { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } } body.dm-site .dm-header__inner { display: flex; align-items: center; gap: 32px; height: var(--dm-header-h); max-width: calc(var(--dm-max) + 2 * var(--dm-gutter)); margin-inline: auto; padding-inline: var(--dm-gutter); } body.dm-site .dm-header__logo { display: block; flex: none; line-height: 0; } body.dm-site .dm-header__logo img { width: auto; height: 34px; } body.dm-site .dm-nav { margin-left: auto; } body.dm-site .dm-nav__list { display: flex; gap: clamp(20px, 2.4vw, 40px); list-style: none; } body.dm-site .dm-nav__link { position: relative; display: block; padding: 10px 0; font-family: var(--dm-font); font-size: 1.0625rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--dm-anthrazit); } body.dm-site .dm-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 3px; background: var(--dm-gelb); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--dm-ease); } body.dm-site .dm-nav__link:hover::after, body.dm-site .dm-nav__link.is-active::after { transform: scaleX(1); } body.dm-site .dm-header__actions { display: flex; align-items: center; gap: 12px; } body.dm-site .dm-header__call .dm-icon { width: 18px; height: 18px; } body.dm-site .dm-burger { display: none; width: 48px; height: 48px; padding: 0; margin-right: -8px; border: 0; background: transparent; cursor: pointer; border-radius: 50%; align-items: center; justify-content: center; } body.dm-site .dm-burger__lines { position: relative; width: 26px; height: 18px; display: block; } body.dm-site .dm-burger__lines span { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: var(--dm-anthrazit); transition: transform .3s var(--dm-ease), opacity .2s, top .3s var(--dm-ease); } body.dm-site .dm-burger__lines span:nth-child(1) { top: 0; } body.dm-site .dm-burger__lines span:nth-child(2) { top: 8px; } body.dm-site .dm-burger__lines span:nth-child(3) { top: 16px; } body.dm-site .dm-burger[aria-expanded="true"] .dm-burger__lines span:nth-child(1) { top: 8px; transform: rotate(45deg); } body.dm-site .dm-burger[aria-expanded="true"] .dm-burger__lines span:nth-child(2) { opacity: 0; } body.dm-site .dm-burger[aria-expanded="true"] .dm-burger__lines span:nth-child(3) { top: 8px; transform: rotate(-45deg); } body.dm-site .dm-mobile-nav { position: fixed; z-index: 890; top: var(--dm-mnav-top, var(--dm-header-h)); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--dm-creme); padding: 24px var(--dm-gutter) 40px; display: flex; flex-direction: column; gap: 32px; opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--dm-ease), transform .25s var(--dm-ease); } body.dm-site .dm-mobile-nav.is-open { opacity: 1; transform: none; } body.dm-site .dm-mobile-nav[hidden] { display: none; } body.dm-site .dm-mobile-nav__list { list-style: none; } body.dm-site .dm-mobile-nav__list a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--dm-line); font-family: var(--dm-font); font-size: clamp(1.75rem, 7vw, 2.25rem); font-weight: 700; text-transform: uppercase; text-decoration: none; color: var(--dm-anthrazit); } body.dm-site .dm-mobile-nav__list a::after { content: ""; width: 12px; height: 12px; border-top: 3px solid var(--dm-gelb); border-right: 3px solid var(--dm-gelb); transform: rotate(45deg); margin-right: 6px; } body.dm-site .dm-mobile-nav__info { display: grid; gap: 16px; } body.dm-site .dm-mobile-nav__address { color: var(--dm-text-soft); margin: 0; } body.admin-bar.dm-site .dm-header { top: 32px; } @media (max-width: 782px) { body.admin-bar.dm-site .dm-header { top: 46px; } } @media (max-width: 600px) { body.admin-bar.dm-site .dm-header { top: 0; } } @media (max-width: 1180px) { body.dm-site .dm-header__call-text { display: none; } body.dm-site .dm-header__call { width: 44px; padding: 0; } } @media (max-width: 1023px) { body.dm-site .dm-nav { display: none; } body.dm-site .dm-burger { display: inline-flex; } body.dm-site .dm-header__actions { margin-left: auto; } body.dm-site .dm-header__logo img { height: 28px; } } /* ---------- Status „Jetzt geöffnet“ ---------- */ body.dm-site .dm-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 16px 7px 14px; border-radius: 999px; background: var(--dm-weiss); color: var(--dm-anthrazit); font-family: var(--dm-font); font-size: .9375rem; font-weight: 500; letter-spacing: .02em; line-height: 1.3; box-shadow: 0 0 0 1px var(--dm-line); } body.dm-site .dm-status[hidden] { display: none; } body.dm-site .dm-status__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--dm-orange); flex: none; } body.dm-site .dm-status.is-open .dm-status__dot { background: var(--dm-oliv); } body.dm-site .dm-status.is-open .dm-status__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--dm-oliv); opacity: 0; animation: dm-pulse 2.4s var(--dm-ease) infinite; } @keyframes dm-pulse { 0% { transform: scale(.6); opacity: .8; } 80%, 100% { transform: scale(1.5); opacity: 0; } } /* ---------- Hero ---------- */ body.dm-site .dm-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(540px, calc(100svh - var(--dm-header-h)), 860px); color: var(--dm-weiss); overflow: hidden; background: var(--dm-anthrazit); } body.dm-site .dm-hero__media, body.dm-site .dm-hero__media picture { position: absolute; inset: 0; z-index: -2; } body.dm-site .dm-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; } body.dm-site .dm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(43, 43, 43, .86) 0%, rgba(43, 43, 43, .55) 38%, rgba(43, 43, 43, .08) 72%), linear-gradient(90deg, rgba(43, 43, 43, .5) 0%, rgba(43, 43, 43, 0) 65%); } body.dm-site .dm-hero__content { padding-block: clamp(48px, 8vw, 104px); } body.dm-site .dm-hero .dm-kicker { color: var(--dm-weiss); } body.dm-site .dm-hero__title { color: var(--dm-weiss); max-width: 20ch; } body.dm-site .dm-hero__title .dm-gelb { display: block; } body.dm-site .dm-hero__lead { margin: 24px 0 36px; max-width: 46ch; font-size: clamp(1.0625rem, 1rem + .45vw, 1.375rem); line-height: 1.5; color: rgba(255, 255, 255, .92); } body.dm-site .dm-hero__status { margin-top: 32px; } body.dm-site .dm-hero__badge { position: absolute; right: var(--dm-gutter); bottom: clamp(48px, 8vw, 104px); width: 176px; height: 176px; padding: 16px; border-radius: 50%; background: var(--dm-gelb); color: var(--dm-anthrazit); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; text-decoration: none; transition: transform .4s var(--dm-ease); } body.dm-site .dm-hero__badge:hover { transform: rotate(-6deg) scale(1.04); } body.dm-site .dm-hero__badge small { font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } body.dm-site .dm-hero__badge strong { font-family: var(--dm-font); font-size: 1.375rem; font-weight: 700; text-transform: uppercase; line-height: 1; } body.dm-site .dm-hero__badge .dm-icon { width: 26px; height: 26px; margin-top: 6px; stroke-width: 3; } @media (max-width: 1023px) { body.dm-site .dm-hero__badge { display: none; } } /* ---------- Angebot ---------- */ body.dm-site .dm-intro { align-items: end; } body.dm-site .dm-intro__head { grid-column: 1 / span 7; } body.dm-site .dm-intro__text { grid-column: 8 / span 5; } body.dm-site .dm-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dm-gap); margin-top: clamp(48px, 6vw, 80px); list-style: none; } body.dm-site .dm-offer { position: relative; display: flex; flex-direction: column; background: var(--dm-weiss); border-radius: var(--dm-radius); overflow: hidden; transition: transform .35s var(--dm-ease), box-shadow .35s var(--dm-ease); } body.dm-site .dm-offer:hover { transform: translateY(-4px); box-shadow: var(--dm-shadow); } body.dm-site .dm-offer__media { position: relative; aspect-ratio: 4 / 3; background: var(--dm-creme); } body.dm-site .dm-offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--dm-ease); } body.dm-site .dm-offer:hover .dm-offer__media img { transform: scale(1.04); } body.dm-site .dm-offer__icon { position: absolute; left: 24px; bottom: -30px; z-index: 2; box-shadow: 0 0 0 5px var(--dm-weiss); } body.dm-site .dm-offer__body { flex: 1; display: flex; flex-direction: column; padding: 48px 24px 28px; } body.dm-site .dm-offer__body .dm-h3 { margin-bottom: 12px; } body.dm-site .dm-offer__body p { color: var(--dm-text-soft); font-size: var(--dm-fs-small); line-height: 1.55; } body.dm-site .dm-offer__meta { margin-top: auto !important; padding-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--dm-anthrazit) !important; font-weight: 500; } body.dm-site .dm-offer__meta .dm-icon { width: 18px; height: 18px; color: var(--dm-oliv); stroke-width: 2.6; } body.dm-site .dm-img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(120, 125, 40, .5); } body.dm-site .dm-img-placeholder .dm-icon { width: 38%; height: 38%; stroke-width: 1.6; } body.dm-site .dm-feature { display: flex; align-items: center; gap: 24px; margin-top: var(--dm-gap); padding: 24px 32px; background: var(--dm-weiss); border-radius: var(--dm-radius); } body.dm-site .dm-feature__text { flex: 1; } body.dm-site .dm-feature__title { font-family: var(--dm-font); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; margin: 0 0 4px; } body.dm-site .dm-feature__text p { color: var(--dm-text-soft); } body.dm-site .dm-feature__text .dm-feature__title { color: var(--dm-anthrazit); } body.dm-site .dm-feature__note { font-weight: 500; white-space: nowrap; } /* ---------- Wochenkarte & Heiße Theke ---------- */ body.dm-site .dm-karten-layout { align-items: start; grid-template-areas: "intro intro intro intro karten karten karten karten karten karten karten karten" "extra extra extra extra karten karten karten karten karten karten karten karten"; grid-template-rows: auto 1fr; row-gap: 0; } body.dm-site .dm-karten-intro { grid-area: intro; } body.dm-site .dm-karten-intro .dm-lead { margin: 20px 0 28px; } body.dm-site .dm-karten-wrap { grid-area: karten; } body.dm-site .dm-karten-extra { grid-area: extra; } body.dm-site .dm-karten { display: grid; gap: var(--dm-gap); } body.dm-site .dm-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.dm-site .dm-karten--1 { max-width: 460px; } body.dm-site .dm-karte { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--dm-creme); border-radius: calc(var(--dm-radius) + 4px); } body.dm-site .dm-karte__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } body.dm-site .dm-karte__titel { font-size: 1.625rem; font-weight: 700; text-transform: uppercase; } body.dm-site .dm-karte__zeitraum { font-weight: 500; color: var(--dm-text-soft); } body.dm-site .dm-karte__bild { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; background: var(--dm-weiss); box-shadow: 0 1px 2px rgba(43, 43, 43, .08); cursor: zoom-in; } body.dm-site .dm-karte__img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--dm-ease); } body.dm-site .dm-karte__bild:hover .dm-karte__img { transform: scale(1.02); } body.dm-site .dm-karte__zoom { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--dm-anthrazit); color: var(--dm-weiss); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(43, 43, 43, .25); transition: transform .3s var(--dm-ease), background-color .2s; } body.dm-site .dm-karte__zoom .dm-icon { width: 24px; height: 24px; stroke-width: 2.6; } body.dm-site .dm-karte__bild:hover .dm-karte__zoom { transform: scale(1.08); background: var(--dm-gelb); color: var(--dm-anthrazit); } body.dm-site .dm-karte__leer { aspect-ratio: 9 / 16; border: 2px dashed rgba(43, 43, 43, .2); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; color: var(--dm-text-soft); } body.dm-site .dm-karte__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; } body.dm-site .dm-karte__hinweis { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } body.dm-site .dm-karte__hinweis .dm-icon { width: 18px; height: 18px; color: var(--dm-oliv); stroke-width: 2.6; } body.dm-site .dm-karte__actions { display: inline-flex; gap: 16px; } body.dm-site .dm-segment { display: none; } body.dm-site .dm-wa { display: flex; gap: 20px; align-items: center; padding: 24px; background: var(--dm-creme); border-radius: var(--dm-radius); } body.dm-site .dm-wa__text { flex: 1; } body.dm-site .dm-wa__text p { color: var(--dm-text-soft); font-size: var(--dm-fs-small); margin-bottom: 16px; } body.dm-site .dm-wa__title { font-family: var(--dm-font); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; color: var(--dm-anthrazit) !important; margin: 0 0 6px !important; } body.dm-site .dm-wa__text .dm-wa__title { font-size: 1.25rem; margin-bottom: 6px; } body.dm-site .dm-wa__qrbox { flex: none; width: 112px; padding: 8px; background: var(--dm-weiss); border-radius: 8px; } body.dm-site .dm-wa__qr { width: 100%; height: auto; } body.dm-site .dm-newsletter { margin-top: 16px; padding: 24px; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); } /* ---------- Speisekarte ---------- */ body.dm-site .dm-speisekarte-section .dm-besteck { right: -6%; top: 6%; transform: rotate(8deg); } body.dm-site .dm-speisekarte-section .dm-besteck--links { left: -8%; right: auto; top: auto; bottom: 4%; transform: rotate(-14deg) scaleX(-1); width: clamp(260px, 30vw, 440px); opacity: .55; } body.dm-site .dm-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; } body.dm-site .dm-tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 20px 8px 14px; border: 1px solid rgba(43, 43, 43, .16); border-radius: 999px; background: var(--dm-weiss); color: var(--dm-anthrazit); font-family: var(--dm-font); font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } body.dm-site .dm-tab .dm-icon { width: 26px; height: 26px; color: var(--dm-oliv); stroke-width: 2.4; transition: color .2s; } body.dm-site .dm-tab:hover { border-color: var(--dm-anthrazit); } body.dm-site .dm-tab[aria-selected="true"] { background: var(--dm-anthrazit); border-color: var(--dm-anthrazit); color: var(--dm-weiss); } body.dm-site .dm-tab[aria-selected="true"] .dm-icon { color: var(--dm-gelb); } body.dm-site .dm-panel { max-width: 1000px; margin: 0 auto; padding: clamp(24px, 4.5vw, 64px); background: var(--dm-weiss); border-radius: calc(var(--dm-radius) + 4px); box-shadow: var(--dm-shadow); } body.dm-site .dm-panel + .dm-panel { margin-top: 24px; } body.dm-site .dm-panel[hidden] { display: none; } html.dm-js body.dm-site .dm-panel + .dm-panel { margin-top: 0; } body.dm-site .dm-panel:focus-visible { outline-offset: 6px; } body.dm-site .dm-panel__head { display: flex; align-items: center; gap: 20px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 2px dashed rgba(43, 43, 43, .28); } body.dm-site .dm-panel__title { font-size: var(--dm-fs-h3); font-weight: 700; text-transform: uppercase; } body.dm-site .dm-panel__hint { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 500; color: var(--dm-text-soft); } body.dm-site .dm-panel__hint .dm-icon { width: 18px; height: 18px; color: var(--dm-oliv); stroke-width: 2.6; } body.dm-site .dm-menu { list-style: none; columns: 2; column-gap: 56px; } body.dm-site .dm-menu__item { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(43, 43, 43, .09); break-inside: avoid; } body.dm-site .dm-menu__name { font-size: 1.125rem; line-height: 1.35; } body.dm-site .dm-menu__price { font-size: 1.125rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; } body.dm-site .dm-menu__desc { grid-column: 1 / 2; margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--dm-text-soft); } body.dm-site .dm-menu__sub { column-span: all; padding: 32px 0 8px; font-family: var(--dm-font); font-size: 1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dm-orange); border-bottom: 2px solid var(--dm-orange); break-after: avoid; } body.dm-site .dm-menu__sub:first-child { padding-top: 8px; } body.dm-site .dm-speisekarte__foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; text-align: center; color: var(--dm-text-soft); } @media (max-width: 860px) { body.dm-site .dm-menu { columns: 1; } } /* ---------- Über uns ---------- */ body.dm-site .dm-about { align-items: center; } body.dm-site .dm-about__media { grid-column: 1 / span 6; position: relative; padding-bottom: 12%; } body.dm-site .dm-about__main { border-radius: var(--dm-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--dm-creme); } body.dm-site .dm-about__main img, body.dm-site .dm-about__main picture { width: 100%; height: 100%; object-fit: cover; } body.dm-site .dm-about__small { position: absolute; right: -6%; bottom: 0; width: 52%; aspect-ratio: 3 / 2; border-radius: var(--dm-radius); overflow: hidden; border: 8px solid var(--dm-weiss); box-shadow: var(--dm-shadow); background: var(--dm-creme); } body.dm-site .dm-about__small img { width: 100%; height: 100%; object-fit: cover; } body.dm-site .dm-about__circle { position: absolute; left: -28px; top: -28px; z-index: 2; } body.dm-site .dm-about__text { grid-column: 8 / span 5; } body.dm-site .dm-about__text .dm-h2 { margin-bottom: 24px; } body.dm-site .dm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 28px; padding: 28px 0; border-block: 1px solid var(--dm-line); } body.dm-site .dm-facts dt { font-family: var(--dm-font); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--dm-oliv); text-transform: uppercase; } body.dm-site .dm-facts dd { margin: 8px 0 0; font-size: var(--dm-fs-small); line-height: 1.35; color: var(--dm-text-soft); } body.dm-site .dm-partner { font-size: var(--dm-fs-small); color: var(--dm-text-soft); } body.dm-site .dm-partner strong { color: var(--dm-anthrazit); font-weight: 500; } body.dm-site .dm-karriere { display: flex; align-items: center; gap: 28px; margin-top: clamp(64px, 8vw, 104px); padding: clamp(24px, 3.5vw, 40px); background: var(--dm-creme); border-radius: calc(var(--dm-radius) + 4px); } body.dm-site .dm-karriere__text { flex: 1; } body.dm-site .dm-karriere__text .dm-h3 { margin-bottom: 8px; } body.dm-site .dm-karriere__text p { color: var(--dm-text-soft); } /* ---------- Öffnungszeiten & Kontakt ---------- */ body.dm-site .dm-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dm-gap); } body.dm-site .dm-info__card { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--dm-weiss); border-radius: calc(var(--dm-radius) + 4px); } body.dm-site .dm-info__head { display: flex; align-items: center; gap: 16px; } body.dm-site .dm-hours { margin: 0; } body.dm-site .dm-hours__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--dm-line); } body.dm-site .dm-hours__row dt { font-weight: 500; } body.dm-site .dm-hours__row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } body.dm-site .dm-hours__row.is-closed dd { color: var(--dm-text-soft); } body.dm-site .dm-hours__notes { list-style: none; display: grid; gap: 8px; font-size: var(--dm-fs-small); color: var(--dm-text-soft); } body.dm-site .dm-hours__notes li { display: flex; gap: 10px; } body.dm-site .dm-hours__notes li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .55em; border-radius: 50%; background: var(--dm-gelb); } body.dm-site .dm-notice { margin: 0; padding: 14px 18px; border-left: 4px solid var(--dm-orange); background: var(--dm-creme); border-radius: 0 8px 8px 0; font-weight: 500; } body.dm-site .dm-contact { list-style: none; display: grid; gap: 16px; } body.dm-site .dm-contact li { display: flex; gap: 14px; align-items: flex-start; } body.dm-site .dm-contact .dm-icon { color: var(--dm-oliv); margin-top: 2px; stroke-width: 2.4; } body.dm-site .dm-contact a { text-decoration: underline; text-decoration-color: rgba(43, 43, 43, .3); } body.dm-site .dm-contact a:hover { text-decoration-color: var(--dm-gelb); text-decoration-thickness: 2px; } body.dm-site .dm-anfahrt__bild { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--dm-line); cursor: zoom-in; } body.dm-site .dm-anfahrt__text { color: var(--dm-text-soft); font-size: var(--dm-fs-small); } body.dm-site .dm-info__card .dm-btn { align-self: flex-start; } body.dm-site .dm-form { margin-top: 8px; } /* ---------- Footer ---------- */ body.dm-site .dm-footer { background: var(--dm-anthrazit); color: rgba(255, 255, 255, .82); padding: clamp(64px, 8vw, 104px) 0 32px; font-size: var(--dm-fs-small); line-height: 1.7; } body.dm-site .dm-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px var(--dm-gap); } body.dm-site .dm-footer__logo { width: 190px; height: auto; margin-bottom: 20px; } body.dm-site .dm-footer__claim { font-family: var(--dm-font); font-size: 1.25rem; font-weight: 500; color: var(--dm-weiss); max-width: 18ch; line-height: 1.3; } body.dm-site .dm-footer__title { margin: 0 0 12px !important; font-family: var(--dm-font); font-size: .875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dm-gelb); } body.dm-site .dm-footer a { color: var(--dm-weiss); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); transition: border-color .2s; } body.dm-site .dm-footer a:hover { border-bottom-color: var(--dm-gelb); } body.dm-site .dm-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 64px; padding-top: 24px; } body.dm-site .dm-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--dm-gutter); right: var(--dm-gutter); border-top: 1px solid rgba(255, 255, 255, .14); } body.dm-site .dm-footer__bottom p { margin: 0; } body.dm-site .dm-footer__legal { display: flex; gap: 24px; list-style: none; } /* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */ body.dm-site .dm-legal { padding-block: clamp(56px, 7vw, 104px); background: var(--dm-weiss); } body.dm-site .dm-legal__title { font-size: var(--dm-fs-h1); font-weight: 700; text-transform: uppercase; margin-bottom: 40px; } body.dm-site .dm-legal__content { color: var(--dm-text); } body.dm-site .dm-legal__content h1 { font-size: var(--dm-fs-h2); font-weight: 700; margin: 0 0 24px; } body.dm-site .dm-legal__content h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); font-weight: 700; margin: 48px 0 16px; } body.dm-site .dm-legal__content h3 { font-size: 1.375rem; font-weight: 500; margin: 32px 0 12px; } body.dm-site .dm-legal__content h4, body.dm-site .dm-legal__content h5 { font-size: 1.125rem; font-weight: 500; margin: 24px 0 8px; } body.dm-site .dm-legal__content p, body.dm-site .dm-legal__content li { color: var(--dm-text-soft); } body.dm-site .dm-legal__content ul, body.dm-site .dm-legal__content ol { padding-left: 1.3em; margin: 0 0 1em; } body.dm-site .dm-legal__content li { margin-bottom: .4em; } body.dm-site .dm-legal__content a { text-decoration: underline; text-decoration-color: var(--dm-gelb); text-decoration-thickness: 2px; word-break: break-word; } /* ---------- Lightbox ---------- */ body.dm-site .dm-lb { position: fixed; inset: 0; z-index: 99999; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: rgba(43, 43, 43, .97); color: var(--dm-weiss); opacity: 0; transition: opacity .25s var(--dm-ease); } body.dm-site .dm-lb.is-open { opacity: 1; } body.dm-site .dm-lb[hidden] { display: none; } body.dm-site .dm-lb__bar { display: flex; align-items: center; gap: 8px; padding: 12px clamp(12px, 3vw, 24px); } body.dm-site .dm-lb__caption { flex: 1; min-width: 0; margin: 0; font-family: var(--dm-font); font-size: 1.125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.dm-site .dm-lb__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--dm-weiss); font-family: var(--dm-font); font-size: .9375rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; } body.dm-site .dm-lb__btn:hover { background: var(--dm-gelb); color: var(--dm-anthrazit); } body.dm-site .dm-lb__btn .dm-icon { width: 22px; height: 22px; stroke-width: 2.6; } body.dm-site .dm-lb__btn[hidden] { display: none; } body.dm-site .dm-lb__stage { position: relative; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; } body.dm-site .dm-lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; cursor: zoom-in; user-select: none; } body.dm-site .dm-lb.is-zoomed .dm-lb__stage { align-items: flex-start; justify-content: flex-start; } body.dm-site .dm-lb.is-zoomed .dm-lb__img { max-width: none; max-height: none; cursor: zoom-out; margin: auto; } @media (max-width: 600px) { body.dm-site .dm-lb__btn-label { display: none; } body.dm-site .dm-lb__btn { padding: 0; min-width: 44px; height: 44px; } body.dm-site .dm-lb__bar { gap: 6px; padding: 10px 10px 10px 16px; } body.dm-site .dm-lb__caption { font-size: 1rem; } } /* ---------- Einblend-Animationen ---------- */ html.dm-js body.dm-site [data-dm-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--dm-ease), transform .8s var(--dm-ease); transition-delay: var(--dm-delay, 0s); } html.dm-js body.dm-site [data-dm-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.dm-js body.dm-site [data-dm-reveal] { opacity: 1; transform: none; transition: none; } body.dm-site *, body.dm-site *::before, body.dm-site *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---------- Tablet ---------- */ @media (max-width: 1100px) { body.dm-site .dm-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.dm-site .dm-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.dm-site .dm-info__card--anfahrt { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; } body.dm-site .dm-info__card--anfahrt .dm-info__head { grid-column: 1 / -1; } body.dm-site .dm-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 1023px) { body.dm-site .dm-intro__head, body.dm-site .dm-intro__text { grid-column: 1 / -1; } body.dm-site .dm-karten-layout { grid-template-areas: "intro" "karten" "extra"; grid-template-columns: 1fr; grid-template-rows: auto; row-gap: var(--dm-gap); } body.dm-site .dm-karten-intro .dm-lead { margin-bottom: 0; } body.dm-site .dm-about__media, body.dm-site .dm-about__text { grid-column: 1 / -1; } body.dm-site .dm-about__media { margin-right: 6%; margin-bottom: 24px; } } /* ---------- Smartphone ---------- */ @media (max-width: 720px) { body.dm-site .dm-btns .dm-btn { flex: 1 1 auto; } body.dm-site .dm-hero { min-height: calc(100svh - var(--dm-header-h)); } body.dm-site .dm-hero__media img { object-position: 30% 50%; } body.dm-site .dm-hero__title { max-width: none; } body.dm-site .dm-offers { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--dm-gutter)); padding: 4px var(--dm-gutter) 16px; scroll-padding-inline: var(--dm-gutter); scrollbar-width: none; } body.dm-site .dm-offers::-webkit-scrollbar { display: none; } body.dm-site .dm-offer { scroll-snap-align: start; } body.dm-site .dm-offer:hover { transform: none; box-shadow: none; } body.dm-site .dm-feature { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; } body.dm-site .dm-feature__note { white-space: normal; } body.dm-site .dm-karten--2 { grid-template-columns: 1fr; } html.dm-js body.dm-site .dm-karten--2 .dm-segment { display: flex; padding: 4px; background: var(--dm-creme); border-radius: 999px; } body.dm-site .dm-segment__btn { flex: 1; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--dm-anthrazit); font-family: var(--dm-font); font-size: 1rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } body.dm-site .dm-segment__btn[aria-selected="true"] { background: var(--dm-anthrazit); color: var(--dm-weiss); } html.dm-js body.dm-site .dm-karten--2 .dm-karte:not(.is-active) { display: none; } body.dm-site .dm-karte { padding: 16px; } body.dm-site .dm-wa { flex-direction: column; align-items: flex-start; } body.dm-site .dm-wa__qrbox { display: none; } body.dm-site .dm-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--dm-gutter)); padding: 4px var(--dm-gutter) 8px; scroll-padding-inline: var(--dm-gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--dm-gutter), #000 calc(100% - var(--dm-gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--dm-gutter), #000 calc(100% - var(--dm-gutter)), transparent 100%); } body.dm-site .dm-tabs::-webkit-scrollbar { display: none; } body.dm-site .dm-tab { flex: none; } body.dm-site .dm-panel { padding: 24px 20px; } body.dm-site .dm-panel__head { gap: 14px; } body.dm-site .dm-panel__head .dm-circle { width: 52px; height: 52px; } body.dm-site .dm-menu__name, body.dm-site .dm-menu__price { font-size: 1.0625rem; } body.dm-site .dm-speisekarte-section .dm-besteck { opacity: .45; } body.dm-site .dm-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } body.dm-site .dm-karriere { flex-direction: column; align-items: flex-start; gap: 20px; } body.dm-site .dm-about__circle { left: 12px; top: -24px; width: 64px; height: 64px; } body.dm-site .dm-info { grid-template-columns: 1fr; } body.dm-site .dm-info__card--anfahrt { display: flex; } body.dm-site .dm-footer__grid { grid-template-columns: 1fr; gap: 32px; } body.dm-site .dm-footer__bottom { flex-direction: column-reverse; align-items: flex-start; margin-top: 40px; } } /* ---------- Druck ---------- */ @media print { body.dm-site .dm-header, body.dm-site .dm-hero__badge, body.dm-site .dm-lb, body.dm-site .dm-besteck, body.dm-site .dm-tabs, body.dm-site .dm-segment { display: none !important; } body.dm-site .dm-panel[hidden] { display: block !important; } html.dm-js body.dm-site [data-dm-reveal] { opacity: 1 !important; transform: none !important; } } /* ---------- Ergänzungen ---------- */ body.dm-site .dm-about__small:empty { display: none; } body.dm-site .dm-hero__media picture, body.dm-site .dm-about__main picture { display: block; width: 100%; height: 100%; } /* Vergrößern-Schaltflächen (Buttons statt Links → kein Seitenwechsel) */ body.dm-site .dm-karte__bild, body.dm-site .dm-anfahrt__bild { width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; -webkit-appearance: none; appearance: none; } body.dm-site .dm-karte__bild { border: 0; } body.dm-site .dm-anfahrt__bild { background: var(--dm-weiss); } body.dm-site button.dm-link-btn { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; } /* ---------- Version 1.1: neue Piktogramme, Teambild, Schrift in Links ---------- */ body.dm-site .dm-circle.dm-badge { background: transparent; } body.dm-site .dm-badge .dm-badge-svg { display: block; width: 100%; height: 100%; } body.dm-site .dm-tab__badge { display: inline-flex; flex: none; width: 32px; height: 32px; margin-left: -4px; } body.dm-site .dm-tab__badge .dm-badge-svg { width: 100%; height: 100%; display: block; } body.dm-site .dm-img-placeholder .dm-circle { width: 34%; height: auto; aspect-ratio: 1; } body.dm-site .dm-about__main { aspect-ratio: 1 / 1; } body.dm-site .dm-about__main img { object-position: 50% 50%; } body.dm-site a, body.dm-site button, body.dm-site .dm-contact a, body.dm-site .dm-footer a, body.dm-site .dm-mobile-nav a { font-family: var(--dm-font) !important; } body.dm-site .dm-contact a, body.dm-site .dm-footer a { font-weight: inherit; font-size: inherit; letter-spacing: inherit; text-transform: none; } /* ---------- Version 1.2: Impressum & Datenschutz ---------- */ body.dm-site .dm-legal-hero { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 72px); } body.dm-site .dm-legal-hero .dm-h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); } body.dm-site .dm-legal-hero .dm-lead { margin-top: 20px; } body.dm-site .dm-legal-stand { margin: 16px 0 0; font-weight: 500; color: var(--dm-text-soft); } body.dm-site .dm-legal-body { padding-top: clamp(48px, 6vw, 88px); } body.dm-site .dm-prose { color: var(--dm-text-soft); font-size: var(--dm-fs-body); line-height: 1.7; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } body.dm-site .dm-prose p { margin: 0 0 1em; } body.dm-site .dm-prose p:last-child { margin-bottom: 0; } body.dm-site .dm-prose h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 700; text-transform: uppercase; color: var(--dm-anthrazit); margin: 64px 0 20px; padding-top: 24px; border-top: 2px dashed rgba(43, 43, 43, .22); scroll-margin-top: calc(var(--dm-header-h) + 16px); } body.dm-site .dm-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } body.dm-site .dm-prose h3 { font-size: 1.375rem; font-weight: 700; color: var(--dm-anthrazit); margin: 40px 0 12px; } body.dm-site .dm-prose h4 { font-size: 1.125rem; font-weight: 500; color: var(--dm-anthrazit); margin: 28px 0 8px; } body.dm-site .dm-prose strong { color: var(--dm-anthrazit); font-weight: 500; } body.dm-site .dm-prose ul, body.dm-site .dm-prose ol { margin: 0 0 1em; padding-left: 0; list-style: none; display: grid; gap: 8px; } body.dm-site .dm-prose ul li { position: relative; padding-left: 20px; } body.dm-site .dm-prose ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--dm-gelb); } body.dm-site .dm-prose ol { counter-reset: dm-ol; } body.dm-site .dm-prose ol li { counter-increment: dm-ol; padding-left: 28px; position: relative; } body.dm-site .dm-prose ol li::before { content: counter(dm-ol) "."; position: absolute; left: 0; font-weight: 500; color: var(--dm-anthrazit); } body.dm-site .dm-prose a { color: var(--dm-anthrazit); text-decoration: underline; text-decoration-color: var(--dm-gelb); text-decoration-thickness: 2px; text-underline-offset: .2em; word-break: break-word; } body.dm-site .dm-prose a:hover { text-decoration-color: var(--dm-anthrazit); } body.dm-site .dm-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; } body.dm-site .dm-prose td, body.dm-site .dm-prose th { padding: 8px 10px; border-bottom: 1px solid var(--dm-line); text-align: left; vertical-align: top; } /* Impressum: Kästen */ body.dm-site .dm-legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--dm-gap); } body.dm-site .dm-legal-card { padding: clamp(24px, 3vw, 40px); background: var(--dm-creme); border-radius: calc(var(--dm-radius) + 4px); } body.dm-site .dm-legal-card .dm-h3 { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px dashed rgba(43, 43, 43, .22); } body.dm-site .dm-legal-card .dm-prose { color: var(--dm-text); } /* Impressum: Bildrechte */ body.dm-site .dm-credits-head { margin: clamp(64px, 8vw, 112px) 0 clamp(28px, 3vw, 40px); } body.dm-site .dm-credits { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--dm-gap); } body.dm-site .dm-credit { display: flex; flex-direction: column; background: var(--dm-weiss); border: 1px solid var(--dm-line); border-radius: var(--dm-radius); overflow: hidden; } body.dm-site .dm-credit__media { aspect-ratio: 3 / 2; background: var(--dm-creme); display: flex; align-items: center; justify-content: center; } body.dm-site .dm-credit__media img, body.dm-site .dm-credit__media picture { width: 100%; height: 100%; object-fit: cover; } body.dm-site .dm-credit__text { margin: 0; padding: 14px 16px; font-size: var(--dm-fs-small); line-height: 1.45; color: var(--dm-anthrazit); } body.dm-site .dm-credit__text a { text-decoration: underline; text-decoration-color: var(--dm-gelb); text-decoration-thickness: 2px; text-underline-offset: .2em; } body.dm-site .dm-details { margin-top: 40px; border: 1px solid var(--dm-line); border-radius: var(--dm-radius); background: var(--dm-weiss); } body.dm-site .dm-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; cursor: pointer; list-style: none; font-family: var(--dm-font); font-size: 1.125rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } body.dm-site .dm-details summary::-webkit-details-marker { display: none; } body.dm-site .dm-details summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 3px solid var(--dm-gelb); border-bottom: 3px solid var(--dm-gelb); transform: rotate(45deg); margin-top: -4px; transition: transform .25s var(--dm-ease); } body.dm-site .dm-details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } body.dm-site .dm-details .dm-prose { padding: 0 24px 24px; } /* Datenschutz: Inhaltsverzeichnis + Text */ body.dm-site .dm-ds { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; } body.dm-site .dm-toc { position: sticky; top: calc(var(--dm-header-h) + 24px); } body.dm-site .dm-toc__box { padding: 24px 28px; background: var(--dm-creme); border-radius: calc(var(--dm-radius) + 4px); } body.dm-site .dm-toc__title { font-family: var(--dm-font); font-size: 1.125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; } body.dm-site .dm-toc__title::-webkit-details-marker { display: none; } body.dm-site .dm-toc__list { list-style: none; counter-reset: dm-toc; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; } body.dm-site .dm-toc__list li { counter-increment: dm-toc; } body.dm-site .dm-toc__list a { display: flex; gap: 10px; padding: 7px 0; text-decoration: none; line-height: 1.35; color: var(--dm-text-soft); border-bottom: 1px solid var(--dm-line); transition: color .2s; } body.dm-site .dm-toc__list a::before { content: counter(dm-toc); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--dm-weiss); color: var(--dm-anthrazit); font-size: .8125rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } body.dm-site .dm-toc__list a:hover, body.dm-site .dm-toc__list a.is-active { color: var(--dm-anthrazit); } body.dm-site .dm-toc__list a.is-active::before { background: var(--dm-gelb); } body.dm-site .dm-ds__text { max-width: 780px; } @media (max-width: 1023px) { body.dm-site .dm-ds { grid-template-columns: 1fr; } body.dm-site .dm-toc { position: static; } } body.dm-site .dm-section.dm-legal-body { overflow: visible; } body.dm-site .dm-toc__title { display: flex; align-items: center; justify-content: space-between; } body.dm-site .dm-toc__title::after { content: ""; width: 9px; height: 9px; border-right: 3px solid var(--dm-gelb); border-bottom: 3px solid var(--dm-gelb); transform: rotate(45deg); margin-top: -4px; transition: transform .25s var(--dm-ease); } body.dm-site .dm-toc__box[open] .dm-toc__title::after { transform: rotate(-135deg); margin-top: 4px; } body.dm-site .dm-about__main img { object-position: 50% 100%; }