/* =====================================================================
   /apps-dienste/ (Seite 18938) — Galerie, Kennzahlen, Technologie, FAQ
   Entwurf: SuperStyler 03.09.2026 (quelle/base.css im Entwurfsordner)
   Umsetzung: Theme-Widget, Shortcodes in inc/apps-dienste.php

   Die Site hat genau EINE Optik: dunkel. Bright Mode ist seit 01.09.2026
   ausgebaut — hier keine Hell-Varianten wieder aufmachen.

   Die Token stehen bewusst NICHT im :root, sondern auf den Bausteinen
   selbst. Elementor setzt eigene Globals im :root; ein zweiter Satz dort
   waere ein Kollisionsrisiko fuer die ganze Site.

   Breakpoints wie im Bestand: 767 / 1023 / 1199.
   ===================================================================== */

.gal,
.ao-ad {
	--ad-canvas: #000000;
	--ad-surface-1: #1A1A1A;
	--ad-surface-deep: #0B0C0E;
	--ad-text: #FFFFFF;
	--ad-text-2: #D8D8D8;
	--ad-text-3: #A8A8A8;
	--ad-primary: #00ABD7;
	--ad-primary-hover: #33C4E8;
	--ad-line: #303030;
	--ad-line-soft: #171717;
	--ad-r-xs: 5px;
	--ad-r-md: 12px;
	--ad-r-lg: 16px;
	--ad-s-xs: 8px;
	--ad-s-sm: 16px;
	--ad-s-md: 24px;
	--ad-s-lg: 32px;
	--ad-s-xl: 48px;
	--ad-s-xxl: 64px;
	--ad-s-huge: 96px;
	--ad-font-display: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ad-font-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ad-t-press: 160ms;
	--ad-t-ui: 200ms;
}

.gal *,
.gal *::before,
.gal *::after,
.ao-ad *,
.ao-ad *::before,
.ao-ad *::after {
	box-sizing: border-box;
}

/* Elementor liefert .sr-only nicht mit. */
.gal .sr-only,
.ao-ad .sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gal :focus-visible,
.ao-ad :focus-visible {
	outline: 2px solid var(--ad-primary);
	outline-offset: 2px;
	border-radius: var(--ad-r-xs);
}

/* ---- Typo-Rollen ---- */
.ao-ad .h2 {
	font: 700 40px/1.15 var(--ad-font-display);
	letter-spacing: -.01em;
	color: var(--ad-text);
	margin: 0;
	text-wrap: balance;
}

.ao-ad .eyebrow {
	font: 700 13px/1.2 var(--ad-font-display);
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ad-text-3);
	margin: 0;
}

.ao-ad .stat-num {
	font: 800 48px/1 var(--ad-font-display);
	letter-spacing: -1.5px;
	color: var(--ad-text);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

/* =====================================================================
   GALERIE
   ===================================================================== */

.gal {
	position: relative;
	--ad-stage-ratio: 16/10;
}

.gal__stage {
	position: relative;
	aspect-ratio: var(--ad-stage-ratio);
	border-radius: var(--ad-r-lg);
	overflow: hidden;
	background: var(--ad-surface-deep);
	isolation: isolate;
	box-shadow: 0 32px 80px -32px rgba(0, 171, 215, .28);
}

.gal__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	pointer-events: none;
	z-index: 3;
}

.gal__track {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.gal__track::-webkit-scrollbar {
	display: none;
}

.gal__slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: grid;
	place-items: center;
	overflow: hidden;
}

/* Der Lichtschein kommt aus dem Bild selbst, nicht aus einem festen Blau —
   so traegt jedes Motiv sein eigenes Licht.

   Zwei Klassen im Selektor sind Absicht: Elementor liefert
   `.elementor img { height: auto }` aus (Spezifitaet 0,1,1). Mit nur
   `.gal__ambient` (0,1,0) verliert die Hoehenangabe — gemessen an der
   Live-Seite am 03.09.2026: jedes Bild stand in seiner natuerlichen Hoehe
   von 834 px in einer 334 px hohen Buehne und wurde oben angeschnitten.
   Im Pruefstand war das nicht zu sehen, dort fehlt die Elementor-CSS. */
.gal .gal__ambient {
	position: absolute;
	inset: -12%;
	width: 124%;
	height: 124%;
	max-width: none;
	object-fit: cover;
	filter: blur(40px) saturate(1.25) brightness(.55);
	opacity: .9;
	z-index: 0;
	pointer-events: none;
}

