/*
 * Augenoptik Dehmer – Haupt-Stylesheet.
 * Werte 1:1 aus referenz/css/live-custom.css übernommen (siehe Kommentare je Block, Quellzeilen
 * dort). Technik aufgeräumt: eigene CSS-Variablen für die Design-Tokens, Container-/Grid-System
 * in Flexbox statt Bootstrap 3. Kein Redesign – siehe CLAUDE.md.
 *
 * Enthält aktuell: Reset, Tokens, Container/Grid, Typografie, Header/Nav (Desktop+mobil),
 * #main-Abstand, Hero-Video, Banner-Carousel (Fade), Footer, WhatsApp-Lasche, Nach-oben-Button.
 * Weitere Bausteine (Marken-Kacheln, Service-Icons, Kontakt-Fläche, Divider, Galerie …) kommen mit
 * den jeweiligen Abschnitten in den nächsten Sitzungen dazu.
 */

/* ---------- Design-Tokens (aus CLAUDE.md „Design-Eckdaten") ---------- */
:root {
	--aod-green: #33903f;
	--aod-text: #666666;
	--aod-heading: #404040;
	--aod-border: #cccccc;
	--aod-header-shadow: #868686;
	--aod-white: #ffffff;
	--aod-black: #000000;
	--aod-whatsapp: #27cc47;
	--aod-whatsapp-hover: #1a9b33;

	--aod-font: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Arimo, sans-serif;

	--aod-container-sm: 750px;  /* ab 768px */
	--aod-container-md: 970px;  /* ab 992px */
	--aod-container-lg: 1170px; /* ab 1200px */
	--aod-gutter: 15px;

	--aod-header-height-mobile: 84px;
	--aod-header-height-desktop: 105px;
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html { font-size: 10px; }
body {
	margin: 0;
	font-family: var(--aod-font);
	font-size: 18px;
	line-height: 22px;
	color: var(--aod-text);
	background: var(--aod-white);
}
@media screen and (min-width: 992px) {
	body { font-size: 20px; line-height: 30px; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--aod-green); text-decoration: none; }
a:hover { color: var(--aod-heading); }
iframe { max-width: 100%; }
p { margin: 0 0 10px; }
ul { margin: 0; }
ul li { padding-bottom: 10px; }

.align-center { text-align: center; }
/* img ist weiter oben global auf display:block gesetzt (für max-width:100%/height:auto) – dadurch
   greift text-align:center auf einem Elternelement NICHT, ein Block-Element ohne auto-Margin bleibt
   links. Deshalb hier explizit zentrieren für alle Bilder in .align-center (betrifft: Teamfoto bei
   #kontakt, Angebote-Bild, Mitgliedschaft-Logo). */
.align-center img { margin-left: auto; margin-right: auto; }
.mobile-only { display: none !important; }
@media screen and (max-width: 767px) {
	.mobile-only { display: block !important; }
}
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Container/Grid (Ersatz für Bootstrap, gleiche Breiten) ---------- */
.container, .container-fluid {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--aod-gutter);
	padding-right: var(--aod-gutter);
}
@media screen and (min-width: 768px) { .container { max-width: var(--aod-container-sm); } }
@media screen and (min-width: 992px) { .container { max-width: var(--aod-container-md); } }
@media screen and (min-width: 1200px) { .container { max-width: var(--aod-container-lg); } }

.row { display: flex; flex-wrap: wrap; margin-left: calc(var(--aod-gutter) * -1); margin-right: calc(var(--aod-gutter) * -1); }
/* Nur Padding hier, KEIN width – Breite kommt ausschließlich aus den .col-xs-*/.col-sm-*/.col-md-*/
   .col-lg-*-Regeln unten. Der Attribut-Selektor [class*="col-"] hat höhere Spezifität als eine
   einzelne Klasse wie .col-sm-3, würde also jede Breitenregel überstimmen, egal welche Media Query
   greift – das war der Bug (alle Mehrspalten-Layouts fielen auf 100% Breite zurück). Reihenfolge
   unten ist bewusst mobile-first (xs → sm → md → lg), weil bei gleicher Spezifität die zuletzt
   stehende Regel gewinnt, sobald ihre Media Query aktiv ist. */
