@charset "UTF-8";
/* ============================================================
   david-reuchlein.de
   Naming: dre_block__element, all identifiers in English.
   ============================================================ */

/* ---------- Webfont ---------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Geist stays reserved for the big hero headline */
@font-face {
	font-family: "Geist";
	src: url("../fonts/geist-variable-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
	/* Colors */
	--bg:              #0f0a1a;
	--bg-surface:      #1a1128;
	--bg-card:         #1e1433;

	--primary:         #8b5cf6;   /* = Logo-Lila */
	--primary-dark:    #6d3fd4;
	--primary-light:   #a78bfa;
	--primary-glow:    rgba(139, 92, 246, .25);
	--accent:          #c084fc;
	--accent-muted:    #c3afff;

	--text:            #f4f0ff;
	--text-secondary:  #bcb2da;
	--text-muted:      #8579a6;

	--border:          rgba(139, 92, 246, .18);
	--border-hover:    rgba(139, 92, 246, .40);

	--gold:            #f5e663;
	--success:         #34d399;

	/* Typography */
	--font:         "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Geist", var(--font);

	/* Strictly descending: h1 > h2 > h3 > body */
	--fs-display: clamp(2.25rem, 6.4vw, 4rem);
	--fs-lead:    clamp(1.5rem, 2.8vw, 1.875rem);    /* h1: max 30px */
	--fs-h2:      22px;                              
	--fs-h3:      19px;
	--fs-body:    1.125rem; /* base */
	--fs-sm:      .9375rem;
	--fs-xs:      .8125rem;
	--fs-eyebrow: .75rem;

	--lh-tight:   1.08;
	--lh-heading: 1.25;
	--lh-body:    1.72;

	--ls-display: -.035em;
	--ls-heading: -.02em;
	--ls-eyebrow: .18em;

	/* Layout */
	--measure:   900px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--ease:      cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
	height: 100%;
	color-scheme: dark;
	background: var(--bg);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { border: 0; cursor: pointer; font: inherit; color: inherit; background: none; }

::selection { background: var(--primary); color: #fff; }

/* ---------- Background ---------- */
body {
	position: relative;
	min-height: 100%;
	font-family: var(--font);
	font-optical-sizing: auto;
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: var(--lh-body);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
	background: var(--bg);
	overflow-x: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* Fixed gradient layer behind the scrolling content */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--bg);
	background-image:
		radial-gradient(70% 87% at 75% 20%, #2d1b69 0%, #1a0f35 45%, #0f0a1a 100%);
}

/* Backdrop: floating orbs + technical mesh across the whole page */
.dre_backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.dre_backdrop__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .4;
	animation: dre_orbFloat 24s ease-in-out infinite;
}
.dre_backdrop__orb--d {
	width: 400px; height: 400px;
	bottom: -12%; right: 6%;
	background: rgba(139, 92, 246, .10);
	animation-delay: -20s;
}

@keyframes dre_orbFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(26px, -22px) scale(1.06); }
	66%      { transform: translate(-20px, 18px) scale(.96); }
}

.dre_backdrop__mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(139, 92, 246, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(139, 92, 246, .04) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 6%, transparent 76%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 6%, transparent 76%);
}

@media (prefers-reduced-motion: reduce) {
	.dre_backdrop__orb { animation: none; }
}

/* Starfield */
.dre_stars {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .4;
}

/* Central shine */
body::after {
	content: "";
	position: fixed;
	left: 50%;
	top: 42%;
	z-index: 0;
	width: min(1100px, 96vw);
	aspect-ratio: .74 / 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: .75;
	background:
		radial-gradient(closest-side,
			rgba(255, 255, 255, 0)     0%,
			rgba(255, 255, 255, 0)    30%,
			rgba(233, 221, 255, .008) 40%,
			rgba(233, 221, 255, .020) 50%,
			rgba(233, 221, 255, .028) 60%,
			rgba(216, 196, 255, .022) 70%,
			rgba(196, 168, 255, .012) 80%,
			rgba(176, 144, 250, .005) 90%,
			rgba(167, 139, 250, 0)   100%);
}

.dre_page {
	position: relative;
	z-index: 2;
	isolation: isolate;
	overflow-x: clip;   /* nothing may exceed the viewport width */
}

/* ---------- Typography ---------- */
h1, h2, h3 {
	color: var(--text);
	font-weight: 650;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-heading);
	text-wrap: balance;
}

p + p { margin-top: 1.15em; }

strong { color: var(--text); font-weight: 500; }
em, i { font-style: italic; }

a {
	color: var(--primary-light);
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: .22em;
	text-decoration-thickness: 1px;
	transition: color .2s var(--ease);
}
a:hover, a:focus-visible { color: var(--accent); text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--primary-light);
	outline-offset: 3px;
	border-radius: 4px;
}

