html.hi-html, .hi-html body { height: auto; overflow: visible; }
html.hi-html {
overflow-x: clip;
scrollbar-color: var(--nacht) var(--schwarz);
scroll-padding-top: 16px;
}
@media (prefers-reduced-motion: no-preference) { html.hi-html { scroll-behavior: smooth; } }
.hi {
--breite-max: 1240px;
--rand-x: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
min-height: 100vh;
isolation: isolate;
overflow-x: clip;
}
[data-licht="gelb"]    { --licht: var(--gelb); }
[data-licht="magenta"] { --licht: var(--magenta); }
[data-licht="tuerkis"] { --licht: var(--tuerkis); }
[data-licht="amber"]   { --licht: var(--amber); }
[data-licht="berry"]   { --licht: var(--berry); }
[data-licht="violett"] { --licht: var(--kart-violett); }
[data-licht="blau"]    { --licht: var(--blau); }
[data-licht="rot"]     { --licht: var(--rot); }
.hi-flecken, .hi-konfetti {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.hi-flecken { z-index: -1; }
.hi-konfetti { z-index: 60; }
.hi-blackout {
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
display: none;
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0 var(--r, 0px), var(--schwarz) calc(var(--r, 0px) + .5px));
}
.hi-blackout.hi-an { display: block; }
.hi-kopf {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
max-width: var(--breite-max);
margin: 0 auto;
padding: max(14px, env(safe-area-inset-top)) var(--rand-x) 0;
}
.hi-kopf-knoepfe { display: flex; gap: 10px; }
.hi-ton { width: 44px; height: 44px; }
.hi-ton svg { width: 22px; height: 22px; }
.hi-lichtspiel-aus, .hi-lichtspiel[aria-pressed="false"] .hi-lichtspiel-an { display: none; }
.hi-lichtspiel[aria-pressed="false"] .hi-lichtspiel-aus { display: block; }
.hi-auftakt {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: end;
gap: 8px clamp(24px, 4vw, 56px);
max-width: var(--breite-max);
margin: 0 auto;
padding: 0 var(--rand-x) clamp(18px, 2vw, 26px);
}
@media (min-width: 861px) {
.hi-kopf { position: absolute; z-index: 4; left: 0; right: 0; }
.hi-auftakt { padding-top: 6px; }
.hi-kugel { margin-top: 30px; }
}
.hi-auftakt > .hi-kugel { grid-column: 1; grid-row: 1; }
.hi-auftakt-text { grid-column: 1 / -1; grid-row: 1; display: contents; }
.hi-kugel {
position: relative;
justify-self: center;
width: clamp(80px, 8.5vw, 124px);
aspect-ratio: 1;
margin-top: clamp(28px, 4vw, 48px);
}
.hi-schnur {
position: absolute;
left: calc(50% - 1px);
bottom: 100%;
width: 2px;
height: 200px;
background: var(--weiss);
}
.hi-kugel-bild { display: block; width: 100%; height: 100%; }
.hi-titel {
grid-column: 1;
grid-row: 2;
justify-self: center;
margin: -6px 0 0;
line-height: 0;
--farbe: var(--gelb);
}
.hi-titel .rt-schild {
width: calc(var(--breite) * clamp(1.9px, .19vw, 2.5px));
rotate: -4deg;
filter: drop-shadow(4px 4px 0 #000);
}
@media (prefers-reduced-motion: no-preference) {
.hi-titel .rt-schild { animation: rt-logo-klatsch 640ms 120ms var(--federnd) both; }
.hi-titel.hi-klatscht .rt-schild { animation: rt-logo-nochmal 460ms var(--federnd) both; }
}
.hi-lead {
grid-column: 2;
grid-row: 2;
align-self: end;
margin: 0 0 6px;
max-width: 34em;
font: 700 clamp(17px, .5vw + 15px, 21px)/1.45 var(--lauf);
color: var(--weiss);
text-wrap: pretty;
}
.hi-disco {
grid-column: 2;
grid-row: 1;
justify-self: start;
align-self: end;
margin-bottom: 6px;
--farbe: var(--magenta);
--einheit: 1.5;
--dreh: 4deg;
}
.hi-disco-aus { display: none; }
.hi-disco[data-an="true"] { --farbe: var(--weiss); }
.hi-disco[data-an="true"] .hi-disco-an { display: none; }
.hi-disco[data-an="true"] .hi-disco-aus { display: contents; }
.hi-disco > span > svg { filter: drop-shadow(3px 3px 0 #000); }
@media (hover: hover) { .hi-disco:hover > span > svg { transform: rotate(-2deg) scale(1.04); filter: drop-shadow(6px 6px 0 #000); } }
.hi-disco > span > svg { transition: transform 200ms var(--aus), filter 200ms var(--aus); }
.hi-tanz { max-width: var(--breite-max); margin: 0 auto; padding: 0 var(--rand-x); }
@media (max-width: 1240px) { .hi-tanz { overflow-x: clip; } }
.hi-brief {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
align-items: start;
gap: clamp(20px, 3vw, 40px);
margin-bottom: clamp(36px, 5vw, 64px);
scroll-margin-top: 12px;
}
.hi-js .hi-brief:not(.hi-an) { display: none; }
.hi-js .hi-brief { margin-bottom: 0; }
.hi-js .hi-buehne { padding-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 861px) and (min-height: 820px) {
html.hi-html { scroll-padding-top: calc(var(--buehne-h, 0px) + 16px); }
.hi-js .hi-buehne {
position: sticky;
top: 0;
z-index: 3;
margin: 0 calc(-1 * var(--rand-x)) 30px;
padding: 14px var(--rand-x) 26px;
background: var(--schwarz);
}
.hi-js .hi-buehne::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background: repeating-linear-gradient(90deg, var(--rot) 0 34px, var(--weiss) 34px 68px);
}
}
.hi-wand { position: relative; margin: 0; }
.hi-wand-rahmen {
position: relative;
padding: 16px;
border-radius: 22px;
background: var(--nacht);
}
.hi-wand-rahmen::before, .hi-wand-rahmen::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 25% 25%, var(--b1) 0 3.5px, transparent 4.2px),
radial-gradient(circle at 75% 75%, var(--b1) 0 3.5px, transparent 4.2px),
radial-gradient(circle at 75% 25%, var(--b2) 0 3.5px, transparent 4.2px),
radial-gradient(circle at 25% 75%, var(--b2) 0 3.5px, transparent 4.2px);
background-size: 32px 32px;
background-repeat: round;
}
.hi-wand-rahmen::before { --b1: var(--amber); --b2: var(--weiss); }
.hi-wand-rahmen::after { --b1: var(--weiss); --b2: var(--amber); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.hi-wand-rahmen::after { animation: hi-birnen 900ms steps(1) infinite; }
.hi-disco-an-ist .hi-wand-rahmen::after { animation-duration: calc(60s / 110); }
.hi-still:not(.hi-disco-an-ist) .hi-wand-rahmen::after { animation: none; }
}
@keyframes hi-birnen { 50% { opacity: 1; } }
.hi-wand-schirm {
position: relative;
z-index: 1;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: var(--schwarz);
}
.hi-film { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--schwarz); }
.hi-wand-schirm::after {
content: '';
position: absolute;
inset: 0;
background: var(--licht, var(--gelb));
clip-path: inset(0 100% 0 0);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.hi-brief.hi-neu .hi-wand-schirm::after { animation: hi-wischer 460ms var(--aus) both; }
}
@keyframes hi-wischer {
0%   { clip-path: inset(0 100% 0 0); }
42%  { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 100%); }
}
.hi-testbild {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background:
linear-gradient(90deg, var(--weiss) 0 14.3%, var(--gelb) 0 28.6%, var(--tuerkis) 0 42.9%, #3E9E5A 0 57.1%, var(--magenta) 0 71.4%, var(--rot) 0 85.7%, var(--blau) 0) top / 100% 72% no-repeat,
linear-gradient(90deg, var(--blau) 0 14.3%, var(--schwarz) 0 28.6%, var(--magenta) 0 42.9%, var(--schwarz) 0 57.1%, var(--tuerkis) 0 71.4%, var(--schwarz) 0 85.7%, var(--weiss) 0) bottom / 100% 28% no-repeat;
}
.hi-testbild img {
width: 34%;
height: auto;
padding: 4% 5%;
border-radius: 50%;
background: var(--schwarz);
rotate: -5deg;
filter: drop-shadow(5px 5px 0 #000);
}
.hi-was {
margin: 12px 4px 0;
font: 700 15px/1.4 var(--lauf);
color: var(--tuerkis);
text-wrap: pretty;
}
.hi-halt {
position: absolute;
z-index: 2;
right: 22px;
bottom: -22px;
width: 48px;
height: 48px;
border-width: 3px;
}
.hi-was { padding-right: 64px; }
.hi-halt svg { width: 20px; height: 20px; }
.hi-halt-spiel, .hi-halt[data-angehalten="true"] .hi-halt-pause { display: none; }
.hi-halt[data-angehalten="true"] .hi-halt-spiel { display: block; }
.hi:not(.hi-js) .hi-halt { display: none; }
.hi-zettel {
--farbe: var(--licht);
position: relative;
display: grid;
gap: 11px;
padding: clamp(18px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
border-radius: 18px;
background: var(--weiss);
color: var(--schwarz);
rotate: -1deg;
box-shadow: 5px 5px 0 #000;
}
@media (prefers-reduced-motion: no-preference) {
.hi-brief.hi-neu .hi-zettel { animation: hi-zettel-klatsch 560ms 120ms var(--federnd) both; }
}
@keyframes hi-zettel-klatsch {
0%  { transform: translate(18px, -14px) scale(1.08) rotate(4deg); box-shadow: 18px 18px 0 #000; opacity: 0; }
55% { transform: scale(1.01, .97); box-shadow: 2px 2px 0 #000; opacity: 1; }
100% { box-shadow: 5px 5px 0 #000; }
}
.hi-name { margin: 0; line-height: 0; }
.hi-name .rt-schild {
width: calc(var(--breite) * clamp(1.05px, .11vw, 1.4px));
max-width: 100%;
margin-left: -8px;
rotate: -2deg;
filter: drop-shadow(3px 3px 0 #000);
}
.hi-pointe {
margin: 0;
font: 900 clamp(17px, .3vw + 15px, 19px)/1.5 var(--lauf);
color: var(--gelb);
text-wrap: pretty;
}
.hi-pointe {
justify-self: start;
padding: 2px 10px;
border-radius: 8px;
background: var(--schwarz);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
display: inline;
}
.hi-zettel > .hi-pointe { display: block; width: fit-content; }
.hi-text {
margin: 0;
max-width: 62ch;
font: 600 16px/1.5 var(--lauf);
letter-spacing: .1px;
text-wrap: pretty;
}
.hi-pegel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 20px;
margin: 2px 0 0;
}
.hi-pegel div { display: grid; gap: 4px; }
.hi-pegel dt, .hi-fakten dt {
font: 900 12px/1.2 var(--lauf);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--vorhang);
}
.hi-pegel dd { margin: 0; }
.hi-punkte { display: flex; gap: 3px; }
.hi-pegel i {
flex: 1 1 0;
max-width: 16px;
aspect-ratio: 1;
border-radius: 3px;
border: 2px solid var(--schwarz);
background: var(--weiss);
}
.hi-pegel i.hi-an { background: var(--licht); }
@media (prefers-reduced-motion: no-preference) {
.hi-brief.hi-neu .hi-pegel i.hi-an { animation: hi-pegel 420ms var(--federnd) both; animation-delay: calc(var(--n, 0) * 30ms + 300ms); }
}
@keyframes hi-pegel { from { transform: scale(0); } }
.hi-fakten { display: grid; gap: 8px; margin: 0; }
.hi-fakten div { display: grid; gap: 2px; }
.hi-fakten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 18px; }
.hi-fakten dd { margin: 0; font: 700 15px/1.4 var(--lauf); }
.hi-zettel kbd { border-color: var(--schwarz); color: var(--schwarz); vertical-align: 1px; }
.hi-zettel-fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 4px;
}
.hi-hoer { --farbe: var(--tuerkis); --einheit: .55; }
.hi-blaettern { display: flex; gap: 10px; margin-left: auto; }
.hi-blaettern .rt-rund { width: 44px; height: 44px; text-decoration: none; }
.hi-blaettern .rt-rund svg { width: 20px; height: 20px; fill: none; }
.hi-js .hi-buehne + .hi-boden { margin-top: 18px; }
.hi-boden { display: grid; gap: 20px; padding: 22px 0 clamp(40px, 6vw, 80px); }
.hi-reihe { position: relative; }
.hi-reihe-name {
position: absolute;
z-index: 2;
top: -21px;
left: -10px;
margin: 0;
pointer-events: none;
--einheit: .62;
}
.hi-reihe-name .rt-schild { rotate: -4deg; }
.hi-reihe:nth-child(even) .hi-reihe-name .rt-schild { rotate: 2.5deg; }
.hi-kacheln {
--spalten: 10;
display: grid;
grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.hi-kacheln > li { display: grid; }
.hi-kachel, .hi-leer {
position: relative;
aspect-ratio: 1;
border-radius: 6px;
background: var(--nacht);
transition: background-color 700ms ease-out;
}
.hi-kachel {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
justify-items: center;
align-items: center;
padding: 10% 6% 7%;
color: var(--weiss);
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
--farbe: var(--weiss);
--einheit: .5;
}
.hi-kachel-bild, .hi-zeichen {
max-width: 82%;
max-height: 100%;
min-height: 0;
object-fit: contain;
transition: transform 300ms var(--federnd);
}
.hi-zeichen { width: 56%; height: auto; }
.hi-kachel-gefaehrte .hi-kachel-bild { max-width: 94%; }
.hi-kachel .rt-schild {
max-width: calc(100% + 8px);
filter: drop-shadow(2px 2px 0 #000);
rotate: -3deg;
}
.hi-kacheln > li:nth-child(even) .hi-kachel .rt-schild { rotate: 2deg; }
.hi-kachel:is(:hover, [aria-current="true"]), .hi-kachel.hi-blitz, .hi-leer.hi-blitz {
background: var(--licht, var(--weiss));
transition-duration: 80ms;
}
.hi-leer { --licht: var(--leer-licht, var(--magenta)); }
.hi-kachel:hover .hi-kachel-bild, .hi-kachel:hover .hi-zeichen { transform: rotate(-4deg) scale(1.06); }
.hi-kachel[aria-current="true"] .hi-kachel-bild, .hi-kachel[aria-current="true"] .hi-zeichen { transform: rotate(-6deg) scale(1.1); }
.hi-kachel:is(:hover, [aria-current="true"], .hi-blitz) .hi-zeichen { color: var(--schwarz); }
.hi-kachel:active .hi-kachel-bild { transform: scale(.94); }
.hi-kachel:focus-visible { outline: 4px solid var(--gelb); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.hi-welle :is(.hi-kachel, .hi-leer) { animation: hi-welle 560ms var(--verzug, 0ms) both; }
}
@keyframes hi-welle {
0%, 100% { background-color: var(--nacht); }
18%, 46% { background-color: var(--licht, var(--weiss)); }
}
.hi-welle .hi-kachel[aria-current="true"] { animation: none; }
.hi-bar {
max-width: var(--breite-max);
margin: 0 auto;
padding: clamp(24px, 4vw, 48px) var(--rand-x) clamp(40px, 6vw, 72px);
display: grid;
gap: 18px;
}
.hi-bar-titel .rt-schild { width: calc(var(--breite) * clamp(1.15px, .15vw, 1.75px)); }
.hi-bar-lead { margin: 0; font: 700 17px/1.45 var(--lauf); color: var(--tuerkis); }
.hi-theke { display: grid; gap: 30px; margin-top: 12px; }
.hi-schiene {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0;
padding: 14px 0 6px;
list-style: none;
}
.hi-schiene:focus-visible { outline-offset: -3px; }
.hi-bon { position: relative; display: grid; }
.hi-bon::before {
content: '';
position: absolute;
z-index: 2;
top: -14px;
left: -10px;
right: -10px;
height: 12px;
background: #C8C3DC;
box-shadow: 0 3px 0 #000;
}
.hi-bon:first-child::before { left: -16px; border-radius: 6px 0 0 6px; }
.hi-bon:last-child::before { right: -16px; border-radius: 0 6px 6px 0; }
.hi-bon-papier {
margin: 0;
padding: 26px 16px 18px;
border-radius: 2px 2px 4px 4px;
background: var(--weiss);
color: var(--schwarz);
box-shadow: 4px 4px 0 #000;
transform-origin: 50% 0;
rotate: -1.6deg;
transition: rotate 420ms var(--federnd);
}
.hi-bon:nth-child(even) .hi-bon-papier { rotate: 1.3deg; }
.hi-bon:nth-child(3n) .hi-bon-papier { rotate: -.6deg; }
.hi-bon-papier::before {
content: '';
display: block;
margin: -10px 0 12px;
border-top: 2px dashed #C8C3DC;
}
@media (hover: hover) { .hi-bon:hover .hi-bon-papier { rotate: 0deg; transition-duration: 220ms; transition-timing-function: var(--aus); } }
.hi-bon-papier dt { font: 900 17px/1.3 var(--lauf); }
.hi-bon-mal { color: var(--vorhang); }
.hi-bon-papier dd { margin: 8px 0 0; font: 600 15px/1.45 var(--lauf); text-wrap: pretty; }
.hi-tasten { display: grid; gap: 12px; margin-top: 14px; }
.hi-tasten .rt-frage { --einheit: .6; }
.hi-tasten-liste { color: var(--weiss); font-size: 16px; }
.hi-bad { position: relative; margin-top: clamp(10px, 2vw, 24px); padding-bottom: clamp(40px, 5vw, 64px); }
.hi-bad-kopf {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: end;
gap: 12px clamp(20px, 3vw, 40px);
max-width: var(--breite-max);
margin: 0 auto;
padding: 0 var(--rand-x) 18px;
}
.hi-bad-titel .rt-schild { width: calc(var(--breite) * clamp(1.15px, .15vw, 1.75px)); }
.hi-bad-lead { margin: 0 0 4px; max-width: 34em; font: 700 17px/1.45 var(--lauf); color: var(--weiss); text-wrap: pretty; }
.hi-bombe { --dreh: -3deg; }
.hi-bad-bild {
display: block;
width: calc(100% - 2 * var(--rand-x));
max-width: var(--breite-max);
height: clamp(220px, 25vw, 330px);
margin: 0 auto;
border: 10px solid var(--blau);
border-radius: 28px;
box-shadow: 6px 6px 0 #000;
background: var(--nacht);
touch-action: pan-y;
cursor: pointer;
}
.hi-fuss {
display: grid;
justify-items: center;
gap: 22px;
padding: clamp(36px, 5vw, 64px) var(--rand-x) max(36px, env(safe-area-inset-bottom));
background: var(--blau);
}
.hi-fahren { --einheit: 1.4; }
.hi-fuss .rt-klein { --farbe: var(--weiss); }
.hi-sprachen { margin: 6px 0 0; }
html.hi-html:has(.hi-disco-an-ist), .hi.hi-disco-an-ist, .hi-disco-an-ist .hi-buehne { background: #0B0318; }
.hi-disco-an-ist :is(.hi-kachel, .hi-leer) { background-color: var(--schwarz); }
.hi-disco-an-ist .hi-kachel:is(:hover, [aria-current="true"], .hi-blitz), .hi-disco-an-ist .hi-leer.hi-blitz { background-color: var(--licht, var(--weiss)); }
.hi-discoleiste {
position: fixed;
z-index: 55;
right: max(16px, env(safe-area-inset-right));
bottom: max(16px, env(safe-area-inset-bottom));
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px 10px 16px;
border-radius: 26px;
background: var(--schwarz);
box-shadow: 4px 4px 0 #000;
}
.hi-discoleiste[hidden] { display: none; }
.hi-licht-an { --farbe: var(--weiss); --einheit: .62; --dreh: -2deg; }
@media (prefers-reduced-motion: no-preference) {
.hi-disco-an-ist .hi-pegel i.hi-an { animation: hi-hupf calc(60s / 110) ease-out infinite alternate; animation-delay: calc(var(--n, 0) * -47ms); }
}
@keyframes hi-hupf { to { transform: translateY(-3px) scale(1.12); } }
@media (max-width: 1100px) {
.hi-kacheln { --spalten: 7; }
}
@media (max-width: 860px) {
.hi-brief { grid-template-columns: minmax(0, 1fr); }
.hi-zettel { rotate: -.6deg; }
.hi-schiene { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
.hi-bad-kopf { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 640px) {
.hi-auftakt { grid-template-columns: auto auto minmax(0, 1fr); align-items: end; column-gap: 12px; row-gap: 0; padding-bottom: 14px; }
.hi-titel { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.hi-titel .rt-schild { width: calc(var(--breite) * 1.2px); }
.hi-auftakt > .hi-kugel { grid-column: 2; grid-row: 1; align-self: start; width: 58px; margin-top: -26px; }
.hi-disco { grid-column: 3; grid-row: 1; justify-self: center; align-self: end; margin: 0; --einheit: .74; }
.hi-lead { grid-column: 1 / -1; grid-row: 2; margin: 10px 0 0; font-size: 15px; }
.hi-schiene { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 16px 14px 10px; margin: 0 calc(-1 * var(--rand-x)); scrollbar-width: none; }
.hi-bon { scroll-snap-align: center; }
.hi-kacheln { --spalten: 4; gap: 5px; }
.hi-kachel { --einheit: .36; }
.hi-boden { gap: 18px; }
.hi-reihe-name { --einheit: .5; top: -18px; }
.hi-pegel { grid-template-columns: minmax(0, 1fr); }
.hi-wand-rahmen { padding: 12px; border-radius: 18px; }
.hi-wand-rahmen::before, .hi-wand-rahmen::after { background-size: 24px 24px; }
.hi-halt { right: 16px; bottom: -22px; }
.hi-text { font-size: 16px; }
.hi-zettel { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.hi-kachel, .hi-leer { transition: none; }
}
@media (forced-colors: active) {
.hi-kachel, .hi-leer { border: 2px solid CanvasText; }
.hi-kachel[aria-current="true"] { border: 4px solid Highlight; }
.hi-zettel { border: 2px solid CanvasText; }
.hi-pegel i { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
.hi-pegel i.hi-an { background: CanvasText; }
.hi-pointe { forced-color-adjust: none; background: Canvas; color: CanvasText; }
.hi-blackout, .hi-flecken, .hi-konfetti { display: none !important; }
}