/* =====================================================================
   ÖWR Tirol – Startseite neu (Sektionen .owr2-*)
   CI: Primär #0E478F · Dunkel #0D2A50 · Akzent #A53A57 · Text #414756 · Grau #F1F2F5 · Notruf #C8102E
   ===================================================================== */
.owr2-section { --owr2-max: 1312px; width: min(var(--owr2-max), 100% - 48px); margin: 0 auto; box-sizing: border-box; }
.owr2-label { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #A53A57; }
.owr2-label::before { content: ""; width: 28px; height: 2px; background: #A53A57; display: inline-block; }
.owr2-h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 3rem) !important; line-height: 1.08 !important; font-weight: 800 !important; letter-spacing: -.03em; color: #0D2A50 !important; }
.owr2-text { margin: 0; font-size: 1.1rem; line-height: 1.6; color: #414756; }
.owr2-link { font-weight: 700; color: #0E478F !important; text-decoration: none; }
.owr2-link:hover { color: #A53A57 !important; }
.owr2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none !important; transition: transform .2s ease, filter .2s ease, background .2s, color .2s; }
.owr2-btn:hover { transform: translateY(-2px); }
.owr2-btn--accent { background: #A53A57; color: #fff !important; }
.owr2-btn--accent:hover { filter: brightness(1.1); }
.owr2-btn--glass { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.owr2-btn--glass:hover { background: rgba(255,255,255,.28); }
.owr2-btn--outline { background: transparent; border: 2px solid #0D2A50; color: #0D2A50 !important; }
.owr2-btn--outline:hover { background: #0D2A50; color: #fff !important; }
.owr2-btn--white { background: #fff; color: #0D2A50 !important; }
@keyframes owr2-puls { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.owr2-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.owr2-section-head > div { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Hero: vollflächiges Foto, neutraler Verlauf nur unten ---------- */
.owr2-hero { position: relative; min-height: clamp(600px, 82vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: #0D2A50; }
.owr2-hero picture { position: absolute; inset: 0; display: block; }
.owr2-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.owr2-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(8,12,20,.42) 58%, rgba(8,12,20,.86) 100%); }
.owr2-hero__inner { position: relative; width: min(1312px, 100% - 48px); margin: 0 auto; padding: 120px 0 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.owr2-hero__content { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.owr2-hero .owr2-label { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 18px rgba(0,0,0,.55); }
.owr2-hero .owr2-label::before { background: #fff; }
.owr2-hero__title { margin: 0; font-size: clamp(2.3rem, 4.8vw, 4.2rem) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.035em; color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.owr2-hero__zeile { display: block; }
.owr2-hero__text { margin: 0; font-size: 1.14rem; line-height: 1.55; color: rgba(255,255,255,.9); max-width: 560px; text-shadow: 0 1px 14px rgba(0,0,0,.4); }

/* ---------- Überschrift auf hellem Block ------------------------------------
 * Der Wiedererkennungswert der alten Seite: Versalien in ÖWR-Blau, jede Zeile
 * auf einem hellen Feld, darunter der Claim in Weinrot. Modern bleibt es durch
 * die Mittel, nicht durch die Form – leicht durchscheinende, weich gerundete
 * Blöcke statt harter weißer Balken, ein ruhiger Schatten statt Kontur, und
 * Buchstabenabstand statt gequetschter Versalien.
 *
 * `box-decoration-break: clone` ist hier der Kern: die Zeile ist ein inline
 * gesetztes Element, damit der Block genau so breit wird wie der Text – und
 * bricht der Text auf dem Handy um, bekommt jede entstandene Zeile ihren
 * eigenen Block statt einer einzigen hohen Fläche.
 *
 * Der Abstand zwischen den Blöcken kommt aus einem Außenabstand, nicht aus
 * der Zeilenhöhe. Der Hintergrund eines inline gesetzten Elements ist so hoch
 * wie die Schrift plus Innenabstand und beansprucht keinen Platz im Layout –
 * über die Zeilenhöhe ließe sich der Abstand zwar auch erzeugen, aber nur,
 * indem der ganze Hero um mehr als hundert Pixel wächst und die Buttons unter
 * den Bildschirmrand schiebt.
 * -------------------------------------------------------------------------- */
.owr2-hero__title--block {
	font-size: clamp(2.05rem, 4.2vw, 3.6rem) !important;
	/* Zeilenhöhe = Blockhöhe (1,354 em Schrift + Innenabstand ≈ 1,5 em):
	   bricht eine Zeile auf dem Handy um, liegen die Blöcke sauber
	   untereinander statt übereinander. */
	line-height: 1.56 !important;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #0D2A50 !important;
	text-shadow: none;
}
/* Der Abstand ist knapp bemessen und will nachgerechnet werden, wenn sich
   Schrift oder Innenabstand ändern: der Block ist 1,51 em hoch (Inter bringt
   allein 1,354 em Zeichenfläche mit), die Zeile selbst nur 1,22 em. Ohne
   Außenabstand ragt jeder Block also gut vier Pixel in den nächsten. */
.owr2-hero__title--block .owr2-hero__zeile + .owr2-hero__zeile { margin-top: .04em; }
.owr2-hero__title--block .owr2-hero__zeile > span {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: .02em .3em;
	border-radius: 8px;
	background: rgba(255,255,255,.92);
	box-shadow: 0 10px 34px rgba(9,16,28,.24);
}
@supports (backdrop-filter: blur(6px)) {
	.owr2-hero__title--block .owr2-hero__zeile > span { background: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
}

/* Der Claim steht in Weinrot – dieselbe Farbe wie die Kopfzeile darüber und
   die Akzente im ganzen Haus. Etwas kleiner und nicht in Versalien, damit er
   die Überschrift begleitet und nicht mit ihr konkurriert. */
.owr2-hero__claim { margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 700; line-height: 1.4; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.owr2-hero__claim--block { color: #A53A57; text-shadow: none; }
.owr2-hero__claim--block > span {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: .14em .42em;
	border-radius: 7px;
	background: rgba(255,255,255,.92);
	box-shadow: 0 8px 26px rgba(9,16,28,.2);
}
@supports (backdrop-filter: blur(6px)) {
	.owr2-hero__claim--block > span { background: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
}

/* ---------- Hero-Buttons ----------------------------------------------------
 * Ein gefüllter Hauptbutton, ein tonal abgesetzter zweiter. Beide mit voller
 * Deckkraft: über einem Foto – und erst recht über einem laufenden Film –
 * erfüllt eine reine Kontur den Kontrastwert 3:1 (WCAG 1.4.11) nicht
 * zuverlässig, weil sich der Hintergrund Bild für Bild ändert.
 * -------------------------------------------------------------------------- */
.owr2-hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.owr2-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	height: 56px; padding: 0 30px; border-radius: 12px;
	font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
	text-decoration: none !important; border: 0; cursor: pointer;
	transition: transform .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out;
}
.owr2-cta svg { transition: transform .18s ease-out; }
@media (hover: hover) {
	.owr2-cta:hover { transform: translateY(-2px); }
	.owr2-cta:hover svg { transform: translateX(3px); }
}
.owr2-cta:active { transform: translateY(1px); }
.owr2-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Hauptaktion: weiß gefüllt – maximaler Kontrast gegen jedes Bildmaterial. */
.owr2-cta--primaer { background: #fff; color: #0D2A50 !important; box-shadow: 0 10px 26px -12px rgba(0,0,0,.55); }
@media (hover: hover) { .owr2-cta--primaer:hover { background: #F4F6FA; box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); } }

/* Zweite Aktion: tonal, deutlich leiser, aber vollflächig und damit lesbar. */
.owr2-cta--tonal { background: rgba(10, 20, 36, .84); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
@media (hover: hover) { .owr2-cta--tonal:hover { background: rgba(10, 20, 36, .95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } }

@keyframes owr2-puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.owr2-cta, .owr2-cta svg { transition: none; }
	.owr2-cta:hover { transform: none; }
}

/* ---------- Hero-Film -------------------------------------------------------
 * Das Video wird von main.js erst nachgeladen – nur am Desktop, nur bei
 * schneller Verbindung und nur ohne „prefers-reduced-motion“. Bis dahin (und
 * am Smartphone dauerhaft) bleibt das Posterbild sichtbar und ist damit das
 * LCP-Element.
 * -------------------------------------------------------------------------- */
/* Sanfte Bildbewegung (Ken Burns) auf dem Standbild.
 * Kostet keine zusätzlichen Bytes, läuft auf der GPU und gibt dem Hero
 * Bewegung, solange noch kein Film hinterlegt ist. Sobald das Video sichtbar
 * ist, hört sie auf – und bei reduzierter Bewegung startet sie gar nicht. */
@keyframes owr2-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.2%, -1.6%, 0); }
}
.owr2-hero--bewegt .owr2-hero__bg { animation: owr2-kenburns 32s ease-in-out infinite alternate; will-change: transform; }
.owr2-hero--bewegt.owr2-hero--film-laeuft .owr2-hero__bg { animation: none; }
@media (prefers-reduced-motion: reduce) {
	.owr2-hero--bewegt .owr2-hero__bg { animation: none; }
}

.owr2-hero__video { position: absolute; inset: 0; overflow: hidden; }
.owr2-hero__video video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
	opacity: 0; transition: opacity .8s ease-in;
}
.owr2-hero__video video.ist-sichtbar { opacity: 1; }

.owr2-hero__pause[hidden] { display: none !important; }
.owr2-hero__pause {
	position: absolute; right: 24px; bottom: 24px; z-index: 3;
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px 0 13px; border: 0; border-radius: 999px;
	background: rgba(9, 16, 28, .6); color: #fff;
	font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
	transition: background-color .18s ease-out;
}
.owr2-hero__pause:hover { background: rgba(9, 16, 28, .82); }
.owr2-hero__pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.owr2-hero__pause-icon { width: 13px; height: 13px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--owr2-pause-icon) center/contain no-repeat; mask: var(--owr2-pause-icon) center/contain no-repeat; }
.owr2-hero__pause { --owr2-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4.2' height='16' rx='1.4' fill='black'/%3E%3Crect x='13.8' y='4' width='4.2' height='16' rx='1.4' fill='black'/%3E%3C/svg%3E"); }
.owr2-hero__pause[aria-pressed="true"] { --owr2-pause-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8c0-.9 1-1.4 1.7-.9l10 7.2c.6.4.6 1.4 0 1.8l-10 7.2c-.8.5-1.7 0-1.7-.9V4.8z' fill='black'/%3E%3C/svg%3E"); }

/* Rechte Spalte des Heros: Notruf-Karte über der Kurs-Karte */
.owr2-hero__seite { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; width: 310px; flex: 0 0 auto; }

/* ---------- Notruf im Hero: kleiner Chip rechts neben der Überschrift --------
 * Er liegt als Overlay im freien Raum rechts neben der letzten Zeile der
 * Überschrift. Bewusst absolut positioniert und nicht als Flex-Nachbar: sonst
 * würde er der Überschrift Breite wegnehmen und ihren Zeilenumbruch verändern.
 * Leicht abgedunkelte Fläche statt reiner Kontur, damit er auch über hellen
 * Stellen von Foto oder Film lesbar bleibt. Erst beim Überfahren wird er rot.
 * -------------------------------------------------------------------------- */
.owr2-hero__titelzeile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* Standard ist die sichere Variante: eigene Zeile unter der Überschrift.
   Ob rechts daneben wirklich Platz ist, hängt von Viewport, Schriftgröße und
   Länge der Überschrift ab und lässt sich nicht als feste Regel formulieren –
   im Querformat etwa bricht sie nur zweizeilig um, und die letzte Zeile ist
   dann lang. main.js misst die letzte Textzeile und setzt „hat-platz“ nur,
   wenn der Chip daneben vollständig frei steht.
   bottom: 0 hält ihn innerhalb dieser Zeile, damit er nicht in die Zeile
   darüber ragt. */
.owr2-hero__titelzeile.hat-platz .owr2-hero__notruf { position: absolute; right: 0; bottom: 0; }
.owr2-hero__notruf {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 15px; border-radius: 999px;
	background: rgba(9, 16, 28, .5); color: #fff !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
	font-size: .875rem; font-weight: 500; letter-spacing: -.005em;
	text-decoration: none !important; white-space: nowrap;
	transition: background-color .18s ease-out, box-shadow .18s ease-out;
}
.owr2-hero__notruf strong { font-weight: 700; }
.owr2-hero__notruf-icon { flex: 0 0 auto; color: #FF6B7E; transition: color .18s ease-out; }
@media (hover: hover) {
	.owr2-hero__notruf:hover { background: #C8102E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
	.owr2-hero__notruf:hover .owr2-hero__notruf-icon { color: #fff; }
}
.owr2-hero__notruf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.owr2-hero__notruf, .owr2-hero__notruf-icon { transition: none; }
}

/* Karte „Nächster Kurs“ */
.owr2-hero__kurs {
	display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; flex: 0 0 auto;
	padding: 20px 22px; border-radius: 18px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34);
	-webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); text-decoration: none !important;
	transition: background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.owr2-hero__kurs:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.owr2-hero__kurs-label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.owr2-hero__kurs-titel { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.2; }
.owr2-hero__kurs-meta { font-size: .88rem; color: rgba(255,255,255,.85); line-height: 1.45; }
.owr2-hero__kurs-link { font-size: .9rem; font-weight: 700; color: #fff; margin-top: 2px; }

/* ---------- Fakten-Band (Navy) ---------- */
.owr2-fakten { background: #0D2A50; padding: 0 24px; }
.owr2-fakten .owr2-section { width: min(1312px, 100%); }
.owr2-fakten__grid { display: grid; grid-template-columns: repeat(var(--owr2-fakten-cols, 4), minmax(0, 1fr)); gap: 24px; padding: 40px 0; }
.owr2-fakt { display: flex; flex-direction: column; gap: 6px; }
.owr2-fakt__zahl { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
.owr2-fakt__label { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Intro / Aufgaben ---------- */
.owr2-intro { padding: 96px 0 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; }
.owr2-intro__left { display: flex; flex-direction: column; gap: 20px; }
.owr2-intro__right { display: flex; flex-direction: column; gap: 14px; padding-top: 44px; }
.owr2-intro__right-titel { font-size: .9rem; font-weight: 700; color: #0D2A50; text-transform: uppercase; letter-spacing: .1em; }
.owr2-aufgaben { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 1.05rem; line-height: 1.5; color: #414756; }
.owr2-aufgaben li { display: flex; gap: 12px; align-items: flex-start; padding: 0; }
.owr2-aufgaben li::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #E8EEF7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E478F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 12px no-repeat; }

/* ---------- Fachbereiche ---------- */
.owr2-fachbereiche { padding: 0 0 112px; }
/* Die Anzahl der Kacheln steht nicht mehr fest: --owr2-spalten kommt aus
   dem Kurzbefehl. Flex statt Grid, damit eine unvollständige letzte
   Reihe mittig steht statt links zu kleben. */
.owr2-tiles { --owr2-spalten: var(--owr2-wunsch, 4); --owr2-luecke: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--owr2-luecke); }
.owr2-tile { flex: 0 1 calc((100% - (var(--owr2-spalten) - 1) * var(--owr2-luecke)) / var(--owr2-spalten)); min-width: 0; }
.owr2-tile { position: relative; display: flex; align-items: flex-end; min-height: 380px; border-radius: 22px; overflow: hidden; text-decoration: none !important; background: #0D2A50; transition: transform .35s ease, box-shadow .35s ease; }
.owr2-tile:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(13,42,80,.4); }
.owr2-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.owr2-tile:hover img { transform: scale(1.05); }
.owr2-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,80,0) 40%, rgba(13,42,80,.9) 100%); }
.owr2-tile__text { position: relative; z-index: 1; width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.owr2-tile__titel { font-size: 1.5rem; font-weight: 800; color: #fff !important; letter-spacing: -.02em; }
.owr2-tile__sub { font-size: .9rem; color: rgba(255,255,255,.8) !important; }

/* ---------- Kurse ---------- */
.owr2-kurse { width: 100%; max-width: none; padding: 80px 24px; background: #F1F2F5; }
.owr2-kurse > * { }
.owr2-kurse { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
@supports (width: min(1px, 2px)) { .owr2-kurse { padding-left: max(24px, calc((100% - 1312px) / 2)); padding-right: max(24px, calc((100% - 1312px) / 2)); } }
.owr2-kurse__intro { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.owr2-kurse__liste { display: flex; flex-direction: column; gap: 14px; }
.owr2-kurs { display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 18px; background: #fff; text-decoration: none !important; box-shadow: 0 10px 30px -18px rgba(13,42,80,.3); transition: transform .25s ease, box-shadow .25s ease; }
.owr2-kurs:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(13,42,80,.4); }
.owr2-kurs--leer { color: #414756; font-size: 1rem; }
.owr2-kurs__datum { flex: 0 0 auto; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; border-radius: 14px; background: #0D2A50; color: #fff; }
.owr2-kurs__tag { font-size: 1.6rem; font-weight: 800; line-height: 1; color: #fff; }
.owr2-kurs__monat { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.owr2-kurs__text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.owr2-kurs__kat { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A53A57; }
.owr2-kurs__titel { font-size: 1.25rem; font-weight: 800; color: #0D2A50; }
.owr2-kurs__ort { font-size: .9rem; color: #414756; }
.owr2-kurs__cta { flex: 0 0 auto; display: flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: #E8EEF7; color: #0E478F; font-weight: 700; font-size: .9rem; }
.owr2-kurs:hover .owr2-kurs__cta { background: #0E478F; color: #fff; }
.owr2-training { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding: 20px 26px; border-radius: 18px; border: 1px dashed #A5ABBD; color: #414756; font-size: .95rem; }
.owr2-training svg { flex: 0 0 auto; color: #0E478F; }
.owr2-training strong { color: #0D2A50; }

/* ---------- News (Startseite neu nutzt owr.at-Karten, nur Kopf angepasst) ---------- */
.owr2-news { padding: 112px 0 96px; }
.owr2-news .home-news { margin-top: 0; padding: 0; background: transparent; }
.owr2-news .home-news__inner { max-width: none; }
.owr2-news .aktuelle-nachrichten-titel { display: none; }
.owr2-news .zu-allen-nachrichten-button { display: none; }
.owr2-news .news-card { border-radius: 22px; overflow: hidden; border: 1px solid #E6E8EE; box-shadow: 0 10px 30px -18px rgba(13,42,80,.3); transition: transform .35s ease, box-shadow .35s ease; }
.owr2-news .news-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(13,42,80,.35); }
.owr2-news .news-card__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.owr2-news .news-card__date { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: #8A90A0 !important; }

/* ---------- Mitmachen / Spenden ---------- */
.owr2-mitmachen { padding: 0 0 112px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.owr2-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 420px; padding: 40px; border-radius: 24px; overflow: hidden; }
.owr2-card--navy { background: #0D2A50; }
.owr2-card--accent { background: #A53A57; }
.owr2-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.owr2-card--navy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,80,.2) 0%, rgba(13,42,80,.95) 100%); }
.owr2-card > *:not(.owr2-card__bg) { position: relative; z-index: 1; }
.owr2-card .owr2-label { color: rgba(255,255,255,.8); }
.owr2-card .owr2-label::before { background: rgba(255,255,255,.8); }
.owr2-card__titel { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.03em; color: #fff !important; }
.owr2-card__text { margin: 0; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.88); max-width: 480px; }
.owr2-card .owr2-btn { align-self: flex-start; margin-top: 8px; }
.owr2-card--accent .owr2-btn--white { color: #A53A57 !important; }

/* ---------- Einsatzstellen-Chips ---------- */
.owr2-chips-section { padding: 0 0 112px; display: flex; flex-direction: column; gap: 22px; }
.owr2-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.owr2-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #F1F2F5; color: #0D2A50 !important; font-weight: 600; font-size: .9rem; text-decoration: none !important; transition: background .2s, color .2s; }
.owr2-chip:hover { background: #0E478F; color: #fff !important; }
.owr2-chip--aktiv { background: #0D2A50; color: #fff !important; font-weight: 700; }

/* ---------- Footer-Kontakt (zusätzliche Spalte) ---------- */
.owr-footer-kontakt { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; line-height: 1.6; }
.owr-footer-kontakt__name { font-weight: 800; color: #0D2A50; font-size: 1.05rem; }
.owr-footer-kontakt__notruf { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #C8102E; }
.owr-footer-kontakt__notruf span { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #C8102E; align-items: center; justify-content: center; }
.owr-modern .owr-footer-kontakt, .owr-modern .owr-footer-kontakt * { color: rgba(255,255,255,.8) !important; }
.owr-modern .owr-footer-kontakt__name { color: #fff !important; }
.owr-modern .owr-footer-kontakt__notruf { color: #fff !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.owr2-tiles { --owr2-spalten: 2; }
	.owr2-tile { min-height: 300px; }
	.owr2-intro { grid-template-columns: 1fr; gap: 32px; padding: 72px 0 64px; }
	.owr2-intro__right { padding-top: 0; }
	.owr2-kurse { grid-template-columns: 1fr; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
	.owr2-mitmachen { grid-template-columns: 1fr; }
	.owr2-fakten__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 32px 0; gap: 20px; }
	.owr2-fakt__label { font-size: .7rem; }
	/* Am Handy nicht mehr auf 92vh aufblasen: der Textblock hing dadurch
	   am unteren Rand, darüber stand ein Drittel leeres Bild. Die Höhe
	   ergibt sich jetzt aus dem oberen Abstand plus dem Inhalt – das Foto
	   bekommt oben einen festen Anteil, der Text rückt nach oben. */
	.owr2-hero { min-height: 0; }
	.owr2-hero__inner { padding: clamp(130px, 21vh, 240px) 0 28px; }
	.owr2-hero__bg { object-position: center 30%; }
	.owr2-hero__shade { background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(8,14,24,.35) 50%, rgba(8,14,24,.8) 100%); }
	.owr2-hero__inner { flex-direction: column; align-items: stretch; gap: 18px; }
	/* Nebeneinander statt über die volle Breite gestapelt – die beiden
	   Knöpfe sollen als Paar neben dem Text stehen, nicht als zwei
	   Balken darunter. Deshalb keine Streckung (flex: 0 1 auto). */
	.owr2-cta { height: 50px; padding: 0 18px; font-size: .9375rem; flex: 0 1 auto; }
	.owr2-hero__buttons { gap: 10px; margin-top: 16px; }
	.owr2-hero__seite { width: 100%; align-items: stretch; }
	/* Am Handy ist die Zeilenhöhe der Überschrift kleiner als der Chip in
	   Desktop-Größe – deshalb hier flacher, damit er in die Zeile passt. */
	.owr2-hero__notruf { height: 32px; padding: 0 12px; gap: 6px; font-size: .8rem; }
	.owr2-hero__pause { right: 16px; bottom: 16px; }
}
@media (max-width: 640px) {
	.owr2-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.owr2-tiles { --owr2-spalten: 1; }
	.owr2-kurs { flex-wrap: wrap; gap: 14px; padding: 18px; }
	.owr2-kurs__cta { width: 100%; justify-content: center; }
	.owr2-card { min-height: 320px; padding: 28px; }
	.owr2-fachbereiche, .owr2-news, .owr2-mitmachen, .owr2-chips-section { padding-bottom: 64px; }
	.owr2-news { padding-top: 64px; }
}
.owr2-kurs--voll { opacity: .7; }
.owr2-kurs--voll .owr2-kurs__cta { background: #F6E7EA !important; color: #A5203A !important; }

/* Sehr schmale Geräte (iPhone SE & Co.): etwas enger, damit die beiden
   Knöpfe auch dort nebeneinander bleiben statt zu stapeln. */
@media (max-width: 380px) {
	.owr2-hero__buttons { gap: 8px; }
	.owr2-cta { padding: 0 14px; font-size: .875rem; gap: 7px; }
	.owr2-cta svg { width: 15px; height: 15px; }
}

/* ---------- Hero-Schaltflächen ----------
   Sie sehen aus wie die im Band „Wir helfen dir weiter" (.owr3-btn aus
   pages.css): gleiche Pillenform, gleiche Höhe. Hier kommt nur dazu, was
   im Hero anders ist – der Abstand zum Symbol und der Notruf-Knopf. */
.owr2-hero__buttons .owr3-btn { gap: 9px; }
.owr2-hero__buttons .owr3-btn svg { flex: 0 0 auto; transition: transform .18s ease-out; }
@media (hover: hover) { .owr2-hero__buttons .owr3-btn:hover svg { transform: translateX(3px); } }
.owr2-hero__buttons .owr3-btn--ghost { background: rgba(10, 20, 36, .42); backdrop-filter: blur(2px); }

/* Der Notruf sieht aus wie „Kurse ansehen" – nur das Telefonsymbol
   unterscheidet ihn. Es wandert beim Überfahren nicht mit: der Pfeil bei
   „Mitmachen" zeigt in eine Richtung, ein Telefon tut das nicht. */
@media (hover: hover) {
	.owr2-hero__buttons .owr3-btn--tel:hover svg { transform: none; }
}

@media (max-width: 640px) {
	.owr2-hero__buttons { gap: 10px; }
	.owr2-hero__buttons .owr3-btn { min-height: 46px; padding: 0 18px; font-size: .92rem; }
}

/* Eigene Bilder aus der Startseiten-Maske */
.owr2-card--accent.owr2-card--bild .owr2-card__bg { opacity: .6; }
.owr2-card--accent.owr2-card--bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(165,58,87,.15) 0%, rgba(165,58,87,.6) 40%, rgba(165,58,87,.96) 100%); }
.owr2-intro__bild { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; margin-bottom: 14px; box-shadow: 0 18px 40px -26px rgba(13, 42, 80, .55); }
.owr2-intro__right:has(.owr2-intro__bild) { padding-top: 0; }

/* ---------- Eigene Abschnitte (inc/abschnitte.php) ---------- */
.owr2-eigen { padding: clamp(48px, 6vw, 88px) 0; }
.owr2-eigen--grau { background: #F4F6FA; }
.owr2-eigen--blau { background: #0D2A50; color: #fff; }
.owr2-eigen__kopf { display: grid; gap: 14px; margin-bottom: 28px; }
.owr2-eigen--blau .owr2-h2, .owr2-eigen--blau .owr2-eigen__inhalt h2, .owr2-eigen--blau .owr2-eigen__inhalt h3 { color: #fff !important; }
.owr2-eigen--blau .owr2-label { color: #F2B8C6; }
.owr2-eigen--blau .owr2-label::before { background: #F2B8C6; }
.owr2-eigen__inhalt { font-size: 1.08rem; line-height: 1.7; color: #313847; }
.owr2-eigen--blau .owr2-eigen__inhalt { color: rgba(255, 255, 255, .9); }
.owr2-eigen--blau .owr2-eigen__inhalt a:not(.wp-block-button__link) { color: #fff; }
.owr2-eigen__inhalt > * { margin-top: 0; margin-bottom: 1.1em; }
.owr2-eigen__inhalt > *:last-child { margin-bottom: 0; }
.owr2-eigen__inhalt > p, .owr2-eigen__inhalt > ul, .owr2-eigen__inhalt > ol { max-width: 820px; }
.owr2-eigen__inhalt h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; font-weight: 800; color: #0D2A50; margin-top: 1.4em; }
.owr2-eigen__inhalt h3 { font-size: 1.3rem; font-weight: 700; color: #0D2A50; margin-top: 1.2em; }
.owr2-eigen__inhalt img { max-width: 100%; height: auto; border-radius: 16px; }
.owr2-eigen__inhalt .wp-block-columns { gap: clamp(20px, 3vw, 40px); }
.owr2-eigen__inhalt .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 16px; }
.owr2-eigen__inhalt .wp-block-button__link { color: #fff !important; text-decoration: none !important; }
.owr2-eigen__inhalt .wp-block-button.is-style-outline .wp-block-button__link { color: #0D2A50 !important; }
.owr2-eigen--blau .owr2-eigen__inhalt .wp-block-button.is-style-outline .wp-block-button__link { color: #fff !important; }