/* LOCATOR Webseite (interner Entwurf): hell/dunkel nach Systemeinstellung, ohne externe Schriften oder Skripte */
:root {
	--bg: #f6f7f5;
	--band: #ecefeb;
	--card: #ffffff;
	--text: #18201c;
	--muted: #5c6862;
	--line: #d6ddd8;
	--green: #1d8f3f;
	--green-soft: #e3f3e8;
	--red: #c8102e;
	--blue: #1f5fbf;
	--shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121614;
		--band: #181e1b;
		--card: #1f2622;
		--text: #e7ece9;
		--muted: #9aa8a1;
		--line: #2f3a34;
		--green: #3ccb68;
		--green-soft: #1d3326;
		--red: #ef5a6b;
		--blue: #7aa7ee;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4);
		color-scheme: dark;
	}
}
* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: 72px;}
body {margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}
img {max-width: 100%; height: auto; display: block;}
a {color: var(--green);}
h1, h2, h3 {line-height: 1.2; margin: 0 0 .6em;}
h1 {font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.02em;}
h2 {font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em;}
h3 {font-size: 1.1rem;}
p {margin: 0 0 1em;}
figure {margin: 0;}
figcaption {font-size: .8rem; color: var(--muted); margin-top: .4em;}

.draft {background: #f5c518; color: #222; text-align: center; font-size: .85rem; font-weight: 600; padding: 4px 16px;}
.top {position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 10px clamp(16px, 4vw, 48px); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);}
.brands {display: flex; align-items: center;}
.brand {display: flex;}
.logo {height: 34px; width: auto;}
.logo-dunkel {display: none;}
@media (prefers-color-scheme: dark) {.logo-hell {display: none;} .logo-dunkel {display: block;}}
.top nav {display: flex; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end;}
.top nav a {color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500;}
.top nav a:hover {color: var(--green);}

.wrap {max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px);}
section {padding: clamp(48px, 8vw, 96px) 0;}
.band {background: var(--band);}

.hero {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
	max-width: 1280px; margin: 0 auto; padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 48px);}
.eyebrow {color: var(--red); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;}
.lead {font-size: 1.15rem; color: var(--muted);}
.lead.narrow {max-width: 760px;}
.hero-img img {border-radius: 14px; box-shadow: var(--shadow);}
.facts {list-style: none; padding: 0; margin: 28px 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
.facts li {background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;}
.facts b {display: block; font-size: 1.5rem; color: var(--green);}
.facts span {font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; hyphens: auto;}
.note, .source {font-size: .85rem; color: var(--muted);}

.two {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;}
.two figure img, .wide img, .stack img {border-radius: 12px; box-shadow: var(--shadow);}
.wide {margin: 32px 0;}

.steps {list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.steps li {background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: var(--shadow);}
.step {display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff;
	font-weight: 700; margin-bottom: 12px;}
.steps p {color: var(--muted); margin: 0;}
.benefits {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.benefits div {border-left: 4px solid var(--green); padding: 4px 0 4px 16px;}
.benefits p {color: var(--muted); margin: 0;}

.list {padding-left: 1.2em; margin: 0;}
.list li {margin: .35em 0;}

.screen {margin: 28px 0;}
.screen img {border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow);}
.gallery {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 32px;}
.gallery img {border-radius: 10px; border: 1px solid var(--line);}
.features {align-items: start;}
.phones {display: flex; gap: 16px; justify-content: center;}
.phones .zoom {width: min(46%, 240px);}
.phones img {width: 100%; border-radius: 22px; border: 6px solid #222; box-shadow: var(--shadow);}

.tablewrap {overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px;}
table {border-collapse: collapse; width: 100%; font-size: .95rem;}
th, td {text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;}
th {font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);}
tbody tr:last-child td {border-bottom: none;}
.num {font-variant-numeric: tabular-nums;}
td.num, th.num {text-align: right;}

.cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.card {display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
	color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s;}
.card:hover {transform: translateY(-2px); border-color: var(--green);}
.kicker {font-size: .8rem; color: var(--red); font-weight: 600;}
.muted {color: var(--muted);}
.button {display: inline-block; background: var(--green); color: #fff; text-decoration: none; font-weight: 600; padding: 10px 18px; border-radius: 10px;}
.todo {background: #f5c518; color: #222; padding: 0 4px; border-radius: 4px;}
.kontakt-logo {display: flex; justify-content: center;}
.two .kontakt-logo img {width: min(100%, 360px); box-shadow: none; border-radius: 0;}
.schriftzug {margin-top: 20px;}
.schriftzug img {background: #fff; border-radius: 12px; padding: 12px 16px;}

footer {border-top: 1px solid var(--line); padding: 28px 0;}
.foot {display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .9rem;}


.contact {font-style: normal; margin: 0 0 1.2em; line-height: 1.7;}
.legal {max-width: 820px;}
.legal h2 {font-size: 1.25rem; margin-top: 1.6em;}
.legal dl {display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 1.2em 0;}
.legal dt {color: var(--muted);}
.legal dd {margin: 0;}
@media (max-width: 560px) {.legal dl {grid-template-columns: 1fr; gap: 0;} .legal dd {margin-bottom: 8px;}}

.praxis {align-items: start; margin-bottom: 28px;}
.pair {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 32px 0;}
.pair img {border-radius: 12px; box-shadow: var(--shadow);}
.stack figure + figure {margin-top: 20px;}
.tips {background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin: 0 0 32px;}
.tips h3 {margin-bottom: .4em;}
.partnerline {display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; font-size: .9rem; color: var(--muted);}
.partnerline img {height: 32px; width: auto;}
.videos {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
.video-start, .video iframe {display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px;
	overflow: hidden; box-shadow: var(--shadow); background: #000;}
.video-start img {width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .15s;}
.video-start:hover img {opacity: 1;}
.play {position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
	background: rgba(200, 16, 46, .92); box-shadow: 0 4px 16px rgba(0, 0, 0, .35);}
.play::after {content: ""; position: absolute; left: 30px; top: 22px; border-style: solid; border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent #fff;}
.video-title {position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; color: #fff; font-weight: 600;
	background: linear-gradient(transparent, rgba(0, 0, 0, .7));}


.zoom {display: block; cursor: zoom-in;}
.lightbox {max-width: 96vw; max-height: 96vh; padding: 0; border: 0; border-radius: 12px; background: var(--card); color: var(--text);
	overflow: hidden; cursor: zoom-out;}
.lightbox::backdrop {background: rgba(0, 0, 0, .8);}
.lightbox img {display: block; max-width: 96vw; max-height: calc(96vh - 52px); width: auto; height: auto; margin: 0 auto;}
.lightbox-text {margin: 0; padding: 10px 52px 12px 16px; font-size: .9rem; color: var(--muted);}
.lightbox-close {position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, .6); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;}

/* schmale Fenster, zuletzt, damit es alle Rasterregeln überschreibt */
@media (max-width: 860px) {
	.hero, .two {grid-template-columns: 1fr;}
	.steps, .benefits, .gallery, .cards, .videos, .pair {grid-template-columns: 1fr;}
	.top {flex-direction: column; align-items: flex-start; gap: 6px;}
	.top nav {justify-content: flex-start;}
	html {scroll-padding-top: 110px;}
}