.row > [class*="col-"] { padding-left: var(--aod-gutter); padding-right: var(--aod-gutter); }
.col-xs-6 { width: 50%; }
.col-xs-12 { width: 100%; }
@media screen and (min-width: 768px) {
	.col-sm-3 { width: 25%; }
	.col-sm-4 { width: 33.3333%; }
	.col-sm-6 { width: 50%; }
	.col-sm-offset-3 { margin-left: 25%; }
}
@media screen and (min-width: 992px) {
	.col-md-2 { width: 16.6667%; }
	.col-md-4 { width: 33.3333%; }
}
@media screen and (min-width: 1200px) {
	.col-lg-3 { width: 25%; }
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--aod-heading); font-weight: 500; line-height: 1.1; margin: 0; }
h1 {
	font-size: 24px; text-transform: uppercase; text-align: center;
	position: relative; padding: 0 0 15px; margin: 0 0 25px;
}
@media screen and (min-width: 992px) { h1 { font-size: 28px; } }
h1 span { position: relative; display: inline-block; }
h1 span::after {
	content: ""; width: 50%; height: 1px; background: var(--aod-text);
	position: absolute; bottom: -15px; left: 50%; margin-left: -25%;
}
h2 {
	font-size: 22px; text-transform: uppercase; text-align: center;
	padding: 0 0 15px; margin: 15px 0 25px;
}
@media screen and (min-width: 992px) { h2 { font-size: 26px; } }
h2 span { position: relative; display: inline-block; }
h2 span::after {
	content: ""; width: 50%; height: 1px; background: var(--aod-text);
	position: absolute; bottom: -15px; left: 50%; margin-left: -25%;
}
h3 { font-size: 20px; text-transform: uppercase; text-align: center; margin: 15px 0 25px; }
@media screen and (min-width: 992px) { h3 { font-size: 24px; } }

/* Haken-Liste: grüner Haken als Inline-SVG (data-URI), ersetzt die alte Icon-Font (QSMarKgmbh) */
ul.hook { padding-left: 0; list-style: none; }
ul.hook li {
	padding-left: 40px; padding-bottom: 10px; position: relative;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333903f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") no-repeat left 2px;
	background-size: 24px 24px;
}

/* Zoom/Kontrast-Funktion vorerst zurückgestellt, siehe CLAUDE.md – bei allen Breiten ausgeblendet */
#top-contact .zoom, #top-contact .contrast { display: none; }

/* Social-Icons: Inline-SVG (Facebook/Instagram), ersetzt die alte Icon-Font. Linktext bleibt als
   .sr-only für Screenreader erhalten (siehe header.php). */
.social-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; margin-left: 4px;
	border: 1px solid var(--aod-green); border-radius: 50%;
	vertical-align: bottom; color: var(--aod-green); overflow: hidden;
}
.social-icon svg { width: 16px; height: 16px; }
.social-icon:hover { background: var(--aod-green); color: var(--aod-white); }

/* ---------- Header / Navigation ---------- */
.navbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	background: var(--aod-white);
}
.navbar .navbar-header { position: relative; }
.navbar-brand { display: block; height: 80px; max-width: 280px; max-height: 100px; }
.navbar-brand img { height: 100%; width: auto; max-height: 100%; }

.navbar-toggle {
	/* Maße wie live (Bootstrap-Grundwerte + live-custom.css Zeile 102/103): 24×32px, 20px vom
	   oberen und rechten Rand */
	display: block; position: absolute; top: 10px; right: 5px; margin: 8px 15px 8px 0;
	padding: 5px 0; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.navbar-toggle .icon-bar {
	display: block; box-sizing: border-box; width: 22px; height: 4px; border-radius: 1px;
	background: var(--aod-header-shadow); border: 1px solid var(--aod-header-shadow);
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

#navbar { display: none; }
#navbar.is-open { display: block; }
#navbar ul.jump-menu, #navbar ul.mobile-only {
	list-style: none; margin: 0; padding: 0;
}
#navbar ul.jump-menu li a, #navbar ul.mobile-only li a {
	display: block; color: var(--aod-text); text-transform: uppercase;
}