/* contain: kein Bild wird je beschnitten — Plakate (2:3), Szenen (16:9)
   und Geraetemontagen liegen auf derselben Buehne.
   Zwei Klassen, siehe die Begruendung bei .gal__ambient. */
.gal .gal__img {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0;
}

.gal .gal__slide--hoch .gal__img {
	padding: 3% 0;
}

.gal__ph {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 10px;
	color: var(--ad-text-3);
	text-align: center;
	padding: var(--ad-s-md);
	font: 400 13px/1.4 var(--ad-font-text);
}

.gal__ph svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gal__slide--lade {
	background: linear-gradient(180deg, var(--ad-surface-deep), var(--ad-surface-1));
}

.gal__slide--lade .gal__ph {
	opacity: .7;
}

/* ---- Pfeile: 44 px Ziel, auf Zeigergeraeten erst bei Hover oder Fokus ---- */
.gal__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	translate: 0 -50%;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(11, 12, 14, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	transition: opacity var(--ad-t-ui) ease, background-color var(--ad-t-ui) ease, transform var(--ad-t-press) cubic-bezier(.23, 1, .32, 1);
}

.gal__nav svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gal__nav--prev { left: 12px; }
.gal__nav--next { right: 12px; }

.gal__nav:hover { opacity: 1; background: rgba(11, 12, 14, .92); }
.gal__nav:active { transform: translateY(0) scale(.97); }
.gal__nav[aria-disabled="true"] { opacity: .28; cursor: default; }

@media (hover: hover) and (pointer: fine) {
	.gal__nav { opacity: 0; }
	.gal:hover .gal__nav,
	.gal:focus-within .gal__nav { opacity: .85; }
	.gal:hover .gal__nav[aria-disabled="true"],
	.gal:focus-within .gal__nav[aria-disabled="true"] { opacity: .28; }
	.gal__nav:focus-visible { opacity: 1; }
}

/* ---- Leiste der Vorschaubilder = Tabs ---- */
.gal__rail {
	display: flex;
	gap: var(--ad-s-xs);
	margin-top: var(--ad-s-sm);
	padding: 3px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.gal__rail::-webkit-scrollbar { display: none; }

.gal__thumb {
	flex: 0 0 auto;
	width: 74px;
	aspect-ratio: 16/10;
	border-radius: var(--ad-r-xs);
	overflow: hidden;
	background: var(--ad-surface-deep);
	border: 0;
	padding: 0;
	cursor: pointer;
	opacity: .5;
	position: relative;
	scroll-snap-align: center;
	transition: opacity var(--ad-t-ui) ease, box-shadow var(--ad-t-ui) ease, transform var(--ad-t-press) cubic-bezier(.23, 1, .32, 1);
}

.gal .gal__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gal__thumb:hover { opacity: .85; }
.gal__thumb:active { transform: scale(.97); }

.gal__thumb[aria-selected="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--ad-primary);
}

/* Der aktive Zustand traegt Deckung UND Balken — nie nur Farbe. */
.gal__thumb[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	translate: -50% 0;
	width: 20px;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--ad-primary);
}

.gal__thumb--fehlt {
	display: grid;
	place-items: center;
	color: var(--ad-text-3);
}

.gal__thumb--fehlt svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
}

/* ---- Zeile darunter ---- */
.gal__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ad-s-sm);
	margin-top: var(--ad-s-xs);
	min-height: 20px;
}

.gal__cap {
	font: 400 13px/1.4 var(--ad-font-text);
	color: var(--ad-text-3);
	margin: 0;
	min-width: 0;
}