.dre_hero__accent { color: var(--primary-light); line-height: 42px; }

.dre_hero__color_accent {
	color: #fff;
	background: var(--primary);
	padding: 5px 10px;
}

/* ---------- Layout ---------- */
#dre_content {
	max-width: var(--measure);
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 5vw, 2rem) clamp(3rem, 8vw, 5rem);
}

/* ---------- Hero ---------- */

.dre_hero {
	position: relative;
	margin-top: 50px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.dre_hero__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.dre_hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: start;   /* top-aligned: centring opened a big gap below the logo */
	gap: 1rem;
}

/* one logo per breakpoint: desktop sits above the grid, mobile lives inside
   .dre_hero__text so it stays flush with the centred text block */
.dre_hero__logo {
	display: block;
	width: 200px;
	height: auto;
	margin-bottom: 12px;
}
.dre_hero__logo--mobile { display: none; }

.dre_hero__text .dre_hero__headline { margin-bottom: 0; white-space: nowrap; letter-spacing: -.03em; }
.dre_hero__text h1 { margin-bottom: 0 !important; white-space: nowrap; }
.dre_hero__sep { margin: 0 .15em; }
.dre_hero__subline {
	display: inline-block;
	margin-top: 15px;   /* mobile overrides to 9px */
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.012em;
}

/* Portrait */
/* Portrait: head reaches out of a circular disc, chest cropped by it */
.dre_hero__photo {
	--disc: clamp(200px, 21vw, 270px);
	position: relative;
	align-self: end;
	width: var(--disc);
	height: calc(var(--disc) * 0.98 * 824 / 740);   /* full image height */
	margin-bottom: calc(clamp(.5rem, 2vw, 1.5rem) + 10px);
}

/* soft, wide glow behind the portrait */
.dre_hero__photo::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--disc);
	height: var(--disc);
	inset: auto 0 0 0;
	margin: 8%;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(126, 87, 255, .24) 0%,
		rgba(105, 70, 220, .12) 45%,
		transparent 72%);
	filter: blur(18px);
	pointer-events: none;
}

/* the disc: soft body and a drawn ring */
.dre_hero__disc {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--disc);
	height: var(--disc);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 24%, rgba(158, 130, 242, .14) 0%, rgba(130, 86, 226, .07) 45%, rgba(106, 68, 188, .03) 72%, rgba(96, 62, 172, 0) 100%),
		conic-gradient(from 210deg,
			rgba(139, 92, 246, .26) 0deg,
			rgba(96, 64, 168, .20) 90deg,
			rgba(70, 46, 124, .14) 190deg,
			rgba(124, 80, 214, .24) 290deg,
			rgba(139, 92, 246, .26) 360deg),
		linear-gradient(155deg, rgba(96, 64, 168, .30) 0%, rgba(74, 48, 132, .22) 55%, rgba(58, 38, 104, .16) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .07),
		inset 0 0 44px rgba(12, 7, 24, .45),
		0 24px 60px rgba(0, 0, 0, .40);
}