/* Mobil (< 768px): weiße Leiste mit grünem Rand, Hamburger, Vollbild-Menü */
@media screen and (max-width: 767px) {
	.navbar {
		background: var(--aod-white);
		border-top: 2px solid var(--aod-green);
		border-bottom: 2px solid var(--aod-green);
		text-align: center;
	}
	.navbar .container { position: relative; }
	/* Wie Bootstrap/live: navbar-header mobil über die volle Breite (Container-Padding aufheben),
	   damit Social-Icons (15px) und Hamburger (5px) vom Bildschirmrand aus positioniert sind. */
	.navbar .navbar-header { margin: 0 -15px; }
	/* Wie live-custom.css Zeile 104/105 (+ Bootstrap-Padding 15px): Logo als inline-block mit 15px
	   Innenabstand, dadurch per text-align:center der .navbar mittig und das Bild 50px hoch
	   (80px - 2×15px). Das Bild muss inline-block sein, weil img global display:block hat und
	   text-align sonst nicht greift. Ergibt 84px Gesamthöhe (80px + 2×2px grüner Rand). */
	.navbar-brand { display: inline-block; vertical-align: top; max-width: 60%; padding: 15px; }
	.navbar-brand img { display: inline-block; }
	.navbar-side { position: absolute; top: 0; left: 0; right: 0; }
	/* #top-contact bleibt mobil sichtbar (nur die Social-Icons), wie live: oben links positioniert,
	   siehe referenz/css/live-custom.css Zeile 107. Zoom/Kontrast bleiben ausgeblendet (s.u.). */
	#top-contact { position: absolute; top: 0; left: 0; margin: 15px 0 0 15px; }
	#navbar {
		position: fixed; left: 0; top: var(--aod-header-height-mobile); width: 100%;
		max-height: calc(100% - 84px); overflow-y: auto; background: var(--aod-white); padding: 0;
	}
	#navbar ul.jump-menu li, #navbar ul.mobile-only li {
		border-bottom: 1px solid var(--aod-heading); margin: 0;
	}
	#navbar ul.jump-menu li a, #navbar ul.mobile-only li a {
		color: var(--aod-text); padding: 15px 20px;
	}
}

/* Desktop (>= 768px): weiße fixierte Leiste mit Schatten, Logo links, Menü rechts.
   Wichtig: navbar-side wird absolut oben rechts positioniert (wie live-custom.css Zeile 106:
   „.navbar-side { position: absolute; top: 0; }"), NICHT per Flexbox neben das Logo gesetzt – sonst
   wraps es bei zu wenig Platz unter das Logo (genau der Bug, der das Logo optisch „nach oben" schob
   und die Navi-Zeile in eine eigene, volle Breite zwang, statt schmaler neben dem Logo zu stehen). */
@media screen and (min-width: 768px) {
	/* Maße wie live (1440px nachgemessen): 15px oben + 80px Logo + 10px Logo-Abstand = 105px,
	   dazu 1px transparenter Bootstrap-Rand unten = 106px (Inhalt beginnt bei 105px). */
	.navbar {
		box-shadow: 0 0 15px var(--aod-header-shadow);
		min-height: 100px;
		border-bottom: 1px solid transparent;
	}
	.navbar .container { padding-top: 15px; }
	.navbar-header { position: relative; }
	.navbar-brand { margin-bottom: 10px; }
	.navbar-toggle { display: none; }
	/* Wie live-custom.css Zeile 121: padding 0 15px + margin-right -15px – Social-Icons enden bündig
	   mit dem Container, das Menü (#navbar, margin-right -15px) ragt 15px darüber hinaus. */
	.navbar-side { position: absolute; top: 5px; right: -15px; padding: 0 15px; text-align: right; }

	/* 32px Zeilenhöhe wie live (30px-Icons + Unterlänge), damit das Menü darunter bei y=62 beginnt */
	#top-contact { margin-bottom: 10px; font-size: 14px; min-height: 32px; }

	/* flow-root: der 2px-Margin des ul bleibt innerhalb von #navbar (wie live, 34px hoch) */
	#navbar { display: flow-root; margin-right: -15px; }
	#navbar ul.mobile-only { display: none; }
	/* font-size: 0 entfernt die Leerzeichen-Lücken zwischen den inline-block-<li> aus dem Markup
	   (live stehen die <li> ohne Leerraum direkt hintereinander); line-height 30px wie live. */
	#navbar ul.jump-menu {
		white-space: nowrap; margin: 2px 0; font-size: 0; line-height: 30px;
	}
	#navbar ul.jump-menu li {
		/* oben ausgerichtet + 5px Abstand = Lage wie live (li 5px unter der ul-Oberkante) */
		display: inline-block; line-height: 14px; padding: 0; vertical-align: top; margin-top: 5px;
	}
	#navbar ul.jump-menu li + li { border-left: 1px solid var(--aod-black); }
	#navbar ul.jump-menu li a { padding: 5px 10px; font-size: 13px; color: var(--aod-heading); }
	#navbar ul.jump-menu li a:hover { color: var(--aod-green); }
}
@media screen and (min-width: 992px) {
	#navbar ul.jump-menu li a { padding: 5px 15px; font-size: 16px; }
}

