/* 77 · Videotext – Seite 100. Acht Farben, Zeilenraster, Seitennummern als Navigation. */
:root {
  --k: #000; --r: #ff2020; --g: #00ff00; --y: #ffff00; --b: #0000ff; --m: #ff00ff; --c: #00ffff; --w: #ffffff;
  --bluet: #5c8cff;
  --fs: 38px;
  --vt: 'VT323', ui-monospace, 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #000; scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #000; color: var(--w); font: 400 var(--fs)/1 var(--vt); text-shadow: 0 0 3px; -webkit-font-smoothing: antialiased; }
p, h1, h2, h3, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 90; background: var(--y); color: #000; padding: 4px 10px; font-size: 28px; text-shadow: none; }
.skip:focus { top: 8px; }

.c-r { color: var(--r); } .c-g { color: var(--g); } .c-y { color: var(--y); } .c-m { color: var(--m); }
.c-c { color: var(--c); } .c-w { color: var(--w); } .c-k { color: #000; text-shadow: none; }

/* doppelte Höhe wie im echten Videotext: doppelt groß, horizontal halbiert */
.dh { font-size: 2em; line-height: .9; width: 200%; transform: scaleX(.5); transform-origin: 0 0; margin-right: -100%; }
.band { display: flex; justify-content: space-between; gap: 1ch; padding: 0 1ch; }
.dh.band { display: block; padding: 0 .4em; }
.band--b { background: var(--b); } .band--r { background: var(--r); } .band--g { background: var(--g); }
.band--y { background: var(--y); } .band--c { background: var(--c); } .band--m { background: var(--m); } .band--k { background: #000; }
.band--m .c-w { color: #000; text-shadow: none; }

/* ---------- Gerüst: Kopf links · Seite Mitte · Fernbedienung rechts ---------- */
.tv { display: grid; grid-template-columns: 1fr 40ch 1fr; grid-template-areas: "top top top" ". main ." ". foot ."; column-gap: 40px; }
.top { grid-area: top; }
main { grid-area: main; min-width: 0; }
.foot { grid-area: foot; min-width: 0; }
.page { padding-top: 2em; overflow-x: clip; }
.page + .page { margin-top: 2em; }

/* ---------- Kopf (Kopfzeile + Index) ---------- */
.top { position: sticky; top: 0; z-index: 30; background: #000; font-size: 28px; border-bottom: 2px solid var(--b); }
.top__row { display: flex; align-items: center; gap: 1.2ch; padding: 6px 16px; }
.logo { line-height: 0; flex: none; }
.logo img { width: 52px; height: auto; aspect-ratio: 1510 / 1300; }
.top__title { white-space: nowrap; }
.top__page { color: var(--w); white-space: nowrap; min-width: 4ch; }
.top__clock { margin-left: auto; white-space: nowrap; }
.menu { font: inherit; color: var(--w); background: var(--b); border: 0; padding: 2px 10px; cursor: pointer; text-shadow: inherit; display: inline-flex; gap: .6ch; }
.menu__k { color: var(--y); }
.nav { display: none; padding: 10px 16px 18px; border-top: 2px solid var(--b); }
.top.open .nav { display: block; }
.nav__h { color: var(--c); margin-bottom: .4em; }
.nav ul a, .lk { display: flex; align-items: baseline; gap: .5ch; text-decoration: none; padding: .12em 0; }
.nav__dots { flex: 1; min-width: 2ch; border-bottom: 3px dotted currentColor; opacity: .55; transform: translateY(-.2em); }
.nav__n, .lk__n { color: var(--y); }
.nav ul a:hover .nav__l, .lk:hover .lk__l { background: var(--w); color: #000; text-shadow: none; }
.nav__end { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; margin-top: .6em; flex-wrap: wrap; }
.tel { text-decoration: none; }
.tel:hover { color: var(--y); }
.lang { text-decoration: none; background: var(--w); color: #000; padding: 0 .5ch; text-shadow: none; }
.lang:hover { background: var(--y); }
.nav__hint { color: var(--g); margin-top: .8em; font-size: .8em; }
html:not(.js) .nav__hint { display: none; }

@media (min-width: 1200px) {
  .tv { grid-template-columns: 1fr 40ch 1fr; grid-template-areas: "top main remote" "top foot remote"; align-items: start; }
  .top { position: sticky; top: 0; height: 100vh; justify-self: end; width: min(320px, 100%); border-bottom: 0; border-right: 2px solid var(--b); padding: 26px 22px 0 24px; background: transparent; }
  .top__row { flex-wrap: wrap; padding: 0; gap: 10px 1ch; }
  .logo img { width: 104px; }
  .top__title { font-size: 2em; flex-basis: 100%; margin-top: 8px; }
  .top__page { font-size: 2em; color: var(--w); }
  .top__clock { margin-left: 0; flex-basis: 100%; }
  .menu { display: none; }
  .nav { display: block; padding: 22px 0 0; margin-top: 18px; }
  .page:first-child { padding-top: 26px; }
}

/* ---------- Fernbedienung ---------- */
.remote { display: none; }
@media (min-width: 1200px) {
  .remote { grid-area: remote; display: grid; gap: 16px; position: sticky; top: 26px; justify-self: start; width: 172px; padding: 22px 18px 26px; border-radius: 28px 28px 40px 40px; background: linear-gradient(160deg, #2b2d33, #121317 60%); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px #34363d; font-size: 26px; text-shadow: none; }
  .remote__disp { background: #0b1a0b; color: var(--g); text-shadow: 0 0 6px var(--g); padding: 6px 10px; border-radius: 6px; box-shadow: inset 0 2px 6px #000; text-align: right; letter-spacing: .1em; }
  .remote__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .remote__pad button, .remote__txt { font: inherit; color: #e8e8e8; background: radial-gradient(circle at 40% 30%, #4a4d55, #26282d); border: 0; border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 #08090b, inset 0 1px 0 rgba(255,255,255,.2); text-decoration: none; }
  .remote__txt { font-size: 18px; border-radius: 10px; background: radial-gradient(circle at 40% 30%, #3e5bd6, #1f2f86); }
  .remote__pad button:hover, .remote__txt:hover { filter: brightness(1.25); }
  .remote__pad button:active, .remote__txt:active { transform: translateY(2px); box-shadow: 0 1px 0 #08090b; }
  html:not(.js) .remote__pad button { visibility: hidden; }
  .remote__fx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .rk { height: 22px; border-radius: 6px; box-shadow: 0 3px 0 #08090b, inset 0 1px 0 rgba(255,255,255,.35); }
  .rk--r { background: #e01818; } .rk--g { background: #14c414; } .rk--y { background: #e8d10a; } .rk--b { background: #1f3ff0; }
  .rk:hover { filter: brightness(1.25); }
  .remote__brand { text-align: center; color: #8c8f98; letter-spacing: .3em; font-size: 20px; }
}

/* ---------- Seite 100 ---------- */
.art .mosaic { width: 40ch; height: 5em; }
.hero .band { margin-top: .5em; }
.hero h1 { margin: .25em 0 .5em; }
.hero__txt { margin-bottom: .5em; }
.links li + li { margin-top: 0; }
.lk { color: var(--w); }
.lk__l { color: var(--w); }
.links li:first-child .lk__l { background: var(--y); color: #000; text-shadow: none; padding: 0 .5ch; }
.links li:first-child .lk:hover .lk__l { background: var(--w); }

/* Fastext-Leiste */
.fastext { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 1ch; margin-top: 1em; font-size: .8em; padding-top: .25em; border-top: 2px solid #333; }
.fx { text-decoration: none; white-space: nowrap; }
.fx::before { content: ''; display: inline-block; width: .4em; height: .55em; margin-right: .5ch; background: currentColor; }
.fx--r { color: var(--r); } .fx--g { color: var(--g); } .fx--y { color: var(--y); } .fx--b { color: var(--bluet); }
.fx:hover { background: currentColor; }
.fx:hover::before { background: #000; }
.fx--r:hover, .fx--g:hover, .fx--y:hover, .fx--b:hover { color: inherit; }
.fx--r:hover { background: var(--r); color: #000; } .fx--g:hover { background: var(--g); color: #000; }
.fx--y:hover { background: var(--y); color: #000; } .fx--b:hover { background: var(--b); color: #fff; }
.fx:hover { text-shadow: none; }

/* Seitenkopf jeder Seite */
.phead { display: flex; justify-content: space-between; gap: 1ch; color: var(--w); margin-bottom: .5em; }
.phead span:first-child { color: var(--y); }
.page h2 { margin-bottom: .5em; }
.page > p + p { margin-top: .5em; }

/* Listen */
.items { margin-top: 1em; display: grid; gap: .5em; }
.items h3 { display: flex; gap: 1ch; }
.num { color: #000; background: var(--y); text-shadow: none; min-width: 2ch; text-align: center; flex: none; align-self: start; }
.items p { padding-left: 3ch; }
.items--svc p { padding-left: 4ch; }
.tag { flex: none; color: #000; text-shadow: none; padding: 0 .5ch; align-self: start; }
.tag--c { background: var(--c); } .tag--g { background: var(--g); } .tag--y { background: var(--y); }
.tag--m { background: var(--m); } .tag--r { background: var(--r); } .tag--w { background: var(--w); }
.items--svc h3 { color: var(--w); }

.stats { margin-top: 1.5em; display: grid; gap: .5em; }
.stats { display: block; }
.stats div + div { margin-top: .5em; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-top: 2px dotted #444; padding-top: .25em; overflow-x: clip; }
.stats dd { white-space: nowrap; }
.stats dt { padding-top: .1em; }

.route { margin-top: 1.5em; }
.route > * + * { margin-top: .5em; }
.route__map { display: flex; gap: 0 1ch; justify-content: space-between; }
.route__key { font-size: .8em; color: var(--w); }
.route .band span:last-child { color: #000; text-shadow: none; }
.route .band span:first-child { color: #000; }

/* Bilder: per SVG-Filter auf 8 Farben und Mosaikraster reduziert */
.pic { margin: .5em 0 1em; position: relative; background: #000; }
.pic img { width: 100%; height: auto; filter: url(#tt); image-rendering: pixelated; }
.pic--wide img { aspect-ratio: 16 / 8; object-fit: cover; }
.pic--about img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 20%; }

.steps { margin-top: 2em; }
.steps ol { display: grid; gap: .5em; }
.steps li { display: grid; grid-template-columns: 3ch 1fr; gap: 0 1ch; }
.steps__n { background: var(--c); text-align: center; align-self: start; }

.ticks { margin-top: 1em; display: grid; gap: .25em; }
.ticks li { padding-left: 3ch; position: relative; color: var(--g); }
.ticks li::before { content: '>'; position: absolute; left: 0; color: var(--y); }

.table { margin-top: 1em; display: grid; gap: .5em; }
.table div { display: grid; grid-template-columns: 15ch 1fr; gap: 0 1ch; border-top: 2px dotted #444; padding-top: .25em; }
.table dt { color: var(--c); }
.table a { text-decoration: none; overflow-wrap: anywhere; }
.table a:hover { background: var(--w); color: #000; text-shadow: none; }
.big { font-size: 1.5em; line-height: 1; }
.geo { margin-top: 1em; border: 2px solid #333; }

/* ---------- Fuß ---------- */
.foot { margin-top: 3em; padding-bottom: 120px; font-size: .8em; }
.foot .phead { border-top: 2px solid var(--b); padding-top: .4em; }
.foot__in { display: flex; gap: 1.5ch; align-items: center; margin: .5em 0 1em; }
.logo--foot img { width: 110px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .2em 2ch; }
.foot__nav a { text-decoration: none; }
.foot__nav a:hover { background: currentColor; }
.foot__nav a:hover { color: #000 !important; text-shadow: none; }
.foot__nav a.c-r:hover { background: var(--r); } .foot__nav a.c-g:hover { background: var(--g); } .foot__nav a.c-y:hover { background: var(--y); } .foot__nav a.c-c:hover { background: var(--c); }
.foot__copy { margin-top: 1em; color: #bbb; }

/* ---------- Bildröhre ---------- */
.crt { position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0,0,0,.55) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .js .page.tune { animation: tune .35s steps(3) 1; }
  @keyframes tune { 0% { opacity: .2; filter: brightness(2); } 60% { opacity: 1; } 100% { filter: none; } }
}

/* ---------- Rechtsseiten ---------- */
.legal-page { --fs: 30px; }
.legal-page .tv { grid-template-columns: 1fr minmax(0, 70ch) 1fr; }
.legal .back { display: inline-block; margin-top: .5em; background: var(--y); color: #000; text-decoration: none; text-shadow: none; padding: 0 .5ch; }
.legal .back:hover { background: var(--w); }
.legal h1 { margin: .5em 0 .6em; hyphens: auto; overflow-wrap: break-word; }
.legal-body h2 { color: var(--y); margin: 1.4em 0 .4em; }
.legal-body h2::before { content: '> '; color: var(--c); }
.legal-body p, .legal-body ul { margin: 0 0 .7em; line-height: 1.1; }
.legal-body ul { padding-left: 2ch; }
.legal-body li { margin-bottom: .3em; position: relative; }
.legal-body li::before { content: '-'; position: absolute; left: -2ch; color: var(--c); }
.legal-body a { color: var(--c); overflow-wrap: anywhere; }
.legal-body a:hover { background: var(--c); color: #000; text-shadow: none; }
.legal-body p, .legal-body li { hyphens: auto; overflow-wrap: break-word; }
.legal-note { background: var(--b); padding: .2em 1ch; color: var(--w); }
.legal-note a { color: var(--y) !important; }
.legal-address { border-top: 2px dotted #555; padding-top: .5em; color: var(--g); }
@media (min-width: 1200px) {
  .legal-page .tv { grid-template-columns: minmax(280px, 1fr) minmax(0, 60ch) minmax(200px, 1fr); }
  .legal-page .top { font-size: 28px; }
}

/* ---------- Mittlere und kleine Bildschirme ---------- */
@media (max-width: 1199px) {
  .nav__hint { display: none; }
  .top__row { max-width: calc(40ch * var(--fs) / 28px); }
}
@media (max-width: 760px) {
  :root { --fs: 27px; }
  .legal-page { --fs: 23px; }
  .tv { grid-template-columns: 16px minmax(0, 1fr) 16px; column-gap: 0; }
  .legal-page .tv { grid-template-columns: 16px minmax(0, 1fr) 16px; }
  .top { font-size: 24px; }
  .top__row { padding: 6px 12px; gap: 1ch; }
  .logo img { width: 50px; }
  .top__clock [data-date] { display: none; }
  .top__title { display: none; }
  .art .mosaic { width: 100%; height: auto; aspect-ratio: 80 / 25; }
  .fastext { grid-template-columns: 1fr 1fr; }
  .table div { grid-template-columns: 1fr; }
  .items p, .items--svc p { padding-left: 0; }
}
@media (max-width: 380px) {
  .top__page { display: none; }
}