.gal__count {
	font: 700 13px/1.4 var(--ad-font-display);
	letter-spacing: .5px;
	color: var(--ad-text-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin: 0;
}

/* Ein Bild: keine Leiste, keine Pfeile, kein Zaehler. */
.gal--einzel .gal__rail,
.gal--einzel .gal__nav,
.gal--einzel .gal__count { display: none; }

/* Kein Bild: Linienrand statt Leuchten — die Buehne verspricht nichts. */
.gal--leer .gal__stage { box-shadow: none; }
.gal--leer .gal__stage::after { box-shadow: inset 0 0 0 1px var(--ad-line); }

/* =====================================================================
   TECHNOLOGIE — Wortzeilen statt Logo-Wand (kein Fremdmaterial)
   ===================================================================== */

.tech {
	position: relative;
	background: var(--ad-surface-1);
	padding-block: var(--ad-s-huge);
	/* Der Flaechenwechsel gehoert ueber die volle Breite, nicht nur ueber die
	   1140 px des Inhalts — sonst liest sich der Abschnitt als Karte statt als
	   Wechsel der Ebene. Schatten statt 100vw: 100vw waere auf dem Desktop um
	   die Breite der Bildlaufleiste zu breit und wuerde die Seite waagerecht
	   sprengen. clip-path haelt die Farbe oben und unten auf Kante. */
	box-shadow: 0 0 0 100vmax var(--ad-surface-1);
	clip-path: inset(0 -100vmax);
}

.tech__kopf {
	display: grid;
	gap: var(--ad-s-sm);
	max-width: 62ch;
	margin-bottom: var(--ad-s-xl);
}

.tech__zeilen {
	display: grid;
	gap: var(--ad-s-lg);
	border-top: 1px solid var(--ad-line);
}

.tech__zeile {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--ad-s-md);
	padding-top: var(--ad-s-md);
	padding-bottom: var(--ad-s-md);
	border-bottom: 1px solid var(--ad-line-soft);
}

.tech__zeile:last-child { border-bottom: 0; }

.tech__label {
	font: 700 13px/1.6 var(--ad-font-display);
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ad-text-3);
	margin: 0;
	padding-top: 6px;
}

.tech__worte {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tech__worte li {
	font: 600 22px/1.4 var(--ad-font-display);
	color: var(--ad-text-2);
	letter-spacing: -.005em;
}

.tech__worte li + li::before {
	content: "·";
	color: var(--ad-primary);
	margin: 0 14px;
	font-weight: 800;
}

.tech__fuss {
	margin: var(--ad-s-lg) 0 0;
	font: 400 13px/1.5 var(--ad-font-text);
	color: var(--ad-text-3);
	max-width: 70ch;
}

/* =====================================================================
   KENNZAHLEN — Zahl weiss, Cyan nur als Messstrich
   (Cyan bleibt auf der ganzen Seite die Farbe der Handlungen)
   ===================================================================== */

.stats { padding-block: var(--ad-s-huge); }

.stats__kopf {
	display: grid;
	gap: var(--ad-s-sm);
	max-width: 62ch;
	margin-bottom: var(--ad-s-xl);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ad-s-lg);
}

.stats__grid[data-spalten="3"] { grid-template-columns: repeat(3, 1fr); }
.stats__grid[data-spalten="2"] { grid-template-columns: repeat(2, 1fr); }

.stat {
	position: relative;
	padding-top: var(--ad-s-md);
	border-top: 1px solid var(--ad-line);
	display: grid;
	gap: 12px;
	align-content: start;
}

.stat::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 2px;
	background: var(--ad-primary);
}

.stat__label {
	font: 700 13px/1.4 var(--ad-font-display);
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ad-text-2);
	margin: 0;
}

.stat__note {
	font: 400 13px/1.4 var(--ad-font-text);
	color: var(--ad-text-3);
	margin: 0;
}

.stats__stand {
	margin: var(--ad-s-lg) 0 0;
	font: 400 13px/1.5 var(--ad-font-text);
	color: var(--ad-text-3);
}

/* =====================================================================
   FAQ — Plus-Liste, mehrere Antworten duerfen offen stehen
   ===================================================================== */

.faq { padding-block: var(--ad-s-huge); }

.faq__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--ad-s-xl);
	align-items: start;
}

.faq__kopf {
	display: grid;
	gap: var(--ad-s-sm);
	position: sticky;
	top: 120px;
}

.faq__item { border-bottom: 1px solid var(--ad-line); }
.faq__item:first-child { border-top: 1px solid var(--ad-line); }

.faq__h { margin: 0; }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ad-s-md);
	width: 100%;
	padding: 20px 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font: 600 19px/1.4 var(--ad-font-display);
	color: var(--ad-text);
	/* Die Site setzt `button { white-space: nowrap }` (gemessen 03.09.2026 an
	   der Live-Seite). Ohne diese Zeile bricht keine Frage um: das Raster
	   wuchs bei 390 px auf 610 px und kippte die ganze Seite waagerecht.
	   Im Pruefstand war das nicht zu sehen — dort fehlt die Site-CSS. */
	white-space: normal;
}