/* ---------- #main-Abstand (Headerhöhe) ---------- */
#main { margin-top: var(--aod-header-height-mobile); }
@media screen and (min-width: 768px) { #main { margin-top: var(--aod-header-height-desktop); } }
#main > .container, #main > .container-fluid { padding-top: 40px; padding-bottom: 40px; }

/* ---------- Banner-Carousel (Fade) ---------- */
.carousel { position: relative; margin-bottom: 20px; overflow: hidden; }
.carousel .carousel-inner { position: relative; }
.carousel .item {
	display: none; opacity: 0; transition: opacity 0.6s ease-in-out;
}
.carousel .item.active { display: block; opacity: 1; }
.carousel .item img { width: 100%; }

.carousel-indicators {
	list-style: none; margin: 0; padding: 0; position: absolute; bottom: 10px; right: 0;
	display: none; text-align: right;
}
@media screen and (min-width: 768px) {
	.carousel-indicators { display: block; right: calc(50% - 375px); }
}
@media screen and (min-width: 992px) { .carousel-indicators { right: calc(50% - 485px); } }
@media screen and (min-width: 1200px) { .carousel-indicators { right: calc(50% - 585px); } }
.carousel-indicators li {
	display: inline-block; width: 15px; height: 15px; margin: 0 2px;
	border: 2px solid var(--aod-green); border-radius: 50%; cursor: pointer;
}
.carousel-indicators li:hover { background: var(--aod-heading); }
.carousel-indicators li.active { background: var(--aod-heading); border-color: var(--aod-heading); }

/* ---------- Team (#wir) ---------- */
.team-grid { justify-content: flex-start; }
.team-item { width: 100%; text-align: center; margin-bottom: 25px; }
@media screen and (min-width: 768px) {
	.team-item { width: 50%; }
	.team-item:nth-child(3) { width: 50%; margin-left: 25%; }
}
@media screen and (min-width: 992px) {
	.team-item, .team-item:nth-child(3) { width: 33.3333%; margin-left: 0; }
}
.team-photo { position: relative; overflow: hidden; }
.team-photo img { margin: 0 auto; }
.team-photo-hover { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.team-photo:hover .team-photo-hover { display: block; }

/* ---------- Ladenfotos (runde Kacheln + Lightbox) ---------- */
.laden-grid { display: flex; flex-wrap: wrap; text-align: center; }
.laden-item {
	width: 50%; padding: 0 0 25px; margin: 0; border: 0; background: none; cursor: pointer;
}
@media screen and (min-width: 768px) { .laden-item { width: 25%; } }
.laden-item img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 auto;
	border: 2px solid var(--aod-white); border-radius: 50%;
	box-shadow: 0 0 15px 1px var(--aod-border);
}

.aod-lightbox {
	border: 0; padding: 0; background: transparent; max-width: 90vw; max-height: 90vh;
}
.aod-lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }
.aod-lightbox img { display: block; max-width: 90vw; max-height: 90vh; }
.aod-lightbox-close {
	position: absolute; top: -15px; right: -15px; width: 36px; height: 36px;
	border-radius: 50%; border: 0; background: var(--aod-white); color: var(--aod-heading);
	font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* ---------- Divider (S/W-Trennbild, Parallax ab 1200px) ---------- */
.divider { padding: 0; margin: 0; display: block; }
.divider img { display: block; width: 100%; }
@media screen and (min-width: 768px) {
	.divider {
		height: 400px; background-repeat: no-repeat; background-position: center center;
		background-size: cover; /* ersetzt die JS-Klassen ratio-bigger/ratio-smaller, siehe Template */
	}
	.divider img { display: none; }
}
@media screen and (min-width: 1200px) { .divider { background-attachment: fixed; } }

/* ---------- Marken (#marken) ---------- */
.brands { text-align: center; }
.brands .item {
	border: 1px solid var(--aod-border); padding: 15px; line-height: 80px; margin-bottom: 25px;
}
@media screen and (min-width: 768px) { .brands .item { line-height: 120px; } }
.brands .item img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }

