/* Zeitreise: sechs Designs, umgeschaltet über <html data-era="…">.
   "schlicht" ist das Grunddesign aus style.css. */

/* ================================================================== 1990 */

html[data-era="1990"] {
  --bg: #c0c0c0; --fg: #000; --muted: #303030; --line: #808080;
  --link: #0000ee; --red: #f00; --bar: #000080;
  color-scheme: light;
}
[data-era="1990"] body {
  max-width: 800px;
  margin: 0;
  padding: 10px 14px 30px;
  font: 16px/1.3 "Times New Roman", Times, serif;
}
[data-era="1990"] a:visited { color: #551a8b; }
[data-era="1990"] .top { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
[data-era="1990"] h1 { text-align: center; font-size: 2.2em; font-weight: bold; }
[data-era="1990"] h1::after { content: " NEU!"; font-size: .4em; color: #f00; vertical-align: super; animation: blink90 1s steps(1) infinite; }
@keyframes blink90 { 50% { visibility: hidden; } }
[data-era="1990"] main, [data-era="1990"] #gate { border-top: 4px ridge #e8e8e8; padding-top: 10px; }
[data-era="1990"] h2 { font-size: 1.5em; font-weight: bold; margin: 1.4em 0 .4em; }
[data-era="1990"] h2::before { content: "» "; color: #000080; }
[data-era="1990"] input, [data-era="1990"] select, [data-era="1990"] textarea {
  background: #fff; border: 2px inset #e0e0e0; border-radius: 0; padding: 1px 3px; font: 14px "Courier New", monospace;
}
[data-era="1990"] button:not(.linkish):not(.era__opt), [data-era="1990"] .era summary {
  background: #c0c0c0; color: #000;
  border: 2px outset #f0f0f0; border-radius: 0;
  padding: 2px 10px; font: 13px Arial, sans-serif;
}
[data-era="1990"] button:not(.linkish):not(.era__opt):hover { background: #c0c0c0; border-color: #f0f0f0; }
[data-era="1990"] button:not(.linkish):not(.era__opt):active { border-style: inset; }
[data-era="1990"] .era__menu { background: #fff; border: 2px outset #f0f0f0; box-shadow: none; }
[data-era="1990"] .era .era__opt:hover { background: #000080; color: #fff; }
[data-era="1990"] .era .era__opt:hover small { color: #fff; }
[data-era="1990"] .ride-form { border: 0; padding: 0; }
[data-era="1990"] .ride-form label { color: #000; font-size: .9rem; }
[data-era="1990"] .bar { border: 2px inset #e0e0e0; height: 16px; background: #fff; }
[data-era="1990"] .bar span { background: #000080; }
[data-era="1990"] .facts, [data-era="1990"] .facts b { color: #000; }
[data-era="1990"] table { border: 2px outset #f0f0f0; border-collapse: separate; border-spacing: 2px; background: #c0c0c0; }
[data-era="1990"] td, [data-era="1990"] th { border: 1px inset #e0e0e0; padding: 2px 4px; }
[data-era="1990"] th { color: #000; font-weight: bold; font-size: .9rem; }
[data-era="1990"] .weeks td:first-child { color: #000; }
[data-era="1990"] .log tr.month td { background: #000080; color: #fff; border: 0; padding-top: 3px; }
[data-era="1990"] .log tr.month td span { color: #ccc; }
[data-era="1990"] .log .note, [data-era="1990"] .log .date { color: #303030; }
[data-era="1990"] .foot { text-align: left; color: #000; font-size: 13px; border-top: 4px ridge #e8e8e8; padding-top: 8px; }
[data-era="1990"] .foot::before {
  content: "Sie sind Besucher Nr. 0004711  ·  Optimiert für Netscape Navigator 3.0 bei 800×600  ·  Diese Seite ist ständig im Aufbau.";
  white-space: pre;
}

/* ================================================================== 2000 */

html[data-era="2000"] {
  --bg: #fff; --fg: #222; --muted: #5a6473; --line: #c9d6e8;
  --link: #0645ad; --red: #d24a00; --bar: #2a5ca8;
  color-scheme: light;
  background: #6d8fc7 linear-gradient(#5079b8, #9db6dc) fixed;
}
[data-era="2000"] body {
  max-width: 760px;
  margin: 24px auto;
  padding: 0 0 20px;
  background: #fff;
  border: 1px solid #3a5f99;
  font: 12px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif;
}
[data-era="2000"] main, [data-era="2000"] #gate { padding: 0 16px; }
[data-era="2000"] .top {
  margin: 0 0 16px; padding: 10px 14px;
  background: linear-gradient(#3f78bd, #1c4b8c);
  border-bottom: 4px solid #f5a623;
  color: #fff;
}
[data-era="2000"] h1 { font: bold 22px "Trebuchet MS", Verdana, sans-serif; text-shadow: 1px 1px 0 #0d2b55; }
[data-era="2000"] .top nav a, [data-era="2000"] .top nav .linkish { color: #fff; font-size: 11px; }
[data-era="2000"] h2 {
  margin: 20px 0 8px; padding: 4px 8px;
  font: bold 12px Verdana, sans-serif; color: #1c4b8c;
  background: linear-gradient(#f2f6fb, #d8e3f2);
  border: 1px solid #9fb7d9;
}
[data-era="2000"] h2::before { content: "▸ "; color: #f5a623; }
[data-era="2000"] .log-head select { font-size: 11px; }
[data-era="2000"] input, [data-era="2000"] select, [data-era="2000"] textarea {
  border: 1px solid #7f9db9; border-radius: 0; font: 11px Tahoma, Verdana, sans-serif; padding: 3px;
}
[data-era="2000"] button:not(.linkish):not(.era__opt), [data-era="2000"] .era summary {
  background: linear-gradient(#fff, #e1e1e1);
  color: #000; border: 1px solid #003c74; border-radius: 3px;
  padding: 3px 12px; font: 11px Tahoma, Verdana, sans-serif;
}
[data-era="2000"] button:not(.linkish):not(.era__opt):hover, [data-era="2000"] .era summary:hover {
  background: linear-gradient(#fff, #e1e1e1); border-color: #f5a623; box-shadow: inset 0 0 0 1px #fcd28a;
}
[data-era="2000"] .era__menu { background: #fff; border: 1px solid #7f9db9; box-shadow: 2px 2px 3px rgba(0,0,0,.35); font: 11px Tahoma, sans-serif; }
[data-era="2000"] .era .era__opt { font-size: 11px; }
[data-era="2000"] .era .era__opt:hover { background: #316ac5; color: #fff; }
[data-era="2000"] .era .era__opt:hover small { color: #dfe8f7; }
[data-era="2000"] .ride-form { background: #f2f6fb; border: 1px solid #c9d6e8; padding: 10px; }
[data-era="2000"] .ride-form label { font-size: 11px; color: #1c4b8c; font-weight: bold; }
[data-era="2000"] #year-line { font-size: 15px; font-weight: bold; color: #1c4b8c; }
[data-era="2000"] .bar { height: 16px; border: 1px solid #7f9db9; background: #fff; padding: 1px; }
[data-era="2000"] .bar span { background: linear-gradient(#9be27a, #49a92a 50%, #3c9a1d 51%, #6fc24b); }
[data-era="2000"] .bar i { border-left-color: #d24a00; }
[data-era="2000"] th { background: #d8e3f2; color: #1c4b8c; font-weight: bold; font-size: 11px; border-bottom: 1px solid #9fb7d9; padding-left: 4px; }
[data-era="2000"] td { padding-left: 4px; }
[data-era="2000"] .log { font-size: 11px; }
[data-era="2000"] .log td { border-bottom: 1px dotted #c9d6e8; }
[data-era="2000"] .log tbody tr:nth-child(even) td { background: #f5f8fc; }
[data-era="2000"] .log tr.month td { border-bottom: 2px solid #1c4b8c; color: #1c4b8c; background: none !important; }
[data-era="2000"] .weeks td { font-size: 11px; }
[data-era="2000"] .weeks .w { height: 10px; background: linear-gradient(#7fb0ec, #2a5ca8); border: 1px solid #1c4b8c; }
[data-era="2000"] .weeks tr.now .w { background: linear-gradient(#ffc56b, #e07b00); border-color: #b35f00; }
[data-era="2000"] .foot { margin: 24px 16px 0; padding-top: 8px; border-top: 1px solid #c9d6e8; font-size: 10px; }
[data-era="2000"] .foot::before { content: "© 2000–2004 Fahrradbuch.de  |  Optimiert für Internet Explorer 6.0 bei 1024×768  |  Impressum  |  Gästebuch"; white-space: pre; }

/* ================================================================== 2010 */

html[data-era="2010"] {
  --bg: #fff; --fg: #333; --muted: #777; --line: #e5e5e5;
  --link: #0088cc; --red: #da4f49; --bar: #49afcd;
  color-scheme: light;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px),
    #d9dde1;
}
[data-era="2010"] body {
  max-width: 820px;
  margin: 36px auto;
  padding: 0 32px 28px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  font: 14px/1.6 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
[data-era="2010"] .top {
  margin: 0 -32px 26px; padding: 16px 32px;
  background: linear-gradient(#4b4b4b, #262626);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #000;
  color: #fff;
}
[data-era="2010"] h1 { font: 400 34px/1 Lobster, cursive; text-shadow: 0 2px 0 #000; }
[data-era="2010"] .top nav a, [data-era="2010"] .top nav .linkish { color: #9ad3ff; text-decoration: none; }
[data-era="2010"] h2 {
  font-weight: 600; font-size: 19px; color: #333;
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid #e5e5e5; padding-bottom: 6px;
}
[data-era="2010"] input, [data-era="2010"] select, [data-era="2010"] textarea {
  border: 1px solid #ccc; border-radius: 4px; padding: 5px 7px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
[data-era="2010"] input:focus, [data-era="2010"] select:focus, [data-era="2010"] textarea:focus {
  outline: 0; border-color: #66afe9; box-shadow: inset 0 1px 2px rgba(0,0,0,.08), 0 0 8px rgba(102,175,233,.6);
}
[data-era="2010"] button:not(.linkish):not(.era__opt) {
  background: linear-gradient(#7fcb45, #4f9a1e);
  border: 1px solid #3f7d16; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,.3);
  color: #fff; font-weight: 600; padding: 5px 16px;
}
[data-era="2010"] button:not(.linkish):not(.era__opt):hover { background: linear-gradient(#6cbb33, #458a17); border-color: #3f7d16; }
[data-era="2010"] .era summary {
  color: #eee; border: 1px solid #111; border-radius: 4px;
  background: linear-gradient(#5a5a5a, #3a3a3a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  font-size: 12px; padding: 3px 10px;
}
[data-era="2010"] .era__menu { border: 1px solid rgba(0,0,0,.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0,0,0,.2); padding: 5px 0; font-size: 13px; }
[data-era="2010"] .era .era__opt:hover { background: linear-gradient(#08c, #0077b3); color: #fff; }
[data-era="2010"] .era .era__opt:hover small { color: #d9efff; }
[data-era="2010"] .ride-form { border-top: 0; background: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 4px; padding: 14px 16px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05); }
[data-era="2010"] .ride-form label { font-weight: 600; color: #555; font-size: 12px; }
[data-era="2010"] #year-line { font-size: 22px; font-weight: 300; }
[data-era="2010"] .bar { height: 20px; border: 0; border-radius: 4px; background: #f0f0f0; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); overflow: hidden; }
[data-era="2010"] .bar span {
  background-color: #5eb95e;
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent);
  background-size: 28px 28px;
  animation: stripes10 1s linear infinite;
}
@keyframes stripes10 { from { background-position: 28px 0; } to { background-position: 0 0; } }
[data-era="2010"] .bar i { top: 0; bottom: 0; border-left: 2px solid #da4f49; }
[data-era="2010"] table { border: 1px solid #ddd; border-radius: 4px; border-collapse: separate; border-spacing: 0; }
[data-era="2010"] th { background: linear-gradient(#fafafa, #ececec); color: #333; font-weight: 600; border-bottom: 1px solid #ddd; padding: 7px 8px; }
[data-era="2010"] td { padding: 6px 8px; }
[data-era="2010"] .log td { border-bottom: 1px solid #eee; }
[data-era="2010"] .log tbody tr:nth-child(odd) td { background: #f9f9f9; }
[data-era="2010"] .log tr.month td { background: #fff !important; border-bottom: 1px solid #ddd; }
[data-era="2010"] .weeks { border: 0; }
[data-era="2010"] .weeks .w { height: 12px; border-radius: 3px; background: linear-gradient(#5bc0de, #2f96b4); }
[data-era="2010"] .weeks tr.now .w { background: linear-gradient(#ee5f5b, #bd362f); }
[data-era="2010"] .foot { font-size: 12px; }
[data-era="2010"] .foot::before { content: "Made with ♥ and jQuery 1.4  ·  Gefällt 128 Personen  ·  Folge uns auf Twitter"; white-space: pre; }

/* ================================================================== 2020 */

html[data-era="2020"] {
  --bg: #f7f7f8; --card: #fff; --fg: #111827; --muted: #6b7280; --line: #e5e7eb;
  --link: #4f46e5; --red: #e11d48; --bar: #4f46e5;
}
@media (prefers-color-scheme: dark) {
  html[data-era="2020"] {
    --bg: #0b0b0f; --card: #15151b; --fg: #f3f4f6; --muted: #9ca3af; --line: #26262e;
    --link: #818cf8; --red: #fb7185; --bar: #818cf8;
  }
}
[data-era="2020"] body { max-width: 54rem; font: 15px/1.6 Inter, system-ui, sans-serif; letter-spacing: -.005em; }
[data-era="2020"] .top { border: 0; margin-bottom: 1.2rem; }
[data-era="2020"] h1 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.025em; }
[data-era="2020"] .top nav a, [data-era="2020"] .top nav .linkish { color: var(--muted); text-decoration: none; font-weight: 500; }
[data-era="2020"] .top nav a:hover, [data-era="2020"] .top nav .linkish:hover { color: var(--fg); }
[data-era="2020"] main > section, [data-era="2020"] #gate {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem; margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
[data-era="2020"] h2 { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; }
[data-era="2020"] input, [data-era="2020"] select, [data-era="2020"] textarea {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem;
}
[data-era="2020"] input:focus, [data-era="2020"] select:focus, [data-era="2020"] textarea:focus {
  outline: 0; border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 25%, transparent);
}
[data-era="2020"] button:not(.linkish):not(.era__opt) {
  background: var(--link); color: #fff; border: 0; border-radius: 10px; padding: .55rem 1.1rem; font-weight: 500;
}
[data-era="2020"] button:not(.linkish):not(.era__opt):hover { background: var(--link); filter: brightness(1.1); }
[data-era="2020"] .era summary { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .3rem .8rem; font-weight: 500; }
[data-era="2020"] .era__menu { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .35rem; box-shadow: 0 12px 32px -8px rgba(0,0,0,.18); }
[data-era="2020"] .era .era__opt { border-radius: 8px; }
[data-era="2020"] .ride-form { border: 0; padding: 0; }
[data-era="2020"] .ride-form label { font-size: .78rem; font-weight: 500; }
[data-era="2020"] #year-line { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
[data-era="2020"] .bar { height: 8px; border: 0; border-radius: 999px; background: var(--line); }
[data-era="2020"] .bar span { border-radius: 999px; background: var(--bar); }
[data-era="2020"] .bar i { top: -4px; bottom: -4px; border-left-width: 2px; }
[data-era="2020"] th { border-bottom: 1px solid var(--line); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
[data-era="2020"] .log td { border-bottom-color: var(--line); padding-top: .55rem; padding-bottom: .55rem; }
[data-era="2020"] .log tr.month td { border-bottom: 1px solid var(--line); }
[data-era="2020"] .weeks .w { height: 8px; border-radius: 999px; }
[data-era="2020"] .foot::before { content: "Built with Next.js · Deployed on Vercel"; }

/* ================================================================== 2030 */

html[data-era="2030"] {
  --bg: #f3f1ee; --fg: #15141b; --muted: #5d5a66; --line: rgba(21,20,27,.09);
  --link: #5b3df5; --red: #ff5a36; --bar: #15141b;
  --glass: rgba(255,255,255,.5); --glass-edge: rgba(255,255,255,.75);
  background:
    radial-gradient(at 8% 6%, #ffd2bd 0, transparent 45%),
    radial-gradient(at 92% 14%, #c9d5ff 0, transparent 45%),
    radial-gradient(at 60% 96%, #cdf3df 0, transparent 50%),
    #f3f1ee;
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  html[data-era="2030"] {
    --bg: #0f0e15; --fg: #efedf6; --muted: #a29fb0; --line: rgba(255,255,255,.08);
    --link: #a493ff; --red: #ff8a66; --bar: #efedf6;
    --glass: rgba(30,28,42,.55); --glass-edge: rgba(255,255,255,.08);
    background:
      radial-gradient(at 8% 6%, #3a1f3a 0, transparent 45%),
      radial-gradient(at 92% 14%, #1d2550 0, transparent 45%),
      radial-gradient(at 60% 96%, #12352a 0, transparent 50%),
      #0f0e15;
    background-attachment: fixed;
  }
}
[data-era="2030"] body { max-width: 60rem; background: transparent; font: 16px/1.55 "Instrument Sans", system-ui, sans-serif; }
[data-era="2030"] .top { border: 0; margin-bottom: 1.5rem; }
[data-era="2030"] h1 { font: 500 1.6rem/1 Unbounded, sans-serif; letter-spacing: -.03em; }
[data-era="2030"] h2 { margin: 0 0 1.1rem; font: 500 .95rem Unbounded, sans-serif; letter-spacing: -.01em; }
[data-era="2030"] main > section, [data-era="2030"] #gate {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  padding: 1.8rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 30px 60px -34px rgba(40,30,90,.35);
}
[data-era="2030"] .summary { padding: 2.2rem 1.8rem; }
[data-era="2030"] #year-line { font: 300 clamp(1.6rem, 4vw, 2.4rem)/1.15 Unbounded, sans-serif; letter-spacing: -.04em; margin-bottom: 1rem; }
[data-era="2030"] input, [data-era="2030"] select, [data-era="2030"] textarea {
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: .55rem .8rem;
}
[data-era="2030"] input:focus, [data-era="2030"] select:focus, [data-era="2030"] textarea:focus { outline: 0; border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 18%, transparent); }
[data-era="2030"] button:not(.linkish):not(.era__opt) {
  background: var(--fg); color: var(--bg); border: 0; border-radius: 999px; padding: .6rem 1.4rem; font-weight: 500;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), background .2s;
}
[data-era="2030"] button:not(.linkish):not(.era__opt):hover { background: var(--link); color: #fff; transform: scale(1.04); }
[data-era="2030"] .era summary { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-edge); border-radius: 999px; padding: .35rem .9rem; }
[data-era="2030"] .era__menu { background: var(--glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--glass-edge); border-radius: 20px; padding: .4rem; box-shadow: 0 24px 48px -20px rgba(40,30,90,.35); }
[data-era="2030"] .era .era__opt { border-radius: 14px; }
[data-era="2030"] .ride-form { border: 0; padding: 0; }
[data-era="2030"] .ride-form label { font-size: .78rem; }
[data-era="2030"] .bar { height: 14px; border: 0; border-radius: 999px; background: var(--line); }
[data-era="2030"] .bar span { border-radius: 999px; background: linear-gradient(90deg, #ff8a5b, #5b3df5); }
[data-era="2030"] .bar i { top: -6px; bottom: -6px; border-left: 2px solid var(--fg); }
[data-era="2030"] th { border-bottom: 1px solid var(--line); font-size: .75rem; }
[data-era="2030"] .log td { border-bottom-color: var(--line); }
[data-era="2030"] .log tr.month td { border-bottom: 1px solid var(--line); font-family: Unbounded, sans-serif; font-weight: 500; font-size: .85rem; }
[data-era="2030"] .weeks .w { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #ff8a5b, #5b3df5); }
[data-era="2030"] .weeks tr.now .w { background: var(--fg); }
[data-era="2030"] .weeks tr.now td { color: var(--fg); font-weight: 600; }
[data-era="2030"] .foot::before { content: "Läuft lokal auf deinem Pi · 0 g CO₂ pro Aufruf"; }

/* ================================================================== 2050 */

html[data-era="2050"] {
  --bg: #02070b; --fg: #a6f7ff; --muted: #4fa3b0; --line: rgba(60,242,255,.2);
  --link: #ff4fd8; --red: #ff4fd8; --bar: #3cf2ff;
  color-scheme: dark;
  background: radial-gradient(ellipse at 50% -10%, #0b3a4a 0, transparent 60%), #02070b;
  background-attachment: fixed;
}
[data-era="2050"] body {
  max-width: 56rem;
  background: transparent;
  font: 15px/1.6 "Share Tech Mono", ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(60,242,255,.45);
}
[data-era="2050"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
[data-era="2050"] .top { border-bottom: 1px solid var(--line); }
[data-era="2050"] h1 { font: 700 1.3rem Orbitron, sans-serif; text-transform: uppercase; letter-spacing: .25em; }
[data-era="2050"] h2 { margin: 0 0 1rem; font: 500 .75rem Orbitron, sans-serif; text-transform: uppercase; letter-spacing: .3em; color: var(--bar); }
[data-era="2050"] h2::before { content: "// "; color: var(--link); }
[data-era="2050"] main > section, [data-era="2050"] #gate {
  position: relative;
  margin-bottom: 1.2rem; padding: 1.4rem;
  background: rgba(10,40,55,.35);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
[data-era="2050"] a, [data-era="2050"] .linkish { color: var(--link); text-shadow: 0 0 8px rgba(255,79,216,.6); }
[data-era="2050"] input, [data-era="2050"] select, [data-era="2050"] textarea {
  background: rgba(60,242,255,.05); border: 0; border-bottom: 1px solid var(--bar); border-radius: 0; color: var(--fg);
}
[data-era="2050"] input:focus, [data-era="2050"] select:focus, [data-era="2050"] textarea:focus { outline: 0; background: rgba(60,242,255,.12); box-shadow: 0 2px 12px -4px var(--bar); }
[data-era="2050"] option { background: #02070b; }
[data-era="2050"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) hue-rotate(140deg) saturate(4); }
[data-era="2050"] button:not(.linkish):not(.era__opt), [data-era="2050"] .era summary {
  background: transparent; color: var(--bar);
  border: 1px solid var(--bar); border-radius: 0;
  padding: .45rem 1rem;
  text-transform: uppercase; letter-spacing: .2em; font-size: .78rem;
  box-shadow: 0 0 12px rgba(60,242,255,.35), inset 0 0 12px rgba(60,242,255,.12);
}
[data-era="2050"] button:not(.linkish):not(.era__opt):hover { background: var(--bar); color: #02070b; border-color: var(--bar); text-shadow: none; }
[data-era="2050"] .era__menu { background: rgba(2,7,11,.92); border: 1px solid var(--bar); box-shadow: 0 0 24px rgba(60,242,255,.3); }
[data-era="2050"] .era .era__opt { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
[data-era="2050"] .era .era__opt:hover { background: rgba(60,242,255,.15); }
[data-era="2050"] .ride-form { border: 0; padding: 0; }
[data-era="2050"] .ride-form label { text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; }
[data-era="2050"] #year-line { font: 500 1.2rem Orbitron, sans-serif; letter-spacing: .05em; color: #fff; }
[data-era="2050"] .bar { height: 6px; border: 1px solid var(--line); }
[data-era="2050"] .bar span { background: var(--bar); box-shadow: 0 0 14px var(--bar); }
[data-era="2050"] .bar i { border-left: 2px solid var(--link); box-shadow: 0 0 10px var(--link); }
[data-era="2050"] .facts b { color: #fff; }
[data-era="2050"] th { border-bottom: 1px solid var(--bar); text-transform: uppercase; letter-spacing: .15em; font-size: .7rem; color: var(--muted); }
[data-era="2050"] .log td { border-bottom: 1px dashed var(--line); }
[data-era="2050"] .log tr.month td { border-bottom: 1px solid var(--line); color: var(--bar); text-transform: uppercase; letter-spacing: .12em; }
[data-era="2050"] .weeks .w { height: 4px; margin-top: .55rem; background: var(--bar); box-shadow: 0 0 10px var(--bar); }
[data-era="2050"] .weeks tr.now .w { background: var(--link); box-shadow: 0 0 10px var(--link); }
[data-era="2050"] .weeks tr.now td { color: var(--link); }
[data-era="2050"] .foot { letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; }
[data-era="2050"] .foot::before { content: "SYS//FAHRRADBUCH v31.4 · NEURALLINK STABIL · ORBIT-SYNC OK"; }

@media (prefers-reduced-motion: reduce) {
  [data-era="1990"] h1::after, [data-era="2010"] .bar span { animation: none; }
}