/* Der Fragetext muss unter seine natuerliche Zeilenbreite schrumpfen duerfen,
   sonst traegt er als Flex-Element seine volle Laenge in die Rasterbreite. */
.faq__q > span:first-child {
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

.faq__q:hover { color: var(--ad-primary-hover); }

/* Das Plus aus zwei Balken — offen dreht es sich zum Kreuz. */
.faq__plus {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	transition: rotate var(--ad-t-ui) cubic-bezier(.23, 1, .32, 1);
}

.faq__plus::before,
.faq__plus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	background: var(--ad-primary);
	border-radius: 1px;
}

.faq__plus::before { width: 16px; height: 2px; }
.faq__plus::after { width: 2px; height: 16px; }

.faq__q[aria-expanded="true"] .faq__plus { rotate: 45deg; }

.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 220ms cubic-bezier(.23, 1, .32, 1);
}

.faq__item--offen .faq__a { grid-template-rows: 1fr; }

.faq__a-inner { overflow: hidden; }

.faq__a-inner p {
	margin: 0 0 20px;
	font: 400 16px/1.65 var(--ad-font-text);
	color: var(--ad-text-3);
	max-width: 62ch;
}

/* =====================================================================
   KNOEPFE GEGEN DIE THEME-VORGABE ABSICHERN

   `reset.css` der Site setzt
       [type="button"]:focus, [type="button"]:hover, button:focus, button:hover
       { background: #cc3366 }
   — Spezifitaet 0,1,1. Jede Ein-Klassen-Regel von uns verliert dagegen.
   Gemessen an der Live-Seite am 03.09.2026: die geoeffnete FAQ-Frage stand
   auf Magenta, und Galerie-Pfeile und Vorschaubilder haetten beim Ueberfahren
   dasselbe getan. Darum hier zwei Klassen und die Zustaende ausdruecklich.
   ===================================================================== */

.faq .faq__q,
.faq .faq__q:hover,
.faq .faq__q:focus,
.faq .faq__q:active {
	background: none;
}

.faq .faq__q:hover {
	color: var(--ad-primary-hover);
}

.gal .gal__nav,
.gal .gal__nav:focus {
	background: rgba(11, 12, 14, .72);
}

.gal .gal__nav:hover,
.gal .gal__nav:active {
	background: rgba(11, 12, 14, .92);
}

.gal .gal__thumb,
.gal .gal__thumb:hover,
.gal .gal__thumb:focus,
.gal .gal__thumb:active {
	background: var(--ad-surface-deep);
}

/* =====================================================================
   BEWEGUNG — nur als Quittung, und immer abschaltbar
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.gal__track { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.gal__track { scroll-behavior: auto; }
	.gal__nav,
	.gal__thumb { transition-property: background-color, border-color, color, opacity; }
	.faq__plus { transition: none; }
	.faq__a { transition: none; }
}

/* =====================================================================
   RESPONSIV — Grenzen wie im Bestand: 1199 / 1023 / 767
   ===================================================================== */

@media (max-width: 1199px) {
	.ao-ad .h2 { font-size: 28px; }
}

@media (max-width: 1023px) {
	.ao-ad .h2 { font-size: 26px; }
	.stats__grid,
	.stats__grid[data-spalten="3"] { grid-template-columns: repeat(2, 1fr); gap: var(--ad-s-md); }
	.faq__grid { grid-template-columns: 1fr; gap: var(--ad-s-lg); }
	.faq__kopf { position: static; }
	.tech,
	.stats,
	.faq { padding-block: var(--ad-s-xxl); }
}

@media (max-width: 767px) {
	.ao-ad .h2 { font-size: 22px; }
	.ao-ad .stat-num { font-size: 36px; }
	.tech,
	.stats,
	.faq { padding-block: var(--ad-s-xl); }

	/* Buehne laeuft von Kante zu Kante, die Ecken bleiben. */
	.gal { margin-inline: calc(-1 * var(--ad-gutter, 20px)); }
	.gal__stage { border-radius: var(--ad-r-md); }
	.gal__rail,
	.gal__meta { padding-inline: var(--ad-gutter, 20px); }
	.gal__thumb { width: 64px; }
	.gal__nav { width: 40px; height: 40px; }

	.tech__zeile { grid-template-columns: 1fr; gap: var(--ad-s-xs); }
	.tech__worte li { font-size: 18px; }
	.tech__worte li + li::before { margin: 0 10px; }

	.faq__q { font-size: 17px; }
}