/* ---------- Zweispalter (Kontaktlinsen, Low Vision) ---------- */
.two-col { align-items: center; margin-bottom: 25px; }
.two-col h3 { margin-top: 0; }
/* Einheitliches Seitenverhältnis + runde Ecken, damit mehrere Zweispalter-Fotos hintereinander
   (z. B. Kantenfilterbrille + Ray-Ban Meta bei #lowvision) gleich groß und sauber untereinander
   wirken, statt in unterschiedlichen Ausgangs-Seitenverhältnissen zu stehen. 4:3 statt 3:2, weil das
   Ray-Ban-Meta-Foto im Originalzuschnitt bereits 4:3 ist (480×360) – dort also kein Beschnitt, die
   Brille bleibt komplett sichtbar; bei den anderen Fotos wird nur wenig vom Rand abgeschnitten.
   object-position lässt sich je Bild per .obj-top/.obj-bottom auf den wichtigen Bildausschnitt
   verschieben, falls ein Foto doch mal knapp beschnitten wird. */
.two-col img {
	aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: 12px;
}
.two-col img.obj-top { object-position: center top; }
.two-col img.obj-bottom { object-position: center bottom; }

/* ---------- Footer ---------- */
footer { background: var(--aod-heading); color: var(--aod-border); padding: 15px 0; font-size: 16px; }
footer a { color: var(--aod-border); }
footer a:hover { color: var(--aod-green); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer ul li { display: inline; padding: 0; margin: 0; }
footer ul li + li { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--aod-border); }
footer .row { align-items: center; }
footer .col-1 { text-align: center; }
footer .col-2 { text-align: center; }
footer .col-3 { text-align: center; }
@media screen and (min-width: 768px) {
	footer .col-1 { text-align: left; }
	footer .col-3 { text-align: right; }
}
footer .col-3 ul { display: none; }
@media screen and (min-width: 768px) { footer .col-3 ul { display: block; } }

/* ---------- Nach-oben-Button + WhatsApp-Lasche ---------- */
#topbtn {
	position: fixed; bottom: 10px; right: 10px; display: none; cursor: pointer;
	width: 50px; height: 50px;
}
#topbtn.is-visible { display: block; }
/* Pfeil-Icon: vorläufig als CSS-Form, wird mit der Icon-Entscheidung (Font vs. SVG) final */
#topbtn::before {
	content: "▲"; color: var(--aod-green); display: block; font-size: 30px; line-height: 1; text-align: center;
}
@media screen and (min-width: 768px) { #topbtn::before { font-size: 36px; } }

#whatsapp {
	position: fixed; right: 0; top: 25%; font-size: 18px;
	background: var(--aod-whatsapp); color: var(--aod-white);
	padding: 15px 5px; writing-mode: vertical-lr; transform: scale(-1);
	border-radius: 0 10px 10px 0; transition: 120ms;
	box-shadow: 2px 0 8px -5px rgba(0, 0, 0, 1); letter-spacing: 1px;
}
#whatsapp:hover { background: var(--aod-whatsapp-hover); box-shadow: 2px 0 5px -5px rgba(0, 0, 0, 1); color: var(--aod-white); }
@media screen and (max-width: 500px) { #whatsapp { padding: 15px 10px; } }

/* Service-Kacheln (#service): 8 Kacheln, 4 pro Reihe / mobil 2. Icons als Inline-SVG (statt der
   alten Icon-Font QSMarKgmbh), siehe .service-icon unten. */
.container.services > .row > div > div > ul {
	list-style-type: none; margin: 0; padding: 0; text-align: center;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
	.container.services > .row > div > div > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.container.services > .row > div > div > ul > li {
	color: #666; margin: 0 0 30px; position: relative; text-align: left;
}
.container.services > .row > div > div > ul > li.small {
	font-size: 16px; text-align: center; padding: 60px 0 20px; min-width: 0;
}
@media screen and (min-width: 768px) {
	.container.services > .row > div > div > ul > li.small { font-size: 18px; padding-top: 100px; }
}
@media screen and (min-width: 992px) {
	.container.services > .row > div > div > ul > li.small { font-size: 20px; }
}
.container.services > .row > div > div > ul > li > .title { text-transform: uppercase; }
.service-icon {
	position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
	width: 36px; height: 36px; color: var(--aod-green);
}
@media screen and (min-width: 768px) {
	.service-icon { top: 20px; width: 56px; height: 56px; }
}

/* Kontakt-Fläche (#kontakt): vollflächig grün, Öffnungszeiten + 4 Boxen. Icons (Telefon/E-Mail/
   Adresse/Karte) als Inline-SVG, siehe .box-icon unten. */
#content-contact-info { background: var(--aod-green); color: var(--aod-white); padding: 50px 0 20px; }
#content-contact-info .row { justify-content: center; text-align: center; }
#content-contact-info .row > div { margin-bottom: 25px; }
#content-contact-info .item .day { text-transform: uppercase; display: block; }
#content-contact-info .item .time { font-size: 17px; display: block; margin-top: 10px; }
#content-contact-info .row.boxes { text-align: left; margin-top: 25px; }
#content-contact-info .row.boxes > div span,
#content-contact-info .row.boxes > div a {
	background: var(--aod-white); height: 80px; line-height: 80px;
	padding: 0 20px 0 80px; display: block; position: relative; overflow: hidden;
}
/* Nur die Adresse ist grau (span, kein Link) – Telefon/Mail/Karte bleiben Links und erben die
   grüne Standard-Linkfarbe (siehe live-custom.css Zeile 203: nur .row.boxes > div span bekommt
   color:#666, die <a>-Boxen nicht). */
#content-contact-info .row.boxes > div span { color: #666; }
#content-contact-info .row.boxes > div span.address,
#content-contact-info .row.boxes > div a.email { line-height: 1.3; padding-top: 22px; height: auto; min-height: 80px; }
#content-contact-info .row.boxes > div .box-icon {
	position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; color: inherit;
}

