/* =================================================================== Han Technologies - Stylesheet Ein Stylesheet fuer alle Seiten, reines CSS ohne Praeprozessor. Dieselben Farben und dasselbe Farbfeld wie die HT-Arcade, als Corporate-Auftritt mit Augenzwinkern: klare Karten, ruhiges Raster, und kleine Bewegungen, die Spass machen, ohne zu stoeren. script.js setzt ; alles unter "Ohne JavaScript" haelt die Seite auch ohne Skript benutzbar. Aufbau: Tokens, Theme HT: Studios, Basis, Bausteine, Kopfleiste, Fuss, Kopfbereich, Startseite, HT: Studios, Textseiten, Bewegung, schmale Fenster. Copyright (C) 2026 Han Technologies =================================================================== */ :root { /* ---------- Flaechen und Schrift ---------- Warmes Anthrazit statt Fast-Schwarz: der Grund ist die hellste Flaeche aus dem Street-Theme der Arcade. Kein reines Schwarz, nirgends. Alle Schriftfarben halten auf dem Grund mindestens 6:1. */ --bg: #231f20; --surface-0: #2a2527; --surface-1: #312c2e; --surface-2: #3a3437; --ink: #f5f1ea; --ink-dim: #cdc5bb; --ink-faint: #a9a096; --line: rgba(255, 255, 255, 0.14); --line-strong: rgba(255, 255, 255, 0.28); /* Dunkle Schrift fuer helle und farbige Flaechen, statt Schwarz. */ --ink-dark: #1a1516; /* Schattenfarbe, ebenfalls ohne reines Schwarz. */ --shade: 14, 10, 12; /* ---------- Farbfeld ---------- Wie im Theme street-crimson der HT-Arcade: ein Verlauf ueber die ganze Fensterbreite, bis 25 % rein Crimson, danach entlang der Kurve 1.6 bis dunkles Lila. Die Stuetzstellen sind in OKLab vorgerechnet, damit kein Browser pow() oder Farbraeume im Verlauf koennen muss. Dieselben Werte stehen in assets/js/main.js. */ --field: linear-gradient(90deg, #ff0200 25%, #f90e19 34.375%, #ee1b2f 43.75%, #de2542 53.125%, #cb2b53 62.5%, #b52e63 71.875%, #9d2e71 81.25%, #84297f 90.625%, #6a1d8c 100%); --field-w: 100vw; /* Dasselbe Feld fuer Schrift, zum Ende hin aufgehellt: das dunkle Lila waere auf dem Grund kaum lesbar. Jede Stelle haelt mindestens 4.3:1. */ --field-text: linear-gradient(90deg, #ff2a1f 25%, #fc312e 34.375%, #f73c44 43.75%, #ef475b 53.125%, #e65272 62.5%, #db5b8b 71.875%, #ce62a6 81.25%, #c067c2 90.625%, #b06ae0 100%); /* Das ganze helle Feld auf einem einzigen Wort, fuer den Namen im Fuss. */ --word-field: linear-gradient(90deg, #ff2a1f 0%, #fc312e 12.5%, #f73c44 25%, #ef475b 37.5%, #e65272 50%, #db5b8b 62.5%, #ce62a6 75%, #c067c2 87.5%, #b06ae0 100%); --word-end: #b06ae0; /* Hauszeichen wie das Logo (assets/icons/favicon.ico): Violett links, ueber Magenta zu Rot rechts. Aufgehellt, damit es auf dem Grund leuchtet. */ --mark-grad: linear-gradient(90deg, #9b4dff, #d0359f 50%, #ff2a3a); --mark-glow: rgba(208, 53, 159, 0.55); /* Vollton und Schrift darauf an der Stelle des Elements. script.js schreibt beide je Baustein, ohne Skript gilt der Anfang des Feldes. */ --accent: #ff0200; --accent-ink: var(--ink-dark); /* Akzent als Schriftfarbe, heller als der Vollton. */ --accent-text: #ff6a4d; /* Schimmer im Kopfbereich: links die Anfangs-, rechts die Endfarbe, dazu der Lichtkegel, der dem Zeiger folgt. */ --glow-start: rgba(255, 2, 0, 0.12); --glow-end: rgba(106, 29, 140, 0.2); --spot: rgba(255, 42, 31, 0.13); /* ---------- Schriften ---------- */ --font-display: 'Shrikhand', Georgia, serif; --font-body: 'Barlow', 'Segoe UI', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, 'Courier New', monospace; --t-micro: 12px; --t-small: 15px; --t-body: clamp(16px, 0.2vw + 14.5px, 18px); --t-lead: clamp(18px, 0.5vw + 15px, 21px); --t-h3: clamp(20px, 0.5vw + 16.5px, 24px); --t-h2: clamp(30px, 2.4vw + 16px, 50px); --t-h1: clamp(40px, 8.2vw, 116px); /* ---------- Abstaende und Form ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --section: clamp(96px, 11vw, 168px); --grid-gap: clamp(20px, 2.4vw, 32px); --radius-sm: 8px; --radius: 14px; --radius-lg: 24px; --radius-pill: 999px; /* ---------- Raster und Bewegung ---------- */ --page-max: 1200px; --gutter: clamp(16px, 4vw, 48px); --bar-height: 72px; --fast: 0.14s; --mid: 0.3s; --slow: 0.7s; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* Leichtes Nachfedern fuer alles, was sich hebt oder huepft. */ --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- Medaillenraenge wie in der Arcade ---------- */ --rank-bronze: #c98a4b; --rank-silber: #c9d2dd; --rank-gold: #ffc94a; --rank-schwarz: #ff2b2b; } /* ---------- Theme HT: Studios ---------- Die Unterseite des Spielestudios ist blau: Cobalt wie das Theme street-cobalt der Arcade und Websnake, zum rechten Rand tiefes Indigo. Gleiche Kurve wie das Haus, Stuetzstellen ebenfalls in OKLab. Die Flaechen sind kuehler, damit das Blau nicht auf warmem Grund steht. */ :root[data-theme='studios'] { --bg: #1d2130; --surface-0: #232838; --surface-1: #2a3042; --surface-2: #333a4f; --ink: #f3f5fb; --ink-dim: #bfc5d4; --ink-faint: #98a0b3; --ink-dark: #10131d; --shade: 8, 10, 20; --field: linear-gradient(90deg, #2f7bff 25%, #2f78fb 34.375%, #3071f4 43.75%, #3068ea 53.125%, #305ede 62.5%, #2f51d0 71.875%, #2e43c1 81.25%, #2c32b0 90.625%, #2a1f9e 100%); --field-text: linear-gradient(90deg, #3f86ff 25%, #4386ff 34.375%, #4b86fe 43.75%, #5486fd 53.125%, #5e86fc 62.5%, #6986fa 71.875%, #7485f9 81.25%, #8085f7 90.625%, #8c84f5 100%); --word-field: linear-gradient(90deg, #3f86ff 0%, #4386ff 12.5%, #4b86fe 25%, #5486fd 37.5%, #5e86fc 50%, #6986fa 62.5%, #7485f9 75%, #8085f7 87.5%, #8c84f5 100%); --word-end: #8c84f5; --mark-grad: linear-gradient(90deg, #a08cff, #6f86ff 50%, #3f9bff); --mark-glow: rgba(95, 134, 255, 0.55); --accent: #2f7bff; --accent-text: #8ab4ff; --glow-start: rgba(47, 123, 255, 0.16); --glow-end: rgba(42, 31, 158, 0.3); --spot: rgba(63, 134, 255, 0.16); } /* Flaeche aus dem Feld: der Ausschnitt, der hinter diesem Element liegt. Die Regel steht an jedem Element, weil var(--fx) dort aufgeloest wird, wo die Eigenschaft deklariert ist. Fuer Schrift gilt das helle Feld. */ * { --accent-grad: var(--field) calc(var(--fx, 0px) * -1) 0 / var(--field-w) 100% no-repeat; --accent-grad-text: var(--field-text) calc(var(--fx, 0px) * -1) 0 / var(--field-w) 100% no-repeat; } /* ================================ Basis ================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; background-color: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: 0; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } [id] { scroll-margin-top: calc(var(--bar-height) + var(--s-5)); } .frame { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; } .skip { position: fixed; top: var(--s-2); left: var(--s-2); z-index: 200; padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); background: var(--accent-grad); color: var(--accent-ink); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--fast) var(--ease); } .skip:focus-visible { transform: none; } /* Namen mit Bindestrich nicht an der Zeilengrenze zerreissen. */ .nowrap { white-space: nowrap; } /* ================================ Bausteine ================================ */ /* Kleine Grossbuchstaben-Marke mit Strich aus dem Feld. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ink-dim); } .eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: var(--accent-grad); } /* Schrift, die das (helle) Feld an ihrer Stelle zeigt. Shrikhand ragt leicht ueber den Kasten, darum Innenabstand, den der Aussenabstand aufhebt. */ .grad-text { color: var(--ink); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .grad-text { background: var(--accent-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.08em 0.06em 0; margin: 0 -0.08em -0.06em 0; } } /* Kleines Etikett: Version, Status, Kategorie. */ .chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 3px 10px; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); white-space: nowrap; } .chip-hot { position: relative; color: var(--accent-ink); background: var(--accent-grad); border-color: transparent; } /* ---------- Hauszeichen ---------- Gesetzt wie das neue Logo: ein im Verlauf von Violett nach Rot, ohne Kasten. Beim Drueberfahren kippt es zu , wie in der Arcade. */ .ht-mark { display: inline-grid; place-items: center; flex: 0 0 auto; height: 42px; padding: 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--accent); border-radius: var(--radius-sm); overflow: hidden; user-select: none; transition: background-color var(--mid) var(--ease), transform var(--mid) var(--bounce); } .ht-mark > span { grid-area: 1 / 1; padding: 0 0.1em 0.08em; white-space: nowrap; filter: drop-shadow(0 0 10px var(--mark-glow)); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--bounce); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .ht-mark > span { background: var(--mark-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } } .ht-mark-hover { opacity: 0; transform: translateY(70%) rotate(-8deg); } a:hover > .ht-mark, a:focus-visible > .ht-mark { transform: rotate(-4deg) scale(1.06); background-color: var(--surface-1); } a:hover > .ht-mark .ht-mark-rest, a:focus-visible > .ht-mark .ht-mark-rest { opacity: 0; transform: translateY(-70%) rotate(8deg); } a:hover > .ht-mark .ht-mark-hover, a:focus-visible > .ht-mark .ht-mark-hover { opacity: 1; transform: none; } /* ---------- Knoepfe und Links ---------- */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: 0 22px; font-family: var(--font-body); font-size: var(--t-small); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--mid) var(--bounce), box-shadow var(--mid) var(--ease), border-color var(--fast), background-color var(--fast), color var(--fast); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; } .btn-solid { background: var(--accent-grad); color: var(--accent-ink); } .btn-solid:hover { box-shadow: 0 14px 32px -14px var(--accent); } /* Ein Glanz, der beim Drueberfahren einmal durchlaeuft. */ .btn-solid::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: translateX(-120%) skewX(-16deg); } .btn-solid:hover::after { transform: translateX(320%) skewX(-16deg); transition: transform 0.75s var(--ease); } .btn-ghost { color: var(--ink); border-color: var(--line-strong); background-color: transparent; } .btn-ghost:hover { border-color: var(--ink-dim); background-color: var(--surface-1); } .btn-light { background: #ffffff; color: var(--ink-dark); } .btn-light:hover { box-shadow: 0 14px 32px -14px rgba(var(--shade), 0.8); } /* Textlink mit Pfeil: die leise Schwester des Knopfs. */ .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); font-weight: 600; text-decoration: none; } .link-arrow:hover { text-decoration: underline; text-decoration-color: var(--accent); } .arrow { display: inline-block; transition: transform var(--mid) var(--bounce); } .btn:hover .arrow, .link-arrow:hover .arrow, .nav-arcade:hover .arrow, .post-row:hover .arrow { transform: translateX(4px); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); } /* ---------- Abschnitte ---------- */ .section { padding: calc(var(--section) / 2) 0; } .section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); } .section-title { margin-top: var(--s-4); font-size: var(--t-h2); } .section-note { max-width: 40em; margin-top: var(--s-4); color: var(--ink-dim); } /* Zwei Spalten: links Kopf und Text, rechts Inhalt. */ .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: start; } .split .section-head { margin-bottom: var(--s-5); } .prose-dim p { color: var(--ink-dim); } .prose-dim p + p { margin-top: var(--s-4); } .prose-dim .actions, .prose-dim .specs { margin-top: var(--s-6); } /* ---------- Karten ---------- Flaeche, feiner Rahmen, oben ein Streifen aus dem Feld. Beim Drueberfahren hebt sich die Karte und der Streifen waechst. */ .unit, .feature, .step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6); background-color: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--mid) var(--bounce), border-color var(--mid) var(--ease), background-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease); } .unit::before, .feature::before, .step::before { content: ''; position: absolute; top: -1px; left: var(--s-6); width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent-grad); transition: width var(--slow) var(--ease); } .unit:hover, .feature:hover, .step:hover { transform: translateY(-4px); border-color: var(--line-strong); background-color: var(--surface-1); box-shadow: 0 28px 56px -28px rgba(var(--shade), 0.9); } .unit:hover::before, .feature:hover::before, .step:hover::before { width: calc(100% - 2 * var(--s-6)); } .feature h3, .step h3 { font-size: var(--t-h3); } .feature p, .step p { color: var(--ink-dim); } .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Liste aus Schluessel und Wert, fuer Steckbriefe. */ .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); } .specs div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } .specs dt { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); } .specs dd { font-size: var(--t-small); text-align: right; } /* ---------- Band ---------- Das Feld als Flaeche, leicht abgedunkelt, damit weisse Schrift auf beiden Enden sicher lesbar bleibt. Rechts wartet ein grosses , das beim Drueberfahren zu aufgeht. */ .band { margin-top: calc(var(--section) / 2); } .band-inner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 72px); color: #ffffff; border-radius: var(--radius-lg); background: linear-gradient(rgba(var(--shade), 0.22), rgba(var(--shade), 0.22)), var(--accent-grad); } .band-inner > :not(.band-mark) { position: relative; z-index: 1; } .band h2 { margin-bottom: var(--s-3); font-size: clamp(30px, 2.4vw + 16px, 48px); } .band p { max-width: 34em; font-size: var(--t-lead); line-height: 1.5; opacity: 0.94; } .band a:focus-visible { outline-color: #ffffff; } .band-mark { position: absolute; right: clamp(-40px, -2vw, -12px); bottom: -0.28em; display: grid; font-family: var(--font-display); font-size: clamp(110px, 14vw, 200px); line-height: 1; color: rgba(255, 255, 255, 0.1); pointer-events: none; user-select: none; } .band-mark span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--bounce); } .band-mark span + span { opacity: 0; transform: translateY(30%) rotate(-6deg); } .band-inner:hover .band-mark span:first-child { opacity: 0; transform: translateY(-30%) rotate(6deg); } .band-inner:hover .band-mark span + span { opacity: 1; transform: none; } /* ================================ Kopfleiste ================================ */ .masthead { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } /* Unterkante: das Feld als feine Linie ueber die ganze Breite. */ .masthead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent-grad); opacity: 0.6; } .masthead-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5); min-height: var(--bar-height); } .brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; } /* Name der Unterseite neben dem Zeichen, z. B. "Studios". */ .brand-tag { padding-left: var(--s-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink); border-left: 1px solid var(--line-strong); } /* Navigation in einer Pille; der aktive Eintrag bekommt eigene Flaeche. */ .nav { display: flex; align-items: center; gap: 2px; padding: 4px; background: color-mix(in srgb, var(--surface-0) 80%, transparent); border: 1px solid var(--line); border-radius: var(--radius-pill); } .nav a { padding: 7px 16px; font-size: var(--t-small); font-weight: 500; color: var(--ink-dim); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill); transition: color var(--fast), background-color var(--fast); } .nav a:hover { color: var(--ink); background-color: var(--surface-1); } .nav a[aria-current='page'] { color: var(--ink); background-color: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); } /* Nur im Handy-Menue sichtbar. */ .nav .nav-arcade, .nav .nav-back { display: none; } .masthead-end { justify-self: end; display: flex; align-items: center; gap: var(--s-4); } /* Weg zurueck zum Haus, auf Unterseiten. */ .back-link { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 14px; color: var(--ink-dim); text-decoration: none; white-space: nowrap; transition: color var(--fast); } .back-link:hover { color: var(--ink); } .back-link:hover .arrow { transform: translateX(-4px); } .menu-btn { display: none; place-content: center; gap: 6px; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .menu-btn span { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform var(--mid) var(--bounce); } .masthead[data-open='true'] .menu-btn span:first-child { transform: translateY(3.75px) rotate(45deg); } .masthead[data-open='true'] .menu-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* ================================ Fuss ================================ */ .footer { position: relative; margin-top: var(--section); padding-top: var(--s-8); background: var(--surface-0); border-top: 1px solid var(--line); } .footer-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: var(--s-7); padding-bottom: var(--s-7); } /* Der Name im Fuss: beim Drueberfahren laufen die Buchstaben der Reihe nach in die Farben des Feldes und huepfen dabei einmal kurz. script.js zerlegt den Namen und misst, wo jeder Buchstabe steht, damit ein einziger Verlauf ueber das ganze Wort liegt. */ .footer-name { position: relative; display: inline-block; font-family: var(--font-display); font-size: 28px; line-height: 1.2; text-decoration: none; white-space: nowrap; } .fn-char { display: inline-block; /* Luft fuer Shrikhands Ueberhang, damit der Verlauf nichts abschneidet. */ padding: 0 0.08em 0.12em; margin: 0 -0.08em -0.12em; color: var(--ink); background-color: var(--word-end); background-image: var(--word-field); background-size: var(--lw, 100%) 100%; background-position: calc(var(--lx, 0px) * -1) 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; transition: color 0.45s var(--ease) calc(var(--i, 0) * 28ms); } .footer-name:hover .fn-char, .footer-name:focus-visible .fn-char { color: transparent; animation: fn-hop 0.6s var(--bounce) calc(var(--i, 0) * 28ms) both; } .footer-brand p { max-width: 24em; margin-top: var(--s-3); font-size: var(--t-small); color: var(--ink-dim); } .footer-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; list-style: none; } .footer-facts li { padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--radius-pill); } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } .footer-title { margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); } .footer-col ul { list-style: none; } .footer-col li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); } .footer-col li + li { margin-top: var(--s-2); } /* ---------- Aufklappbare Gruppe im Fuss ---------- Eine Zeile mit rundem Pfeil rechts. Der Pfeil dreht sich nach unten, die Eintraege fahren nacheinander ein. Zugeklappt sind sie unsichtbar und damit auch nicht per Tab erreichbar. */ .footer-col li.footer-group { display: block; } .footer-toggle { display: flex; align-items: center; gap: var(--s-2); width: 100%; font-size: 15px; line-height: 1.6; color: var(--ink-dim); text-align: left; border-radius: var(--radius-sm); transition: color var(--fast); } .footer-toggle-label, .footer-toggle .footer-tag { white-space: nowrap; } .footer-toggle:hover, .footer-group[data-open='true'] .footer-toggle { color: var(--ink); } .footer-toggle .chev { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin-left: auto; color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: 50%; transition: transform var(--mid) var(--bounce), background-color var(--fast), border-color var(--fast), color var(--fast); } .footer-toggle .chev svg { width: 14px; height: 14px; } .footer-toggle:hover .chev { color: var(--ink); border-color: var(--ink-dim); background-color: var(--surface-1); } .footer-group[data-open='true'] .chev { transform: rotate(90deg); color: var(--accent-ink); border-color: transparent; background: var(--accent-grad); } /* Hoehe weich von 0 auf Inhalt: eine Rasterzeile von 0fr auf 1fr. */ .footer-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--mid) var(--ease), visibility 0s linear var(--mid); } .footer-group[data-open='true'] .footer-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--mid) var(--ease), visibility 0s; } .footer-sub > ul { min-height: 0; overflow: hidden; margin-left: 11px; padding-left: var(--s-4); border-left: 1px solid var(--line-strong); } .footer-sub li { opacity: 0; transform: translateX(-8px); transition: opacity 0.2s var(--ease), transform var(--mid) var(--bounce); } .footer-sub li:first-child { margin-top: var(--s-3); } .footer-group[data-open='true'] .footer-sub li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 60ms); } .footer-col a { font-size: 15px; color: var(--ink-dim); text-decoration: none; transition: color var(--fast); } .footer-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); } .footer-tag { padding: 0 7px; font-family: var(--font-mono); font-size: 10px; line-height: 17px; color: var(--accent-ink); background: var(--accent-grad); border-radius: var(--radius-pill); } .footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-5); padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); } .to-top { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 12px; font-size: 13px; color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--radius-pill); transition: color var(--fast), border-color var(--fast); } .to-top:hover { color: var(--ink); border-color: var(--line-strong); } .to-top:hover .arrow { animation: hop-up 0.6s var(--bounce); } /* ================================ Kopfbereich ================================ */ .hero { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 160px) 0 calc(var(--section) / 2); background: radial-gradient(70% 90% at 0% 0%, var(--glow-start), transparent 60%), radial-gradient(60% 80% at 100% 0%, var(--glow-end), transparent 65%); } /* Feine Rasterlinien: die Ordnung unter dem Ganzen. */ .hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 30% 0%, #fff, transparent 75%); mask-image: radial-gradient(80% 70% at 30% 0%, #fff, transparent 75%); } /* Lichtkegel, der dem Zeiger folgt. script.js setzt --mx und --my. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 30%), var(--spot), transparent 70%); transition: opacity var(--slow) var(--ease); } .hero.is-lit::after { opacity: 1; } .hero > .frame { position: relative; z-index: 1; } /* Das Hauszeichen als Umriss im freien Feld rechts oben. Es schwebt. */ .hero-echo { position: absolute; top: clamp(96px, 10vw, 150px); right: calc(var(--gutter) - 0.04em); z-index: 0; font-family: var(--font-display); font-size: clamp(160px, 18vw, 300px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14); pointer-events: none; user-select: none; animation: float 9s ease-in-out infinite; } .hero-title { margin: var(--s-5) 0 var(--s-6); font-size: var(--t-h1); line-height: 1.02; } .hero-title > span { display: block; } .lead { max-width: 36em; font-size: var(--t-lead); line-height: 1.55; color: var(--ink-dim); } .hero .actions { margin-top: var(--s-7); } /* Pfad ueber dem Titel der Unterseiten. */ .crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); font-size: 14px; color: var(--ink-faint); } .crumbs a { color: var(--ink-dim); text-decoration: none; } .crumbs a:hover { color: var(--ink); } /* Hinweis ueber dem Titel: was gerade neu ist. */ .announce { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); padding: 5px 16px 5px 5px; font-size: 14px; color: var(--ink-dim); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-0) 70%, transparent); transition: border-color var(--fast), color var(--fast), transform var(--mid) var(--bounce); } .announce:hover { color: var(--ink); border-color: var(--ink-dim); transform: translateY(-2px); } .announce:hover .arrow { transform: translateX(4px); } /* Ein Ring, der vom Etikett aus pulsiert. */ .announce .chip-hot::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--accent); border-radius: inherit; animation: pulse 2.4s var(--ease) infinite; } /* Hauszahlen: nur, was sich belegen laesst. script.js zaehlt sie hoch. */ .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: clamp(72px, 9vw, 128px); } .fact { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding-top: var(--s-4); border-top: 1px solid var(--line); } .fact dd { font-family: var(--font-display); font-size: clamp(34px, 3.2vw, 48px); line-height: 1.15; font-variant-numeric: tabular-nums; } .fact dt { margin-top: var(--s-1); font-size: var(--t-small); color: var(--ink-dim); } /* ================================ Startseite ================================ */ .units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } .unit-head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; margin-bottom: var(--s-3); } /* Logo in einer runden Kachel. Die PNG-Logos liegen auf Schwarz, lighten laesst das Schwarz in der Kachelfarbe verschwinden. */ .unit-logo { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--mid) var(--bounce), background-color var(--mid); } .unit:hover .unit-logo { transform: rotate(-6deg) scale(1.08); background: var(--surface-2); } .unit-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); mix-blend-mode: lighten; } .unit-logo svg { width: 30px; height: 30px; color: var(--accent); } /* HT: Studios traegt auch auf der Startseite schon sein Blau. */ .unit-logo.is-studios svg { color: #3f86ff; } .unit-cat { padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--radius-pill); } .unit h3 { font-size: var(--t-h3); } .unit p { color: var(--ink-dim); } .unit .unit-tags { font-size: 14px; color: var(--ink-faint); } .unit-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: auto; padding-top: var(--s-4); } /* Grundsaetze: nummeriert, mit Trennlinien. */ .principles { list-style: none; } .principle { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line); } .principle:last-child { border-bottom: 1px solid var(--line); } .principle-no { display: grid; place-items: center; width: 36px; height: 36px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); background: var(--accent-grad); border-radius: 50%; transition: transform var(--mid) var(--bounce); } .principle:hover .principle-no { transform: scale(1.12) rotate(-8deg); } .principle h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); } .principle p { color: var(--ink-dim); } /* Arbeitsweise: vier Stationen mit grosser Ziffer. */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); list-style: none; } .step-no { font-family: var(--font-display); font-size: 44px; line-height: 1; } .step .step-by { margin-top: auto; padding-top: var(--s-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); } /* Aktuelles als Liste: Datum, Meldung, Pfeil. Die Zeile leuchtet auf. Die Liste ragt um den Innenabstand der Zeilen ueber den Rand, damit die Schrift buendig mit den Ueberschriften steht. */ .post-list { --row-pad: var(--s-5); margin-inline: calc(var(--row-pad) * -1); list-style: none; } .post-row { position: relative; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-6); align-items: start; padding: var(--s-5) var(--row-pad); border-radius: var(--radius); transition: background-color var(--mid) var(--ease); } /* Trennlinie zwischen den Zeilen, verschwindet an der hellen Zeile. */ .post-row + .post-row::after { content: ''; position: absolute; top: 0; left: var(--row-pad); right: var(--row-pad); height: 1px; background: var(--line); transition: opacity var(--mid); } /* Streifen aus dem Feld am linken Rand. */ .post-row::before { content: ''; position: absolute; top: 22%; bottom: 22%; left: 0; width: 3px; border-radius: 3px; background: var(--accent-grad); transform: scaleY(0); transition: transform var(--mid) var(--bounce); } .post-row:hover { background-color: var(--surface-0); } .post-row:hover::before { transform: none; } .post-row:hover::after, .post-row:hover + .post-row::after { opacity: 0; } .post-meta { display: flex; flex-direction: column; gap: var(--s-1); padding-top: 6px; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); } .post-row h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); } .post-row h3 a { text-decoration: none; } /* Unsichtbare Flaeche: die ganze Zeile fuehrt zum Link. */ .post-row h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .post-row p { color: var(--ink-dim); } .post-row > .arrow { align-self: center; font-size: 22px; color: var(--ink-dim); } .post-row:hover > .arrow { color: var(--ink); } /* ================================ HT: Studios ================================ */ /* ---------- Spiele ---------- */ .games { display: grid; gap: var(--s-8); } .game { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: start; } /* Kachel, die sich zum Zeiger neigt. script.js setzt --tx, --ty, --gx, --gy. */ .game-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform 0.5s var(--ease), box-shadow var(--mid) var(--ease); } .game-art:hover { box-shadow: 0 32px 64px -32px rgba(var(--shade), 0.9); } /* Lichtpunkt, der mit dem Zeiger wandert. */ .game-art::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.16), transparent 70%); transition: opacity var(--mid) var(--ease); } .game-art:hover::before { opacity: 1; } .game-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-grad); } .game-art img { width: 72%; height: 72%; object-fit: contain; transition: transform var(--slow) var(--bounce); } .game-art img[src$='.png'] { width: 86%; height: 86%; mix-blend-mode: lighten; } .game:hover .game-art img { transform: scale(1.05); } .game-body { display: flex; flex-direction: column; gap: var(--s-4); } .game-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .game h3 { font-size: clamp(32px, 2vw + 20px, 48px); } .game .tagline { font-size: var(--t-lead); color: var(--ink); } .game p { color: var(--ink-dim); } .game .specs { margin: var(--s-2) 0 var(--s-3); } .slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: var(--s-8); } .slot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5); color: var(--ink-faint); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); transition: border-color var(--mid), color var(--mid), transform var(--mid) var(--bounce); } .slot:hover { color: var(--ink-dim); border-color: var(--accent); transform: scale(1.01); } .slot b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h3); color: var(--ink-dim); } /* ---------- Medaillen ---------- */ .medals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } .medal-list { padding: var(--s-6); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius); } .medal-list h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-4); font-size: var(--t-h3); border-bottom: 1px solid var(--line-strong); } .medal-list h3 span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); } .medal-list ol { list-style: none; } .medal { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } .medal:last-child { border-bottom: 0; } .medal::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rank); box-shadow: 0 0 10px -2px var(--rank); transition: transform var(--mid) var(--bounce), box-shadow var(--mid); } .medal:hover::before { transform: scale(1.6); box-shadow: 0 0 16px 0 var(--rank); } .medal[data-rank='bronze'] { --rank: var(--rank-bronze); } .medal[data-rank='silber'] { --rank: var(--rank-silber); } .medal[data-rank='gold'] { --rank: var(--rank-gold); } .medal[data-rank='schwarz'] { --rank: var(--rank-schwarz); } .medal b { font-weight: 600; } .medal small { grid-column: 2; font-size: 14px; color: var(--ink-dim); } .medal .points { grid-column: 3; grid-row: 1; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); list-style: none; font-size: 14px; color: var(--ink-dim); } .legend li { display: inline-flex; align-items: center; gap: var(--s-2); } .legend li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rank); } /* ---------- Meilensteine ---------- */ .timeline { list-style: none; } .milestone { position: relative; padding: 0 0 var(--s-6) var(--s-6); } .milestone:last-child { padding-bottom: 0; } /* Punkt je Eintrag, dazu eine Linie bis zum naechsten. */ .milestone::before { content: ''; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); transition: transform var(--mid) var(--bounce); } .milestone:hover::before { transform: scale(1.35); } .milestone:not(:last-child)::after { content: ''; position: absolute; top: 19px; bottom: 4px; left: 5px; width: 1px; background: var(--line-strong); } .milestone.is-hot::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px -2px var(--accent); } .milestone time, .milestone .when { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); } .milestone h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); } .milestone p { color: var(--ink-dim); } /* ================================ Textseiten ================================ */ .page-head { padding: clamp(64px, 9vw, 120px) 0 var(--s-7); } .page-head h1 { margin-top: var(--s-4); font-size: clamp(40px, 5vw, 72px); } .legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .toc { position: sticky; top: calc(var(--bar-height) + var(--s-5)); display: grid; gap: 2px; list-style: none; } .toc a { display: block; padding: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--ink-dim); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--fast), color var(--fast); } .toc a:hover { color: var(--ink); background: var(--surface-0); } .prose { max-width: 44em; } .prose h2 { margin: var(--s-8) 0 var(--s-4); font-size: clamp(26px, 1.4vw + 18px, 36px); } .prose h2:first-of-type { margin-top: var(--s-7); } .prose p, .prose ul { color: var(--ink-dim); } .prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s-4); } .prose ul { padding-left: 1.2em; } .prose li + li { margin-top: var(--s-1); } .prose b { color: var(--ink); font-weight: 600; } .prose code { font-family: var(--font-mono); font-size: 0.88em; color: var(--ink); } .callout { padding: var(--s-4) var(--s-5); color: var(--ink-dim); background: var(--surface-0); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); } .callout b { color: var(--ink); } .stamp { margin-top: var(--s-7); font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .lost { min-height: 64vh; } .lost-code { margin: var(--s-4) 0 var(--s-2); font-family: var(--font-display); font-size: clamp(96px, 16vw, 220px); line-height: 1; } .lost .lead { margin-top: var(--s-4); } .lost-path { display: inline-block; margin-top: var(--s-4); padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-wrap: anywhere; } .lost-path:empty { display: none; } /* ================================ Bewegung ================================ */ /* script.js setzt .reveal nur an Bausteine unterhalb des Fensters und nimmt die Klasse nach dem Auftritt wieder weg. */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--slow) var(--ease) var(--delay, 0ms), transform var(--slow) var(--ease) var(--delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } @keyframes fn-hop { 0% { transform: none; } 35% { transform: translateY(-0.2em) rotate(-5deg); } 70% { transform: translateY(0.03em) rotate(2deg); } 100% { transform: none; } } @keyframes hop-up { 0%, 100% { transform: none; } 40% { transform: translateY(-5px); } } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-2deg); } } @keyframes pulse { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45, 1.8); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } } /* ================================ Schmale Fenster ================================ */ @media (max-width: 1080px) { .units { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .split, .medals { grid-template-columns: minmax(0, 1fr); } .features-3, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-echo { display: none; } .footer-top { grid-template-columns: minmax(0, 1fr); } } /* Der Rueckweg zum Haus rueckt ins Menue, bevor es eng wird. */ @media (max-width: 1180px) { .back-link { display: none; } } /* Ab hier klappt die Navigation in ein Menue. */ @media (max-width: 980px) { .masthead-inner { grid-template-columns: auto minmax(0, 1fr); } .menu-btn { display: inline-grid; } .nav { position: absolute; top: calc(100% + 8px); left: var(--gutter); right: var(--gutter); display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s-3); background: var(--surface-0); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -20px rgba(var(--shade), 0.8); } .masthead[data-open='true'] .nav { display: flex; animation: drop-in 0.35s var(--bounce); } .nav a { padding: var(--s-3) var(--s-4); font-size: 19px; color: var(--ink); border-radius: var(--radius); } .nav a[aria-current='page'] { color: var(--accent-text); box-shadow: none; } .nav .nav-back { display: flex; align-items: center; gap: var(--s-2); font-size: 16px; color: var(--ink-dim); } .nav .nav-arcade { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-3); padding: var(--s-4); font-size: 17px; font-weight: 600; color: var(--accent-ink); background: var(--accent-grad); } .game { grid-template-columns: minmax(0, 1fr); } .game-art { max-width: 320px; } } @keyframes drop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } } /* ================================ Ohne JavaScript ================================ Ohne Skript gibt es kein Menue zum Aufklappen: die Navigation steht als Zeile unter dem Zeichen. Gruppen im Fuss sind offen, Knoepfe, die nur mit Skript etwas tun, verschwinden. */ html:not(.js) .footer-sub { grid-template-rows: 1fr; visibility: visible; } html:not(.js) .footer-sub li { opacity: 1; transform: none; } html:not(.js) .footer-toggle { pointer-events: none; } html:not(.js) .footer-toggle .chev, html:not(.js) .to-top { display: none; } @media (max-width: 980px) { html:not(.js) .menu-btn { display: none; } /* Zeichen und Arcade-Knopf in der ersten Zeile, Navigation darunter. */ html:not(.js) .masthead-end { grid-column: 2; grid-row: 1; } html:not(.js) .nav { position: static; grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: row; flex-wrap: wrap; justify-self: start; margin-bottom: var(--s-3); padding: 4px; border-radius: var(--radius-lg); box-shadow: none; } html:not(.js) .nav a { padding: 6px 12px; font-size: 15px; } html:not(.js) .nav .nav-arcade, html:not(.js) .nav .nav-back { display: none; } } @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .features, .features-3, .steps, .slots { grid-template-columns: minmax(0, 1fr); } .specs { grid-template-columns: minmax(0, 1fr); } .post-list { --row-pad: var(--s-3); } .post-row { grid-template-columns: minmax(0, 1fr); } .post-meta { flex-direction: row; gap: var(--s-4); padding-top: 0; } .post-row > .arrow { display: none; } .legal { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .band-mark { opacity: 0.6; } } @media (max-width: 520px) { .masthead-cta { display: none; } /* In der schmalen Spalte bleibt nur Name und Pfeil. */ .footer-toggle .footer-tag { display: none; } .band .btn { width: 100%; } .unit, .feature, .step, .medal-list { padding: var(--s-5); } .unit::before, .feature::before, .step::before { left: var(--s-5); } }