/* thin ring around the disc, brightest at the top left */
.dre_hero__disc::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(from 200deg,
		rgba(196, 172, 255, .55) 0deg,
		rgba(139, 92, 246, .18) 70deg,
		rgba(139, 92, 246, 0) 150deg,
		rgba(139, 92, 246, 0) 250deg,
		rgba(167, 139, 250, .30) 320deg,
		rgba(196, 172, 255, .55) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* wrapper carries the shadow so the mask below cannot clip it */
.dre_hero__photo picture {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 1;
	display: block;
	width: calc(var(--disc) * 0.98);
	transform: translateX(-50%);
}

/* the drop shadows only arm once the image has decoded (.is-ready via JS).
   Applying them earlier lets Safari flash the shadow of the unmasked
   rectangle on a cold load - visible as a boxy shimmer below the disc. */
.dre_hero__photo.is-ready picture {
	filter:
		contrast(1.03)
		saturate(.94)
		brightness(1.01)
		/* contact shadow: tight and dark, anchors the cut-out */
		drop-shadow(0 1px 2px rgba(14, 8, 28, .55))
		drop-shadow(-1px 4px 9px rgba(16, 9, 32, .32))
		/* cast shadow: light falls from the upper right, so it drifts left */
		drop-shadow(-5px 18px 32px rgba(0, 0, 0, .26));
}

.dre_hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	opacity: .95;
	/* visible: everything above the disc centre plus the disc itself */
	-webkit-mask-image:
		radial-gradient(circle at 50% calc(100% - var(--disc) / 2), #000 0 calc(var(--disc) / 2 - 1px), transparent calc(var(--disc) / 2)),
		linear-gradient(#000, #000);
	mask-image:
		radial-gradient(circle at 50% calc(100% - var(--disc) / 2), #000 0 calc(var(--disc) / 2 - 1px), transparent calc(var(--disc) / 2)),
		linear-gradient(#000, #000);
	-webkit-mask-size: 100% 100%, 100% calc(100% - var(--disc) / 2);
	mask-size: 100% 100%, 100% calc(100% - var(--disc) / 2);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ---------- Trust bar (rating + contact links) ---------- */
.dre_trustbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	margin: 0 0 10px;
	padding: 1rem 1.4rem;
	border-radius: 8px;
	background: linear-gradient(120deg, rgba(139, 92, 246, .14) 0%, rgba(139, 92, 246, .07) 46%, rgba(139, 92, 246, .03) 100%);
}

.dre_trustbar__rating {
	display: inline-flex;
	align-items: center;
	gap: 1.8rem;
	color: var(--primary-light);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	transition: color .2s var(--ease);
}
.dre_trustbar__rating img { width: 120px; height: auto; flex: 0 0 auto; }
.dre_trustbar__rating:hover { color: var(--primary-light); text-decoration: none; }

.dre_trustbar__actions {
	display: flex;
	align-items: center;
	/* fill the bar next to the seal so the icons don't sit lost on the right */
	flex: 1 1 auto;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}
/* Icon group: one shared surface, 1px dividers, equal widths across the bar */
.dre_trustbar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	height: 44px;
	color: var(--primary-light);
	line-height: 0;
	transition: color .2s var(--ease), background .2s var(--ease);
}
.dre_trustbar__link + .dre_trustbar__link { border-left: 1px solid rgba(255, 255, 255, .06); }
.dre_trustbar__link:hover,
.dre_trustbar__link:focus-visible {
	color: var(--primary-light);
	background: rgba(139, 92, 246, .18);
	text-decoration: none;
}
.dre_trustbar__link svg { width: 23px; height: 23px; flex: 0 0 auto; }

/* Headline with blinking cursor, no typing animation */
.dre_hero__headline {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(24px, 9.5vw, 60px); /* single line, text width = 8.665em */
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: var(--ls-heading);
	color: var(--text);
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}

.dre_hero__headline::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: .82em;
	margin-left: .14em;
	vertical-align: -.06em;
	background: #ffffff;
	animation: blink .62s step-end infinite alternate;
}

@keyframes blink { 50% { opacity: 0; } }

#dre_content h1 {
	font-size: 29px;
	line-height: 35px;
	font-weight: 600;
	letter-spacing: -.012em;
	color: var(--text-secondary);
	margin-bottom: 15px;
}
#dre_content h1 .dre_hero__accent { font-weight: 650; }

/* ---------- Intro copy ---------- */
#dre_intro { padding-bottom: 0; }

#dre_intro__paragraph .dre_intro__lead { color: #ffffff; font-size: 19px; font-weight: 700; }
/* compounds must not break at their hyphen */
.dre_nowrap { white-space: nowrap; }

#dre_intro__paragraph {
	font-size: var(--fs-body);
	line-height: 1.68;
	color: var(--text-secondary);
	hyphens: auto;
}

#dre_content h2 {
	font-size: var(--fs-h2);
	margin: clamp(1.5rem, 3vw, 2rem) 0 1.1rem;
	color: var(--primary-light);
}

#dre_content h3 {
	font-size: var(--fs-h3);
	font-weight: 600;
	margin: 2rem 0 .85rem;
}

/* Icon group: one shared surface, 1px dividers */

/* KI-Buttons: gleiche Familie, eine Stufe leiser */

/* ---------- Kontakt-Bereich (Datenliste mit dotted Leader, wie exylite-ui) ---------- */

/* ---------- ProvenExpert ---------- */
/* ---------- Customer quotes (slider) ---------- */
#dre_quotes { margin-bottom: 0; }

.dre_quotes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
}
#dre_content .dre_quotes__head h2 { margin: 0; }

.dre_quotes__nav { display: flex; gap: 8px; }
.dre_quotes__navButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 34px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	color: var(--text-muted);
	transition: color .2s var(--ease), background .2s var(--ease);
}
.dre_quotes__navButton:hover { color: var(--primary-light); background: rgba(139, 92, 246, .18); }