/* Sehtest-Seite (/sehtest): Intro + drei Modell-Kacheln (Stil wie Marken-Kacheln) + grüner CTA-Block
   (Stil wie #content-contact-info). Quelle: referenz/html/sehtest.html („angeglichene Fassung",
   Entscheidung 10.09. – ersetzt den abweichenden Live-Stil aus html/sehtest-original.html). */
#sehtest-modelle > p.align-center { max-width: 800px; margin: 0 auto 30px; }
.sehtest-cards > div { margin-bottom: 25px; }
.sehtest-cards .item {
	border: 1px solid #ccc; padding: 25px 20px 90px; position: relative; height: 100%; background: var(--aod-white);
}
.sehtest-cards .item h3 { margin-top: 0; }
.sehtest-cards .item p { text-align: center; }
.sehtest-cards .item ul.hook { margin: 15px 0 0; text-align: left; }
.sehtest-cards .item ul.hook li { font-size: 18px; line-height: 26px; }
.sehtest-cards .item .price {
	position: absolute; left: 20px; right: 20px; bottom: 20px; text-align: center;
	font-size: 28px; line-height: 40px; color: var(--aod-green); border-top: 1px solid #ccc; padding-top: 15px;
}
@media screen and (min-width: 768px) {
	.sehtest-cards { display: flex; flex-wrap: wrap; }
	.sehtest-cards > div { display: flex; }
	.sehtest-cards .item { width: 100%; }
}
#sehtest-cta { background: var(--aod-green); color: var(--aod-white); padding: 50px 0 40px; }
#sehtest-cta h3, #sehtest-cta h3 span { color: var(--aod-white); }
#sehtest-cta .row.boxes { margin-top: 30px; }
#sehtest-cta .row.boxes a {
	background: var(--aod-white); color: var(--aod-green); height: 80px; line-height: 80px;
	padding: 0 20px 0 80px; display: block; position: relative; overflow: hidden;
	font-size: 18px; text-transform: uppercase;
}
#sehtest-cta .row.boxes a:hover { color: #404040; }
#sehtest-cta .row.boxes .cta-phone-icon {
	position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; color: inherit;
}
#sehtest-cta .cta-link { color: var(--aod-white); text-decoration: underline; }
#sehtest-cta .cta-link:hover { color: #ccc; }