/* ==========================================================================
THITRONIK Campus — Wissenscheck
Tokens und Interaktionsmuster übernommen aus den bestehenden Quizzen
(Fehmarn/Vejrø), damit das neue System sichtbar dieselbe Familie bleibt.
Light Mode ist verbindlich: der Campus findet in hellen Räumen und
draußen am Fahrzeug statt (DESIGN_SYSTEM.md, Abschnitt 7).
========================================================================== */
:root {
--th-navy: #1D3661;
--th-navy-deep: #0A2747;
--th-blue: #3BA9D3;
--th-lime: #AFCA05;
/* Zwei eigene Tokens für Text auf hellem Grund. Die Markenfarben selbst
sind dafür zu hell: Cyan erreicht auf Weiß 2,69:1 und Lime noch weniger.
Für Flächen, Ränder und Akzente weiterhin --th-blue und --th-lime. */
--th-blue-text: #1B7699; /* 5,15:1 auf Weiß */
--th-lime-text: #5F7000; /* 5,47:1 auf Weiß, 5,02:1 auf --success-bg */
--th-red: #CE132D;
/* Drei Werte, die vorher roh an mehreren Stellen standen. */
--th-navy-hover: #172C50; /* Hover der Navy-Knöpfe */
--th-red-deep: #A81024; /* Rot gedrückt, Rot-Text auf hellem Rot */
--th-lime-line: #8FA600; /* Rand richtiger Antworten */
/* Antwortpalette A-H. A-D bleiben die vier THITRONIK-Markenfarben.
E-H greifen ausschließlich vorhandene Navy-, Cyan- und Grautöne auf:
zusätzliche Antworten sollen wie Teil derselben Oberfläche aussehen,
nicht wie neue Signalzustände. Die Buchstaben bleiben die primäre,
farbunabhängige Kennzeichnung. Acht statt sieben seit 1.36: Vier
richtige und vier falsche Antworten füllen das zweispaltige Raster
ohne leere Zelle.
Sichtbar wird von der Palette nur Rahmen und Schatten beim Hover mit
Maus (siehe `.answer:hover` in der hover-Medienabfrage) — auf dem
Tablet am Fahrzeug also nichts. Textfarben je Buchstabe gab es bis
1.46 dazu, gelesen hat sie keine Regel; wer die Palette wieder auf
Flächen legt, legt die Textfarben neu an und prüft den Kontrast. */
--answer-a: #1D3661;
--answer-a-rgb: 29, 54, 97;
--answer-b: #3BA9D3;
--answer-b-rgb: 59, 169, 211;
--answer-c: #AFCA05;
--answer-c-rgb: 175, 202, 5;
--answer-d: #CE132D;
--answer-d-rgb: 206, 19, 45;
--answer-e: #0A2747;
--answer-e-rgb: 10, 39, 71;
--answer-f: #1B7699;
--answer-f-rgb: 27, 118, 153;
--answer-g: #5E6672;
--answer-g-rgb: 94, 102, 114;
--answer-h: #8A94A3;
--answer-h-rgb: 138, 148, 163;
--th-white: #FFFFFF;
--th-soft: #F0F0F0;
--th-page: #EAF1F7;
--th-ink: #111111;
--th-muted: #5E6672;
--th-line: #DDE2E7;
--th-line-strong: #B7C2CF;
--success-bg: #F3F8DD;
--success-line: #A9BB3A;
--error-bg: #FCEDEF;
--error-line: #E4A2AA;
--info-bg: #EDF7FB;
--shadow-sm: 0 6px 20px rgba(10, 39, 71, .07);
--shadow-md: 0 24px 64px rgba(10, 39, 71, .12);
/* Schriftstufen. Bis 1.55 standen 68 verschiedene Größen im Stylesheet,
13 davon zwischen .78 und .98rem, und auf einem Bildschirm bis zu 13
nebeneinander — Stufen von 0,2 px, die niemand als Rang liest.
Die Werte sind Layout-Einheiten; sichtbar wird davon --ui-scale. Bei der
Handy- und Tablet-Stufe .8 ergeben sie 11,2 · 12 · 12,8 · 14,4 · 16 ·
22,4 · 28,8 px. Daraus die beiden Untergrenzen: --text-sm ist die
kleinste Größe für Lesetext (12 px), --text-label nur für kurze
Beschriftungen in Versalien, Chips und Zähler (11,2 px).
Fließende Überschriften (clamp), die Beschriftungen auf der Karte (cqw)
und Zeichen in festen Kreisen — Initialen, Ziffern, Symbole — stehen
bewusst außerhalb: Sie folgen ihrer Fläche, nicht der Skala. */
--text-label: .875rem;
--text-sm: .9375rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.25rem;
--text-xl: 1.75rem;
--text-2xl: 2.25rem;
--radius-xl: 24px;
--radius-lg: 16px; /* bis 1.60: 18 — das Design-System nennt 16 */
--radius-md: 12px;
--radius-sm: 8px;
--duration-press: 140ms;
--duration-fast: 160ms;
--duration-normal: 220ms;
--ease-out: cubic-bezier(.23, 1, .32, 1);
/* Der Campus nutzt auf Arbeitsplatz-Monitoren die verfügbare Breite. Eine
feste 1200-px-Kappe ließ bei WQHD, 4K und Browser-Zoom große Leerflächen
entstehen. Lesbarkeitsgrenzen sitzen deshalb an den jeweiligen Inhalten. */
/* Die Oberfläche entspricht visuell 80 % Browser-Zoom. Die größere
Inhaltskappe gleicht die Skalierung aus, damit breite Fenster weiterhin
vollständig genutzt werden. Trefferflächen bleiben real mindestens 44 px.
Der Wert ist die Grundstellung für Telefon und Tablet — die Größe, auf
die alles darunter ausgemessen wurde. Auf Arbeitsplatz-Monitoren wächst
er mit; die Stufen stehen gleich unter :root. */
--ui-scale: .8;
--content: 2400px;
--tap: 55px;
/* Die volle Fensterhöhe, ausgedrückt in Layout-Einheiten.
`zoom` verschiebt beides gegeneinander: 100dvh liefert die Fensterhöhe
in Layout-Einheiten, sichtbar sind davon aber nur `--ui-scale` davon
(nachgemessen bei 1180 px Fensterhöhe: 944 Bildschirmpixel bei .8). Wer
den Schirm füllen will, rechnet also 100 / --ui-scale.
Bis September 2026 stand an den drei Stellen, die das brauchen, die
ausgerechnete 125 — richtig, solange die Skalierung fest bei .8 lag.
Seit sie auf großen Monitoren mitwächst, wäre 125dvh dort ein Viertel
Fensterhöhe zu viel und damit eine Bildlaufleiste, die nichts
verbirgt. */
--fenster-hoch: calc(100dvh / var(--ui-scale));
--fenster-hoch-vh: calc(100vh / var(--ui-scale));
/* Ebenen der Archipelkarte, von unten nach oben. Benannt statt gezaehlt:
`z-index: 3` sagt nicht, ob es ueber oder unter der Route liegen soll,
und beim naechsten Element raet man wieder. Die Luecken zwischen den
Zehnern sind Platz fuer Nachtraege ohne Umnummerierung. */
--ebene-meer: 0;
--ebene-deko: 10;
--ebene-route: 20;
--ebene-insel: 30;
--ebene-wegpunkt: 40;
--ebene-karte: 50;
--ebene-aktiv: 60;
--ebene-kopf: 100;
}
/* Die Oberfläche wächst auf Arbeitsplatz-Monitoren mit.
Warum überhaupt: Die 80 % sind für das Telefon in der Messehalle gesetzt —
dort ist der Schirm klein und nah, und mehr Inhalt je Bildschirm ist genau
richtig. Auf einem 27-Zoll-Monitor in Armlänge kehrt sich das um: Die
Grundschrift steht dort real bei 12,8 px, und der Campus wirkt wie eine
Seite, die jemand herausgezoomt hat.
Warum Stufen und keine gleitende Formel: Eine unbenannte Zahl lässt sich
in CSS nicht aus Längen rechnen — `calc(100vw / 1px)` gibt es nicht. Eine
gleitende Skalierung wäre also nur über Javascript zu haben, und dann
stünde die Größe der Oberfläche in zwei Quellen.
Warum erst ab 1500 px: Darunter liegen Telefon und Tablet, und das ist die
Größe, gegen die alles darunter ausgemessen wurde — Expeditionskarte,
Bühnen, Trefferflächen. Ein iPad quer misst 1180 px, ein iPad Pro quer
1366 px; beide bleiben damit bei .8.
Achtung bei künftigen Änderungen: Medienabfragen sehen den Viewport, das
Layout rechnet mit Viewport / --ui-scale. Bei .8 und 1500 px Viewport sind
das 1875 Layout-Pixel, bei 1.0 und 1900 px genau 1900 — die zur Verfügung
stehende Layoutbreite springt an jeder Stufe also nach UNTEN, obwohl das
Fenster breiter wird. Wer hier eine Stufe ergänzt, misst nach, ob an der
Kante etwas umbricht. */
@media (min-width: 1500px) { :root { --ui-scale: .9; } }
@media (min-width: 1900px) { :root { --ui-scale: 1; } }
* { box-sizing: border-box; }
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
html {
min-height: 100%;
-webkit-text-size-adjust: 100%;
}
/* Inter liegt seit 1.56 als Webschrift bei.
Vorher stand Inter nur in der Kette und kam aus dem System — also auf dem
PC, auf dem jemand sie installiert hatte, und auf keinem Telefon. Am
Schreibtisch sah der Campus aus wie im Design-System, in der Messehalle
liefen Roboto und San Francisco mit anderen Laufweiten: Jeder Umbruch,
jede Kürzung und jede Kartenhöhe, die am PC gemessen wurde, stimmte auf
dem Zielgerät nur ungefähr.
Die frühere Begründung gegen eine Datei waren rund 100 KB im Hallen-WLAN.
Die variable Latin-Teilmenge (@fontsource-variable/inter 5.3.0, alle
Strichstärken in einer Datei) hat 48 KB, wird vorgeladen und steht unter
/assets/ ein Jahr im Cache. Sie deckt Deutsch, ø/Ø und die Satzzeichen ab;
Zeichen außerhalb des unicode-range (→, ≠, ✓) kommen weiter aus der
Systemschrift. Absichtlich kein local(): Eine installierte Inter 3 läuft
anders als die 4 — genau die Abweichung, die hier wegfallen soll.
Lizenz SIL OFL 1.1, liegt daneben als fonts/OFL.txt. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/inter-latin-wght.woff2?v=1.68.1") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* Schriftkette bewusst ohne Panton und ohne schmallaufende Fallbacks.
Panton liegt in keinem Paket bei — die Kette fiel deshalb auf dem iPhone auf
"Arial Narrow" und auf Android auf "Roboto Condensed" durch: ausgerechnet auf
den Geräten, auf denen der Campus stattfindet, lief das Quiz kondensiert.
Hinter Inter folgt die Systemschrift, solange die Datei noch lädt. */
body {
min-height: 100%;
margin: 0;
color: var(--th-ink);
background:
radial-gradient(circle at 88% 6%, rgba(59, 169, 211, .16), transparent 26rem),
linear-gradient(rgba(29, 54, 97, .025) 1px, transparent 1px),
linear-gradient(90deg, rgba(29, 54, 97, .025) 1px, transparent 1px),
linear-gradient(180deg, #E7F0F7 0%, #F7F8FA 46%, #EEF1F4 100%);
background-repeat: no-repeat, repeat, repeat, no-repeat;
background-size: auto, 32px 32px, 32px 32px, auto;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
zoom: var(--ui-scale);
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
-webkit-tap-highlight-color: transparent;
cursor: pointer;
touch-action: manipulation;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
/* Der Ring ist Navy, nicht Cyan. Das Design-System nennt Cyan und erlaubt
Abweichung, "wo Cyan verschwindet" — auf Weiß tut es das messbar: #3BA9D3
erreicht gegen #FFFFFF nur 2,69:1 und verfehlt die 3:1 aus WCAG 2.4.11.
Navy liegt bei 12:1. Auf der dunklen Ergebniskarte kehrt sich das um. */
:focus-visible { outline: 3px solid var(--th-navy); outline-offset: 3px; }
.score-card :focus-visible { outline-color: var(--th-white); }
h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
h1, h2, h3 { color: var(--th-navy); line-height: 1.15; }
h1 { font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.5rem); letter-spacing: -.025em; margin-bottom: 14px; }
h2 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.5rem); letter-spacing: -.015em; margin-bottom: 12px; }
.skip-link {
position: fixed;
z-index: 1500;
left: 16px;
top: 12px;
transform: translateY(-200%);
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--th-navy);
color: var(--th-white);
font-weight: 800;
text-decoration: none;
}
.skip-link:focus { transform: none; }
/* dvh statt vh: mit 100vh springt das Layout auf dem iPhone jedes Mal, wenn
Safari die Adressleiste ein- und ausblendet. Die Seitenränder halten
Abstand zu den Displayecken — index.html setzt viewport-fit=cover, ohne
env() läuft der Inhalt im Querformat sonst unter die Rundung. */
.shell {
display: flex;
flex-direction: column;
min-height: var(--fenster-hoch-vh);
min-height: var(--fenster-hoch);
width: min(calc(100% - clamp(20px, 3vw, 56px)), var(--content));
margin: 0 auto;
padding: 16px 0 28px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* ---------------------------------------------------------------- Kopf --- */
.masthead {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 16px;
border: 1px solid rgba(183, 194, 207, .72);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .9);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-sm);
}
.brand {
display: flex;
grid-column: 1;
grid-row: 1;
align-items: center;
justify-self: start;
gap: 12px;
min-width: 0;
/* Ohne diese Grenze nimmt sich der Block bei `justify-self: start` seine
Inhaltsbreite und laeuft ueber die Spalte hinaus — auf HIDDENSEE stiess
der lange Titel bei 1440 px an den ersten Werkzeugknopf. Sichtbar wurde
das erst, als die Werkzeugzeile mit THI auf drei Knoepfe wuchs. Mit der
Grenze greift die Kuerzung mit Auslassungspunkten, die an
`.brand-copy strong` schon steht. */
max-width: 100%;
}
.brand-home {
display: flex;
flex: 0 0 auto;
align-items: center;
min-height: var(--tap);
border-radius: var(--radius-sm);
text-decoration: none;
}
.brand-home:focus-visible {
outline: 3px solid var(--th-navy);
outline-offset: 4px;
}
.brand-home:active .brand-logo { transform: scale(.98); }
/* Die Wortmarke als SVG von thitronik.de (1,8 KB). Das PNG mit der Zeile
„Alarmtechnik made in Germany“ wog 88 KB und zeigte die Zeile bei
150–210 px Breite ohnehin nur rund 5 px hoch. Es bleibt für den Druck
der Arbeitskarte und als Quelle der App-Icons (tools/app-icons.js). */
.brand-logo {
width: clamp(150px, 20vw, 210px);
height: auto;
flex: 0 0 auto;
transition: opacity var(--duration-fast) ease, transform var(--duration-press) var(--ease-out);
}
.brand-copy { min-width: 0; padding-left: 14px; border-left: 1px solid var(--th-line); }
.brand-copy small {
display: block;
color: var(--th-blue-text);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
/* Zwei Zeilen statt einer Kürzung. Einzeilig mit Auslassungspunkten stand
bei 1024 px von „Produktneuheiten: Zugang & Wasserschutz" nur „…: Z…"
da (178 von 342 px), bei 1180 px (iPad quer) 268 von 342 px. Erst ab der
dritten Zeile wird gekürzt. */
.brand-copy strong {
display: -webkit-box;
overflow: hidden;
color: var(--th-navy);
font-size: var(--text-base);
line-height: 1.2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
/* Auf dem Inselstart steht der Name schon in der Teilnehmerkarte, mit
„Angaben ändern" daneben. Der Chip in der Kopfzeile sagte ihn ein zweites
Mal. Auf dem Telefon ist die ganze Chipzeile dort ohnehin ausgeblendet. */
body.ist-start #chip-participant { display: none; }
.masthead-meta {
display: flex;
grid-column: 3;
grid-row: 1;
flex-wrap: wrap;
justify-self: end;
gap: 8px;
}
.masthead-tools {
display: flex;
grid-column: 2;
grid-row: 1;
align-items: center;
justify-self: center;
gap: 10px;
margin-left: 0;
}
.masthead-tool {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: var(--tap);
padding: 6px 14px 6px 8px;
border: 1px solid var(--th-line-strong);
border-radius: var(--radius-md);
background: var(--th-white);
color: var(--th-navy);
box-shadow: 0 4px 14px rgba(10, 39, 71, .08);
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: border-color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
transform var(--duration-press) var(--ease-out);
}
.masthead-tool[hidden] { display: none; }
.masthead-tool:hover { border-color: var(--th-blue); background: var(--info-bg); }
.masthead-tool:active { transform: scale(.98); }
.masthead-tool .ta-icon {
display: grid;
flex: 0 0 38px;
width: 38px;
height: 38px;
place-items: center;
border-radius: var(--radius-md);
background: var(--info-bg);
color: var(--th-blue-text);
}
.masthead-tool .ta-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.masthead-tool .ta-text { display: block; min-width: 0; }
.masthead-tool .ta-title { color: inherit; font-size: var(--text-sm); line-height: 1.15; }
.masthead-tool.is-ready {
border-color: var(--success-line);
background: var(--success-bg);
}
.masthead-tool.is-ready .ta-icon { background: var(--th-white); color: var(--th-lime-text); }
.masthead-progress {
grid-column: 3;
grid-row: 1;
justify-self: end;
width: min(360px, 42vw);
margin-left: 0;
}
.campus-progress-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
margin-bottom: 3px;
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 700;
}
/* Der Prozentwert bleibt als Skala zur Fortschrittsleiste, tritt aber
hinter die Zahl zurueck, die jemand tatsaechlich vorliest. */
.campus-progress-head small {
color: var(--th-muted);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.campus-progress-copy {
display: block;
margin-bottom: 7px;
color: var(--th-navy);
font-size: var(--text-base);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.campus-progress-track {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #E4EAF0;
}
.campus-progress-track span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--th-blue), #279EC9);
transition: width 280ms var(--ease-out);
}
.chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 5px 11px;
border: 1px solid var(--th-line-strong);
border-radius: 999px;
background: var(--th-white);
color: var(--th-navy);
font-size: var(--text-label);
font-weight: 700;
}
.chip-quiet { color: var(--th-muted); font-weight: 600; }
/* ------------------------------------- Karten-Kopf unterhalb Desktopbreite ---
Hamburger, Avatar und Kurzfortschritt existieren nur auf der Uebersicht
(body.ist-karte, gesetzt in show()) und dort erst unterhalb der
Desktopbreite. Hier stehen nur die Grundformen; eingeblendet wird in den
Medienabfragen der Karte weiter unten. */
.menue-knopf {
display: none;
place-items: center;
width: var(--tap);
height: var(--tap);
padding: 0;
border: 1px solid var(--th-line-strong);
border-radius: var(--radius-md);
background: var(--th-white);
color: var(--th-navy);
box-shadow: 0 4px 14px rgba(10, 39, 71, .06);
}
.menue-knopf svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.kopf-avatar {
display: none;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--th-line-strong);
border-radius: 50%;
background: var(--info-bg);
color: var(--th-blue-text);
font-size: .95rem;
font-weight: 800;
letter-spacing: .02em;
}
/* Profilfoto im Avatar (seit 1.68). Vorher erschien das gespeicherte Foto
nirgends außer in der Vorschau des Formulars. */
.kopf-avatar.mit-foto { overflow: hidden; }
.kopf-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.kopf-avatar svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.campus-progress-kompakt {
display: none;
align-items: baseline;
justify-content: flex-end;
gap: 10px;
margin-bottom: 6px;
color: var(--th-navy);
font-variant-numeric: tabular-nums;
}
.campus-progress-kompakt strong { font-size: var(--text-base); line-height: 1.1; }
.campus-progress-kompakt small {
padding-left: 10px;
border-left: 1px solid var(--th-line);
color: var(--th-muted);
font-size: var(--text-sm);
}
/* Das gemeinsame Symbolfeld der Werkzeuge in Menue und Tablet-Leiste —
dasselbe Muster wie .ta-icon in der Kopfzeile. */
.ka-icon {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--info-bg);
color: var(--th-blue-text);
}
.ka-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --------------------------------------------------------------- Schirm --- */
main { flex: 1 0 auto; }
/* clip statt hidden, mit hidden als Rückfall für alte Browser: beide
beschneiden die runden Ecken gleich, aber hidden macht die Karte zum
Scroll-Container und setzt damit die klebende Aktionsleiste außer Kraft. */
.screen {
overflow: hidden;
overflow: clip;
border: 1px solid var(--th-line);
border-radius: var(--radius-xl);
background: var(--th-white);
box-shadow: var(--shadow-md);
/* backwards, nicht both: Mit `both` bliebe nach der Einblendung
`transform: matrix(1, 0, 0, 1, 0, 0)` am Bildschirm stehen. Ein
transformiertes Element ist der Bezugsrahmen für `position: fixed`
darin — die Handy-Navigation hing dann am Ende der Übersicht statt
am unteren Fensterrand (gemessen bei 390 × 844: 991–1052 px). */
animation: enter var(--duration-normal) var(--ease-out) backwards;
}
.screen-narrow { padding: clamp(24px, 5vw, 48px); }
/* --------------------------------------------------------- Onboarding --- */
/* Die Profileinrichtung ist eine eigene Eingangstür. Kopf und reguläre
Fußzeile bleiben hier aus, damit Logo und Rechtslinks genau einmal und an
der Stelle stehen, an der sie vor dem ersten Campus-Zugriff gebraucht
werden. */
body.ist-onboarding .shell {
width: min(calc(100% - 96px), 1440px);
padding-top: 48px;
padding-bottom: 48px;
}
body.ist-onboarding .masthead,
body.ist-onboarding > .shell > .colophon { display: none; }
body.ist-onboarding main { display: flex; }
.onboarding {
width: 100%;
/* Die Fensterhöhe, abzüglich zweier Dinge:
96px sind die 48px Polster oben und unten aus `body.ist-onboarding
.shell`. 2px sind der eigene Rand aus `.screen` — und der ist der
eigentliche Grund für diese Zeile: `.onboarding-layout` übernimmt den
Wert hier per `min-height: inherit` und zieht den Rand nicht ab. Der
Abschnitt wird dadurch zwei Pixel höher als das, was er ausfüllen soll.
Solange die Skalierung fest bei .8 lag, fiel das nicht auf: Die Shell
war dort höher als ihr Inhalt, und main streckte sich ohnehin. Bei 1.0
auf einem FHD-Monitor gibt es diesen Spielraum nicht mehr — gemessen
blieben 1,33 Bildschirmpixel Überlauf und damit eine Bildlaufleiste,
hinter der nichts steht.
--fenster-hoch statt 100dvh, damit die Rechnung dieselbe Größe meint
wie die der Shell; siehe :root. */
min-height: calc(var(--fenster-hoch) - 96px - 2px);
border-radius: var(--radius-lg);
}
.onboarding-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: inherit;
}
.onboarding-hero {
position: relative;
isolation: isolate;
min-height: 650px;
overflow: hidden;
background: var(--th-navy-deep);
}
.onboarding-picture,
.onboarding-picture img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.onboarding-picture img {
object-fit: cover;
object-position: 52% 50%;
}
.onboarding-hero::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 25, 55, .7) 0%, rgba(7, 29, 70, .16) 44%, rgba(4, 22, 49, .86) 100%),
linear-gradient(90deg, rgba(10, 39, 71, .2), transparent 66%);
pointer-events: none;
}
.onboarding-hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
padding: clamp(28px, 4vw, 48px);
}
.onboarding-brand {
display: flex;
align-items: center;
gap: 18px;
}
.onboarding-logo-wrap {
display: flex;
width: min(230px, 50%);
padding: 9px 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .94);
box-shadow: 0 8px 24px rgba(4, 22, 49, .18);
}
.onboarding-logo-wrap img { width: 100%; height: auto; }
.onboarding-campus {
padding-left: 18px;
border-left: 1px solid rgba(255, 255, 255, .5);
color: var(--th-white);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .08em;
}
.onboarding-welcome { max-width: 36rem; }
.onboarding-welcome h1 {
margin-bottom: 16px;
color: var(--th-white);
font-size: clamp(2.4rem, 4.2vw, 4.35rem);
line-height: 1.02;
letter-spacing: -.045em;
text-shadow: 0 2px 18px rgba(4, 22, 49, .38);
}
.onboarding-welcome p {
max-width: 34ch;
margin: 0;
color: rgba(255, 255, 255, .94);
font-size: clamp(1rem, 1.3vw, 1.2rem);
line-height: 1.45;
text-shadow: 0 1px 10px rgba(4, 22, 49, .42);
}
.onboarding-panel {
display: grid;
place-items: center;
padding: 36px 48px;
background: var(--th-white);
}
.profile-form {
display: grid;
gap: 16px;
width: min(100%, 680px);
}
.profile-head h2 { margin-bottom: 7px; font-size: clamp(1.85rem, 2.2vw, 2.35rem); }
.profile-head h2:focus { outline: 0; }
.profile-head > p:last-child { margin: 0; color: var(--th-muted); font-size: var(--text-base); line-height: 1.5; }
.profile-photo-fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.profile-photo-fieldset legend,
.profile-field label {
margin-bottom: 6px;
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 800;
}
.profile-photo-fieldset legend span { color: var(--th-muted); font-weight: 500; }
.profile-photo-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
gap: 16px;
align-items: center;
}
.profile-photo-preview {
display: grid;
place-items: center;
width: 88px;
height: 88px;
overflow: hidden;
border: 2px dashed #71849C;
border-radius: 50%;
background: #F5F8FB;
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 800;
}
.profile-photo-preview.has-photo { border-style: solid; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-controls { min-width: 0; }
.profile-photo-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.profile-photo-button,
.profile-photo-remove {
min-height: calc(var(--tap) + 12px);
border-radius: var(--radius-sm);
background: var(--th-white);
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 800;
transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-press) var(--ease-out);
}
.profile-photo-button { padding: 9px 12px; border: 1px solid var(--th-navy); }
.profile-photo-remove {
margin-top: 4px;
padding: 7px 0;
border: 0;
color: var(--th-red-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
.profile-photo-controls > p {
margin: 5px 0 0;
color: var(--th-muted);
font-size: var(--text-sm);
line-height: 1.4;
}
.profile-name-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.profile-field { display: grid; align-content: start; }
.profile-field input {
width: 100%;
min-height: calc(var(--tap) + 12px);
padding: 12px 14px;
border: 1px solid #7B8EA6;
border-radius: var(--radius-sm);
background: var(--th-white);
transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
}
.profile-field input:focus-visible {
border-color: var(--th-navy);
box-shadow: 0 0 0 2px rgba(29, 54, 97, .18);
}
.profile-field.has-error input { border-color: var(--th-red); background: #FFF7F8; }
/* Das Abzeichen „5-stellig“ im Feld ist entfallen: Der Hilfetext darunter
sagt dasselbe und ist per aria-describedby auch vorgelesen. */
.profile-help,
.profile-error {
margin: 5px 0 0;
font-size: var(--text-sm);
line-height: 1.35;
}
.profile-help { color: var(--th-muted); }
.profile-error { color: var(--th-red-deep) !important; font-weight: 700; }
.profile-consent {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
column-gap: 10px;
align-items: start;
}
.profile-consent input {
width: 24px;
height: 24px;
margin: 1px 0 0;
accent-color: var(--th-navy);
}
.profile-consent.has-error input { outline: 2px solid var(--th-red); outline-offset: 2px; }
.profile-consent label { color: #293241; font-size: var(--text-sm); line-height: 1.5; }
.profile-consent a,
.profile-footer a { color: var(--th-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.profile-consent .profile-error { grid-column: 2; }
.profile-save-error {
margin: -4px 0 0;
padding: 10px 12px;
border-left: 3px solid var(--th-red);
background: var(--error-bg);
color: #7E0C1D;
font-size: var(--text-sm);
font-weight: 700;
}
/* Navy wie jeder Hauptknopf im Campus. Bis 1.58 war er rot — das einzige
Rot außerhalb von Fehlern, Abbruch und Löschen, und das Markenhandbuch
behält Rot dem Logo-Segel vor (Brandbook v1.1, Kap. 7.1). */
.profile-submit {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
min-height: 56px;
padding: 0 18px;
border: 1px solid var(--th-navy);
border-radius: var(--radius-sm);
background: var(--th-navy);
color: var(--th-white);
font-weight: 800;
box-shadow: 0 12px 24px rgba(29, 54, 97, .22);
transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, transform var(--duration-press) var(--ease-out), box-shadow var(--duration-fast) ease;
}
.profile-submit:disabled {
border-color: #D2DAE4;
background: #E7ECF2;
color: #4A596C;
box-shadow: none;
cursor: not-allowed;
}
.profile-submit-arrow {
min-width: 34px;
padding-left: 14px;
border-left: 1px solid rgba(255, 255, 255, .42);
font-size: 1.35rem;
font-weight: 400;
text-align: right;
}
.profile-submit:disabled .profile-submit-arrow { border-left-color: #BCC7D3; }
.profile-photo-button:active:not(:disabled),
.profile-submit:active:not(:disabled) { transform: scale(.98); box-shadow: none; }
.profile-photo-button:disabled { cursor: wait; opacity: .58; }
.profile-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 28px;
padding-top: 2px;
font-size: var(--text-sm);
}
/* var(--tap) statt 44px: unter `zoom: .8` waren 44px nur 35 echte Pixel. */
.profile-footer a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
}
@keyframes enter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Ladehinweis bis zum ersten Bildschirm (index.html, engine.js show()). */
.campus-laedt {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 40vh;
margin: 0;
color: var(--th-muted);
font-size: var(--text-base);
}
.campus-laedt-punkt {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--th-lime);
animation: campus-laedt 1.2s ease-in-out infinite;
}
@keyframes campus-laedt {
0%, 100% { opacity: .35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.campus-laedt-punkt { animation: none; }
}
.screen-head { padding: clamp(26px, 4vw, 48px) clamp(20px, 4vw, 48px) 0; }
.kicker {
display: inline-flex;
align-items: center;
min-height: 30px;
margin: 0 0 12px;
padding: 4px 12px;
border-radius: 999px;
background: var(--info-bg);
color: var(--th-navy);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.lead { max-width: 62ch; color: var(--th-muted); font-size: var(--text-base); }
/* --------------------------------------------------------- Inselauswahl ---
Die Auswahl gibt es in zwei Fassungen, und die Grenze laeuft nicht allein
ueber die Breite:
LISTE — Kacheln untereinander, volle Trefferbreite. Das Telefon.
BUEHNE — die Expeditionskarte mit Seegrund, Inselmotiven und Routen.
Warum Breite UND Hoehe entscheiden: Die alte Grenze war `min-width: 760px`
allein. Ein iPad mini ist hochkant 744 px breit und fiel damit auf die
Liste zurueck — ausgerechnet das Geraet, fuer das die Karte gedacht ist.
Ein iPhone quer ist 844 px breit und bekam die Buehne auf 390 px Hoehe.
`min-width: 700px` zusammen mit `min-height: 560px` trifft jedes iPad in
beiden Lagen und kein Telefon in keiner. */
#screen-islands {
position: relative;
border-color: rgba(183, 194, 207, .8);
background: #F6FAFC;
}
.campus-map {
position: relative;
isolation: isolate;
overflow: hidden;
background: #F6FAFC;
}
.island-intro {
position: relative;
z-index: 3;
}
.island-intro h1 {
max-width: 18ch;
font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.8rem);
line-height: 1.06;
letter-spacing: -.04em;
text-wrap: balance;
}
.island-intro .lead { margin-bottom: 0; text-wrap: pretty; }
/* Ohne Buehne gibt es weder Routen noch Deko. Bei der Deko traegt das
doppelt: Es sind leere Elemente mit CSS-Hintergrund, und Hintergruende
einer nicht passenden Medienabfrage holt der Browser gar nicht erst. Ein
ausgeblendetes ![]()
haette er geladen — das Telefon zahlte 166 KB fuer
Moewen, die es nie zeigt. */
.campus-map-art,
.map-deko { display: none; }
.island-map {
display: grid;
gap: 12px;
margin: 0;
padding: 26px clamp(18px, 4vw, 42px) 36px;
list-style: none;
}
.island-map-item { min-width: 0; }
/* ------------------------------------------------- Tagesabschluss --- */
/* Der Feedbackbogen sass frueher als breite Karte unter der Inselkarte und
trug dafuer die Klasse .tagesabschluss. Seit er als Symbol in die
Kopfzeile gewandert ist, traegt das Element `class="masthead-tool"` und
nur noch `id="tagesabschluss"` — die Gestaltung steht oben bei
.masthead-tool. Von den Kindklassen sind .ta-icon, .ta-text und .ta-title
geblieben (auch der THI-Schalter in thi.js baut sich daraus). Kicker,
Beschreibung und der Knopf „Öffnen" der alten Karte sind seit 1.46 auch
aus dem Markup heraus: Die Kopfzeile blendete sie ohnehin aus, und
engine.js schrieb Sätze hinein, die niemand je sah. */
.ta-icon {
display: grid;
flex: 0 0 52px;
width: 52px;
height: 52px;
place-items: center;
border-radius: var(--radius-lg);
background: var(--info-bg);
color: var(--th-navy);
}
.ta-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ta-text { display: grid; flex: 1 1 300px; gap: 3px; min-width: 0; }
.ta-title { color: var(--th-navy); font-size: var(--text-md); font-weight: 800; }
/* "Alle Inseln erledigt" faerbt heute .masthead-tool.is-ready ein, siehe
oben. Die Klassen .campus-tool und .campus-tool-icon stammen aus
derselben Kartenfassung und werden seither nirgends mehr vergeben. */
@media (max-width: 560px) {
.ta-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: var(--radius-lg); }
}
.island-card {
position: relative;
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 14px;
width: 100%;
min-height: 168px;
padding: 10px;
overflow: hidden;
border: 1px solid var(--th-line);
border-radius: var(--radius-lg);
background: var(--th-white);
text-align: left;
box-shadow: 0 8px 22px rgba(10, 39, 71, .07);
transition:
border-color var(--duration-fast) ease,
box-shadow var(--duration-fast) ease,
transform var(--duration-press) var(--ease-out);
animation: island-enter 260ms var(--ease-out) both;
animation-delay: calc(var(--island-order) * 35ms);
}
@keyframes island-enter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.island-card .i-visual {
position: relative;
display: grid;
place-items: center;
min-height: 150px;
padding: 10px;
overflow: visible;
border-radius: var(--radius-md);
background:
radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .95), transparent 72%),
rgba(232, 240, 246, .56);
}
.island-card .i-visual img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 7px 10px rgba(10, 39, 71, .2));
}
.island-card .i-content {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
min-width: 0;
padding: 8px 42px 8px 0;
}
.island-card .i-code {
color: var(--th-blue-text);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.island-card .i-title {
color: var(--th-navy);
font-size: var(--text-base);
font-weight: 800;
letter-spacing: -.018em;
line-height: 1.16;
text-wrap: balance;
}
.island-card .i-desc {
display: -webkit-box;
overflow: hidden;
color: var(--th-muted);
font-size: var(--text-sm);
line-height: 1.38;
text-wrap: pretty;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.island-card .i-state {
display: flex;
align-items: center;
gap: 7px;
margin-top: 2px;
color: var(--th-muted);
font-size: var(--text-label);
font-weight: 700;
}
.island-card .i-state::before {
content: "";
flex: 0 0 auto;
width: 11px;
height: 11px;
border-radius: 50%;
background: #D6DEE6;
}
/* --- Verpflegungsinsel ---------------------------------------------------
Rügen hat keinen Wissenscheck, also auch keinen Fortschritt. An die
Stelle des Status treten die beiden Namen mit Foto — die Auskunft, die
an dieser Station wirklich gesucht wird. Die Kachel ist ein div und
kein Knopf: Sie fuehrt nirgendwo hin, und ein Knopf, der nichts tut,
verspricht ein Quiz, das es nicht gibt. Deshalb hier auch kein
Hover-Zustand und kein Zeiger-Cursor. */
.island-card.is-service { cursor: default; }
.i-crew {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 2px;
}
.i-crew-person {
display: inline-flex;
gap: 7px;
align-items: center;
min-width: 0;
}
.i-crew-bild {
display: grid;
overflow: hidden;
flex: 0 0 auto;
width: 28px;
height: 28px;
place-items: center;
border-radius: 50%;
background: var(--info-bg);
box-shadow: 0 0 0 2px var(--th-white), 0 0 0 3px rgba(59, 169, 211, .45);
}
.i-crew-bild img {
width: 100%;
height: 100%;
object-fit: cover;
}
.i-crew-bild.ohne-foto {
color: var(--th-blue-text);
font-size: .64rem;
font-weight: 800;
}
.i-crew-name {
overflow: hidden;
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 700;
white-space: nowrap;
text-overflow: ellipsis;
}
.island-card.is-done .i-state::before {
background: var(--th-lime);
box-shadow: inset 0 0 0 3px var(--th-lime), inset 0 0 0 4px rgba(17, 17, 17, .22);
}
/* Offener Ring statt gefülltem Punkt: begonnen, aber nicht abgeschickt. */
.island-card.is-warten .i-state::before {
background: var(--th-white);
box-shadow: inset 0 0 0 3px var(--th-blue), inset 0 0 0 4px rgba(17, 17, 17, .18);
}
.i-score {
display: block;
width: 100%;
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #E8EDF1;
}
.i-score span {
display: block;
width: calc(var(--score) * 1%);
height: 100%;
border-radius: inherit;
background: var(--th-lime);
}
/* Solange das Ergebnis im Ausgang liegt, ist auch der Balken nicht Lime.
Sonst meldet die Kachel oben "noch nicht gesendet" und unten Erfolg. */
.island-card.is-warten .i-score span { background: var(--th-blue); }
/* Balken und Zahl in einer Zeile. Die Zahl zeigt sich nur dort, wo die
Statuszeile ("Abgeschlossen · 70 %") ausgeblendet ist — auf der Karte —,
sonst stünde der Wert zweimal untereinander. */
.i-fortschritt { display: flex; align-items: center; gap: 8px; width: 100%; }
.i-fortschritt .i-score { flex: 1 1 auto; width: auto; }
.i-wert {
display: none;
flex: 0 0 auto;
color: var(--th-lime-text);
font-size: var(--text-label);
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.island-card.is-warten .i-wert { color: var(--th-blue-text); }
.island-card .i-open {
position: absolute;
right: 16px;
bottom: 16px;
width: 32px;
height: 32px;
border: 1px solid var(--th-line-strong);
border-radius: 50%;
background: var(--th-white);
transition:
border-color var(--duration-fast) ease,
background-color var(--duration-fast) ease,
transform var(--duration-fast) var(--ease-out);
}
.island-card .i-open::before {
content: "";
position: absolute;
left: 10px;
top: 9px;
width: 8px;
height: 8px;
border-top: 2px solid var(--th-navy);
border-right: 2px solid var(--th-navy);
transform: rotate(45deg);
}
.island-card .i-open::after {
content: "";
position: absolute;
left: 8px;
top: 14px;
width: 12px;
height: 2px;
background: var(--th-navy);
}
.island-card:active { transform: scale(.985); }
.island-card.is-done { border-color: var(--success-line); background: linear-gradient(180deg, var(--th-white), #F9FCEB); }
.island-card.is-done .i-state { color: var(--th-lime-text); }
/* Abgeschlossen, aber noch nicht beim Server: ausdrücklich KEIN
Erfolgszustand. Lime würde hier eine Sicherheit behaupten, die es nicht
gibt — das Ergebnis liegt allein auf diesem Telefon. */
.island-card.is-warten { border-color: var(--th-blue); background: linear-gradient(180deg, var(--th-white), #F1F8FC); }
.island-card.is-warten .i-state { color: var(--th-blue-text); }
/* ========================== Die Expeditionskarte ==========================
Die Bühne hat ein FESTES SEITENVERHÄLTNIS. Das ist der Kern des Umbaus.
Vorher war sie ein Kasten mit `min-height: clamp(735px, 76vw, 900px)` bei
voller Breite. Gemessen ergab das auf dem iPad hochkant 1,0:1 und auf
einem breiten Monitor 2,7:1 — dieselben Prozentangaben trafen also auf
Verhältnisse, die um den Faktor 2,7 auseinanderliegen. Jede Position war
höchstens auf einer Fensterbreite richtig; auf allen anderen lief der
Archipel auseinander.
Mit festem Verhältnis beschreibt eine Prozentangabe einen Ort auf der
KARTE statt einen Ort im FENSTER. Zwei Verhältnisse gibt es trotzdem,
weil ein iPad hochkant kein Querformat ist: 16:9 quer, 1:1 hoch. Jede
Lage hat weiter unten ihre eigene Anordnung.
========================================================================= */
/* ============ Die Szene: ueberall dieselbe Karte ============
Diese Regeln standen in `@media (min-width: 700px) and (min-height:
560px)`, also hinter einer Bedingung an die GROESSE DES FENSTERS. Damit
war die Anordnung des Archipels an das Geraet gebunden: Unterhalb der
Schwelle gab es die Karte gar nicht, und darueber eine zweite Fassung
fuer das Hochformat. Drei Karten, die dasselbe zeigen sollten.
Die Szene ist jetzt bedingungslos. Sie ist 16:9, ihre Inseln stehen in
Prozent ihrer selbst, und sie sieht auf jedem Geraet gleich aus. Was
sich unterscheidet, steht weiter unten unter „Ausschnitt je Geraet":
wie gross der Ausschnitt ist und ob geschoben werden muss. */
#screen-islands { border-color: rgba(140, 176, 201, .75); background: #CFE6F4; }
.campus-map {
/* Das Verhältnis steht in einer Variablen, weil es zweimal gebraucht
wird: einmal für aspect-ratio, einmal in der Breitenrechnung. */
--karte-ar: 16 / 9;
/* Abstand Insel → Infokarte. Er ist zugleich die Länge des
Verbindungsstrichs, damit beides nie auseinanderläuft. */
--karte-x: 2.6cqw;
--karte-w: 16cqw;
/* Breite und Höhe zugleich begrenzt: Ohne den Höhenanteil ragt die
Karte auf einem 16:9-Monitor unter den Falz, und die untere
Inselreihe findet niemand.
--fenster-hoch statt 100dvh, weil `zoom: var(--ui-scale)` am body
dazwischenliegt. Nachgemessen: Bei 1180 px Fensterhöhe liefert 100dvh
hier 1180 Layout-Einheiten, die bei .8 als 944 Bildschirmpixel
ankommen — sichtbar sind also 80 %. Die Variable rechnet 100 /
--ui-scale und zieht damit mit, wenn die Skalierung auf großen
Monitoren steigt. Dieselbe Rechnung steht in .shell. */
width: min(100%, (var(--fenster-hoch) - 200px) * var(--karte-ar));
aspect-ratio: var(--karte-ar);
margin-inline: auto;
}
/* Der Meeresgrund gehört an die SZENE, nicht an den Ausschnitt: Wird
geschoben, muss er mitwandern, sonst schwimmt der Archipel über einem
stehenden Meer. */
.campus-szene {
/* Alles auf der Bühne bemisst sich an IHRER Breite (cqw), nicht am
Fenster. Sonst wüchse die Schrift einer Infokarte weiter, während die
Bühne unter ihr schrumpft — und die Karten stießen aneinander. Ein
`max(…rem, …cqw)` je Angabe hält die Untergrenze lesbar. */
container-type: inline-size;
background:
url("/media/campus/karte/see.webp?v=1.68.1") center / cover no-repeat,
#CFE6F4;
}
/* ---------------------------------------------------------- Hinweis --- */
/* Unten rechts statt der grossen Intro-Karte oben links: Titel und
Fortschritt stehen bereits in der Kopfzeile, auf der Karte reicht die
Handlungsaufforderung. Blau statt Weiss, aber der dunkle Ton: Auf
Cyan (#3BA9D3) erreicht weisser Text nur 2,69:1 — gleiche Messung wie
bei --th-blue-text. */
.campus-map .karten-hinweis {
position: absolute;
z-index: var(--ebene-karte);
right: 2.4cqw;
bottom: 2.2cqw;
display: flex;
gap: 1.1cqw;
align-items: flex-start;
width: 21.5cqw;
padding: 1.5cqw 1.7cqw;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 1.1cqw;
background: rgba(27, 118, 153, .84);
box-shadow: 0 1.1cqw 2.8cqw rgba(10, 39, 71, .2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--th-white);
}
.karten-hinweis-anker {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 3.1cqw;
height: 3.1cqw;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
}
.karten-hinweis-anker svg {
width: 62%;
height: 62%;
fill: none;
stroke: var(--th-white);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.karten-hinweis-text { min-width: 0; }
.campus-map .karten-hinweis h1 {
max-width: none;
margin: .2cqw 0 .4cqw;
color: var(--th-white);
font-size: max(.95rem, 1.4cqw);
letter-spacing: -.01em;
}
.campus-map .karten-hinweis .lead {
max-width: none;
margin: 0;
color: rgba(255, 255, 255, .92);
font-size: max(.72rem, .96cqw);
line-height: 1.4;
}
/* -------------------------------------------------------- Wegpunkte --- */
.campus-map-art {
position: absolute;
z-index: var(--ebene-route);
inset: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Der Wegpunkt einer Station, gerechnet aus KARTE.
`non-scaling-stroke` haelt den Ring auf jeder Buehne gleich dick —
sonst wird er auf dem Telefon zum Haar. */
.campus-wegpunkte circle {
fill: #F6FAFC;
stroke: #24507A;
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
/* Orbitkreise um VEJRO und gepunktete Strahlen zu den Themeninseln.
Zurueckhaltend: Sie sind Navigationsmetapher, nicht Inhalt. Die
Strichstaerke ist geraetetreu (non-scaling-stroke), die Dash-Muster
stehen in Szeneneinheiten und ruecken auf kleinen Buehnen enger
zusammen — dort ist auch die Karte kleiner, das passt. */
.campus-orbit circle {
fill: none;
stroke: rgba(255, 255, 255, .85);
stroke-width: 2;
stroke-dasharray: 5 9;
vector-effect: non-scaling-stroke;
}
.campus-orbit line {
stroke: rgba(255, 255, 255, .95);
stroke-width: 3.5;
stroke-dasharray: .1 15;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* ------------------------------------------------------------- Deko --- */
.map-deko {
position: absolute;
z-index: var(--ebene-deko);
inset: 0;
display: block;
pointer-events: none;
}
/* Langschreibweise, nicht die Kurzform `background`: Die Kurzform setzt
background-image zurueck, und weil `.map-deko span` spezifischer ist
als `.deko-kompass`, haette sie jedes Motiv wieder geloescht. */
.map-deko span {
position: absolute;
display: block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
/* Kompass oben LINKS, Walfluke unten links, Boote und Moewen rechts im
freien Wasser — die Verteilung der Vorlage. Frei ist, was nach der
radialen Anordnung uebrig bleibt: die vier Ecken und der Streifen
rechts zwischen HIDDENSEE und POEL. */
.deko-kompass {
left: 2.6cqw;
top: 2.6cqw;
width: 9.5cqw;
aspect-ratio: 300 / 296;
background-image: url("/media/campus/karte/kompass.webp?v=1.68.1");
opacity: .92;
}
.deko-boot {
width: 6cqw;
aspect-ratio: 319 / 420;
background-image: url("/media/campus/karte/segelboot.webp?v=1.68.1");
}
/* Ein Boot je Seite, nicht beide rechts: links segelt eines im offenen
Wasser suedwestlich von VEJRO — auf der gepunkteten Route, was fuer
ein Boot der eine Platz ist, an dem eine Linie darunter richtig
aussieht. Rechts bleibt eines oben. Nachgemessen gegen Karten,
Wellen und Inseln, auch im Abgeschlossen-Zustand mit hoeheren
Infokarten. */
.deko-boot-a { left: 82%; top: 12%; }
.deko-boot-b { left: 30%; top: 50%; }
.deko-wal {
left: 7%;
top: 84%;
width: 7.5cqw;
aspect-ratio: 420 / 336;
background-image: url("/media/campus/karte/wal.webp?v=1.68.1");
}
.deko-moewen {
width: 6.5cqw;
aspect-ratio: 420 / 207;
background-image: url("/media/campus/karte/moewen.webp?v=1.68.1");
}
.deko-moewen-a { left: 73%; top: 7%; }
.deko-moewen-b { left: 28%; top: 84%; }
.deko-wellen {
width: 7cqw;
aspect-ratio: 520 / 294;
background-image: url("/media/campus/karte/wellen.webp?v=1.68.1");
opacity: .85;
}
.deko-wellen-a { left: 2%; top: 55%; }
.deko-wellen-b { left: 67%; top: 86%; }
.deko-wellen-c { left: 30%; top: 92%; }
/* --------------------------------------------------------- Stationen --- */
.island-map {
position: absolute;
z-index: 2;
inset: 0;
display: block;
padding: 0;
}
/* Jede Station steht mit ihrem MITTELPUNKT auf --x/--y und ist --w breit;
die Höhe folgt dem Seitenverhältnis des Motivs.
Vorher hatte der Kasten Breite UND Höhe in Prozent und darin ein
`object-fit: contain`. Positioniert wurde damit nicht das Motiv,
sondern der Kasten darum — wo die Insel darin lag, entschied ihr
Zuschnitt, und jede Angabe war eine Näherung. Jetzt sind die Motive
zugeschnitten (tools/karten-assets.js) und --x/--y meinen die Insel. */
/* Die Rückfallwerte sind Absicht: Eine Insel, für die unten keine
Position steht, landet mitten auf der Bühne über allen anderen. Ohne
sie fielen left/top/width auf `auto` zurück und die Station stünde
irgendwo am Rand — falsch, aber unauffällig falsch. */
.island-map-item {
position: absolute;
z-index: var(--ebene-insel);
left: var(--x, 50%);
top: var(--y, 50%);
width: var(--w, 14%);
transform: translate(-50%, -50%);
}
/* Die angefasste Station nach vorn — sonst schiebt sich die Infokarte
der Nachbarinsel darueber, sobald sie sich beim Hover hebt. */
.island-map-item:hover,
.island-map-item:focus-within { z-index: var(--ebene-aktiv); }
.island-card {
display: block;
width: 100%;
min-height: 0;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.island-card:focus-visible { outline: none; }
.island-card:focus-visible .i-content { outline: 3px solid var(--th-navy); outline-offset: 3px; }
.island-card.is-done,
.island-card.is-warten { border: 0; background: transparent; }
.island-card .i-visual {
position: static;
display: block;
min-height: 0;
padding: 0;
border-radius: 0;
background: none;
}
/* height:auto statt contain: Der Kasten IST das Motiv. Die
width/height-Attribute am ![]()
kommen aus dem Katalog, damit die
Fläche schon vor dem Laden stimmt und nichts nachrutscht. */
.island-card .i-visual img {
width: 100%;
height: auto;
object-fit: fill;
filter: drop-shadow(0 .8cqw .8cqw rgba(10, 39, 71, .22));
transition:
filter var(--duration-fast) ease,
transform var(--duration-fast) var(--ease-out);
}
/* Die Infokarte hängt neben der Insel. Breite und Versatz stehen in cqw —
Prozent bezöge sich auf die INSEL, und dann wäre die Karte an HIDDENSEE
halb so breit wie an VEJRØ und ihr Versatz an jeder Insel ein anderer.
`--karte-y-szene` kommt aus KARTE.inseln und ist bereits in Einheiten
der Szene umgerechnet. */
.island-card .i-content {
position: absolute;
z-index: var(--ebene-karte);
top: calc(50% + var(--karte-y-szene, 0cqw));
display: flex;
justify-content: flex-start;
gap: .5cqw;
width: var(--karte-w);
padding: 1.1cqw 1.3cqw;
border: 1px solid rgba(160, 182, 202, .9);
border-radius: .9cqw;
background: rgba(255, 255, 255, .95);
box-shadow: 0 .8cqw 2cqw rgba(10, 39, 71, .17), inset 0 1px 0 rgba(255, 255, 255, .85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform: translateY(-50%);
transition:
border-color var(--duration-fast) ease,
box-shadow var(--duration-fast) ease,
transform var(--duration-fast) var(--ease-out);
}
.island-card.is-done .i-content { border-color: #8DAA17; background: rgba(255, 255, 255, .97); }
.island-card.is-warten .i-content { border-color: var(--th-blue); background: rgba(255, 255, 255, .97); }
.island-card .i-code { font-size: max(.6rem, .8cqw); letter-spacing: .1em; }
.island-card .i-title { font-size: max(.84rem, 1.2cqw); line-height: 1.14; }
.island-card .i-desc { display: none; }
.island-card .i-state {
gap: .5cqw;
margin-top: .2cqw;
font-size: max(.68rem, .9cqw);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.island-card .i-state::before {
width: max(8px, .78cqw);
height: max(8px, .78cqw);
}
.island-card.is-warten .i-state {
align-items: flex-start;
white-space: normal;
text-wrap: balance;
}
.island-card.is-warten .i-state::before { margin-top: .3cqw; }
.i-score { height: max(5px, .48cqw); }
.island-card .i-open { display: none; }
/* ------------------------------------------- Anschluss an die Insel ---
Strich und Punkt sind ein Pseudoelement-Paar an der Infokarte. Der
Punkt ist zugleich der Stationspunkt, an dem die Engine die Routen
ansetzt (campusAnchor in engine.js) — er darf deshalb nicht
verschwinden, auch wenn er nur wie Zierde aussieht. */
.island-card .i-content::after {
content: "";
position: absolute;
top: 50%;
width: var(--karte-x);
border-top: 1px solid #56708C;
}
/* Auf welcher Seite die Infokarte haengt, sagt `data-karte` — gesetzt aus
KARTE.inseln in engine.js. Vorher standen hier sieben Inselnamen in
sechs Selektorlisten: Wer eine Insel auf die andere Seite holte, musste
sie in allen sechs finden, und der Anschlussstrich zeigte danach gern
in die falsche Richtung. Ein Attribut kann das nicht halb tun. */
[data-karte="rechts"] .i-content { left: calc(100% + var(--karte-x)); }
[data-karte="rechts"] .i-content::after { right: 100%; }
[data-karte="links"] .i-content { right: calc(100% + var(--karte-x)); }
[data-karte="links"] .i-content::after { left: 100%; }
/* `unten` haengt die Infokarte mittig unter das Motiv: im Hochformat
ueberall, auf der Querkarte bei VEJRO. `--karte-y-szene` zaehlt hier
von der UNTERKANTE des Motivs; negativ ueberlappt die Karte das Motiv
leicht, wie in der Vorlage. transform ist EINE Eigenschaft — die
waagerechte Zentrierung steht deshalb in jedem Zustand mit (Hover und
reduzierte Bewegung weiter unten bei den Zeigerregeln). */
[data-karte="unten"] .i-content {
left: 50%;
right: auto;
top: calc(100% + var(--karte-y-szene, 0cqw));
transform: translateX(-50%);
}
/* Ohne Abstand kein Anschluss: Ueberlappende und unten angehaengte
Karten bekommen weder Strich noch Punkt — gesetzt aus KARTE in
applyKartenLayout. */
[data-anschluss="aus"] .i-content::before,
[data-anschluss="aus"] .i-content::after { display: none; }
/* ------------------------------------------ Anordnung im Querformat ---
--x/--y ist der Mittelpunkt der Insel, --w ihre Breite, beides in
Prozent der Bühne. --karte-y verschiebt die Infokarte gegen die
Inselmitte, wo sie sonst an einem Nachbarn hängt.
ACHTUNG bei --karte-y: Der Wert liegt auf `top` der Infokarte und
zählt deshalb in Prozent der INSELHÖHE, nicht der Bühne. Bei VEJRØ
sind das zwei sehr verschiedene Dinge — die Insel ist 34 % der Bühne
hoch, −20 % davon sind also nur 7 % Bühne. Wer hier in Bühnenprozent
rechnet, verschiebt ein Drittel dessen, was er meint. */
/* ------------------------------------------------ Verpflegungsinsel ---
RÜGEN ruht: Es steht nicht in inseln.json und wird deshalb nicht
gezeichnet. Die Angaben bleiben trotzdem hier, damit der Wiedereinbau
zwei JSON-Eintraege bleibt und kein zweites Tagesprojekt wird — so war
die Mechanik gemeint, als sie gebaut wurde.
Anders als die sieben Lerninseln haengt die Kachel UNTER dem Motiv,
nicht daneben: Statt eines Fortschrittsbalkens stehen dort zwei Namen
mit Foto, und die brechen in einer Karte von 16 % Buehnenbreite
unbrauchbar um.
Der Platz ist die freie Wasserflaeche oben rechts, zwischen der
Infokarte von SAMSØ (endet bei 64 %) und der Kompassrose (beginnt bei
87 %). Sie liegt ausserhalb des Rings, den die sieben Lerninseln
bilden — genau dort, wo eine Station ohne Wissenscheck hingehoert.
OFFEN: Das Motiv ist noch die flache Silhouette aus
tools/ruegen-silhouette.js. Neben sieben isometrischen Dioramen faellt
sie auf. Vor dem Wiedereinbau gehoert ein achtes Motiv im Stil des
Asset-Packs dazu (05_prompts/ISLAND_PROMPT_TEMPLATE.md). */
.island-ruegen { --x: 74%; --y: 9%; --w: 7%; --karte-w: 16cqw; }
.island-ruegen .i-content {
left: 50%;
right: auto;
top: calc(100% + var(--karte-x));
transform: translateX(-50%);
}
/* Der Anschluss steht hier senkrecht: von der Oberkante der Kachel
hinauf zur Unterkante des Motivs. */
.island-ruegen .i-content::after {
left: 50%;
right: auto;
top: auto;
bottom: 100%;
width: 0;
height: var(--karte-x);
border-top: 0;
border-left: 1px solid #56708C;
}
.island-ruegen .i-content::before {
left: calc(50% - max(4px, .42cqw));
right: auto;
top: calc(-1 * var(--karte-x) - max(4px, .42cqw));
}
.island-ruegen .i-desc { display: none; }
/* Die Betreuungsreihe skaliert mit der Buehne wie alles andere auch. */
.i-crew { gap: .5cqw 1.2cqw; margin-top: .4cqw; }
.i-crew-bild {
width: max(20px, 1.9cqw);
height: max(20px, 1.9cqw);
}
.i-crew-name { font-size: max(.64rem, .88cqw); }
/* Die Anordnung steht nicht mehr hier, sondern in `KARTE.inseln` in
engine.js, und wird beim Zeichnen als --x/--y/--w gesetzt. Zwei Gruende:
Die Routen brauchen dieselben Zahlen, um ihre Anker zu rechnen, statt
sie aus dem DOM zu messen — und es gab die Werte zweimal, einmal fuer
quer und einmal fuer hoch. Zwei Anordnungen fuer sieben Inseln laufen
auseinander, sobald jemand nur eine davon anfasst. */
/* ---------------------------------------- Ausschnitt statt zweiter Karte ---
Hier stand eine EIGENE Anordnung fuer das Hochformat: sieben weitere
Positionen auf einer 4:5-Buehne, zwei Inseln mit gewechselter Kartenseite,
die Deko noch einmal verteilt. Also zwei Archipele, die dasselbe zeigen
sollten und beim naechsten Verschieben einer Insel auseinanderliefen —
genau das, was die Vorgabe „nicht drei unabhaengig gestaltete Karten"
ausschliesst.
Jetzt gibt es EINE Szene im Verhaeltnis 16:9. Was sich zwischen den
Geraeten unterscheidet, ist allein der AUSSCHNITT, durch den man sie
sieht:
Desktop ab 1180 px Szene passt vollstaendig, kein Schieben
Tablet quer dieselbe Szene, proportional kleiner
Tablet hoch, Telefon Szene bleibt 16:9 und breiter als der Ausschnitt;
geschoben wird mit dem Finger
Die Szene wird dabei nie gestaucht: `--szene-breite` setzt ihre Breite,
die Hoehe folgt aus `aspect-ratio`. Waagerechter und senkrechter Massstab
bleiben damit gleich, und keine Insel verschiebt sich gegen eine andere. */
.campus-map {
position: relative;
overflow: hidden;
touch-action: pan-y;
/* Welche Anordnung aus KARTE gilt, liest die Engine HIER ab
(kartenAnordnung in engine.js) — die Grenze steht damit nur einmal,
naemlich in der Medienabfrage weiter unten. */
--anordnung: quer;
}
.campus-szene {
container-type: inline-size;
position: relative;
width: var(--szene-breite, 100%);
aspect-ratio: 16 / 9;
/* translate3d statt top/left: Das Schieben laeuft dann auf der
Grafikkarte und loest kein Neuberechnen des Layouts aus. Ohne das
ruckelt es auf dem iPad sichtbar, weil bei jedem Zeigerereignis
sieben Inseln, sieben Karten und sieben Bezierkurven neu vermessen
wuerden. */
transform: translate3d(var(--pan-x, 0px), var(--pan-y, 0px), 0);
will-change: transform;
}
/* Wird geschoben, soll nichts nachlaufen — sonst haengt die Karte am
Finger. Der Uebergang gilt nur beim Loslassen und beim Einrasten. */
.campus-map.is-schiebend .campus-szene { transition: none; }
.campus-map:not(.is-schiebend) .campus-szene {
transition: transform var(--duration-fast) var(--ease-out);
}
/* Der Hinweis erscheint nur, wo wirklich geschoben werden kann. */
.map-schiebehinweis {
position: absolute;
z-index: var(--ebene-karte);
right: 10px;
bottom: 10px;
display: none;
gap: 6px;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, .92);
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 600;
pointer-events: none;
}
.campus-map.kann-schieben .map-schiebehinweis { display: flex; }
.campus-map.hat-geschoben .map-schiebehinweis { display: none; }
/* ------------------------------------------------- Ausschnitt je Gerät ---
Drei Bereiche, eine Szene. Was sich ändert, ist NUR die Größe des
Ausschnitts und ob die Szene hineinpasst.
ab 1180 px Szene passt vollständig, nichts zu schieben
768–1179 px dieselbe Szene, proportional kleiner
unter 768 px Szene bleibt auf Mindestbreite, wird geschoben
Die Breite der Szene steht in `--szene-breite`. Nur diese eine Zahl
entscheidet, ob geschoben wird — die Engine fragt nicht die Fensterbreite
ab, sondern misst, ob die Szene über den Ausschnitt hinausragt. Damit
kann die Grenze im Stylesheet nicht von einer zweiten Fassung im Skript
abweichen, wie es hier schon einmal passiert ist. */
/* Tablet quer und kleiner Desktop: dieselbe Komposition, weniger Polster.
Die Infokarten dürfen schrumpfen, die Trefferflächen nicht. */
@media (max-width: 1179px) {
.campus-map .island-intro { padding: 1.5cqw 1.7cqw; }
.island-card .i-content { padding: .9cqw 1.1cqw; }
.island-card .i-content { box-shadow: 0 .5cqw 1.2cqw rgba(10, 39, 71, .14); }
}
/* Tablet hochkant: KEIN Ausschnitt auf die Querkarte mehr, sondern die
eigene senkrechte Anordnung `hoch` aus KARTE — 900 x 1200 Einheiten,
3:4. Alle sieben Inseln bleiben gleichzeitig sichtbar, VEJRO zentral,
die Infokarten haengen unter ihren Motiven, nichts wird geschoben.
(Das Schieben bleibt als Mechanik liegen und schaltet sich selbst ab,
weil die Szene in den Ausschnitt passt.) */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
.campus-map {
--anordnung: hoch;
--karte-ar: 3 / 4;
/* Breite und Hoehe zugleich begrenzt, wie am Querformat:
--fenster-hoch wegen zoom am body, abgezogen ist der Kopfbereich. */
width: min(100%, (var(--fenster-hoch) - 260px) * 3 / 4);
aspect-ratio: var(--karte-ar);
margin-inline: auto;
}
.campus-szene { aspect-ratio: 3 / 4; }
/* Kompakter als am Desktop, aber vollstaendig lesbar. Die cqw beziehen
sich jetzt auf eine schmalere Buehne, deshalb eigene Werte. */
.island-card .i-content { gap: .4cqw; padding: 1cqw 1.3cqw; }
.island-card .i-code { font-size: max(.6rem, 1.2cqw); }
.island-card .i-title { font-size: max(.78rem, 1.75cqw); }
.island-card .i-state { font-size: max(.64rem, 1.3cqw); }
/* Deko fuer die senkrechte Szene: Kompass oben links, Boote und Moewen
ins freie Wasser, der Wal behaelt seine Ecke unten links. (Wer hier
etwas ausblenden will: `.map-deko span` schlaegt `.deko-…` — die
Regel braucht dann `.map-deko .deko-…`, siehe AGENTS.md.) */
.deko-kompass { width: 12cqw; }
.deko-boot { width: 7.5cqw; }
.deko-boot-a { left: 80%; top: 7%; }
.deko-boot-b { left: 7%; top: 88%; }
.deko-wal { left: 25%; top: 87%; }
.deko-moewen { width: 8cqw; }
.deko-moewen-a { left: 20%; top: 21%; }
.deko-moewen-b { left: 68%; top: 52%; }
.deko-wellen { width: 8.5cqw; }
.deko-wellen-a { left: 3%; top: 47%; }
.deko-wellen-b { left: 88%; top: 80%; }
.deko-wellen-c { left: 30%; top: 96%; }
/* Im Hochformat bleibt der knappe Platz auf der Karte den Inseln. */
.campus-map .karten-hinweis { display: none; }
}
/* Telefon: Die Szene verschwindet KOMPLETT — samt Seegrund und Deko, denn
Hintergruende in einem display:none-Teilbaum holt der Browser gar nicht
erst. An ihre Stelle tritt der Orbit: die aktive Insel gross im
Rampenlicht, die uebrigen sechs als runde Stationen auf dem Ring. */
@media (max-width: 767px) {
.campus-map { display: none; }
}
/* ------------------------------------------ Tablet hochkant: kompakter Kopf ---
Feedback und THI behalten beim Drehen ihren Platz über dem Inhalt.
Unter der Hochformatkarte lagen sie fast eine Fensterhöhe weiter unten.
Eine eigene zweite Kopfzeile lässt Marke und Fortschritt genug Platz,
ohne Werkzeuge oder Trefferflächen zu verkleinern. */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199px) {
body.ist-karte .masthead {
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 14px;
}
body.ist-karte .masthead-tools {
grid-column: 1 / -1;
grid-row: 2;
}
body.ist-karte .masthead-progress {
grid-column: 2;
grid-row: 1;
justify-self: end;
width: auto;
min-width: 200px;
}
body.ist-karte .campus-progress-head,
body.ist-karte .campus-progress-copy { display: none; }
body.ist-karte .campus-progress-kompakt { display: flex; }
body.ist-karte .menue-knopf {
display: grid;
grid-column: 3;
grid-row: 1;
}
}
/* ------------------------------------------------- Telefon: Kopf und Orbit ---
Der Kopf traegt nur noch Hamburger, Wortmarke und Avatar; Titelzeile,
Fortschritt und Werkzeuge stecken in Orbit, Fortschrittskarte und
unterer Navigation. Das gilt auf Uebersicht, Inselstart und Ergebnis
(body.mit-mobilkopf); die Fragenansicht hat keinen Kopf. */
.orbit, .mobil-nav { display: none; }
@media (max-width: 767px) {
body.mit-mobilkopf .masthead {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto;
gap: 10px;
align-items: center;
}
/* Solides Weiss statt Glas: Die Wortmarke ist ein PNG auf Weiss und
zeichnet sich auf der halbtransparenten Flaeche als hellerer Kasten ab. */
body.mit-mobilkopf .masthead { background: var(--th-white); }
body.mit-mobilkopf .menue-knopf { display: grid; grid-column: 1; grid-row: 1; }
body.mit-mobilkopf .brand {
grid-column: 2;
grid-row: 1;
justify-self: center;
}
body.mit-mobilkopf .brand-logo { width: 148px; }
body.mit-mobilkopf .brand-copy { display: none; }
body.mit-mobilkopf .kopf-avatar { display: grid; grid-column: 3; grid-row: 1; }
body.mit-mobilkopf .masthead-progress,
body.mit-mobilkopf .masthead-tools { display: none; }
/* Seit 1.61 auf Übersicht, Inselstart und Ergebnis (body.mit-mobilkopf,
gesetzt in show()); vorher nur auf der Übersicht. */
/* Platz fuer die feste Navigation am unteren Rand. */
body.mit-mobilkopf .shell { padding-bottom: 96px; }
#screen-islands { background: #DCEEF9; }
.orbit {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 14px 18px;
/* Wasserflaeche wie auf der grossen Karte, aber als Verlauf: Die
166 KB Seegrund-Textur bleiben dem Telefon weiter erspart. */
background: linear-gradient(180deg, #E2F1FA 0%, #CFE6F4 55%, #D8ECF8 100%);
}
.orbit-pille {
display: inline-flex;
align-items: center;
align-self: center;
min-height: 34px;
margin: 0;
padding: 5px 20px;
border: 1px solid rgba(255, 255, 255, .8);
border-radius: 999px;
background: rgba(255, 255, 255, .95);
box-shadow: 0 6px 16px rgba(20, 55, 90, .1);
color: var(--th-blue-text);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.orbit-buehne {
position: relative;
width: min(100%, 470px);
aspect-ratio: 100 / 113;
margin: 0 auto;
touch-action: pan-y;
}
.orbit-ring {
position: absolute;
inset: 3% 5%;
border: 2px dashed rgba(29, 54, 97, .25);
border-radius: 50%;
}
.orbit-thumbs {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
list-style: none;
}
.orbit-station {
position: absolute;
left: var(--px, 50%);
top: var(--py, 50%);
transform: translate(-50%, -50%);
transition: left 380ms var(--ease-out), top 380ms var(--ease-out), opacity 380ms ease;
}
/* „mitte" steht im Rampenlicht, „versteckt" ist der Ringplatz hinter dem
Rampenlicht — beide unsichtbar, damit die Rotation als Kreis wirkt. */
.orbit-station[data-platz="mitte"],
.orbit-station[data-platz="versteckt"] {
opacity: 0;
pointer-events: none;
}
.orbit-thumb {
display: grid;
place-items: center;
width: 76px;
height: 76px;
padding: 0;
overflow: hidden;
border: 3px solid var(--th-white);
border-radius: 50%;
background: radial-gradient(circle at 50% 40%, #EAF6FD 0 58%, #C2E2F4);
box-shadow: 0 8px 20px rgba(20, 55, 90, .18);
}
.orbit-thumb img {
width: 86%;
height: 86%;
object-fit: contain;
}
.orbit-hero {
position: absolute;
left: 50%;
top: 52%;
z-index: 1;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
width: 68%;
padding: 9% 5% 7%;
border-radius: 48% 48% 46% 46% / 34% 34% 30% 30%;
background: var(--th-white);
box-shadow: 0 18px 44px rgba(20, 55, 90, .16);
text-align: center;
}
.orbit-hero-bild {
width: 72%;
height: auto;
margin-bottom: 6px;
filter: drop-shadow(0 8px 10px rgba(10, 39, 71, .18));
}
.orbit-hero-code {
margin: 0 0 2px;
color: var(--th-blue-text);
font-size: var(--text-label);
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.orbit-hero-titel {
margin: 0 0 3px;
color: var(--th-navy);
font-size: var(--text-lg);
font-weight: 800;
line-height: 1.12;
letter-spacing: -.01em;
text-wrap: balance;
}
.orbit-hero-stand {
display: flex;
gap: 6px;
align-items: center;
margin: 0 0 10px;
color: var(--th-muted);
font-size: var(--text-label);
font-weight: 600;
}
.orbit-hero-stand::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #C3CBD4;
}
.orbit-start {
min-height: var(--tap);
padding: 10px 36px;
border-radius: 999px;
}
.orbit-pfeil {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: calc(var(--tap) + 2px);
height: calc(var(--tap) + 2px);
padding: 0;
border: 1px solid rgba(183, 194, 207, .6);
border-radius: 50%;
background: var(--th-white);
color: var(--th-navy);
box-shadow: 0 10px 24px rgba(20, 55, 90, .16);
transform: translateY(-50%);
}
.orbit-pfeil svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.orbit-pfeil-links { left: -4px; }
.orbit-pfeil-rechts { right: -4px; }
.orbit-punkte {
display: flex;
justify-content: center;
gap: 2px;
}
/* Der sichtbare Punkt ist klein, die Trefferflaeche nicht: 34 x 55 px
je Knopf, das Mindestmass gilt auch hier. */
.orbit-punkt {
position: relative;
width: 34px;
height: var(--tap);
padding: 0;
border: 0;
background: transparent;
}
.orbit-punkt::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 11px;
border-radius: 50%;
background: #A9CFE6;
transform: translate(-50%, -50%);
transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.orbit-punkt.ist-aktiv::before {
background: var(--th-blue-text);
transform: translate(-50%, -50%) scale(1.3);
}
.orbit-hinweis {
margin: 0;
color: var(--th-navy);
font-size: var(--text-sm);
font-weight: 600;
text-align: center;
}
.orbit-hand { display: grid; place-items: center; }
.orbit-hand svg {
width: 72px;
height: auto;
fill: none;
stroke: var(--th-navy);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .85;
}
.orbit-fortschritt {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding: 16px 18px;
border: 1px solid rgba(183, 194, 207, .6);
border-radius: var(--radius-lg);
background: var(--th-white);
box-shadow: 0 8px 24px rgba(20, 55, 90, .08);
}
.orbit-fortschritt-text strong {
display: block;
margin-bottom: 2px;
color: var(--th-navy);
font-size: var(--text-md);
}
.orbit-fortschritt-text span {
color: var(--th-muted);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
/* Derselbe conic-Ring wie auf der Ergebniskarte, nur hell und klein. */
.orbit-fortschritt-ring {
--pct: 0;
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 84px;
height: 84px;
border-radius: 50%;
background: conic-gradient(var(--th-blue-text) calc(var(--pct, 0) * 1%), #E2ECF3 0);
}
.orbit-fortschritt-ring::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--th-white);
}
.orbit-fortschritt-ring b {
position: relative;
color: var(--th-navy);
font-size: 1.02rem;
font-variant-numeric: tabular-nums;
}
/* Feste Navigation am unteren Rand. Kanten statt Breite (100vw ist mit
body { zoom: .8 } nicht verlaesslich); auto-Spalten statt fester
vier, weil Einzelpakete ohne Arbeitskarte und Feedback auskommen. */
/* Die Leiste steht seit 1.61 außerhalb der Bildschirme (index.html, nach
) und erscheint nur mit dem einheitlichen Kopf. Außerhalb jedes
.screen hängt sie auch an keiner Einblendung mit transform. */
body.mit-mobilkopf .mobil-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--ebene-kopf);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
border-top: 1px solid var(--th-line);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.mobil-nav-punkt {
display: flex;
flex-direction: column;
gap: 3px;
align-items: center;
justify-content: center;
min-height: calc(var(--tap) + 8px);
padding: 6px 2px;
border: 0;
border-radius: var(--radius-md);
background: transparent;
/* --th-muted statt #6E7E93: das erreichte auf Weiß nur 4,14 : 1. */
color: var(--th-muted);
font-size: var(--text-label);
font-weight: 700;
text-decoration: none;
}
.mobil-nav-punkt svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mobil-nav-punkt.ist-aktiv { color: var(--th-blue-text); }
/* Offenes THI-Panel: Die Leiste trägt --ebene-kopf (100), Schleier und
Panel 90/91. Bis 1.66 lag sie deshalb über Eingabefeld, Senden-Knopf
und der Zeile mit der Support-Nummer. Ausblenden statt das Panel
anzuheben: Bis 640 px ist die Leiste ohnehin inert, darüber führt
„THI fragen“ nur zu dem, was schon offen ist. */
body.mit-mobilkopf.thi-offen .mobil-nav { display: none; }
}
/* ------------------------------------------------------------ Campus-Menue ---
Ein