.dre_quotes__track {
	display: flex;
	gap: 20px;
	scroll-padding-left: 0;
	margin-top: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.dre_quotes__track::-webkit-scrollbar { display: none; }

.dre_quote {
	--quote-col: 32px;
	--quote-gap: .75rem;
	position: relative;
	overflow: hidden;
	flex: 0 0 calc((100% - 20px) / 2);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 30px;
	border-radius: 8px;
	background: linear-gradient(120deg, rgba(139, 92, 246, .14) 0%, rgba(139, 92, 246, .07) 46%, rgba(139, 92, 246, .03) 100%);
}
.dre_quote__body {
	display: flex;
	align-items: flex-start;
	gap: var(--quote-gap);
}

.dre_quote__mark {
	flex: 0 0 var(--quote-col);
	width: var(--quote-col);
	text-align: center;
	color: var(--primary);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 64px;
	font-weight: 400;
	line-height: .8;
	margin-top: .06em;
	opacity: .55;
	user-select: none;
}

.dre_quote__text {
	max-width: none;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: var(--text-secondary);
}
.dre_quote__author {
	margin-top: auto;
	padding-top: .5rem;
	display: flex;
	align-items: center;
	gap: var(--quote-gap);
	font-size: var(--fs-sm);
	line-height: 1.35;
	color: var(--text-muted);
}
.dre_quote__name {
	display: block;
	font-weight: 700;
	color: var(--text-secondary);
}
.dre_quote__authorText { min-width: 0; }
.dre_quote__company { display: block; }
.dre_quote__company a { font-size: inherit; font-weight: 500; }
.dre_quote__author img {
	width: var(--quote-col);
	height: var(--quote-col);
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.dre_quote__author a { font-size: inherit; }

/* ---------- Bridge copy between quotes and services ---------- */
.dre_bridge {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
}
.dre_bridge p { color: var(--text-secondary); }
.dre_bridge p + p { margin-top: .9rem; }

/* ---------- Services table ---------- */
.dre_visuallyHidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dre_services__wrap {
	position: relative;
	margin: 1rem 0 0;
}

/* fade appears only while the table can actually be scrolled */
.dre_services__wrap::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56px;
	border-radius: 0 8px 8px 0;
	background: linear-gradient(90deg, rgba(10, 6, 20, 0) 0%, rgba(10, 6, 20, .85) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s var(--ease);
}
.dre_services__wrap.is-scrollable::after { opacity: 1; }
.dre_services__wrap.is-end::after { opacity: 0; }

.dre_services {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dre_services table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.dre_services thead th {
	padding: .65rem 1rem;
	text-align: left;
	background: rgba(139, 92, 246, .10);
	color: var(--text);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.dre_services thead th:first-child { border-radius: 8px 0 0 0; }
.dre_services thead th:last-child  { border-radius: 0 8px 0 0; }

.dre_services tbody tr + tr th,
.dre_services tbody tr + tr td { border-top: 1px solid rgba(139, 92, 246, .09); }

.dre_services tbody th {
	width: 38%;
	padding: .8rem 1rem;
	text-align: left;
	vertical-align: top;
	color: var(--text);
	font-weight: 600;
}
.dre_services tbody td {
	padding: .8rem 1rem;
	vertical-align: top;
	color: var(--text-secondary);
}
.dre_services tbody tr:nth-child(odd) th,
.dre_services tbody tr:nth-child(odd) td { background: rgba(139, 92, 246, .035); }

/* ---------- Hosting partner ---------- */
.dre_partner {
	margin: 1.5rem 0;
	border-radius: 8px;
	background: linear-gradient(120deg, rgba(139, 92, 246, .14) 0%, rgba(139, 92, 246, .07) 46%, rgba(139, 92, 246, .03) 100%);
	overflow: hidden;
}
.dre_partner__body {
	display: grid;
	grid-template-columns: 172px 1fr;
	align-items: stretch;
	gap: 0;
	padding: 0;
}
.dre_partner__body > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(255, 255, 255, .04);
	transition: background .2s var(--ease);
}
.dre_partner__body > a:hover { background: rgba(139, 92, 246, .15); }
.dre_partner__body img { width: 118px; }
.dre_partner__body p {
	max-width: none;
	font-size: var(--fs-body);
	align-self: center;
	padding: 1.5rem;
}

/* ---------- AI summary links ---------- */
.dre_ai {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
	padding: 0;
}
.dre_ai__question {
	max-width: none;
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
}
/* equal-width buttons: grid tracks instead of content-sized flex items.
   flex: 1 1 auto lets the grid fill its flex line, so the tracks actually
   spread over the remaining width instead of hugging their content */
.dre_ai__links {
	max-width: none;
	margin: 0;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.dre_ai__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .85rem;
	height: 40px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: color .2s var(--ease), background .2s var(--ease);
}
.dre_ai__links a:hover {
	color: var(--primary-light);
	background: rgba(139, 92, 246, .18);
	text-decoration: none;
}

/* ---------- SEO copy ---------- */
.dre_seotext {
	margin-top: 0;
	padding-top: 0;
}
.dre_seotext p { font-size: var(--fs-body); line-height: 1.75; hyphens: auto; }
.dre_seotext h2 { font-size: var(--fs-h2); }
.dre_seotext h3 { font-size: var(--fs-h3); }

/* ---------- FAQ ---------- */
/* dashed dividers, same style as the legal-page head rule */
.dre_faq__item {
	padding: 1.15rem 0;
	border-top: 1px dashed var(--border-hover);
}
.dre_faq__item:last-child { border-bottom: 1px dashed var(--border-hover); }
#dre_content .dre_faq__question {
	margin: 0 0 .5rem;
	font-size: var(--fs-h3);
	color: var(--text);
}
.dre_faq__answer {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.75;
	color: var(--text-secondary);
	hyphens: auto;
}

/* ---------- Footer ---------- */
.dre_footer {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 5vw, 2rem) clamp(3rem, 7vw, 4rem);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
.dre_footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-bottom: 1rem;
}
.dre_footer__nav a {
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .02em;
}
.dre_footer__nav a:hover { color: var(--primary-light); }
.dre_footer__copyright {
	display: flex;
	align-items: center;
	gap: .7rem;
	letter-spacing: .02em;
}
.dre_footer__logo {
	width: 175px;
	height: auto;
	opacity: .85;
	margin-top: .5em;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
	/* Background: light only behind the hero, dark below for readability.
	   Layers scroll with the page instead of staying fixed. */
	body::before {
		position: absolute;
		background-image:
			radial-gradient(120% 42% at 78% 0%,
				#2d1b69 0%,
				#271761 26%,
				#1f1444 55%,
				#180f36 100%),
			linear-gradient(180deg,
				#1a1038 0%,
				#1a1038 12%,
				#181034 30%,
				#150d2c 48%,
				#120b24 64%,
				#0e081b 80%,
				#0a0614 92%,
				#080410 100%);
	}

	.dre_backdrop {
		position: absolute;
		height: 78vh;
		opacity: .5;
	}
	.dre_backdrop__orb { opacity: .16; filter: blur(90px); }
	.dre_backdrop__mesh { display: none; }

	.dre_stars {
		position: absolute;
		height: 82vh;
		opacity: .28;
	}
	/* extra stars for the hero area - the base pattern gets sparse on narrow screens */
	.dre_stars::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle 1.4px at 12.4% 8.1%,  rgba(255,255,255,0.42) 0 1.4px, transparent 1.4px),
			radial-gradient(circle 0.8px at 24.7% 16.9%, rgba(255,255,255,0.30) 0 0.8px, transparent 0.8px),
			radial-gradient(circle 1.1px at 8.2% 27.4%,  rgba(255,255,255,0.38) 0 1.1px, transparent 1.1px),
			radial-gradient(circle 0.7px at 33.5% 6.3%,  rgba(255,255,255,0.22) 0 0.7px, transparent 0.7px),
			radial-gradient(circle 1.5px at 18.9% 38.6%, rgba(255,255,255,0.34) 0 1.5px, transparent 1.5px),
			radial-gradient(circle 0.9px at 47.2% 22.8%, rgba(255,255,255,0.27) 0 0.9px, transparent 0.9px),
			radial-gradient(circle 1.2px at 61.8% 11.5%, rgba(255,255,255,0.40) 0 1.2px, transparent 1.2px),
			radial-gradient(circle 0.7px at 29.1% 31.2%, rgba(255,255,255,0.19) 0 0.7px, transparent 0.7px),
			radial-gradient(circle 1.0px at 6.6% 47.9%,  rgba(255,255,255,0.31) 0 1.0px, transparent 1.0px),
			radial-gradient(circle 1.3px at 38.4% 44.7%, rgba(255,255,255,0.36) 0 1.3px, transparent 1.3px),
			radial-gradient(circle 0.8px at 68.9% 29.3%, rgba(255,255,255,0.24) 0 0.8px, transparent 0.8px),
			radial-gradient(circle 1.1px at 15.3% 58.2%, rgba(255,255,255,0.28) 0 1.1px, transparent 1.1px),
			radial-gradient(circle 0.7px at 52.6% 36.1%, rgba(255,255,255,0.20) 0 0.7px, transparent 0.7px),
			radial-gradient(circle 1.4px at 91.7% 46.4%, rgba(255,255,255,0.33) 0 1.4px, transparent 1.4px);
		background-repeat: no-repeat;
	}

	.dre_hero::before { opacity: .4; }
	.dre_hero::after { opacity: .45; }

	/* Hero: headline over the full width, portrait centred, contact buttons in
	   their own row below. .dre_hero__grid and .dre_trustbar hand their children
	   up to .dre_hero via display: contents, so all four end up in one grid -
	   that is what lets the ProvenExpert seal share the photo's cell.
	   The middle column is exactly the disc width, so the seal can align to the
	   right edge of the portrait instead of the right edge of the screen. It is
	   a fixed length, not auto: the nowrap headline spans all columns and would
	   otherwise inflate an auto track. */
	.dre_hero {
		--photo: min(200px, 56vw);   /* vorlaeufig klein, bis David ein neues Foto hat */
		display: grid;
		grid-template-columns: 1fr var(--photo) 1fr;
		column-gap: 0;
		row-gap: 0;   /* Abstaende sitzen auf den Kindern, siehe unten */
		margin-top: 24px;
		padding-bottom: 0;
	}
	.dre_hero__grid,
	.dre_trustbar { display: contents; }

	/* Der Abstand zum Foto haengt am Text, nicht am Foto: sonst waechst die
	   Foto-Zeile und das Siegel darauf sitzt nicht mehr richtig. */
	/* Zeilen bleiben linksbuendig, der Textblock als Ganzes sitzt aber auf
	   derselben Mittelachse wie das Foto darunter. Die Blockbreite gibt die
	   nowrap-Headline vor - deshalb darf die h1 mit ihrer max-content-Breite
	   nicht mitreden: width: 0 nimmt sie aus der fit-content-Rechnung raus,
	   min-width: 100% laesst sie die fertige Blockbreite trotzdem fuellen. */
	.dre_hero__text {
		grid-row: 1;
		grid-column: 1 / -1;
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		margin-bottom: 1.5rem;
	}
	.dre_hero__logo--desktop { display: none; }
	.dre_hero__logo--mobile {
		display: block;
		width: 150px;
		margin-bottom: 0;
	}
	/* Die Blockbreite ist das Maximum aus Headline und der Akzentzeile
	   „Shopware Freelancer aus Würzburg" - die soll einzeilig bleiben. Nur die
	   Subline wird per width: 0 aus der Rechnung genommen, sonst wuerde ihre
	   max-content-Breite den Block auf fast volle Breite aufziehen. */
	/* nowrap allein reicht nicht: „Shopware Freelancer aus Würzburg" braucht
	   nachgemessen 17.14em, bei 21px also 360px - das passt erst ab ~420px
	   Viewport. Deshalb skaliert die Zeile mit, damit sie bis runter zum
	   iPhone SE (320px) einzeilig bleibt. 4.9vw ist der Wert, bei dem sie auf
	   allen gaengigen Breiten mit etwas Luft in den Content passt. */
	.dre_hero__accent {
		white-space: nowrap;
		font-size: clamp(14px, 4.9vw, 21px);
	}
	.dre_hero__subline { width: 0; min-width: 100%; }
	.dre_hero__photo {
		--disc: var(--photo);
		grid-row: 2;
		grid-column: 2;
		justify-self: center;
		align-self: end;
		margin-top: 0;
		margin-bottom: 0;
	}
	.dre_hero__sep { display: none; }
	.dre_hero__text h1 .dre_hero__sub2 { display: block; }

	/* Headline: a touch smaller, tighter to the h1 */
	.dre_hero__headline { font-size: clamp(22px, 8.4vw, 46px); }
	.dre_hero__text { gap: .55rem; }

	/* Typography scale for small screens */
	:root {
		--fs-body: 15px;
		--fs-h2:   21px;
		--fs-h3:   18px;
		--fs-sm:   14px;
		--fs-xs:   12.5px;
	}
	#dre_content h1 { font-size: 21px; line-height: 28px; margin-bottom: 12px; }
	/* extra air between the accent badge and the subline */
	.dre_hero__subline { font-size: 17px; margin-top: 9px; }
	.dre_hero__text h1 { white-space: normal; }
	#dre_intro__paragraph .dre_intro__lead { font-size: 17px; }

	/* Trust bar: the seal sits on the portrait itself, bottom right, straddling
	   the edge of the disc. It shares the photo's grid cell and therefore needs
	   a z-index above the picture (which carries z-index: 1).
	   The claim text only exists on desktop. */
	.dre_trustbar__rating {
		grid-row: 2;
		grid-column: 2;
		justify-self: end;
		align-self: end;
		position: relative;
		z-index: 2;
	}
	.dre_trustbar__rating span { display: none; }
	.dre_trustbar__rating img { width: 88px; }

	/* Contact buttons: own row below the portrait, full width */
	.dre_trustbar__actions {
		grid-row: 3;
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 29px;   /* 20px ab Ring, der 9px ueber den Kreis ragt */
	}
	.dre_trustbar__link { height: 54px; }
	.dre_trustbar__link svg { width: 26px; height: 26px; }

	/* Copy */
	.dre_intro__motto { margin-left: 0; }

	.dre_quote__mark { font-size: 52px; }

	/* Slider: one card, next one peeking in */
	.dre_quotes__track { gap: 12px; }
	.dre_quote { flex: 0 0 88%; padding: 22px; }
	.dre_quotes__nav { display: none; }
}

@media (max-width: 560px) {
	#dre_content { padding-bottom: 3rem; }
	.dre_ai__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	#dre_content h2 { margin-top: 1.75rem; }
	#dre_content h1 { font-size: 20px; line-height: 27px; }
	.dre_hero__subline { font-size: 16px; }
	#dre_intro__paragraph .dre_intro__lead { font-size: 16px; }

	/* Spacing */
	.dre_hero { margin-top: 16px; margin-bottom: 16px; }
	#dre_quotes { margin-bottom: 1.5rem; }

	/* Partner card: single column */
	.dre_partner__body { grid-template-columns: 1fr; }
	.dre_partner__body > a { padding: 1.25rem; }
	.dre_partner__body p { padding: 1.25rem; }

	/* AI links stacked */
	.dre_ai { flex-direction: column; align-items: flex-start; gap: .75rem; }
	/* column layout: flex-grow acts on the height here, so full width needs width */
	.dre_ai__links { gap: 6px; width: 100%; }
	.dre_ai__links a { height: 38px; padding: 0 .7rem; font-size: var(--fs-xs); }

	.dre_footer__nav { gap: .4rem 1rem; }
}

@media (max-width: 420px) {
	.dre_trustbar__link svg { width: 24px; height: 24px; }
	.dre_quote { --quote-gap: .6rem; }
}

/* ---------- Back to top ---------- */
.dre_toTop {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 120;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	background:
		linear-gradient(120deg, rgba(139, 92, 246, .22) 0%, rgba(139, 92, 246, .12) 100%),
		#150e28;
	color: var(--primary-light);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--ease), visibility .25s, background .2s linear, color .2s linear;
}
.dre_toTop.is-visible {
	opacity: 1;
	visibility: visible;
}
.dre_toTop:hover,
.dre_toTop:focus-visible {
	background:
		linear-gradient(120deg, rgba(139, 92, 246, .34) 0%, rgba(139, 92, 246, .20) 100%),
		#150e28;
	color: #fff;
}

