/* AKT-2/3 — Aktionen:Kopf-Stoerer, Aktions-Buehne, Pop-up (Milestones AKT-2/3, 2026-10-27). Eingebunden ueber $addCssFiles in include/sws.php NUR, wenn fuer die Seite eine Aktion laeuft. NICHT in main.css/responsive.css ergaenzen:beide tragen einen AUTO-GENERATED-Kopf. Gestaltungsvorlage:Agentur-Previews HGK-17099 (Docs/aktionen-hgk-17099/*.zip, _PREVIEW). Masse aus den Vorlagen sind als Herleitung an der Regel vermerkt;"Einheit" meint die Koordinaten der Agentur-SVGs (Headline-Grafik viewBox 478 x 283, Pop-up 700 x 500). */ /* ============================================================== Kopf-Stoerer == Markup (aktionenKopfStoererHtml):.kopfAktion umschliesst Kopfbild bzw. .kopfCountdown innerhalb von .contentHeader > div > div:nth-child(1) (flex, zentriert, overflow:hidden). */ .kopfAktion{/* Bezugsrahmen = das Bild selbst (Herleitung wie .kopfCountdown, kopf-countdown.css). */ position:relative;flex:0 0 auto;/* Bildbreite je Breakpoint:Bildklasse c1o liefert 1920/1610/1260/760/480 px = --width-max, ausser unter 480px Viewport (Bild 480px, --width-max 760px) - siehe Media Query unten. */ --kopfAktion-bildbreite:var(--width-max);/* Durchmesser 13 % der Bildbreite:Agentur-Screens (1920er Layout, 26.10.2026) zeigen den Stoerer mit ~240-250px Durchmesser;250px deckt im E-Rechnung-Kopfbild den eingebrannten roten Stichtag-Kreis (gemessen an der Vorschau 27.10.2026:Kreis ~250px, x 1590-1840) ganz ab, den die Agentur mit dem Stoerer ueberdeckt. 250 / 1920 = 0,13. */ --kopfAktion-groesse:calc(var(--kopfAktion-bildbreite) * 0.13);/* Sichtbarer Bildausschnitt:Das Bild ist breiter als der Viewport und wird beidseitig beschnitten;(Bildbreite - 100vw) / 2 ist der verdeckte Rand je Seite. */ --kopfAktion-beschnitt:max(0px, calc((var(--kopfAktion-bildbreite) - 100vw) / 2))}.kopfAktionStoerer{position:absolute;z-index:1;/* Oberkante:Lage des Stichtag-Kreises im E-Rechnung-Kopfbild, 22px unter der Bildkante bei 1920px Bildbreite = 1,15 % (Vorschau 27.10.2026);Agentur-Screen BackOffice:~36px - der gemeinsame Wert folgt dem Kreis, weil er sonst als Ring hervorschaut. */ top:calc(var(--kopfAktion-bildbreite) * 0.0115);width:var(--kopfAktion-groesse);height:var(--kopfAktion-groesse);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 calc(var(--kopfAktion-groesse) * 0.1);background:var(--color-red);color:var(--color-white);text-align:center;text-transform:uppercase;font-weight:700;font-variation-settings:var(--font-condensed);/* Schriftgrad 11 % des Durchmessers:Vorlage S. 4 (PDF 3xBuehne) 26px Schrift auf 235px. */ font-size:calc(var(--kopfAktion-groesse) * 0.11);line-height:1.15}/* Links (BackOffice, ChefsCockpit):Kreis mit eckiger Ecke unten rechts (Vorlage S. 4). Linke Kante 11 % der Bildbreite (Screen BackOffice:210px / 1920), aber nie im beschnittenen Rand:mindestens Beschnitt + Seitenabstand. */
.kopfAktion-links > .kopfAktionStoerer{left:max(11%, calc(var(--kopfAktion-beschnitt) + var(--gap-box2)));border-radius:50% 50% 0 50%}/* Rechts (E-Rechnung):eckige Ecke unten links;rechte Kante 3,9 % vor dem Bildrand = rechte Kante des Stichtag-Kreises im Kopfbild (75px / 1920, Vorschau 27.10.2026), nie im beschnittenen Rand. */
.kopfAktion-rechts > .kopfAktionStoerer{right:max(3.9%, calc(var(--kopfAktion-beschnitt) + var(--gap-box2)));border-radius:50% 50% 50% 0}@media screen and (max-width:1019px){/* Mobil:Sichtbar bleibt vom Kopfbild nur der Streifen zwischen Navigation und blauer Breadcrumb-Box - gemessen an der Vorschau 27.10.2026 (390px Viewport) rund 92px hoch. Durchmesser 80px + Abstand oben 6px = 86px passen hinein (88px ragten sichtbar in die Box). Schrift fest 10px:Die laengste Zeile ("SPARVORTEIL", 11 Zeichen x 0,475 em = 5,2 em = 52px) passt in den 80px-Kreis auf Hoehe der zweiten Zeile. Buendig mit der Inhaltsbox wie der Countdown (kopf-countdown.css), Entscheidung O9. */ .kopfAktion{--kopfAktion-groesse:80px}.kopfAktionStoerer{top:6px;font-size:10px}.kopfAktion-links > .kopfAktionStoerer{left:calc((100% - var(--width-content)) / 2)}.kopfAktion-rechts > .kopfAktionStoerer{right:calc((100% - var(--width-content)) / 2)}}@media screen and (max-width:479px){.kopfAktion{--kopfAktion-bildbreite:480px}}/* ========================================================== Aktions-Buehne == Markup (aktionenBuehneHtml):.content.contentAktionBuehne > .aktionBuehne (> .aktionBuehneGrafik + .aktionBuehneText) + .aktionBuehneFussnote. */ /* .content ist ein Grid mit gap:var(--gap-contentMedium) (104px, main.css:968);zwischen Box und Fussnote zeigt die Vorlage nur einen schmalen Abstand. */
main > section > div > .content.contentAktionBuehne{gap:var(--gap-box)}.aktionBuehne{container-type:inline-size;display:grid;grid-template-columns:1fr 1fr;align-items:center;border-radius:var(--border-radius);overflow:hidden;color:var(--color-white);background-color:var(--color-blue);/* Agentur-Hintergrund 1400 x 620 (x1/x2). cover:Die Box ist 1000-1540px breit und je nach Textmenge unterschiedlich hoch;links-mittig, weil das Chevron-Motiv links sitzt. */ background-image:url(../element/aktionen/buehne-1400x620_x1.webp);background-image:-webkit-image-set(url(../element/aktionen/buehne-1400x620_x1.webp) 1x, url(../element/aktionen/buehne-1400x620_x2.webp) 2x);background-image:image-set(url(../element/aktionen/buehne-1400x620_x1.webp) 1x, url(../element/aktionen/buehne-1400x620_x2.webp) 2x);background-size:cover;background-position:left center;background-repeat:no-repeat}.aktionBuehne.ohneGrafik{grid-template-columns:1fr}/* ---- Grafik-Spalte:Zeilenboxen, Stoerer, Deko -------------------------------------- Alle Masse in em der Boxschrift;die Boxschrift selbst in cqw der Buehne. Herleitung aus hgk_aktion_*_headline.svg (Einheiten):Box 67,2 hoch, Versalhoehe 44,8, Zeilenabstand 71,7 (Luecke 4,5), Radius 12, Textbeginn 16 nach Boxkante. Roboto Versalhoehe = 0,711 em -> Schrift = 44,8 / 0,711 = 63 Einheiten = 1 em. Daraus:Box 1,067 em, Luecke 0,07 em, Radius 0,19 em, Innenabstand 0,25 em. Desktop-Vorlage:Grafik 478 Einheiten ~ 510px auf 1540px Boxbreite -> 1 em ~ 67px = 4,35 % der Boxbreite. */
.aktionBuehneGrafik{position:relative;justify-self:start;display:grid;grid-template-columns:auto auto;grid-auto-flow:row dense;justify-content:start;align-content:center;row-gap:0.07em;column-gap:0.08em;/* Linker Rand 7,7 % (Vorlage:120 / 1568), oben/unten ~5 % */ padding:5cqw 2cqw 5cqw 7.7cqw;font-size:4.35cqw;font-weight:700;font-variation-settings:var(--font-condensed);text-transform:uppercase;line-height:1}.aktionBuehneGrafik > .aktionBox{grid-column:1 / -1;justify-self:start;display:block;padding:0.033em 0.25em;/* (1,067 em Boxhoehe - 1 em Zeile) / 2 */ border-radius:0.19em;background:var(--color-lightblue);color:var(--color-blue);white-space:nowrap}.aktionBuehneGrafik > .aktionBox > em{font-style:normal;color:var(--color-red)}/* Mit Stoerer:die letzten beiden Boxen ruecken in Spalte 2, der Stoerer belegt Spalte 1 ueber diese beiden Zeilen (Vorlage:Zeilen 3/4 eingerueckt um 150 Einheiten = 2,38 em, Stoerer davor). Der Stoerer ist im DOM das letzte Kind (aktionenBuehneHtml), daher sind die beiden Boxen davor:nth-last-child(2) und (3). order + dense:zuerst die uebrigen Boxen ueber beide Spalten, dann der Stoerer (Spalte 1, 2 Zeilen), dann die beiden Boxen in die erste freie Zeile von Spalte 2 - also neben den Stoerer. */
.aktionBuehneGrafik.mitStoerer > .aktionBox:nth-last-child(2),
.aktionBuehneGrafik.mitStoerer > .aktionBox:nth-last-child(3){grid-column:2;order:2}.aktionBuehneStoerer{grid-column:1;grid-row:span 2;order:1;align-self:center;/* Vorlage:Stoerer 145 Einheiten breit = 2,3 em der Boxschrift;eckige Ecke oben rechts. Die eigene Schrift ist 0,317 em (unten), in ihr gerechnet:2,3 / 0,317 em. */ width:calc(2.3em / 0.317);height:calc(2.3em / 0.317);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 0.2em;border-radius:50% 0 50% 50%;background:var(--color-red);color:var(--color-white);text-align:center;/* Vorlage:Versalhoehe 14,2 Einheiten -> 20 Einheiten Schrift = 0,317 em */ font-size:0.317em;line-height:1.15}/* Deko-Bild (BILD1, z. B. Roboterkopf E-Rechnung):Vorlage oben rechts der Grafik, Kopf ragt ueber die erste Zeile, Haende greifen auf die Oberkante der zweiten Box. Ausmass laut SVG:x 365-466,5 / y 0,3-84,4 Einheiten -> Breite 101,5 = 1,61 em, rechter Abstand zur breitesten Zeile (477) 10,5 = 0,17 em. */
.aktionBuehneDeko{position:absolute;z-index:1;/* Bezug ist die Grafik mit ihrem Innenabstand (oben 5cqw, rechts 2cqw, siehe oben) */ top:5cqw;right:calc(2cqw + 0.17em);width:1.61em;pointer-events:none}.aktionBuehneDeko img{display:block;width:100%;height:auto}/* ---- Text-Spalte ------------------------------------------------------------------ */
.aktionBuehneText{/* Vorlage:Textspalte beginnt bei 51,5 % (808 / 1568), rechter Rand ~5 % */ padding:4cqw 5cqw 4cqw 1.5cqw;font-size:var(--font-size);line-height:var(--line-height)}.aktionBuehne.ohneGrafik > .aktionBuehneText{padding-left:5cqw}.aktionBuehneTitel{margin-bottom:1em;font-size:var(--font-size-boxheader);font-weight:700;font-variation-settings:var(--font-condensed);text-transform:uppercase;line-height:var(--line-height-header)}.aktionBuehneInhalt p{margin:0 0 0.75em 0}.aktionBuehneInhalt ul{list-style:none;margin:0 0 0.75em 0;padding:0}.aktionBuehneInhalt li{position:relative;padding-left:1.6em}/* Haekchen der Vorlage in Rot, als Rahmenecke statt Grafik (keine weitere Bilddatei) */
.aktionBuehneInhalt li::before{content:'';position:absolute;left:0.2em;top:0.35em;width:0.85em;height:0.42em;border-left:0.18em solid var(--color-red);border-bottom:0.18em solid var(--color-red);transform:rotate(-45deg)}/* Hervorhebung im Fliesstext (Vorlage E-Rechnung:"KOSTENLOS STARTEN" mit "KOSTENLOS" in Aktionsblau). Kursiv im Editor = Aktionsblau, nicht kursiv. Kontrast #4583ff auf #002e68 = 3,9:1 -> nur fuer fette Schrift ab 18,7px (WCAG 1.4.3, grosser Text). */
.aktionBuehneInhalt em{font-style:normal;color:var(--color-actionblue)}.aktionBuehneInhalt strong{font-weight:700}.aktionBuehneButton{margin-top:1.5em;text-align:center}.aktionBuehneFussnote{font-size:var(--font-size-smaller);font-variation-settings:var(--font-condensed);line-height:var(--line-height-smaller);color:var(--color-text)}.aktionBuehneFussnote p{margin:0}@media screen and (max-width:1019px){/* Mobil (Vorlage Mobile_Beispiel):Grafik oben, Text darunter. --width-content ist hier 356px. Boxschrift 10 % der Boxbreite:breiteste Zeile der drei Vorlagen ("VOLLE KONTROLLE", 8,2 em) + Rand 7,7 % = 0,82 + 0,077 = 0,9 der Breite - passt. Die Vorlage fuellt mit der Grafik rund 81 % der Boxbreite (680 / 840px), 10 % ergibt 76-82 %. */ .aktionBuehne{grid-template-columns:1fr;background-image:url(../element/aktionen/buehne-1400x1410_x1.webp);background-image:-webkit-image-set(url(../element/aktionen/buehne-1400x1410_x1.webp) 1x, url(../element/aktionen/buehne-1400x1410_x2.webp) 2x);background-image:image-set(url(../element/aktionen/buehne-1400x1410_x1.webp) 1x, url(../element/aktionen/buehne-1400x1410_x2.webp) 2x)}.aktionBuehneGrafik{font-size:10cqw;padding:7.7cqw 2cqw 4cqw 7.7cqw}.aktionBuehneText{padding:4cqw 7.7cqw 7.7cqw 7.7cqw}}/* ================================================================== Pop-up == Markup (aktionenPopupHtml):dialog#aktionPopup > form.aktionPopupSchliessen + .aktionPopupInhalt (> .aktionPopupBild, .aktionPopupText, .aktionPopupStoerer, .aktionPopupFussnote). Agentur-Vorlage 700 x 500;alle Innenmasse in --u = 1/700 der Dialogbreite (Container-Einheit), damit das Pop-up mobil maßstaeblich verkleinert. */ /* Geschlossen nie sichtbar - auch in Browsern ohne <dialog>-Unterstuetzung, die das Element sonst als Fliesstext ans Seitenende setzen. */
dialog.aktionPopup:not([open]){display:none}dialog.aktionPopup{container-type:inline-size;box-sizing:border-box;/* 700px laut Vorlage;schmaler als der Viewport abzueglich Seitenabstand */ width:min(700px, calc(100vw - 2 * var(--gap-box2)));max-width:none;max-height:calc(100vh - 2 * var(--gap-box2));margin:auto;/* padding 0:der Inhalt fuellt die Dialogflaeche, Klicks daneben treffen nur den::backdrop (Schliessen per Klick daneben, script/aktionen.js) */ padding:0;border:0;/* Vorlage:Eckenradius 40px auf 1294px Vorschaubreite = 22 Einheiten;als festes Mass, weil cqw am Dialog selbst nicht auf ihn, sondern auf einen Vorfahren-Container zeigt */ border-radius:22px;/* scrollbar statt abgeschnitten:max-height oben kann auf niedrigen Bildschirmen (Laptop unter ~550px Fensterhoehe, Handy quer) kleiner sein als der Inhalt (Codex-Review AKT-2/3) */ overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;color:var(--color-white);background-color:var(--color-blue);background-image:url(../element/aktionen/popup-700x500_x1.webp);background-image:-webkit-image-set(url(../element/aktionen/popup-700x500_x1.webp) 1x, url(../element/aktionen/popup-700x500_x2.webp) 2x);background-image:image-set(url(../element/aktionen/popup-700x500_x1.webp) 1x, url(../element/aktionen/popup-700x500_x2.webp) 2x);background-size:cover;background-position:left center}/* Fokus liegt beim Oeffnen auf dem Dialog selbst (aktionenPopupHtml);er braucht keinen eigenen Rahmen - der Modaldialog ist ohnehin das einzige bedienbare Element. */
dialog.aktionPopup:focus{outline:none}dialog.aktionPopup::backdrop{background:rgba(var(--color-rgb-darkblue), 0.6)}.aktionPopupInhalt{--u:calc(100cqw / 700);position:relative;aspect-ratio:7 / 5;font-size:calc(19 * var(--u))}/* Freisteller:Agentur liefert ihn als 700 x 500-Flaeche mit transparentem Rest, also deckungsgleich ueber die ganze Flaeche gelegt. */
.aktionPopupBild{position:absolute;inset:0;pointer-events:none}.aktionPopupBild img{display:block;width:100%;height:100%;object-fit:contain}.aktionPopupText{position:absolute;z-index:1;/* Vorlage:linke Kante 36, Oberkante erste Versalzeile 51 Einheiten */ left:calc(36 * var(--u));top:calc(44 * var(--u));width:calc(330 * var(--u))}.aktionPopupText > h2{margin:0 0 calc(26 * var(--u)) 0;color:var(--color-white);/* Vorlage:Versalhoehe 24,3 Einheiten -> 24,3 / 0,711 = 34;Zeilenabstand 40,6 = 1,19 */ font-size:calc(34 * var(--u));line-height:1.19;font-weight:700;font-variation-settings:var(--font-condensed);text-transform:uppercase}.aktionPopupUntertitel,
.aktionPopupTextInhalt p{/* Vorlage:Versalhoehe 13,5 -> 19 Einheiten Schrift, Zeilenabstand 25 = 1,32 */ margin:0 0 calc(10 * var(--u)) 0;line-height:1.32}.aktionPopupButton{display:inline-block;margin-top:calc(26 * var(--u));font-size:calc(13 * var(--u))}/* Vorlage:Stoerer x 520-670, y 78-200 Einheiten;eckige Ecke unten links */
.aktionPopupStoerer{position:absolute;z-index:1;left:calc(520 * var(--u));top:calc(78 * var(--u));width:calc(150 * var(--u));height:calc(150 * var(--u));display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 calc(12 * var(--u));border-radius:50% 50% 50% 0;background:var(--color-red);color:var(--color-white);text-align:center;text-transform:uppercase;font-weight:700;font-variation-settings:var(--font-condensed);/* Vorlage:Versalhoehe 14,6 -> 20,5 Einheiten */ font-size:calc(20.5 * var(--u));line-height:1.15}/* Vorlage:Fussnote x 36, y 435-462, Schrift ~8 Einheiten = 8px bei 700px Breite. Untergrenze 10px:8px Rechtstext (Vertragslaufzeit) ist auf Bildschirmen kaum lesbar;10px passen bei 270 Einheiten Breite in vier Zeilen ueber den unteren Rand (Vorschau 27.10.2026). */
.aktionPopupFussnote{position:absolute;z-index:1;left:calc(36 * var(--u));bottom:calc(30 * var(--u));width:calc(270 * var(--u));font-size:max(10px, calc(8 * var(--u)));line-height:1.35}.aktionPopupFussnote p{margin:0}/* Schliessen:Vorlage X mittig bei (671, 28), 13 Einheiten;Trefferflaeche 44px (WCAG 2.5.5) */
.aktionPopupSchliessen{position:absolute;z-index:2;top:0;right:0;margin:0}.aktionPopupSchliessen > button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:calc(6px) calc(6px) 0 0;padding:0;border:0;background:transparent;color:var(--color-white);font-size:32px;font-weight:300;/* Vorlage:duennes X;die Seite setzt button auf 600 */ line-height:1;cursor:pointer}.aktionPopupSchliessen > button:focus-visible{outline:2px solid var(--color-white);outline-offset:2px}@media screen and (max-width:1019px){/* Mobil:maßstaeblich verkleinert waere die Fussnote ~4px gross. Deshalb wird gestapelt:Freisteller oben (im DOM zuerst), darunter Text, Button und Fussnote im Fluss;Texte bekommen Mindestgroessen. Der Stoerer bleibt an seiner Vorlagenposition ueber dem Bild. */ /* Masse in Vorlagen-Einheiten (--u):Mindesthoehe 500 = Vorlagenhoehe;oben 60 = Raum fuer den Schliessen-Knopf (44px Trefferflaeche + 6px Rand, bei 352px Dialogbreite 60u = 30px, der Knopf ragt also bewusst in den Bildbereich);seitlich 36 = linker Textrand der Vorlage. */ .aktionPopupInhalt{aspect-ratio:auto;min-height:calc(500 * var(--u));padding:calc(60 * var(--u)) calc(36 * var(--u)) 0 calc(36 * var(--u));font-size:max(14px, calc(19 * var(--u)))}.aktionPopupText{position:relative;left:auto;top:auto;width:auto}.aktionPopupText > h2{font-size:max(20px, calc(34 * var(--u)))}.aktionPopupButton{font-size:max(13px, calc(13 * var(--u)))}.aktionPopupBild{position:relative;inset:auto;/* Seitlich -36u:Freisteller randlos auf Dialogbreite (hebt das Seiten-Padding auf). Oben -120u:Die 700x500-Flaeche des Freistellers ist oben leer - deckende Pixel erst ab y = 160 Einheiten (Alpha-Bounding-Box der Agentur-PNG:321 von 1000 px, gemessen 27.10.2026). -120 zieht das Bild unter den Text und laesst 40 Einheiten Luft. */ margin:calc(-120 * var(--u)) calc(-36 * var(--u)) 0 calc(-36 * var(--u))}.aktionPopupBild img{height:auto}.aktionPopupFussnote{position:relative;left:auto;bottom:auto;width:auto;/* oben:Abstand zum Button wie zwischen Textbloecken;unten 24u = unterer Rand der Vorlage (Fussnote endet bei y 462 + Schriftunterlaenge ~ 476 von 500) */ padding:var(--gap-box2) 0 calc(24 * var(--u)) 0;font-size:max(11px, calc(8 * var(--u)))}}/* ============================================================ Aktionsstreifen == AKT-4. Markup (aktionenStreifenHtml, Modul header):a.aktionStreifen > div > span als erstes Kind von body > header > div - der Slot der frueheren Login-Leiste (main.css:791-809), deren Regeln hier ueberschrieben werden. Vorgaben:Mail Salzmann 25.09.2026, Punkt 3 (Hellblau RGB 69/131/255, moeglichst schmal wie das Beispiel image017), Entscheidung 8 (ueber der Navigation, mit Link, nicht wegklickbar, alle Seiten). */ html{/* Hoehe einer Textzeile:22px Zeilenhoehe + 2 x 5px Innenabstand = 32px (= --height-login der mobilen Breakpoints, das schmalste Bestandsmass einer Kopfleiste, responsive.css:1212). script/aktionen.js ueberschreibt den Wert mit der gemessenen Hoehe, wenn der Text umbricht. */ --aktionStreifen-hoehe:32px}body > header > div > a.aktionStreifen,
body > header > div > a.aktionStreifen:visited,
body > header > div > a.aktionStreifen:hover{display:block;/* #4583ff = RGB 69/131/255 (vars.css:31) */ background-color:var(--color-actionblue);color:var(--color-white);text-decoration:none}/* "mitscrollend":main.css:869-871 blendet den Slot beim Scrollen aus (body.fixed) - der Streifen bleibt sichtbar, weil der Header fixiert ist. */
body.fixed > header > div > a.aktionStreifen{display:block}body > header > div > a.aktionStreifen > div{height:auto;/* fest 32px, NICHT var(--aktionStreifen-hoehe):die Variable setzt aktionen.js aus der gemessenen Hoehe - als Mindesthoehe koennte der Streifen nach einem Umbruch nie mehr schrumpfen (Codex-Review AKT-4). */ min-height:32px;box-sizing:border-box;align-items:center;padding:5px 0;text-align:center;/* Kontrast Weiss auf #4583ff = 3,53:1 (relative Leuchtdichte 0,247 gegen 1,0). WCAG 2.1 SC 1.4.3 verlangt 4,5:1, fuer grosse Schrift 3:1;gross = ab 14pt fett = 18,66px. Deshalb 18,7px fett - kleiner waere nicht barrierefrei. Schmal geschnitten (wdth 75) wie die Ueberschriften der Seite, damit mehr Text in eine Zeile passt. */ font-size:18.7px;line-height:22px;font-weight:700;font-variation-settings:var(--font-condensed)}/* [[...]] im Text:wie im Beispiel unterstrichen;beim Ueberfahren der ganze Text */
.aktionStreifenLink,
a.aktionStreifen:hover > div > span{text-decoration:underline;text-underline-offset:0.15em}/* Fokusrahmen INNEN (negativer Versatz):der Streifen fuellt die volle Breite bis an den Fensterrand, ein aeusserer Rahmen laege oben ausserhalb des Bildschirms. 2px wie die uebrigen Fokusrahmen dieser Datei;-4px = Rahmenbreite + 2px Luft zur Kante. */
a.aktionStreifen:focus-visible{outline:2px solid var(--color-white);outline-offset:-4px}/* Alles, was bisher an der Navigationshoehe ausgerichtet ist, rutscht um die Streifenhoehe tiefer.:has() (Baseline 2023):ohne Unterstuetzung ueberdeckt der Streifen die oberen 32px von main. */
html:has(body > header > div > a.aktionStreifen) body > main{margin-top:calc(var(--height-nav) + var(--aktionStreifen-hoehe))}/* Sprunganker:responsive.css setzt -98px bzw. -82px = -(--height-nav + 2px Unterkante der Navigation, main.css:813) je Breakpoint. */
html:has(body > header > div > a.aktionStreifen) main > section .sectionAnchor{top:calc(-1 * (var(--height-nav) + 2px + var(--aktionStreifen-hoehe)))}@media screen and (max-width:1259px){/* Mobiles Menue liegt absolut unter der Navigation (responsive.css:254-276). */ html:has(body > header > div > a.aktionStreifen) body > header #navigation{top:calc(var(--height-nav) + var(--aktionStreifen-hoehe))}}/* Kurzfassung fuer Smartphones (Feld "Kurztext Smartphone", aktionenStreifenHtml):unter 1020px ist --width-content 356px (responsive.css:1601);bei gemessenen 7,73px je Zeichen (Vorschau 27.10.2026) passen ~46 Zeichen in eine Zeile - der lange Text braeche dreizeilig um. */
.aktionStreifenKurz{display:none}@media screen and (max-width:1019px){.aktionStreifenLang{display:none}.aktionStreifenKurz{display:inline}}