/* ========================================================================== DEHIB 2027 – Designsystem, Edition 2 (Dynamik, Haptik, Bewegung) Serifen-Display für Überschriften, serifenlose Schrift für Text und Bedienung. Navy als Grundton, Türkis als Aktionsfarbe, Petrol als Akzentschrift auf Hell. ========================================================================== */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --dh-navy: #06093D; --dh-navy-tief: #040628; --dh-navy-hover: #10166A; --dh-tuerkis: #00FFE0; --dh-tuerkis-tief: #00D9BF; --dh-petrol: #157A8C; --dh-petrol-tief: #0F5F6D; --dh-text: #2A3352; --dh-gedaempft: #566082; --dh-weiss: #FFFFFF; --dh-flaeche: #F2F4F6; --dh-tint: #E3F6F3; --dh-linie: rgba(6, 9, 61, 0.12); --dh-linie-stark: rgba(6, 9, 61, 0.28); --dh-linie-hell: rgba(255, 255, 255, 0.2); --dh-text-hell: rgba(255, 255, 255, 0.78); --dh-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif; --dh-sans: "Noto Sans", Ebrima, "Segoe UI", system-ui, -apple-system, sans-serif; --dh-breite: 1440px; --dh-rand: clamp(1.5rem, 0.8rem + 3vw, 3rem); --dh-sektion: clamp(5rem, 2.6rem + 7vw, 9.5rem); --dh-kopfhoehe: 5.5rem; --dh-spalt: clamp(1.25rem, 0.6rem + 2vw, 2.5rem); --dh-ease: cubic-bezier(0.25, 1, 0.5, 1); --dh-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dh-dauer: 0.35s; --dh-enthuellen: 1.1s; --dh-gr-display: clamp(3.5rem, 0.9rem + 9.4vw, 10.25rem); --dh-gr-h1: clamp(2.875rem, 1.5rem + 4.8vw, 6.25rem); --dh-gr-h2: clamp(2.125rem, 1.35rem + 2.75vw, 3.75rem); --dh-gr-statement: clamp(1.875rem, 1.15rem + 2.4vw, 3.375rem); --dh-gr-zahl: clamp(3rem, 1.9rem + 3.6vw, 5.25rem); --dh-gr-h3: clamp(1.25rem, 1.08rem + 0.55vw, 1.5rem); --dh-gr-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); --dh-gr-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); --dh-gr-text: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem); --dh-gr-klein: 0.875rem; /* Aliasnamen für die von WordPress kebab-geschriebenen Preset-Variablen */ --wp--preset--font-size--h1: var(--dh-gr-h1); --wp--preset--font-size--h2: var(--dh-gr-h2); --wp--preset--font-size--h3: var(--dh-gr-h3); --wp--preset--font-size--h4: var(--dh-gr-h4); } @media (max-width: 1099px) { :root { --dh-kopfhoehe: 4.5rem; } } /* -------------------------------------------------------------------------- Grundlagen -------------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--dh-kopfhoehe) + 1rem); -webkit-text-size-adjust: 100%; overflow-x: clip; } body.dh { margin: 0; background: var(--dh-weiss); color: var(--dh-text); font-family: var(--dh-sans); font-size: var(--dh-gr-text); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; } .dh *, .dh *::before, .dh *::after { box-sizing: border-box; } .dh img { border-radius: 0; max-width: 100%; height: auto; } .dh ::selection { background: var(--dh-tuerkis); color: var(--dh-navy); } .dh :where(h1, h2, h3, h4, h5, h6) { color: var(--dh-navy); margin: 0; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; } .dh :where(h1, h2) { font-family: var(--dh-serif); font-weight: 400; font-variation-settings: "opsz" 72; letter-spacing: -0.022em; } .dh :where(h1) { font-size: var(--dh-gr-h1); line-height: 1.02; letter-spacing: -0.03em; } .dh :where(h2) { font-size: var(--dh-gr-h2); line-height: 1.08; } .dh :where(h3) { font-family: var(--dh-sans); font-size: var(--dh-gr-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; } .dh :where(h4) { font-family: var(--dh-sans); font-size: var(--dh-gr-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.006em; } .dh :where(p, li, dd, td, blockquote) { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; } .dh :where(p) { margin: 0; } .dh :where(a) { color: var(--dh-navy); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dh-dauer) var(--dh-ease), text-decoration-color var(--dh-dauer) var(--dh-ease); } .dh :where(a:hover) { color: var(--dh-petrol); } .dh :where(strong, b) { font-weight: 650; color: inherit; } .dh :where(sup) { font-size: 0.6em; line-height: 0; } .dh :focus-visible { outline: 2px solid var(--dh-petrol); outline-offset: 3px; border-radius: 2px; } .dh-s--navy :focus-visible, .dh-hero :focus-visible, .dh-fuss :focus-visible, .dh-kopfbereich.ist-transparent :focus-visible { outline-color: var(--dh-tuerkis); } .dh-sprung { position: absolute; left: 1rem; top: -10rem; z-index: 1000; background: var(--dh-tuerkis); color: var(--dh-navy); padding: 0.75rem 1.25rem; border-radius: 999px; font-weight: 600; text-decoration: none; } .dh-sprung:focus { top: 1rem; } .dh-unsichtbar, .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Hauptinhalt: Abstand nur, wenn die Seite nicht mit einer dunklen Bühne beginnt */ .dh .wp-site-blocks { padding: 0; } .dh main#inhalt { margin: 0; } .dh main#inhalt > .wp-block-post-content { margin: 0; } .dh:not(.dh-hat-buehne) main#inhalt { padding-top: var(--dh-kopfhoehe); } .dh .wp-block-post-content > * { margin-block: 0; } .dh .wp-block-post-content > * + * { margin-top: 0; } .dh .is-layout-flow > * + *, .dh .is-layout-constrained > * + * { margin-block-start: 1.5rem; } /* -------------------------------------------------------------------------- Abschnitte -------------------------------------------------------------------------- */ .dh-s { position: relative; padding-block: var(--dh-sektion); padding-inline: var(--dh-rand) !important; margin: 0 !important; background: var(--dh-weiss); } .dh-s > .dh-s__innen, .dh-s__innen { width: 100%; max-width: var(--dh-breite) !important; margin-inline: auto !important; } .dh-s__innen > * { margin-block: 0; } .dh-s__innen > * + * { margin-top: clamp(2.5rem, 1.8rem + 2.2vw, 4.5rem) !important; } .dh-s--flaeche { background: var(--dh-flaeche); } .dh-s--tint { background: var(--dh-tint); } .dh-s--navy { background: var(--dh-navy); color: var(--dh-text-hell); } .dh-s--tuerkis { background: var(--dh-tuerkis); color: var(--dh-navy); } .dh-s--eng { padding-block: clamp(3rem, 2rem + 3vw, 5rem); } .dh-s--oben-null { padding-top: 0; } .dh-s--unten-null { padding-bottom: 0; } .dh-s--oben-klein { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .dh-s--linie > .dh-s__innen { border-top: 1px solid var(--dh-linie); padding-top: var(--dh-sektion); } .dh-s--navy :where(h1, h2, h3, h4) { color: var(--dh-weiss); } .dh-s--navy :where(a:not(.wp-block-button__link)) { color: var(--dh-weiss); } .dh-s--navy :where(a:not(.wp-block-button__link):hover) { color: var(--dh-weiss); text-decoration-color: var(--dh-tuerkis); } .dh-s--tuerkis :where(h1, h2, h3, h4, a:not(.wp-block-button__link)) { color: var(--dh-navy); } /* Zwei gleichfarbige weiße Abschnitte hintereinander: oberen Abstand zusammenlegen */ .dh-s:not(.dh-s--flaeche):not(.dh-s--tint):not(.dh-s--navy):not(.dh-s--tuerkis):not(.dh-hero):not(.wp-block-cover) + .dh-s:not(.dh-s--flaeche):not(.dh-s--tint):not(.dh-s--navy):not(.dh-s--tuerkis):not(.dh-hero):not(.wp-block-cover):not(.dh-s--linie) { padding-top: 0; } .dh-s--flaeche + .dh-s--flaeche, .dh-s--navy + .dh-s--navy { padding-top: 0; } /* -------------------------------------------------------------------------- Typografische Bausteine -------------------------------------------------------------------------- */ .dh-label { display: inline-flex !important; align-items: center; gap: 0.45rem; width: fit-content; max-width: 100%; padding: 0.32rem 0.85rem 0.36rem; border-radius: 999px; background: var(--dh-tint); color: var(--dh-petrol-tief); font-family: var(--dh-sans); font-size: 0.8125rem !important; font-weight: 600; line-height: 1.3 !important; letter-spacing: 0; } .dh-label::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex: none; } .dh-s--navy .dh-label, .dh-hero .dh-label, .dh-band .dh-label { background: transparent; color: var(--dh-weiss); box-shadow: inset 0 0 0 1px rgba(0, 255, 224, 0.55); } .dh-s--flaeche .dh-label { background: var(--dh-weiss); } .dh-s--tuerkis .dh-label { background: var(--dh-navy); color: var(--dh-weiss); } .dh-display { font-family: var(--dh-serif) !important; font-size: var(--dh-gr-display) !important; font-weight: 400 !important; line-height: 0.96 !important; letter-spacing: -0.035em !important; font-variation-settings: "opsz" 72; } .dh-lead { font-size: var(--dh-gr-lead) !important; line-height: 1.5 !important; color: var(--dh-text); max-width: 40em; } .dh-s--navy .dh-lead, .dh-hero .dh-lead { color: var(--dh-text-hell); } .dh-statement { font-family: var(--dh-serif); font-size: var(--dh-gr-statement) !important; font-weight: 400; line-height: 1.16 !important; letter-spacing: -0.018em; color: var(--dh-navy); font-variation-settings: "opsz" 60; max-width: 22em; } .dh-s--navy .dh-statement { color: var(--dh-weiss); } .dh-klein { font-size: var(--dh-gr-klein) !important; line-height: 1.55 !important; color: var(--dh-gedaempft); } .dh-s--navy .dh-klein, .dh-hero .dh-klein { color: rgba(255, 255, 255, 0.62); } .dh-quelle { font-size: 0.8125rem !important; line-height: 1.5 !important; color: var(--dh-gedaempft); } .dh-s--navy .dh-quelle { color: rgba(255, 255, 255, 0.6); } .dh-serif { font-family: var(--dh-serif) !important; font-weight: 400 !important; } /* Abschnittskopf */ .dh-kopf { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; max-width: 54rem; } .dh-kopf > * { margin: 0 !important; } .dh-kopf > .dh-label + * { margin-top: 1.5rem !important; } .dh-kopf > h2 + p, .dh-kopf > h2 + .dh-lead { margin-top: 1.5rem !important; } .dh-kopf > p { font-size: var(--dh-gr-lead); line-height: 1.5; max-width: 38em; } .dh-kopf > p + p { margin-top: 1rem !important; } .dh-kopf--zeile { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; max-width: none; } .dh-kopf__text { display: flex !important; flex-direction: column; align-items: flex-start; max-width: 54rem; } .dh-kopf__text > * { margin: 0 !important; } .dh-kopf__text > .dh-label + * { margin-top: 1.5rem !important; } .dh-kopf__text > h2 + p { margin-top: 1.5rem !important; font-size: var(--dh-gr-lead); line-height: 1.5; } .dh-kopf--modell { max-width: 46rem; } /* Pfeil-Verweise */ .dh-pfeil { margin: 0; } .dh-pfeil a, a.dh-pfeil { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 1rem; color: var(--dh-navy); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 0.2rem; transition: background-size 0.5s var(--dh-ease), color var(--dh-dauer); } .dh-pfeil a::after, a.dh-pfeil::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dh-linie-stark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 0.95rem no-repeat; transition: transform 0.45s var(--dh-ease), background-color 0.3s, box-shadow 0.3s; } .dh-pfeil a:hover, a.dh-pfeil:hover { background-size: 100% 1px; color: var(--dh-navy); } .dh-pfeil a:hover::after, a.dh-pfeil:hover::after { transform: translateX(0.25rem); background-color: var(--dh-tuerkis); box-shadow: inset 0 0 0 1px var(--dh-tuerkis); } .dh-s--navy .dh-pfeil a, .dh-hero .dh-pfeil a, .dh-band .dh-pfeil a { color: var(--dh-weiss); } .dh-s--navy .dh-pfeil a::after, .dh-hero .dh-pfeil a::after, .dh-band .dh-pfeil a::after { box-shadow: inset 0 0 0 1px var(--dh-linie-hell); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .dh-s--navy .dh-pfeil a:hover::after, .dh-hero .dh-pfeil a:hover::after, .dh-band .dh-pfeil a:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } /* Gesamte Karte klickbar, ohne verschachtelte Links */ .dh-klickbar { position: relative; } .dh-klickbar :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .dh-klickbar :is(h2, h3) a { text-decoration: none; color: inherit; } /* -------------------------------------------------------------------------- Schaltflächen -------------------------------------------------------------------------- */ .dh .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; } .dh .wp-block-buttons > .wp-block-button { margin: 0; } .dh .wp-block-button__link { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.125rem; padding: 0.8rem 1.15rem 0.8rem 1.6rem; border-radius: 999px !important; border: 0; background: var(--dh-navy); color: var(--dh-weiss); font-family: var(--dh-sans); font-size: 0.9688rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap; transition: color 0.4s var(--dh-ease), background-color 0.4s var(--dh-ease), box-shadow 0.4s var(--dh-ease), transform 0.5s var(--dh-ease); will-change: transform; } .dh .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--dh-tuerkis); transform: translateY(101%); transition: transform 0.55s var(--dh-ease); } .dh .wp-block-button__link::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 0.85rem no-repeat; transition: transform 0.5s var(--dh-ease), background-color 0.4s; } .dh .wp-block-button__link:hover, .dh .wp-block-button__link:focus-visible { color: var(--dh-navy); background: var(--dh-navy); } .dh .wp-block-button__link:hover::before, .dh .wp-block-button__link:focus-visible::before { transform: translateY(0); } .dh .wp-block-button__link:hover::after, .dh .wp-block-button__link:focus-visible::after { transform: translateX(0.2rem) rotate(-45deg); background-color: rgba(6, 9, 61, 0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .dh .is-style-outline .wp-block-button__link { background: transparent; color: var(--dh-navy); box-shadow: inset 0 0 0 1px var(--dh-linie-stark); } .dh .is-style-outline .wp-block-button__link::after { background-color: var(--dh-flaeche); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .dh .is-style-outline .wp-block-button__link:hover { box-shadow: inset 0 0 0 1px var(--dh-tuerkis); background: transparent; } /* Auf dunklem Grund: weiße Schaltfläche, Kontur hell */ :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .wp-block-button__link { background: var(--dh-weiss); color: var(--dh-navy); } :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .wp-block-button__link::after { background-color: var(--dh-flaeche); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .wp-block-button__link:hover { background: var(--dh-weiss); } :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .is-style-outline .wp-block-button__link { background: transparent; color: var(--dh-weiss); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); } :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .is-style-outline .wp-block-button__link::after { background-color: rgba(255, 255, 255, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } :is(.dh-s--navy, .dh-hero, .dh-band, .dh-fuss) .is-style-outline .wp-block-button__link:hover { color: var(--dh-navy); box-shadow: none; } /* Auf Türkis: Navy-Schaltfläche, Hover Weiß */ .dh-s--tuerkis .wp-block-button__link::before, .dh-kontakt-split__aktion .wp-block-button__link::before { background: var(--dh-weiss); } .dh-s--tuerkis .is-style-outline .wp-block-button__link { color: var(--dh-navy); box-shadow: inset 0 0 0 1px rgba(6, 9, 61, 0.5); } /* -------------------------------------------------------------------------- Kopfbereich: transparent über der Bühne, fest beim Scrollen, Megamenü -------------------------------------------------------------------------- */ .dh-kopfbereich { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: var(--dh-navy); background: var(--dh-weiss); box-shadow: 0 1px 0 var(--dh-linie); transition: background-color 0.45s var(--dh-ease), color 0.45s var(--dh-ease), box-shadow 0.45s var(--dh-ease), transform 0.6s var(--dh-ease); } .admin-bar .dh-kopfbereich { top: 32px; } @media (max-width: 782px) { .admin-bar .dh-kopfbereich { top: 46px; } } .dh-kopfbereich.ist-transparent { background: transparent; color: var(--dh-weiss); box-shadow: none; } .dh-kopfbereich.ist-transparent::before { content: ""; position: absolute; inset: 0 0 -3rem; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 40, 0.55), rgba(4, 6, 40, 0)); opacity: 1; transition: opacity 0.45s; } .dh-kopfbereich.ist-versteckt { transform: translateY(calc(-100% - 2px)); } .dh-kopfbereich.ist-mega { background: var(--dh-weiss) !important; color: var(--dh-navy) !important; box-shadow: 0 1px 0 var(--dh-linie) !important; transform: none !important; } .dh-kopfbereich.ist-mega::before { opacity: 0; } .dh-kopfzeile { padding-inline: var(--dh-rand) !important; margin: 0 !important; } .dh-kopfzeile__innen { max-width: var(--dh-breite) !important; margin-inline: auto !important; height: var(--dh-kopfhoehe); display: flex !important; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: nowrap !important; } .dh-kopfzeile__innen > * { margin: 0 !important; } /* Logo: Originaldateien. Navy fest, Weiß über der Bühne */ .dh-logo { position: relative; flex: none; width: clamp(150px, 11vw, 190px); } .dh-logo > * { margin: 0 !important; } .dh-logo figure, .dh-logo .wp-block-image { margin: 0 !important; } .dh-logo img { display: block; width: 100%; height: auto; transition: opacity 0.4s var(--dh-ease); } .dh-logo .dh-logo__bild--hell { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .dh-logo .dh-logo__bild--hell img { width: 100%; } .dh-kopfbereich.ist-transparent .dh-logo .dh-logo__bild--dunkel img { opacity: 0; } .dh-kopfbereich.ist-transparent .dh-logo .dh-logo__bild--hell { opacity: 1; } /* Hauptnavigation */ .dh-hauptnav { flex: 1 1 auto; justify-content: center; } .dh-hauptnav .wp-block-navigation__container { gap: clamp(0.25rem, 0.2rem + 0.8vw, 1.5rem) !important; } .dh-hauptnav .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; padding: 0.6rem 0.25rem !important; color: inherit !important; font-size: 0.9375rem; font-weight: 550; letter-spacing: 0; text-decoration: none; } .dh-hauptnav .wp-block-navigation-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--dh-ease); } .dh-hauptnav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after, .dh-hauptnav .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after, .dh-hauptnav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); transform-origin: left; } .dh-hauptnav .wp-block-navigation__submenu-icon { color: inherit; width: 0.7rem; height: 0.7rem; margin-left: 0.3rem; transition: transform 0.4s var(--dh-ease); } .dh-hauptnav .has-child:hover > .wp-block-navigation__submenu-icon, .dh-hauptnav .has-child:focus-within > .wp-block-navigation__submenu-icon { transform: rotate(180deg); } /* Megamenü als volle Breite */ @media (min-width: 1100px) { .dh-hauptnav .wp-block-navigation-item.has-child { position: static; } .dh-hauptnav .has-child > .wp-block-navigation__submenu-container { position: fixed !important; left: 0 !important; right: 0 !important; top: var(--dh-kopfhoehe) !important; width: 100% !important; min-width: 0 !important; height: auto !important; display: grid !important; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3.5fr)); grid-auto-flow: row; column-gap: clamp(2rem, 4vw, 5rem); row-gap: 0; align-content: start; padding: 2.75rem max(var(--dh-rand), calc((100vw - var(--dh-breite)) / 2)) 3.5rem !important; background: var(--dh-weiss) !important; color: var(--dh-navy) !important; border: 0 !important; border-top: 1px solid var(--dh-linie) !important; box-shadow: 0 30px 60px -30px rgba(6, 9, 61, 0.35); opacity: 0; visibility: hidden; transform: translateY(-0.75rem); transition: opacity 0.35s var(--dh-ease), transform 0.5s var(--dh-ease), visibility 0s linear 0.35s !important; } .admin-bar .dh-hauptnav .has-child > .wp-block-navigation__submenu-container { top: calc(var(--dh-kopfhoehe) + 32px) !important; } .dh-hauptnav .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, .dh-hauptnav .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container, .dh-hauptnav .has-child > .wp-block-navigation__submenu-container[aria-expanded="true"], .dh-hauptnav .has-child > button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { opacity: 1 !important; visibility: visible !important; transform: none; overflow: visible !important; transition: opacity 0.35s var(--dh-ease), transform 0.5s var(--dh-ease), visibility 0s !important; } .dh-hauptnav .has-child > .wp-block-navigation__submenu-container > .dh-mega__intro { grid-column: 1; grid-row: 1 / span 8; padding-right: clamp(1rem, 3vw, 4rem); border-right: 1px solid var(--dh-linie); margin-right: 0; } .dh-hauptnav .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:not(.dh-mega__intro) { border-bottom: 1px solid var(--dh-linie); } } .dh-hauptnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: grid !important; gap: 0.15rem; padding: 1rem 2.25rem 1rem 0 !important; color: var(--dh-navy) !important; text-decoration: none; position: relative; font-size: 1rem; font-weight: 600; } .dh-hauptnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.75rem; height: 1.75rem; margin-top: -0.875rem; border-radius: 50%; background: var(--dh-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 0.8rem no-repeat; opacity: 0; transform: translateX(-0.5rem); transition: opacity 0.35s var(--dh-ease), transform 0.45s var(--dh-ease), background-color 0.3s; } .dh-hauptnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after, .dh-hauptnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after { opacity: 1; transform: none; background-color: var(--dh-tuerkis); } .dh-hauptnav .wp-block-navigation-item__label { line-height: 1.35; } .dh-hauptnav .wp-block-navigation-item__description { display: block; font-size: 0.875rem; font-weight: 400; line-height: 1.45; color: var(--dh-gedaempft); } .dh-mega__intro { list-style: none; } .dh-mega__intro p { margin: 0; } .dh-mega__titel { font-family: var(--dh-serif); font-size: clamp(1.875rem, 1.3rem + 1.4vw, 2.625rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--dh-navy); } .dh-mega__text { margin-top: 1rem !important; font-size: 0.9375rem; line-height: 1.6; color: var(--dh-text); max-width: 26rem; } .dh-mega__link { margin-top: 1.5rem !important; } .dh-schleier { position: fixed; inset: 0; z-index: 90; background: rgba(4, 6, 40, 0.42); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--dh-ease), visibility 0s linear 0.4s; } .dh-schleier.ist-sichtbar { opacity: 1; visibility: visible; transition: opacity 0.4s var(--dh-ease); } /* Aktionen rechts */ .dh-kopf-aktionen { display: flex !important; align-items: center; gap: 0.75rem !important; flex: none; } .dh-kopf-aktionen > * { margin: 0 !important; } .dh-kopf-link a { color: inherit !important; font-size: 0.9375rem; font-weight: 550; text-decoration: none; padding: 0.5rem 0.4rem; } .dh-kopf-link a:hover { text-decoration: underline; text-underline-offset: 0.3em; } .dh-kopf-aktionen .wp-block-button__link { min-height: 2.75rem; padding: 0.55rem 0.7rem 0.55rem 1.2rem; font-size: 0.9063rem; } .dh-kopf-aktionen .wp-block-button__link::after { width: 1.5rem; height: 1.5rem; } .dh-kopfbereich.ist-transparent .dh-kopf-aktionen .wp-block-button__link { background: var(--dh-weiss); color: var(--dh-navy); } .dh-kopfbereich.ist-transparent .dh-kopf-aktionen .wp-block-button__link::after { background-color: var(--dh-flaeche); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } /* Suche im Kopf: runder Knopf, öffnet die Suchebene */ .dh-kopfsuche { margin: 0 !important; } .dh-kopfsuche .wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; background: none !important; } .dh-kopfsuche .wp-block-search__input { display: none; } .dh-kopfsuche .wp-block-search__button, .dh-rundknopf { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; display: inline-grid !important; place-items: center; cursor: pointer; background: transparent !important; color: inherit !important; border: 1px solid currentColor !important; border-color: color-mix(in srgb, currentColor 30%, transparent) !important; transition: background-color 0.3s var(--dh-ease), border-color 0.3s var(--dh-ease), color 0.3s; } .dh-kopfsuche .wp-block-search__button svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } .dh-kopfsuche .wp-block-search__button:hover, .dh-rundknopf:hover { background: var(--dh-tuerkis) !important; border-color: var(--dh-tuerkis) !important; color: var(--dh-navy) !important; } /* Mobile Navigation */ .dh-mobilnav { display: none !important; } @media (max-width: 1099px) { .dh-hauptnav, .dh-kopf-link { display: none !important; } .dh-mobilnav { display: flex !important; } .dh-kopf-aktionen .wp-block-buttons { display: none !important; } } @media (max-width: 480px) { .dh-kopfsuche { display: none !important; } } .dh-mobilnav .wp-block-navigation__responsive-container-open { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: inherit; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .dh-mobilnav .wp-block-navigation__responsive-container-open svg { width: 1.35rem; height: 1.35rem; } .dh-mobilnav .wp-block-navigation__responsive-container.is-menu-open { background: var(--dh-navy) !important; color: var(--dh-weiss) !important; padding: calc(var(--dh-kopfhoehe) + 1rem) var(--dh-rand) 3rem !important; animation: dh-menue-auf 0.6s var(--dh-ease) both; } @keyframes dh-menue-auf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .dh-mobilnav .wp-block-navigation__responsive-close { max-width: none; } .dh-mobilnav .wp-block-navigation__responsive-container-close { position: fixed; top: calc((var(--dh-kopfhoehe) - 2.75rem) / 2); right: var(--dh-rand); width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--dh-weiss); border: 1px solid rgba(255, 255, 255, 0.35); } .admin-bar .dh-mobilnav .wp-block-navigation__responsive-container-close { top: calc((var(--dh-kopfhoehe) - 2.75rem) / 2 + 46px); } .dh-mobilnav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); width: 100%; flex-direction: column; align-items: flex-start !important; padding: 0.4rem 0; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-family: var(--dh-serif); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); line-height: 1.2; color: var(--dh-weiss) !important; padding: 0.35rem 0 !important; text-decoration: none; opacity: 0; transform: translateY(1rem); animation: dh-eintrag 0.7s var(--dh-ease) forwards; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) > .wp-block-navigation-item__content { animation-delay: 0.06s; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) > .wp-block-navigation-item__content { animation-delay: 0.12s; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) > .wp-block-navigation-item__content { animation-delay: 0.18s; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) > .wp-block-navigation-item__content { animation-delay: 0.24s; } .dh-mobilnav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) > .wp-block-navigation-item__content { animation-delay: 0.3s; } @keyframes dh-eintrag { to { opacity: 1; transform: none; } } .dh-mobilnav .is-menu-open .wp-block-navigation__submenu-container { padding: 0.25rem 0 0.75rem !important; gap: 0 !important; } .dh-mobilnav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; color: var(--dh-text-hell) !important; padding: 0.35rem 0 !important; text-decoration: none; } .dh-mobilnav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: none; } .dh-mobilnav .is-menu-open .wp-block-navigation__submenu-icon { display: none; } .dh-mobilnav .is-menu-open .dh-nav-cta { border-bottom: 0 !important; margin-top: 1.5rem; } .dh-mobilnav .is-menu-open .dh-nav-cta > .wp-block-navigation-item__content { font-family: var(--dh-sans) !important; font-size: 1rem !important; font-weight: 600; background: var(--dh-tuerkis); color: var(--dh-navy) !important; border-radius: 999px; padding: 0.9rem 1.6rem !important; } /* Lesefortschritt */ .dh-fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110; pointer-events: none; } .admin-bar .dh-fortschritt { top: 32px; } @media (max-width: 782px) { .admin-bar .dh-fortschritt { top: 46px; } } .dh-fortschritt span { display: block; height: 100%; background: var(--dh-tuerkis); transform-origin: 0 50%; transform: scaleX(0); } /* Schwebende Abschnittsnavigation */ .dh-abschnitte { position: fixed; right: clamp(0.75rem, 1.5vw, 1.75rem); top: 50%; z-index: 80; display: none; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.45rem; background: var(--dh-weiss); border: 1px solid var(--dh-linie); border-radius: 999px; opacity: 0; transform: translate(0.75rem, -50%); transition: opacity 0.45s var(--dh-ease), transform 0.6s var(--dh-ease); } @media (min-width: 1240px) { .dh-abschnitte { display: flex; } } .dh-abschnitte.ist-sichtbar { opacity: 1; transform: translate(0, -50%); } .dh-abschnitte a { position: relative; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; text-decoration: none; } .dh-abschnitte a::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dh-linie-stark); transition: transform 0.4s var(--dh-ease), background-color 0.3s; } .dh-abschnitte a:hover::before { background: var(--dh-navy); transform: scale(1.25); } .dh-abschnitte a.ist-aktiv::before { background: var(--dh-petrol); transform: scale(1.45); box-shadow: 0 0 0 3px var(--dh-tint); } .dh-abschnitte a span { position: absolute; right: calc(100% + 0.75rem); top: 50%; white-space: nowrap; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--dh-navy); color: var(--dh-weiss); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; opacity: 0; transform: translate(0.5rem, -50%); pointer-events: none; transition: opacity 0.3s var(--dh-ease), transform 0.45s var(--dh-ease); } .dh-abschnitte a:hover span, .dh-abschnitte a:focus-visible span { opacity: 1; transform: translate(0, -50%); } /* Suchebene */ .dh-suche { position: fixed; inset: 0; z-index: 200; background: var(--dh-weiss); color: var(--dh-navy); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--dh-ease), visibility 0s linear 0.4s; } .dh-suche.ist-offen { opacity: 1; visibility: visible; transition: opacity 0.4s var(--dh-ease); } .dh-suche__innen { width: 100%; max-width: 64rem; margin: 0 auto; padding: clamp(5rem, 3rem + 6vw, 8rem) var(--dh-rand) 4rem; transform: translateY(1.5rem); transition: transform 0.7s var(--dh-ease); } .dh-suche.ist-offen .dh-suche__innen { transform: none; } .dh-suche__zu { position: absolute; top: 1.5rem; right: var(--dh-rand); } .dh-suche__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--dh-gedaempft); margin-bottom: 0.75rem; } .dh-suche__feld { width: 100%; border: 0; border-bottom: 1px solid var(--dh-navy); background: transparent; padding: 0.4rem 0 0.9rem; font-family: var(--dh-serif); font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); line-height: 1.1; color: var(--dh-navy); letter-spacing: -0.02em; border-radius: 0; } .dh-suche__feld::placeholder { color: rgba(6, 9, 61, 0.28); } .dh-suche__feld:focus { outline: none; border-bottom-color: var(--dh-petrol); box-shadow: 0 2px 0 var(--dh-tuerkis); } .dh-suche__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .dh-suche__filter button { border: 1px solid var(--dh-linie-stark); background: transparent; color: var(--dh-navy); border-radius: 999px; padding: 0.5rem 1rem; font: 600 0.875rem/1.2 var(--dh-sans); cursor: pointer; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .dh-suche__filter button:hover { border-color: var(--dh-navy); } .dh-suche__filter button[aria-pressed="true"] { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } .dh-suche__filter button .dh-suche__zahl { opacity: 0.6; margin-left: 0.3rem; font-weight: 500; } .dh-suche__status { margin-top: 2rem; font-size: 0.875rem; color: var(--dh-gedaempft); } .dh-suche__liste { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--dh-linie); } .dh-suche__liste li { border-bottom: 1px solid var(--dh-linie); opacity: 0; transform: translateY(0.6rem); animation: dh-eintrag 0.5s var(--dh-ease) forwards; } .dh-suche__liste a { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 2rem; gap: 0.25rem 1.5rem; align-items: start; padding: 1.25rem 0; text-decoration: none; color: var(--dh-navy); } .dh-suche__liste .dh-suche__art { font-size: 0.8125rem; font-weight: 600; color: var(--dh-petrol); padding-top: 0.25rem; } .dh-suche__liste .dh-suche__titel { font-family: var(--dh-serif); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; } .dh-suche__liste .dh-suche__auszug { grid-column: 2; font-size: 0.9375rem; line-height: 1.55; color: var(--dh-text); } .dh-suche__liste a::after { content: "→"; grid-column: 3; grid-row: 1; justify-self: end; font-size: 1.25rem; transition: transform 0.4s var(--dh-ease); } .dh-suche__liste a:hover .dh-suche__titel { text-decoration: underline; text-decoration-color: var(--dh-tuerkis); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .dh-suche__liste a:hover::after { transform: translateX(0.3rem); } .dh-suche__vorschlaege { margin-top: 2.5rem; } .dh-suche__vorschlaege p { font-size: 0.875rem; font-weight: 600; color: var(--dh-gedaempft); } .dh-suche__vorschlaege ul { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .dh-suche__vorschlaege button { border: 0; background: var(--dh-flaeche); color: var(--dh-navy); border-radius: 999px; padding: 0.55rem 1.05rem; font: 500 0.9375rem/1.2 var(--dh-sans); cursor: pointer; } .dh-suche__vorschlaege button:hover { background: var(--dh-tint); } @media (max-width: 640px) { .dh-suche__liste a { grid-template-columns: minmax(0, 1fr) 1.5rem; } .dh-suche__liste .dh-suche__art { grid-column: 1; } .dh-suche__liste .dh-suche__titel, .dh-suche__liste .dh-suche__auszug { grid-column: 1; } .dh-suche__liste a::after { grid-row: 2; grid-column: 2; } } body.dh-gesperrt { overflow: hidden; } /* -------------------------------------------------------------------------- Bühnen: Startseite, Seitenkopf mit Bild, heller Seitenkopf -------------------------------------------------------------------------- */ .dh .wp-block-cover.dh-hero, .dh .wp-block-cover.dh-band, .dh .wp-block-cover.dh-bildband { margin: 0 !important; padding: 0 var(--dh-rand) !important; overflow: clip; isolation: isolate; color: var(--dh-weiss); background: var(--dh-navy-tief); } .dh .wp-block-cover.dh-hero > .wp-block-cover__image-background, .dh .wp-block-cover.dh-band > .wp-block-cover__image-background { transform: translate3d(0, var(--dh-px, 0px), 0) scale(var(--dh-skala, 1.08)); will-change: transform; transition: none; } .dh .wp-block-cover.dh-hero > .wp-block-cover__inner-container, .dh .wp-block-cover.dh-band > .wp-block-cover__inner-container { position: static; width: 100%; max-width: var(--dh-breite); margin-inline: auto; color: inherit; z-index: auto; } .dh .wp-block-cover.dh-hero :where(h1, h2, h3, p, li) { color: var(--dh-weiss); } /* Startseite */ .dh-buehne { min-height: 100svh !important; align-items: stretch !important; } .dh-buehne::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 85% 15%, rgba(0, 255, 224, 0.10), transparent 55%), linear-gradient(180deg, rgba(4, 6, 40, 0.15) 0%, rgba(4, 6, 40, 0) 35%, rgba(4, 6, 40, 0.65) 100%); } .dh-buehne__feld { position: absolute !important; inset: 0; z-index: 1; margin: 0 !important; pointer-events: none; } .dh-buehne__feld canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 2.2s var(--dh-ease); } .dh-buehne__feld canvas.ist-bereit { opacity: 1; } .dh-buehne__inhalt { position: relative; z-index: 2; min-height: 100svh; margin: 0 !important; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 0; padding: calc(var(--dh-kopfhoehe) + 3rem) 0 clamp(3rem, 2rem + 4vw, 6rem); } .dh-buehne__inhalt > * { margin: 0 !important; } .dh-buehne__titel { font-family: var(--dh-serif) !important; font-size: var(--dh-gr-display) !important; font-weight: 400 !important; line-height: 0.94 !important; letter-spacing: -0.04em !important; font-variation-settings: "opsz" 72; color: var(--dh-weiss) !important; margin-top: 1.75rem !important; max-width: none !important; text-wrap: initial !important; } .dh-buehne__titel .dh-buehne__zeile { display: block; will-change: transform; transform: translate3d(calc(var(--dh-hero-p, 0) * -18vw), 0, 0); opacity: calc(1 - var(--dh-hero-p, 0) * 1.2); } .dh-buehne__titel .dh-buehne__zeile--zwei { padding-left: clamp(2rem, 14vw, 16rem); transform: translate3d(calc(var(--dh-hero-p, 0) * 22vw), 0, 0); } .dh-wechsel { position: relative; display: inline-block; white-space: nowrap; color: var(--dh-weiss); } .dh-wechsel::after { content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.02em; height: 0.06em; background: var(--dh-tuerkis); transform-origin: 0 50%; transform: scaleX(var(--dh-wechsel-p, 1)); } .dh-wechsel__wort { display: inline-block; } .dh-wechsel__wort.ist-raus { animation: dh-wort-raus 0.55s var(--dh-ease-io) forwards; } .dh-wechsel__wort.ist-rein { animation: dh-wort-rein 0.9s var(--dh-ease) both; } @keyframes dh-wort-raus { to { opacity: 0; transform: translateY(-0.28em); filter: blur(10px); } } @keyframes dh-wort-rein { from { opacity: 0; transform: translateY(0.32em); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } } .dh-wechsel__liste { display: none !important; } .dh-buehne__unten { display: grid !important; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; gap: 2rem clamp(2rem, 6vw, 8rem); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) !important; opacity: calc(1 - var(--dh-hero-p, 0) * 1.6); } .dh-buehne__unten > * { margin: 0 !important; } .dh-buehne__unten .dh-lead { color: var(--dh-text-hell) !important; max-width: 34rem; } .dh-buehne__unten .wp-block-buttons { justify-content: flex-end; } .dh-buehne__hinweis { position: absolute !important; z-index: 3; left: 50%; bottom: 1.5rem; transform: translateX(-50%); margin: 0 !important; font-size: 0.75rem !important; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.7) !important; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .dh-buehne__hinweis::after { content: ""; width: 1px; height: 2.75rem; background: linear-gradient(var(--dh-tuerkis), transparent); transform-origin: top; animation: dh-hinweis 2.4s var(--dh-ease-io) infinite; } @keyframes dh-hinweis { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 900px) { .dh-buehne__unten { grid-template-columns: 1fr; } .dh-buehne__unten .wp-block-buttons { justify-content: flex-start; } .dh-buehne__titel .dh-buehne__zeile--zwei { padding-left: 0; } .dh-buehne__hinweis { display: none !important; } } /* Seitenkopf mit Bild */ .dh-seitenkopf.wp-block-cover { min-height: clamp(34rem, 84svh, 58rem) !important; align-items: flex-end !important; } .dh-seitenkopf.wp-block-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 6, 40, 0.78) 0%, rgba(4, 6, 40, 0.45) 45%, rgba(4, 6, 40, 0.1) 100%), linear-gradient(0deg, rgba(4, 6, 40, 0.75) 0%, rgba(4, 6, 40, 0) 55%); } .dh-seitenkopf__innen { position: relative; z-index: 2; width: 100%; max-width: var(--dh-breite) !important; margin: 0 auto !important; padding: calc(var(--dh-kopfhoehe) + 2.5rem) 0 clamp(2.5rem, 1.6rem + 3vw, 4.5rem); display: flex !important; flex-direction: column; min-height: inherit; } .dh-seitenkopf__innen > * { margin: 0 !important; } .dh-seitenkopf__haupt { margin-top: auto !important; padding-top: clamp(4rem, 10vh, 9rem); max-width: 62rem; display: flex !important; flex-direction: column; align-items: flex-start; } .dh-seitenkopf__haupt > * { margin: 0 !important; } .dh-seitenkopf__haupt > h1 { margin-top: 1.5rem !important; color: var(--dh-weiss); max-width: 15em; } .dh-seitenkopf__haupt > .dh-lead { margin-top: 1.75rem !important; color: var(--dh-text-hell) !important; max-width: 38rem; } .dh-seitenkopf__haupt > .wp-block-buttons { margin-top: 2.25rem !important; } .dh-seitenkopf__haupt > .dh-klein { margin-top: 1.25rem !important; } .dh-seitenkopf .dh-marken { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important; padding-top: 1.25rem; border-top: 1px solid var(--dh-linie-hell); } /* Heller Seitenkopf (Rechtliches, Suche, Kontakt) */ .dh-seitenkopf--hell { background: var(--dh-weiss); padding-top: clamp(3.5rem, 2rem + 5vw, 7rem) !important; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem) !important; border-bottom: 1px solid var(--dh-linie); } .dh-seitenkopf--hell .dh-s__innen > * { margin: 0 !important; } .dh-seitenkopf--hell .dh-s__innen > .dh-label { margin-top: 2rem !important; } .dh-seitenkopf--hell .dh-s__innen > h1 { margin-top: 1.5rem !important; max-width: 16em; } .dh-seitenkopf--hell .dh-s__innen > .dh-lead { margin-top: 1.75rem !important; } .dh-seitenkopf--hell .dh-s__innen > .wp-block-buttons, .dh-seitenkopf--hell .dh-s__innen > .dh-suchfeld, .dh-seitenkopf--hell .dh-s__innen > .dh-seitenkopf__raster { margin-top: 2.25rem !important; } .dh-seitenkopf__raster { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: end; } .dh-seitenkopf__raster > * { margin: 0 !important; } @media (max-width: 900px) { .dh-seitenkopf__raster { grid-template-columns: 1fr; } } /* Brotkrumen */ .dh-pfad { margin: 0 !important; font-size: 0.8125rem; color: var(--dh-gedaempft); } .dh-pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; } .dh-pfad li { display: inline-flex; align-items: center; gap: 0.6rem; } .dh-pfad li::before, .dh-pfad li::after { content: none !important; } .dh-pfad li + li::before { content: "" !important; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: currentColor; opacity: 0.5; } .dh-pfad a { color: inherit; text-decoration: none; } .dh-pfad a:hover { text-decoration: underline; } .dh-pfad [aria-current] { color: var(--dh-navy); font-weight: 600; } .dh-hero .dh-pfad { color: rgba(255, 255, 255, 0.7); } .dh-hero .dh-pfad [aria-current] { color: var(--dh-weiss); } /* Sprungmarken als Chips */ .dh-marken { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.5rem !important; } .dh-marken > * { margin: 0 !important; } .dh-marken__titel { font-size: 0.8125rem; font-weight: 600; margin-right: 0.5rem; color: var(--dh-gedaempft); } .dh-marken a { display: inline-block; padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid var(--dh-linie-stark); color: var(--dh-navy); font-size: 0.875rem; font-weight: 550; text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .dh-marken a:hover { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } .dh-hero .dh-marken__titel { color: rgba(255, 255, 255, 0.65); } .dh-hero .dh-marken a { color: var(--dh-weiss); border-color: rgba(255, 255, 255, 0.35); } .dh-hero .dh-marken a:hover { background: var(--dh-weiss); color: var(--dh-navy); border-color: var(--dh-weiss); } /* Eckwerte nach dem Seitenkopf */ .dh-eckwerte { padding-block: clamp(3rem, 2rem + 3vw, 5.5rem) !important; border-bottom: 1px solid var(--dh-linie); } .dh-fakten { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); align-items: start; } .dh-fakten > * { margin: 0 !important; } .dh-fakten__titel { font-family: var(--dh-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; color: var(--dh-navy); letter-spacing: -0.015em; } .dh-fakten__liste { display: grid !important; grid-template-columns: repeat(var(--dh-n, 3), minmax(0, 1fr)); gap: 1.5rem var(--dh-spalt); } .dh-fakten__liste > * { margin: 0 !important; } .dh-fakt { border-top: 1px solid var(--dh-linie-stark); padding-top: 1.25rem; } .dh-fakt > * { margin: 0 !important; } .dh-fakt__wert { font-family: var(--dh-serif); font-size: var(--dh-gr-zahl) !important; font-weight: 400; line-height: 1 !important; letter-spacing: -0.03em; color: var(--dh-petrol); font-variation-settings: "opsz" 72; white-space: nowrap; } .dh-fakt__einheit { font-size: 0.42em; letter-spacing: -0.01em; margin-left: 0.18em; color: var(--dh-petrol); } .dh-fakt__text { margin-top: 0.85rem !important; font-size: 0.9375rem; line-height: 1.5; color: var(--dh-text); max-width: 22rem; } .dh-fakten > .dh-quelle { grid-column: 2; } @media (max-width: 900px) { .dh-fakten { grid-template-columns: 1fr; } .dh-fakten > .dh-quelle { grid-column: 1; } .dh-fakten__liste { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Zählwerk (Ziffern rollen in Position) -------------------------------------------------------------------------- */ .dh-zaehler { display: inline-flex; align-items: baseline; white-space: nowrap; } .dh-zaehler__ziffer { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; } .dh-zaehler__band { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.9s var(--dh-ease); transition-delay: var(--dh-v, 0s); } .dh-zaehler__band span { display: block; height: 1em; line-height: 1; } .dh-zaehler__zeichen { display: inline-block; } /* -------------------------------------------------------------------------- Bildband mit geteilter Aussage -------------------------------------------------------------------------- */ .dh-band.wp-block-cover { min-height: clamp(36rem, 92svh, 60rem) !important; align-items: stretch !important; } .dh-band.wp-block-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 40, 0.55) 0%, rgba(4, 6, 40, 0.1) 40%, rgba(4, 6, 40, 0.1) 60%, rgba(4, 6, 40, 0.6) 100%); } .dh-band__innen { position: relative; z-index: 2; width: 100%; max-width: var(--dh-breite) !important; margin: 0 auto !important; padding: clamp(4rem, 3rem + 4vw, 7rem) 0; min-height: inherit; display: flex !important; flex-direction: column; justify-content: space-between; gap: 3rem; } .dh-band__innen > * { margin: 0 !important; } .dh-band__oben, .dh-band__unten { font-family: var(--dh-serif) !important; font-size: clamp(2.25rem, 1.2rem + 3.8vw, 5rem) !important; font-weight: 400 !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; color: var(--dh-weiss) !important; font-variation-settings: "opsz" 72; } .dh-band__oben { max-width: 12em; } .dh-band__unten { align-self: flex-end; text-align: right; max-width: 13em; } .dh-band__mitte { display: flex !important; flex-direction: column; align-items: flex-start; gap: 1rem; } .dh-band__mitte > * { margin: 0 !important; } .dh-band__mitte p { color: var(--dh-text-hell) !important; max-width: 30rem; } @media (max-width: 760px) { .dh-band__unten { align-self: flex-start; text-align: left; } } /* Reines Bildband (ohne Text), mit Parallaxe */ .dh-bildband.wp-block-cover { min-height: clamp(22rem, 70svh, 44rem) !important; padding: 0 !important; } /* -------------------------------------------------------------------------- Aussage mit Kennzahlen -------------------------------------------------------------------------- */ .dh-aussage { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(3rem, 8vw, 9rem); align-items: start; } .dh-aussage > * { margin: 0 !important; } .dh-aussage__text { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0; position: sticky; top: calc(var(--dh-kopfhoehe) + 3rem); } .dh-aussage__text > * { margin: 0 !important; } .dh-aussage__text > * + * { margin-top: 1.75rem !important; } .dh-aussage__text .dh-statement { max-width: 15em; } .dh-kennzahlen { display: flex !important; flex-direction: column; } .dh-kennzahlen > * { margin: 0 !important; } .dh-kennzahl { padding: 0 0 1.75rem; border-bottom: 1px solid var(--dh-linie); } .dh-kennzahl + .dh-kennzahl { padding-top: 1.75rem; } .dh-kennzahl > * { margin: 0 !important; } .dh-kennzahl__wert { font-family: var(--dh-serif); font-size: var(--dh-gr-zahl) !important; line-height: 1 !important; letter-spacing: -0.035em; color: var(--dh-petrol); font-variation-settings: "opsz" 72; white-space: nowrap; } .dh-kennzahl__wert sup, .dh-kennzahl__einheit { font-size: 0.5em; vertical-align: 0.65em; letter-spacing: -0.01em; margin-left: 0.08em; } .dh-kennzahl__text { margin-top: 0.75rem !important; font-size: 0.9375rem; line-height: 1.5; color: var(--dh-text); } .dh-kennzahl__text strong { display: block; color: var(--dh-navy); font-weight: 600; } .dh-s--navy .dh-kennzahl { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-kennzahl__wert { color: var(--dh-weiss); } .dh-s--navy .dh-kennzahl__text { color: var(--dh-text-hell); } .dh-s--navy .dh-kennzahl__text strong { color: var(--dh-weiss); } @media (max-width: 900px) { .dh-aussage { grid-template-columns: 1fr; } .dh-aussage__text { position: static; } } /* Laufschrift, die sich beim Scrollen füllt */ .dh-lauftext { font-family: var(--dh-serif) !important; font-size: clamp(2rem, 1.1rem + 3vw, 4.25rem) !important; line-height: 1.12 !important; letter-spacing: -0.025em !important; color: var(--dh-navy); font-variation-settings: "opsz" 72; max-width: 22em; } .dh-s--navy .dh-lauftext { color: var(--dh-weiss); } .dh-js .dh-lauftext .dh-wort { opacity: calc(0.16 + var(--dh-w, 0) * 0.84); transition: opacity 0.25s linear; } /* -------------------------------------------------------------------------- Bildkarten -------------------------------------------------------------------------- */ .dh-karten { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 2rem + 2vw, 4rem) var(--dh-spalt); } .dh-karten > * { margin: 0 !important; } .dh-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dh-karte { display: flex !important; flex-direction: column; } .dh-karte > * { margin: 0 !important; } .dh-karte__bild, .dh-karte .wp-block-image { overflow: hidden; aspect-ratio: 4 / 3; background: var(--dh-flaeche); } .dh-karte__bild img, .dh-karte .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 1.2s var(--dh-ease); } .dh-karte:hover .dh-karte__bild img, .dh-karte:hover .wp-block-image img { transform: scale(1.06); } .dh-karte > h3 { margin-top: 1.5rem !important; font-size: 1.375rem; } .dh-karte > h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--dh-ease); } .dh-karte:hover > h3 a { background-size: 100% 1px; } .dh-karte > h3 + p { margin-top: 0.6rem !important; color: var(--dh-text); font-size: 0.9688rem; line-height: 1.6; } .dh-karte__fakt { margin-top: auto !important; padding-top: 1.5rem; } .dh-karte__fakt > * { margin: 0 !important; } .dh-karte__fakt::before { content: ""; display: block; height: 1px; background: var(--dh-linie-stark); margin-bottom: 1.5rem; } .dh-karte__wert { font-family: var(--dh-serif); font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem) !important; line-height: 1 !important; letter-spacing: -0.03em; color: var(--dh-navy); } .dh-karte__wert span { font-size: 0.45em; margin-left: 0.15em; letter-spacing: -0.01em; } .dh-karte__fakttext { margin-top: 0.6rem !important; font-size: 0.875rem; color: var(--dh-gedaempft); line-height: 1.5; } @media (max-width: 960px) { .dh-karten { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .dh-karten, .dh-karten--2 { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Horizontaler Kreislauf (gepinnt) -------------------------------------------------------------------------- */ .dh-quer { overflow: clip; } .dh-quer__spur { display: flex !important; gap: var(--dh-spalt); margin-top: clamp(3rem, 2rem + 3vw, 5rem) !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; } .dh-quer__spur::-webkit-scrollbar { display: none; } .dh-quer__spur > * { margin: 0 !important; } .dh-quer__tafel { flex: 0 0 clamp(17rem, 30vw, 27rem); scroll-snap-align: start; display: flex !important; flex-direction: column; border-top: 1px solid var(--dh-linie-hell); padding-top: 1.75rem; position: relative; } .dh-quer__tafel::before { content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--dh-tuerkis); transform-origin: 0 50%; transform: scaleX(var(--dh-t, 0)); } .dh-quer__tafel > * { margin: 0 !important; } .dh-quer__nr { font-family: var(--dh-serif); font-size: clamp(4.5rem, 3rem + 5vw, 8.5rem) !important; line-height: 0.9 !important; letter-spacing: -0.04em; color: transparent !important; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.45); transition: color 0.6s var(--dh-ease), -webkit-text-stroke-color 0.6s; } .dh-quer__tafel.ist-aktiv .dh-quer__nr { color: var(--dh-weiss) !important; -webkit-text-stroke-color: var(--dh-weiss); } .dh-quer__tafel h3 { margin-top: 2rem !important; font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--dh-weiss); } .dh-quer__tafel p:not(.dh-quer__nr) { margin-top: 1rem !important; color: var(--dh-text-hell); max-width: 24rem; } /* Gepinnte Variante (per Skript) */ .dh-quer.ist-gepinnt { height: var(--dh-quer-hoehe, auto); padding-block: 0 !important; } .dh-quer.ist-gepinnt > .dh-s__innen { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--dh-kopfhoehe) + 2rem) 3rem; } .dh-quer.ist-gepinnt .dh-quer__spur { overflow: visible; scroll-snap-type: none; transform: translate3d(var(--dh-quer-x, 0px), 0, 0); will-change: transform; } .dh-quer__leiste { position: relative; height: 1px; background: var(--dh-linie-hell); margin-top: 2.5rem !important; } .dh-quer__leiste span { position: absolute; inset: 0; background: var(--dh-tuerkis); transform-origin: 0 50%; transform: scaleX(var(--dh-quer-p, 0)); } /* -------------------------------------------------------------------------- Reiter mit automatischem Wechsel -------------------------------------------------------------------------- */ .dh-reiter__leiste { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--dh-linie-stark); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .dh-reiter__leiste::-webkit-scrollbar { display: none; } .dh-reiter__knopf { position: relative; flex: none; border: 0; background: none; cursor: pointer; padding: 0 2rem 1.1rem 0; margin-right: 0.5rem; text-align: left; font: 600 1.0625rem/1.3 var(--dh-sans); color: rgba(6, 9, 61, 0.55); transition: color 0.3s; } .dh-reiter__knopf:hover, .dh-reiter__knopf[aria-selected="true"] { color: var(--dh-navy); } .dh-reiter__knopf::after { content: ""; position: absolute; left: 0; right: 1.5rem; bottom: -1px; height: 2px; background: var(--dh-navy); transform-origin: 0 50%; transform: scaleX(0); } .dh-reiter__knopf[aria-selected="true"]::after { transform: scaleX(var(--dh-reiter-p, 1)); } .dh-reiter__tafeln { display: grid; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; } .dh-reiter__tafel { grid-area: 1 / 1; display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: center; } .dh-reiter__tafel > * { margin: 0 !important; } .dh-js .dh-reiter__tafel[hidden] { display: none !important; } .dh-reiter__tafel.ist-neu .dh-reiter__text > * { animation: dh-reiter-text 0.9s var(--dh-ease) both; } .dh-reiter__tafel.ist-neu .dh-reiter__text > *:nth-child(2) { animation-delay: 0.06s; } .dh-reiter__tafel.ist-neu .dh-reiter__text > *:nth-child(3) { animation-delay: 0.12s; } .dh-reiter__tafel.ist-neu .dh-reiter__text > *:nth-child(n+4) { animation-delay: 0.18s; } .dh-reiter__tafel.ist-neu .dh-reiter__bild img { animation: dh-reiter-bild 1.3s var(--dh-ease) both; } @keyframes dh-reiter-text { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } @keyframes dh-reiter-bild { from { opacity: 0; transform: scale(1.08); clip-path: inset(0 0 0 18%); } to { opacity: 1; transform: none; clip-path: inset(0); } } .dh-reiter__text { display: flex !important; flex-direction: column; align-items: flex-start; } .dh-reiter__text > * { margin: 0 !important; } .dh-reiter__text > h3 { margin-top: 1.25rem !important; font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3rem); line-height: 1.08; letter-spacing: -0.022em; } .dh-reiter__text > p { margin-top: 1.25rem !important; font-size: 1.0625rem; } .dh-reiter__text > .dh-liste { margin-top: 1.5rem !important; width: 100%; } .dh-reiter__text > .wp-block-buttons { margin-top: 2rem !important; } .dh-reiter__bild, .dh-reiter__tafel .wp-block-image { overflow: hidden; aspect-ratio: 4 / 3; background: var(--dh-flaeche); } .dh-reiter__bild img { width: 100%; height: 100%; object-fit: cover; display: block; } .dh-js .dh-reiter > .dh-s__innen > .dh-reiter__tafeln > .dh-reiter__tafel > .dh-reiter__text > .dh-reiter__titel-quelle { display: none; } @media (max-width: 900px) { .dh-reiter__tafel { grid-template-columns: 1fr; } .dh-reiter__bild, .dh-reiter__tafel .wp-block-image { order: -1; } } /* Ohne Skript: Tafeln untereinander */ html:not(.dh-js) .dh-reiter__tafel + .dh-reiter__tafel { margin-top: 4rem !important; } /* -------------------------------------------------------------------------- Karussell -------------------------------------------------------------------------- */ .dh-karussell { position: relative; } .dh-karussell__spur, .dh-karussell .wp-block-post-template { display: flex !important; gap: var(--dh-spalt) !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 0 !important; padding: 0 !important; list-style: none; cursor: grab; margin-right: calc(-1 * var(--dh-rand)) !important; padding-right: var(--dh-rand) !important; } .dh-karussell__spur::-webkit-scrollbar, .dh-karussell .wp-block-post-template::-webkit-scrollbar { display: none; } .dh-karussell.ist-ziehen .dh-karussell__spur, .dh-karussell.ist-ziehen .wp-block-post-template { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .dh-karussell.ist-ziehen a { pointer-events: none; } .dh-karussell__spur > *, .dh-karussell .wp-block-post-template > li { flex: 0 0 clamp(17.5rem, 27vw, 25rem); scroll-snap-align: start; margin: 0 !important; } .dh-karussell__steuerung { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.5rem; } .dh-karussell__balken { flex: 1; height: 1px; background: var(--dh-linie-stark); position: relative; overflow: hidden; } .dh-karussell__balken span { position: absolute; top: 0; bottom: 0; left: 0; width: var(--dh-k-breite, 30%); background: var(--dh-navy); transform: translateX(var(--dh-k-x, 0%)); transition: transform 0.3s var(--dh-ease); } .dh-karussell__knopf { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--dh-linie-stark); background: transparent; color: var(--dh-navy); cursor: pointer; display: grid; place-items: center; transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s; } .dh-karussell__knopf:hover:not(:disabled) { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } .dh-karussell__knopf:disabled { opacity: 0.35; cursor: default; } .dh-karussell__knopf svg { width: 1.1rem; height: 1.1rem; } .dh-s--navy .dh-karussell__balken { background: var(--dh-linie-hell); } .dh-s--navy .dh-karussell__balken span { background: var(--dh-tuerkis); } .dh-s--navy .dh-karussell__knopf { border-color: var(--dh-linie-hell); color: var(--dh-weiss); } .dh-s--navy .dh-karussell__knopf:hover:not(:disabled) { background: var(--dh-tuerkis); color: var(--dh-navy); border-color: var(--dh-tuerkis); } /* Menschen */ .dh-mensch { display: flex !important; flex-direction: column; position: relative; } .dh-mensch > * { margin: 0 !important; } .dh-mensch .wp-block-image, .dh-mensch__bild { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dh-flaeche); } .dh-mensch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; transition: transform 1.2s var(--dh-ease); } .dh-mensch:hover img { transform: scale(1.05); } .dh-mensch h3 { margin-top: 1.25rem !important; font-family: var(--dh-serif); font-weight: 400; font-size: 1.625rem; letter-spacing: -0.015em; line-height: 1.15; } .dh-mensch h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--dh-ease); } .dh-mensch:hover h3 a { background-size: 100% 1px; } .dh-mensch__rolle { margin-top: 0.4rem !important; font-size: 0.875rem; color: var(--dh-gedaempft); line-height: 1.45; } /* -------------------------------------------------------------------------- Aktionsband (Türkis) und Kontakt-Abschluss -------------------------------------------------------------------------- */ .dh-aktion { display: grid !important; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 2rem 4rem; } .dh-aktion > * { margin: 0 !important; } .dh-aktion h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); max-width: 16em; } .dh-aktion p { margin-top: 1rem !important; max-width: 36rem; font-size: 1.0625rem; color: var(--dh-navy); } .dh-aktion__text > * { margin: 0 !important; } .dh-aktion__text > p { margin-top: 1rem !important; } .dh-aktion .wp-block-buttons { justify-content: flex-end; } @media (max-width: 900px) { .dh-aktion { grid-template-columns: 1fr; } .dh-aktion .wp-block-buttons { justify-content: flex-start; } } .dh-kontakt-split { display: grid !important; grid-template-columns: 1fr 1fr; min-height: clamp(30rem, 64svh, 42rem); padding: 0 !important; margin: 0 !important; } .dh-kontakt-split > * { margin: 0 !important; } .dh-kontakt-split__aktion { background: var(--dh-tuerkis); color: var(--dh-navy); padding: clamp(3rem, 2rem + 4vw, 6.5rem) var(--dh-rand) clamp(3rem, 2rem + 4vw, 6rem) max(var(--dh-rand), calc((100vw - var(--dh-breite)) / 2)); display: flex !important; flex-direction: column; justify-content: space-between; gap: 2.5rem; } .dh-kontakt-split__aktion > * { margin: 0 !important; } .dh-kontakt-split__aktion h2 { color: var(--dh-navy); font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -0.03em; max-width: 10em; } .dh-kontakt-split__aktion .dh-label { background: var(--dh-navy); color: var(--dh-weiss); } .dh-kontakt-split__aktion p { color: var(--dh-navy); max-width: 30rem; } .dh-kontakt-split__oben > * { margin: 0 !important; } .dh-kontakt-split__oben > * + * { margin-top: 1.5rem !important; } .dh-kontakt-split__daten { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-top: 1px solid rgba(6, 9, 61, 0.25); padding-top: 1.5rem; } .dh-kontakt-split__daten > * { margin: 0 !important; font-size: 0.9375rem; line-height: 1.6; } .dh-kontakt-split__daten a { color: var(--dh-navy); } .dh-kontakt-split__bild, .dh-kontakt-split .wp-block-image { position: relative; overflow: hidden; min-height: 22rem; } .dh-kontakt-split__bild img, .dh-kontakt-split .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .dh-kontakt-split { grid-template-columns: 1fr; } .dh-kontakt-split__daten { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Einblendungen -------------------------------------------------------------------------- */ .dh-js .dh-r:not(.ist-sichtbar) { opacity: 0; transform: translate3d(0, 2rem, 0); animation: dh-notfall 0.01s linear 4s forwards; } .dh-js .dh-r.ist-sichtbar { opacity: 1; transform: none; transition: opacity 1s var(--dh-ease) var(--dh-v, 0s), transform 1.2s var(--dh-ease) var(--dh-v, 0s); } @keyframes dh-notfall { to { opacity: 1; transform: none; } } .dh-js .dh-bild-auf:not(.ist-sichtbar) { clip-path: inset(0 0 100% 0); animation: dh-notfall-bild 0.01s linear 4s forwards; } .dh-js .dh-bild-auf:not(.ist-sichtbar) img { transform: scale(1.18); } .dh-js .dh-bild-auf.ist-sichtbar { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--dh-ease) var(--dh-v, 0s); } .dh-js .dh-bild-auf.ist-sichtbar img { transition: transform 2s var(--dh-ease) var(--dh-v, 0s); } @keyframes dh-notfall-bild { to { clip-path: inset(0); } } .dh-js .dh-zeilen-auf .dh-zeile-maske { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; } .dh-js .dh-zeilen-auf .dh-zeile-maske > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--dh-ease); transition-delay: var(--dh-v, 0s); } .dh-js .dh-zeilen-auf.ist-sichtbar .dh-zeile-maske > span { transform: none; } @media (prefers-reduced-motion: reduce) { .dh *, .dh *::before, .dh *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .dh-js .dh-r:not(.ist-sichtbar), .dh-js .dh-bild-auf:not(.ist-sichtbar) { opacity: 1; transform: none; clip-path: none; } .dh-js .dh-bild-auf:not(.ist-sichtbar) img { transform: none; } .dh-buehne__titel .dh-buehne__zeile, .dh-buehne__unten { transform: none !important; opacity: 1 !important; } .dh-buehne__hinweis::after { animation: none; } } /* -------------------------------------------------------------------------- Inhaltsbausteine -------------------------------------------------------------------------- */ /* Selbstverständnis */ .dh-selbst__raster { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 5vw, 6rem); align-items: start; } .dh-selbst__raster > * { margin: 0 !important; } .dh-selbst__text > * { margin: 0 !important; } .dh-selbst__text > * + * { margin-top: 2.25rem !important; } @media (max-width: 900px) { .dh-selbst__raster { grid-template-columns: 1fr; } } /* Punkteraster */ .dh-raster { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--dh-spalt) !important; } .dh-raster > * { margin: 0 !important; } .dh-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dh-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .dh-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .dh-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .dh-raster, .dh-raster--2, .dh-raster--4 { grid-template-columns: 1fr; } } .dh-punkt { border-top: 1px solid var(--dh-linie-stark); padding-top: 1.5rem; display: flex !important; flex-direction: column; gap: 0.75rem; position: relative; } .dh-punkt::before { content: ""; position: absolute; top: -1px; left: 0; width: 3rem; height: 1px; background: var(--dh-navy); transition: width 0.8s var(--dh-ease); } .dh-punkt:hover::before { width: 100%; } .dh-punkt > * { margin: 0 !important; } .dh-punkt h3 { font-size: 1.1875rem; line-height: 1.3; } .dh-punkt h4 { font-size: 1.0625rem; } .dh-punkt p { font-size: 0.9688rem; line-height: 1.6; color: var(--dh-text); } .dh-punkt .dh-liste { margin-top: 0.5rem !important; } .dh-s--navy .dh-punkt { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-punkt::before { background: var(--dh-tuerkis); } .dh-s--navy .dh-punkt p { color: var(--dh-text-hell); } /* Schritte (vertikal und horizontal) */ .dh-kreislauf { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--dh-spalt); counter-reset: dh-schritt; } .dh-kreislauf--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dh-kreislauf--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dh-kreislauf > * { margin: 0 !important; } .dh-schritt { counter-increment: dh-schritt; border-top: 1px solid var(--dh-linie-stark); padding-top: 1.25rem; display: flex !important; flex-direction: column; gap: 0.75rem; } .dh-schritt::before { content: counter(dh-schritt, decimal-leading-zero); font-family: var(--dh-serif); font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--dh-petrol); margin-bottom: 0.75rem; } .dh-schritt > * { margin: 0 !important; } .dh-schritt h3 { font-size: 1.1875rem; line-height: 1.3; } .dh-schritt p { font-size: 0.9375rem; line-height: 1.6; color: var(--dh-text); } .dh-s--navy .dh-schritt { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-schritt::before { color: var(--dh-weiss); } .dh-s--navy .dh-schritt p { color: var(--dh-text-hell); } @media (max-width: 1100px) { .dh-kreislauf, .dh-kreislauf--4, .dh-kreislauf--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .dh-kreislauf, .dh-kreislauf--4, .dh-kreislauf--5 { grid-template-columns: 1fr; gap: 2rem; } } /* Register (Zeilen mit Pfeil) */ .dh-register { border-top: 1px solid var(--dh-linie-stark); } .dh-register > * { margin: 0 !important; } .dh-zeile { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 3.25rem; align-items: center; gap: 1rem 2rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) 0; border-bottom: 1px solid var(--dh-linie); position: relative; transition: padding 0.6s var(--dh-ease); } .dh-zeile > * { margin: 0 !important; } .dh-zeile h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.022em; transition: transform 0.6s var(--dh-ease); } .dh-zeile p:not(.dh-zeile__pfeil) { font-size: 0.9688rem; line-height: 1.6; color: var(--dh-text); max-width: 34rem; } .dh-zeile .dh-zeile__pfeil { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 0; box-shadow: inset 0 0 0 1px var(--dh-linie-stark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.1rem no-repeat; transition: background-color 0.4s var(--dh-ease), box-shadow 0.4s, transform 0.6s var(--dh-ease); } .dh-zeile::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dh-navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--dh-ease); } .dh-zeile:hover::before { transform: scaleX(1); } .dh-zeile:hover h3 { transform: translateX(0.75rem); } .dh-zeile:hover .dh-zeile__pfeil { background-color: var(--dh-tuerkis); box-shadow: inset 0 0 0 1px var(--dh-tuerkis); transform: rotate(-45deg); } .dh-s--navy .dh-register { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-zeile { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-zeile::before { background: var(--dh-tuerkis); } .dh-s--navy .dh-zeile p:not(.dh-zeile__pfeil) { color: var(--dh-text-hell); } @media (max-width: 760px) { .dh-zeile { grid-template-columns: minmax(0, 1fr) 2.75rem; } .dh-zeile p:not(.dh-zeile__pfeil) { grid-column: 1 / -1; grid-row: 2; } .dh-zeile .dh-zeile__pfeil { grid-row: 1; grid-column: 2; width: 2.75rem; height: 2.75rem; } } /* Service-Einstieg */ .dh-hilfe { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--dh-spalt) !important; } .dh-hilfe > * { margin: 0 !important; } .dh-hilfe__haupt { grid-column: span 6; min-height: clamp(20rem, 15rem + 12vw, 28rem); padding: clamp(1.75rem, 1.2rem + 2vw, 3.25rem); display: flex !important; flex-direction: column; justify-content: space-between; gap: 2rem; position: relative; overflow: hidden; } .dh-hilfe__haupt > * { margin: 0 !important; position: relative; z-index: 1; } .dh-hilfe__haupt--navy { background: var(--dh-navy); color: var(--dh-text-hell); } .dh-hilfe__haupt--navy :where(h3, strong) { color: var(--dh-weiss); } .dh-hilfe__haupt--navy .dh-label { background: transparent; color: var(--dh-weiss); box-shadow: inset 0 0 0 1px rgba(0, 255, 224, 0.55); } .dh-hilfe__haupt--navy .dh-pfeil a { color: var(--dh-weiss); } .dh-hilfe__haupt--navy .dh-pfeil a::after { box-shadow: inset 0 0 0 1px var(--dh-linie-hell); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .dh-hilfe__haupt--navy .dh-pfeil a:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .dh-hilfe__haupt--tint { background: var(--dh-tint); } .dh-hilfe__haupt::after { content: ""; position: absolute; right: -10%; bottom: -35%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 255, 224, 0.16), transparent); transform: translate3d(0, 0, 0) scale(0.8); transition: transform 1.2s var(--dh-ease); pointer-events: none; } .dh-hilfe__haupt--tint::after { background: radial-gradient(closest-side, rgba(21, 122, 140, 0.16), transparent); } .dh-hilfe__haupt:hover::after { transform: scale(1.15); } .dh-hilfe__oben > * { margin: 0 !important; } .dh-hilfe__oben > * + * { margin-top: 1.5rem !important; } .dh-hilfe__haupt h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem) !important; line-height: 1.05 !important; letter-spacing: -0.025em; max-width: 11em; } .dh-hilfe__unten > * { margin: 0 !important; } .dh-hilfe__unten > * + * { margin-top: 1.25rem !important; } .dh-hilfe__haupt p { max-width: 32em; font-size: 0.9688rem; } .dh-hilfe__neben { grid-column: span 3; border-top: 1px solid var(--dh-navy); padding-top: 1.5rem; display: flex !important; flex-direction: column; gap: 0.75rem; position: relative; } .dh-hilfe__neben > * { margin: 0 !important; } .dh-hilfe__neben h3 { font-family: var(--dh-serif); font-weight: 400; font-size: 1.625rem !important; line-height: 1.12 !important; letter-spacing: -0.015em; } .dh-hilfe__neben h3 a { color: var(--dh-navy); text-decoration: none; } .dh-hilfe__neben p { font-size: 0.9375rem !important; line-height: 1.55 !important; } .dh-hilfe__neben .dh-pfeil { margin-top: auto !important; padding-top: 0.75rem; } @media (max-width: 1100px) { .dh-hilfe__neben { grid-column: span 6; } } @media (max-width: 760px) { .dh-hilfe__haupt, .dh-hilfe__neben { grid-column: 1 / -1; } .dh-hilfe__haupt { min-height: 0; } } /* Themenkarten */ .dh-raster--themen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dh-thema { background: var(--dh-weiss); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); display: flex !important; flex-direction: column; gap: 1rem; min-height: 21rem; position: relative; overflow: hidden; transition: background-color 0.5s var(--dh-ease), color 0.5s var(--dh-ease); } .dh-thema > * { margin: 0 !important; position: relative; z-index: 1; } .dh-thema::before { content: ""; position: absolute; inset: 0; background: var(--dh-navy); transform: translateY(101%); transition: transform 0.7s var(--dh-ease); } .dh-thema::after { content: ""; position: absolute; right: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); bottom: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dh-linie-stark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1rem no-repeat; transition: background-color 0.4s, box-shadow 0.4s, transform 0.6s var(--dh-ease); } .dh-thema h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem) !important; line-height: 1.1 !important; letter-spacing: -0.02em; margin-top: auto !important; max-width: 11em; } .dh-thema h3 a { color: inherit; text-decoration: none; } .dh-thema p { font-size: 0.9375rem !important; line-height: 1.55 !important; color: var(--dh-text); padding-right: 3.5rem; transition: color 0.5s var(--dh-ease); } .dh-thema:hover::before { transform: none; } .dh-thema:hover { color: var(--dh-weiss); } .dh-thema:hover h3 { color: var(--dh-weiss); } .dh-thema:hover p { color: var(--dh-text-hell); } .dh-thema:hover .dh-label { background: transparent; color: var(--dh-weiss); box-shadow: inset 0 0 0 1px rgba(0, 255, 224, 0.55); } .dh-thema:hover::after { background-color: var(--dh-tuerkis); box-shadow: none; transform: rotate(-45deg); } .dh-s--weiss .dh-thema, .dh-s:not(.dh-s--flaeche):not(.dh-s--navy) .dh-thema { background: var(--dh-flaeche); } .dh-s--navy .dh-thema { background: transparent; box-shadow: inset 0 0 0 1px var(--dh-linie-hell); color: var(--dh-weiss); } .dh-s--navy .dh-thema h3 { color: var(--dh-weiss); } .dh-s--navy .dh-thema p { color: var(--dh-text-hell); } .dh-s--navy .dh-thema::before { background: var(--dh-tuerkis); } .dh-s--navy .dh-thema:hover h3, .dh-s--navy .dh-thema:hover p { color: var(--dh-navy); } @media (max-width: 1000px) { .dh-raster--themen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .dh-raster--themen { grid-template-columns: 1fr; } .dh-thema { min-height: 17rem; } } .dh-karussell .dh-thema { min-height: 26rem; height: 100%; } /* Zahlen mit Quellen */ .dh-zahlen { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--dh-spalt); } .dh-zahlen--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dh-zahlen > * { margin: 0 !important; } .dh-zahl { border-top: 1px solid var(--dh-linie-stark); padding-top: 1.5rem; display: flex !important; flex-direction: column; } .dh-zahl > * { margin: 0 !important; } .dh-zahl__wert { font-family: var(--dh-serif); font-size: var(--dh-gr-zahl) !important; line-height: 1 !important; letter-spacing: -0.035em; color: var(--dh-petrol); font-variation-settings: "opsz" 72; white-space: nowrap; } .dh-zahl__wert sup { font-size: 0.45em; vertical-align: 0.8em; margin-left: 0.08em; letter-spacing: 0; } .dh-zahl__titel { margin-top: 1.25rem !important; font-weight: 650; color: var(--dh-navy); font-size: 1rem; line-height: 1.35; } .dh-zahl__text { margin-top: 0.5rem !important; font-size: 0.9375rem; line-height: 1.55; color: var(--dh-text); } .dh-zahl .dh-quelle { margin-top: auto !important; padding-top: 1rem; } .dh-zahlen--klein .dh-zahl__wert { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.75rem) !important; } .dh-s--navy .dh-zahl { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-zahl__wert { color: var(--dh-weiss); } .dh-s--navy .dh-zahl__titel { color: var(--dh-weiss); } .dh-s--navy .dh-zahl__text { color: var(--dh-text-hell); } @media (max-width: 1100px) { .dh-zahlen--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .dh-zahlen, .dh-zahlen--4 { grid-template-columns: 1fr; } } .dh-fussnoten { padding-top: 1rem; border-top: 1px solid var(--dh-linie); } .dh-fussnoten > * { margin: 0 !important; } .dh-fussnoten p, .dh-fussnoten li { font-size: 0.8125rem !important; line-height: 1.5 !important; color: var(--dh-gedaempft); margin: 0 0 0.3rem !important; } .dh-fussnoten ol { margin: 0; padding-left: 1.2em; } /* Position mit Forderungen */ .dh-feature { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(3rem, 7vw, 8rem); align-items: start; } .dh-feature > * { margin: 0 !important; } .dh-feature__text { display: flex !important; flex-direction: column; align-items: flex-start; position: sticky; top: calc(var(--dh-kopfhoehe) + 3rem); } .dh-feature__text > * { margin: 0 !important; } .dh-feature__text > * + * { margin-top: 1.5rem !important; } .dh-feature__text h2 { font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.5rem); } .dh-feature__text .wp-block-buttons { margin-top: 2rem !important; } .dh-feature__liste { list-style: none; counter-reset: dh-ford; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--dh-linie-stark); } .dh-feature__liste li { counter-increment: dh-ford; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--dh-linie); font-size: 1.0625rem; line-height: 1.55; color: var(--dh-text); } .dh-feature__liste li::before { content: counter(dh-ford, decimal-leading-zero); font-family: var(--dh-serif); font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: var(--dh-petrol); } .dh-feature__liste li strong { color: var(--dh-navy); } .dh-s--navy .dh-feature__liste { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-feature__liste li { border-color: var(--dh-linie-hell); color: var(--dh-text-hell); } .dh-s--navy .dh-feature__liste li::before { color: var(--dh-weiss); } @media (max-width: 900px) { .dh-feature { grid-template-columns: 1fr; } .dh-feature__text { position: static; } } /* Organe / Gremien-Karten */ .dh-organ { border-top: 1px solid var(--dh-linie-stark); padding-top: 1.5rem; display: flex !important; flex-direction: column; gap: 0.75rem; position: relative; } .dh-organ > * { margin: 0 !important; } .dh-organ::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--dh-navy); transition: width 0.8s var(--dh-ease); } .dh-organ:hover::before { width: 100%; } .dh-organ__rolle { font-size: 0.8125rem !important; font-weight: 600; color: var(--dh-petrol); } .dh-organ h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.08; letter-spacing: -0.02em; } .dh-organ h3 a { color: var(--dh-navy); text-decoration: none; } .dh-organ p:not(.dh-organ__rolle):not(.dh-pfeil) { font-size: 0.9375rem; line-height: 1.6; color: var(--dh-text); } .dh-organ .dh-pfeil { margin-top: auto !important; padding-top: 0.75rem; } .dh-s--navy .dh-organ { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-organ h3 a { color: var(--dh-weiss); } .dh-s--navy .dh-organ__rolle { color: var(--dh-weiss); } /* Mitwirken */ .dh-mitwirken { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border-top: 1px solid var(--dh-navy); } .dh-mitwirken > * { margin: 0 !important; } .dh-weg { padding: 2.25rem clamp(1.25rem, 2.5vw, 3rem) 2.25rem 0; display: flex !important; flex-direction: column; gap: 1rem; } .dh-weg + .dh-weg { padding-left: clamp(1.25rem, 2.5vw, 3rem); border-left: 1px solid var(--dh-linie); } .dh-weg > * { margin: 0 !important; } .dh-weg h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: 1.08; letter-spacing: -0.02em; } .dh-weg p { font-size: 0.9688rem; } .dh-weg .wp-block-buttons, .dh-weg .dh-pfeil { margin-top: auto !important; padding-top: 1rem; } @media (max-width: 900px) { .dh-mitwirken { grid-template-columns: 1fr; } .dh-weg, .dh-weg + .dh-weg { padding: 2rem 0; border-left: 0; border-bottom: 1px solid var(--dh-linie); } } /* Aktuelles: Liste, Raster, Karussell */ .dh-meldung { display: flex !important; flex-direction: column; gap: 0.75rem; position: relative; height: 100%; } .dh-meldung > * { margin: 0 !important; } .dh-meldung__meta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; font-size: 0.8125rem; color: var(--dh-gedaempft); } .dh-meldung__meta > * { margin: 0 !important; } .dh-meldung .wp-block-post-terms a { display: inline-block; color: var(--dh-petrol-tief); background: var(--dh-tint); border-radius: 999px; padding: 0.22rem 0.7rem; font-weight: 600; text-decoration: none; position: relative; z-index: 2; } .dh-meldung .wp-block-post-title { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem) !important; line-height: 1.14 !important; letter-spacing: -0.018em; } .dh-meldung .wp-block-post-title a { color: var(--dh-navy); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--dh-ease); } .dh-meldung .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .dh-meldung:hover .wp-block-post-title a { background-size: 100% 1px; } .dh-meldung .wp-block-post-excerpt { font-size: 0.9375rem; line-height: 1.55; color: var(--dh-text); } .dh-meldung .wp-block-post-excerpt__excerpt { margin: 0; } .dh-meldung .wp-block-post-featured-image { margin: 0 0 0.75rem !important; overflow: hidden; aspect-ratio: 16 / 10; background: var(--dh-flaeche); } .dh-meldung .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dh-ease); } .dh-meldung:hover .wp-block-post-featured-image img { transform: scale(1.05); } .dh-meldung__bild-leer { aspect-ratio: 16 / 10; background: var(--dh-navy); } /* Karussell-Variante der Beiträge: Karten mit Fläche */ .dh-karussell .dh-meldung { background: var(--dh-weiss); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); min-height: 22rem; } .dh-s--flaeche .dh-karussell .dh-meldung { background: var(--dh-weiss); } .dh-s:not(.dh-s--flaeche) .dh-karussell .dh-meldung { background: var(--dh-flaeche); } .dh-karussell .dh-meldung .wp-block-post-excerpt { margin-top: auto !important; } /* Liste (Archiv) */ .dh-liste-meldungen .wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dh-navy); } .dh-liste-meldungen .wp-block-post-template > li { margin: 0 !important; border-bottom: 1px solid var(--dh-linie); } .dh-liste-meldungen .dh-meldung { display: grid !important; grid-template-columns: minmax(10rem, 2fr) minmax(0, 6fr) minmax(0, 4fr); gap: 0.5rem clamp(1.5rem, 3vw, 3rem); padding: 2.25rem 0; align-items: start; } .dh-liste-meldungen .dh-meldung__meta { flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-top: 0.45rem; } .dh-liste-meldungen .dh-meldung .wp-block-post-title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem) !important; } .dh-liste-meldungen .dh-meldung .wp-block-post-excerpt { padding-top: 0.45rem; } .dh-liste-meldungen .dh-meldung:hover .wp-block-post-title { transform: translateX(0.5rem); } .dh-liste-meldungen .dh-meldung .wp-block-post-title { transition: transform 0.6s var(--dh-ease); } @media (max-width: 960px) { .dh-liste-meldungen .dh-meldung { grid-template-columns: 1fr; } .dh-liste-meldungen .dh-meldung__meta { flex-direction: row; padding-top: 0; } .dh-liste-meldungen .dh-meldung .wp-block-post-excerpt { padding-top: 0; } } /* Raster (verwandte Beiträge) */ .dh-raster-meldungen .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dh-spalt); } .dh-raster-meldungen .wp-block-post-template > li { margin: 0 !important; background: var(--dh-weiss); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); } .dh-raster-meldungen--hell .wp-block-post-template > li { background: var(--dh-flaeche); } @media (max-width: 960px) { .dh-raster-meldungen .wp-block-post-template { grid-template-columns: 1fr; } } /* Kategorien als Chips */ .dh-kategorien, ul.dh-kategorien { display: flex !important; flex-wrap: wrap; gap: 0.5rem !important; list-style: none; padding: 0; margin: 0 0 2.5rem !important; } .dh-kategorien li { margin: 0; } .dh-kategorien a { display: inline-block; padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--dh-linie-stark); color: var(--dh-navy); text-decoration: none; font-size: 0.875rem; font-weight: 550; transition: border-color 0.3s, background-color 0.3s, color 0.3s; } .dh-kategorien a:hover { border-color: var(--dh-navy); } .dh-kategorien .current-cat a { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } /* Seitenwechsel */ .dh .wp-block-query-pagination { margin-top: 2.5rem !important; gap: 0.5rem; font-weight: 600; align-items: center; } .dh .wp-block-query-pagination a, .dh .wp-block-query-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; text-decoration: none; color: var(--dh-navy); border: 1px solid var(--dh-linie-stark); } .dh .wp-block-query-pagination .page-numbers.current { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } .dh .wp-block-query-pagination a:hover { border-color: var(--dh-navy); } /* Personen */ .dh-person { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2.5rem, 6vw, 7rem); padding-block: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--dh-linie); align-items: start; } .dh-person:first-child { border-top: 1px solid var(--dh-navy); } .dh-unsichtbar + .dh-person { border-top: 0; padding-top: 0; } .dh-person > * { margin: 0 !important; } .dh-person__bild { overflow: hidden; aspect-ratio: 4 / 5; background: var(--dh-flaeche); position: sticky; top: calc(var(--dh-kopfhoehe) + 2rem); } .dh-person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; } .dh-person__bild figure, .dh-person .wp-block-image { margin: 0 !important; } .dh-person__text > * { margin: 0 !important; } .dh-person__text > * + * { margin-top: 1.1rem !important; } .dh-person__rolle { font-size: 0.8125rem !important; font-weight: 600; color: var(--dh-petrol); } .dh-person__text h2, .dh-person__text h3 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem) !important; line-height: 1 !important; letter-spacing: -0.03em; margin-top: 0.75rem !important; } .dh-person__funktion { font-size: 1.1875rem !important; color: var(--dh-navy); font-weight: 500; line-height: 1.45 !important; padding-bottom: 1.25rem; border-bottom: 1px solid var(--dh-linie); } .dh-person__text p:not(.dh-person__rolle):not(.dh-person__funktion) { font-size: 1.0313rem; line-height: 1.7; } @media (max-width: 900px) { .dh-person { grid-template-columns: 1fr; } .dh-person__bild { position: static; max-width: 24rem; } } /* Listen */ .dh-liste { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--dh-linie); } .dh-liste li { position: relative; margin: 0; padding: 0.95rem 0 0.95rem 2rem; border-bottom: 1px solid var(--dh-linie); line-height: 1.5; } .dh-liste li::before { content: ""; position: absolute; left: 0.15rem; top: 1.45rem; width: 0.85rem; height: 0.5rem; border-left: 1.5px solid var(--dh-petrol); border-bottom: 1.5px solid var(--dh-petrol); transform: rotate(-45deg); transform-origin: center; } .dh-s--navy .dh-liste { border-color: var(--dh-linie-hell); } .dh-s--navy .dh-liste li { border-color: var(--dh-linie-hell); color: var(--dh-text-hell); } .dh-s--navy .dh-liste li::before { border-color: var(--dh-tuerkis); } .dh-liste--links a { font-weight: 600; color: var(--dh-navy); text-decoration: none; } .dh-liste--links a:hover { text-decoration: underline; text-decoration-color: var(--dh-tuerkis); text-decoration-thickness: 2px; } /* Zweispaltig */ .dh-zweispaltig { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(3rem, 7vw, 8rem); align-items: start; } .dh-zweispaltig > * { margin: 0 !important; } .dh-zweispaltig__kopf { position: sticky; top: calc(var(--dh-kopfhoehe) + 2.5rem); display: flex !important; flex-direction: column; align-items: flex-start; } .dh-zweispaltig__kopf > * { margin: 0 !important; } .dh-zweispaltig__kopf > * + * { margin-top: 1.5rem !important; } .dh-zweispaltig__kopf > h3 { margin-top: 2.5rem !important; } .dh-zweispaltig__kopf .dh-pfeil + .dh-pfeil { margin-top: 0.75rem !important; } .dh-fliesstext > * { margin: 0 !important; } .dh-fliesstext > * + * { margin-top: 1.25rem !important; } .dh-fliesstext p { font-size: 1.0625rem; line-height: 1.75; } .dh-fliesstext > h3 { margin-top: 2.25rem !important; } .dh-fliesstext > h3:first-child { margin-top: 0 !important; } .dh-s--navy .dh-fliesstext p { color: var(--dh-text-hell); } @media (max-width: 900px) { .dh-zweispaltig { grid-template-columns: 1fr; } .dh-zweispaltig__kopf { position: static; } } /* Fragen */ .dh-faq { border-top: 1px solid var(--dh-linie-stark); } .dh-faq > * { margin: 0 !important; } .dh-frage { border-bottom: 1px solid var(--dh-linie); } .dh-frage summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 2.5rem; align-items: center; gap: 1rem; padding: 1.4rem 0; font-family: var(--dh-serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--dh-navy); } .dh-frage summary::-webkit-details-marker { display: none; } .dh-frage summary::after { content: ""; width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--dh-linie-stark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 1rem no-repeat; transition: transform 0.5s var(--dh-ease), background-color 0.3s, box-shadow 0.3s; } .dh-frage summary:hover::after { background-color: var(--dh-tuerkis); box-shadow: none; } .dh-frage[open] summary::after { transform: rotate(135deg); background-color: var(--dh-navy); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .dh-frage > :not(summary) { margin: 0 0 1.5rem !important; max-width: 46rem; font-size: 1rem; line-height: 1.7; } .dh-frage[open] > :not(summary) { animation: dh-reiter-text 0.6s var(--dh-ease) both; } .dh-frage--profil summary { font-family: var(--dh-sans); font-size: 1rem; font-weight: 600; } /* Zitat und Bild mit Text */ .dh-bildtext { display: grid !important; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 7vw, 8rem); align-items: center; } .dh-bildtext > * { margin: 0 !important; } .dh-bildtext .wp-block-image, .dh-bildtext figure { margin: 0 !important; overflow: hidden; } .dh-bildtext img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .dh-bildtext__text > * { margin: 0 !important; } .dh-bildtext__text > * + * { margin-top: 1.5rem !important; } .dh-bildtext--zitat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } .dh-bildtext--zitat img { aspect-ratio: 4 / 5; object-position: 50% 20%; } @media (max-width: 900px) { .dh-bildtext, .dh-bildtext--zitat { grid-template-columns: 1fr; } } .dh-zitat { margin: 0 !important; padding: 0 !important; border: 0 !important; } .dh-zitat p { font-family: var(--dh-serif); font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem) !important; line-height: 1.12 !important; letter-spacing: -0.022em; color: var(--dh-navy); text-indent: -0.42em; } .dh-zitat p::before { content: "„"; color: var(--dh-petrol); } .dh-zitat p::after { content: "“"; color: var(--dh-petrol); } .dh-zitat cite { display: block; margin-top: 2rem; font-style: normal; font-size: 0.9375rem; color: var(--dh-gedaempft); } .dh-zitat cite strong { color: var(--dh-navy); } /* Hinweis mit Aufforderung */ .dh-hinweis { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem 3rem; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem); background: var(--dh-navy); color: var(--dh-text-hell); position: relative; overflow: hidden; } .dh-hinweis::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 20rem; height: 20rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 255, 224, 0.18), transparent); pointer-events: none; } .dh-hinweis > * { margin: 0 !important; position: relative; z-index: 1; } .dh-hinweis__text > * { margin: 0 !important; } .dh-hinweis__text > * + * { margin-top: 0.85rem !important; } .dh-hinweis h3 { font-family: var(--dh-serif); font-weight: 400; color: var(--dh-weiss); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; } .dh-hinweis p { max-width: 40rem; } .dh-hinweis .wp-block-button__link { background: var(--dh-tuerkis); color: var(--dh-navy); } .dh-hinweis .wp-block-button__link::before { background: var(--dh-weiss); } .dh-hinweis .wp-block-button__link::after { background-color: rgba(6, 9, 61, 0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306093D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } @media (max-width: 760px) { .dh-hinweis { grid-template-columns: 1fr; } } /* Unterlagen */ .dh-downloads > * { margin: 0 !important; } .dh-downloads .wp-block-file { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.4rem 0; border-top: 1px solid var(--dh-linie-stark); margin: 0 !important; } .dh-downloads .wp-block-file:last-child { border-bottom: 1px solid var(--dh-linie-stark); } .dh-downloads .wp-block-file > a:first-child { font-family: var(--dh-serif); font-size: 1.375rem; line-height: 1.25; color: var(--dh-navy); text-decoration: none; max-width: 32rem; } .dh-downloads .wp-block-file > a:first-child:hover { text-decoration: underline; text-decoration-color: var(--dh-tuerkis); text-decoration-thickness: 2px; } .dh-downloads .wp-block-file__button { border-radius: 999px !important; background: transparent !important; color: var(--dh-navy) !important; box-shadow: inset 0 0 0 1px var(--dh-linie-stark); padding: 0.6rem 1.1rem !important; font-size: 0.875rem !important; font-weight: 600; text-decoration: none; transition: background-color 0.3s, box-shadow 0.3s; } .dh-downloads .wp-block-file__button:hover { background: var(--dh-tuerkis) !important; box-shadow: none; } /* Quellen, Transparenz, Kleinteile */ .dh-quellen { margin-top: 3rem !important; padding-top: 2rem; border-top: 1px solid var(--dh-linie-stark); } .dh-quellen > * { margin: 0 !important; } .dh-quellen h2 { font-family: var(--dh-sans); font-size: 1rem; font-weight: 650; letter-spacing: 0; margin-bottom: 1rem !important; } .dh-quellen ol { padding-left: 1.25rem; margin: 0; } .dh-quellen li { font-size: 0.9375rem; line-height: 1.55; color: var(--dh-gedaempft); margin-bottom: 0.5rem; } .dh-quellenlinks { display: flex !important; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: 1.75rem !important; } .dh-quellenlinks > * { margin: 0 !important; } .dh-transparenz { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; display: inline-flex !important; gap: 1rem; align-items: center; padding: 1rem 1.5rem 1rem 1rem; border: 1px solid var(--dh-linie-stark); border-radius: 999px; max-width: 46rem; } .dh-transparenz p { margin: 0; font-size: 0.9375rem; } .dh-transparenz strong { color: var(--dh-navy); margin-right: 0.35rem; } .dh-hinweistext { margin-top: 2.5rem !important; max-width: 48rem; } .dh-hinweistext p { font-size: 0.9375rem; color: var(--dh-gedaempft); } .dh-anker { margin: 0 !important; } .dh-befund { border-top: 1px solid var(--dh-linie-stark); padding-top: 1.5rem; } .dh-befund + .dh-befund { margin-top: 2.5rem !important; } .dh-befund > * { margin: 0 !important; } .dh-befund > * + * { margin-top: 0.75rem !important; } .dh-befund h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); line-height: 1.15; letter-spacing: -0.015em; } /* Gremien-Navigation */ .dh-gremiennav { display: flex !important; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; } .dh-gremiennav > * { margin: 0 !important; } .dh-gremiennav__titel { font-size: 0.875rem; font-weight: 600; color: var(--dh-gedaempft); } .dh-gremiennav__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .dh-gremiennav__liste a { display: inline-block; padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--dh-linie-stark); color: var(--dh-navy); font-weight: 550; font-size: 0.9375rem; text-decoration: none; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } .dh-gremiennav__liste a:hover { background: var(--dh-navy); color: var(--dh-weiss); border-color: var(--dh-navy); } /* Wege-Karten (Mitgliedschaft) */ .dh-wegkarte { border: 1px solid var(--dh-linie-stark); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); display: flex !important; flex-direction: column; gap: 1.1rem; background: var(--dh-weiss); position: relative; transition: border-color 0.4s; } .dh-wegkarte:hover { border-color: var(--dh-navy); } .dh-wegkarte > * { margin: 0 !important; } .dh-wegkarte h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; } .dh-wegkarte .wp-block-buttons { margin-top: auto !important; padding-top: 1rem; } .dh-eckdaten { border-top: 1px solid var(--dh-linie-stark); } .dh-eckdaten p { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--dh-linie); margin: 0 !important; font-size: 0.9375rem; } .dh-eckdaten strong { color: var(--dh-navy); font-weight: 650; } /* Gremienseiten, Rechtstexte */ .dh-lesen { max-width: 46rem; } .dh-lesen > * { margin: 0; } .dh-lesen > * + * { margin-top: 1.25rem; } .dh-lesen h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: 1.12; margin-top: 3.5rem !important; padding-top: 2rem; border-top: 1px solid var(--dh-linie); } .dh-lesen h2:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; } .dh-lesen h3 { font-size: 1.1875rem; margin-top: 2.25rem !important; } .dh-lesen p, .dh-lesen li { font-size: 1.0625rem; line-height: 1.75; } .dh-lesen ul, .dh-lesen ol { padding-left: 1.3rem; } .dh-lesen li + li { margin-top: 0.45rem; } .dh-lesen-raster { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem clamp(2rem, 6vw, 7rem); align-items: start; } .dh-lesen-raster > * { margin: 0 !important; } .dh-inhalt { position: sticky; top: calc(var(--dh-kopfhoehe) + 2rem); font-size: 0.875rem; max-height: calc(100vh - var(--dh-kopfhoehe) - 4rem); overflow-y: auto; scrollbar-width: thin; } .dh-inhalt > * { margin: 0 !important; } .dh-inhalt p { font-weight: 650; color: var(--dh-navy); margin-bottom: 0.75rem !important; } .dh-inhalt ol, .dh-inhalt ul { list-style: none; padding: 0 !important; margin: 0; border-left: 1px solid var(--dh-linie); } .dh-inhalt li { margin: 0; } .dh-inhalt a { display: block; padding: 0.4rem 0 0.4rem 1rem; color: var(--dh-gedaempft); text-decoration: none; line-height: 1.35; border-left: 2px solid transparent; margin-left: -1px; transition: color 0.3s, border-color 0.3s; } .dh-inhalt a:hover, .dh-inhalt a.ist-aktiv { color: var(--dh-navy); border-left-color: var(--dh-tuerkis); } .dh-inhalt a.dh-inhalt__unter { padding-left: 1.75rem; font-size: 0.8125rem; } @media (max-width: 960px) { .dh-lesen-raster { grid-template-columns: 1fr; } .dh-inhalt { position: static; max-height: none; } .dh-inhalt ol { columns: 2; } } /* Beitrag */ .dh-artikelkopf { padding-top: clamp(3rem, 2rem + 4vw, 6.5rem) !important; padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; } .dh-artikelkopf .dh-s__innen > * { margin: 0 !important; } .dh-artikelkopf .dh-pfad { margin-bottom: 2.5rem !important; } .dh-artikelmeta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0 0 1.75rem !important; font-size: 0.875rem; color: var(--dh-gedaempft); } .dh-artikelmeta > * { margin: 0 !important; } .dh-artikelmeta .wp-block-post-terms a { display: inline-block; color: var(--dh-petrol-tief); background: var(--dh-tint); border-radius: 999px; padding: 0.25rem 0.75rem; font-weight: 600; text-decoration: none; } .dh-artikelkopf .wp-block-post-title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem) !important; line-height: 1.03 !important; letter-spacing: -0.03em; max-width: 17em; } .dh-artikelzeile { display: flex !important; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 1.25rem; margin-top: 2.5rem !important; border-top: 1px solid var(--dh-linie); font-size: 0.875rem; color: var(--dh-gedaempft); } .dh-artikelzeile > * { margin: 0 !important; } .dh-artikelbild-bereich { padding-inline: var(--dh-rand) !important; margin: 0 !important; } .dh-artikelbild-bereich:empty { display: none; } .dh-artikelbild { margin: 0 auto clamp(3rem, 2rem + 3vw, 5rem) !important; max-width: var(--dh-breite) !important; overflow: hidden; aspect-ratio: 21 / 9; } .dh-artikelbild img { width: 100%; height: 100%; object-fit: cover; } .dh-artikeltext { padding-inline: var(--dh-rand) !important; padding-bottom: var(--dh-sektion); } .dh-artikeltext > * { max-width: 46rem !important; margin-left: auto !important; margin-right: auto !important; } .dh-artikeltext > .alignwide { max-width: 64rem !important; } .dh-artikeltext > * + * { margin-top: 1.4rem !important; } .dh-artikeltext > h2 { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.625rem); margin-top: 3.5rem !important; } .dh-artikeltext > h3 { margin-top: 2.5rem !important; } .dh-artikeltext p, .dh-artikeltext li { font-size: 1.125rem; line-height: 1.75; } .dh-artikeltext > .dh-lead:first-child { font-family: var(--dh-serif); font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem) !important; line-height: 1.4 !important; color: var(--dh-navy); margin-top: 0 !important; } .dh-faktenleiste { border-top: 1px solid var(--dh-navy); padding-top: 1.75rem; margin-block: 3rem !important; } .dh-faktenleiste__liste { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); } .dh-faktenleiste__liste > *, .dh-faktenleiste__eintrag > * { margin: 0 !important; } .dh-faktenleiste__eintrag .dh-fakt__wert { font-size: clamp(2.5rem, 1.9rem + 2vw, 3.75rem) !important; } .dh-faktenleiste__eintrag .dh-fakt__text { margin-top: 0.6rem !important; } .dh-faktenleiste .dh-quelle { margin-top: 1.5rem !important; } @media (max-width: 760px) { .dh-faktenleiste__liste { grid-template-columns: 1fr; } } .dh-kasten { background: var(--dh-tint); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); margin-block: 2.5rem !important; } .dh-kasten > * { margin: 0 !important; } .dh-kasten__titel { font-family: var(--dh-serif); font-size: 1.5rem; color: var(--dh-navy); margin-bottom: 1rem !important; letter-spacing: -0.01em; } .dh-kasten .dh-liste { border-top-color: rgba(6, 9, 61, 0.15); } .dh-kasten .dh-liste li { border-bottom-color: rgba(6, 9, 61, 0.1); font-size: 1rem; } .dh-zahlenblock { margin-block: 2.5rem 3.5rem !important; } /* Formulare (Fluent Forms) */ .dh-formularbereich { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; max-width: 60rem; } .dh-formular { background: var(--dh-weiss); border: 1px solid var(--dh-linie-stark); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); } .dh-kontaktformular { border: 1px solid var(--dh-linie-stark); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); background: var(--dh-weiss); } .dh-kontaktformular > * { margin: 0 !important; } .dh-kontaktformular h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); margin-bottom: 1.75rem !important; } .dh-kontaktformular .dh-formular { border: 0; padding: 0; } .dh .fluentform .ff-el-group { margin-bottom: 1.4rem; } .dh .fluentform .ff-el-input--label label, .dh .fluentform .ff-el-input--label { font-weight: 600 !important; color: var(--dh-navy) !important; font-size: 0.9375rem !important; margin-bottom: 0.45rem; } .dh .fluentform .ff-el-form-control { border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid var(--dh-linie-stark) !important; background: var(--dh-flaeche) !important; padding: 0.95rem 1rem !important; font-family: var(--dh-sans) !important; font-size: 1rem !important; color: var(--dh-navy) !important; box-shadow: none !important; transition: border-color 0.3s, background-color 0.3s; } .dh .fluentform .ff-el-form-control:focus { border-bottom-color: var(--dh-navy) !important; background: var(--dh-tint) !important; outline: none; } .dh .fluentform .ff-el-form-check-label { font-size: 0.9375rem; line-height: 1.5; color: var(--dh-text); border-radius: 999px !important; display: flex !important; align-items: center; gap: 0.7rem; } .dh .fluentform .ff-el-form-check-label > input { flex: none; margin: 0 !important; accent-color: var(--dh-navy); width: 1.1rem; height: 1.1rem; } .dh .fluentform .ff-btn, .dh .fluentform .ff-btn-submit { border-radius: 999px !important; background: var(--dh-navy) !important; color: var(--dh-weiss) !important; border: 0 !important; padding: 0.95rem 1.75rem !important; font-family: var(--dh-sans) !important; font-weight: 600 !important; font-size: 0.9688rem !important; box-shadow: none !important; transition: background-color 0.35s, color 0.35s; } .dh .fluentform .ff-btn:hover { background: var(--dh-tuerkis) !important; color: var(--dh-navy) !important; } .dh .fluentform .ff-btn-prev { background: transparent !important; color: var(--dh-navy) !important; box-shadow: inset 0 0 0 1px var(--dh-linie-stark) !important; } .dh .fluentform .ff-step-titles li, .dh .fluentform .ff-step-titles li span { color: var(--dh-gedaempft); font-size: 0.8125rem; } .dh .fluentform .ff-step-titles li.ff_active, .dh .fluentform .ff-step-titles li.ff_completed { color: var(--dh-navy); } .dh .fluentform .ff-step-titles li.ff_active:before, .dh .fluentform .ff-step-titles li.ff_completed:before { background: var(--dh-navy) !important; color: var(--dh-weiss) !important; } .dh .fluentform .ff-el-progress-bar { background: var(--dh-navy) !important; } .dh .fluentform .dm-info { background: var(--dh-tint); border-left: 3px solid var(--dh-petrol); padding: 1rem 1.25rem; margin-bottom: 1.25rem; color: var(--dh-text); } .dh .fluentform .text-danger, .dh .fluentform .error { color: #b3261e !important; font-size: 0.875rem; } .dh .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: #b3261e !important; } .dh .fluentform .ff-message-success, .dh .fluentform .ff_upload_btn.ff-btn, .dh .fluentform .ff-upload-preview { border-radius: 0 !important; } /* Suche: Feld und Treffer */ .dh-suchfeld { max-width: 48rem; } .dh-suchfeld .wp-block-search__inside-wrapper { border: 0 !important; border-bottom: 1px solid var(--dh-navy) !important; padding: 0 !important; border-radius: 0; background: transparent; } .dh-suchfeld .wp-block-search__input { border: 0 !important; background: transparent; padding: 0.6rem 0 !important; font-family: var(--dh-serif); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); color: var(--dh-navy); } .dh-suchfeld .wp-block-search__input:focus { outline: none; } .dh-suchfeld .wp-block-search__button { border-radius: 999px !important; background: var(--dh-navy) !important; color: var(--dh-weiss) !important; border: 0 !important; padding: 0.75rem 1.4rem !important; font-weight: 600; margin: 0.25rem 0 0.25rem 1rem !important; } .dh-treffer .wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dh-navy); } .dh-treffer .wp-block-post-template > li { padding: 1.75rem 0; border-bottom: 1px solid var(--dh-linie); margin: 0 !important; } .dh-treffer .wp-block-post-title { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem) !important; } .dh-treffer .wp-block-post-title a { color: var(--dh-navy); text-decoration: none; } .dh-treffer .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--dh-tuerkis); } .dh-treffer .wp-block-post-excerpt { margin-top: 0.6rem !important; font-size: 0.9688rem; } /* -------------------------------------------------------------------------- Fußbereich -------------------------------------------------------------------------- */ .dh-fuss { background: var(--dh-navy-tief); color: var(--dh-text-hell); padding: clamp(4.5rem, 3rem + 5vw, 8rem) var(--dh-rand) 2.5rem !important; margin: 0 !important; position: relative; overflow: hidden; } .dh-fuss > * { max-width: var(--dh-breite) !important; margin-inline: auto !important; } .dh-fuss a { color: var(--dh-weiss); text-decoration: none; } .dh-fuss a:hover { color: var(--dh-weiss); text-decoration: underline; text-decoration-color: var(--dh-tuerkis); text-underline-offset: 0.25em; } .dh-fuss__oben { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem clamp(3rem, 7vw, 8rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); border-bottom: 1px solid var(--dh-linie-hell); } .dh-fuss__oben > * { margin: 0 !important; } .dh-fuss__marke > * { margin: 0 !important; } .dh-fuss__marke > * + * { margin-top: 1.5rem !important; } .dh-fuss__logo { width: 210px; max-width: 60%; } .dh-fuss__logo img { display: block; width: 100%; } .dh-fuss__claim { font-family: var(--dh-serif); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em; color: var(--dh-weiss); margin-top: 2.25rem !important; max-width: 11em; } .dh-fuss__text { font-size: 0.9375rem; line-height: 1.65; max-width: 30rem; } .dh-fuss__kontakt { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; font-size: 0.9375rem; padding-top: 1.5rem; border-top: 1px solid var(--dh-linie-hell); } .dh-fuss__kontakt > * { margin: 0 !important; } .dh-fuss__spalten { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; } .dh-fuss__spalten > * { margin: 0 !important; } .dh-fuss__spalte h2 { font-family: var(--dh-sans); font-size: 0.8125rem; font-weight: 650; color: var(--dh-weiss); letter-spacing: 0; margin: 0 0 1.25rem !important; } .dh-fuss__liste { list-style: none; margin: 0 !important; padding: 0 !important; border: 0; } .dh-fuss__liste li { padding: 0.35rem 0; border: 0; font-size: 0.9375rem; line-height: 1.4; } .dh-fuss__liste li::before { content: none; } .dh-fuss__liste a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--dh-ease), color 0.3s; } .dh-fuss__liste a:hover { background-size: 100% 1px; } .dh-fuss__unten { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; padding-top: 2rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.6); } .dh-fuss__unten > * { margin: 0 !important; } .dh-fuss__recht { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 !important; padding: 0 !important; border: 0; } .dh-fuss__recht li { margin: 0; padding: 0; border: 0; } .dh-fuss__recht li::before { content: none; } .dh-fuss__recht a { color: rgba(255, 255, 255, 0.78); } @media (max-width: 1000px) { .dh-fuss__oben { grid-template-columns: 1fr; } .dh-fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .dh-fuss__kontakt { grid-template-columns: 1fr; } } /* Vorschau-Hinweis */ .dh-vorschau-hinweis { position: fixed; left: 1rem; bottom: 1rem; z-index: 300; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.6rem 0.55rem 1rem; background: var(--dh-navy); color: var(--dh-weiss); border-radius: 999px; font-size: 0.75rem; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); } .dh-vorschau-hinweis strong { color: var(--dh-weiss); } .dh-vorschau-hinweis a { color: var(--dh-navy); background: var(--dh-tuerkis); border-radius: 999px; padding: 0.3rem 0.75rem; text-decoration: none; font-weight: 600; } @media print { .dh-kopfbereich, .dh-fuss, .dh-buehne__feld, .dh-vorschau-hinweis, .dh-fortschritt, .dh-abschnitte, .dh-karussell__steuerung { display: none !important; } .dh:not(.dh-hat-buehne) main#inhalt { padding-top: 0; } .dh-r, .dh-bild-auf { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* -------------------------------------------------------------------------- Feinschliff: Zustände vor dem Skript, Auftritt der Bühnen, Ergänzungen -------------------------------------------------------------------------- */ /* Kopf über der Bühne: schon vor dem Skript transparent, damit nichts springt */ .dh-hat-buehne .dh-kopfbereich:not(.ist-fest):not(.ist-mega) { background: transparent; color: var(--dh-weiss); box-shadow: none; } .dh-hat-buehne .dh-kopfbereich:not(.ist-fest):not(.ist-mega) .dh-logo .dh-logo__bild--dunkel img { opacity: 0; } .dh-hat-buehne .dh-kopfbereich:not(.ist-fest):not(.ist-mega) .dh-logo .dh-logo__bild--hell { opacity: 1; } .dh-hat-buehne .dh-kopfbereich:not(.ist-fest):not(.ist-mega) .dh-kopf-aktionen .wp-block-button__link { background: var(--dh-weiss); color: var(--dh-navy); } /* Auftritt der Bühnen: reine CSS-Animation, kein Aufblitzen vor dem Skript */ @keyframes dh-auf { from { opacity: 0; translate: 0 2.25rem; } to { opacity: 1; translate: 0 0; } } @keyframes dh-zeile { from { clip-path: inset(0 0 100% 0); translate: 0 0.42em; } to { clip-path: inset(-0.2em -0.2em -0.25em -0.2em); translate: 0 0; } } @keyframes dh-bild-ein { from { opacity: 0; scale: 1.14; } to { opacity: 1; scale: 1; } } .dh-js .dh-buehne__inhalt > *:not(.dh-buehne__titel), .dh-js .dh-seitenkopf__innen > *:not(.dh-seitenkopf__haupt), .dh-js .dh-seitenkopf__haupt > *, .dh-js .dh-seitenkopf--hell > .dh-s__innen > *, .dh-js .dh-artikelkopf > .dh-s__innen > * { animation: dh-auf 1.2s var(--dh-ease) backwards; } .dh-js .dh-seitenkopf__haupt > :nth-child(2), .dh-js .dh-seitenkopf--hell > .dh-s__innen > :nth-child(2), .dh-js .dh-artikelkopf > .dh-s__innen > :nth-child(2) { animation-delay: 0.1s; } .dh-js .dh-seitenkopf__haupt > :nth-child(3), .dh-js .dh-seitenkopf--hell > .dh-s__innen > :nth-child(3), .dh-js .dh-artikelkopf > .dh-s__innen > :nth-child(3) { animation-delay: 0.2s; } .dh-js .dh-seitenkopf__haupt > :nth-child(4), .dh-js .dh-seitenkopf--hell > .dh-s__innen > :nth-child(4), .dh-js .dh-artikelkopf > .dh-s__innen > :nth-child(4) { animation-delay: 0.3s; } .dh-js .dh-seitenkopf__haupt > :nth-child(n+5), .dh-js .dh-seitenkopf--hell > .dh-s__innen > :nth-child(n+5), .dh-js .dh-artikelkopf > .dh-s__innen > :nth-child(n+5) { animation-delay: 0.4s; } .dh-js .dh-seitenkopf__innen > .dh-marken { animation-delay: 0.5s; } .dh-js .dh-buehne__inhalt > .dh-label { animation-delay: 0.15s; } .dh-js .dh-buehne__inhalt > .dh-buehne__unten { animation-delay: 0.75s; animation-duration: 1.4s; } .dh-js .dh-buehne__titel .dh-buehne__zeile { animation: dh-zeile 1.4s var(--dh-ease) 0.25s backwards; } .dh-js .dh-buehne__titel .dh-buehne__zeile--zwei { animation-delay: 0.42s; } .dh-js .dh-hero > .wp-block-cover__image-background { animation: dh-bild-ein 2.6s var(--dh-ease) backwards; } .dh-js .dh-buehne__hinweis { animation: dh-auf 1.2s var(--dh-ease) 1.2s backwards; } /* Unterstrich des wechselnden Wortes läuft als Zeitleiste */ @keyframes dh-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } } .dh-js .dh-wechsel.ist-laeuft::after { animation: dh-strich 3.2s linear both; } .dh-js .dh-wechsel.ist-pausiert::after { animation-play-state: paused; } @media (max-width: 640px) { .dh-buehne__titel .dh-wechsel { display: block; width: max-content; } } /* Pause-Schalter der Bühne */ .dh-buehne__pause { position: absolute !important; z-index: 3; right: var(--dh-rand); bottom: 1.5rem; color: var(--dh-weiss) !important; } .dh-buehne__pause svg { width: 0.9rem; height: 0.9rem; } /* Kennwerte mit zwei oder vier Spalten */ .dh-fakten__liste--2 { --dh-n: 2; } .dh-fakten__liste--4 { --dh-n: 4; } @media (max-width: 1100px) { .dh-fakten__liste--4 { --dh-n: 2; } } /* Abläufe als Tafeln: ohne Skript als Raster */ .dh-quer__tafel > .dh-quer__nr { font-variation-settings: "opsz" 72; } html:not(.dh-js) .dh-quer__tafel::before, .dh-quer:not(.ist-gepinnt) .dh-quer__tafel::before { transform: scaleX(1); } .dh-quer .dh-kopf { max-width: 52rem; } .dh-quer:not(.ist-gepinnt) .dh-quer__nr { color: var(--dh-tuerkis) !important; -webkit-text-stroke-color: var(--dh-tuerkis); } /* Bildband: Bild ohne Text, mit leichtem Verlauf an den Kanten */ .dh-bildband.wp-block-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 40, 0.18), rgba(4, 6, 40, 0) 30%, rgba(4, 6, 40, 0) 70%, rgba(4, 6, 40, 0.18)); } .dh-bildband > .wp-block-cover__image-background { transform: translate3d(0, var(--dh-px, 0px), 0) scale(var(--dh-skala, 1.16)); will-change: transform; } .dh-bildband > .wp-block-cover__inner-container { display: none; } /* Karten im Karussell und im Raster */ .dh-karussell .dh-karte > h3 { font-family: var(--dh-serif); font-weight: 400; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 2rem); letter-spacing: -0.018em; line-height: 1.12; } .dh-karte .dh-label { margin-top: 1.5rem !important; align-self: flex-start; } .dh-karte .dh-label + h3 { margin-top: 0.9rem !important; } .dh-karte a { color: inherit; text-decoration: none; } .dh-karte .dh-pfeil { margin-top: 1.25rem !important; } /* Kontakt-Abschluss: Bild läuft bis an den Rand */ .dh-kontakt-split { max-width: none !important; } .dh-kontakt-split__bild { margin: 0 !important; height: 100%; } .dh-kontakt-split .wp-block-buttons { margin-top: 0.5rem !important; } .dh-kontakt-split + footer, .dh-kontakt-split + .wp-block-template-part { margin-top: 0 !important; } main#inhalt > .wp-block-post-content > .dh-kontakt-split:last-child { margin-bottom: 0 !important; } /* Startseite: Einstiege im Reiter-Bereich auf Fläche */ .dh-reiter .dh-kopf { max-width: 56rem; } /* Lauftext mit Quelle */ .dh-lauftext + .wp-block-buttons { margin-top: 2.5rem !important; } .dh-lauftext em { font-style: italic; color: var(--dh-petrol); } .dh-s--navy .dh-lauftext em { color: var(--dh-weiss); }