/* dj-hannes.rocks, Theme dhr 0.2.2, Fassung 3A „Papeterie“ (freigegeben 31.10.2026), ab 0.2.0 mit Fotos
   Vorlage: Website/Vorschau/assets/vorschau.css (Abschnitte Grundlagen und Fassung 3, Richtung papeterie).
   Farben kommen aus theme.json; hier stehen nur Rollen, Formen und was theme.json nicht kann
   (Schriftbreite, Plakat-Satzblock, Papier-Objekte, Ticket-Lochung, Zeitleiste, Mobil-Leiste, Bewegung). */

:root {
	--grund: var(--wp--preset--color--grund, #FAFCFB);
	--flaeche: var(--wp--preset--color--flaeche, #EFF6F2);
	--text: var(--wp--preset--color--text, #1F2D2B);
	--text-2: var(--wp--preset--color--text-2, #4D5C58);
	--kopf: var(--wp--preset--color--kopf, #0E4B45);
	--akzent: var(--wp--preset--color--akzent, #0E4B45);
	--aktion: var(--wp--preset--color--aktion, #0E4B45);
	--aktion-hover: var(--wp--preset--color--aktion-hover, #0A3934);
	--auf-aktion: var(--wp--preset--color--auf-aktion, #FAFCFB);
	--fokus: #0E4B45;
	--marke: #0E4B45;
	--licht: #9A5B00;                 /* Amber dunkel als Schrift: 5,3:1, auf Fläche 4,9:1 */
	--licht-flaeche: #FCA311;         /* Amber nur als Fläche, nie als Schrift auf Hell */
	--auf-licht: #052523;             /* 8,0:1 auf Amber */
	--stern: #FCA311;
	--stern-rand: #9A5B00;
	--hinweis-grund: #CBE3D8;
	--hinweis-text: #1F2D2B;
	--linie: rgba(14, 75, 69, 0.16);
	--feldrand: #5F7D75;
	--papier: #FFFFFF;
	--tinte: #1F2D2B;
	--tinte-2: #4D5C58;
	--tape: rgba(222, 200, 150, 0.82);
	--schatten: 0 1px 2px rgba(14, 75, 69, 0.10), 0 14px 34px rgba(14, 75, 69, 0.13);
	--bild-verlauf: linear-gradient(180deg, transparent 62%, rgba(250, 252, 251, 0.9) 82%, #FAFCFB 94%);
	--bild-verlauf-quer: linear-gradient(90deg, #FAFCFB 0%, rgba(250, 252, 251, 0.94) 30%, rgba(250, 252, 251, 0.25) 58%, rgba(250, 252, 251, 0) 76%);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--rand: clamp(1rem, 5vw, 5rem);
	--breit: 77.5rem;
	--radius: 4px;
	--abschnitt: clamp(4rem, 3rem + 5vw, 8rem);
	color-scheme: light;
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; font-stretch: 100%; caret-color: var(--fokus); scrollbar-color: var(--feldrand) var(--grund); }
::selection { background: var(--licht-flaeche); color: var(--auf-licht); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }
.wp-site-blocks > * { margin-block: 0; }
.wp-block-post-content > .alignfull, .entry-content > .alignfull { margin-block: 0; }
.dhr-ico { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.visuell-versteckt, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dhr-rahmen { width: 100%; max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.alignfull > .dhr-rahmen { padding-inline: var(--rand); }
p { max-width: 65ch; }
.has-text-align-center { margin-inline: auto; }
.skip-link.screen-reader-text:focus { position: absolute !important; width: auto; height: auto; clip: auto; left: 1rem; top: 1rem; z-index: 100; background: var(--aktion); color: var(--auf-aktion); padding: 0.75rem 1rem; font-weight: 700; }

/* Überschriften: schmal und fett, normale Schreibung. Versalien nur im Plakat-Satzblock und im Stempel. */
h1, h2, h3, .wp-block-heading { font-stretch: 72%; text-wrap: balance; margin-block: 0 1.25rem; }
h3 { font-weight: 800; line-height: 1; }
h4 { font-stretch: 90%; font-weight: 750; }
.dhr-lead, .is-style-lead { font-size: var(--wp--preset--font-size--lead); color: var(--text-2); max-width: 38ch; margin-block: 0 2rem; }
.dhr-klein { color: var(--text-2); font-size: var(--wp--preset--font-size--klein); }

/* Knöpfe (core/button) */
.wp-element-button, .wp-block-button__link, .dhr-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 3.25rem; font-stretch: 88%; text-decoration: none; white-space: nowrap; cursor: pointer;
	border: 2px solid transparent;
	transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wp-element-button:active, .wp-block-button__link:active, .dhr-knopf:active { transform: scale(0.97); }
.dhr-knopf { padding: 0.875rem 1.5rem; border-radius: var(--radius); background: var(--aktion); color: var(--auf-aktion); font: inherit; font-weight: 750; font-stretch: 88%; font-size: 1.0625rem; line-height: 1.1; }
.wp-block-button.is-style-zweit .wp-block-button__link, .dhr-knopf.is-zweit { background: transparent; color: var(--text); border-color: currentColor; }
.wp-block-button.is-style-breit, .wp-block-button.is-style-breit .wp-block-button__link, .dhr-knopf.is-breit { width: 100%; }
@media (hover: hover) and (pointer: fine) {
	.dhr-knopf:hover { background: var(--aktion-hover); }
	.wp-block-button.is-style-zweit .wp-block-button__link:hover, .dhr-knopf.is-zweit:hover { color: var(--akzent); background: transparent; }
}
.wp-block-buttons { gap: 0.75rem; }
/* WhatsApp-Symbol vor Knöpfen und Links mit Klasse dhr-whatsapp (Phosphor, MIT) */
.dhr-whatsapp .wp-block-button__link::before, a.dhr-whatsapp::before {
	content: ""; width: 1.25em; height: 1.25em; flex: none; background: currentColor;
	-webkit-mask: var(--dhr-ico-whatsapp) center / contain no-repeat; mask: var(--dhr-ico-whatsapp) center / contain no-repeat;
}
:root { --dhr-ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M187.3,159.06A36.09,36.09,0,0,1,152,188a84.09,84.09,0,0,1-84-84A36.09,36.09,0,0,1,96.94,68.7,12,12,0,0,1,110,75.1l11.48,23a12,12,0,0,1-.75,12l-8.52,12.78a44.56,44.56,0,0,0,20.91,20.91l12.78-8.52a12,12,0,0,1,12-.75l23,11.48A12,12,0,0,1,187.3,159.06ZM236,128A108,108,0,0,1,78.77,224.15L46.34,235A20,20,0,0,1,21,209.66l10.81-32.43A108,108,0,1,1,236,128Zm-24,0A84,84,0,1,0,55.27,170.06a12,12,0,0,1,1,9.81l-9.93,29.79,29.79-9.93a12.1,12.1,0,0,1,3.8-.62,12,12,0,0,1,6,1.62A84,84,0,0,0,212,128Z'/%3E%3C/svg%3E"); }
.dhr-textlink, .is-style-textlink a { color: var(--akzent); font-weight: 700; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.dhr-textlink:hover, .is-style-textlink a:hover { text-decoration-thickness: 3px; }

/* Hinweisleiste (Block dhr/termine, Variante leiste) */
.dhr-hinweisleiste {
	display: flex; align-items: center; justify-content: center; gap: 0.5rem;
	background: var(--hinweis-grund); color: var(--hinweis-text);
	padding: 0.6rem var(--rand); font-size: 0.9375rem; font-weight: 450; line-height: 1.3; text-decoration: none; text-align: center;
}
a.dhr-hinweisleiste:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

/* Kopfzeile (Muster dhr/kopf) */
.dhr-kopf { position: relative; z-index: 20; background: var(--grund); border-bottom: 1px solid var(--linie); }
.dhr-kopf-innen { display: flex; align-items: center; gap: 1rem; max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; padding: 0.75rem var(--rand); min-height: 4rem; }
.dhr-logo { display: inline-block; }
.dhr-logo img { display: block; height: 2.5rem; width: auto; }
.dhr-hauptnav { display: none; margin-inline: auto; }
.dhr-hauptnav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.dhr-hauptnav a { color: var(--text); text-decoration: none; font-weight: 650; font-stretch: 88%; font-size: 1rem; padding-block: 0.5rem; background: linear-gradient(var(--marke), var(--marke)) left bottom / 0 3px no-repeat; transition: background-size 220ms var(--ease-out); }
.dhr-hauptnav a:hover, .dhr-hauptnav a[aria-current] { background-size: 100% 3px; }
.dhr-kopf-aktionen { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.dhr-kopf-tel { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 3rem; min-height: 3rem; justify-content: center; color: var(--text); text-decoration: none; font-weight: 650; }
.dhr-kopf-tel span, .dhr-kopf-cta { display: none; }
.dhr-menue-knopf { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 3rem; padding: 0 0.75rem; background: none; border: 2px solid var(--linie); border-radius: var(--radius); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.dhr-mobilmenue { padding: 1rem var(--rand) 2rem; border-top: 1px solid var(--linie); background: var(--grund); }
.dhr-mobilmenue[hidden] { display: none; }
.dhr-mobilmenue ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.dhr-mobilmenue li a { display: block; padding: 0.75rem 0; color: var(--kopf); font-stretch: 72%; font-weight: 800; font-size: 2rem; line-height: 1; text-decoration: none; }
.dhr-mobilmenue .dhr-knopf + .dhr-knopf { margin-top: 0.75rem; }
@media (min-width: 1024px) { .dhr-kopf-tel span { display: inline; } }
@media (min-width: 1100px) {
	.dhr-logo img { height: 3rem; }
	.dhr-hauptnav { display: block; }
	.dhr-kopf-cta { display: inline-flex; }
	.dhr-menue-knopf, .dhr-mobilmenue { display: none !important; }
}

/* Brotkrümel (Block dhr/brotkruemel) */
.dhr-brotkruemel { font-size: var(--wp--preset--font-size--klein); color: var(--text-2); }
.dhr-brotkruemel ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.dhr-brotkruemel li + li::before { content: "/"; margin-right: 0.5rem; color: var(--feldrand); }
.dhr-brotkruemel a { color: inherit; }

/* Seitenkopf für Inhaltsseiten (Vorlage page) */
.dhr-seitenkopf { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) 1.5rem; }
.dhr-seitenkopf h1 { font-size: var(--wp--preset--font-size--h2); margin-top: 1rem; }
.dhr-prosa { padding-block: 0 var(--abschnitt); }
.dhr-prosa h2 { font-size: var(--wp--preset--font-size--h3); margin-top: 2.5rem; }
.dhr-prosa h3 { font-size: 1.5rem; margin-top: 2rem; }

/* Hero (Muster dhr/hero-*)
   0.2.1: Das Foto steht als gerahmter Abzug innerhalb der Inhaltsbreite (Rückmeldung Johannes 01.11.:
   „zu breit“), breit rechts mit 40 Prozent, mobil über dem Text mit Rand. Kein weißer Verlauf über dem Foto
   (Abendfotos würden grau). Der Stempel sitzt als Rasterzelle auf der Ecke des Abzugs, nie auf dem Paar. */
.dhr-hero { position: relative; overflow: hidden; }
.dhr-hero-bild { margin: 0; position: relative; }
.dhr-hero-bild img { display: block; width: 100%; object-fit: cover; object-position: 65% 35%; }
/* Hochformat mit Kopf weit oben (Technik-Hero, 0.3.7): mobil 16:9 der obere Streifen, breit fast das ganze Bild */
.dhr-hero-bild.is-fokus-oben img { object-position: 50% 4%; }
@media (min-width: 900px) { .dhr-hero-bild.is-fokus-oben img { object-position: 50% 25%; } }
.dhr-hero-text { position: relative; z-index: 2; padding: 0 var(--rand) 2.5rem; }
.dhr-hero.has-bild {
	display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
	padding: 1rem max(var(--rand), calc((100% - var(--breit)) / 2)) 0;
}
.dhr-hero.has-bild .dhr-hero-unter { margin: 0.5rem 0 1.25rem; }
.dhr-hero.has-bild .dhr-hero-bild {
	grid-column: 1; grid-row: 1; margin: 0 0 1.25rem; padding: 0.4rem;
	background: var(--papier); border-radius: 2px; box-shadow: var(--schatten); rotate: -0.8deg;
}
.dhr-hero.has-bild .dhr-hero-bild img { aspect-ratio: 16 / 9; border-radius: 1px; }
.dhr-hero.has-bild .dhr-hero-text { grid-column: 1; grid-row: 2; padding: 0 0 2.5rem; }
.dhr-hero.has-bild .dhr-stempel {
	position: relative; top: auto; right: auto; left: auto; grid-column: 1; grid-row: 1;
	align-self: end; justify-self: start; margin: 0 0 0.75rem -0.35rem; width: 5.75rem; height: 5.75rem;
}
.dhr-hero.has-bild .dhr-stempel-gross { font-size: 1.5rem; }
.dhr-hero.has-bild .dhr-stempel-klein { font-size: 0.625rem; }
.dhr-hero h1.wp-block-heading { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); hyphens: auto; }
.dhr-hero-unter { margin: 0.75rem 0 1.5rem; max-width: 34ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: var(--text-2); }
.dhr-hero.is-klein .dhr-hero-text { padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px) {
	.dhr-hero-text { margin: 0 auto; padding: 4rem var(--rand) 4.5rem; width: 100%; max-width: calc(var(--breit) + 2 * var(--rand)); }
	.dhr-hero.has-bild { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: clamp(2rem, 4vw, 4.5rem); padding-block: 2.5rem 3rem; }
	.dhr-hero.has-bild .dhr-hero-bild { grid-column: 2; grid-row: 1; margin: 0; padding: 0.55rem; rotate: 1.2deg; }
	.dhr-hero.has-bild .dhr-hero-bild img { aspect-ratio: 4 / 5; max-height: calc(100svh - 12rem); min-height: 22rem; }
	.dhr-hero.has-bild .dhr-hero-text { grid-column: 1; grid-row: 1; margin: 0; padding: 0; max-width: none; }
	.dhr-hero.has-bild .dhr-hero-text > * { max-width: 36rem; }
	.dhr-hero.has-bild .dhr-stempel { grid-column: 2; align-self: start; justify-self: start; margin: -1.25rem 0 0 -3.5rem; width: 8.5rem; height: 8.5rem; }
	.dhr-hero.has-bild .dhr-stempel-gross { font-size: 2.3rem; }
	.dhr-hero.has-bild .dhr-stempel-klein { font-size: 0.75rem; }
	/* Knopf auch bei 1280 × 800 im ersten Bildschirm: Plakat etwas schmaler, Unterzeile zweizeilig */
	.dhr-hero.has-bild .dhr-plakat { width: clamp(15.5rem, 26vw, 24rem); }
	.dhr-hero.has-bild .dhr-hero-unter { max-width: 40ch; margin: 0.75rem 0 1.5rem; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.dhr-hero.has-bild .dhr-hero-bild { transition: rotate 300ms var(--ease-out); }
	.dhr-hero.has-bild .dhr-hero-bild:hover { rotate: 0deg; }
}

/* Plakat-Satzblock (Block dhr/plakat): jede Zeile füllt dieselbe Breite wie bei Holzlettern.
   Die Größe je Zeile steht als cqi am Element (Prozent der Blockbreite). */
.dhr-plakat-h { margin: 0; color: var(--kopf); }
.dhr-plakat { display: block; container-type: inline-size; text-transform: uppercase; font-stretch: 62%; font-weight: 850; line-height: 0.86; letter-spacing: -0.01em; color: var(--kopf); width: clamp(15.5rem, 30vw, 26rem); }
.dhr-plakat.is-breit { width: min(100%, 44rem); }
.dhr-zeile { display: block; overflow: hidden; padding-bottom: 0.02em; white-space: nowrap; }
.dhr-zeile > span { display: block; }
.dhr-plakat-ort { display: block; margin-top: 1rem; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); font-weight: 650; font-stretch: 90%; line-height: 1.25; color: var(--text); text-transform: none; letter-spacing: 0; max-width: 26ch; }

/* Stempel Open End (Muster, aria-hidden) */
.dhr-stempel {
	position: absolute; top: 1rem; right: 1rem; z-index: 3;
	width: 7.25rem; height: 7.25rem; border-radius: 50%;
	background: var(--licht-flaeche); color: var(--auf-licht);
	display: grid; place-content: center; text-align: center;
	transform: rotate(-10deg); box-shadow: 0 6px 18px rgba(14, 75, 69, 0.22);
}
.dhr-stempel::before { content: ""; position: absolute; inset: 0.35rem; border: 2px dashed currentColor; border-radius: 50%; opacity: 0.55; }
.dhr-stempel-gross { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.85rem; line-height: 0.85; }
.dhr-stempel-klein { font-weight: 750; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.08em; margin-top: 0.25rem; }
@media (min-width: 900px) {
	.dhr-stempel { top: 2.5rem; right: auto; left: calc(50% - 4.75rem); width: 9.5rem; height: 9.5rem; }
	.dhr-stempel-gross { font-size: 2.6rem; }
	.dhr-stempel-klein { font-size: 0.8125rem; }
}

/* Belegzeile */
.dhr-belege { border-block: 1px solid var(--linie); }
.dhr-belege ul { list-style: none; margin-block: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-block: 1rem; }
.dhr-belege li { display: inline-flex; align-items: center; gap: 0.4rem; font-stretch: 90%; font-weight: 650; font-size: 1rem; }
.dhr-belege .dhr-ico { color: var(--stern); stroke: var(--stern-rand); stroke-width: 10; width: 1em; height: 1em; }

/* Abschnitte */
.dhr-abschnitt { padding-block: var(--abschnitt); }
.dhr-abschnitt.is-anschluss { padding-top: 0; }
.dhr-abschnitt.has-flaeche, .dhr-flaeche { background: var(--flaeche); }
.dhr-zwei { display: grid; gap: 3rem; }
@media (min-width: 900px) { .dhr-zwei { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: start; } .dhr-zwei.is-mitte { align-items: center; } }

/* Termin-Check mit freien Samstagen (Block dhr/termine, Variante check) */
.dhr-termin-raster { display: grid; gap: 3rem; }
.dhr-check { display: grid; gap: 1rem; max-width: 30rem; }
.dhr-feld { display: grid; gap: 0.4rem; }
.dhr-feld label, .wpcf7 label { font-weight: 700; font-size: 0.9375rem; }
.dhr-feld input, .dhr-feld select, .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 select, .wpcf7 textarea {
	width: 100%; min-height: 3.25rem; padding: 0.75rem 0.875rem; border-radius: var(--radius);
	border: 2px solid var(--feldrand); background: var(--flaeche); color: var(--text);
	font: inherit; font-size: 1.0625rem; transition: border-color 160ms ease;
}
.dhr-feld input:focus-visible, .dhr-feld select:focus-visible, .wpcf7 :is(input, select, textarea):focus-visible { border-color: var(--fokus); }
.dhr-feld input.blitz { animation: dhr-blitz 700ms var(--ease-out); }
@keyframes dhr-blitz { 0% { box-shadow: 0 0 0 0 var(--licht-flaeche); } 30% { box-shadow: 0 0 0 6px var(--licht-flaeche); } 100% { box-shadow: 0 0 0 0 transparent; } }
.dhr-check-status { min-height: 1.5rem; margin: 0; font-weight: 650; }
.dhr-check-status.ist-frei { color: var(--akzent); }
.dhr-check-status.ist-vergeben { color: var(--licht); }
.dhr-tour { align-self: start; }
.dhr-tour-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin: 0 0 1rem; font-stretch: 72%; font-weight: 800; font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1; color: var(--kopf); }
.dhr-tour-unter { font-stretch: 90%; font-weight: 600; font-size: 1rem; color: var(--text-2); }
.dhr-tourliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--kopf); }
.dhr-tourliste li {
	display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 0.75rem;
	padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--linie);
	font-stretch: 70%; font-weight: 800; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.dhr-t-tag { color: var(--text-2); font-size: 0.7em; }
.dhr-t-status { font-stretch: 90%; font-size: 0.95rem; font-weight: 700; }
.dhr-tourliste .frei { cursor: pointer; transition: background-color 160ms ease, padding 200ms var(--ease-out); }
.dhr-tourliste .frei .dhr-t-status { background: var(--licht-flaeche); color: var(--auf-licht); padding: 0.35rem 0.6rem; border-radius: var(--radius); }
.dhr-tourliste .vergeben .dhr-t-datum { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--text-2); }
.dhr-tourliste .vergeben .dhr-t-status { color: var(--text-2); }
.dhr-tour-hinweis { margin-top: 0.75rem; color: var(--text-2); font-size: var(--wp--preset--font-size--klein); }
@media (hover: hover) and (pointer: fine) { .dhr-tourliste .frei:hover { background: var(--hinweis-grund); padding-left: 0.75rem; } }
@media (min-width: 900px) { .dhr-termin-raster { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: start; } }
/* Ohne Liste (Standard seit 05.11.2026): Überschrift und Einleitung links, Formular rechts. */
.dhr-check-zusage { margin: 0; color: var(--text-2); }
.dhr-check-status:empty { min-height: 0; }
@media (min-width: 900px) {
	.dhr-termin-raster.ohne-liste { grid-template-columns: 1fr; }
	.dhr-termin-raster.ohne-liste .dhr-termin-form { display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 5rem; align-items: start; }
	.dhr-termin-raster.ohne-liste .dhr-termin-form > :not(.dhr-check) { grid-column: 1; }
	.dhr-termin-raster.ohne-liste .dhr-check { grid-column: 2; grid-row: 1 / span 2; }
}

/* Index „Wofür ihr mich bucht“ */
.dhr-indexliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--kopf); }
.dhr-indexliste a { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.dhr-i-name { color: var(--kopf); font-stretch: 66%; font-weight: 850; font-size: clamp(2.25rem, 1.6rem + 3.4vw, 5rem); line-height: 0.95; letter-spacing: -0.01em; text-decoration: underline 0.06em transparent; text-underline-offset: 0.12em; transition: text-decoration-color 200ms ease; }
.dhr-i-info { grid-column: 1; color: var(--text-2); font-size: 1rem; }
.dhr-i-pfeil { grid-column: 2; grid-row: 1 / span 2; width: 2rem; height: 2rem; color: var(--marke); transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.dhr-indexliste a:hover .dhr-i-name { text-decoration-color: var(--marke); }
	.dhr-indexliste a:hover .dhr-i-pfeil { transform: translateX(0.4rem); }
}
@media (min-width: 900px) {
	.dhr-indexliste a { grid-template-columns: 1fr 22rem auto; }
	.dhr-i-info { grid-column: 2; grid-row: 1; }
	.dhr-i-pfeil { grid-column: 3; grid-row: 1; }
}

/* Wunschkarten und Setlist */
.dhr-wunsch-raster { display: grid; gap: 3rem; }
.dhr-setlist { position: relative; margin-top: 2rem; max-width: 26rem; background: var(--papier); color: var(--tinte); padding: 1.75rem 1.5rem 1.25rem; box-shadow: var(--schatten); border-radius: 2px; }
.dhr-setlist-kopf { margin: 0 0 0.75rem; font-stretch: 72%; font-weight: 800; font-size: 1.75rem; line-height: 1; border-bottom: 3px solid var(--tinte); padding-bottom: 0.5rem; }
.dhr-setlist ol { list-style: none; margin: 0; padding: 0; }
.dhr-setlist li { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid rgba(31, 45, 43, 0.15); }
.dhr-setlist li:last-child { border-bottom: 0; }
.dhr-s-nr { font-stretch: 62%; font-weight: 900; font-size: 2.5rem; line-height: 1; color: var(--licht); }
.dhr-s-titel { font-weight: 700; line-height: 1.2; }
.dhr-s-titel em { font-style: normal; font-weight: 400; color: var(--tinte-2); }
.dhr-s-anzahl { font-stretch: 70%; font-weight: 850; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.dhr-karten { position: relative; display: grid; gap: 1.5rem; padding-top: 1rem; }
.dhr-karte { position: relative; margin: 0; background: var(--papier); padding: 0.4rem; box-shadow: var(--schatten); border-radius: 2px; }
.dhr-karte img { display: block; width: 100%; }
/* Kreppband nur an echten Wunschkarten */
.dhr-karte::before { content: ""; position: absolute; top: -0.8rem; left: 50%; width: 5rem; height: 1.6rem; background: var(--tape); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); z-index: 1; }
.dhr-karte.k1 { transform: rotate(-2.5deg); }
.dhr-karte.k2 { transform: rotate(1.8deg); width: 92%; justify-self: end; }
.dhr-karte.k3 { transform: rotate(-1deg); width: 96%; }
@media (min-width: 900px) {
	.dhr-wunsch-raster { grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: center; }
	.dhr-karten { display: block; min-height: 36rem; }
	.dhr-karte { position: absolute; width: 68%; }
	.dhr-karte.k1 { top: 0; left: 0; }
	.dhr-karte.k2 { top: 9rem; right: 0; width: 64%; }
	.dhr-karte.k3 { top: 20rem; left: 10%; width: 66%; }
}

/* Zeitleiste „So läuft euer Abend“ (3A hell, Open End in Petrol mit Amber-Punkt) */
.dhr-abend { overflow: hidden; }
.dhr-zeitleiste { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; display: grid; gap: 2rem; }
.dhr-zeitleiste::before { content: ""; position: absolute; left: 0.3rem; top: 0.5rem; bottom: 0.5rem; width: 3px; background: #9FBFB4; }
.dhr-zeitleiste li { position: relative; display: grid; gap: 0.25rem; }
.dhr-zeitleiste li::before { content: ""; position: absolute; left: -1.55rem; top: 0.55rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--grund); border: 3px solid #6E8C84; }
.dhr-z-zeit { font-stretch: 62%; font-weight: 850; font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 0.9; color: var(--text); font-variant-numeric: tabular-nums; }
.dhr-z-name { font-weight: 750; font-size: 1.25rem; }
.dhr-z-text { color: var(--text-2); max-width: 30ch; }
.dhr-z-ende .dhr-z-zeit { color: var(--kopf); font-size: clamp(3.25rem, 2.5rem + 3.5vw, 5.5rem); }
.dhr-zeitleiste li.dhr-z-ende::before { border-color: var(--licht-flaeche); background: var(--licht-flaeche); }
.dhr-z-ende .dhr-z-text { color: var(--text); font-weight: 650; font-size: 1.125rem; }
@media (min-width: 1000px) {
	.dhr-zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.6fr; gap: 2rem; padding: 2.5rem 0 0; }
	.dhr-zeitleiste::before { left: 0; right: -50vw; top: 0.4rem; bottom: auto; width: auto; height: 3px; }
	.dhr-zeitleiste li::before { left: 0; top: -2.55rem; }
	.dhr-z-ende { align-self: end; }
}

/* Pakete als Tickets (Block dhr/pakete) */
.dhr-ticketreihe { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 19rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); padding: 0.5rem var(--rand) 1.5rem; scrollbar-width: thin; margin: 0; list-style: none; }
.dhr-ticket {
	scroll-snap-align: start; position: relative; display: grid; grid-template-rows: 1fr auto auto;
	background: var(--papier); color: var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten);
	-webkit-mask: radial-gradient(circle 0.7rem at 0 calc(100% - 7.6rem), transparent 98%, #000), radial-gradient(circle 0.7rem at 100% calc(100% - 7.6rem), transparent 98%, #000);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.dhr-t-haupt { padding: 1.5rem 1.4rem 1.25rem; border-top: 0.6rem solid var(--licht-flaeche); border-radius: var(--radius) var(--radius) 0 0; }
.dhr-ticket h3 { margin: 0 0 0.5rem; color: var(--kopf); font-stretch: 72%; font-weight: 800; font-size: 2rem; line-height: 0.95; }
.dhr-t-fakt { margin: 0 0 1.25rem; color: var(--tinte-2); line-height: 1.4; }
.dhr-t-preis { margin: 0; font-stretch: 70%; font-weight: 850; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dhr-t-preis span { font-stretch: 90%; font-weight: 600; font-size: 1rem; color: var(--tinte-2); }
.dhr-t-saison { margin: 0.6rem 0 0; color: var(--tinte-2); font-size: 0.9375rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.dhr-t-abriss { display: flex; justify-content: space-between; margin: 0 1rem; padding: 0.9rem 0.4rem; border-top: 2px dashed rgba(31, 45, 43, 0.35); font-stretch: 90%; font-weight: 700; font-size: 0.9375rem; }
.dhr-ticket .dhr-knopf { margin: 0 1rem 1rem; background: var(--aktion); color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .dhr-ticket .dhr-knopf:hover { background: var(--aktion-hover); } }
.dhr-kleingedruckt { color: var(--text-2); font-size: 0.9375rem; margin-top: 0.5rem; }
@media (min-width: 1100px) {
	.dhr-ticketreihe { grid-auto-flow: row; grid-template-columns: repeat(var(--dhr-spalten, 4), 1fr); overflow: visible; max-width: calc(var(--breit) + 2 * var(--rand)); margin-inline: auto; }
}

/* Kundenstimmen (Block dhr/stimmen) */
.dhr-stimmen { display: grid; gap: 3rem; }
.dhr-grosszitat { margin: 0; }
.dhr-sterne { display: flex; gap: 0.25rem; margin: 0 0 1rem; color: var(--stern); }
.dhr-sterne svg { width: 1.6rem; height: 1.6rem; fill: currentColor; stroke: var(--stern-rand); stroke-width: 10; }
.dhr-grosszitat blockquote { margin: 0; padding: 0; border: 0; }
.dhr-grosszitat blockquote p { margin: 0; max-width: 22ch; color: var(--kopf); font-stretch: 75%; font-weight: 750; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.04; text-wrap: balance; }
.dhr-grosszitat blockquote p.dhr-zitat-weiter { margin-top: 1.25rem; max-width: 40ch; color: var(--text); font-stretch: 100%; font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.5; }
.dhr-grosszitat figcaption, .dhr-zweit-quelle { margin-top: 1.25rem; color: var(--text-2); }
.dhr-zweitstimme { border-top: 2px solid var(--kopf); padding-top: 1.25rem; align-self: end; margin: 0; }
.dhr-zweitstimme blockquote { margin: 0; padding: 0; border: 0; }
.dhr-zweitstimme blockquote p { margin: 0; font-size: 1.25rem; font-weight: 600; }
.dhr-zweit-quelle { margin: 0.5rem 0 1.25rem; }
@media (min-width: 900px) { .dhr-stimmen { grid-template-columns: 1.7fr 1fr; gap: 5rem; } }
.dhr-stimme-einzel blockquote p { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }

/* Zwei-Klick-Einbettung (Block dhr/einbettung) */
.dhr-einbettung { position: relative; background: var(--flaeche); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: 0.75rem; }
.dhr-einbettung-titel { margin: 0; color: var(--kopf); font-stretch: 72%; font-weight: 800; font-size: 1.5rem; line-height: 1.05; }
.dhr-einbettung-hinweis { margin: 0; color: var(--text-2); font-size: var(--wp--preset--font-size--klein); }
.dhr-einbettung iframe { width: 100%; border: 0; border-radius: var(--radius); }
.dhr-einbettungen { display: grid; gap: 1rem; }
@media (min-width: 900px) { .dhr-einbettungen { grid-template-columns: repeat(3, 1fr); } }

/* Über mich */
.dhr-ich-bild { margin: 0; max-width: 26rem; }
.dhr-ich-bild img { display: block; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* Fotos 0.2.0: Bild mit Passepartout (versetzte Mint-Fläche wie ein unterlegter Karton) */
.dhr-bild-rahmen { margin: 0; position: relative; }
.dhr-bild-rahmen img { display: block; width: 100%; border-radius: var(--radius); box-shadow: 0.75rem 0.75rem 0 var(--hinweis-grund); }
.has-flaeche .dhr-bild-rahmen img, .dhr-flaeche .dhr-bild-rahmen img { box-shadow: 0.75rem 0.75rem 0 var(--papier); }
.dhr-bild-rahmen.is-quer img { aspect-ratio: 4 / 3; object-fit: cover; }
.dhr-bild-rahmen.is-hoch img { aspect-ratio: 4 / 5; object-fit: cover; }
.dhr-bildtext { gap: 2.25rem; }
.dhr-bildtext .dhr-bild-rahmen { margin-right: 0.75rem; }
@media (min-width: 900px) {
	.dhr-bild-rahmen img { box-shadow: 1.25rem 1.25rem 0 var(--hinweis-grund); }
	.has-flaeche .dhr-bild-rahmen img, .dhr-flaeche .dhr-bild-rahmen img { box-shadow: 1.25rem 1.25rem 0 var(--papier); }
	.dhr-bildtext { gap: 5rem; }
	.dhr-bildtext .dhr-bild-rahmen { margin-right: 1.25rem; }
	.dhr-bildtext .dhr-bild-rahmen.is-hoch { max-width: 28rem; }
}
.dhr-kicker { font-size: var(--wp--preset--font-size--h3); margin-bottom: 1.5rem; }

/* Bildstreifen (Kern-Block Galerie mit Klasse dhr-streifen): Abzüge mit weißem Rand, leicht gedreht.
   Die Galerie-Regeln des Kerns arbeiten mit einer ID im Selektor, darum hier ebenso. */
.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.875rem; margin: 0; }
.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:not(#dhr) {
	width: auto; margin: 0; padding: 0.4rem 0.4rem 0.4rem; background: var(--papier); border-radius: 2px; box-shadow: var(--schatten);
	rotate: -1.2deg;
}
.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:nth-child(even):not(#dhr) { rotate: 1deg; }
.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:not(#dhr) img { width: 100%; height: auto; flex: none; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; }
.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:not(#dhr) figcaption {
	position: static; padding: 0.5rem 0.25rem 0.1rem; background: none; color: var(--text-2); font-size: 0.875rem; text-align: left; max-height: none; overflow: visible;
}
@media (min-width: 900px) {
	.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-bottom: 2rem; }
	.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:nth-child(even):not(#dhr) { margin-top: 2rem; }
}
@media (hover: hover) and (pointer: fine) {
	.dhr-streifen-abschnitt .wp-block-gallery.has-nested-images.dhr-streifen figure.wp-block-image:not(#dhr):hover { rotate: 0deg; scale: 1.03; }
}

/* Bildband mit Stimme: Foto mit Papierkarte und Zitat (nie über Gesichtern: Karte unten links).
   0.2.2: Das Foto steht als gerahmter Abzug innerhalb der Inhaltsbreite wie der Hero
   (Rückmeldung Johannes 01.11.: Fotos nicht randabfallend), die Karte überlappt die untere linke Ecke. */
.dhr-bildband {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
	padding: clamp(2.5rem, 2rem + 3vw, 5rem) max(var(--rand), calc((100% - var(--breit)) / 2));
}
.dhr-bildband-bild { margin: 0; padding: 0.4rem; background: var(--papier); border-radius: 2px; box-shadow: var(--schatten); rotate: 0.6deg; }
.dhr-bildband-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; }
.dhr-bildband-karte {
	position: relative; z-index: 2; margin: -2.5rem 0.75rem 0; padding: 1.5rem 1.4rem 1.6rem;
	background: var(--papier); color: var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten);
	border-top: 0.6rem solid var(--licht-flaeche);
}
.dhr-bildband-karte .dhr-sterne { margin-bottom: 0.75rem; }
.dhr-bildband-zitat { margin: 0; padding: 0; border: 0; }
.dhr-bildband-zitat p { margin: 0; max-width: 34ch; color: var(--kopf); font-stretch: 75%; font-weight: 750; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.12; text-wrap: pretty; }
.dhr-bildband-zitat cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 650; font-size: 1rem; color: var(--text-2); }
@media (min-width: 900px) {
	.dhr-bildband { padding-bottom: calc(clamp(2.5rem, 2rem + 3vw, 5rem) + 2.5rem); }
	.dhr-bildband-bild { grid-area: 1 / 1; padding: 0.55rem; }
	.dhr-bildband-bild img { aspect-ratio: 16 / 9; max-height: 40rem; }
	.dhr-bildband-karte { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 0 -2.5rem -1rem; width: min(34rem, 56%); padding: 2rem 2.25rem 2.25rem; }
}

/* Anlass-Karten mit Foto (Feiern & Events, Locations der Stadtseite) */
.dhr-anlass.has-bild { padding-top: 0; border-top: 0; overflow: hidden; }
.dhr-anlass-bild { margin: 0 -1.4rem 1.25rem; border-bottom: 0.5rem solid var(--licht-flaeche); }
.dhr-anlass-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Anlass-Index mit Vorschaubild */
.dhr-indexliste.has-bilder a { grid-template-columns: 4.5rem 1fr auto; column-gap: 1rem; }
.dhr-indexliste.has-bilder .dhr-i-bild { grid-column: 1; grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius); transition: rotate 250ms var(--ease-out), scale 250ms var(--ease-out); }
.dhr-indexliste.has-bilder .dhr-i-name, .dhr-indexliste.has-bilder .dhr-i-info { grid-column: 2; min-width: 0; }
/* Mit Vorschaubild bleibt mobil weniger Breite: Name etwas kleiner, lange Wörter dürfen trennen (kein Überlauf bei 390 px) */
.dhr-indexliste.has-bilder .dhr-i-name { font-size: clamp(1.875rem, 1.2rem + 3.4vw, 5rem); hyphens: auto; overflow-wrap: break-word; }
.dhr-indexliste.has-bilder .dhr-i-pfeil { grid-column: 3; grid-row: 1 / span 2; }
@media (min-width: 900px) {
	.dhr-indexliste.has-bilder a { grid-template-columns: 8.5rem 1fr 20rem auto; column-gap: 1.75rem; }
	.dhr-indexliste.has-bilder .dhr-i-bild { grid-row: 1; width: 8.5rem; height: 6rem; }
	.dhr-indexliste.has-bilder .dhr-i-info { grid-column: 3; grid-row: 1; }
	.dhr-indexliste.has-bilder .dhr-i-pfeil { grid-column: 4; grid-row: 1; }
}
@media (hover: hover) and (pointer: fine) { .dhr-indexliste.has-bilder a:hover .dhr-i-bild { rotate: -2deg; scale: 1.06; } }

/* Abend: Kopf mit Foto */
.dhr-abend-kopf { display: grid; gap: 2rem; margin-bottom: 3rem; }
.dhr-abend-kopf .dhr-bild-rahmen { margin-right: 0.75rem; }
@media (min-width: 900px) { .dhr-abend-kopf { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-bottom: 4rem; } }

/* In Zahlen */
.dhr-zahlen { list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 2px solid var(--kopf); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.dhr-zahlen li { display: grid; gap: 0.5rem; align-content: start; }
.dhr-zahl { font-stretch: 62%; font-weight: 850; font-size: clamp(3.25rem, 2.4rem + 4vw, 6.5rem); line-height: 0.9; color: var(--kopf); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dhr-zahl-text { color: var(--text-2); max-width: 24ch; }
@media (min-width: 900px) { .dhr-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Kontakt: Porträt im Kopf, Foto neben den Schritten (nur breit) */
.dhr-kontakt-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: start; }
.dhr-avatar { margin: 0; width: clamp(5.5rem, 4rem + 6vw, 10rem); text-align: center; }
.dhr-avatar img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%; box-shadow: 0 0 0 0.35rem var(--papier), var(--schatten); }
.dhr-avatar figcaption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.25; color: var(--text-2); }
.dhr-kontakt-bild { margin-top: 2.5rem; }
@media (max-width: 899px) { .dhr-kontakt-bild { display: none; } }
@media (min-width: 900px) { .dhr-kontakt-kopf { grid-template-columns: minmax(0, 40rem) auto; justify-content: start; column-gap: 4rem; align-items: center; } }

/* FAQ (core/details mit Stil „FAQ“, dhr-core gibt dazu FAQPage-Schema aus) */
.dhr-faq { border-top: 2px solid var(--kopf); }
.wp-block-details.is-style-faq { border-bottom: 1px solid var(--linie); margin: 0; }
.wp-block-details.is-style-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-weight: 750; font-size: 1.1875rem; min-height: 3rem; }
.wp-block-details.is-style-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-faq summary::after {
	content: ""; width: 1.25rem; height: 1.25rem; flex: none; background: var(--marke); transition: transform 250ms var(--ease-out);
	-webkit-mask: linear-gradient(#000, #000) center / 100% 3px no-repeat, linear-gradient(#000, #000) center / 3px 100% no-repeat;
	mask: linear-gradient(#000, #000) center / 100% 3px no-repeat, linear-gradient(#000, #000) center / 3px 100% no-repeat;
}
.wp-block-details.is-style-faq[open] summary::after { transform: rotate(45deg); }
.wp-block-details.is-style-faq > :not(summary) { margin: 0 0 1.25rem; color: var(--text-2); }

/* Anlass-Karten (Feiern & Events) und drei Wege (Kontakt) */
.dhr-karten-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.dhr-anlass { background: var(--papier); box-shadow: var(--schatten); border-radius: var(--radius); padding: 1.5rem 1.4rem; border-top: 0.6rem solid var(--licht-flaeche); }
.dhr-anlass h3 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.dhr-anlass p { margin: 0 0 0.75rem; }
.dhr-anlass .dhr-preis { font-stretch: 70%; font-weight: 850; font-size: 2rem; line-height: 1; color: var(--tinte); }
.dhr-wege { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.dhr-wege a { display: grid; gap: 0.25rem; padding: 1.25rem; min-height: 6rem; background: var(--flaeche); border-radius: var(--radius); color: var(--text); text-decoration: none; border: 2px solid transparent; }
.dhr-wege a:hover { border-color: var(--aktion); }
.dhr-wege strong { color: var(--kopf); font-stretch: 72%; font-weight: 800; font-size: 1.75rem; line-height: 1; }
.dhr-schritte { counter-reset: schritt; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.dhr-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; }
.dhr-schritte li::before { content: counter(schritt); font-stretch: 62%; font-weight: 900; font-size: 2.25rem; line-height: 1; color: var(--licht); }
.dhr-haken { list-style: none; padding: 0; }
.dhr-haken li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; }
.dhr-haken li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.9rem; height: 0.5rem; border: solid var(--kopf); border-width: 0 0 3px 3px; transform: rotate(-45deg); }

/* Formular (Contact Form 7) */
.wpcf7 form { display: grid; gap: 1rem; max-width: 36rem; }
.wpcf7 p { margin: 0; }
.wpcf7 .wpcf7-submit { display: inline-flex; min-height: 3.25rem; padding: 0.875rem 1.5rem; border: 0; border-radius: var(--radius); background: var(--aktion); color: var(--auf-aktion); font: inherit; font-weight: 750; font-stretch: 88%; cursor: pointer; }
.wpcf7 .wpcf7-submit:hover { background: var(--aktion-hover); }
.wpcf7-not-valid-tip { color: #A3261B; font-weight: 650; font-size: 0.9375rem; margin-top: 0.25rem; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 1rem; border: 2px solid var(--kopf); border-radius: var(--radius); }
/* Grundregeln, die sonst aus dem abgeschalteten CF7-Stylesheet kämen */
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 form:is(.init, .resetting, .submitting) .wpcf7-response-output { display: none; }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: #A3261B; }
.wpcf7-form-control-wrap { position: relative; display: block; margin-top: 0.4rem; }
.wpcf7-not-valid-tip { display: block; }
.wpcf7-spinner { visibility: hidden; display: inline-block; width: 1.5rem; height: 1.5rem; margin: 0 0.75rem; vertical-align: middle; border: 3px solid var(--feldrand); border-top-color: var(--aktion); border-radius: 50%; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; animation: dhr-dreh 800ms linear infinite; }
@keyframes dhr-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wpcf7 form.submitting .wpcf7-spinner { animation: none; } }
/* Auswahlfelder: Rückweg als Gruppe, Kästchen groß genug zum Tippen */
.wpcf7 fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.wpcf7 legend { padding: 0; margin-bottom: 0.25rem; font-weight: 700; font-size: 0.9375rem; }
.wpcf7 .wpcf7-form-control-wrap:has(.wpcf7-checkbox, .wpcf7-radio) { margin-top: 0; }
.wpcf7 .wpcf7-list-item { display: inline-flex; margin: 0 1.25rem 0 0; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 400; font-size: 1rem; cursor: pointer; }
.wpcf7 input:is([type="checkbox"], [type="radio"]) { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--aktion); }
.wpcf7 :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Schluss und Anfrage-Box */
.dhr-schluss { background: var(--flaeche); padding-block: var(--abschnitt) calc(var(--abschnitt) + 1rem); }
.dhr-schluss .dhr-plakat { margin-bottom: 2rem; }
.dhr-schluss-tel { margin-top: 1.5rem; color: var(--text-2); }
.dhr-schluss-tel a { color: var(--text); font-weight: 750; }

/* Regionen (Block dhr/regionen) */
.dhr-regionen { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.dhr-regionen a { font-stretch: 66%; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.15; text-decoration: none; color: var(--text-2); transition: color 160ms ease; }
.dhr-regionen a:hover, .dhr-regionen a[aria-current] { color: var(--text); text-decoration: underline; text-decoration-color: var(--marke); }

/* Fußzeile: einzige dunkle Fläche (Petrol der Marke) */
.dhr-fuss {
	--text: #E6F0EC; --text-2: #B9D6CB; --kopf: #E6F0EC; --akzent: #7FF2AD; --fokus: #FCA311; --marke: #FCA311;
	--linie: rgba(230, 240, 236, 0.18);
	background: #0E4B45; color: var(--text); padding-block: 3rem calc(3rem + 5rem); font-size: 0.9375rem;
}
.dhr-fuss a { color: var(--text); }
.dhr-fuss .dhr-regionen { margin-bottom: 3rem; }
.dhr-fuss-raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.dhr-fuss-logo { width: 11rem; height: auto; }
.dhr-fuss-titel { font-size: 1rem; font-weight: 750; font-stretch: 100%; margin: 0 0 0.75rem; color: var(--text-2); }
.dhr-fuss ul:not(.dhr-regionen) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dhr-fuss li a { text-decoration: none; display: inline-block; padding-block: 0.25rem; }
.dhr-fuss li a:hover { text-decoration: underline; color: var(--akzent); }
/* Cookie-Einstellungen: Complianz öffnet das Banner bei Klick auf button.cmplz-manage-consent (eigener Klick-Handler, keine Stile außerhalb von #cmplz-manage-consent). */
.dhr-fuss-knopf { display: inline-block; margin: 0; padding: 0.25rem 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dhr-fuss-knopf:hover { text-decoration: underline; color: var(--akzent); }
.dhr-fuss-klein { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--text-2); }
@media (min-width: 900px) { .dhr-fuss { padding-bottom: 3rem; } }

/* Mobil-Leiste (Block dhr/mobilleiste) */
.dhr-mobilleiste {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0.5rem;
	padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
	background: var(--grund); border-top: 1px solid var(--linie);
	transform: translateY(110%); transition: transform 280ms var(--ease-drawer);
}
body.dhr-leiste-an .dhr-mobilleiste { transform: translateY(0); }
.dhr-mobilleiste a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 3rem; border-radius: var(--radius); border: 2px solid var(--linie); color: var(--text); text-decoration: none; font-weight: 750; font-stretch: 88%; transition: transform 160ms var(--ease-out); }
.dhr-mobilleiste a:active { transform: scale(0.97); }
.dhr-mobilleiste a.dhr-whatsapp::before { background: #128C4A; }
.dhr-mobilleiste .dhr-ml-primaer { background: var(--aktion); color: var(--auf-aktion); border-color: var(--aktion); }
@media (min-width: 900px) { .dhr-mobilleiste { display: none; } }

/* Blog, Archiv, Kundenstimmen */
.dhr-beitragsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.dhr-beitragsliste .wp-block-post-title { font-size: var(--wp--preset--font-size--h3); margin-bottom: 0.5rem; }
.dhr-beitragsliste .wp-block-post-title a { color: var(--kopf); text-decoration: none; }
.dhr-beitragsliste .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-post-date { color: var(--text-2); font-size: var(--wp--preset--font-size--klein); }

/* Bewegung: ein Moment beim Laden (Plakat fährt hoch, Stempel setzt auf, der Abzug legt sich ab).
   0.2.0 auf Wunsch von Johannes: Fotos, Karten und Zahlen blenden beim Scrollen einmal kurz ein
   (site.js setzt dhr-auftritt nur bei erlaubter Bewegung; ohne JavaScript ist alles sofort da). */
@media (prefers-reduced-motion: no-preference) {
	.js .dhr-hero .dhr-zeile > span { animation: dhr-hochfahren 800ms var(--ease-out) both; }
	.js .dhr-hero .dhr-zeile:nth-child(2) > span { animation-delay: 90ms; }
	.js .dhr-hero .dhr-zeile:nth-child(3) > span { animation-delay: 180ms; }
	.js .dhr-stempel { animation: dhr-stempeln 520ms var(--ease-out) 650ms both; }
	.js .dhr-hero.has-bild .dhr-hero-bild { animation: dhr-bild-ein 900ms var(--ease-out) both; }
	.dhr-auftritt {
		opacity: 0; translate: 0 1.25rem;
		transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out), rotate 250ms var(--ease-out), scale 250ms var(--ease-out);
		transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms, 0ms;
	}
	.dhr-auftritt.is-sichtbar { opacity: 1; translate: 0 0; }
}
@keyframes dhr-hochfahren { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes dhr-stempeln { from { opacity: 0; transform: scale(1.25) rotate(-22deg); } to { opacity: 1; transform: scale(1) rotate(-10deg); } }
@keyframes dhr-bild-ein { from { transform: translateY(0.75rem) rotate(2.5deg); } to { transform: none; } }
@media print { .dhr-auftritt { opacity: 1 !important; translate: none !important; } }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-property: opacity, color, background-color, border-color !important; }
	html { scroll-behavior: auto; }
}

/* Editor: Animationen und feste Leiste im Editor nicht zeigen */
.editor-styles-wrapper .dhr-mobilleiste { position: static; transform: none; }
.editor-styles-wrapper .dhr-zeile > span, .editor-styles-wrapper .dhr-stempel { animation: none !important; }

/* Ergänzungen 0.1.0 */
.dhr-stimmen.is-einzeln { grid-template-columns: 1fr; }
.dhr-belege a { color: inherit; }
.dhr-wege span { color: var(--text-2); }
.dhr-regionen-nav h2 { font-size: var(--wp--preset--font-size--h3); }
.dhr-stadt .dhr-regionen a { color: var(--kopf); }

/* Ergänzungen 0.2.2: Technik-Verleih, FAQ, Blog, Kundenstimmen */

/* Produktkarten im Technik-Verleih: Foto freigestellt auf Weiß, Daten als Liste, Mietpreis wie ein Abriss */
.dhr-produkte { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.dhr-produkt { display: flex; flex-direction: column; }
.dhr-produkt .dhr-anlass-bild { background: var(--papier); }
.dhr-produkt .dhr-anlass-bild img { aspect-ratio: 4 / 3; object-fit: contain; padding: 0.75rem; }
.dhr-produkt h3 { font-size: 1.5rem; }
.dhr-daten { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9375rem; color: var(--text-2); }
.dhr-daten li { padding: 0.3rem 0; border-bottom: 1px solid var(--linie); }
.dhr-anlass p.dhr-mietpreis { margin: auto 0 0.5rem; padding-top: 0.9rem; border-top: 2px dashed rgba(31, 45, 43, 0.35); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; color: var(--text-2); font-size: 0.9375rem; }
.dhr-mietpreis strong { font-stretch: 70%; font-weight: 850; font-size: 2rem; line-height: 1; color: var(--tinte); }
.dhr-produkt .is-style-textlink { margin: 0; }

/* Sprungmarken (FAQ, Technik): Themen als Reiter, mindestens 44 px hoch */
.dhr-sprungliste { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dhr-sprungliste a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 1rem; border: 2px solid var(--linie); border-radius: 999px; color: var(--kopf); font-weight: 700; text-decoration: none; background: var(--papier); }
.dhr-sprungliste a:hover { border-color: var(--aktion); }

/* Fließtext mit Fotos (Blog, Kundenstimmen): Fotos als Abzug mit weißem Rand innerhalb der Textbreite */
.dhr-prosa .wp-block-image { margin-block: 2rem; }
.dhr-prosa .wp-block-image img { display: block; padding: 0.4rem; background: var(--papier); border-radius: 2px; box-shadow: var(--schatten); }
.dhr-prosa .wp-block-image figcaption { color: var(--text-2); font-size: var(--wp--preset--font-size--klein); margin-top: 0.75rem; }
.dhr-prosa .wp-block-image.is-hoch img { max-height: 36rem; width: auto; margin-inline: auto; }
.dhr-prosa ul, .dhr-prosa ol { padding-left: 1.25rem; }
.dhr-prosa li { margin-bottom: 0.4rem; }
.dhr-prosa .wp-block-table { margin-block: 2rem; overflow-x: auto; }
.dhr-prosa .wp-block-table table { border-collapse: collapse; width: 100%; max-width: 40rem; font-variant-numeric: tabular-nums; }
.dhr-prosa .wp-block-table th, .dhr-prosa .wp-block-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linie); text-align: left; }
.dhr-prosa .wp-block-table thead th { border-bottom: 2px solid var(--kopf); color: var(--kopf); }
.dhr-prosa .wp-block-table td:last-child { text-align: right; }
.dhr-prosa .wp-block-table tr:last-child td { font-weight: 750; color: var(--tinte); }

/* Hinweis-Kasten im Fließtext (Blog: Weg zur passenden Seite) */
.dhr-hinweis { margin-block: 2.5rem; padding: 1.25rem 1.4rem; background: var(--flaeche); border-left: 0.5rem solid var(--licht-flaeche); border-radius: var(--radius); }
.dhr-hinweis p { margin: 0 0 0.5rem; }
.dhr-hinweis p:last-child { margin-bottom: 0; }

/* Zitat im Text (Kern-Block Zitat, z. B. Stimme auf der Stadtseite Marburg): Papierkarte mit Amber-Kopf wie das Bildband */
.dhr-abschnitt .wp-block-quote, .dhr-prosa > .wp-block-quote { margin: 2rem 0; padding: 1.25rem 1.4rem 1.4rem; background: var(--papier); color: var(--tinte); border: 0; border-top: 0.6rem solid var(--licht-flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.dhr-abschnitt .wp-block-quote p, .dhr-prosa > .wp-block-quote p { margin: 0; color: var(--kopf); font-weight: 650; font-size: 1.1875rem; line-height: 1.35; }
.dhr-abschnitt .wp-block-quote cite, .dhr-prosa > .wp-block-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-weight: 600; font-size: 0.9375rem; color: var(--text-2); }

/* Einzelseite Kundenstimme */
.dhr-stimme-mehr { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--kopf); }