/* Content-Anreicherungen für Themenseiten – 2026-07-21, vierundfünfzigster
   Durchgang. Erster Einsatz auf KI-Risikomanagement (S02), nach
   Rückmeldung, dass "Kennen Sie das?" strukturell identisch zur Startseite
   wirkte. Drei wiederverwendbare Bausteine, site-weit geladen (kein
   Page-Gate) - reines CSS, andere Themenseiten sollen sie später ohne
   Nacharbeit mitnutzen können (Lehre aus drg_is_showcase_page(), siehe
   S02 KI-Risikomanagement.md, Nachtrag). */

/* --- 1. Risikostufen-Leiste (Attention: Fakten statt Fließtext) --- */
.drg-risk-tiers {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	margin: 30px 0;
}

.drg-risk-tier {
	padding: 18px 16px;
	background-color: #1A1816;
	border-top: 3px solid var(--tier-color, #FF6D00);
}

.drg-risk-tier__label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tier-color, #FF6D00);
	margin-bottom: 8px;
	display: block;
}

.drg-risk-tier__desc {
	color: #B8A99A;
	font-size: 14px;
	line-height: 1.4;
}

.drg-fine-callout {
	margin: 20px 0 30px;
	padding: 16px 20px;
	border-left: 2px solid #FF6D00;
	background-color: rgba(255, 109, 0, 0.06);
}

.drg-fine-callout__number {
	font-family: "Fraunces", serif;
	font-style: italic;
	font-weight: 300;
	color: #FF6D00;
	font-size: 1.3em;
}

.drg-fine-callout__text {
	color: #EDE8E3;
	font-size: 15px;
}

/* Bugfix 2026-07-17 (gefunden beim Bau der Software-FMEA-Seite): die
   Spaltenzahl wird pro Seite per Inline-`style="grid-template-columns:
   repeat(N, 1fr)"` gesetzt (siehe Content-Bausteine.md) - ein Inline-Style
   hat aber IMMER höhere Spezifität als eine Klassen-Regel, auch innerhalb
   einer @media-Query. Ohne `!important` blieb die Mobil-Umstellung auf 2
   Spalten dadurch wirkungslos, die Kacheln blieben auf allen Seiten mit
   `.drg-risk-tiers` (auch KI-Risikomanagement) bei voller Spaltenzahl
   gequetscht. Playwright-Check (`grid-template-columns`-Auszählung bei
   375px) bestätigte das Problem vor dem Fix. */