/* ---------- Cookie consent ---------- */
.dre_cc {
	position: fixed;
	inset: 0;
	z-index: 140;
}
.dre_cc[hidden] { display: none; }

.dre_cc__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 3, 10, .55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: dre_ccFade .3s ease;
}

.dre_cc__card {
	position: absolute;
	left: 50%;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	width: min(680px, calc(100% - 2rem));
	padding: 1.6rem 1.7rem 1.5rem;
	border-radius: 8px;
	background:
		linear-gradient(120deg, rgba(139, 92, 246, .14) 0%, rgba(139, 92, 246, .07) 46%, rgba(139, 92, 246, .03) 100%),
		#150e28;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	animation: dre_ccUp .35s ease;
}
.dre_cc__card[hidden] { display: none; }
.dre_cc__card:focus { outline: none; }

.dre_cc__card h3 {
	font-size: var(--fs-h3);
	margin-bottom: .45rem;
}
.dre_cc__text {
	max-width: none;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--text-secondary);
}
.dre_cc__text a { text-decoration: underline; }

.dre_cc__actions {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
}

.dre_cc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 1.1rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, .05);
	color: var(--text-secondary);
	font-size: var(--fs-sm);
	font-weight: 500;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.dre_cc__btn:hover { background: rgba(139, 92, 246, .18); color: var(--text); }
