vor/nach dem Modul,
deren Abstand das Modul 1rem nach unten schiebt */
p:empty:has(+ * .videowahl), :has(> .videowahl) + p:empty { display: none; }
/* Seitenhintergrund – eine Ebene pro Film (Bild setzt das Modul).
Die neue Ebene blendet in 0,6 s über die alte, die alte verschwindet erst danach. */
html:has(.videowahl) { background-color: #000; }
body:has(.videowahl-player) .videowahl-bilder { display: none; } /* Player offen: Hintergrund schwarz */
body:has(.videowahl) { background: transparent; } /* sonst deckt der Body die Bildebene ab */
.videowahl-bilder {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
.videowahl-bild {
position: absolute;
inset: 0;
background: center / cover no-repeat;
opacity: 0;
transition: opacity 0s .6s;
}
.videowahl-bilder::after { /* Abdunklung für die Lesbarkeit */
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(90deg, #000c, #0008 40%, #0005 65%, #000a);
}
.videowahl {
--rot: var(--designFarbe-1, #e31e24);
/* Maße breit */
--oben: var(--intro-oben); /* Oberkante wie auf Karriere */
--kachel-b: calc(12 * var(--1vw));
--kachel-h: calc(6.75 * var(--1vw));
--kachel-spalt: 1rem;
--schritt: calc(calc(6.75 * var(--1vw)) + 1rem); /* Kachel + Abstand */
--zeile: calc(2 * var(--1vw)); /* Zeilenhöhe Titelspalte */
--titel-b: calc(17 * var(--1vw)); /* Breite Titelspalte */
--pos: 0; /* gewählter Film – setzt das Modul */
--hoehe: calc(var(--100vh) - var(--header-heigth));
container: videowahl / inline-size;
color: #fff;
}
.videowahl-wrap {
box-sizing: border-box;
min-height: calc(var(--100vh) - var(--header-heigth));
padding: var(--intro-oben-mobil) var(--intro-links-mobil) 4rem;
}
.videowahl * { font-family: 'Montserrat', sans-serif; }
/* Auszeichnungen im Text übernehmen die Schrift ihres Absatzes/ihrer Überschrift */
.videowahl-eintrag :is(strong, b, em, i, a, span, small) { font-family: inherit; }
/* ===== Text ===== */
.videowahl-text { position: relative; }
/* Radios: unsichtbar, oben im Textbereich.
Klick auf eine Kachel fokussiert das Radio → schmal scrollt der Browser zum Text. */
.videowahl-radio {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
scroll-margin-top: calc(var(--header-heigth) + 1.5rem);
}
.videowahl-eintrag { display: none; }
.videowahl-radio:checked + .videowahl-eintrag { display: flex; flex-direction: column; } /* schmal: Flyer (steht im HTML vorn) per order unter den Text */
/* Text und Flyer gleiten gemeinsam herein. Die Animation sitzt auf den beiden
Teilen selbst (nicht auf der Section), sonst springt der absolut gesetzte Flyer. */
.videowahl-radio:checked + .videowahl-eintrag :is(.videowahl-inhalt, .videowahl-flyer) { animation: videowahlEin .5s ease-out; }
@keyframes videowahlEin { from { opacity: 0; translate: 0 .75rem; } }
/* Text aus dem Editor – Aufbau wie die alte Seite:
h2 = kleine Zeile, h3 = großer Titel, p = Text.
Sonderlayout (Antrittsbonus): alles in
. */
.videowahl-eintrag h2 {
margin: 0;
font: 300 max(1.1rem, calc(2 * var(--1vw)))/1.2 'Montserrat', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
}
.videowahl-eintrag h3 {
margin: 0;
font: 700 max(3.25rem, calc(7.5 * var(--1vw)))/1 'Saira Extra Condensed', sans-serif;
letter-spacing: -.025em;
text-transform: uppercase;
overflow-wrap: anywhere;
color: #fff;
}
.videowahl-eintrag h3 + h2 { margin-top: -.25em; }
.videowahl-eintrag h2 em { font-size: .55em; font-style: normal; }
.videowahl-eintrag h2 img { height: 1.3em; width: auto; margin-left: 1.1em; vertical-align: top; } /* z. B. Interreg-Logo */
.videowahl-eintrag :is(h2, h3) + p { margin-top: calc(1.5 * var(--1vw)); }
.videowahl-eintrag p {
margin: 0 0 var(--1vw);
font-size: max(.9rem, calc(.9 * var(--1vw)));
font-weight: 300;
line-height: 1.4;
letter-spacing: 1px;
color: #fff;
}
.videowahl-eintrag strong { font-weight: 500; }
.videowahl-eintrag a { color: #fff; text-underline-offset: .2em; }
.videowahl-eintrag a:hover, .videowahl-eintrag a:focus-visible { color: var(--rot); }
.videowahl-eintrag a *:not(.videowahl-nr) { color: inherit; } /* user.css setzt „body * { color: white }“ – im Link die Linkfarbe erben */
/* Schlichter Text:
…
um den Text eines Eintrags
(Karriere): Links ohne Unterstrich, (m|w|d) gerade, normaler Abstand nach dem Titel */
.videowahl-eintrag .schlicht a { text-decoration: none; }
.videowahl-eintrag .schlicht em { font-style: normal; font-weight: 300; }
.videowahl-eintrag .schlicht strong { font-weight: 400; }
.videowahl-eintrag .schlicht strong a { font-weight: 500; }
.videowahl-eintrag .schlicht h3 { margin-bottom: .5rem; }
.videowahl-eintrag .schlicht h3 + p { margin-top: 1rem; }
/* Zwischenüberschrift (z. B. „Offene Stellen“) */
.videowahl-eintrag h4 { margin: max(1.2rem, calc(1.6 * var(--1vw))) 0 .5rem; font: 400 max(1.2rem, calc(1.7 * var(--1vw)))/1.2 system-ui, sans-serif; color: #fff; }
.videowahl-eintrag h3 + h4 { margin-top: .5rem; }
/* Dokument-Link als eigene Zeile:
Name (m/w/d)
*/
.videowahl-eintrag .dokument { margin: 0; font: 400 max(1.1rem, calc(1.55 * var(--1vw)))/1.5 'Montserrat', sans-serif; }
.videowahl-eintrag .dokument a { text-decoration: none; }
.videowahl-eintrag .einzug { padding-left: .5em; } /*
= leicht eingerückt */
.videowahl-eintrag .dokument em { font-size: .55em; font-style: normal; }
/* Sonderlayout Antrittsbonus */
.videowahl-eintrag .praemie h2 { font: 200 max(1.1rem, calc(2 * var(--1vw)))/1.2 'Saira Extra Condensed', sans-serif; letter-spacing: 0; }
.videowahl-eintrag .praemie h4 { margin: 0 0 calc(.5 * var(--1vw)); font: 700 max(1.8rem, calc(4 * var(--1vw)))/1.2 'Saira Extra Condensed', sans-serif; color: #fff; }
.videowahl-eintrag .praemie h3 { margin-bottom: .5rem; font-size: max(4rem, calc(9.5 * var(--1vw))); text-transform: none; }
.videowahl-eintrag .praemie h3 em { display: inline-block; font-size: max(1.8rem, calc(4 * var(--1vw))); line-height: 1.2; font-style: normal; letter-spacing: 1px; }
.videowahl-eintrag .praemie h3 + p { margin-top: 0; }
.videowahl-eintrag .praemie p { font: 300 max(1.2rem, calc(1.7 * var(--1vw)))/1.4 'Saira Extra Condensed', sans-serif; letter-spacing: 0; }
.videowahl-eintrag .praemie strong { font-weight: 700; }
.videowahl-eintrag .praemie a { font: 700 max(.95rem, calc(1.2 * var(--1vw))) 'Saira Extra Condensed', sans-serif; text-decoration: none; }
.videowahl-eintrag .praemie .uckermark { font: 300 max(.6rem, calc(.7 * var(--1vw)))/1.2 'Montserrat', sans-serif; letter-spacing: 1px; }
.videowahl-eintrag .praemie .uckermark :is(em, strong) { font-style: normal; font-weight: 400; }
/* Mitwirkende – wie normaler Text, etwas kräftiger */
.videowahl-eintrag .videowahl-team { font-weight: 500; }
.videowahl-team span { display: block; } /* bis 4 Personen: je eine Zeile */
.videowahl-team-lang span { display: inline; } /* mehr: fortlaufend mit Komma */
.videowahl-team-lang span:not(:last-child)::after { content: ','; }
/* Start-Zeile: „START ///“ bzw. „01 ///“ rot, Laufzeit, runder Play-Knopf */
.videowahl-eintrag .videowahl-start { margin-top: var(--1vw); }
.videowahl-eintrag .videowahl-ab {
display: inline-flex;
align-items: center;
gap: .45em;
color: #fff;
font-size: max(1rem, var(--1vw));
font-weight: 300;
text-decoration: none;
}
.videowahl-nr { color: var(--rot); }
.videowahl-dauer { font-size: .9em; }
.videowahl-ab::after {
content: '';
width: 1.5em;
aspect-ratio: 1;
background: var(--designIconPlay) center / contain no-repeat;
transition: scale .25s;
}
.videowahl-eintrag .videowahl-ab:hover { color: #fff; }
.videowahl-ab:hover::after, .videowahl-ab:focus-visible::after { background-image: var(--designIconPlayHover); scale: 1.15; }
/* Flyer (öffnet groß als Popover, ohne JS) */
.videowahl-flyer {
display: block;
width: max(6rem, calc(8.4 * var(--1vw)));
order: 1; /* schmal (Handy): unter dem Text … */
margin: 1.5rem auto 0; /* … und waagerecht mittig */
padding: 0;
border: 0; /* wie Original: ohne Rahmen und Schatten */
background: none !important;
cursor: zoom-in;
}
.videowahl-flyer img { display: block; width: 100%; transform-origin: 0 0; transition: .5s; }
/* Hover wie im Original: Bild wird größer, hebt sich nach links oben ab, mit Schatten */
.videowahl-flyer:is(:hover, :focus-visible) img {
filter: brightness(1) grayscale(0) drop-shadow(6px 7px 10px black);
transform: translate(-5.5%, -11%) scale(1.1); /* = Original „width: 110%; translate(-5%, -10%)“, aber ohne dass der Text daneben springt */
box-shadow: 0 0 0 1px #fff;
}
.videowahl-flyer-gross {
max-width: min(calc(92 * var(--1vw)), 40rem);
max-height: calc(88 * var(--1vh));
padding: 0;
border: 0;
background: none;
}
.videowahl-flyer-gross::backdrop { background: #000c; backdrop-filter: blur(4px); }
.videowahl-flyer-gross img { display: block; max-height: calc(88 * var(--1vh)); width: auto; }
/* ===== Liste ===== */
.videowahl-liste { margin-top: 2.5rem; }
.videowahl-titelliste { display: none; }
/* --aktiv / --fokus (0 oder 1) setzt das Modul für den gewählten Film */
.videowahl-titel,
.videowahl-kachel { --aktiv: 0; --fokus: 0; cursor: pointer; }
.videowahl-kachel { text-decoration: none; } /* Kachel ist ein Link (Film abspielen) */
.videowahl-kacheln {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.videowahl-kachel {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
outline: 2px solid rgb(255 255 255 / var(--fokus));
outline-offset: 3px;
box-shadow: 0 0 0 calc(2px * var(--aktiv)) var(--rot), 2px 2px 10px #000a;
}
.videowahl-kachel img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: scale .4s;
}
.videowahl-kachel::before { /* Abdunklung unten für den Titel */
content: '';
position: absolute;
inset: 40% 0 0;
z-index: 1;
background: linear-gradient(transparent, #000c);
}
.videowahl-kachel::after { /* Play-Symbol */
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: var(--designIconPlay) center / 3.5rem no-repeat;
opacity: .85;
transition: opacity .25s;
}
.videowahl-kachel span {
position: absolute;
left: .6rem;
right: .6rem;
bottom: .35rem;
z-index: 2;
font: 700 1.35rem/1.05 'Saira Extra Condensed', sans-serif;
letter-spacing: .03em;
text-transform: uppercase;
color: color-mix(in srgb, var(--rot) calc(var(--aktiv) * 100%), #fff);
text-shadow: 0 1px 3px #000;
}
.videowahl-kachel:hover img { scale: 1.06; }
.videowahl-kachel:hover::after { background-image: var(--designIconPlayHover); opacity: 1; }
/* ===== Breit: Aufbau wie das Original =====
Links der Text (5 vw Rand), rechts Titelspalte + Kachelspalte (7,5 vw Rand).
Die gewählte Kachel steht bei 25 vh. */
@container videowahl (min-width: 50rem) {
.videowahl-wrap {
position: relative;
display: flex;
padding: 0;
height: calc(var(--100vh) - var(--header-heigth));
overflow: hidden;
}
/* Text */
.videowahl-text {
flex: 1;
padding: var(--oben) calc(2 * var(--1vw)) 0 var(--intro-links);
}
.videowahl-eintrag { max-width: calc(51 * var(--1vw)); } /* Textbreite wie Original */
.videowahl-eintrag h3 { margin-left: -.015em; }
.videowahl-eintrag .praemie { margin: calc(-3 * var(--1vh)) 0 0 calc(5 * var(--1vw)); } /* Antrittsbonus: wie Original bei 22 vh / 10 vw */
.videowahl-eintrag p { font-size: max(.75rem, calc(.9 * var(--1vw))); margin-bottom: 1rem; }
.videowahl-eintrag .videowahl-ab { font-size: max(.8rem, var(--1vw)); }
/* Flyer: schwebt rechts im Textbereich (float) – wie im Original links bei --flyer-x,
oben bei Titel-Oberkante + --flyer-y (setzt das Modul, Einstellung „Flyer“).
Ein unsichtbarer Abstandhalter (::before) schiebt ihn auf die Höhe. Weil er ein
float ist, weicht der Text ihm aus: beim Verkleinern liegt er nie über dem Text. */
.videowahl-radio:checked + .videowahl-eintrag { display: block; }
.videowahl-eintrag:has(.videowahl-flyer)::before {
content: '';
float: right;
width: 0;
height: var(--flyer-y, calc(21 * var(--1vw)));
}
.videowahl-flyer {
float: right;
clear: right;
margin: 0 calc(calc(47.6 * var(--1vw)) - var(--flyer-x, calc(45.6 * var(--1vw)))) 1rem 1.5rem; /* 47,6 vw = rechter Textrand (56 vw) − Flyerbreite */
}
/* Liste */
.videowahl-liste {
flex: none;
display: flex;
gap: var(--kachel-spalt);
margin: 0 calc(7.5 * var(--1vw)) 0 0;
}
/* Titelspalte: Titel des gewählten Films mittig neben der markierten Kachel */
.videowahl-titelliste {
display: block;
width: var(--titel-b);
margin: 0;
padding: calc(var(--oben) + calc(3.45 * var(--1vw))) 0 0; /* Titel wie im Original etwas unter Kachelmitte */
list-style: none;
}
.videowahl .videowahl-titel { /* .videowahl davor: user.css setzt „.com-content-article__body * { Montserrat }“ */
display: flex;
justify-content: flex-end;
align-items: center;
gap: .25em;
height: var(--zeile);
padding-right: calc(var(--1vw) - var(--1vw) * var(--aktiv)); /* gewählter Titel rückt zur Kachel */
font: 500 calc(calc(1.1 * var(--1vw)) + calc(.6 * var(--1vw)) * var(--aktiv)) / 1 'Saira Extra Condensed', sans-serif;
text-transform: uppercase;
white-space: nowrap;
color: #fff;
opacity: calc(.5 + .5 * var(--aktiv));
text-decoration: underline rgb(255 255 255 / var(--fokus));
text-underline-offset: .2em;
transition: font-size .35s, opacity .35s, padding-right .35s;
}
.videowahl-titel:hover { opacity: 1; }
.videowahl-titel small {
font: inherit;
font-size: .6em;
color: color-mix(in srgb, var(--rot) calc(var(--aktiv) * 100%), #fff);
}
/* Kachelspalte: gleitet so, dass der gewählte Film oben steht */
.videowahl-kacheln {
align-content: start; /* wenige Filme: Zeilen nicht auf die Höhe strecken */
width: var(--kachel-b);
grid-template-columns: 1fr;
gap: var(--kachel-spalt);
padding-top: calc(var(--oben) + calc(.35 * var(--1vw)));
}
/* Mit Skript (liste.js setzt .videowahl-js): beide Spalten gleiten zum gewählten
Film, Kacheln darüber blenden aus (--i = Nummer der Kachel). */
.videowahl-js .videowahl-titelliste {
translate: 0 calc(var(--pos) * var(--zeile) * -1);
transition: translate .07s ease;
}
.videowahl-js .videowahl-kacheln {
translate: 0 calc(var(--pos) * var(--schritt) * -1);
transition: translate .07s ease;
}
.videowahl-js .videowahl-kacheln li {
opacity: clamp(0, var(--i) - var(--pos) + 1, 1);
transition: opacity .35s;
}
/* Ohne Skript: die Liste ist eine normale Scrollfläche mit Scrollbalken
(Mausrad, Balken anklicken und ziehen); Auswahl per Klick wie gewohnt. */
.videowahl:not(.videowahl-js) .videowahl-liste {
align-self: stretch;
padding: 0 var(--1vw) 2rem 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #ffffff66 transparent;
}
/* Kachel wie im Original: markiert (oder Maus drüber) = größer, Bild
zoomt etwas, dunkles Band unten, Schlagschatten nach rechts unten */
.videowahl-kachel:is(:hover, :focus-visible) { --aktiv: 1; }
.videowahl-kachel {
outline-offset: 2px;
box-shadow: 10px 10px 10px -7px rgb(0 0 0 / var(--aktiv));
scale: calc(1 + .05 * var(--aktiv));
transition: scale .5s, box-shadow .5s;
}
.videowahl-kachel img { scale: calc(1 + .1 * var(--aktiv)); transition: scale .5s; }
.videowahl-kachel:hover img { scale: 1.1; }
.videowahl-kachel::before { /* dunkles Titelband */
inset: auto 0 0;
height: 2.1rem;
background: rgb(38 38 38 / .6);
opacity: var(--aktiv);
transition: opacity .5s;
}
.videowahl-kachel::after { background-size: 25%; opacity: var(--aktiv); }
.videowahl-kachel span {
left: calc(.6 * var(--1vw));
right: calc(.6 * var(--1vw));
bottom: 0;
font-size: calc(1.25 * var(--1vw));
line-height: 2.1rem;
letter-spacing: 0;
text-shadow: none;
}
}
/* ===== Player (nur bei ?abspielen=1) ===== */
html:has(.videowahl-player) { overflow: hidden; }
.videowahl-player {
--rot: var(--designFarbe-1, #e31e24);
position: fixed;
inset: var(--header-heigth) 0 0;
z-index: 99998;
overflow: hidden;
background: #000;
color: #fff;
user-select: none;
-webkit-user-select: none;
outline: none;
}
body .videowahl-player * { font-family: Roboto, Arial, sans-serif; }
.videowahl-player.ruhig { cursor: none; }
.videowahl-player video {
position: absolute;
inset: 0;
width: 100%;
height: 101%;
margin-top: -4px;
object-fit: contain;
background: #000;
}
/* Schließen – schwebt oben rechts */
.videowahl-zu {
position: absolute;
top: .75rem;
right: .75rem;
z-index: 3;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: .55rem;
box-sizing: border-box;
border-radius: 50%;
background: #0008;
color: #fff;
transition: background-color .2s, opacity .3s;
}
.videowahl-zu:hover, .videowahl-zu:focus-visible { background: var(--rot); color: #fff; }
.videowahl-zu svg { width: 100%; height: 100%; fill: currentColor; }
/* Steuerleiste */
.videowahl-steuer {
position: absolute;
inset: auto 0 0;
z-index: 2;
padding: 3rem .75rem 0;
background: linear-gradient(transparent, #000b);
transition: opacity .3s;
}
.videowahl-steuer[hidden] { display: none; }
.videowahl-player.ruhig :is(.videowahl-steuer, .videowahl-zu) { opacity: 0; pointer-events: none; }
.videowahl-fortschritt {
--gespielt: 0%;
--puffer: 0%;
--hover: 0%;
position: relative;
display: flex;
align-items: center;
height: 1rem;
margin: 0 .25rem;
cursor: pointer;
touch-action: none;
outline: none;
}
.videowahl-schiene {
position: relative;
width: 100%;
height: 3px;
background: #ffffff33;
transition: height .1s;
}
.videowahl-fortschritt:is(:hover, .zieht, :focus-visible) .videowahl-schiene { height: 5px; }
.videowahl-puffer, .videowahl-gespielt, .videowahl-hover { position: absolute; inset: 0 auto 0 0; }
.videowahl-puffer { width: var(--puffer); background: #ffffff66; }
.videowahl-hover { width: var(--hover); background: #ffffff44; opacity: 0; }
.videowahl-gespielt { width: var(--gespielt); background: var(--rot); }
.videowahl-fortschritt:hover .videowahl-hover { opacity: 1; }
.videowahl-knopf {
position: absolute;
left: var(--gespielt);
top: 50%;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--rot);
translate: -50% -50%;
scale: 0;
transition: scale .1s;
}
.videowahl-fortschritt:is(:hover, .zieht, :focus-visible) .videowahl-knopf { scale: 1; }
.videowahl-vorschau {
position: absolute;
bottom: 1.4rem;
left: clamp(1.5rem, var(--hover), calc(100% - 1.5rem));
translate: -50%;
padding: .2rem .45rem;
border-radius: .25rem;
background: #000c;
font-size: .8rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
opacity: 0;
pointer-events: none;
}
.videowahl-fortschritt:is(:hover, .zieht) .videowahl-vorschau { opacity: 1; }
.videowahl-knoepfe { display: flex; align-items: center; height: 3rem; }
.videowahl-btn {
flex-shrink: 0;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: .65rem;
box-sizing: border-box;
border: 0;
border-radius: 50%;
background: none !important;
color: #fff;
cursor: pointer;
opacity: .9;
transition: opacity .15s;
}
.videowahl-btn:hover { opacity: 1; color: #fff; }
.videowahl-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.videowahl-btn svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 2px #0008); }
.videowahl-btn.videowahl-tempo { width: auto; min-width: 3rem; padding: 0 .5rem; border-radius: 1rem; font-size: .85rem; font-weight: 700; }
.videowahl-zeit {
padding: 0 .6rem;
font-size: .85rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-shadow: 0 0 2px #0008;
}
.videowahl-platz { flex: 1; }
.videowahl-ton { display: flex; align-items: center; }
.videowahl-ton input {
--v: 100%;
width: 0;
height: 3px;
margin: 0;
opacity: 0;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(90deg, #fff var(--v), #ffffff44 var(--v)) !important;
border: 0;
cursor: pointer;
transition: width .2s, opacity .2s, margin .2s;
}
.videowahl-ton:is(:hover, :focus-within) input { width: 4.5rem; margin-right: .5rem; opacity: 1; }
.videowahl-ton input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.videowahl-ton input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
/* Symbole umschalten */
.videowahl-knoepfe :is(.i-pause, .i-nochmal, .i-stumm, .i-klein) { display: none; }
.videowahl-player.spielt .videowahl-knoepfe .i-play { display: none; }
.videowahl-player.spielt .videowahl-knoepfe .i-pause { display: block; }
.videowahl-player.ende .videowahl-knoepfe :is(.i-play, .i-pause) { display: none; }
.videowahl-player.ende .videowahl-knoepfe .i-nochmal { display: block; }
.videowahl-player.stumm .videowahl-knoepfe .i-laut { display: none; }
.videowahl-player.stumm .videowahl-knoepfe .i-stumm { display: block; }
.videowahl-player.vollbild .videowahl-knoepfe .i-gross { display: none; }
.videowahl-player.vollbild .videowahl-knoepfe .i-klein { display: block; }
/* kurzes Symbol in der Mitte */
.videowahl-blitz {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 4.5rem;
height: 4.5rem;
padding: 1.1rem;
box-sizing: border-box;
border-radius: 50%;
background: #0008;
translate: -50% -50%;
opacity: 0;
pointer-events: none;
}
.videowahl-blitz svg { display: none; width: 100%; height: 100%; fill: #fff; }
.videowahl-blitz[data-icon="play"] .i-play,
.videowahl-blitz[data-icon="pause"] .i-pause,
.videowahl-blitz[data-icon="vor"] .i-vor,
.videowahl-blitz[data-icon="zurueck"] .i-zurueck { display: block; }
.videowahl-blitz.an { animation: videowahlBlitz .55s ease-out; }
@keyframes videowahlBlitz { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 1.6; } }
/* Ladekreis */
.videowahl-laden {
position: absolute;
left: 50%;
top: 50%;
width: 3.5rem;
height: 3.5rem;
margin: -1.75rem 0 0 -1.75rem;
box-sizing: border-box;
border: 4px solid #ffffff33;
border-top-color: #fff;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity .2s .3s;
animation: videowahlDrehen .9s linear infinite;
}
.videowahl-player.laedt .videowahl-laden { opacity: 1; }
@keyframes videowahlDrehen { to { rotate: 1turn; } }
/* End Videowahl */
/* ================== 5. Rettungswachen ================== */
/* ===== Allgemein ===== */
/* --rw-bereit: 0 beim Laden, nach 1,5 s 1. Die Übergänge der Kacheln sind damit multipliziert:
Während die Seite lädt (Schrift wird nachgeladen, Spalten springen um), wechseln die Kacheln
ohne Animation – sonst klappen sie beim Laden sichtbar auf und wieder zu. */
@property --rw-bereit { syntax: ''; inherits: true; initial-value: 0; }
@keyframes rwBereit { to { --rw-bereit: 1; } }
p { margin: 0 0 1rem; }
* { font-family: 'BebasNeue'; }
img { max-width: 100%; height: auto; }
body.itemid-104 {
background: linear-gradient(#00000080, #00000080),
url("../../../images/hintergruende/Rettungswachen-in-der-Uckermark.jpg") center / cover no-repeat fixed #000;
}
body.itemid-104 .com-content-article__body { padding: 0; max-width: none; width: auto; }
/* ===== Grundlayout: links Intro + Karte, rechts Kacheln =====
Passen beide nicht nebeneinander, bricht die Liste um (flex-wrap). */
.rw {
--kachel-min: 1.5rem; /* Mindestgröße Kachel (1em) */
--min-links: 22rem; /* Mindestbreite links */
--min-rechts: calc(var(--kachel-min) * 23.75 + 20px); /* 2 Kacheln nebeneinander */
container-type: inline-size;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4rem;
/* Gleicher Bezugspunkt wie Karriere. Kleine optische Schriftkorrektur,
damit die sichtbare Oberkante der großen Buchstaben übereinstimmt. */
--rw-oben: calc(var(--intro-oben-mobil) + .475rem);
--rw-links: var(--intro-links-mobil);
/* keine min-height: Der body (Grid) füllt die Höhe schon, eine eigene Mindesthöhe
plus Abstand oben machte die Seite länger als das Fenster */
animation: rwBereit 0s 1.5s forwards; /* schaltet die Kachel-Übergänge frei, siehe unten */
margin: var(--rw-oben) var(--intro-links-mobil) 0;
line-height: 1.5;
}
/* ===== Links: Text, "Film ab!", Karte (liegt im Grid über den Textzeilen) ===== */
.rw-intro {
--titel: max(7.5cqi, 2.75rem); /* Schriftgröße "Rettungswachen" */
flex: 1 1 auto;
min-width: min(var(--min-links), 100%);
display: grid;
grid-template-rows: repeat(4, auto) 1fr;
justify-items: start;
/* Oberkante der Großbuchstaben bündig mit der Oberkante der Kacheln:
bei line-height 1 liegt sie in Saira Extra Condensed 0.145em unter der Zeilenoberkante */
/* links wie Home/Karriere (--rw-links, siehe .rw); .rw hat schon den Seitenrand */
margin: calc(var(--titel) * -.16) 0 0 calc(var(--rw-links) - var(--intro-links-mobil));
color: var(--designFarbe-0);
letter-spacing: 1px;
}
.rw-intro > * { grid-column: 1; font-family: 'Montserrat'; font-weight: 300; }
/* Ebenen: die Intro-Spalte liegt als Ganzes über den Kacheln (wie vorher die Karte mit 9999),
darin liegt die Karte unten und der Text oben – die Karte darf den Text überlappen,
verdeckt ihn aber nicht mehr */
.rw-intro { position: relative; z-index: 9999; }
.rw-intro > :not(.rw-karte) { position: relative; z-index: 1; }
.rw-intro h3 {
grid-row: 1;
margin: 0 0 .5rem -.015em;
font: 700 var(--titel)/1 'Saira Extra Condensed';
text-transform: uppercase;
}
.rw-intro h2 {
grid-row: 2;
margin: -.5em 0 calc(.5rem + .5em);
font-size: max(2cqi, 1rem);
text-transform: uppercase;
}
.rw-intro p { grid-row: 3; }
/* Text und „Film ab!“ gleich groß wie im Original (dort beide 0.9vw, „Film ab!“ fett),
hier etwas größer: 1cqi = 1/7.5 der Überschrift */
.rw-intro :is(p, .rw-film) { font-size: max(1cqi, .8rem); }
.rw-intro .rw-film { /* Link auf ?abspielen=1, Player + Player-CSS kommen vom Filme-Modul */
grid-row: 4;
position: relative;
color: var(--designFarbe-0);
font-weight: 700;
text-decoration: none;
margin-top: calc(.25em + .5rem);
cursor: pointer;
box-shadow: 0 0 0 var(--designFarbe-1);
transition: .5s;
}
.rw-film:hover { box-shadow: 0 2px 0 var(--designFarbe-1); }
.rw-film::after {
content: '';
position: absolute;
left: 0;
width: calc(100% + 2em);
height: 1.5em;
background: var(--designIconPlay) no-repeat right 50%;
}
.rw-film:hover::after { background-image: var(--designIconPlayHover); }
/* Karte: links 13%, Breite 89% der Intro-Box (100% + 9cqi) */
.rw-karte {
--box: calc(100% + 9cqi);
grid-row: 1 / 6;
position: relative;
z-index: 0; /* unter dem Text, siehe .rw-intro */
container-type: inline-size; /* Ortsmarken skalieren mit der Karte */
width: calc(var(--box) * .89);
/* Die Uckermark endet bei y = 418 von 512 – der leere Streifen darunter wird abgeschnitten,
sonst ragt der Kasten der Karte unten aus der Seite und macht sie scrollbar.
Ortsmarken stehen deshalb mit top in cqi (= % der Kartenbreite) statt in % der Höhe. */
aspect-ratio: 512 / 430;
overflow: clip;
margin: -2.4cqi 0 0 calc(var(--box) * .13 - 5cqi); /* unten vorher -.14 bei quadratischer Karte – gleiche Unterkante */
opacity: .66;
pointer-events: none; /* "Film ab!" bleibt klickbar */
}
/* quadratisch wie der viewBox; absolut, damit sie nicht in die Breitenberechnung der Intro-Spalte eingeht */
.rw-karte svg { position: absolute; inset: 0 0 auto; display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.rw-flaeche {
pointer-events: auto;
fill: #0009;
stroke: #fff;
stroke-width: .3px;
stroke-miterlimit: 22.9256;
stroke-dasharray: 1650;
stroke-dashoffset: 1300;
animation: rwUmriss 4s linear forwards;
transition: fill .3s;
}
.rw-karte:hover .rw-flaeche,
.rw:has(.kachel:focus) .rw-flaeche { fill: #000000d6; }
@keyframes rwUmriss {
0% { stroke-dashoffset: 1300; }
20% { stroke-dashoffset: 1000; }
75% { stroke-dashoffset: 0; stroke: #fff; }
100% { stroke-dashoffset: 0; stroke: #fff0; }
}
/* ===== Ortsmarken: Link = Pin + Kreis + Ortsname =====
Kommen aus dem Modul mod_urgrettungswachen (aus GPS-Koordinaten berechnet):
Name rechts vom Pin
Name links vom Pin
Pin links vom Namen (.pin): ::before = Pin, ::after = Kreis
Pin rechts vom Namen (.pin.text-links): ::after = Pin, ::before = Kreis
left/top = Lage der Pin-Spitze: left in %, top in cqi (beides bezogen auf die Kartenbreite).
Der aktive Zustand (Hover / Kachel hat den Fokus) hängt an den IDs
und wird vom Modul als