/* ========================================================================== KDM Theme · eine Stylesheet Datei für die ganze Website Werte aus dem KDM Design System (tokens.json). Farben kommen als --wp--preset--color--* aus theme.json. Größen und Abstände stehen hier, weil sie sich je Viewport ändern. Sieben Viewports (Basis ist Desktop M, Referenzbreite 1440 px): Viewport Breite H1 H2 H3 Lead Text Rand Abschnitt Desktop L ab 1600 72/80 54/62 36/44 26/37 18/29 64 96 / 144 Desktop M 1366 bis 1599 64/72 48/56 32/40 24/34 16/26 48 80 / 120 Desktop S 1200 bis 1365 56/64 42/50 28/35 22/32 16/26 40 72 / 104 Tablet 768 bis 1199 48/56 34/41 26/33 20/29 16/26 32 64 / 88 Mobil gross 414 bis 767 40/47 28/34 22/28 18/26 16/26 24 48 / 72 Mobil 360 bis 413 34/40 26/32 20/26 17/25 15/24 20 40 / 64 Mobil klein bis 359 30/36 24/30 19/24 16/24 15/24 16 36 / 56 Typografie (Inter 4): Zeilenhöhe fällt mit der Größe, Fließtext 1,6, Lead 1,45, H3 1,25, H2 1,18, H1 1,12. Laufweite nach Inter Dynamic Metrics (rsms.me/inter/dynmetrics): tracking = -0.016 + 0.21 * e^(-0.18 * Größe) in em, je Rolle und Viewport als --kdm-ls-* hinterlegt. Media Queries können keine Variablen nutzen, daher stehen die Grenzen als Zahlen im Code: 1600, 1365, 1199, 767, 413, 359. ========================================================================== */ :root { --kdm-page: var(--wp--preset--color--bg-page, #f7f5f2); --kdm-sand: var(--wp--preset--color--bg-sand, #eeeae4); --kdm-walnut: var(--wp--preset--color--bg-walnut, #1d0900); --kdm-ink: var(--wp--preset--color--ink-heading, #222); --kdm-body: var(--wp--preset--color--ink-body, #333); --kdm-muted: var(--wp--preset--color--ink-muted, #666); --kdm-line-warm: var(--wp--preset--color--line-warm, #cec7b9); --kdm-line: var(--wp--preset--color--line-neutral, #c2c2c2); /* Desktop M */ --kdm-fs-h1: 64px; --kdm-lh-h1: 72px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 48px; --kdm-lh-h2: 56px; --kdm-ls-h2: -.016em; --kdm-fs-h3: 32px; --kdm-lh-h3: 40px; --kdm-ls-h3: -.015em; --kdm-fs-loud: 24px; --kdm-lh-loud: 34px; --kdm-lh-loud-bold: 31px; --kdm-ls-loud: -.013em; --kdm-fs-regular: 16px; --kdm-lh-regular: 26px; --kdm-ls-regular: -.004em; --kdm-fs-small: 14px; --kdm-lh-small: 21px; --kdm-ls-small: .001em; --kdm-fs-karte: 24px; --kdm-lh-karte: 30px; --kdm-ls-karte: -.013em; --kdm-fs-nav: 24px; --kdm-ls-nav: -.013em; --kdm-marker: 40px; /* Typografische Abstände: hängen an der Schriftgröße und skalieren so mit jedem Viewport. Nähe vor Trennung: eine Überschrift steht ihrem Text dreimal näher als dem Inhalt davor. */ --kdm-nach-h1: max(16px, calc(var(--kdm-fs-h1) * .375)); --kdm-nach-h2: max(16px, calc(var(--kdm-fs-h2) * .5)); --kdm-nach-h3: max(12px, calc(var(--kdm-fs-h3) * .5)); --kdm-nach-h4: max(10px, calc(var(--kdm-fs-loud) * .5)); --kdm-nach-titel: 8px; --kdm-vor-h3: calc(var(--kdm-fs-h3) * 1.5); --kdm-zu-modul: var(--kdm-space-40); --kdm-zu-aktion: calc(var(--kdm-fs-regular) * 2); --kdm-gutter: 48px; --kdm-space-16: 16px; --kdm-space-24: 24px; --kdm-space-40: 40px; --kdm-space-80: 80px; --kdm-space-120: 120px; --kdm-box-pad: 80px; --kdm-radius: 24px; --kdm-text: 1080px; /* Innenraster: Text, Notiz, FAQ, Karussells und Fußzeile auf einer Flucht */ --kdm-raster-innen: var(--kdm-text); --kdm-wide: 1344px; --kdm-card: 400px; --kdm-spalte-gap: 80px; --kdm-h-keyvisual: 520px; --kdm-h-buehne: 906px; --kdm-h-stimmung: 384px; --kdm-w-stimmung: 663px; --kdm-h-textbild: 460px; --kdm-w-kachel: 317px; --kdm-h-thema: 480px; --kdm-h-produktkachel: 594px; --kdm-logo-w: 214px; --kdm-logo-h: 106px; --kdm-logo-img: 150px; } /* Desktop L */ @media (min-width: 1600px) { :root { --kdm-fs-h1: 72px; --kdm-lh-h1: 80px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 54px; --kdm-lh-h2: 62px; --kdm-ls-h2: -.016em; --kdm-fs-h3: 36px; --kdm-lh-h3: 44px; --kdm-ls-h3: -.016em; --kdm-fs-loud: 26px; --kdm-lh-loud: 37px; --kdm-lh-loud-bold: 34px; --kdm-ls-loud: -.014em; --kdm-fs-regular: 18px; --kdm-lh-regular: 29px; --kdm-ls-regular: -.008em; --kdm-fs-small: 15px; --kdm-lh-small: 22px; --kdm-ls-small: -.002em; --kdm-fs-karte: 26px; --kdm-lh-karte: 32px; --kdm-ls-karte: -.014em; --kdm-fs-nav: 24px; --kdm-ls-nav: -.013em; --kdm-marker: 46px; --kdm-gutter: 64px; --kdm-space-80: 96px; --kdm-space-120: 144px; --kdm-box-pad: 96px; --kdm-text: 1200px; --kdm-wide: 1472px; --kdm-card: 440px; --kdm-spalte-gap: 96px; --kdm-h-keyvisual: 600px; --kdm-h-buehne: 1000px; --kdm-h-stimmung: 430px; --kdm-w-stimmung: 740px; --kdm-h-textbild: 520px; --kdm-w-kachel: 348px; --kdm-h-thema: 520px; --kdm-h-produktkachel: 630px; } } /* Desktop S */ @media (max-width: 1365px) { :root { --kdm-fs-h1: 56px; --kdm-lh-h1: 64px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 42px; --kdm-lh-h2: 50px; --kdm-ls-h2: -.016em; --kdm-fs-h3: 28px; --kdm-lh-h3: 35px; --kdm-ls-h3: -.015em; --kdm-fs-loud: 22px; --kdm-lh-loud: 32px; --kdm-lh-loud-bold: 29px; --kdm-ls-loud: -.012em; --kdm-fs-regular: 16px; --kdm-lh-regular: 26px; --kdm-ls-regular: -.004em; --kdm-fs-small: 14px; --kdm-lh-small: 21px; --kdm-ls-small: .001em; --kdm-fs-karte: 22px; --kdm-lh-karte: 28px; --kdm-ls-karte: -.012em; --kdm-fs-nav: 20px; --kdm-ls-nav: -.010em; --kdm-marker: 36px; --kdm-gutter: 40px; --kdm-space-80: 72px; --kdm-space-120: 104px; --kdm-box-pad: 64px; --kdm-card: 340px; --kdm-spalte-gap: 64px; --kdm-h-keyvisual: 460px; --kdm-h-buehne: 800px; --kdm-h-stimmung: 340px; --kdm-w-stimmung: 100%; --kdm-h-textbild: 420px; --kdm-w-kachel: 300px; --kdm-h-thema: 450px; --kdm-h-produktkachel: 560px; } } /* Tablet */ @media (max-width: 1199px) { :root { --kdm-fs-h1: 48px; --kdm-lh-h1: 56px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 34px; --kdm-lh-h2: 41px; --kdm-ls-h2: -.016em; --kdm-fs-h3: 26px; --kdm-lh-h3: 33px; --kdm-ls-h3: -.014em; --kdm-fs-loud: 20px; --kdm-lh-loud: 29px; --kdm-lh-loud-bold: 26px; --kdm-ls-loud: -.010em; --kdm-fs-regular: 16px; --kdm-lh-regular: 26px; --kdm-ls-regular: -.004em; --kdm-fs-small: 14px; --kdm-lh-small: 21px; --kdm-ls-small: .001em; --kdm-fs-karte: 20px; --kdm-lh-karte: 26px; --kdm-ls-karte: -.010em; --kdm-fs-nav: 20px; --kdm-ls-nav: -.010em; --kdm-marker: 32px; --kdm-gutter: 32px; --kdm-space-40: 32px; --kdm-space-80: 64px; --kdm-space-120: 88px; --kdm-box-pad: 48px; --kdm-card: 280px; --kdm-spalte-gap: 40px; --kdm-h-keyvisual: 400px; --kdm-h-buehne: 720px; --kdm-h-stimmung: 300px; --kdm-h-textbild: 380px; --kdm-w-kachel: 280px; --kdm-h-thema: 420px; --kdm-h-produktkachel: 520px; --kdm-logo-w: 150px; --kdm-logo-h: 72px; --kdm-logo-img: 110px; } } /* Mobil gross */ @media (max-width: 767px) { :root { --kdm-fs-h1: 40px; --kdm-lh-h1: 47px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 28px; --kdm-lh-h2: 34px; --kdm-ls-h2: -.015em; --kdm-fs-h3: 22px; --kdm-lh-h3: 28px; --kdm-ls-h3: -.012em; --kdm-fs-loud: 18px; --kdm-lh-loud: 26px; --kdm-lh-loud-bold: 24px; --kdm-ls-loud: -.008em; --kdm-fs-regular: 16px; --kdm-lh-regular: 26px; --kdm-ls-regular: -.004em; --kdm-fs-small: 14px; --kdm-lh-small: 21px; --kdm-ls-small: .001em; --kdm-fs-karte: 20px; --kdm-lh-karte: 26px; --kdm-ls-karte: -.010em; --kdm-fs-nav: 20px; --kdm-ls-nav: -.010em; --kdm-marker: 28px; --kdm-gutter: 24px; --kdm-space-24: 20px; --kdm-space-40: 24px; --kdm-space-80: 48px; --kdm-space-120: 72px; --kdm-box-pad: 32px; --kdm-radius: 20px; --kdm-card: 100%; --kdm-spalte-gap: 24px; --kdm-h-keyvisual: 320px; --kdm-h-buehne: 620px; --kdm-h-stimmung: 260px; --kdm-h-textbild: 280px; --kdm-w-kachel: 272px; --kdm-h-thema: 400px; --kdm-h-produktkachel: 500px; --kdm-logo-w: 132px; --kdm-logo-h: 64px; --kdm-logo-img: 96px; } } /* Mobil */ @media (max-width: 413px) { :root { --kdm-fs-h1: 34px; --kdm-lh-h1: 40px; --kdm-ls-h1: -.016em; --kdm-fs-h2: 26px; --kdm-lh-h2: 32px; --kdm-ls-h2: -.014em; --kdm-fs-h3: 20px; --kdm-lh-h3: 26px; --kdm-ls-h3: -.010em; --kdm-fs-loud: 17px; --kdm-lh-loud: 25px; --kdm-lh-loud-bold: 23px; --kdm-ls-loud: -.006em; --kdm-fs-regular: 15px; --kdm-lh-regular: 24px; --kdm-ls-regular: -.002em; --kdm-fs-small: 13px; --kdm-lh-small: 20px; --kdm-ls-small: .004em; --kdm-fs-karte: 19px; --kdm-lh-karte: 24px; --kdm-ls-karte: -.009em; --kdm-fs-nav: 20px; --kdm-ls-nav: -.010em; --kdm-marker: 26px; --kdm-gutter: 20px; --kdm-space-40: 24px; --kdm-space-80: 40px; --kdm-space-120: 64px; --kdm-box-pad: 24px; --kdm-h-keyvisual: 260px; --kdm-h-buehne: 560px; --kdm-h-stimmung: 220px; --kdm-h-textbild: 240px; --kdm-w-kachel: 256px; --kdm-h-thema: 380px; --kdm-h-produktkachel: 480px; --kdm-logo-w: 120px; --kdm-logo-h: 58px; --kdm-logo-img: 88px; } } /* Mobil klein */ @media (max-width: 359px) { :root { --kdm-fs-h1: 30px; --kdm-lh-h1: 36px; --kdm-ls-h1: -.015em; --kdm-fs-h2: 24px; --kdm-lh-h2: 30px; --kdm-ls-h2: -.013em; --kdm-fs-h3: 19px; --kdm-lh-h3: 24px; --kdm-ls-h3: -.009em; --kdm-fs-loud: 16px; --kdm-lh-loud: 24px; --kdm-lh-loud-bold: 21px; --kdm-ls-loud: -.004em; --kdm-fs-regular: 15px; --kdm-lh-regular: 24px; --kdm-ls-regular: -.002em; --kdm-fs-small: 13px; --kdm-lh-small: 20px; --kdm-ls-small: .004em; --kdm-fs-karte: 18px; --kdm-lh-karte: 23px; --kdm-ls-karte: -.008em; --kdm-fs-nav: 20px; --kdm-ls-nav: -.010em; --kdm-marker: 24px; --kdm-gutter: 16px; --kdm-space-24: 16px; --kdm-space-40: 20px; --kdm-space-80: 36px; --kdm-space-120: 56px; --kdm-box-pad: 20px; --kdm-radius: 16px; --kdm-h-keyvisual: 220px; --kdm-h-buehne: 520px; --kdm-h-stimmung: 190px; --kdm-h-textbild: 210px; --kdm-w-kachel: 240px; --kdm-h-thema: 360px; --kdm-h-produktkachel: 460px; --kdm-logo-w: 108px; --kdm-logo-h: 52px; --kdm-logo-img: 80px; } } /* -------------------------------------------------------------------------- Grundlagen -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; overflow-wrap: break-word; } h1, h2 { hyphens: auto; } p { margin: 0; } figure { margin: 0; } a { text-underline-offset: 3px; text-decoration-thickness: 1px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } :focus-visible { outline: 2px solid var(--kdm-ink); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } } .kdm-loud, .is-style-loud { font-size: var(--kdm-fs-loud); letter-spacing: var(--kdm-ls-loud); line-height: var(--kdm-lh-loud); } /* Gruppenüberschrift (z. B. "Pendelleuchten") in H3 Größe, gleich groß wie die Modellüberschriften */ .wp-block-heading.is-style-gruppe { font-size: var(--kdm-fs-h3); letter-spacing: var(--kdm-ls-h3); line-height: var(--kdm-lh-h3); } .wp-block-post-content > .wp-block-heading.is-style-gruppe { max-width: var(--kdm-wide) !important; } /* Seitenrhythmus: Bausteine stehen space-80 auseinander, Abschnitte mit H2 space-120. */ .kdm-main { padding-top: var(--kdm-space-80); } .kdm-main .wp-block-post-content > * { margin-block: 0; } .kdm-main .wp-block-post-content > * + * { margin-block-start: var(--kdm-space-80); } .kdm-main .wp-block-post-content > * + :is(h2, .wp-block-group:has(> h2:first-child)) { margin-block-start: var(--kdm-space-120); } .kdm-main .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; } .kdm-main .wp-block-post-content > :last-child:not(.alignfull) { margin-block-end: var(--kdm-space-120); } .kdm-main .wp-block-group > * + * { margin-block-start: var(--kdm-space-24); } .kdm-seitentitel { margin-bottom: var(--kdm-space-40); } /* Flächen */ .wp-block-group:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) { background: var(--kdm-page); padding-block: var(--kdm-space-80); } .wp-block-group.is-style-flaeche-sand-dunkel { background: var(--kdm-sand); } /* Steht eine Fläche ganz oben, läuft sie hinter der Kopfzeile weiter (wie live) */ body:has(.kdm-main > .wp-block-post-content > .is-style-flaeche-sand-dunkel:first-child) .kdm-header { background: var(--kdm-sand); } body:has(.kdm-main > .wp-block-post-content > .is-style-flaeche-sand:first-child) .kdm-header { background: var(--kdm-page); } .kdm-main:has(> .wp-block-post-content > :is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel):first-child) { padding-top: 0; margin-block-start: 0; } .wp-block-group:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) > * { margin-block: 0; } .wp-block-group:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) > * + * { margin-block-start: var(--kdm-space-80); } .wp-block-group:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) > * + :is(h2, .wp-block-group:has(> h2:first-child)) { margin-block-start: var(--kdm-space-120); } .is-style-flaeche-sand .kdm-karte__bild { background: #fff; border-radius: var(--kdm-radius); overflow: hidden; } .is-style-flaeche-sand .kdm-karte__bild img { object-fit: contain; padding: var(--kdm-space-16); box-sizing: border-box; } .kdm-main .wp-block-post-content > .alignfull:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) + .alignfull, .kdm-main .wp-block-post-content > .alignfull + .alignfull:is(.is-style-flaeche-sand, .is-style-flaeche-sand-dunkel) { margin-block-start: 0; } /* -------------------------------------------------------------------------- Typografischer Fluss Eine Regel für alle Seiten und Bausteine. Absatz zu Absatz 1em der Schrift, Überschrift zu Text 0,5em der Überschrift (H1 0,375em), Überschrift zu Modul (Bild, Grafik, Karten) 40, Text zu Buttons 2em, vor Zwischenüberschrift 1,5em. -------------------------------------------------------------------------- */ :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: 1em; } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > h1 + * { margin-block-start: var(--kdm-nach-h1); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > h2 + * { margin-block-start: var(--kdm-nach-h2); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > h3 + * { margin-block-start: var(--kdm-nach-h3); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > h4 + * { margin-block-start: var(--kdm-nach-h4); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > :is(h1, h2, h3) + :not(p, ul, ol, h2, h3, h4, .wp-block-list, .wp-block-buttons) { margin-block-start: var(--kdm-zu-modul); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > :is(p, ul, ol) + :is(h3, h4) { margin-block-start: var(--kdm-vor-h3); } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > :is(p, ul, ol) + :is(.wp-block-buttons, .kdm-button) { margin-block-start: var(--kdm-zu-aktion); } /* Kleine Titel über Text (Kacheln, Zeitleiste, Hinweis, Label) */ :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group, [class*="kdm-"], figcaption, blockquote, .wp-block-column) > :is(.kdm-kachel__titel, .kdm-zeitleiste__titel, .kdm-hinweis__titel, .kdm-kurzantwort__label) + * { margin-block-start: var(--kdm-nach-titel); } /* In Rastern und Flexboxen regelt gap den Abstand, Ränder würden sich addieren. */ :is(.kdm-main, .editor-styles-wrapper) :is(.kdm-faq__innen, .kdm-bildspalte, .kdm-karte, .kdm-produktzeile__inhalt) > * { margin-block-start: 0; } :is(.kdm-main, .editor-styles-wrapper) .kdm-karte > .kdm-karte__buttons { margin-block-start: 8px; } /* Name zu Buttons 24 = gap 16 + 8 */ :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__text > h3 + * { margin-block-start: var(--kdm-nach-h3); } /* Gruppenüberschrift (H2 Größe) zu den Modellen */ :is(.kdm-main, .editor-styles-wrapper) .wp-block-post-content > .is-style-gruppe + *, :is(.kdm-main, .editor-styles-wrapper) .wp-block-group > .is-style-gruppe + * { margin-block-start: var(--kdm-zu-modul); } /* Aufeinanderfolgende Modelle (Produktzeilen) bekommen 25 % mehr Luft als der normale Blockabstand. */ .kdm-main .kdm-produktzeile + .kdm-produktzeile { margin-block-start: calc(var(--kdm-space-80) * 1.25); } .wp-block-group.is-style-flaeche-walnut { background: var(--kdm-walnut); color: #fff; padding: var(--kdm-box-pad); border-radius: var(--kdm-radius); } .wp-block-group.is-style-flaeche-walnut :is(h2, h3) { color: #fff; } /* Kernbausteine */ .wp-block-table { overflow-x: auto; } .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table :is(th, td) { text-align: left; padding: var(--kdm-space-16) var(--kdm-space-16) var(--kdm-space-16) 0; border-bottom: 1px solid var(--kdm-line-warm); } .wp-block-list { padding-left: 1.2em; } .wp-block-image.is-style-kdm-rund img { border-radius: var(--kdm-radius); width: 100%; height: var(--kdm-h-keyvisual); object-fit: cover; } /* -------------------------------------------------------------------------- Button -------------------------------------------------------------------------- */ .kdm-button, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; padding: 12px 32px; border-radius: 100px; background: var(--kdm-ink); color: #fff; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.004em; text-decoration: none; white-space: nowrap; transition: transform .3s ease, box-shadow .3s ease; } .kdm-button:hover, .wp-element-button:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); color: #fff; } .kdm-button--hell { background: #fff; color: var(--kdm-walnut); } .kdm-button--hell:hover { color: var(--kdm-walnut); } .kdm-button--kontur-dunkel { background: transparent; color: var(--kdm-ink); box-shadow: inset 0 0 0 1px var(--kdm-ink); } .kdm-button--kontur-dunkel:hover { color: var(--kdm-ink); box-shadow: inset 0 0 0 1px var(--kdm-ink), 0 2px 4px rgba(0,0,0,.25); } .kdm-button--kontur { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); } .kdm-stern { font-size: 12px; line-height: 0; margin-left: 3px; position: relative; top: -2px; } /* Der alte Code Snippet setzt hinter jeden Partnerlink ein Sternchen per ::after. Wo das Theme schon ein Sternchen setzt, wird das zweite ausgeblendet. */ a[rel~="sponsored"]:has(.kdm-stern)::after { content: none !important; display: none !important; } /* -------------------------------------------------------------------------- Bild mit KI Label (EU Kennzeichnung, Grafik der EU Kommission) -------------------------------------------------------------------------- */ .kdm-figur { position: relative; overflow: hidden; border-radius: var(--kdm-radius); height: 100%; } .kdm-figur img { display: block; width: 100%; height: 100%; object-fit: cover; } .kdm-pos-top img { object-position: 50% 0; } .kdm-pos-bottom img { object-position: 50% 100%; } .kdm-pos-top-left img { object-position: 0 0; } .kdm-pos-top-right img { object-position: 100% 0; } .kdm-pos-bottom-left img { object-position: 0 100%; } .kdm-pos-bottom-right img { object-position: 100% 100%; } .kdm-pos-left img { object-position: 0 50%; } .kdm-pos-right img { object-position: 100% 50%; } .kdm-ki { --kdm-ki-width: 190px; --kdm-ki-inset: 16px; } .kdm-ki-label { position: absolute; z-index: 2; pointer-events: none; width: var(--kdm-ki-width); height: calc(var(--kdm-ki-width) * .316751); right: calc(var(--kdm-ki-inset) - var(--kdm-ki-width) * .110814); bottom: calc(var(--kdm-ki-inset) - var(--kdm-ki-width) * .087234); background: url("../img/eu-label-ki.svg") no-repeat center / contain; } /* EU Label an Bildern ohne kdm-figur Rahmen: Produktkopf, Karten, Kacheln, Händler, Lightbox. In den Karussells (Themen, Produkte) steht bewusst kein Label. */ .kdm-karussell .kdm-ki-label { display: none; } :is(.kdm-produktkopf__hauptbild, .kdm-produktkopf__galerie a, .kdm-karte__bild, .kdm-produktkachel__bild, .kdm-designerkachel__bild, .kdm-haendler__bild).kdm-ki { position: relative; } :is(.kdm-produktkopf__galerie a, .kdm-karte__bild, .kdm-produktkachel__bild, .kdm-designerkachel__bild, .kdm-haendler__bild, .kdm-designerbox__bild).kdm-ki { --kdm-ki-width: 112px; --kdm-ki-inset: 8px; } .kdm-lightbox-dialog .kdm-ki-label { display: none; } .kdm-lightbox-dialog.kdm-ki .kdm-ki-label { display: block; } /* Kleines EU Label (nur das Zeichen AI im Kreis): fuer alle Contentbilder (Bild mit Text, Stimmungsbilder der Produktzeilen, Markenband, Trefferliste, Artikelliste, Bildspalten, Galerie, Karten, Kacheln, Haendler, Highlight klein, Varianten Liste) und auf dem Smartphone fuer alle Bilder. --kdm-ki-icon ist der sichtbare Durchmesser. Die Datei hat Schutzraum um den Kreis, er wird wie beim grossen Label herausgerechnet. */ .kdm-ki, .kdm-lightbox-dialog { --kdm-ki-icon: 28px; } :is(.kdm-textbild__bild, .kdm-produktzeile__bild, .kdm-produktzeile__bild2, .kdm-markenband__foto, .kdm-treffer, .kdm-artikel__bild, .kdm-bildspalte__bild, .kdm-produktkopf__galerie a, .kdm-karte__bild, .kdm-produktkachel__bild, .kdm-designerkachel__bild, .kdm-haendler__bild, .kdm-designerbox__bild, .kdm-highlight__bild, .kdm-highlight__klein, .kdm-variante__bild) span.kdm-ki-label.kdm-ki-label { --kdm-ki-e: calc(var(--kdm-ki-icon) / .644700); width: var(--kdm-ki-e); height: var(--kdm-ki-e); right: calc(var(--kdm-ki-inset) - var(--kdm-ki-e) * .197820); bottom: calc(var(--kdm-ki-inset) - var(--kdm-ki-e) * .177660); background-image: url("../img/eu-label-ki-klein.svg") !important; /* wichtig: die Website Stile setzen das grosse Label mit !important */ } :is(.kdm-artikel__bild .kdm-ki, .kdm-produktkopf__galerie a, .kdm-karte__bild, .kdm-produktkachel__bild, .kdm-designerkachel__bild, .kdm-haendler__bild, .kdm-designerbox__bild).kdm-ki { --kdm-ki-icon: 24px; --kdm-ki-inset: 8px; } .kdm-artikel__bild .kdm-ki { --kdm-ki-icon: 24px; --kdm-ki-inset: 10px; } .kdm-highlight__klein .kdm-ki { --kdm-ki-icon: 18px; --kdm-ki-inset: 4px; } .kdm-bildspalte__bild.kdm-ki { --kdm-ki-icon: 28px; --kdm-ki-inset: 12px; } :is(.kdm-textbild__bild, .kdm-produktzeile__bild, .kdm-produktzeile__bild2, .kdm-markenband__foto, .kdm-treffer, .kdm-highlight__bild) .kdm-ki { --kdm-ki-icon: 28px; --kdm-ki-inset: 12px; } /* Das grosse Label bleibt am Desktop nur an Kopfbildern: Seitenkopf, Buehne, Hauptbild der Produkt und Designerseite, Vorstellung, grosses Highlight, Lightbox. */ .kdm-variante__bild.kdm-ki { position: relative; --kdm-ki-icon: 16px; --kdm-ki-inset: 2px; } @media (max-width: 767px) { .kdm-ki, .kdm-lightbox-dialog { --kdm-ki-icon: 24px; } .kdm-ki span.kdm-ki-label.kdm-ki-label { --kdm-ki-e: calc(var(--kdm-ki-icon) / .644700); width: var(--kdm-ki-e); height: var(--kdm-ki-e); right: calc(var(--kdm-ki-inset) - var(--kdm-ki-e) * .197820); bottom: calc(var(--kdm-ki-inset) - var(--kdm-ki-e) * .177660); background-image: url("../img/eu-label-ki-klein.svg") !important; /* wichtig: die Website Stile setzen das grosse Label mit !important */ } } /* -------------------------------------------------------------------------- Kopfzeile -------------------------------------------------------------------------- */ .kdm-header { position: relative; z-index: 20; } .kdm-kopf { max-width: var(--kdm-raster-innen); margin: 0 auto; padding-inline: var(--kdm-gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; box-sizing: content-box; } .kdm-kopf__nav { display: flex; gap: 38px; } .kdm-kopf__nav--rechts { justify-content: flex-end; } .kdm-nav__link, .kdm-mobilmenue a { font-size: var(--kdm-fs-nav); line-height: 1.33; font-weight: 600; letter-spacing: var(--kdm-ls-nav); color: var(--kdm-ink); text-decoration: none; } .kdm-nav__link:hover, .kdm-nav__link[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .kdm-kopf__logo { display: flex; align-items: center; justify-content: center; width: var(--kdm-logo-w); height: var(--kdm-logo-h); box-sizing: border-box; padding: 10px; background: var(--kdm-walnut); border-radius: 0 0 8px 8px; } .kdm-kopf__logo img { width: var(--kdm-logo-img); height: auto; display: block; } .kdm-kopf__menue { display: none; } .kdm-kopf__menue span[aria-hidden] { display: block; position: relative; height: 4px; border-radius: 2px; color: var(--kdm-ink); background-color: currentColor; transition: background-color .2s ease, color .2s ease; } .kdm-kopf__menue span[aria-hidden]::before, .kdm-kopf__menue span[aria-hidden]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: currentColor; transform: translateY(-8px); transition: transform .3s cubic-bezier(.2, .7, .2, 1); } .kdm-kopf__menue span[aria-hidden]::after { transform: translateY(8px); } /* -------------------------------------------------------------------------- Fußzeile -------------------------------------------------------------------------- */ .kdm-footer { background: #fff; padding: var(--kdm-space-80) var(--kdm-gutter); margin-block-start: 0 !important; } .kdm-fuss__karte { max-width: 1080px; margin: 0 auto; /* gleiche Flucht wie Karussell, FAQ und Markenband */ box-sizing: border-box; padding: 56px; background: var(--kdm-sand); border-radius: var(--kdm-radius); display: grid; grid-template-columns: 1.3fr .5fr 1.5fr; gap: 48px; color: var(--kdm-body); } .kdm-fuss__marke img { display: block; width: var(--kdm-logo-img); height: auto; filter: brightness(0); } .kdm-fuss__claim { max-width: 220px; margin: 40px 0 24px; } .kdm-fuss__claim strong, .kdm-fuss__titel { color: var(--kdm-ink); font-weight: 600; } .kdm-fuss__titel { margin: 0 0 4px; } .kdm-fuss__insta { display: flex; width: 100%; box-sizing: border-box; flex-direction: column; gap: 16px; padding: 24px; background: var(--kdm-page); border-radius: 16px; text-decoration: none; color: var(--kdm-ink); font-weight: 600; } .kdm-fuss__insta-bilder { display: flex; gap: 8px; } .kdm-fuss__insta-bilder img { width: 63px; height: 55px; object-fit: cover; border-radius: 8px; } .kdm-fuss__insta-text::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.25'/%3E%3Ccircle cx='17.25' cy='6.75' r='1.2' fill='%23222' stroke='none'/%3E%3C/svg%3E"); } .kdm-fuss__nav { display: flex; flex-direction: column; gap: 24px; } .kdm-fuss__nav a, .kdm-fuss__recht a { color: var(--kdm-ink); text-decoration: none; } .kdm-fuss__nav a:hover, .kdm-fuss__recht a:hover { text-decoration: underline; } .kdm-fuss__hinweise { color: var(--kdm-muted); display: flex; flex-direction: column; gap: 24px; } .kdm-fuss__hinweise p + p { margin-top: 0; } .kdm-fuss__recht { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; } /* -------------------------------------------------------------------------- Seitenkopf -------------------------------------------------------------------------- */ .kdm-seitenkopf { display: block; } :root body { --wp--style--global--wide-size: var(--kdm-wide); --wp--style--global--content-size: var(--kdm-text); } .kdm-seitenkopf__text { max-width: var(--kdm-text); margin-inline: auto; } .kdm-seitenkopf__titel { font-size: var(--kdm-fs-h1); letter-spacing: var(--kdm-ls-h1); line-height: var(--kdm-lh-h1); } .kdm-seitenkopf__bild { margin: var(--kdm-space-80) auto 0; height: calc(var(--kdm-h-keyvisual) * 1.25); /* 25 % höher als die übrigen breiten Bilder */ width: 80vw; max-width: none; /* immer 80 % der Browserbreite, unabhängig vom Grid */ margin-left: calc(50% - 40vw); margin-right: 0; } /* -------------------------------------------------------------------------- Text mit Bild -------------------------------------------------------------------------- */ .kdm-textbild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kdm-spalte-gap); align-items: center; } .kdm-textbild__bild { height: var(--kdm-h-textbild); } .kdm-textbild--bild-links .kdm-textbild__bild { order: -1; } /* -------------------------------------------------------------------------- Produktkarte (in Produktzeile, Produktraster, Buchtipp) -------------------------------------------------------------------------- */ .kdm-karte { display: flex; flex-direction: column; align-items: center; gap: var(--kdm-space-16); width: var(--kdm-card); max-width: 100%; text-align: center; } .kdm-karte__bild { width: 100%; aspect-ratio: 1; } .kdm-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .kdm-karte__name { font-size: var(--kdm-fs-karte); letter-spacing: var(--kdm-ls-karte); line-height: var(--kdm-lh-karte); font-weight: 600; color: var(--kdm-ink); max-width: 260px; margin: 0; } .kdm-karte__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } /* -------------------------------------------------------------------------- Produktzeile -------------------------------------------------------------------------- */ /* Luft zwischen Produktkarte und Text: 50 % mehr als der optische Abstand vorher (Karteninhalt ist mittig) */ .kdm-produktzeile { display: grid; grid-template-columns: var(--kdm-card) minmax(0, 1fr); align-items: start; column-gap: 35px; } @media (min-width: 1600px) { .kdm-produktzeile { column-gap: 45px; } } @media (max-width: 1365px) { .kdm-produktzeile { column-gap: 20px; } } .kdm-produktzeile--karte-rechts { grid-template-columns: minmax(0, 1fr) var(--kdm-card); } .kdm-produktzeile--karte-rechts .kdm-karte { order: 2; margin-top: 48px; } .kdm-produktzeile__inhalt { display: flex; flex-direction: column; gap: var(--kdm-space-40); } .kdm-produktzeile__bild { width: var(--kdm-w-stimmung); max-width: 100%; height: var(--kdm-h-stimmung); } .kdm-produktzeile--karte-links .kdm-produktzeile__bild { align-self: flex-end; } /* Modellüberschrift in H3 Größe, eine Stufe unter der Gruppenüberschrift (H2) */ .kdm-produktzeile__text h3 { font-size: var(--kdm-fs-h3); letter-spacing: var(--kdm-ls-h3); line-height: var(--kdm-lh-h3); } /* -------------------------------------------------------------------------- Produktraster -------------------------------------------------------------------------- */ .kdm-produktraster { display: grid; grid-template-columns: repeat(var(--kdm-spalten, 3), minmax(0, var(--kdm-card))); justify-content: center; gap: var(--kdm-space-40) var(--kdm-space-24); } .kdm-produktraster.kdm-spalten-2 { --kdm-spalten: 2; } .kdm-produktraster.kdm-spalten-4 { --kdm-spalten: 4; } .kdm-produktraster .kdm-karte { width: 100%; } /* -------------------------------------------------------------------------- Preisverlauf (Walnut) -------------------------------------------------------------------------- */ .kdm-preisverlauf { background: var(--kdm-walnut); color: #fff; padding: var(--kdm-space-80) var(--kdm-gutter); } .kdm-preisverlauf__innen { max-width: min(979px + (var(--kdm-wide) - 1344px), 100%); margin: 0 auto; } .kdm-preisverlauf h2 { color: #fff; } .kdm-chart svg { width: 100%; height: auto; display: block; overflow: visible; } .kdm-chart__achse, .kdm-chart__jahr { fill: #fff; font-size: 17px; letter-spacing: -.006em; } .kdm-chart__achse { font-weight: 600; } .kdm-chart__raster { stroke: rgba(255, 255, 255, .22); stroke-width: 1; } .kdm-chart__linie { fill: none; stroke: #fff; stroke-width: 3; } .kdm-chart__punkt { fill: #fff; } .kdm-preistabelle { margin-top: var(--kdm-space-40); } .kdm-preistabelle summary { display: flex; align-items: center; justify-content: center; width: max-content; max-width: 100%; min-height: 48px; box-sizing: border-box; margin-inline: auto; list-style: none; cursor: pointer; padding: 12px 32px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.004em; white-space: nowrap; } .kdm-preistabelle summary::-webkit-details-marker { display: none; } .kdm-preistabelle .kdm-auf, .kdm-preistabelle[open] .kdm-zu { display: none; } .kdm-preistabelle[open] .kdm-auf { display: inline; } .kdm-preistabelle table { width: 100%; border-collapse: collapse; margin-top: var(--kdm-space-40); font-variant-numeric: tabular-nums; } .kdm-preistabelle caption { text-align: left; font-weight: 600; margin-bottom: var(--kdm-space-16); } .kdm-preistabelle :is(th, td) { text-align: left; padding: 14px 8px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); font-weight: 400; } .kdm-preistabelle thead th { padding-top: 0; padding-bottom: 10px; border-bottom-color: rgba(255, 255, 255, .55); font-weight: 600; } .kdm-preistabelle tfoot :is(th, td) { font-weight: 600; border-bottom: 0; } .kdm-preisverlauf__quelle { margin-top: var(--kdm-space-24); color: var(--kdm-line-warm); font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); text-wrap: pretty; } /* -------------------------------------------------------------------------- Buchtipp -------------------------------------------------------------------------- */ .kdm-buchtipp { display: grid; grid-template-columns: var(--kdm-card) minmax(0, 1fr); gap: var(--kdm-spalte-gap); align-items: center; } /* -------------------------------------------------------------------------- Häufige Fragen -------------------------------------------------------------------------- */ .kdm-faq { background: var(--kdm-page); padding: var(--kdm-space-80) var(--kdm-gutter); } .kdm-faq + .kdm-karussell.kdm-flaeche-page, .kdm-karussell.kdm-flaeche-page + .kdm-karussell.kdm-flaeche-page { padding-top: 0; } .kdm-faq__innen { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 511px); gap: var(--kdm-space-24) var(--kdm-spalte-gap); align-items: start; } .kdm-faq__frage { border-bottom: 1px solid var(--kdm-line); } .kdm-faq__frage summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--kdm-space-24); padding: var(--kdm-space-24) 0; } .kdm-faq__frage summary::-webkit-details-marker { display: none; } .kdm-faq__frage summary h3 { font-size: var(--kdm-fs-loud); letter-spacing: var(--kdm-ls-loud); line-height: var(--kdm-lh-loud-bold); } .kdm-faq__icon { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--kdm-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 18px; transition: transform .4s cubic-bezier(.2, .7, .2, 1); } .kdm-faq__frage[open] .kdm-faq__icon { transform: rotate(180deg); } /* Mit JavaScript dreht das Icon schon beim Start des Zuklappens zurück */ .kdm-faq__frage.ist-offen .kdm-faq__icon { transform: rotate(180deg); } .kdm-faq__frage.kdm-anim[open]:not(.ist-offen) .kdm-faq__icon { transform: none; } .kdm-faq__antwort { padding: 0 56px var(--kdm-space-24) 0; } /* -------------------------------------------------------------------------- Karussells (Produkte, Themen): CSS Scroll Snap, kein Swiper -------------------------------------------------------------------------- */ .kdm-karussell { --kdm-karussell-rand: max(var(--kdm-gutter), calc((100vw - 1080px) / 2)); padding-block: var(--kdm-space-80); } .kdm-flaeche-page { background: var(--kdm-page); } .kdm-karussell__kopf { max-width: 1080px; margin: 0 auto var(--kdm-space-40); padding-inline: var(--kdm-gutter); box-sizing: content-box; } .kdm-karussell__kopf h2 + * { margin-top: var(--kdm-nach-h2); max-width: 882px; } .kdm-karussell__spur { display: flex; gap: var(--kdm-space-24); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--kdm-karussell-rand); scroll-padding-inline: var(--kdm-karussell-rand); } .kdm-karussell__spur::-webkit-scrollbar { display: none; } .kdm-karussell__spur > * { scroll-snap-align: start; flex: 0 0 auto; } .kdm-karussell__nav:not([hidden]) { display: flex; gap: 8px; justify-content: flex-end; max-width: 1080px; margin: var(--kdm-space-24) auto 0; padding-inline: var(--kdm-gutter); } .kdm-karussell__nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--kdm-ink); background: transparent center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); cursor: pointer; } .kdm-karussell__zurueck { transform: scaleX(-1); } .kdm-produktkachel { width: var(--kdm-w-kachel); min-height: var(--kdm-h-produktkachel); box-sizing: border-box; padding: 38px 32px 32px; display: flex; flex-direction: column; background: var(--kdm-sand); border-radius: var(--kdm-radius); text-decoration: none; color: var(--kdm-body); } .kdm-produktkachel__hersteller, .kdm-produktkachel__name { font-size: var(--kdm-fs-karte); letter-spacing: var(--kdm-ls-karte); line-height: var(--kdm-lh-karte); font-weight: 600; color: var(--kdm-ink); } .kdm-produktkachel__text { margin-top: var(--kdm-space-16); } .kdm-produktkachel__bild { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--kdm-space-24) var(--kdm-space-16); } .kdm-produktkachel__bild img { max-height: calc(var(--kdm-h-produktkachel) * .47); width: auto; object-fit: contain; } .kdm-produktkachel__mehr { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--kdm-ink); font-weight: 600; } .kdm-produktkachel__mehr::before { content: ""; width: 27px; height: 27px; border-radius: 50%; background: var(--kdm-ink) center / 15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .kdm-produktkachel:hover .kdm-produktkachel__mehr { text-decoration: underline; } .kdm-themenkarte { position: relative; width: var(--kdm-w-kachel); height: var(--kdm-h-thema); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: #fff; } .kdm-themenkarte__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kdm-themenkarte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); } .kdm-themenkarte__pfeil { position: absolute; z-index: 2; top: 32px; right: 32px; width: 40px; height: 40px; border-radius: 50%; background: #fff center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform .3s; } .kdm-themenkarte:hover .kdm-themenkarte__pfeil { transform: translateX(4px); } .kdm-themenkarte__text { position: relative; z-index: 2; padding: 0 32px 40px; display: flex; flex-direction: column; gap: var(--kdm-space-16); } .kdm-themenkarte__titel { font-size: var(--kdm-fs-karte); letter-spacing: var(--kdm-ls-karte); line-height: var(--kdm-lh-karte); font-weight: 600; } .kdm-themenkarte__auszug { font-size: var(--kdm-fs-regular); letter-spacing: var(--kdm-ls-regular); line-height: var(--kdm-lh-regular); } /* -------------------------------------------------------------------------- Persönliche Notiz mit Sprechblase und Autor -------------------------------------------------------------------------- */ .kdm-notiz, .kdm-notiz.alignwide { max-width: min(var(--kdm-text), 100%); margin-inline: auto; } .kdm-notiz__box { position: relative; background: var(--kdm-walnut); color: #fff; border-radius: var(--kdm-radius); padding: var(--kdm-box-pad); } .kdm-notiz__handschrift { font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.1; letter-spacing: 0; } .kdm-notiz--sprechblase .kdm-notiz__box::after { content: ""; position: absolute; right: 120px; bottom: -18px; border: 18px solid transparent; border-bottom: 0; border-top-color: var(--kdm-walnut); } .kdm-autor { display: flex; justify-content: flex-end; align-items: center; gap: var(--kdm-space-24); margin-top: 60px; text-align: right; } .kdm-autor__name { font-size: var(--kdm-fs-h3); letter-spacing: var(--kdm-ls-h3); line-height: var(--kdm-lh-h3); font-weight: 600; color: var(--kdm-ink); } .kdm-autor__rolle { margin-top: 0 !important; font-size: var(--kdm-fs-loud); letter-spacing: var(--kdm-ls-loud); line-height: var(--kdm-lh-loud); color: var(--kdm-muted); } .kdm-autor__bild { width: 126px; height: 126px; border-radius: 50%; object-fit: cover; flex: none; } /* -------------------------------------------------------------------------- Hinweis, Kurzantwort -------------------------------------------------------------------------- */ .kdm-hinweis__titel { font-size: var(--kdm-fs-loud); letter-spacing: var(--kdm-ls-loud); line-height: var(--kdm-lh-loud); font-weight: 600; color: var(--kdm-ink); } .kdm-kurzantwort { background: var(--kdm-page); border-radius: var(--kdm-radius); padding: var(--kdm-space-40); } .kdm-kurzantwort__label { font-size: var(--kdm-fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kdm-muted); } .kdm-kurzantwort h2 { font-size: var(--kdm-fs-h3); letter-spacing: var(--kdm-ls-h3); line-height: var(--kdm-lh-h3); } .is-style-flaeche-sand .kdm-kurzantwort { background: #fff; } /* -------------------------------------------------------------------------- Markenband -------------------------------------------------------------------------- */ .kdm-markenband { background: var(--kdm-walnut); color: #fff; padding: var(--kdm-space-80) var(--kdm-gutter); } .kdm-markenband__innen { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kdm-spalte-gap); align-items: center; } .kdm-markenband__handschrift { font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.1; text-align: right; letter-spacing: 0; } .kdm-markenband__text { display: flex; flex-direction: column; align-items: flex-start; } .kdm-markenband__text > .kdm-markenband__logo + * { margin-block-start: var(--kdm-space-24); } .kdm-markenband__logo { width: var(--kdm-logo-img); filter: brightness(0) invert(1); } .kdm-markenband__signatur { font-weight: 600; margin-block-start: var(--kdm-space-16, 16px); } .kdm-markenband__signatur::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; opacity: .5; margin-bottom: 12px; } /* -------------------------------------------------------------------------- Kacheln, Zeitleiste, Bilder mit Text -------------------------------------------------------------------------- */ .kdm-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--kdm-spalten, 4), minmax(0, 1fr)); gap: var(--kdm-space-16); counter-reset: kdm-kachel; } .kdm-kacheln.kdm-spalten-2 { --kdm-spalten: 2; } .kdm-kacheln.kdm-spalten-3 { --kdm-spalten: 3; } .kdm-kachel { background: var(--kdm-page); border-radius: 16px; padding: var(--kdm-space-24); } .is-style-flaeche-sand .kdm-kachel { background: #fff; } .kdm-kachel__titel { font-weight: 600; color: var(--kdm-ink); } ol.kdm-kacheln .kdm-kachel__titel::before { counter-increment: kdm-kachel; content: counter(kdm-kachel) ". "; } .kdm-kacheln--liste { grid-template-columns: 1fr; max-width: var(--kdm-text); } /* Zeitleiste: Linie in der Mitte, Einträge wechseln die Seite (ab Tablet), mobil als Liste */ .kdm-zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--kdm-space-24); } .kdm-zeitleiste__eintrag { position: relative; width: 50%; margin-left: 50%; box-sizing: border-box; padding-left: var(--kdm-space-40); } .kdm-zeitleiste__eintrag:nth-child(even) { margin-left: 0; padding-left: 0; padding-right: var(--kdm-space-40); text-align: right; } .kdm-zeitleiste__eintrag::before { content: ""; position: absolute; left: -5px; top: calc(var(--kdm-lh-h2) / 2 - 5px); width: 11px; height: 11px; border-radius: 50%; background: var(--kdm-ink); } .kdm-zeitleiste__eintrag:nth-child(even)::before { left: auto; right: -6px; } /* Linie in Stücken von Punkt zu Punkt, mit 4px Abstand zu den Punkten. Nichts über dem ersten, nichts unter dem letzten. */ .kdm-zeitleiste { --kdm-zl-punkt: calc(var(--kdm-lh-h2) / 2 - 5px); --kdm-zl-gap: var(--kdm-space-24); } .kdm-zeitleiste__eintrag:not(:last-child)::after { content: ""; position: absolute; left: 0; width: 1px; top: calc(var(--kdm-zl-punkt) + 15px); bottom: calc(4px - var(--kdm-zl-gap) - var(--kdm-zl-punkt)); background: var(--kdm-line-warm); } .kdm-zeitleiste__eintrag:nth-child(even):not(:last-child)::after { left: auto; right: -1px; } .kdm-zeitleiste__inhalt { max-width: 440px; margin-top: var(--kdm-nach-h3); } .kdm-zeitleiste__eintrag:nth-child(even) .kdm-zeitleiste__inhalt { margin-left: auto; } .kdm-zeitleiste__jahr { font-size: var(--kdm-fs-h2); letter-spacing: var(--kdm-ls-h2); line-height: var(--kdm-lh-h2); font-weight: 600; color: var(--kdm-muted); font-variant-numeric: tabular-nums; } .kdm-zeitleiste__titel { font-weight: 600; color: var(--kdm-ink); } .kdm-bildspalten { display: grid; grid-template-columns: repeat(var(--kdm-spalten, 2), minmax(0, 1fr)); gap: var(--kdm-space-40); } .kdm-bildspalten.kdm-spalten-3 { --kdm-spalten: 3; } .kdm-bildspalte { display: flex; flex-direction: column; gap: var(--kdm-space-24); } .kdm-bildspalte__bild { aspect-ratio: 4 / 3; height: auto; } .kdm-bildspalten--hoch .kdm-bildspalte__bild { aspect-ratio: 370 / 478; } .kdm-bildspalten.kdm-spalten-3 { column-gap: var(--kdm-space-120); } .kdm-bildspalten--versetzt > :nth-child(2) { margin-top: var(--kdm-space-120); } .kdm-bildspalte--text { gap: 0; } .kdm-bildspalte figcaption > * + *, .kdm-bildspalte--text > * + * { margin-block-start: 1em; } /* ========================================================================== Aufbau je Viewport Die Größen kommen aus den Tokens oben. Hier ändert sich nur, wie die Komponenten angeordnet sind. ========================================================================== */ /* Desktop L: ab 1600 px, mehr Luft, breitere Container */ @media (min-width: 1600px) { /* Die WordPress Layoutbreiten folgen den Tokens, damit alle Bausteine und Überschriften im selben Raster stehen. */ .kdm-kopf { max-width: var(--kdm-raster-innen); } .kdm-fuss__karte { max-width: 1200px; } /* Flucht mit Karussell, FAQ und Markenband */ .kdm-faq__innen, .kdm-karussell__kopf, .kdm-karussell__nav:not([hidden]), .kdm-markenband__innen { max-width: 1200px; } .kdm-karussell { --kdm-karussell-rand: max(var(--kdm-gutter), calc((100vw - 1200px) / 2)); } .kdm-faq__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); } .kdm-fuss__karte { padding: 64px; } .kdm-autor__bild { width: 140px; height: 140px; } } /* Desktop S: 1200 bis 1365 px, Navigation bleibt, Spalten werden schmaler */ @media (max-width: 1365px) { .kdm-kopf__nav { gap: 29px; } .kdm-kacheln:not(.kdm-kacheln--liste) { --kdm-spalten: 4; } .kdm-kacheln.kdm-spalten-4:not(.kdm-kacheln--liste) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kdm-produktraster.kdm-spalten-4 { --kdm-spalten: 3; } .kdm-produktzeile--karte-rechts .kdm-karte { margin-top: 24px; } .kdm-fuss__karte { padding: 48px; gap: 40px; } .kdm-autor__bild { width: 112px; height: 112px; } } /* Tablet: 768 bis 1199 px, Menü als Button, FAQ untereinander, Produktzeile ohne Versatz */ @media (max-width: 1199px) { /* Tablet und Mobil: Buttons 40 px hoch */ .kdm-button, .wp-element-button { min-height: 40px; height: 40px; padding-block: 0; } .kdm-preistabelle summary { min-height: 40px; height: 40px; padding-block: 0; } .kdm-kopf { grid-template-columns: auto 1fr auto; } .kdm-kopf__nav { display: none; } .kdm-kopf__logo { grid-column: 1; } .kdm-kopf__menue { display: block; grid-column: 3; width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; } .kdm-fuss__karte { grid-template-columns: 1fr 1fr; padding: 40px; } .kdm-fuss__hinweise { grid-column: 1 / -1; } .kdm-faq__innen { grid-template-columns: 1fr; } .kdm-faq__antwort { padding-right: 0; } .kdm-produktzeile, .kdm-produktzeile--karte-rechts { grid-template-columns: var(--kdm-card) minmax(0, 1fr); gap: var(--kdm-space-40) calc(var(--kdm-space-40) + 25px); } .kdm-produktzeile--karte-rechts .kdm-karte { order: 0; margin-top: 0; } .kdm-produktzeile__bild { width: 100%; } .kdm-produktraster, .kdm-produktraster.kdm-spalten-4 { --kdm-spalten: 2; } .kdm-kacheln:not(.kdm-kacheln--liste), .kdm-kacheln.kdm-spalten-4:not(.kdm-kacheln--liste) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kdm-bildspalten.kdm-spalten-3 { --kdm-spalten: 2; column-gap: var(--kdm-space-40); } .kdm-bildspalten.kdm-spalten-3 > .kdm-bildspalte--text:last-child { grid-column: 1 / -1; } .kdm-notiz--sprechblase .kdm-notiz__box::after { right: 80px; } .kdm-autor { margin-top: 44px; } .kdm-autor__bild { width: 96px; height: 96px; } .kdm-themenkarte__pfeil { top: 24px; right: 24px; } .kdm-themenkarte__text { padding: 0 24px 32px; } .kdm-produktkachel { padding: 32px 24px 24px; } } /* Mobil gross: 414 bis 767 px, alles einspaltig, Bild vor Text */ @media (max-width: 767px) { .kdm-fuss__karte { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; } .kdm-fuss__claim { margin: 24px 0; } .kdm-textbild { grid-template-columns: 1fr; gap: var(--kdm-space-24); } .kdm-textbild__bild { order: -1; } /* Keyvisual mobil: volle Breite ohne Radius, eigener Bildausschnitt */ .kdm-seitenkopf__bild { width: 100vw; margin-left: calc(50% - 50vw); } .kdm-seitenkopf__bild .kdm-figur { border-radius: 0; } .kdm-seitenkopf__bild.kdm-pos-m-center img { object-position: 50% 50%; } .kdm-seitenkopf__bild.kdm-pos-m-left img { object-position: 0 50%; } .kdm-seitenkopf__bild.kdm-pos-m-right img { object-position: 100% 50%; } /* Produktzeile mobil: Überschrift, Stimmungsbild, Beschreibung, danach das Produkt. Inhalt und Text werden aufgelöst (display: contents), damit alle Teile eine Spalte teilen. */ .kdm-produktzeile, .kdm-produktzeile--karte-rechts { grid-template-columns: minmax(0, 1fr); gap: 0; } .kdm-produktzeile__inhalt, .kdm-produktzeile__text { display: contents; } .kdm-produktzeile__text > h3 { order: 1; } :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__inhalt > .kdm-produktzeile__bild { order: 2; margin-block-start: var(--kdm-nach-h3); } .kdm-produktzeile__text > :not(h3) { order: 3; } :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__text > h3 + * { margin-block-start: var(--kdm-zu-modul); } .kdm-produktzeile__inhalt:not(:has(.kdm-produktzeile__bild)) .kdm-produktzeile__text > h3 + * { margin-block-start: var(--kdm-nach-h3); } .kdm-produktzeile > .kdm-karte, .kdm-produktzeile--karte-rechts > .kdm-karte { order: 4; margin-block-start: calc(var(--kdm-zu-aktion) * 1.5); } /* Produktkarte quer: Freisteller links, rechts Name und darunter die Buttons */ .kdm-produktzeile .kdm-karte { display: grid; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 12px; align-items: center; text-align: left; width: 100%; } .kdm-produktzeile .kdm-karte__bild { grid-row: 1 / 3; width: 100%; max-width: 200px; } .kdm-produktzeile .kdm-karte__name { align-self: end; max-width: none; } .kdm-produktzeile .kdm-karte__buttons { align-self: start; justify-content: flex-start; flex-direction: column; align-items: stretch; margin-top: 0 !important; } .kdm-produktzeile .kdm-karte__buttons .kdm-button { width: 100%; padding-inline: 16px; } .kdm-produktraster, .kdm-produktraster.kdm-spalten-4 { --kdm-spalten: 2; gap: var(--kdm-space-40) 16px; } .kdm-produktraster .kdm-karte__buttons .kdm-button { padding-inline: 20px; } .kdm-buchtipp { grid-template-columns: 1fr; gap: var(--kdm-space-24); } .kdm-buchtipp .kdm-karte__bild { max-width: 280px; } .kdm-kacheln:not(.kdm-kacheln--liste), .kdm-kacheln.kdm-spalten-4:not(.kdm-kacheln--liste) { grid-template-columns: 1fr; } .kdm-bildspalten, .kdm-bildspalten.kdm-spalten-3 { --kdm-spalten: 1; } .kdm-bildspalten--versetzt > :nth-child(2) { margin-top: 0; } .kdm-zeitleiste { padding-left: 25px; gap: var(--kdm-space-40); --kdm-zl-punkt: calc(var(--kdm-lh-h3) / 2 - 5px); --kdm-zl-gap: var(--kdm-space-40); } .kdm-zeitleiste__eintrag:not(:last-child)::after, .kdm-zeitleiste__eintrag:nth-child(even):not(:last-child)::after { left: -25px; right: auto; } .kdm-zeitleiste__eintrag, .kdm-zeitleiste__eintrag:nth-child(even) { width: auto; margin-left: 0; padding: 0; text-align: left; } .kdm-zeitleiste__eintrag::before, .kdm-zeitleiste__eintrag:nth-child(even)::before { left: -30px; right: auto; top: calc(var(--kdm-lh-h3) / 2 - 5px); } .kdm-zeitleiste__jahr { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); } .kdm-zeitleiste__inhalt { max-width: none; margin-top: var(--kdm-nach-titel); } .kdm-markenband__innen { grid-template-columns: 1fr; } .kdm-markenband__handschrift { text-align: left; } .kdm-notiz--sprechblase .kdm-notiz__box::after { right: 48px; } .kdm-autor { margin-top: 32px; gap: 16px; } .kdm-autor__bild { width: 72px; height: 72px; } .kdm-faq__frage summary { align-items: flex-start; } .kdm-faq__icon { flex-basis: 28px; height: 28px; background-size: 16px; } .kdm-chart__achse, .kdm-chart__jahr { font-size: 24px; } .kdm-preistabelle :is(th, td) { font-size: var(--kdm-fs-small); letter-spacing: var(--kdm-ls-small); } .kdm-ki { --kdm-ki-width: 150px; --kdm-ki-inset: 12px; } } /* Mobil: 360 bis 413 px, Raster kompakt zweispaltig, Buttons über die volle Breite */ @media (max-width: 413px) { .kdm-produktraster, .kdm-produktraster.kdm-spalten-4 { gap: 32px 12px; } .kdm-produktraster .kdm-karte__name { font-size: var(--kdm-fs-small); letter-spacing: var(--kdm-ls-small); } .kdm-produktraster .kdm-karte__buttons .kdm-button { padding-inline: 12px; font-size: 14px; } .kdm-karte__buttons { flex-direction: column; align-items: stretch; width: 100%; } .kdm-karte__buttons .kdm-button { width: 100%; } .kdm-kurzantwort { padding: var(--kdm-space-24); } .kdm-themenkarte__text { padding: 0 20px 24px; } .kdm-themenkarte__pfeil { top: 20px; right: 20px; } .kdm-produktkachel { padding: 28px 20px 20px; } .kdm-chart__achse, .kdm-chart__jahr { font-size: 28px; } .kdm-ki { --kdm-ki-width: 130px; --kdm-ki-inset: 10px; } } /* Mobil klein: bis 359 px, Raster einspaltig, Autor und Produktkarte untereinander */ @media (max-width: 359px) { .kdm-produktraster, .kdm-produktraster.kdm-spalten-4 { --kdm-spalten: 1; } .kdm-produktraster .kdm-karte__bild { max-width: 240px; margin-inline: auto; } .kdm-produktraster .kdm-karte__name { font-size: var(--kdm-fs-karte); letter-spacing: var(--kdm-ls-karte); } .kdm-produktzeile .kdm-karte { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .kdm-produktzeile .kdm-karte__bild { grid-row: auto; width: 70%; max-width: none; } .kdm-produktzeile .kdm-karte__buttons { width: 100%; } .kdm-autor { flex-direction: column-reverse; align-items: flex-end; } .kdm-fuss__insta-bilder img { width: 52px; height: 46px; } .kdm-kopf__menue { width: 40px; height: 40px; padding: 8px; } .kdm-ki { --kdm-ki-width: 116px; --kdm-ki-inset: 8px; } } /* Einblenden der Bilder (Klasse setzt kdm.js, ohne JavaScript bleibt alles sichtbar) */ .kdm-einblenden { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.25, .1, .25, 1), transform .9s cubic-bezier(.2, .7, .2, 1); } .kdm-einblenden.ist-sichtbar { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .kdm-einblenden { transform: none; transition: opacity .3s linear !important; } } /* -------------------------------------------------------------------------- Bühne (Startseite): Bild oder Video, Verlauf, Dachzeile und H1 hell darauf. Steht die Bühne ganz oben, liegt die Kopfzeile transparent und hell darüber. -------------------------------------------------------------------------- */ .kdm-main--start { background: var(--kdm-page); } .kdm-main:has(> .wp-block-post-content > .kdm-buehne:first-child) { padding-top: 0; margin-block-start: 0; } .kdm-main .wp-block-post-content > .kdm-buehne:first-child { margin-block-start: 0; } .kdm-buehne { --kdm-buehne-rand: 36px; } .kdm-buehne__medien { position: relative; overflow: hidden; isolation: isolate; height: clamp(480px, 92svh, var(--kdm-h-buehne)); margin-inline: var(--kdm-buehne-rand); border-radius: 0 0 var(--kdm-radius) var(--kdm-radius); background: var(--kdm-walnut); } .kdm-buehne__bild, .kdm-buehne__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .kdm-buehne__video { z-index: 0; } .kdm-buehne__verlauf { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%); } .kdm-buehne__text { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--kdm-space-80); max-width: var(--kdm-raster-innen); margin-inline: auto; padding-inline: max(16px, calc(var(--kdm-gutter) - var(--kdm-buehne-rand))); box-sizing: content-box; color: #fff; } .kdm-buehne__dachzeile { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: rgba(255, 255, 255, .88); } .kdm-buehne__titel { font-size: var(--kdm-fs-h1); line-height: var(--kdm-lh-h1); letter-spacing: var(--kdm-ls-h1); color: #fff; max-width: 13.5em; margin-top: var(--kdm-nach-titel) !important; } .kdm-buehne__einleitung { max-width: var(--kdm-raster-innen); margin: var(--kdm-space-80) auto 0; padding-inline: var(--kdm-gutter); box-sizing: content-box; } /* Gruppe im Innenraster (gleiche Flucht wie Karussell, FAQ, Markenband und Fußzeile) */ .kdm-main .wp-block-post-content > .is-style-raster-innen { max-width: var(--kdm-raster-innen) !important; margin-inline: auto !important; } .wp-block-group.is-style-raster-innen > * { max-width: 882px; } /* Designklassiker des Monats im Innenraster: Karte 340, Abstand 80, Rest für Bilder und Text */ @media (min-width: 1200px) { .kdm-produktzeile--bild2.is-style-raster-innen { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: var(--kdm-space-80); } } .kdm-produktzeile--bild2.is-style-raster-innen .kdm-produktzeile__inhalt { max-width: none; } .kdm-produktzeile--bild2.is-style-raster-innen .kdm-karte { width: 100%; } .kdm-produktzeile--bild2.is-style-raster-innen .kdm-karte__buttons { flex-wrap: nowrap; } .kdm-produktzeile--bild2.is-style-raster-innen .kdm-karte__buttons .kdm-button { padding-inline: 22px; } .kdm-notiz.is-style-raster-innen { max-width: var(--kdm-raster-innen) !important; } .kdm-buehne__einleitung > * { max-width: 882px; } /* Kopfzeile über der Bühne */ body:has(.kdm-main > .wp-block-post-content > .kdm-buehne:first-child) .kdm-header { position: absolute; top: 0; left: 0; right: 0; } body:has(.kdm-main > .wp-block-post-content > .kdm-buehne:first-child) .kdm-kopf__nav .kdm-nav__link { color: #fff; } body:has(.kdm-main > .wp-block-post-content > .kdm-buehne:first-child) .kdm-kopf__menue span[aria-hidden] { color: #fff; } /* Dachzeile über einer Überschrift (z. B. "Designklassiker des Monats") */ .is-style-dachzeile { font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); color: var(--kdm-muted); font-weight: 500; } :is(.kdm-main, .editor-styles-wrapper) :is(.wp-block-post-content, .wp-block-group) > .is-style-dachzeile + :is(h2, h3) { margin-block-start: var(--kdm-nach-titel); } /* FAQ ohne eigene Fläche (Akkordeon auf dem Seitenhintergrund) */ .kdm-faq.kdm-faq--ohne { background: transparent; padding-block: 0; } /* Ohne eigene Fläche braucht das Akkordeon den normalen Abschnittsabstand zu vollbreiten Nachbarn */ .kdm-main .wp-block-post-content > .kdm-faq--ohne + .alignfull, .kdm-main .wp-block-post-content > * + .kdm-faq--ohne { margin-block-start: var(--kdm-space-120); } /* Markenband mit Foto: Handschrift steht unten rechts auf dem Bild */ .kdm-markenband__foto { position: relative; } .kdm-markenband__foto .kdm-figur { aspect-ratio: 1 / 1; height: auto; max-width: 420px; } .kdm-markenband--foto .kdm-markenband__handschrift { position: absolute; right: -24px; bottom: 24px; max-width: 70%; margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } /* Produktzeile mit zweitem Bild neben dem Text (Designklassiker des Monats) */ /* Aufbau wie live "Designklassiker des Monats": Karte links mittig, rechts oben breites Bild eingerückt, darunter schmale Textspalte mit H2 und daneben ein kleineres Bild auf Höhe der Überschrift. */ .kdm-produktzeile--bild2 { column-gap: var(--kdm-space-120); align-items: center; } .kdm-produktzeile--bild2 .kdm-produktzeile__inhalt { display: grid; max-width: none; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); column-gap: 8%; row-gap: var(--kdm-space-40); align-items: start; } .kdm-produktzeile--bild2 .kdm-produktzeile__bild { grid-column: 1 / -1; justify-self: end; width: 86%; height: auto; aspect-ratio: 643 / 372; } .kdm-produktzeile--bild2 .kdm-produktzeile__bild .kdm-figur { height: 100%; } .kdm-produktzeile__bild2 .kdm-figur { aspect-ratio: 304 / 276; height: auto; } .kdm-produktzeile--bild2 .kdm-produktzeile__text h3 { font-size: var(--kdm-fs-h2); letter-spacing: var(--kdm-ls-h2); line-height: var(--kdm-lh-h2); } :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile--bild2 .kdm-produktzeile__text > h3 + * { margin-block-start: var(--kdm-nach-h2); } /* Karte rechts: zweites Bild links neben dem Text */ .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); } .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__bild { justify-self: start; width: 100%; } /* Karte rechts: Bilder und Text füllen die Spalte bis zum Abstand vor der Karte, kein Leerraum in der Mitte */ .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__inhalt { max-width: none; } .kdm-produktzeile--karte-rechts .kdm-produktzeile__bild2 { order: 1; grid-column: 1; grid-row: 2; } .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__text { grid-column: 2; grid-row: 2; } /* Startseiten Bausteine auf Tablet und Mobil (nach den Grundregeln, damit sie greifen) */ @media (max-width: 1199px) { .kdm-buehne { --kdm-buehne-rand: 16px; } /* Designklassiker des Monats auf Tablet: Bilder und Text untereinander neben der Karte */ .kdm-produktzeile--bild2 .kdm-produktzeile__inhalt, .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__inhalt { grid-template-columns: minmax(0, 1fr); } .kdm-produktzeile--bild2 .kdm-produktzeile__bild { width: 100%; } .kdm-produktzeile--bild2 .kdm-produktzeile__bild2, .kdm-produktzeile--bild2 .kdm-produktzeile__text, .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__bild2, .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__text { grid-column: 1; grid-row: auto; } .kdm-produktzeile--bild2 .kdm-produktzeile__bild2 { width: 70%; } .kdm-markenband__foto .kdm-figur { max-width: none; } } @media (max-width: 767px) { .kdm-buehne { --kdm-buehne-rand: 0px; } .kdm-buehne__medien { border-radius: 0; } .kdm-buehne__text { padding-inline: var(--kdm-gutter); } .kdm-markenband--foto .kdm-markenband__handschrift { right: 16px; bottom: 16px; } .kdm-produktzeile--bild2 .kdm-produktzeile__inhalt { display: contents; } .kdm-produktzeile--bild2 .kdm-produktzeile__bild { width: 100%; } .kdm-produktzeile__bild2 { order: 3; margin-block-start: var(--kdm-zu-modul); } .kdm-produktzeile--bild2 .kdm-produktzeile__bild2 { width: 100%; } .kdm-produktzeile--karte-rechts .kdm-produktzeile__bild2, .kdm-produktzeile--karte-rechts.kdm-produktzeile--bild2 .kdm-produktzeile__text { grid-column: auto; grid-row: auto; } .kdm-produktzeile--karte-rechts .kdm-produktzeile__bild2 { order: 3; } } /* Artikelliste (Inspiration): Bild 400 × 320 links, rechts Titel in H2 Größe, Text, Button */ .kdm-artikelliste { display: flex; flex-direction: column; gap: var(--kdm-space-80); } .kdm-artikel { display: grid; grid-template-columns: var(--kdm-card) minmax(0, 1fr); column-gap: var(--kdm-space-80); align-items: center; } .kdm-artikel__bild { display: block; } .kdm-artikel__bild .kdm-figur { aspect-ratio: 5 / 4; height: auto; } .kdm-artikel__titel { font-size: var(--kdm-fs-h2); line-height: var(--kdm-lh-h2); letter-spacing: var(--kdm-ls-h2); } .kdm-artikel__titel a { color: inherit; text-decoration: none; } .kdm-artikel__titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } :is(.kdm-main, .editor-styles-wrapper) .kdm-artikel__text > h2 + * { margin-block-start: var(--kdm-nach-h2); } :is(.kdm-main, .editor-styles-wrapper) .kdm-artikel__text > p + .kdm-button { margin-block-start: var(--kdm-space-24); } @media (max-width: 1199px) { .kdm-artikel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--kdm-space-40); } } @media (max-width: 767px) { .kdm-artikelliste { gap: var(--kdm-space-80); } .kdm-artikel { grid-template-columns: minmax(0, 1fr); row-gap: var(--kdm-space-24); } .kdm-artikel__titel { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); } } /* -------------------------------------------------------------------------- Editor -------------------------------------------------------------------------- */ .editor-styles-wrapper .kdm-seitenkopf__bild { margin-left: 0; width: 100%; } .kdm-editor-inner-hint { font-size: 12px; color: var(--kdm-muted); margin-bottom: 8px; } .kdm-editor-empty { padding: 24px; border: 1px dashed var(--kdm-line); color: var(--kdm-muted); } .editor-styles-wrapper [data-type^="kdm/"] { margin-block: 40px; } /* ========================================================================== Produktseite (Vorlage single-produkte) Seite auf Sand wie live. Die Bausteine stehen direkt in main, der Rhythmus folgt denselben Tokens wie auf den Guides. ========================================================================== */ body.single-produkte, body.single-produkte .kdm-header { background: var(--kdm-sand); } .kdm-main--produkt { padding-top: var(--kdm-space-40); } .kdm-main--produkt > * { margin-block: 0; } .kdm-main--produkt > * + * { margin-block-start: var(--kdm-space-120); } .kdm-main--produkt > * + .kdm-preisverlauf, .kdm-main--produkt > .kdm-preisverlauf + * { margin-block-start: var(--kdm-space-80); } .kdm-main--produkt > .alignfull + .alignfull, .kdm-main--produkt > .kdm-designerbox ~ * { margin-block-start: 0; } .kdm-main--produkt > :not(.alignfull) { max-width: var(--kdm-text); margin-inline: auto; padding-inline: var(--kdm-gutter); box-sizing: content-box; } .kdm-main--produkt > .alignwide:not(.kdm-notiz) { max-width: var(--kdm-text); } .kdm-main--produkt > .kdm-haendler { padding-bottom: var(--kdm-space-120); } .kdm-main--produkt .kdm-karussell.kdm-flaeche-page, .kdm-main--produkt .kdm-faq, .kdm-main--produkt .kdm-themen { background: var(--kdm-page); } .kdm-main--produkt > .kdm-karussell + .kdm-faq, .kdm-main--produkt > .kdm-faq + .kdm-karussell { padding-top: 0; } /* Produktkopf: Bild bis an den linken Rand, Text rechts */ .kdm-produktkopf { display: grid; grid-template-columns: minmax(0, 52.3%) minmax(0, 1fr); column-gap: 4.7vw; padding-right: max(var(--kdm-gutter), 4.7vw); align-items: start; } .kdm-produktkopf__hauptbild { display: block; aspect-ratio: 669 / 480; border-radius: 0 var(--kdm-radius) var(--kdm-radius) 0; overflow: hidden; } .kdm-produktkopf__hauptbild img { width: 100%; height: 100%; object-fit: cover; display: block; } .kdm-produktkopf__galerie { width: 78.3%; margin: var(--kdm-space-24) 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kdm-space-24); } .kdm-produktkopf__galerie a { display: block; aspect-ratio: 1; border-radius: var(--kdm-radius); overflow: hidden; background: #fff; } .kdm-produktkopf__galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; } .kdm-produktkopf__galerie a:hover img { transform: scale(1.03); } .kdm-produktkopf__ki { margin-top: var(--kdm-space-24) !important; text-align: right; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-body); } .kdm-produktkopf h1 { font-size: var(--kdm-fs-h1); line-height: var(--kdm-lh-h1); letter-spacing: var(--kdm-ls-h1); } .kdm-produktkopf__untertitel { margin-top: var(--kdm-nach-h1) !important; font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: var(--kdm-muted); } .kdm-produktkopf__rest { margin-top: var(--kdm-space-40); } .kdm-produktkopf__rest > * + * { margin-top: var(--kdm-space-24); } .kdm-produktkopf__rest > p + p:not([class]) { margin-top: 1em; } .kdm-produktkopf__preis { margin-top: var(--kdm-space-40) !important; font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud-bold); letter-spacing: var(--kdm-ls-loud); font-weight: 600; color: var(--kdm-ink); } .kdm-produktkopf__buttons { display: flex; flex-wrap: wrap; gap: 16px; } .kdm-produktkopf__buttons .kdm-button { flex: 1 1 180px; } .kdm-produktkopf__hinweis { font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); color: var(--kdm-muted); } .kdm-produktkopf .kdm-steckbrief { margin-top: var(--kdm-space-80); } /* Steckbrief */ .kdm-steckbrief__titel { font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud-bold); letter-spacing: var(--kdm-ls-loud); font-weight: 600; } .kdm-steckbrief__liste { margin: var(--kdm-space-24) 0 0; } .kdm-steckbrief__zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kdm-space-16); padding: 14px 0; border-bottom: 1px solid var(--kdm-line-warm); } .kdm-steckbrief__zeile dt { color: var(--kdm-body); } .kdm-steckbrief__zeile dd { margin: 0; font-weight: 600; color: var(--kdm-ink); } .kdm-steckbrief__zeile dd a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .kdm-steckbrief__zeile dd a:hover { text-decoration-thickness: 2px; } /* Produkttext */ .kdm-produktinfo > h2 + * { margin-top: var(--kdm-nach-h2); } .kdm-produktinfo p + p { margin-top: 1em; } /* Preisverlauf auf der Produktseite: Text links, Chart rechts */ .kdm-preisverlauf--seitlich .kdm-preisverlauf__innen { max-width: var(--kdm-text); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: var(--kdm-spalte-gap); align-items: start; } .kdm-preisverlauf--seitlich h2 { grid-column: 1 / -1; max-width: 800px; } .kdm-preisverlauf--seitlich .kdm-preisverlauf__seite { grid-column: 1; margin-top: var(--kdm-nach-h2); } .kdm-preisverlauf--seitlich .kdm-chart { grid-column: 2; grid-row: 2; margin-top: var(--kdm-nach-h2); } .kdm-preisverlauf--seitlich .kdm-preistabelle, .kdm-preisverlauf--seitlich .kdm-preisverlauf__quelle { grid-column: 1 / -1; } /* In deinem Zuhause */ .kdm-zuhause__untertitel { margin-top: var(--kdm-space-16) !important; max-width: 520px; font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: var(--kdm-muted); } .kdm-zuhause__karten { margin-top: var(--kdm-space-40) !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kdm-space-24); } .kdm-zuhause__karte { background: var(--kdm-page); border-radius: var(--kdm-radius); padding: var(--kdm-space-40) 48px; } .kdm-zuhause__karte h3 { font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); letter-spacing: var(--kdm-ls-regular); font-weight: 600; } .kdm-zuhause__karte ul { list-style: none; margin: var(--kdm-space-16) 0 0; padding: 0; } .kdm-zuhause__karte li { padding: 14px 0; border-bottom: 1px solid var(--kdm-line); } .kdm-zuhause__karte li:last-child { border-bottom: 0; } /* Fazit: gleiche Box wie die Persönliche Notiz, Text in normaler Größe */ .kdm-fazit .kdm-notiz__handschrift + * { margin-top: var(--kdm-space-16); } .kdm-fazit .kdm-notiz__box p + p { margin-top: 1em; } .kdm-fazit .kdm-notiz__box a { color: #fff; } /* Händler */ .kdm-haendler { scroll-margin-top: var(--kdm-space-40); } .kdm-haendler > h2 { max-width: 800px; } .kdm-haendler__inhalt { margin-top: var(--kdm-space-40); display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--kdm-space-40); align-items: start; } .kdm-haendler__bild img { width: 100%; height: auto; display: block; } .kdm-haendler__text > * + * { margin-top: var(--kdm-space-24); } .kdm-haendler__karten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kdm-space-24); } .kdm-haendler__karte { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .kdm-haendler__link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--kdm-space-16); padding: 32px 40px; color: var(--kdm-ink); text-decoration: none; height: 112px; box-sizing: border-box; } .kdm-haendler__logo { display: flex; align-items: center; height: 40px; max-width: 150px; } .kdm-haendler__logo svg { height: 100%; width: auto; max-width: 100%; } .kdm-haendler__pfeil { width: 24px; height: 24px; flex: none; background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transition: transform .3s; } .kdm-haendler__link:hover .kdm-haendler__pfeil { transform: translateX(4px); } .kdm-haendler__link .kdm-stern { position: absolute; top: 24px; right: 20px; } .kdm-haendler__trustpilot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-top: 1px solid var(--kdm-line); font-size: var(--kdm-fs-small); font-weight: 600; color: var(--kdm-ink); text-decoration: none; } .kdm-haendler__trustpilot::before { content: "★"; color: #00b67a; font-size: 16px; line-height: 1; } .kdm-haendler__trustpilot:hover { text-decoration: underline; } .kdm-haendler__leer { font-weight: 600; color: var(--kdm-ink); } /* Über den Designer (LightSand, volle Breite) */ .kdm-designerbox { background: var(--kdm-page); padding: var(--kdm-space-120) var(--kdm-gutter) var(--kdm-space-80); } .kdm-designerbox__innen { max-width: var(--kdm-text); margin: 0 auto; } .kdm-designerbox__inhalt { margin-top: var(--kdm-space-40); display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--kdm-spalte-gap); align-items: center; } .kdm-designerbox__bild { aspect-ratio: 361 / 470; height: auto; } .kdm-designerbox__text h3 { font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud-bold); letter-spacing: var(--kdm-ls-loud); } .kdm-designerbox__untertitel { margin-top: 8px !important; font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); font-weight: 600; color: var(--kdm-muted); } .kdm-designerbox__text > p:not([class]) { margin-top: var(--kdm-space-24); font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); } .kdm-designerbox__anekdote { margin-top: var(--kdm-space-80); max-width: 820px; font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.15; color: var(--kdm-ink); } .kdm-designerbox__mehr { margin-top: var(--kdm-space-80); display: flex; flex-direction: column; align-items: flex-start; gap: var(--kdm-space-24); } .kdm-designerbox__mehr h3 { font-size: var(--kdm-fs-h2); line-height: var(--kdm-lh-h2); letter-spacing: var(--kdm-ls-h2); } /* Lightbox für die Produktbilder (kdm.js), ohne JavaScript öffnet der Link das Bild */ .kdm-lightbox-dialog { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; } .kdm-lightbox-dialog::backdrop { background: rgba(29, 9, 0, .88); } .kdm-lightbox-dialog img { display: block; max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: var(--kdm-radius); } .kdm-lightbox-dialog button { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; } .kdm-lightbox__zu { top: 24px; right: 24px; background: #fff center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .kdm-lightbox__nav { top: 50%; transform: translateY(-50%); } .kdm-lightbox__zurueck { left: 24px; background: #fff center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l-6 6 6 6'/%3E%3C/svg%3E"); } .kdm-lightbox__weiter { right: 24px; background: #fff center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6l6 6-6 6'/%3E%3C/svg%3E"); } .kdm-lightbox__zaehler { position: fixed; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; color: #fff; font-size: var(--kdm-fs-small, 14px); font-variant-numeric: tabular-nums; pointer-events: none; } .kdm-lightbox-dialog--einzeln .kdm-lightbox__nav { display: none; } body:has(.kdm-lightbox-dialog[open]) .kdm-sticky-kauf { visibility: hidden; } .kdm-lightbox-dialog img { touch-action: pan-y; user-select: none; -webkit-user-drag: none; } @media (max-width: 767px) { .kdm-lightbox-dialog img { max-width: 100vw; max-height: 78vh; border-radius: 0; } .kdm-lightbox-dialog { max-width: 100vw; } .kdm-lightbox__nav { top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; } .kdm-lightbox__zurueck { left: 16px; } .kdm-lightbox__weiter { right: 16px; } .kdm-lightbox__zu { top: 16px; right: 16px; } .kdm-lightbox__zaehler { bottom: 28px; } } /* Produktseite je Viewport */ @media (max-width: 1199px) { .kdm-produktkopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--kdm-space-40); } .kdm-produktkopf__galerie { width: 100%; } .kdm-preisverlauf--seitlich .kdm-preisverlauf__innen { grid-template-columns: 1fr; } .kdm-preisverlauf--seitlich .kdm-chart { grid-column: 1; grid-row: auto; margin-top: var(--kdm-space-40); } .kdm-designerbox__inhalt { grid-template-columns: 280px minmax(0, 1fr); } .kdm-zuhause__karte { padding: var(--kdm-space-40) var(--kdm-space-40); } } @media (max-width: 767px) { .kdm-produktkopf { display: flex; flex-direction: column; padding-inline: var(--kdm-gutter); } .kdm-produktkopf__text { display: contents; } .kdm-produktkopf__titel { order: 1; } .kdm-produktkopf__medien { order: 2; margin-top: var(--kdm-space-40); } .kdm-produktkopf__rest { order: 3; } .kdm-produktkopf__hauptbild { border-radius: var(--kdm-radius); } .kdm-produktkopf__galerie { gap: var(--kdm-space-16); margin-top: var(--kdm-space-16); } .kdm-produktkopf__buttons .kdm-button { flex-basis: 100%; } .kdm-zuhause__karten { grid-template-columns: 1fr; } .kdm-zuhause__karte { padding: var(--kdm-space-24); } .kdm-haendler__inhalt { grid-template-columns: 1fr; } .kdm-haendler__bild { width: 160px; } .kdm-haendler__karte { width: 100%; } .kdm-designerbox__inhalt { grid-template-columns: 1fr; } .kdm-designerbox__bild { max-width: 320px; } } /* ========================================================================== Designerseite (single-designer) und Archive (Hersteller, Designstile, Produkttypen) ========================================================================== */ body.single-designer, body.single-designer .kdm-header { background: var(--kdm-page); } body.tax-hersteller, body.tax-hersteller .kdm-header, body.tax-designstile, body.tax-designstile .kdm-header, body.tax-produkttyp, body.tax-produkttyp .kdm-header { background: var(--kdm-sand); } .kdm-designerkopf .kdm-produktkopf__hauptbild { aspect-ratio: 669 / 560; } .kdm-designerkopf .kdm-steckbrief { margin-top: var(--kdm-space-40); } .kdm-designerkopf__button { width: 100%; margin-top: var(--kdm-space-40) !important; } /* Vita */ .kdm-vita__name { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: var(--kdm-muted); } .kdm-vita__name + h2 { margin-top: var(--kdm-space-16); } .kdm-vita__zeile { margin-top: var(--kdm-space-80); } .kdm-vita__zeile h3 { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); } .kdm-vita__zeile h3 + * { margin-top: var(--kdm-nach-h3); } .kdm-vita__zeile p + p { margin-top: 1em; } .kdm-vita__anekdote { margin-top: var(--kdm-space-120); font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.15; color: var(--kdm-ink); } /* Bücher */ .kdm-buecher__raster { margin-top: var(--kdm-space-40); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kdm-space-24); } .kdm-buchkachel { width: auto; min-height: 0; } .kdm-buchkachel .kdm-produktkachel__bild img { max-height: 320px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); } /* Zeitleiste mit Überschrift */ .kdm-zeitleiste-abschnitt > h2 + .kdm-zeitleiste { margin-top: var(--kdm-space-80); } /* Werke des Designers */ .kdm-designerprodukte { display: flex; flex-direction: column; gap: calc(var(--kdm-space-80) * 1.25); } .kdm-main--produkt > .kdm-designerprodukte { max-width: var(--kdm-wide); } /* Archive */ .kdm-archivkopf h1 { font-size: var(--kdm-fs-h1); line-height: var(--kdm-lh-h1); letter-spacing: var(--kdm-ls-h1); } .kdm-archivkopf .kdm-produktkopf__untertitel + * { margin-top: var(--kdm-space-40); } .kdm-archivkopf p.kdm-loud { max-width: 882px; } .kdm-main--archiv > .kdm-produktgitter { margin-top: var(--kdm-space-80); margin-bottom: var(--kdm-space-120); max-width: var(--kdm-wide); } .kdm-produktgitter__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kdm-w-kachel)), 1fr)); gap: var(--kdm-space-24); } .kdm-produktgitter .kdm-produktkachel { width: auto; background: var(--kdm-page); } .kdm-produktgitter h2 + .kdm-produktgitter__raster { margin-top: var(--kdm-space-40); } @media (max-width: 1199px) { .kdm-buecher__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .kdm-buecher__raster { grid-template-columns: 1fr; } .kdm-vita__zeile .kdm-textbild__bild { order: -1; } } .kdm-designerprodukte .kdm-produktzeile { align-items: center; } .kdm-designerprodukte .kdm-produktzeile--karte-rechts .kdm-karte { margin-top: 0; } /* 0.16.9: Die Regel darüber hat auf dem Smartphone den Abstand zwischen Text und Produktkarte gelöscht (Designerseiten, Karte rechts). Mobil gilt wieder der Abstand der Produktzeile. */ @media (max-width: 767px) { .kdm-designerprodukte .kdm-produktzeile > .kdm-karte, .kdm-designerprodukte .kdm-produktzeile--karte-rechts > .kdm-karte { margin-top: calc(var(--kdm-zu-aktion) * 1.5); } } .kdm-designerprodukte .kdm-produktzeile__text p + p { margin-top: 1em; } /* Lange Buttontexte (z. B. "Zur Le Corbusier, Pierre Jeanneret … Detailseite") dürfen umbrechen */ .kdm-button { max-width: 100%; } .kdm-designerbox__mehr .kdm-button, .kdm-aehnlich .kdm-button { white-space: normal; text-align: center; } /* Produktübersicht mit Filter */ .kdm-uebersicht > h2 + * { margin-top: var(--kdm-nach-h2); } .kdm-filter { display: flex; flex-direction: column; gap: var(--kdm-space-16); margin-bottom: var(--kdm-space-40); } .kdm-filter__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .kdm-filter__label { flex: 0 0 120px; font-weight: 600; color: var(--kdm-ink); } .kdm-filter__chip { font: inherit; font-size: var(--kdm-fs-small); line-height: 20px; padding: 8px 18px; border-radius: 100px; border: 1px solid var(--kdm-line-warm); background: transparent; color: var(--kdm-ink); cursor: pointer; transition: background .2s, border-color .2s; } .kdm-filter__chip:hover { border-color: var(--kdm-ink); } .kdm-filter__chip[aria-pressed="true"] { background: var(--kdm-ink); border-color: var(--kdm-ink); color: #fff; } .kdm-filter__anzahl { color: var(--kdm-muted); font-size: var(--kdm-fs-small); } /* Ohne aktiven Filter bleibt die Trefferzahl nur für Screenreader stehen */ .kdm-filter__anzahl--still { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .kdm-uebersicht__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kdm-w-kachel)), 1fr)); gap: var(--kdm-space-24); } .kdm-uebersicht__raster .kdm-produktkachel { width: auto; height: 100%; } .kdm-uebersicht__raster > li[hidden] { display: none; } .kdm-uebersicht__leer { margin-top: var(--kdm-space-24); } .kdm-filter__reset { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--kdm-ink); } @media (max-width: 767px) { .kdm-filter__label { flex-basis: 100%; } .kdm-filter__gruppe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kdm-gutter) * -1); padding-inline: var(--kdm-gutter); } .kdm-filter__gruppe .kdm-filter__label { position: absolute; left: -9999px; } .kdm-filter__chip { flex: none; } } .kdm-seitenkopf__dachzeile { font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.1; color: var(--kdm-ink); margin-bottom: var(--kdm-space-16) !important; } /* Kontakt und Textseiten: Zwischenüberschriften im Innenraster */ .kdm-main .wp-block-post-content > .wp-block-group.is-style-textseite { max-width: var(--kdm-text); } /* Karussell mit der Maus ziehen (kdm.js). Touch scrollt nativ. */ @media (hover: hover) and (pointer: fine) { .kdm-karussell__spur { cursor: grab; } .kdm-karussell__spur.is-ziehen { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } .kdm-karussell__spur.is-ziehen a { pointer-events: none; } } /* Produktzeile mobil wie "Designklassiker des Monats" auf live: zuerst das Stimmungsbild, rechtsbündig bis an den Bildschirmrand, nur links gerundet. Danach Überschrift, Text und die Produktkarte quer (Freisteller links, Name und Buttons rechts). Kein zweites Bild. */ @media (max-width: 767px) { :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__inhalt > .kdm-produktzeile__bild { order: 0; margin-block-start: 0; width: auto; height: auto; aspect-ratio: 16 / 10; margin-left: 32px; margin-right: calc(var(--kdm-gutter) * -1); } .kdm-produktzeile .kdm-produktzeile__bild .kdm-figur { height: auto; border-radius: var(--kdm-radius) 0 0 var(--kdm-radius); } /* Das Stimmungsbild zeigt mobil sein eigenes Format, damit das Produkt nicht angeschnitten wird. Nur sehr hohe Bilder werden auf 4:5 begrenzt, der gewählte Bildausschnitt gilt dann weiter. */ .kdm-produktzeile:not(.kdm-produktzeile--bild2) .kdm-produktzeile__inhalt > .kdm-produktzeile__bild { aspect-ratio: auto; } .kdm-produktzeile:not(.kdm-produktzeile--bild2) .kdm-produktzeile__bild .kdm-figur img { height: auto; max-height: calc((100vw - 32px - var(--kdm-gutter)) * 1.25); } .kdm-produktzeile__text > h3 { order: 1; } :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__inhalt:has(.kdm-produktzeile__bild) .kdm-produktzeile__text > h3 { margin-block-start: var(--kdm-zu-modul); } :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile__text > h3 + * { margin-block-start: var(--kdm-nach-h3); } .kdm-produktzeile--bild2 .kdm-produktzeile__text h3 { font-size: var(--kdm-fs-h3); letter-spacing: var(--kdm-ls-h3); line-height: var(--kdm-lh-h3); } .kdm-produktzeile__bild2 { display: none; } /* Dachzeile und Titel direkt über dem Bild: etwas weniger Abstand */ .kdm-main .wp-block-post-content > .kdm-monat + .kdm-produktzeile { margin-block-start: var(--kdm-zu-modul); } } /* Trefferliste: Suche und Archive (kdm/trefferliste) */ .kdm-treffer { box-sizing: content-box; max-width: var(--kdm-raster-innen); margin: 0 auto; padding: var(--kdm-space-80) var(--kdm-gutter) var(--kdm-space-120); } .kdm-treffer__kopf { margin-bottom: var(--kdm-space-80); } .kdm-treffer__titel { font-size: var(--kdm-fs-h1); line-height: var(--kdm-lh-h1); letter-spacing: var(--kdm-ls-h1); } .kdm-suche { display: flex; gap: 12px; margin-top: var(--kdm-space-40); max-width: 640px; } .kdm-suche__feld { flex: 1; min-width: 0; font: inherit; padding: 12px 20px; border: 1px solid var(--kdm-line-warm, #d9d4cc); border-radius: 100px; background: #fff; color: var(--kdm-ink); } .kdm-suche__feld:focus { outline: 2px solid var(--kdm-ink); outline-offset: 2px; } .kdm-treffer__anzahl { margin-top: 16px; color: var(--kdm-muted); } .kdm-treffer__typ { font-size: var(--kdm-fs-small); letter-spacing: .04em; text-transform: uppercase; color: var(--kdm-muted); margin: 0 0 8px; } .kdm-treffer__leer { aspect-ratio: 5 / 4; background: var(--kdm-sand); } .kdm-seiten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--kdm-space-80); } .kdm-seiten .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 100px; border: 1px solid var(--kdm-ink); color: var(--kdm-ink); text-decoration: none; box-sizing: border-box; } .kdm-seiten .page-numbers.current { background: var(--kdm-ink); color: #fff; } @media (max-width: 413px) { .kdm-suche { flex-direction: column; } } /* -------------------------------------------------------------------------- Sticky Kaufleiste Produktseite (nur mobil) -------------------------------------------------------------------------- */ .kdm-sticky-kauf { display: none; } @media (max-width: 767px) { .kdm-sticky-kauf:not([hidden]) { display: flex; gap: 8px; position: fixed; z-index: 90; left: var(--kdm-gutter); right: var(--kdm-gutter); bottom: 32px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); transition: opacity .25s ease, transform .25s ease; } .kdm-sticky-kauf.is-aus { opacity: 0; transform: translateY(16px); pointer-events: none; } .kdm-sticky-kauf .kdm-button { flex: 1 1 0; min-width: 0; padding-inline: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); } .kdm-sticky-kauf .kdm-button--kontur-dunkel { background: #fff; box-shadow: inset 0 0 0 1px var(--kdm-ink), 0 4px 16px rgba(0, 0, 0, .18); } .kdm-sticky-kauf .kdm-button:hover { transform: none; } } @media (max-width: 359px) { .kdm-sticky-kauf:not([hidden]) { flex-direction: column; } } /* -------------------------------------------------------------------------- Varianten Button und Bottom Sheet (Baustein kdm/varianten, nur mobil) -------------------------------------------------------------------------- */ .kdm-sticky-kauf--varianten .kdm-button { border: 0; cursor: pointer; font-family: inherit; } .kdm-varianten-hinweis { margin: 0 auto; max-width: var(--kdm-text); padding: 16px 20px; border: 1px dashed var(--kdm-line-warm); border-radius: 12px; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); } .kdm-sheet { border: 0; padding: 0; margin: 0; background: transparent; color: var(--kdm-body); } .kdm-sheet:not([open]) { display: none; } .kdm-sheet[open] { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; overflow: visible; } .kdm-sheet::backdrop { background: rgba(29, 9, 0, .5); opacity: 0; transition: opacity .28s ease; } .kdm-sheet.is-auf::backdrop { opacity: 1; } .kdm-sheet__innen { display: flex; flex-direction: column; min-height: 0; max-height: min(82vh, 640px); max-height: min(82dvh, 640px); background: #fff; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 -8px 32px rgba(0, 0, 0, .18); } .kdm-sheet.is-auf .kdm-sheet__innen { transform: translateY(0); } .kdm-sheet.is-zieht .kdm-sheet__innen { transition: none; } .kdm-sheet__kopf { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 12px 8px 20px; touch-action: none; } .kdm-sheet__griff { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--kdm-line-warm); } .kdm-sheet__titel { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: -.01em; font-weight: 600; color: var(--kdm-ink); } .kdm-sheet__zu { flex: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .kdm-sheet__zu::before, .kdm-sheet__zu::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; background: var(--kdm-ink); transform: rotate(45deg); } .kdm-sheet__zu::after { transform: rotate(-45deg); } .kdm-sheet__zu:focus-visible, .kdm-variante:focus-visible { outline: 2px solid var(--kdm-ink); outline-offset: -2px; } .kdm-sheet__liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; list-style: none; margin: 0; padding: 0 20px; } .kdm-sheet__liste li { margin: 0; border-top: 1px solid var(--kdm-sand); } .kdm-variante { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 8px 0; color: var(--kdm-ink); text-decoration: none; } .kdm-variante__bild { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--kdm-page); overflow: hidden; display: flex; align-items: center; justify-content: center; } .kdm-variante__bild img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .kdm-variante__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .kdm-variante__name { font-size: var(--kdm-fs-regular); line-height: 22px; font-weight: 600; letter-spacing: var(--kdm-ls-regular); } .kdm-variante__partner { font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); } .kdm-variante__partner .kdm-stern { position: static; margin-left: 1px; font-size: inherit; line-height: inherit; vertical-align: baseline; } .kdm-variante__pfeil { flex: none; width: 9px; height: 9px; margin-right: 6px; border-top: 2px solid var(--kdm-ink); border-right: 2px solid var(--kdm-ink); transform: rotate(45deg); } .kdm-sheet__hinweis { flex: none; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--kdm-sand); font-size: 12px; line-height: 17px; color: var(--kdm-muted); } body:has(.kdm-sheet[open]) { overflow: hidden; } body:has(.kdm-sheet[open]) .kdm-sticky-kauf { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .kdm-sheet__innen, .kdm-sheet::backdrop { transition: none !important; } } /* Produkt und Designerkopf auf großen Viewports: Textspalte endet auf der Flucht von Navigation und Innenraster und wächst nicht weiter, das Bild läuft weiter bis an den linken Rand. */ @media (min-width: 1600px) { .kdm-produktkopf { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: var(--kdm-space-80); padding-right: max(var(--kdm-gutter), calc((100vw - var(--kdm-text)) / 2)); } } /* Logo Lasche fährt bei jedem Seitenaufruf von oben ein */ @keyframes kdm-lasche { from { transform: translateY(-100%); } to { transform: none; } } .kdm-kopf__logo { animation: kdm-lasche .7s cubic-bezier(.2, .7, .2, 1) .1s both; } /* Mobilmenü: ganze Seite, große Hauptpunkte, Rechtliches unten */ .kdm-mobilmenue { display: none; } @media (max-width: 767px) { .kdm-mobilmenue:not([hidden]) { position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--kdm-space-40); background: var(--kdm-page); padding: calc(var(--kdm-logo-h) + 48px) var(--kdm-gutter) calc(48px + env(safe-area-inset-bottom, 0px)); } .kdm-mobilmenue__haupt { display: flex; flex-direction: column; gap: 16px; } .kdm-mobilmenue__haupt a { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; color: var(--kdm-ink); text-decoration: none; } .kdm-mobilmenue__haupt a[aria-current] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; } .kdm-mobilmenue__recht { display: flex; flex-direction: column; gap: 24px; } .kdm-mobilmenue__recht a { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--kdm-ink); text-decoration: none; } .kdm-menue-offen, .kdm-menue-offen body { overflow: hidden; } .kdm-menue-offen .kdm-kopf__logo, .kdm-menue-offen .kdm-kopf__menue { position: relative; z-index: 31; } /* 0.16.5: Das Icon besteht aus drei Balken (Mitte und zwei Pseudo Elemente) und wandelt sich in beide Richtungen weich zum X. */ .kdm-kopf__menue[aria-expanded="true"] span[aria-hidden] { color: var(--kdm-ink) !important; background-color: transparent; } .kdm-kopf__menue[aria-expanded="true"] span[aria-hidden]::before { transform: rotate(45deg) scaleY(.75); } .kdm-kopf__menue[aria-expanded="true"] span[aria-hidden]::after { transform: rotate(-45deg) scaleY(.75); } } @media (prefers-reduced-motion: reduce) { .kdm-kopf__logo { animation: none; } } /* Karussellkarten: Bild zoomt beim Hover um 15 %, gleiche Bewegung wie die Galerie im Produktkopf */ .kdm-themenkarte__bild, .kdm-produktkachel__bild img { transition: transform .6s ease; } .kdm-themenkarte:hover .kdm-themenkarte__bild, .kdm-produktkachel:hover .kdm-produktkachel__bild img { transform: scale(1.15); } .kdm-produktkachel { overflow: hidden; } @media (hover: none) { .kdm-themenkarte:hover .kdm-themenkarte__bild, .kdm-produktkachel:hover .kdm-produktkachel__bild img { transform: none; } } /* -------------------------------------------------------------------------- Über uns: Vorstellung, Team, Liste auf Walnut -------------------------------------------------------------------------- */ /* Kopfzeile hell über der Vorstellung */ body:has(.kdm-main > .wp-block-post-content > .kdm-vorstellung:first-child) .kdm-header { position: absolute; top: 0; left: 0; right: 0; } body:has(.kdm-main > .wp-block-post-content > .kdm-vorstellung:first-child) .kdm-kopf__nav .kdm-nav__link { color: #fff; } body:has(.kdm-main > .wp-block-post-content > .kdm-vorstellung:first-child) .kdm-kopf__menue span[aria-hidden] { color: #fff; } .kdm-main > .wp-block-post-content > .kdm-vorstellung:first-child { margin-block-start: 0; } .kdm-vorstellung { background: var(--kdm-walnut); color: #fff; border-radius: 0 0 var(--kdm-radius) var(--kdm-radius); padding: calc(var(--kdm-logo-h) + var(--kdm-space-80)) max(var(--kdm-gutter), 4.7vw) var(--kdm-space-80) 0; } .kdm-vorstellung__innen { display: grid; grid-template-columns: minmax(0, 52.3%) minmax(0, 1fr); column-gap: 4.7vw; align-items: center; } /* Gleiches Raster wie Produkt und Designerkopf */ @media (max-width: 1199px) and (min-width: 768px) { .kdm-vorstellung__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--kdm-space-40); } } @media (min-width: 1600px) { .kdm-vorstellung { padding-right: max(var(--kdm-gutter), calc((100vw - var(--kdm-text)) / 2)); } .kdm-vorstellung__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: var(--kdm-space-80); } } .kdm-vorstellung__bild .kdm-figur { aspect-ratio: 1; height: auto; border-radius: 0 var(--kdm-radius) var(--kdm-radius) 0; overflow: hidden; margin: 0; } .kdm-vorstellung__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .kdm-vorstellung__hand { font-family: var(--wp--preset--font-family--marker); font-size: calc(var(--kdm-marker) * 2); line-height: 1; margin: 0 0 var(--kdm-space-24) !important; } .kdm-vorstellung h1 { color: #fff; font-size: var(--kdm-fs-h2); line-height: var(--kdm-lh-h2); letter-spacing: var(--kdm-ls-h2); } .kdm-vorstellung__lead { margin-top: var(--kdm-space-40) !important; font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); font-weight: 600; } .kdm-vorstellung__klein { margin-top: var(--kdm-space-24) !important; font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); color: rgba(255, 255, 255, .82); } .kdm-vorstellung__lead + .kdm-vorstellung__lead, .kdm-vorstellung__klein + .kdm-vorstellung__klein { margin-top: 1em !important; } .kdm-team { max-width: var(--kdm-raster-innen); margin-inline: auto !important; padding-inline: var(--kdm-gutter); box-sizing: content-box; } .kdm-team__titel { font-family: var(--wp--preset--font-family--marker); font-size: calc(var(--kdm-marker) * 1.4); line-height: 1.05; letter-spacing: 0; font-weight: 400; max-width: 760px; } .kdm-team__person { display: grid; grid-template-columns: var(--kdm-team-bild) minmax(0, 620px); grid-template-areas: "bild kopf" "bild text"; grid-template-rows: auto 1fr; column-gap: var(--kdm-space-80); justify-content: start; align-items: start; margin-top: var(--kdm-space-80); --kdm-team-bild: clamp(220px, 24vw, 360px); } .kdm-team__person + .kdm-team__person { margin-top: var(--kdm-space-120); } .kdm-team__person--rechts { grid-template-columns: minmax(0, 620px) var(--kdm-team-bild); grid-template-areas: "kopf bild" "text bild"; justify-content: end; text-align: right; } .kdm-team__bild { grid-area: bild; aspect-ratio: 1; border-radius: calc(var(--kdm-radius) * 2); overflow: hidden; background: var(--kdm-sand); } .kdm-team__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .kdm-team__kopf { grid-area: kopf; align-self: end; padding-top: var(--kdm-space-40); } .kdm-team__name { font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); } .kdm-team__rolle { margin-top: var(--kdm-nach-titel) !important; font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); font-weight: 600; color: var(--kdm-muted); } .kdm-team__text { grid-area: text; margin-top: var(--kdm-space-24); } .kdm-team__text p { font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); } .kdm-team__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--kdm-space-24); font-size: var(--kdm-fs-small); font-weight: 700; color: var(--kdm-ink); text-decoration: none; } .kdm-team__link::before { content: "\2192"; font-weight: 400; font-size: 1.3em; line-height: 1; } .kdm-team__link:hover { text-decoration: underline; text-underline-offset: 4px; } .kdm-versprechen { background: var(--kdm-walnut); color: #fff; border-radius: 0 var(--kdm-radius) var(--kdm-radius) 0; margin-right: var(--kdm-gutter) !important; padding: var(--kdm-space-120) var(--kdm-gutter); } .kdm-versprechen__innen { max-width: var(--kdm-raster-innen); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--kdm-space-80); align-items: start; } .kdm-versprechen__hand { font-family: var(--wp--preset--font-family--marker); font-size: var(--kdm-marker); line-height: 1.1; letter-spacing: 0; font-weight: 400; color: #fff; text-align: right; } .kdm-versprechen__liste { list-style: none; margin: 0; padding: 0; } .kdm-versprechen__liste li { font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); padding-block: var(--kdm-space-16); border-bottom: 1px solid rgba(255, 255, 255, .22); } .kdm-versprechen__liste li:first-child { padding-top: 0; } .kdm-versprechen__liste li:last-child { border-bottom: 0; padding-bottom: 0; } @media (max-width: 767px) { .kdm-vorstellung { padding: calc(var(--kdm-logo-h) + var(--kdm-space-40)) var(--kdm-gutter) var(--kdm-space-80); } .kdm-vorstellung__innen { display: flex; flex-direction: column; } .kdm-vorstellung__text { display: contents; } .kdm-vorstellung__hand { order: 1; } .kdm-vorstellung h1 { order: 2; } .kdm-vorstellung__bild { order: 3; width: 100%; margin-top: var(--kdm-space-40); } .kdm-vorstellung__bild .kdm-figur { aspect-ratio: 4 / 3; border-radius: var(--kdm-radius); } .kdm-vorstellung__lead, .kdm-vorstellung__klein { order: 4; } .kdm-team__person, .kdm-team__person--rechts { --kdm-team-bild: 112px; grid-template-columns: var(--kdm-team-bild) minmax(0, 1fr); grid-template-areas: "bild kopf" "text text"; grid-template-rows: auto auto; column-gap: var(--kdm-space-24); align-items: center; margin-top: var(--kdm-space-40); } .kdm-team__person--rechts { grid-template-columns: minmax(0, 1fr) var(--kdm-team-bild); grid-template-areas: "kopf bild" "text text"; } .kdm-team__person + .kdm-team__person { margin-top: var(--kdm-space-80); } .kdm-team__person--rechts .kdm-team__text { text-align: left; } .kdm-team__bild { border-radius: var(--kdm-radius); } .kdm-team__kopf { padding-top: 0; align-self: center; } .kdm-team__name { font-size: var(--kdm-fs-karte); line-height: var(--kdm-lh-karte); } .kdm-team__rolle { font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); } .kdm-team__text p { font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); } .kdm-versprechen { padding: var(--kdm-space-80) var(--kdm-gutter); margin-right: var(--kdm-gutter) !important; } .kdm-versprechen__innen { grid-template-columns: 1fr; row-gap: var(--kdm-space-40); } .kdm-versprechen__liste li { font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); } } .kdm-main:has(> .wp-block-post-content > .kdm-vorstellung:first-child) { padding-top: 0; margin-block-start: 0; } .kdm-team__titel { max-width: 920px; } .kdm-vorstellung__text, .kdm-vorstellung__hand { text-align: left; } /* -------------------------------------------------------------------------- Textseite (Kontakt): schmale Spalte mittig, Titel in der Spalte -------------------------------------------------------------------------- */ .kdm-main .wp-block-post-content > .kdm-textseite { max-width: 660px !important; margin-inline: auto !important; padding-inline: var(--kdm-gutter); box-sizing: content-box; } .kdm-textseite > * { max-width: none !important; margin-inline: 0 !important; } .kdm-textseite h1 { font-size: var(--kdm-fs-h1); line-height: var(--kdm-lh-h1); letter-spacing: var(--kdm-ls-h1); } .kdm-textseite .kdm-textseite__unter { margin-top: var(--kdm-nach-titel) !important; font-size: max(19px, calc(var(--kdm-fs-h3) * .82)); line-height: 1.3; letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: var(--kdm-muted); } .kdm-textseite p, .kdm-textseite li { font-size: calc(var(--kdm-fs-regular) * 1.125); line-height: 1.6; } .kdm-textseite .kdm-textseite__unter + p { margin-top: var(--kdm-space-40) !important; } .kdm-textseite p + p { margin-top: 1em !important; } .kdm-textseite h2 { font-size: max(21px, calc(var(--kdm-fs-h3) * .82)); line-height: 1.3; letter-spacing: var(--kdm-ls-h3); margin-top: var(--kdm-space-40) !important; } .kdm-textseite h2 + * { margin-top: var(--kdm-space-16) !important; } .kdm-textseite h3 { font-size: calc(var(--kdm-fs-regular) * 1.125); line-height: 1.4; font-weight: 600; margin-top: var(--kdm-space-24) !important; } .kdm-textseite h3 + * { margin-top: 4px !important; } .kdm-textseite .kdm-textseite__label { margin-top: var(--kdm-space-24) !important; color: var(--kdm-muted); font-weight: 600; } .kdm-textseite .kdm-textseite__label + ul { margin-top: 4px !important; } .kdm-textseite ul { padding-left: 1.2em; margin-block: 4px 0; } .kdm-textseite ul + p { margin-top: 4px !important; } .kdm-textseite a { color: inherit; } @media (max-width: 767px) { .kdm-textseite p, .kdm-textseite li { font-size: var(--kdm-fs-regular); } } /* Performance: Bildspalte im Kopf mobil immer volle Breite, sonst wächst sie beim Laden des Bildes (CLS) */ @media (max-width: 767px) { .kdm-produktkopf__medien { align-self: stretch; width: 100%; } } .kdm-main .wp-block-post-content > .kdm-team { max-width: var(--kdm-raster-innen) !important; } .kdm-main .wp-block-post-content > .kdm-team { padding-inline: 0; } /* Performance: Complianz setzt den Bannercontainer an den Anfang von body. Ohne eigene Höhe kann er die Seite nie nach unten schieben, auch wenn das Banner CSS einmal später lädt (CLS). */ #cmplz-cookiebanner-container, #cmplz-manage-consent { height: 0; overflow: visible; } /* -------------------------------------------------------------------------- Originalbilder der Shops (Dateiname endet auf -original): der weiße Hintergrund verschmilzt mit der Fläche dahinter, das Bild wirkt freigestellt. Gilt nicht in der Lightbox, dort bleibt das Bild unverändert. -------------------------------------------------------------------------- */ :is(.kdm-produktkachel__bild, .kdm-karte__bild, .kdm-produktkopf__galerie, .kdm-haendler, .kdm-produktgitter, .kdm-produktraster) img[src*="-original"] { mix-blend-mode: multiply; } .kdm-produktkopf__galerie a:has(img[src*="-original"]) { background: var(--kdm-page); } /* -------------------------------------------------------------------------- Highlight der Startseite ("Aktuell im Magazin") Großer Teaser im Innenraster: Bild links, Label, Titel (H2), Anriss und Button rechts. Darunter bis zu drei kleine Teaser. Auswahl der Artikel: inc/highlight.php. -------------------------------------------------------------------------- */ .kdm-highlight__haupt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--kdm-space-80); align-items: center; } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight > .kdm-highlight__dachzeile + * { margin-block-start: var(--kdm-space-24); } .kdm-highlight__bild { display: block; } .kdm-highlight__bild .kdm-figur { aspect-ratio: 3 / 2; height: auto; margin: 0; } .kdm-highlight__bild img, .kdm-highlight__klein .kdm-figur img { transition: transform .6s ease; } /* 0.16.9: Die Marke ("Passt gerade gut", "Neu") ist keine Pille mehr, sondern die graue Dachzeile wie bei "Designklassiker des Monats". */ .kdm-highlight__label { display: block; } .kdm-highlight__titel { hyphens: manual; font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); text-wrap: balance; } .kdm-highlight__titel a, .kdm-highlight__klein { color: inherit; text-decoration: none; } .kdm-highlight__titel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight__text > * { margin-block: 0; } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight__text > .kdm-highlight__label + h2 { margin-block-start: var(--kdm-nach-titel); } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight__text > h2 + p { margin-block-start: var(--kdm-nach-h3); } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight__text > * + .kdm-button { margin-block-start: var(--kdm-space-24); } .kdm-highlight__neben { border-top: 1px solid var(--kdm-line-warm); padding-top: var(--kdm-space-24); } :is(.kdm-main, .editor-styles-wrapper) .kdm-highlight > .kdm-highlight__neben { margin-block-start: var(--kdm-space-40); } .kdm-highlight__nebentitel { font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); color: var(--kdm-muted); font-weight: 600; } .kdm-highlight__liste { list-style: none; margin: var(--kdm-space-16) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kdm-space-24) var(--kdm-space-40); } .kdm-highlight__klein { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--kdm-space-16); align-items: center; } .kdm-highlight__klein .kdm-figur { width: 88px; height: 88px; border-radius: 16px; margin: 0; } /* Kleine Kacheln zeigen das kleine EU Label (nur das Zeichen), siehe oben. */ .kdm-highlight__kleintext { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kdm-highlight__kleinlabel { font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); color: var(--kdm-muted); } .kdm-highlight__kleintitel { hyphens: auto; overflow-wrap: anywhere; font-size: var(--kdm-fs-regular); line-height: 1.35; letter-spacing: var(--kdm-ls-regular); font-weight: 600; color: var(--kdm-ink); } .kdm-highlight__klein:hover .kdm-highlight__kleintitel { text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .kdm-highlight__haupt:hover .kdm-highlight__bild img { transform: scale(1.04); } .kdm-highlight__klein:hover .kdm-figur img { transform: scale(1.08); } } @media (max-width: 1199px) { .kdm-highlight__haupt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--kdm-space-40); } .kdm-highlight__liste { gap: var(--kdm-space-24); } .kdm-highlight__klein { grid-template-columns: 72px minmax(0, 1fr); } .kdm-highlight__klein .kdm-figur { width: 72px; height: 72px; border-radius: 12px; } } @media (max-width: 767px) { .kdm-highlight__haupt { grid-template-columns: minmax(0, 1fr); row-gap: var(--kdm-space-24); } .kdm-highlight__bild .kdm-figur { aspect-ratio: 16 / 10; } .kdm-highlight__liste { grid-template-columns: minmax(0, 1fr); gap: var(--kdm-space-16); } .kdm-highlight__klein { grid-template-columns: 64px minmax(0, 1fr); } .kdm-highlight__klein .kdm-figur { width: 64px; height: 64px; } } /* -------------------------------------------------------------------------- Maßvergleich: Varianten maßstabsgetreu nebeneinander (kdm/massvergleich) --u ist die Länge eines Zentimeters. Sie ergibt sich aus der größten Höhe und der breitesten Variante, damit jede Zusammenstellung in ihre Spalten passt. -------------------------------------------------------------------------- */ .kdm-massvergleich { --kdm-mv-max: 352px; --kdm-mv-spalte: 0px; --kdm-mv-spalte-max: 300px; } .kdm-massvergleich__spur { container-type: inline-size; overflow-x: auto; scrollbar-width: none; } .kdm-massvergleich__spur::-webkit-scrollbar { display: none; } .kdm-massvergleich__liste { --kdm-mv-spur: max(calc(var(--kdm-mv-n) * var(--kdm-mv-spalte)), min(100cqi, calc(var(--kdm-mv-n) * var(--kdm-mv-spalte-max)))); --u: min(calc(var(--kdm-mv-max) / var(--kdm-mv-h)), calc((var(--kdm-mv-spur) / var(--kdm-mv-n) - 48px) / var(--kdm-mv-b))); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 12px; width: var(--kdm-mv-spur); margin: 0 auto; padding: 0; list-style: none; color: var(--kdm-ink); } .kdm-massvergleich__eintrag { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; align-items: end; min-width: 0; } .kdm-massvergleich__figur { display: grid; grid-template-columns: auto auto; gap: 6px; border-bottom: 2px solid var(--kdm-line); font-size: var(--kdm-fs-small); line-height: 1.2; letter-spacing: var(--kdm-ls-small); white-space: nowrap; } /* Maßlinie über dem Bild: so breit wie das Motiv, die Beschriftung darf überstehen. */ .kdm-massvergleich__breite { grid-column: 2; width: 0; min-width: 100%; display: flex; flex-direction: column; align-items: center; } .kdm-massvergleich__breite::after { content: ""; align-self: stretch; height: 11px; margin-top: 4px; border-inline: 2px solid; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; } .kdm-massvergleich__hoehe { grid-column: 1; grid-row: 2; display: flex; align-items: stretch; gap: 5px; } .kdm-massvergleich__hoehe .kdm-massvergleich__wert { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; } .kdm-massvergleich__einheit { font-size: inherit; } .kdm-massvergleich__hoehe::after { content: ""; width: 11px; border-block: 2px solid; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; } .kdm-massvergleich__bild { grid-column: 2; grid-row: 2; position: relative; overflow: hidden; height: calc(var(--u) * var(--h)); width: calc(var(--u) * var(--b)); } .kdm-massvergleich__bild img { position: absolute; display: block; max-width: none; height: auto; } .kdm-massvergleich__name { align-self: start; width: 0; min-width: 100%; box-sizing: border-box; margin: 0; padding-inline: 6px; text-align: center; text-wrap: balance; font-weight: 600; font-size: var(--kdm-fs-regular); line-height: 1.3; } @media (max-width: 767px) { .kdm-massvergleich__name { font-size: var(--kdm-fs-small); } /* Ab vier Varianten als Leiste: gut zweieinhalb Spalten sichtbar, die nächste ist am rechten Bildschirmrand angeschnitten. */ .kdm-massvergleich--scroll { --kdm-mv-spalte: max(140px, 38cqi); } .kdm-massvergleich--scroll .kdm-massvergleich__spur { margin-right: calc(var(--kdm-gutter) * -1); padding-right: var(--kdm-gutter); } } /* -------------------------------------------------------------------------- 0.14.0 -------------------------------------------------------------------------- */ /* Buchtipp: Das Cover bleibt vollständig sichtbar, im eigenen Seitenverhältnis statt im Quadrat. */ .kdm-buchtipp .kdm-karte__bild { aspect-ratio: auto; } .kdm-buchtipp .kdm-karte__bild img { height: auto; object-fit: contain; } @media (max-width: 767px) { .kdm-buchtipp .kdm-karte__bild { max-width: 240px; } } /* Standard Bildblock mit EU Label (Bild in der Mediathek als KI generiert markiert). */ .wp-block-image.kdm-ki--bild { position: relative; } /* * Persönliche Notiz (Sprechblase) steht immer auf Weiß. Eine sanddunkle Fläche, die nur die Notiz * enthält, verliert Farbe und Innenabstand und verhält sich wie ein normaler Abschnitt. */ .wp-block-group.is-style-flaeche-sand-dunkel:has(> .kdm-notiz:only-child) { background: transparent; padding-block: 0; } body:has(.kdm-main > .wp-block-post-content > .is-style-flaeche-sand-dunkel:first-child > .kdm-notiz:only-child) .kdm-header { background: transparent; } /* -------------------------------------------------------------------------- Chatverlauf: Frage links, Antworten rechts. Farben und Schrift aus dem System. -------------------------------------------------------------------------- */ .kdm-chat, .kdm-chat.alignwide { max-width: min(var(--kdm-text), 100%); } .kdm-chat { list-style: none; margin-inline: auto; padding: 0; display: flex; flex-direction: column; gap: var(--kdm-space-40); } .kdm-chat__runde { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 0; } :is(.kdm-main, .editor-styles-wrapper) .kdm-chat__runde > .kdm-chat__blase { margin-block: 0; } .kdm-chat__blase { position: relative; box-sizing: border-box; max-width: min(72%, 620px); margin: 0; padding: 12px 18px; border-radius: 22px; font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); letter-spacing: var(--kdm-ls-regular); } .kdm-chat__blase--frage { align-self: flex-start; background: var(--kdm-sand); color: var(--kdm-ink); font-weight: 600; border-bottom-left-radius: 6px; transform-origin: 0 100%; } .kdm-chat__blase--antwort { align-self: flex-end; background: var(--kdm-walnut); color: #fff; border-bottom-right-radius: 6px; transform-origin: 100% 100%; } .kdm-chat__blase--antwort strong { font-weight: 600; } /* Tippen Anzeige: drei Punkte in einer kleinen Blase, an der Stelle der nächsten Antwort. */ .kdm-chat__tippt { position: absolute; right: 0; top: var(--kdm-chat-t, 0); display: flex; align-items: center; gap: 5px; height: 40px; padding: 0 16px; box-sizing: border-box; border-radius: 22px 22px 6px 22px; background: var(--kdm-walnut); opacity: 0; transform: scale(.6); transform-origin: 100% 100%; transition: opacity .18s ease, transform .22s cubic-bezier(.2, 1.2, .4, 1); pointer-events: none; } .kdm-chat__tippt i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .35; animation: kdm-chat-punkt 1.1s infinite ease-in-out; } .kdm-chat__tippt i:nth-child(2) { animation-delay: .16s; } .kdm-chat__tippt i:nth-child(3) { animation-delay: .32s; } @keyframes kdm-chat-punkt { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } } /* Zustände setzt kdm.js: wartet (unsichtbar, Platz bleibt reserviert), tippt (Punkte), da (Blase springt auf). */ .kdm-chat--bereit .kdm-chat__blase { opacity: 0; transform: scale(.55) translateY(12px); } .kdm-chat--bereit .kdm-chat__blase.is-da { opacity: 1; transform: none; transition: opacity .2s ease, transform .42s cubic-bezier(.18, 1.25, .4, 1); } .kdm-chat__tippt.is-an { opacity: 1; transform: none; } @media (max-width: 767px) { .kdm-chat { gap: var(--kdm-space-24); } .kdm-chat__blase { max-width: 88%; padding: 10px 16px; border-radius: 20px; } .kdm-chat__blase--frage { border-bottom-left-radius: 6px; } .kdm-chat__blase--antwort { border-bottom-right-radius: 6px; } } @media (prefers-reduced-motion: reduce) { .kdm-chat--bereit .kdm-chat__blase { opacity: 1; transform: none; } .kdm-chat__tippt { display: none; } } /* -------------------------------------------------------------------------- Mobil: Logo und Menü kommen beim Hochscrollen zurück. Keine Leiste, nur die Lasche und das Menü Icon. Das Icon wechselt je nach Untergrund zwischen Dunkel und Weiß (Klasse kdm-kopf-dunkel setzt kdm.js). -------------------------------------------------------------------------- */ .kdm-lasche-fertig .kdm-kopf__logo { animation: none; } @media (max-width: 767px) { .kdm-header { min-height: var(--kdm-logo-h); } .kdm-kopf-fix .kdm-kopf__logo, .kdm-kopf-fix .kdm-kopf__menue { position: fixed; z-index: 25; top: 0; animation: none; transform: translateY(calc(-100% - 12px)); transition: transform .32s cubic-bezier(.2, .7, .2, 1); will-change: transform; } .kdm-kopf-sprung .kdm-kopf__logo, .kdm-kopf-sprung .kdm-kopf__menue { transition: none !important; } .kdm-kopf-fix .kdm-kopf__logo { left: var(--kdm-gutter); box-shadow: 0 6px 20px rgba(0, 0, 0, .16); } .kdm-kopf-fix .kdm-kopf__menue { right: var(--kdm-gutter); top: calc((var(--kdm-logo-h) - 44px) / 2); } .kdm-kopf-fix.kdm-kopf-da .kdm-kopf__logo, .kdm-kopf-fix.kdm-kopf-da .kdm-kopf__menue, .kdm-kopf-fix.kdm-menue-offen .kdm-kopf__logo, .kdm-kopf-fix.kdm-menue-offen .kdm-kopf__menue { transform: none; } .kdm-kopf-fix.kdm-menue-offen .kdm-kopf__logo, .kdm-kopf-fix.kdm-menue-offen .kdm-kopf__menue { position: fixed; z-index: 31; } .kdm-kopf-fix.kdm-menue-offen .kdm-kopf__logo { box-shadow: none; } html.kdm-kopf-fix:not(.kdm-menue-offen) body .kdm-header .kdm-kopf .kdm-kopf__menue span[aria-hidden] { color: var(--kdm-ink); } html.kdm-kopf-fix.kdm-kopf-dunkel:not(.kdm-menue-offen) body .kdm-header .kdm-kopf .kdm-kopf__menue span[aria-hidden] { color: #fff; } } @media (max-width: 413px) { .kdm-kopf-fix .kdm-kopf__menue { top: calc((var(--kdm-logo-h) - 40px) / 2); } } @media (prefers-reduced-motion: reduce) { .kdm-kopf-fix .kdm-kopf__logo, .kdm-kopf-fix .kdm-kopf__menue { transition: none; } } /* 0.14.2 · Text mit Bild: Akkordeon direkt unter dem Fließtext, in der Textspalte neben dem Bild. */ :is(.kdm-main, .editor-styles-wrapper) .kdm-textbild__text > .kdm-textbild__akkordeon { margin-block-start: var(--kdm-space-40); } .kdm-textbild__akkordeon { border-top: 1px solid var(--kdm-line); } .kdm-textbild__akkordeon .kdm-faq__frage summary { padding-block: var(--kdm-space-16); } .kdm-textbild__akkordeon .kdm-faq__frage summary h3 { margin: 0; font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); letter-spacing: var(--kdm-ls-regular); font-weight: 600; } .kdm-textbild__akkordeon .kdm-faq__antwort { padding: 0 48px var(--kdm-space-16) 0; } /* 0.14.3 · Produktraster als Zeile: Text auf der einen, Karten auf der anderen Seite (z. B. je Bezug zwei Gestelle). */ .kdm-rasterzeile, .kdm-rasterzeile.alignwide { max-width: min(var(--kdm-text), 100%); margin-inline: auto; } .kdm-rasterzeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--kdm-spalte-gap); align-items: center; } .kdm-rasterzeile--text-rechts .kdm-rasterzeile__text { order: 2; } .kdm-rasterzeile--text-rechts { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .kdm-rasterzeile__text { max-width: 480px; } .kdm-rasterzeile--text-rechts .kdm-rasterzeile__text { justify-self: end; } .kdm-rasterzeile .kdm-produktraster { --kdm-spalten: 2; grid-template-columns: repeat(2, minmax(0, var(--kdm-card))); } .kdm-main .wp-block-post-content > .kdm-rasterzeile + .kdm-rasterzeile { margin-block-start: var(--kdm-space-80); } @media (max-width: 1199px) { .kdm-rasterzeile, .kdm-rasterzeile--text-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 767px) { .kdm-rasterzeile, .kdm-rasterzeile--text-rechts { grid-template-columns: 1fr; row-gap: var(--kdm-space-24); } .kdm-rasterzeile--text-rechts .kdm-rasterzeile__text { order: 0; justify-self: start; } .kdm-rasterzeile__text { max-width: none; } .kdm-main .wp-block-post-content > .kdm-rasterzeile + .kdm-rasterzeile { margin-block-start: var(--kdm-space-40); } } @media (max-width: 359px) { .kdm-rasterzeile .kdm-produktraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 0.14.7 -------------------------------------------------------------------------- */ /* * Eine sanddunkle Gruppe, die nur die Notiz enthält, zählt im Seitenrhythmus als normaler Baustein. * Ohne diese Regel stößt sie ohne Abstand an den nächsten vollbreiten Baustein (Markenband, Sandfläche). */ .kdm-main .wp-block-post-content > .alignfull.is-style-flaeche-sand-dunkel:has(> .kdm-notiz:only-child) + .alignfull, .kdm-main .wp-block-post-content > .alignfull + .alignfull.is-style-flaeche-sand-dunkel:has(> .kdm-notiz:only-child) { margin-block-start: var(--kdm-space-80); } .kdm-main .wp-block-post-content > .alignfull.is-style-flaeche-sand-dunkel:has(> .kdm-notiz:only-child) + .alignfull:has(> h2:first-child) { margin-block-start: var(--kdm-space-120); } /* Produktkarte mit kurzem Text darüber (Felder vortitel, vortext). Im Raster beginnen alle Bilder auf einer Höhe. */ .kdm-kartenfall { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: var(--kdm-space-24); justify-items: center; text-align: center; min-width: 0; } .kdm-kartenfall__text { align-self: start; max-width: 320px; } :is(.kdm-main, .editor-styles-wrapper) .kdm-kartenfall__text > * { margin: 0; } :is(.kdm-main, .editor-styles-wrapper) .kdm-kartenfall__text > * + * { margin-block-start: 8px; } .kdm-kartenfall .kdm-karte { width: 100%; } :is(.kdm-main, .editor-styles-wrapper) .kdm-kartenfall > * { margin-block: 0; } /* Bilder mit Text: Bild einpassen statt zuschneiden, für Shopbilder auf Weiß. */ .kdm-bildspalten--einpassen .kdm-bildspalte__bild img { object-fit: contain; } /* -------------------------------------------------------------------------- 0.14.8 Produktkarte mit Text: Sandfläche hinter dem Text, sie läuft bis hinter das Produkt. Das Shopbild liegt per multiply über der Fläche. Auf dem Smartphone wird das Raster zur Leiste zum Wischen. -------------------------------------------------------------------------- */ .kdm-kartenfall { row-gap: 0; } .kdm-kartenfall__text { align-self: stretch; justify-self: stretch; max-width: none; box-sizing: border-box; background: var(--kdm-sand); border-radius: var(--kdm-radius) var(--kdm-radius) 0 0; padding: var(--kdm-space-24) var(--kdm-space-24) var(--kdm-space-16); } .kdm-kartenfall .kdm-karte__bild { position: relative; isolation: isolate; } .kdm-kartenfall .kdm-karte__bild::before { content: ""; position: absolute; inset: 0 0 45% 0; z-index: -1; background: var(--kdm-sand); border-radius: 0 0 var(--kdm-radius) var(--kdm-radius); } .kdm-kartenfall .kdm-karte__bild img { mix-blend-mode: multiply; } /* 0.14.9: Die Leiste zum Wischen gilt auch auf dem Tablet (bis 1199 px), dort mit gut zweieinhalb sichtbaren Karten. */ @media (max-width: 1199px) { .kdm-produktraster:has(> .kdm-kartenfall) { grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 36%; justify-content: start; column-gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none !important; margin-inline: calc(var(--kdm-gutter) * -1) !important; padding-inline: var(--kdm-gutter); scroll-padding-inline: var(--kdm-gutter); } .kdm-produktraster:has(> .kdm-kartenfall)::-webkit-scrollbar { display: none; } .kdm-produktraster > .kdm-kartenfall { scroll-snap-align: start; } .kdm-produktraster > .kdm-kartenfall .kdm-karte__bild { max-width: none; } } @media (max-width: 767px) { .kdm-produktraster:has(> .kdm-kartenfall) { grid-auto-columns: min(78%, 300px); column-gap: 12px; } } /* -------------------------------------------------------------------------- 0.14.10: Größen Komponente. Eine Gruppe mit der Klasse kdm-groessen, darin H3 „Größenverhältnisse der [Gattung]", ein kurzer Absatz in großer Schrift und der Baustein kdm/massvergleich mit Silhouetten (SVG, #1d0900). Hellbeige Fläche vom linken Bildschirmrand bis zur rechten Rasterkante. Mobil reicht die Fläche bis an beide Ränder, die Reihe lässt sich wischen, die Einheit steht einmal unter der Grafik. -------------------------------------------------------------------------- */ .kdm-groessen { position: relative; background: var(--kdm-page); border-radius: 0 var(--kdm-radius) var(--kdm-radius) 0; padding-block: 48px; padding-right: var(--kdm-space-40); } .kdm-groessen::before { content: ""; position: absolute; inset-block: 0; right: 100%; width: 100vw; background: inherit; } .kdm-groessen.kdm-groessen { margin-block: var(--kdm-space-80) var(--kdm-space-120); } .kdm-groessen > * { margin-block: 0; } .kdm-groessen > .wp-block-heading { margin-bottom: var(--kdm-space-40); font-size: var(--kdm-fs-karte); letter-spacing: var(--kdm-ls-karte); line-height: var(--kdm-lh-karte); font-weight: 600; } .kdm-groessen > p { margin-bottom: var(--kdm-space-40); max-width: var(--kdm-text); } .kdm-groessen > .wp-block-heading:has(+ p) { margin-bottom: var(--kdm-space-16); } /* 0.14.11: Einheitliche Größe. Das größte Modell jeder Grafik passt in ein Quadrat (--kdm-gr), alle anderen folgen im Maßstab. Die dritte Grenze hält die Reihe am Desktop in der Rasterbreite: je Modell rund 40 px für die Höhenlinie plus der Abstand. */ .kdm-groessen .kdm-massvergleich__liste { --kdm-gr: 240px; --u: min(calc(var(--kdm-gr) / var(--kdm-mv-h)), calc(var(--kdm-gr) / var(--kdm-mv-b)), calc((100cqi - var(--kdm-mv-n) * 118px + 72px) / var(--kdm-mv-sb, calc(var(--kdm-mv-n) * var(--kdm-mv-b))))); margin-inline: 0; width: max-content; grid-auto-columns: max-content; column-gap: 72px; } /* Maßlinien grau, Werte dunkel. */ .kdm-groessen :is(.kdm-massvergleich__breite, .kdm-massvergleich__hoehe) { color: var(--kdm-muted); } .kdm-groessen .kdm-massvergleich__wert { color: var(--kdm-ink); } /* Der Name sitzt mittig unter dem Motiv, nicht unter Motiv plus Höhenlinie. */ .kdm-groessen .kdm-massvergleich__name { width: auto; min-width: 0; white-space: nowrap; text-align: center; padding-inline: 0; transform: translateX(20px); } .kdm-groessen .kdm-massvergleich__bild { align-self: end; } @media (max-width: 767px) { .kdm-groessen { border-radius: 0; padding-block: 40px; padding-right: 0; } .kdm-groessen::after { content: ""; position: absolute; inset-block: 0; left: 100%; width: var(--kdm-gutter, 20px); background: inherit; } .kdm-groessen .kdm-massvergleich__spur { position: relative; z-index: 1; margin-inline: calc(var(--kdm-gutter, 20px) * -1); padding-inline: var(--kdm-gutter, 20px); } .kdm-groessen .kdm-massvergleich__liste { --kdm-gr: 190px; --u: min(calc(var(--kdm-gr) / var(--kdm-mv-h)), calc(var(--kdm-gr) / var(--kdm-mv-b))); column-gap: 48px; } .kdm-groessen .kdm-massvergleich__einheit { display: none; } .kdm-groessen .kdm-massvergleich__hoehe .kdm-massvergleich__wert { align-self: center; } .kdm-groessen .wp-block-kdm-massvergleich::after { content: "Alle Angaben in cm."; display: block; margin-top: var(--kdm-space-24); font-size: var(--kdm-fs-small); color: var(--kdm-muted); } } /* -------------------------------------------------------------------------- 0.14.12: Kompakter Textbereich. Gruppe mit der Klasse kdm-kompakt: Überschriften zwei Stufen kleiner (Größe der Produktnamen), Fließtext in der normalen Größe, feste Abstände (40 px vor einer Überschrift, 16 px zwischen den Elementen). -------------------------------------------------------------------------- */ .kdm-kompakt.kdm-kompakt > * { margin-block: 0; } .kdm-kompakt.kdm-kompakt > .wp-block-heading { font-size: var(--kdm-fs-karte); line-height: var(--kdm-lh-karte); letter-spacing: var(--kdm-ls-karte); font-weight: 600; margin-bottom: var(--kdm-space-16); } .kdm-kompakt.kdm-kompakt > * + .wp-block-heading { margin-top: var(--kdm-space-40); } .kdm-kompakt.kdm-kompakt > p + p { margin-top: var(--kdm-space-16); } /* 0.14.12: Designer auf der Herstellerseite. */ .kdm-archivkopf__designer { margin-top: var(--kdm-space-24); } .kdm-archivkopf__designer a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .kdm-archivkopf__designer a:hover { text-decoration-thickness: 2px; } /* 0.14.14: Mobil 40 px Abstand zwischen einer Text/Bild Sektion und dem dunklen Band der Preishistorie. Fester Wert, weil --kdm-space-40 mobil auf 24 px schrumpft. */ @media (max-width: 767px) { .kdm-main .wp-block-post-content > .alignfull:has(> .kdm-textbild) + .kdm-preisverlauf.alignfull, .kdm-main .wp-block-post-content > .kdm-textbild + .kdm-preisverlauf.alignfull { margin-block-start: 40px; } } /* Zeile "Aktualisiert am" in Seitenkopf, Produktkopf und Designerkopf (0.16.2). */ .kdm-stand { margin-top: var(--kdm-space-16) !important; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); color: var(--kdm-muted); } .kdm-stand a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* -------------------------------------------------------------------------- 0.16.5 -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .kdm-kopf__menue span[aria-hidden], .kdm-kopf__menue span[aria-hidden]::before, .kdm-kopf__menue span[aria-hidden]::after { transition: none; } } /* Varianten Button: runder Button mit Listen Icon unten rechts statt der breiten Leiste mit Text. */ @media (max-width: 767px) { .kdm-sticky-kauf--varianten:not([hidden]) { display: block; left: auto; right: var(--kdm-gutter); } .kdm-varianten-knopf { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--kdm-ink); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent; } .kdm-varianten-knopf svg { display: block; width: 26px; height: 26px; } .kdm-varianten-knopf:active { transform: scale(.96); } .kdm-varianten-knopf:focus-visible { outline: 2px solid var(--kdm-ink); outline-offset: 3px; } } /* Feste Buttons liegen nicht über dem offenen Mobilmenü. */ .kdm-menue-offen .kdm-sticky-kauf { visibility: hidden; } /* Produktzeile mobil: Das Stimmungsbild wechselt die Seite mit der Einstellung "Produktkarte". Karte links: Bild läuft nach rechts aus dem Raster (wie bisher). Karte rechts: Bild läuft nach links aus. */ @media (max-width: 767px) { :is(.kdm-main, .editor-styles-wrapper) .kdm-produktzeile--karte-rechts .kdm-produktzeile__inhalt > .kdm-produktzeile__bild { margin-left: calc(var(--kdm-gutter) * -1); margin-right: 32px; } .kdm-produktzeile.kdm-produktzeile--karte-rechts .kdm-produktzeile__bild .kdm-figur { border-radius: 0 var(--kdm-radius) var(--kdm-radius) 0; } } /* Mobil, Kopf beim Hochscrollen (0.16.6): Glas wie bei iOS. Drei Lagen mit steigender Unschärfe, jede nach unten weich maskiert, so nimmt die Schärfe stufenlos zu und es gibt keine Kante. Die oberste Lage sättigt leicht und trägt einen dünnen Farbton: hell über hellen Flächen, dunkel über dunklen Bildern (Klasse kdm-kopf-dunkel aus kdm.js). */ @property --kdm-glas { syntax: ""; inherits: true; initial-value: rgba(247, 245, 242, .58); } @media (max-width: 767px) { .kdm-header { --kdm-glas: rgba(247, 245, 242, .58); --kdm-glas-h: calc(var(--kdm-logo-h) + 56px); transition: --kdm-glas .35s ease; } .kdm-kopf-dunkel .kdm-header { --kdm-glas: rgba(29, 9, 0, .34); } .kdm-header::before, .kdm-header::after, .kdm-kopf::before { content: ""; position: fixed; z-index: 24; top: 0; left: 0; right: 0; height: var(--kdm-glas-h); pointer-events: none; opacity: 0; transition: opacity .35s ease; } .kdm-header::before { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); mask-image: linear-gradient(to bottom, #000 50%, transparent); } .kdm-header::after { -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 72%); mask-image: linear-gradient(to bottom, #000 20%, transparent 72%); } .kdm-kopf::before { background: linear-gradient(to bottom, var(--kdm-glas), transparent 78%); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 48%); mask-image: linear-gradient(to bottom, #000, transparent 48%); } .kdm-kopf-fix.kdm-kopf-da:not(.kdm-menue-offen) .kdm-header::before, .kdm-kopf-fix.kdm-kopf-da:not(.kdm-menue-offen) .kdm-header::after, .kdm-kopf-fix.kdm-kopf-da:not(.kdm-menue-offen) .kdm-kopf::before { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .kdm-header, .kdm-header::before, .kdm-header::after, .kdm-kopf::before { transition: none; } } /* ========================================================================== 0.16.8: Designerübersicht. Aufbau wie die Produktübersicht, das Porträt sitzt in einer Kreismaske. ========================================================================== */ .kdm-designerkachel { min-height: 0; } .kdm-designerkachel__bild { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: var(--kdm-space-40) 0 var(--kdm-space-24); } .kdm-designerkachel__kreis { display: block; width: min(72%, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--kdm-line-warm); } .kdm-designerkachel__kreis img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 12%; transition: transform .6s ease; } .kdm-designerkachel:hover .kdm-designerkachel__kreis img { transform: scale(1.08); } @media (hover: none) { .kdm-designerkachel:hover .kdm-designerkachel__kreis img { transform: none; } } .kdm-designerkachel__werke { display: block; text-align: center; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); color: var(--kdm-muted); margin-bottom: var(--kdm-space-24); min-height: calc(var(--kdm-lh-small) * 2); } /* Zurück zur Übersicht: kleine Zeile über dem Namen der Designerseite, Button unter den ähnlichen Designern. */ .kdm-designerkopf__pfad { margin: 0 0 8px !important; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); letter-spacing: var(--kdm-ls-small); } .kdm-designerkopf__pfad a { color: var(--kdm-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .kdm-designerkopf__pfad a::before { content: ""; width: 14px; height: 14px; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); } .kdm-designerkopf__pfad a:hover { color: var(--kdm-ink); text-decoration: underline; } .kdm-aehnlich__alle { margin-top: var(--kdm-space-40) !important; } /* -------------------------------------------------------------------------- 0.16.12 · Varianten Button auch am Desktop: rund, unten rechts, je 32 px Abstand. Die Liste öffnet dort als Karte über dem Button statt als Bottom Sheet über die ganze Breite. -------------------------------------------------------------------------- */ .kdm-varianten-knopf { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--kdm-ink); color: #fff; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); -webkit-tap-highlight-color: transparent; } .kdm-varianten-knopf svg { display: block; width: 26px; height: 26px; } .kdm-varianten-knopf:active { transform: scale(.96); } .kdm-varianten-knopf:focus-visible { outline: 2px solid var(--kdm-ink); outline-offset: 3px; } @media (min-width: 768px) { .kdm-sticky-kauf--varianten:not([hidden]) { display: block; position: fixed; z-index: 90; right: 32px; bottom: 32px; transition: opacity .25s ease, transform .25s ease; } .kdm-sticky-kauf--varianten.is-aus { opacity: 0; transform: translateY(16px); pointer-events: none; } .kdm-varianten-knopf { transition: transform .2s ease; } .kdm-varianten-knopf:hover { transform: scale(1.06); } .kdm-sheet[open] { inset: auto 32px 32px auto; width: 420px; max-width: calc(100vw - 64px); } .kdm-sheet__innen { border-radius: 20px; padding-bottom: 0; max-height: min(calc(100vh - 64px), 640px); transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); } .kdm-sheet.is-auf .kdm-sheet__innen { opacity: 1; } .kdm-sheet__griff { display: none; } .kdm-sheet__kopf { padding-top: 14px; touch-action: auto; } .kdm-sheet::backdrop { background: rgba(29, 9, 0, .28); } } /* -------------------------------------------------------------------------- 0.17.0 · 3D Modell (kdm/modell3d): Sandkarte, das drehende Modell bricht links oben und unten aus der Karte aus. Der Button öffnet ein Modal mit Bühne und Auswahl. -------------------------------------------------------------------------- */ .kdm-modell3d { --kdm-modell3d-aus: 88px; --kdm-modell3d-bild: 120px; padding-block: var(--kdm-modell3d-aus); } .kdm-modell3d__karte { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; min-height: 440px; background: var(--kdm-sand); border-radius: var(--kdm-radius); } .kdm-modell3d__bild { position: relative; align-self: stretch; min-height: 440px; } .kdm-modell3d__bild model-viewer { position: absolute; inset: calc(var(--kdm-modell3d-bild) * -1) 0; width: 100%; height: auto; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; pointer-events: none; opacity: 0; transition: opacity .5s ease; } .kdm-modell3d.is-geladen .kdm-modell3d__bild model-viewer { opacity: 1; } /* 0.17.1 · Produktseiten stehen auf Sand, dort ist die Karte weiß (Vorgabe Koray). */ .kdm-main--produkt .kdm-modell3d__karte { background: #fff; } .kdm-modell3d__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 56px 64px 56px 16px; } .kdm-modell3d__text h2 { margin: 0; text-wrap: balance; font-size: var(--kdm-fs-h2); line-height: var(--kdm-lh-h2); letter-spacing: var(--kdm-ls-h2); font-weight: 600; color: var(--kdm-ink); } .kdm-modell3d__text p { margin: var(--kdm-nach-h2) 0 0; font-size: var(--kdm-fs-loud); line-height: var(--kdm-lh-loud); letter-spacing: var(--kdm-ls-loud); max-width: 56ch; } .kdm-modell3d__knopf { margin-top: var(--kdm-zu-aktion); border: 0; cursor: pointer; font-family: inherit; min-height: 48px; font-size: 14px; } .kdm-modell3d.is-ohne-modell .kdm-modell3d__karte { grid-template-columns: minmax(0, 1fr); min-height: 0; } .kdm-modell3d.is-ohne-modell .kdm-modell3d__bild { display: none; } .kdm-modell3d.is-ohne-modell .kdm-modell3d__text { padding-left: 64px; } .kdm-modell3d__dialog { border: 0; padding: 0; background: #fff; color: var(--kdm-body); border-radius: var(--kdm-radius); width: min(1180px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: auto; } .kdm-modell3d__dialog:not([open]) { display: none; } .kdm-modell3d__dialog::backdrop { background: rgba(29, 9, 0, .55); } .kdm-modell3d__modal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--kdm-space-40); padding: var(--kdm-space-24); align-items: start; } .kdm-modell3d__buehne { position: relative; aspect-ratio: 1 / 1; max-width: 100%; overflow: hidden; background: var(--kdm-sand); border-radius: 16px; } .kdm-modell3d__buehne model-viewer { width: 100%; height: 100%; background: var(--kdm-sand); --poster-color: transparent; --progress-bar-color: transparent; } .kdm-modell3d__laedt, .kdm-modell3d__tipp { position: absolute; margin: 0; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); pointer-events: none; } .kdm-modell3d__laedt { inset: 0; display: flex; align-items: center; justify-content: center; } .kdm-modell3d__laedt[hidden] { display: none; } .kdm-modell3d__tipp { left: 20px; bottom: 16px; } .kdm-modell3d__seite { display: flex; flex-direction: column; gap: var(--kdm-space-24); min-width: 0; padding: 8px 8px 8px 0; } .kdm-modell3d__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kdm-space-16); } .kdm-modell3d__dach { margin: 0 0 6px; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); } .kdm-modell3d__kopf h3 { margin: 0; text-wrap: balance; font-size: var(--kdm-fs-h3); line-height: var(--kdm-lh-h3); letter-spacing: var(--kdm-ls-h3); font-weight: 600; color: var(--kdm-ink); } .kdm-modell3d__zu { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--kdm-line-warm); border-radius: 50%; background: transparent; color: var(--kdm-ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; } .kdm-modell3d__gruppe h4 { margin: 0 0 10px; font-size: var(--kdm-fs-regular); line-height: var(--kdm-lh-regular); letter-spacing: var(--kdm-ls-regular); font-weight: 600; color: var(--kdm-ink); } .kdm-modell3d__wahl { display: flex; flex-wrap: wrap; gap: 8px; } .kdm-modell3d__chip { padding: 6px 14px; border: 1px solid var(--kdm-line-warm); border-radius: 100px; background: transparent; color: var(--kdm-ink); font: inherit; font-size: var(--kdm-fs-regular); line-height: 24px; cursor: pointer; } .kdm-modell3d__chip[aria-pressed="true"] { background: var(--kdm-ink); border-color: var(--kdm-ink); color: #fff; font-weight: 600; } .kdm-modell3d__farben { display: flex; flex-wrap: wrap; gap: 10px; } .kdm-modell3d__farbe { width: 38px; height: 38px; padding: 0; border: 1px solid var(--kdm-line-warm); border-radius: 50%; cursor: pointer; outline-offset: 3px; } .kdm-modell3d__farbe[aria-pressed="true"] { outline: 2px solid var(--kdm-ink); } .kdm-modell3d__farbname { margin: 10px 0 0; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); } .kdm-modell3d__fakten { margin: 0; border-top: 1px solid var(--kdm-line-warm); } .kdm-modell3d__fakten > div { display: flex; justify-content: space-between; gap: var(--kdm-space-16); padding: 10px 0; border-bottom: 1px solid var(--kdm-line-warm); font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); } .kdm-modell3d__fakten > div[hidden] { display: none; } .kdm-modell3d__fakten dt { flex: none; color: var(--kdm-muted); } .kdm-modell3d__fakten dd { margin: 0; min-width: 0; text-align: right; color: var(--kdm-ink); font-variant-numeric: tabular-nums; } .kdm-modell3d :is(.kdm-modell3d__zu, .kdm-modell3d__chip, .kdm-modell3d__farbe, .kdm-modell3d__knopf):focus-visible { outline: 2px solid var(--kdm-ink); outline-offset: 3px; } .kdm-main--produkt > .kdm-modell3d + * { margin-block-start: calc(var(--kdm-space-120) - 88px); } .kdm-main--produkt > * + .kdm-modell3d { margin-block-start: calc(var(--kdm-space-120) - 88px); } @media (max-width: 1199px) { .kdm-modell3d__text { padding: 40px 40px 40px 8px; } .kdm-modell3d__modal { gap: var(--kdm-space-24); } } @media (max-width: 767px) { .kdm-modell3d { --kdm-modell3d-aus: 40px; --kdm-modell3d-bild: 40px; padding-block: var(--kdm-modell3d-aus) 0; } .kdm-modell3d__karte { grid-template-columns: minmax(0, 1fr); min-height: 0; } .kdm-modell3d__bild { min-height: 280px; } .kdm-modell3d__bild model-viewer { inset: calc(var(--kdm-modell3d-aus) * -1) 0 0; } .kdm-modell3d__text, .kdm-modell3d.is-ohne-modell .kdm-modell3d__text { padding: 8px 24px 32px; } .kdm-modell3d__knopf { width: 100%; } .kdm-modell3d__modal { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: var(--kdm-space-16); } .kdm-modell3d__seite { padding: 0; } .kdm-main--produkt > .kdm-modell3d + * { margin-block-start: var(--kdm-space-120); } .kdm-main--produkt > * + .kdm-modell3d { margin-block-start: calc(var(--kdm-space-120) - 40px); } } /* -------------------------------------------------------------------------- 0.17.2 · 3D Modell: Produktbild als Platzhalter, Weg zum Shop im Modal, kurzer Hinweis statt Tabelle, mobil gleiche Abstände oben und unten. -------------------------------------------------------------------------- */ .kdm-modell3d__poster { position: absolute; inset: 24px; margin: 0; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; } .kdm-modell3d__poster img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; } .kdm-modell3d.is-geladen .kdm-modell3d__poster { opacity: 0; pointer-events: none; } .kdm-modell3d__aktion { display: flex; flex-wrap: wrap; gap: 12px; } .kdm-modell3d__aktion .kdm-button { flex: 1 1 180px; } .kdm-modell3d__hinweis { margin: 0; font-size: var(--kdm-fs-small); line-height: var(--kdm-lh-small); color: var(--kdm-muted); } @media (max-width: 767px) { .kdm-modell3d { padding-block: var(--kdm-modell3d-aus); } .kdm-main--produkt > .kdm-modell3d + * { margin-block-start: calc(var(--kdm-space-120) - 40px); } .kdm-modell3d__poster { inset: 16px 24px 8px; } } /* ========================================================================== 0.17.3 · 3D Modell mobil: Modell und Platzhalterbild ragen oben 24px über die Karte hinaus. Der Abstand zum Abschnitt davor bleibt wie bisher. ========================================================================== */ @media (max-width: 767px) { .kdm-modell3d { --kdm-modell3d-aus: 24px; padding-block: 40px; } /* Der Betrachter lässt um das Modell rund 44px Luft, deshalb sitzt sein Rahmen höher als die sichtbaren 24px. */ .kdm-modell3d__bild model-viewer { inset: -68px 0 0; } .kdm-modell3d__poster { inset: -24px 24px 8px; } } /* ========================================================================== 0.17.4 · Mobil, Kopf beim Hochscrollen: Glas als klare Scheibe statt als Verlauf. Die Scheibe endet 4px unter dem Logo. Aufbau in drei Lagen: 1. Linse (.kdm-header::before): bricht den Inhalt an der Unterkante, er wird dort gestaucht nach oben gezogen. Braucht einen SVG Filter im Hintergrund, das kann derzeit nur Chromium. Safari und Firefox lassen die Lage aus. 2. Körper (.kdm-header::after): Unschärfe, Sättigung und ein dünner Farbton. 3. Kante (.kdm-kopf::before): Lichtkante unten, Glanz oben, weicher Schatten. ========================================================================== */ @media (max-width: 767px) { .kdm-header { --kdm-glas: rgba(247, 245, 242, .46); --kdm-glas-h: calc(var(--kdm-logo-h) + 4px); --kdm-glas-licht: rgba(255, 255, 255, .55); } .kdm-kopf-dunkel .kdm-header { --kdm-glas: rgba(29, 9, 0, .28); --kdm-glas-licht: rgba(255, 255, 255, .22); } .kdm-header::before, .kdm-header::after, .kdm-kopf::before { -webkit-mask-image: none; mask-image: none; } .kdm-header::before { z-index: 22; -webkit-backdrop-filter: url(#kdm-glas-linse); backdrop-filter: url(#kdm-glas-linse); } .kdm-header::after { z-index: 23; background: var(--kdm-glas); -webkit-backdrop-filter: blur(4px) saturate(1.9) brightness(1.04); backdrop-filter: blur(4px) saturate(1.9) brightness(1.04); } /* iPhone und iPad (alle Browser dort sind WebKit): keine Linse möglich, deshalb trägt hier die Unschärfe das Glas. */ @supports (-webkit-touch-callout: none) { .kdm-header::after { -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.04); backdrop-filter: blur(16px) saturate(1.9) brightness(1.04); } } .kdm-kopf::before { z-index: 24; -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%), linear-gradient(to top, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 22%); box-shadow: inset 0 -1px 0 var(--kdm-glas-licht), inset 0 -2px 3px rgba(255, 255, 255, .18), 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .06); } } /* 0.17.5 · Glas im mobilen Kopf: Ganz oben löst sich das Logo aus der festen Lage und liegt dann unter dem Glas. Deshalb blendet das Glas nur aus, solange der Kopf fest steht. Am Seitenanfang ist es sofort weg, ohne Aufblitzen. */ @media (max-width: 767px) { .kdm-header::before, .kdm-header::after, .kdm-kopf::before { transition: none; } .kdm-kopf-fix .kdm-header::before, .kdm-kopf-fix .kdm-header::after, .kdm-kopf-fix .kdm-kopf::before { transition: opacity .35s ease; } .kdm-kopf-sprung .kdm-header::before, .kdm-kopf-sprung .kdm-header::after, .kdm-kopf-sprung .kdm-kopf::before { transition: none; } } @media (prefers-reduced-motion: reduce) { .kdm-kopf-fix .kdm-header::before, .kdm-kopf-fix .kdm-header::after, .kdm-kopf-fix .kdm-kopf::before { transition: none; } } /* 0.17.7 · Mobil stehen Logo und Menü immer fest am oberen Rand, auch am Seitenanfang. Vorher wechselten sie dort zurück in den Seitenfluss: Dabei konnte sich das Logo vom Rand lösen und das Glas kurz darüber liegen. */ @media (max-width: 767px) { .kdm-header .kdm-kopf__logo, .kdm-header .kdm-kopf__menue { position: fixed; z-index: 25; top: 0; transition: transform .32s cubic-bezier(.2, .7, .2, 1); } .kdm-header .kdm-kopf__logo { left: var(--kdm-gutter); } .kdm-header .kdm-kopf__menue { right: var(--kdm-gutter); top: calc((var(--kdm-logo-h) - 44px) / 2); } .kdm-menue-offen .kdm-header .kdm-kopf__logo, .kdm-menue-offen .kdm-header .kdm-kopf__menue { position: fixed; z-index: 31; } } @media (max-width: 413px) { .kdm-header .kdm-kopf__menue { top: calc((var(--kdm-logo-h) - 40px) / 2); } } @media (prefers-reduced-motion: reduce) { .kdm-header .kdm-kopf__logo, .kdm-header .kdm-kopf__menue { transition: none; } } /* 0.17.7 · Desktop: Am Seitenanfang federt die Seite mit Trackpad über den Rand (Gummiband), das Logo löste sich dabei vom oberen Rand. Die Fläche über dem Dokument lässt sich nicht bemalen, deshalb federt die Seite hier nicht mehr. */ @media (min-width: 768px) { html { overscroll-behavior-y: none; } } /* ========================================================================== 0.17.8 · Desktop (ab 1200px): fester Kopf mit Logo und Menüpunkten. Die ganze Zeile steht fest am oberen Rand. Ganz oben sieht sie aus wie bisher. Beim Runterscrollen fährt sie aus dem Bild, beim Hochscrollen kommt sie mit der Glasscheibe zurück (gleiche Klassen wie mobil, gesetzt von kdm.js). Die Menüpunkte wechseln je nach Untergrund zwischen Dunkel und Weiß. ========================================================================== */ @media (min-width: 1200px) { .kdm-header { min-height: var(--kdm-logo-h); --kdm-glas: rgba(247, 245, 242, .62); --kdm-glas-h: calc(var(--kdm-logo-h) + 4px); --kdm-glas-licht: rgba(255, 255, 255, .55); transition: --kdm-glas .35s ease; } .kdm-kopf-dunkel .kdm-header { --kdm-glas: rgba(29, 9, 0, .36); --kdm-glas-licht: rgba(255, 255, 255, .22); } .kdm-kopf { position: fixed; z-index: 25; top: 0; left: 0; right: 0; transition: transform .32s cubic-bezier(.2, .7, .2, 1); } .kdm-kopf-fix .kdm-kopf { transform: translateY(calc(-100% - 12px)); } .kdm-kopf-fix.kdm-kopf-da .kdm-kopf { transform: none; } .kdm-kopf-sprung .kdm-kopf { transition: none !important; } .kdm-kopf-fix .kdm-kopf__logo { box-shadow: 0 6px 20px rgba(0, 0, 0, .14); } html.kdm-kopf-fix body .kdm-header .kdm-kopf__nav .kdm-nav__link { color: var(--kdm-ink); transition: color .2s ease; } html.kdm-kopf-fix.kdm-kopf-dunkel body .kdm-header .kdm-kopf__nav .kdm-nav__link { color: #fff; } .kdm-header::before, .kdm-header::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: var(--kdm-glas-h); pointer-events: none; opacity: 0; } .kdm-header::before { z-index: 22; -webkit-backdrop-filter: url(#kdm-glas-linse); backdrop-filter: url(#kdm-glas-linse); } .kdm-header::after { z-index: 23; background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%), linear-gradient(to top, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 22%), var(--kdm-glas); -webkit-backdrop-filter: blur(9px) saturate(1.9) brightness(1.04); backdrop-filter: blur(9px) saturate(1.9) brightness(1.04); box-shadow: inset 0 -1px 0 var(--kdm-glas-licht), inset 0 -2px 3px rgba(255, 255, 255, .18), 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .06); } .kdm-kopf-fix .kdm-header::before, .kdm-kopf-fix .kdm-header::after { transition: opacity .35s ease; } .kdm-kopf-sprung .kdm-header::before, .kdm-kopf-sprung .kdm-header::after { transition: none; } .kdm-kopf-fix.kdm-kopf-da .kdm-header::before, .kdm-kopf-fix.kdm-kopf-da .kdm-header::after { opacity: 1; } } @media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .kdm-kopf, .kdm-header::before, .kdm-header::after { transition: none !important; } } /* 0.17.9 · Glas im Kopf (mobil und Desktop): weiches Ende statt Kante. Die letzten 18px laufen über eine Maske aus, Lichtkante und Schatten an der Unterkante entfallen. */ @media (max-width: 767px), (min-width: 1200px) { .kdm-header { --kdm-glas-h: calc(var(--kdm-logo-h) + 10px); } .kdm-header::before, .kdm-header::after, .kdm-kopf::before { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); box-shadow: none; } } @media (max-width: 767px) { .kdm-kopf::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%); } } @media (min-width: 1200px) { .kdm-kopf::before { -webkit-mask-image: none; mask-image: none; } .kdm-header::after { background: linear-gradient(to bottom, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 38%), var(--kdm-glas); } } /* 0.17.10 · Glas im Kopf: langer Verlauf statt kurzer Kante. Die Scheibe reicht 48px unter das Logo und wird ab etwa 40 Prozent ihrer Höhe stufenlos durchsichtig. So gibt es keine erkennbare Grenze zum Inhalt. */ @media (max-width: 767px), (min-width: 1200px) { .kdm-header { --kdm-glas-h: calc(var(--kdm-logo-h) + 48px); --kdm-glas-maske: linear-gradient(to bottom, #000 0, #000 38%, rgba(0, 0, 0, .78) 56%, rgba(0, 0, 0, .42) 74%, rgba(0, 0, 0, .14) 89%, transparent); } .kdm-header::before, .kdm-header::after { -webkit-mask-image: var(--kdm-glas-maske); mask-image: var(--kdm-glas-maske); } } @media (max-width: 767px) { .kdm-kopf::before { -webkit-mask-image: var(--kdm-glas-maske); mask-image: var(--kdm-glas-maske); } } /* 0.17.11 · Glas im Kopf ohne Linse. Der SVG Filter aus 0.17.4 hat den Inhalt nicht gebrochen, sondern verschoben und am Rand gespiegelt (Text stand auf dem Kopf). Die Lage ist deshalb aus. Das Glas besteht aus Unschärfe, Sättigung, Farbton und Glanz und läuft über den Verlauf aus 0.17.10 aus. */ @media (max-width: 767px), (min-width: 1200px) { .kdm-header::before { display: none; } .kdm-header::after { -webkit-backdrop-filter: blur(14px) saturate(1.9) brightness(1.04); backdrop-filter: blur(14px) saturate(1.9) brightness(1.04); } } /* 0.17.12 · Desktop, fester Kopf: Die Menüpunkte links und rechts wechseln jeweils für sich zwischen Dunkel und Weiß, je nachdem was unter ihnen liegt (Klassen aus kdm.js, gleiche Messung wie beim Menü Icon mobil). */ @media (min-width: 1200px) { html.kdm-kopf-fix.kdm-kopf-dunkel body .kdm-header .kdm-kopf__nav .kdm-nav__link { color: var(--kdm-ink); } html.kdm-kopf-fix.kdm-nav-dunkel-l body .kdm-header .kdm-kopf__nav--links .kdm-nav__link, html.kdm-kopf-fix.kdm-nav-dunkel-r body .kdm-header .kdm-kopf__nav--rechts .kdm-nav__link { color: #fff; } } /* 0.17.13 · 3D Modell, Modal: Der Bedienhinweis steht unter der Bühne statt auf ihr, er lag sonst über dem Produkt. */ .kdm-modell3d__links { min-width: 0; } .kdm-modell3d__tipp { position: static; margin: 12px 4px 0; }