.dre_cc__btn--primary {
	background: var(--primary);
	color: #fff;
}
.dre_cc__btn--primary:hover { background: var(--primary-light); color: #1a1030; }

.dre_cc__link {
	margin-left: auto;
	padding: .4rem 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dre_cc__link:hover { color: var(--primary-light); }

.dre_cc__card--prefs {
	max-height: min(82vh, 640px);
	overflow-y: auto;
}
.dre_cc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .45rem;
}
.dre_cc__head h3 { margin-bottom: 0; }
.dre_cc__close {
	color: var(--text-muted);
	font-size: 1rem;
	line-height: 1;
	padding: .3rem;
}
.dre_cc__close:hover { color: var(--text); }

.dre_cc__cat {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1rem 0;
	border-top: 1px solid var(--border);
	margin-top: 1rem;
}
.dre_cc__catText strong {
	display: block;
	color: var(--text);
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-bottom: .2rem;
}
.dre_cc__catText span {
	display: block;
	color: var(--text-muted);
	font-size: var(--fs-xs);
	line-height: 1.55;
}

.dre_cc__switch {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	margin-top: .1rem;
	cursor: pointer;
}
.dre_cc__switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: inherit;
}
.dre_cc__slider {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	transition: background .25s var(--ease);
}
.dre_cc__slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	transition: transform .25s var(--ease);
}
.dre_cc__switch input:checked + .dre_cc__slider { background: var(--primary); }
.dre_cc__switch input:checked + .dre_cc__slider::before { transform: translateX(18px); }
.dre_cc__switch input:focus-visible + .dre_cc__slider { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.dre_cc__switch--locked { cursor: default; opacity: .55; }

@keyframes dre_ccFade { from { opacity: 0; } }
@keyframes dre_ccUp { from { opacity: 0; transform: translate(-50%, 14px); } }

@media (max-width: 720px) {
	.dre_cc__link { margin-left: 0; }
	.dre_cc__actions { gap: .6rem; }
	/* the two buttons share one row; the prefs link wraps below */
	.dre_cc__btn { flex: 1 1 0; padding: 0 .5rem; white-space: nowrap; }
}

/* ---------- Starfield pattern ---------- */
.dre_stars{
	background-image:radial-gradient(circle 0.9px at 55.3% 92.8%,rgba(255,255,255,0.318) 0 0.9px,transparent 0.9px),
		radial-gradient(circle 1.6px at 85.9% 19.2%,rgba(255,255,255,0.482) 0 1.6px,transparent 1.6px),
		radial-gradient(circle 1.3px at 83.1% 71.0%,rgba(255,255,255,0.354) 0 1.3px,transparent 1.3px),
		radial-gradient(circle 0.7px at 54.9% 79.5%,rgba(255,255,255,0.227) 0 0.7px,transparent 0.7px),
		radial-gradient(circle 0.9px at 78.2% 35.6%,rgba(255,255,255,0.469) 0 0.9px,transparent 0.9px),
		radial-gradient(circle 0.9px at 41.9% 64.1%,rgba(255,255,255,0.454) 0 0.9px,transparent 0.9px),
		radial-gradient(circle 0.7px at 42.8% 9.2%,rgba(255,255,255,0.211) 0 0.7px,transparent 0.7px),
		radial-gradient(circle 1.6px at 94.2% 25.5%,rgba(255,255,255,0.467) 0 1.6px,transparent 1.6px),
		radial-gradient(circle 1.0px at 79.7% 83.4%,rgba(255,255,255,0.347) 0 1.0px,transparent 1.0px),
		radial-gradient(circle 0.8px at 80.9% 62.3%,rgba(255,255,255,0.199) 0 0.8px,transparent 0.8px),
		radial-gradient(circle 1.6px at 54.1% 68.7%,rgba(255,255,255,0.355) 0 1.6px,transparent 1.6px),
		radial-gradient(circle 1.6px at 87.1% 3.6%,rgba(255,255,255,0.155) 0 1.6px,transparent 1.6px),
		radial-gradient(circle 1.6px at 70.1% 48.0%,rgba(255,255,255,0.495) 0 1.6px,transparent 1.6px),
		radial-gradient(circle 0.7px at 74.0% 61.0%,rgba(255,255,255,0.355) 0 0.7px,transparent 0.7px),
		radial-gradient(circle 1.0px at 73.3% 41.6%,rgba(255,255,255,0.218) 0 1.0px,transparent 1.0px),
		radial-gradient(circle 0.7px at 90.4% 90.0%,rgba(255,255,255,0.28) 0 0.7px,transparent 0.7px),
		radial-gradient(circle 0.6px at 63.3% 5.2%,rgba(255,255,255,0.133) 0 0.6px,transparent 0.6px);
	background-repeat:no-repeat;
}

/* ---------- Legal pages (imprint / privacy) ---------- */
.dre_legalHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 50px;
	padding-bottom: 1.25rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
	border-bottom: 1px dashed var(--border-hover);
}

.dre_legalHead__logo img { display: block; width: 200px; height: auto; }

.dre_legalHead__back {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: var(--fs-sm);
	color: var(--text-secondary);
	white-space: nowrap;
}
.dre_legalHead__back:hover { color: var(--accent); }

.dre_legal address { font-style: normal; }
.dre_legal .dre_legal__updated { margin-top: 2.5rem; font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 560px) {
	.dre_legalHead { flex-direction: column; align-items: flex-start; gap: .9rem; }
	.dre_legalHead__logo img { width: 170px; }
}