@media (max-width: 800px) {
	.drg-risk-tiers {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* --- 1b. Zusatz-Kachel ("+"-Element), wenn ein Abschnitt aus N gleichrangigen
   Saeulen PLUS einem optionalen/neuen Zusatzthema besteht - 2026-07-16, nach
   Feedback auf S05 Cybersecurity ("Drei Saeulen" in der Ueberschrift, aber vier
   gleichwertige Kacheln dargestellt). Ueberspannt die volle Rasterbreite und
   hebt sich mit gestricheltem statt durchgezogenem oberem Rand und einem
   "+"-Praefix im Label bewusst von den gleichrangigen .drg-risk-tier-Kacheln
   ab, statt als weitere gleichwertige Spalte zu erscheinen. Siehe
   ROLLE_Designer.md Abschnitt 6 und ROLLE_Content_Autor.md Abschnitt 7. */
.drg-risk-tier--addon {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	border-top: 2px dashed var(--tier-color, #FF6D00);
	margin-top: 4px;
}

.drg-risk-tier--addon .drg-risk-tier__label::before {
	content: "+ ";
}

.drg-risk-tier--addon .drg-risk-tier__desc {
	font-size: 13px;
}

/* --- 1c. Positiv gerahmter Nutzen-Callout - Alternative zu .drg-fine-callout
   fuer Abschnitte, in denen eine Ersparnis/ein Kundennutzen ueberzeugender ist
   als eine Bussgeld-/Sanktionsdrohung (siehe ROLLE_Content_Autor.md,
   Abschnitt 8). Gleiche visuelle Sprache wie .drg-fine-callout (Wiedererkennung),
   bewusst eigene Klasse statt Umwidmung, da .drg-fine-callout weiterhin fuer
   echte Regulierungs-Bussgelder passend bleibt (z. B. EU-AI-Act-Risikoklassen
   auf S02), waehrend .drg-value-callout fuer Nutzen-/Ersparnis-Aussagen gedacht
   ist. */
.drg-value-callout {
	margin: 20px 0 30px;
	padding: 16px 20px;
	border-left: 2px solid #FF6D00;
	background-color: rgba(255, 109, 0, 0.06);
}

.drg-value-callout__number {
	font-family: "Fraunces", serif;
	font-style: italic;
	font-weight: 300;
	color: #FF6D00;
	font-size: 1.3em;
}

.drg-value-callout__text {
	color: #EDE8E3;
	font-size: 15px;
}

/* --- 2. Vorher/Nachher-Zweispalter (Interest, ersetzt "Kennen Sie das?") --- */
.drg-before-after {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 20px;
}

.drg-before-after__col-label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 18px;
	display: block;
}

.drg-before-after__before .drg-before-after__col-label {
	color: #8A8078;
}

.drg-before-after__after .drg-before-after__col-label {
	color: #FF6D00;
}

.drg-before-after__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
	color: #EDE8E3;
	font-size: 15px;
	line-height: 1.5;
}

.drg-before-after__item::before {
	flex-shrink: 0;
	margin-top: 3px;
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	font-size: 13px;
}

.drg-before-after__before .drg-before-after__item::before {
	content: "\f068"; /* minus */
	color: #6B655D;
}

.drg-before-after__after .drg-before-after__item::before {
	content: "\f00c"; /* check */
	color: #FF6D00;
}

@media (max-width: 800px) {
	.drg-before-after {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* --- 3. Prozess-Leiste (Interest, Überblick vor den Detail-Abschnitten) --- */
.drg-process-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 30px 0 40px;
}

.drg-process-step {
	border-top: 2px solid #33302B;
	padding-top: 14px;
}

.drg-process-step__number {
	font-family: "IBM Plex Mono", monospace;
	color: #FF6D00;
	font-size: 13px;
	display: block;
	margin-bottom: 8px;
}

.drg-process-step__title {
	color: #EDE8E3;
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 6px;
	display: block;
}

.drg-process-step__teaser {
	color: #B8A99A;
	font-size: 13px;
	line-height: 1.4;
}

@media (max-width: 800px) {
	.drg-process-strip {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- 3b. Prozess-Linie (dritte "Vorgehen"-Variante, 2026-07-17) --- Vertikale,
   nummerierte Schrittfolge mit durchgehender Verbindungslinie zwischen den
   Kreis-Markern - anders als .drg-process-strip (Kurzüberblick getrennt von
   Detail-Absätzen, siehe Nachtrag oben: auf KI-Risikomanagement wegen
   fehlendem visuellem Zusammenhang durch .drg-discipline-grid abgelöst) UND
   anders als .drg-discipline-grid (2x2-Kachelraster, bereits zweimal im
   Einsatz: Cybersecurity + KI-Risikomanagement). Erste Verwendung:
   Software-FMEA (S06), Abschnitt [03] VORGEHEN - vier inhaltlich
   aufeinander aufbauende Schritte, bei denen die Reihenfolge selbst Teil der
   Aussage ist (Architektur → Fehlerarten → Bewertung → Integration), daher
   eine echte Linie statt eines gleichrangigen 2x2-Rasters. Nummer, Kurztitel
   UND vollständiger Absatztext sind von Anfang an in einem Element gebündelt
   (keine getrennte Kurzübersicht wie bei .drg-process-strip) - vermeidet den
   Zusammenhangs-Fehler von vornherein, siehe
   [[03 Bereiche/UI-Komponenten drgellner.de/Content-Bausteine#Prozess-Leiste]]. */
.drg-process-line {
	position: relative;
	margin: 30px 0 40px;
}

.drg-process-line__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 28px;
	padding-bottom: 40px;
}

.drg-process-line__item:last-child {
	padding-bottom: 0;
}

/* Verbindungslinie: läuft von der Mitte eines Markers zur Mitte des
   nächsten - absolut positioniert relativ zum Item, daher auf allen Items
   außer dem letzten (kein Nachfolger mehr). */
.drg-process-line__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 56px;
	bottom: -40px;
	width: 1px;
	background-color: #33302B;
}

.drg-process-line__marker {
	position: relative;
	z-index: 1;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid #33302B;
	background-color: #1A1816;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.drg-process-line__number {
	font-family: "IBM Plex Mono", monospace;
	color: #FF6D00;
	font-size: 15px;
}

.drg-process-line__body {
	padding-top: 10px;
}

.drg-process-line__title {
	display: block;
	color: #EDE8E3;
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 8px;
}

.drg-process-line__text {
	display: block;
	color: #B8A99A;
	font-size: 15px;
	line-height: 1.6;
}

/* Dezentes Hover-Feedback auf dem Marker - bewusst schlicht (Rahmen-Glow
   statt Titel-Wipe/Scan-Sweep), da diese Komponente keine gerahmte Kachel
   ist und die bereits vergebenen Hover-Techniken (.drg-discipline-card,
   .drg-case-panel) hier ohnehin nicht passen würden. */
.drg-process-line__item:hover .drg-process-line__marker {
	border-color: rgba(255, 109, 0, 0.7);
	box-shadow: 0 0 0 4px rgba(255, 109, 0, 0.12);
}

@media (max-width: 800px) {
	.drg-process-line__item {
		grid-template-columns: 44px 1fr;
		column-gap: 18px;
		padding-bottom: 30px;
	}

	.drg-process-line__marker {
		width: 44px;
		height: 44px;
	}

	.drg-process-line__item:not(:last-child)::before {
		left: 21px;
		top: 44px;
		bottom: -30px;
	}

	.drg-process-line__number {
		font-size: 13px;
	}
}

/* --- 4. Disziplin-Raster (2x2-Kachelgruppierung: Überschrift + Fließtext
   sichtbar zusammengefasst statt lose untereinander) - 2026-07-16, nach
   Referenzvorbild wibify.agency, Abschnitt "Vier Disziplinen, Eine Hand".
   Ersetzt auf der Cybersecurity-Seite die vorher getrennte Kombination aus
   .drg-process-strip (Kurz-Überblick) + vier eigenständigen
   Überschrift/Absatz-Blöcken darunter, deren Zusammenhang für den Leser nur
   durch die Reihenfolge erkennbar war (siehe Dr. Gellners Rückmeldung zum
   "Vorgehen"-Abschnitt: "Das ist visuell aber nicht sehr klar"). Jede
   Kachel bündelt jetzt Nummer, Überschrift und Absatz in einem gemeinsamen
   Rahmen - der Bezug ist sofort sichtbar, kein Zurückspringen zwischen
   Leiste und Fließtext nötig.

   Site-weit ohne Page-Gate verfügbar (wie alle Bausteine in dieser Datei),
   für jede Themenseite mit vier - oder bei zwei leeren Kacheln auch zwei -
   gleichrangigen Vorgehens-Schritten nutzbar. .drg-process-strip bleibt
   als eigene, schlankere Komponente bestehen (weiterhin aktiv auf
   KI-Risikomanagement, ID 30) - keine Migration ohne expliziten Wunsch. */
/* Glas-Hülle um das gesamte Disziplin-Raster - 2026-07-17, Nachtrag auf
   Wunsch von Dr. Gellner, Vorbild wibify.agency ("Vier Disziplinen. Eine
   Hand."): ein unscharfer, sanft schwingender Lichtbogen hinter einer
   Glas-/Frosted-Fläche über dem GESAMTEN Abschnittsblock (nicht je Kachel
   einzeln). Der Lichtbogen ist zwei überlagerte, weich verlaufende
   radial-gradient-Flecken, stark geblurrt, die sich per CSS-Animation
   langsam verschieben/drehen ("Schwingen" statt Ruckeln/Blinken).

   Bewusst OHNE Rausch-/Grain-Textur (Dr. Gellner: das vom Vorbild bekannte
   Korn-/Störmuster auf der Glasfläche stört, die Schwing-Bewegung selbst
   gefällt) - hier rein glatte Verläufe, keine Noise-Textur, kein
   `filter: contrast()`-Grain-Trick o.ä. */
.drg-discipline-glass {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	margin: 30px 0 40px;
}

.drg-discipline-glass::before {
	content: "";
	position: absolute;
	inset: -25%;
	background:
		radial-gradient(ellipse 55% 40% at 28% 32%, rgba(255, 109, 0, 0.30), transparent 62%),
		radial-gradient(ellipse 45% 35% at 72% 68%, rgba(255, 154, 61, 0.22), transparent 65%);
	filter: blur(70px);
	animation: drg-discipline-glass-swing 16s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes drg-discipline-glass-swing {
	0%, 100% { transform: translate(-3%, -2%) rotate(0deg); }
	50%      { transform: translate(3%, 2%) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
	.drg-discipline-glass::before {
		animation: none;
	}
}

.drg-discipline-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.drg-discipline-card {
	position: relative;
	padding: 32px 30px;
	background-color: rgba(26, 24, 22, 0.6);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid #2A2724;
	border-radius: 14px;
	overflow: hidden;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Dezente grafische Anregung je Kachel: ausblendendes Punktraster in der
   oberen rechten Ecke - passt zur "Cyber"-Bildsprache der Seite, tritt
   aber bewusst nicht mit den Canvas-Animationen von Hero und Abschnitt
   [02] in Konkurrenz (kein JS, keine Bewegung, sehr geringe Deckkraft). */
.drg-discipline-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 140px;
	height: 140px;
	background-image: radial-gradient(rgba(255, 109, 0, 0.16) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: linear-gradient(to bottom left, #000 0%, transparent 65%);
	mask-image: linear-gradient(to bottom left, #000 0%, transparent 65%);
	pointer-events: none;
}

/* Hover-Interaktivität zur Mausführungs-Unterstützung im 2x2-Raster -
   2026-07-17, Nachtrag auf Wunsch von Dr. Gellner, Vorbild wibify.agency:
   Überschrift "blättert" farblich um, Rahmen bekommt einen hellen
   Licht-Peak, Hintergrund hellt dezent auf.

   Nachtrag (zweite Rückmeldung): der rotierende conic-gradient-Licht-Peak
   von .drg-case-panel wurde hier zunächst 1:1 wiederverwendet - lief aber
   auf der Seite direkt danach (zweite "Vorgehen"-Komponente in Folge mit
   identischem Rotations-Effekt), was als Wiederholung auffiel. Ersetzt
   durch einen Scan-Sweep: eine helle Linie tastet die Kachel von oben nach
   unten ab, wiederholt sich während des Hovers. Inhaltlich passender als
   die Rotation (systematische Analyse je Disziplin = "Scan" statt
   "Radar-Überwachung", die bereits Sektion [02] besetzt), visuell klar
   unterscheidbar von .drg-case-panel. Technik: linear-gradient als
   Hintergrund mit `background-size` deutlich größer als das Element,
   `background-position` wird per Keyframe verschoben - dadurch
   höhenunabhängig (funktioniert unabhängig von der tatsächlichen
   Kachel-Höhe, kein Umrechnen auf Pixelwerte nötig). Eigenes ::after statt
   ::before, da ::before bereits das Punktraster belegt. */
.drg-discipline-card::after {
	content: "";
	position: absolute;
	/* Nachtrag 2026-07-17, zweiter Anlauf: erster Versuch (135deg-Gradient +
	   zweiachsige background-position-Bewegung direkt auf der Kachel) war
	   seitenverhaeltnis-abhaengig - bei einer angewinkelten Gradiente
	   veraendert sich der sichtbare Winkel mit Breite/Hoehe der Kachel
	   (CSS berechnet die Gradientenrichtung anhand der tatsaechlichen
	   Box-Geometrie, nicht normiert), dazu kommt die Positionsrechnung auf
	   zwei Achsen gleichzeitig kaum beherrschbar. Ergebnis: Laufrichtung kam
	   je nach Kachel-Breite verkehrt/gebogen/mit sichtbarer Kante an. Neuer
	   Ansatz: seitenverhaeltnis-unabhaengig, weil die Diagonale
	   ausschliesslich durch Rotation der gesamten (ueberdimensionierten)
	   Huellflaeche entsteht - innen laeuft weiterhin eine einfache VERTIKALE
	   Gradiente (0/180deg, verzerrungsfrei) rein auf der Y-Achse, exakt wie
	   in der urspruenglichen (nicht-diagonalen) Fassung. inset:-100% macht
	   die Huelle 3x so gross wie die Kachel in jede Richtung, damit die
	   gedrehte Diagonale bei jedem realistischen Kachel-Format sauber von
	   ausserhalb einer Ecke bis ausserhalb der gegenueberliegenden Ecke
	   durchlaeuft (keine sichtbare Kante/Unterbrechung mehr). */
	inset: -100%;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	background-image: linear-gradient(
		180deg,
		transparent 0%,
		transparent 49%,
		rgba(235, 150, 85, 0.32) 49.7%,
		rgba(235, 165, 105, 0.6) 50%,
		rgba(235, 150, 85, 0.32) 50.3%,
		transparent 51%,
		transparent 100%
	);
	background-size: 100% 420%;
	background-repeat: no-repeat;
	background-position: 0% 75%;
	filter: blur(1px);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 0;
}

@keyframes drg-discipline-card-scan {
	0%   { background-position: 0% 75%; }
	100% { background-position: 0% 25%; }
}

.drg-discipline-card:hover {
	background-color: rgba(34, 30, 27, 0.72);
	border-color: rgba(255, 109, 0, 0.55);
}

.drg-discipline-card:hover::after {
	opacity: 0.85;
	animation: drg-discipline-card-scan 2.4s linear 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
	.drg-discipline-card:hover::after {
		animation: none;
		opacity: 0;
	}
}

/* Normen-Kürzel als Wasserzeichen - 2026-07-17, analog zur "angedeuteten
   großen Zahl" im wibify.agency-Vorbild, hier aber bewusst das Kürzel
   (TARA/IACS/ISMS/CSAI) statt der Normen-Nummer: die Nummer steht schon in
   der Überschrift (".drg-discipline-card__title"), ein zweites Mal als Deko
   wäre redundant. Das Kürzel liefert dagegen eine eigene Informationsebene
   (Praktiker-Kurzform) und unterstreicht Fachkompetenz, ohne die
   Überschrift zu wiederholen.

   Nachtrag 2026-07-17 (Rückmeldung Dr. Gellner): von absolut positioniertem
   Wasserzeichen unten rechts (überlagerte Nummer/Titel/Text, rein
   dekorativ hinter dem Text) auf ein ECHTES Float-Element oben rechts
   umgestellt - beansprucht dadurch reinen Layout-Raum neben Kicker und
   Überschrift, sodass die Überschrift bei Bedarf früher umbricht statt
   unter das Kürzel zu laufen.

   Barrierefreiheit: Als rein dekoratives Element per aria-hidden="true" im
   Markup ausgeblendet (siehe S05 Cybersecurity.md) - automatisierte
   Kontrast-Prüfungen (axe, Lighthouse) berücksichtigen aria-hidden und
   werten dieses Element nicht als prüfpflichtigen Text.

   Nachtrag 2026-07-17 (zweite Rückmeldung, "hohle" Kontur): Die erste
   Umsetzung nutzte CSS `-webkit-text-stroke` für die Kontur-Optik. Dr.
   Gellner bemerkte bei A/R sichtbare Doppellinien - Vermutungsversuch 1
   ("es liegt an -webkit-text-stroke") auf echte SVG-`<text
   fill="none" stroke="...">`-Kontur umgestellt. Per Playwright/Chromium
   sauber verifiziert, ABER: bei Dr. Gellner im echten Browser (mehrfach
   getestet, auch Inkognito/anderer Browser, HTML-Quelltext bestätigt neue
   Version wird ausgeliefert) weiterhin sichtbare Doppellinien.

   ECHTE Ursache (dritter Anlauf): liegt am FONT selbst, nicht an der
   Stroke-Technik. Fette Schriftschnitte konstruieren Buchstaben wie A/R oft
   aus mehreren sich ÜBERLAPPENDEN Teilpfaden (z.B. Querbalken des A als
   eigenes Rechteck, das die beiden Diagonalen überlappt) - beim FÜLLEN
   unsichtbar (die Fill-Rule löst Überlappungen beim Rendern korrekt auf),
   aber JEDE Form von Kontur-Nachzeichnung (ob CSS-Approximation oder
   echter SVG-Stroke) zeichnet die Kontur JEDES Teilpfads einzeln nach -
   an der Überlappungsstelle entsteht dadurch zwangsläufig eine
   Doppellinie, unabhängig von der Stroke-Technik. Warum der Playwright-Test
   sauber aussah, aber der echte Browser nicht: vermutlich unterschiedliche
   Schriftdatei/-version von "Inter" (Systemfont vs. Web-Font-Fallback) mit
   unterschiedlicher Pfad-Konstruktion.

   FINALER FIX: SVG-Filter-Technik statt direktem Stroke. Der Text wird
   normal GEFÜLLT gerendert (Fill-Rule löst Überlappungen dabei IMMER
   korrekt auf, siehe oben), per Filter (`feMorphology` erode + `feComposite`
   out) wird aus der so entstandenen, garantiert überlappungsfreien
   Silhouette ein reiner Außenring erzeugt. Das Ergebnis hängt dadurch nicht
   mehr von Font-Interna oder Browser-Stroke-Implementierung ab - jede
   Solid-Fill-Darstellung ist bereits von Natur aus überlappungsfrei. */
.drg-discipline-card__acronym {
	float: right;
	width: 132px;
	height: 50px;
	margin: -4px 0 10px 18px;
	pointer-events: none;
	user-select: none;
	overflow: visible;
}

.drg-discipline-card__acronym text {
	font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* Hover: Kürzel-Wasserzeichen wechselt von Kontur (hohl) auf Solid-Füllung -
   2026-07-20, auf Wunsch von Dr. Gellner. Technik: zweites <text>-Element
   exakt an derselben Position/Schriftgröße wie das bestehende Kontur-Text
   (siehe Nachtrag oben zur SVG-Filter-Technik), aber ohne Filter, also ganz
   normal gefüllt. Beide Zustände liegen übereinander und werden per
   Opacity-Crossfade getauscht statt den SVG-Filter selbst zu animieren
   (Filter-Attribute wie feMorphology-radius sind nicht zuverlässig
   transitionierbar) - gleiche Crossfade-Technik wie der Farb-Wipe der
   Überschrift weiter unten, nur mit zwei DOM-Elementen statt Gradient-
   Verschiebung, weil eine echte Silhouette (kein reiner Farbverlauf)
   gebraucht wird. */
.drg-discipline-card__acronym-hollow {
	opacity: 1;
	transition: opacity 0.35s ease;
}

.drg-discipline-card__acronym-solid {
	opacity: 0;
	fill: #FF9A3D;
	fill-opacity: 0.85;
	transition: opacity 0.35s ease;
}

.drg-discipline-card:hover .drg-discipline-card__acronym-hollow {
	opacity: 0;
}

.drg-discipline-card:hover .drg-discipline-card__acronym-solid {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.drg-discipline-card__acronym-hollow,
	.drg-discipline-card__acronym-solid {
		transition: none;
	}
}

.drg-discipline-card__number {
	position: relative;
	z-index: 1;
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #FF6D00;
	display: block;
	margin-bottom: 14px;
}

/* Farb-Wipe beim Hover ("blättert" von Weiß zu Ember-Orange) - Technik:
   Zwei-Farben-Gradient als Textfüllung (background-clip: text), im
   Ruhezustand zu 100% im weißen Bereich positioniert, beim Hover per
   transition der background-position auf den orangen Bereich verschoben.
   Kein zusätzliches DOM-Element nötig. @supports-Fallback für Browser
   ohne background-clip:text (dann schlicht weiß, kein Wipe-Effekt). */
.drg-discipline-card__title {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 12px;
	background-image: linear-gradient(90deg, #FF9A3D 50%, #FFFFFF 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position 0.45s ease;
}

.drg-discipline-card:hover .drg-discipline-card__title {
	background-position: 0% 0;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.drg-discipline-card__title {
		color: #FFFFFF;
		background: none;
	}
}

.drg-discipline-card__text {
	position: relative;
	z-index: 1;
	display: block;
	color: #B8A99A;
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 800px) {
	.drg-discipline-grid {
		grid-template-columns: 1fr;
	}

	.drg-discipline-card__acronym {
		width: 92px;
		height: 36px;
		margin: -2px 0 8px 14px;
	}
}

/* --- 5. Fallbeispiel-Reihen (Bild IMMER sichtbar links, Text rechts,
   seitenbreit gestapelt) - 2026-07-17, zweiter Anlauf nach Rückmeldung von
   Dr. Gellner. Ersetzt die vorherige Fassung dieses Abschnitts
   (.drg-flip-showcase), die technisch als Avada-typische "Flip Card"
   umgesetzt war (Bild verborgen, erst durch Hover/Klick sichtbar) - genau
   das war NICHT gewollt. Referenzvorbild bleibt wibify.agency, aber der
   konkrete Bezugspunkt ist der Abschnitt ab "Vom Briefing zum Launch."
   (nummerierte Schritte, Bild permanent neben dem Text, kein Verbergen).

   .drg-flip-showcase (Klasse + CSS + js/drg-flip-showcase.js) wurde
   ersatzlos entfernt statt nur umbenannt, weil der Name/die Mechanik
   (Perspective/rotateY/backface-visibility) inhaltlich nicht mehr passt -
   ein "Flip" findet hier nicht mehr statt.

   Die Bilder selbst sind weiterhin VORVERARBEITET (Python/Pillow:
   Graustufen + Duotone-Einfärbung Schwarz/Ember-Orange/Creme, Vignette,
   abgerundete Ecken, siehe images/cyber-flip/*.png) - keine Laufzeit-
   Filterung im Browser. Die abgerundeten Ecken/Vignette sind bereits Teil
   der PNG-Datei (Alpha-Kanal), daher hier kein zusätzlicher Rahmen um das
   <img> nötig. */
/* Rahmen um jedes Fallbeispiel (Bild+Text) - 2026-07-17, Nachtrag auf
   Wunsch von Dr. Gellner, Vorbild wibify.agency: um beide Elemente ein
   Rahmen, innen ein etwas hellerer Hintergrund als die Seite, Bild/Text
   durch Innenabstand leicht vom Rahmen abgesetzt.

   ERSTER Anlauf war ein ECHTER, geschachtelter Avada-Container
   ([fusion_builder_container] innerhalb der Spalte, mit border_sizes_top
   usw., border_style, padding_top usw. und border_radius_top_left usw. als
   native Fusion-Builder-Attribute), auf ausdrücklichen Wunsch von Dr. Gellner, "möglichst eines
   der Avada-Elemente" zu nutzen. Per Playwright-DOM-Inspektion festgestellt:
   Fusion Builder rendert einen manuell als Shortcode-Text eingefügten
   VERSCHACHTELTEN Container aus dem programmatischen Seitenaufbau (nicht aus
   dem visuellen Builder) fehlerhaft - der Container selbst blieb LEER
   (sichtbar als leere gerahmte Box), während Row/Column/Text als
   GESCHWISTER-Elemente daneben statt darin landeten. Deshalb zurückgebaut
   auf ein reines Custom-Div (`.drg-case-panel` um `.drg-case-row`),
   konsistent mit allen anderen Komponenten dieser Datei
   (.drg-discipline-card, .drg-risk-tiers usw. sind ebenfalls reines
   Custom-HTML). Lehre: Fusion-Builder-Container-Verschachtelung per
   Shortcode-Text ist außerhalb des visuellen Builders nicht zuverlässig -
   für Rahmen/Card-artige Wrapper künftig direkt Custom-Div verwenden statt
   erst einen Avada-Container-Versuch zu unternehmen.

   Hover-Effekt kombiniert drei der von Dr. Gellner vorgeschlagenen Optionen:
   1) Hintergrund hellt sich auf, 2) Rahmen wird per innerem box-shadow-Ring
   optisch dicker (kein layout-verschiebendes border-width, stattdessen ein
   zusätzlicher Ring), 3) ein rotierender Farbverlauf hinter dem Rahmen
   ("fließender Rahmen") - dieselbe Technik wie beim CTA-Button
   (hover_transition="border_rotate_glow", siehe Avada-Core
   fusion-builder/assets/css/shortcodes/button.css, awb-btn-border-spin) hier
   für ein rechteckiges Panel nachgebaut (conic-gradient + Rotation +
   innere Maskierung statt der pillenförmigen Button-Variante). */
.drg-case-panel {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
	padding: 36px 40px;
	background-color: #1A1816;
	border: 1px solid #2A2724;
	border-radius: 18px;
	box-shadow: inset 0 0 0 0 transparent;
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.drg-case-panel:last-child {
	margin-bottom: 0;
}

.drg-case-panel > .drg-case-row {
	position: relative;
	z-index: 1;
}

/* Rotierender Farbverlauf hinter dem Rahmen, per default unsichtbar. */
.drg-case-panel::before {
	content: "";
	position: absolute;
	width: 160%;
	padding-bottom: 160%;
	top: 50%;
	left: 50%;
	background: conic-gradient(transparent 0%, #FF6D00 12%, transparent 25%);
	animation: drg-case-panel-spin 4s linear infinite;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	z-index: 0;
}

@keyframes drg-case-panel-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

.drg-case-panel:hover,
.drg-case-panel:focus-within {
	background-color: #211D1A;
	border-color: #FF6D00;
	box-shadow: inset 0 0 0 1px #FF6D00;
}

.drg-case-panel:hover::before,
.drg-case-panel:focus-within::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.drg-case-panel::before {
		animation: none;
	}
}

.drg-case-row {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 44px;
	align-items: center;
}

.drg-case-row__media {
	position: relative;
}

.drg-case-row__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Kleines, nicht-interaktives Etikett auf dem Bild - ersetzt den früheren
   Klick-Hinweis ("Beleg ansehen") der Flip-Variante. Reine Beschriftung,
   kein Button, kein Hover-Zustand - das Bild ist ja bereits sichtbar. */
.drg-case-row__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: "IBM Plex Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #EDE8E3;
	background-color: rgba(13, 12, 12, 0.72);
	padding: 4px 10px;
	border-radius: 4px;
}

.drg-case-row__content {
	display: flex;
	flex-direction: column;
}

.drg-case-row__label {
	font-family: "IBM Plex Mono", monospace;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #FF6D00;
	display: block;
	margin-bottom: 14px;
}

.drg-case-row__title {
	display: block;
	color: #FFFFFF;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 12px;
}

.drg-case-row__text {
	display: block;
	color: #B8A99A;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 16px;
}

.drg-case-row__caption {
	display: block;
	font-size: 13px;
	color: #8A8078;
	line-height: 1.5;
	padding-top: 14px;
	border-top: 1px solid #2A2724;
}

.drg-case-row__caption strong {
	color: #B8A99A;
	font-weight: 600;
}

@media (max-width: 800px) {
	.drg-case-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Fade-In/Fade-Out-Trennlinie über den Kicker-Abschnitten [02]/[03]/[04] auf
   KI-Risikomanagement – 2026-07-23. Auf Wunsch von Dr. Gellner dieselbe
   Trennlinie wie auf der Startseite (siehe
   css/drg-section-transitions.css, #drg-section-loesungsansatz::before
   usw., Durchgang 51) übernommen. Dort läuft die Regel nur auf der
   Startseite, da Teil der GSAP-Scroll-Übergänge-Datei (is_front_page()-
   Gate) – hier bewusst als eigene, einfache Regel ohne GSAP-Abhängigkeit
   in der bereits site-weiten drg-content-enrichments.css platziert, damit
   sie auf JEDER Themenseite ohne eigenes Gate mitläuft.

   Kein position:relative nötig - Avadas `.fusion-fullwidth{position:
   relative}` ist bereits der Standard für alle hundred_percent-Container
   (verifiziert in der generierten Dynamic-CSS), der nötige Positionierungs-
   Kontext für das absolut positionierte ::before ist also immer gegeben.

   Nachtrag 2026-07-16: Selektoren fuer die vier gleichnamigen
   Container-IDs der neuen Cybersecurity-Seite ergaenzt
   (drg-cyber-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) -
   gleiches Muster wie bei den KI-Risikomanagement-IDs, keine neue Regel
   noetig.

   Anders als auf der Startseite (vier Abschnitte, erster Abschnitt nach
   dem Hero bewusst ohne Linie, siehe Durchgang 53) bekommen hier vier
   Abschnitte mit Kicker [02]/[03]/[04]/[05] eigene IDs
   (drg-ki-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) - nur [01]
   direkt nach dem Hero bleibt aus demselben Grund ohne Linie wie auf der
   Startseite (Lesefluss soll nicht sofort unterbrochen werden). Nachtrag
   2026-07-23: [05] (CTA) auf Wunsch nachträglich ergänzt.

   Nachtrag 2026-07-17: Selektoren fuer die vier gleichnamigen Container-IDs
   der Software-FMEA-Seite ergaenzt (drg-fmea-section-gegenueberstellung/
   -vorgehen/-erfahrung/-cta) - gleiches Muster, keine neue Regel noetig.

   Nachtrag 2026-07-20: Selektoren fuer die vier gleichnamigen
   Container-IDs der Risikomanagement-Seite (S07) ergaenzt
   (drg-rm-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) -
   gleiches Muster, keine neue Regel noetig.
   Nachtrag 2026-07-20 (b): Selektoren fuer die vier gleichnamigen
   Container-IDs der Funktionale-Sicherheit-Seite (S08) ergaenzt
   (drg-fs-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) -
   gleiches Muster, keine neue Regel noetig.

   Nachtrag 2026-07-20 (c): Selektoren fuer die vier gleichnamigen
   Container-IDs der Themenseite KI als Werkzeug (S09) ergaenzt
   (drg-kw-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) -
   gleiches Muster, keine neue Regel noetig. Beim Ergaenzen zusaetzlich
   aufgefallen und behoben: der S08-Nachtrag oben hatte ein fehlendes
   Kommentar-Oeffnungszeichen, wodurch der Kommentartext ab "Nachtrag
   2026-07-20 (b)" als ungueltiger Selektor-Text ausserhalb des
   Kommentars stand - das haette die gesamte Selektor-Liste (alle
   Themenseiten-Trennlinien) fuer CSS-Parser ungueltig gemacht.

   Nachtrag 2026-07-21: Selektoren fuer die vier gleichnamigen
   Container-IDs der Themenseite Training & Akademie (S10) ergaenzt
   (drg-ta-section-gegenueberstellung/-vorgehen/-erfahrung/-cta) -
   gleiches Muster, keine neue Regel noetig. Kommentar-Balance vorab
   gegengeprueft (Anzahl Kommentar-Start- vs. Kommentar-Ende-Markierungen im gesamten File), wie in der
   Auftragsvorgabe gefordert - keine erneute Verletzung gefunden.

   Nachtrag 2026-07-21 (S11): Selektoren fuer die neue Uebersichtsseite
   Angebot ergaenzt (drg-ang-section-einordnung/-cta) - anders als die
   bisherigen Themenseiten hat Angebot nur drei nummerierte Abschnitte
   statt fuenf, daher nur zwei statt vier neue IDs. Wie bei allen
   bisherigen Seiten bekommt der erste Abschnitt direkt nach dem Hero
   ([01] Die vier Formen) bewusst keine eigene ID/Trennlinie, damit der
   Lesefluss direkt nach dem Hero nicht unterbrochen wird - gleiches
   Muster wie ueberall sonst. Kommentar-Balance vorab gegengeprueft
   (Anzahl Kommentar-Start- vs. Kommentar-Ende-Markierungen im gesamten
   File per Byte-Scan), keine Verletzung gefunden. */
#drg-ki-section-gegenueberstellung::before,
#drg-ki-section-vorgehen::before,
#drg-ki-section-erfahrung::before,
#drg-ki-section-cta::before,
#drg-cyber-section-gegenueberstellung::before,
#drg-cyber-section-vorgehen::before,
#drg-cyber-section-erfahrung::before,
#drg-cyber-section-cta::before,
#drg-fmea-section-gegenueberstellung::before,
#drg-fmea-section-vorgehen::before,
#drg-fmea-section-erfahrung::before,
#drg-rm-section-gegenueberstellung::before,
#drg-rm-section-vorgehen::before,
#drg-rm-section-erfahrung::before,
#drg-rm-section-cta::before,
#drg-fs-section-gegenueberstellung::before,
#drg-fs-section-vorgehen::before,
#drg-fs-section-erfahrung::before,
#drg-fs-section-cta::before,
#drg-kw-section-gegenueberstellung::before,
#drg-kw-section-vorgehen::before,
#drg-kw-section-erfahrung::before,
#drg-kw-section-cta::before,
#drg-ta-section-gegenueberstellung::before,
#drg-ta-section-vorgehen::before,
#drg-ta-section-erfahrung::before,
#drg-ta-section-cta::before,
#drg-ang-section-einordnung::before,
#drg-ang-section-cta::before,
#drg-fmea-section-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(237, 232, 227, 0.6) 50%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 3;
}