Adminator
fecd8bb9c9
562 Ersetzungen in 50 Dateien: Halbgeviertstrich zwischen zwei Ziffern (= "bis"-Bereich) bekommt Leerzeichen davor/danach (3–4 -> 3 – 4). Regex /([0-9])\s*–\s*(?=[0-9])/ auf Rohtext (format-erhaltend, CRLF/Einrueckung unveraendert), Bindestriche in Woertern und Minuszeichen unangetastet, alle JSON weiter gueltig. Energiemanager-Zeitbloecke sind Display-Labels (kein Logik-Key) -> safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
918 lines
56 KiB
HTML
918 lines
56 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>GeoGraSim — Geografie erleben</title>
|
||
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="stylesheet" href="assets/fonts/inter.css">
|
||
<style>
|
||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||
|
||
:root {
|
||
--bg: #f7f6f3; --bg2: #efeee9; --white: #fff;
|
||
--text: #1a1a1a; --text2: #4a4a4a; --text3: #9a9a9a;
|
||
--fjord: #4a7c8a; --fjord-l: #dae8ec; --fjord-d: #3a6470;
|
||
--moss: #5a8a5e; --moss-l: #dceadd;
|
||
--sand: #c4a35a; --sand-l: #f2eacc;
|
||
--coral: #c07a6b; --coral-l: #f2ddd8;
|
||
--r: 20px; --rs: 12px;
|
||
}
|
||
|
||
html { scroll-behavior: smooth; }
|
||
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.6; }
|
||
|
||
/* ===== NAV ===== */
|
||
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: .7rem 0; transition: all .4s; }
|
||
.nav.scrolled { backdrop-filter: blur(20px); background: rgba(247,246,243,0.92); box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
|
||
.nav .w { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
|
||
.nav-brand { display: flex; align-items: center; text-decoration: none; }
|
||
.nav-brand img { height: 38px; }
|
||
.nav-links { display: flex; gap: .2rem; align-items: center; }
|
||
.nav-links a { color: var(--text2); text-decoration: none; padding: .4rem .8rem; border-radius: 8px; font-size: .82rem; font-weight: 500; transition: all .2s; }
|
||
.nav-links a:hover { background: rgba(0,0,0,0.04); }
|
||
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.3rem; border-radius: var(--rs); font-weight: 600; font-size: .82rem; text-decoration: none; border: none; cursor: pointer; transition: all .25s cubic-bezier(.22,1,.36,1); }
|
||
.btn-p { background: var(--fjord); color: #fff; box-shadow: 0 2px 10px rgba(74,124,138,.2); }
|
||
.btn-p:hover { background: var(--fjord-d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,124,138,.25); }
|
||
.btn-o { background: rgba(255,255,255,.85); color: var(--fjord); border: 1.5px solid rgba(74,124,138,.4); }
|
||
.btn-o:hover { border-color: var(--fjord); background: var(--fjord-l); }
|
||
|
||
/* ===== HERO ===== */
|
||
.hero { min-height: 85vh; position: relative; overflow: hidden; display: flex; align-items: center; }
|
||
.hero canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
|
||
.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 6rem 2rem 3rem; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
|
||
.hero-text h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -.04em; margin-bottom: .8rem; }
|
||
.hero-text h1 em { font-style: normal; color: var(--fjord); }
|
||
.hero-text .lead { font-size: 1.05rem; color: var(--text2); max-width: 440px; margin-bottom: 1.5rem; }
|
||
.hero-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
|
||
.hero-visual { display: flex; justify-content: center; perspective: 800px; }
|
||
.hero-card { width: 340px; background: var(--white); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0,0,0,.1); overflow: hidden; transform: rotateY(-8deg) rotateX(3deg); transition: transform .5s cubic-bezier(.22,1,.36,1); }
|
||
.hero-card:hover { transform: rotateY(0) rotateX(0); }
|
||
.hero-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
|
||
.hero-card-body { padding: 1rem; }
|
||
.hero-card-body h3 { font-size: .9rem; font-weight: 700; }
|
||
.hero-card-body p { font-size: .75rem; color: var(--text3); }
|
||
.hero-mini { position: absolute; background: var(--white); border-radius: var(--rs); box-shadow: 0 8px 30px rgba(0,0,0,.08); padding: .6rem .9rem; font-size: .75rem; font-weight: 600; }
|
||
.hero-mini-1 { top: 10%; right: -10px; transform: rotate(3deg); animation: bobA 4s ease-in-out infinite; }
|
||
.hero-mini-2 { bottom: 28%; left: -20px; transform: rotate(-2deg); animation: bobB 5s ease-in-out infinite; }
|
||
@keyframes bobA { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-8px); } }
|
||
@keyframes bobB { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(6px); } }
|
||
|
||
/* ===== SECTION ===== */
|
||
.sec { padding: 4rem 0; }
|
||
.w { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
|
||
.label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fjord); }
|
||
.sec-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; margin: .3rem 0; }
|
||
.sec-sub { color: var(--text2); max-width: 520px; font-size: .95rem; }
|
||
|
||
/* ===== SIM CARDS ===== */
|
||
.sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.sim-card { background: var(--white); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1.5px solid rgba(0,0,0,.05); transition: all .35s cubic-bezier(.22,1,.36,1); cursor: pointer; padding: .6rem; text-decoration: none; color: inherit; display: block; }
|
||
.sim-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(74,124,138,.12); border-color: rgba(74,124,138,.2); }
|
||
.sim-card-img { height: 210px; overflow: hidden; position: relative; border-radius: 10px; }
|
||
.sim-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
|
||
.sim-card:hover .sim-card-img img { transform: scale(1.06); }
|
||
.sim-card-body { padding: .8rem .4rem .4rem; }
|
||
.sim-card-body h3 { font-size: .88rem; font-weight: 700; margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
|
||
.sim-card-body p { font-size: .75rem; color: var(--text2); margin-bottom: .5rem; }
|
||
.sim-card-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
|
||
.sim-tag { font-size: .62rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
|
||
.st1 { background: var(--fjord-l); color: var(--fjord); }
|
||
.st2 { background: var(--moss-l); color: var(--moss); }
|
||
.st3 { background: var(--sand-l); color: var(--sand); }
|
||
.st4 { background: var(--coral-l); color: var(--coral); }
|
||
.st-time { background: #f0eeea; color: var(--text3); }
|
||
.badge-new { background: linear-gradient(135deg,#4a7c8a,#6aa8b8); color: #fff; font-size: .58rem; padding: 2px 6px; border-radius: 4px; font-weight: 800; letter-spacing: .04em; }
|
||
.badge-free { background: linear-gradient(135deg,#5a8a5e,#7ab88a); color: #fff; font-size: .58rem; padding: 2px 6px; border-radius: 4px; font-weight: 800; letter-spacing: .04em; }
|
||
|
||
/* Locked sim cards */
|
||
.sim-card.locked { opacity: .75; }
|
||
.sim-card.locked:hover { transform: translateY(-3px); }
|
||
.sim-card.locked .sim-card-img::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.15); border-radius: 10px; }
|
||
.lock-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.95); border-radius: 12px; padding: .6rem 1rem; font-size: .72rem; font-weight: 600; color: var(--fjord); box-shadow: 0 4px 15px rgba(0,0,0,.1); text-align: center; z-index: 2; }
|
||
|
||
/* Card-Split: zwei CTAs statt Klick auf gesamte Card */
|
||
.sim-card-cta { display: flex; gap: .45rem; margin-top: .55rem; flex-wrap: wrap; }
|
||
.sim-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .7rem; min-height: 40px; border-radius: 10px; font-size: .78rem; font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: all .2s cubic-bezier(.22,1,.36,1); min-width: 0; }
|
||
.sim-btn-primary { background: var(--fjord); color: #fff; }
|
||
.sim-btn-primary:hover { background: var(--fjord-d); transform: translateY(-1px); }
|
||
.sim-btn-secondary { background: var(--white); color: var(--fjord); border-color: var(--fjord); }
|
||
.sim-btn-secondary:hover { background: var(--fjord-l); }
|
||
.sim-btn-disabled { background: var(--bg2); color: var(--text3); border-color: rgba(0,0,0,.06); cursor: default; }
|
||
/* Cards sind nicht mehr als Ganze klickbar — nur noch Hover-Optik */
|
||
.sim-card.split { cursor: default; display: block; }
|
||
.sim-card.split:hover { transform: translateY(-3px); }
|
||
|
||
/* ===== VALUE PROPOSITION (for teachers) ===== */
|
||
.value-sec { background: var(--bg2); position: relative; }
|
||
.value-sec::before { content: ''; position: absolute; top: -50px; left: 0; right: 0; height: 100px; background: var(--bg2); transform: skewY(-2deg); z-index: -1; }
|
||
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2rem; align-items: center; }
|
||
.value-text h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .8rem; letter-spacing: -.02em; }
|
||
.value-text p { font-size: .9rem; color: var(--text2); margin-bottom: 1rem; line-height: 1.7; }
|
||
.value-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
|
||
.value-list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: var(--text2); }
|
||
.value-list li .vi { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
|
||
|
||
/* ===== FEATURES ===== */
|
||
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
|
||
.feat { background: var(--white); border-radius: var(--r); padding: 1.4rem; border: 1px solid rgba(0,0,0,.03); transition: all .3s; }
|
||
.feat:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.06); }
|
||
.feat-ico { font-size: 1.6rem; margin-bottom: .5rem; }
|
||
.feat h3 { font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
|
||
.feat p { font-size: .75rem; color: var(--text2); }
|
||
|
||
/* ===== SVG SCENE DECORATIONS ===== */
|
||
.scene-deco { position: absolute; pointer-events: none; z-index: 1; opacity: .12; }
|
||
.scene-deco svg { display: block; }
|
||
.deco-mountains { bottom: 0; left: 0; right: 0; }
|
||
.deco-float { animation: decoFloat 6s ease-in-out infinite; }
|
||
.deco-drift { animation: decoDrift 20s linear infinite; }
|
||
.deco-wave { animation: decoWave 3s ease-in-out infinite; }
|
||
@keyframes decoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||
@keyframes decoDrift { 0% { transform: translateX(-100px); } 100% { transform: translateX(calc(100vw + 100px)); } }
|
||
@keyframes decoWave { 0%,100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(2deg); } 75% { transform: translateY(2px) rotate(-1deg); } }
|
||
|
||
/* Section dividers with landscape SVG */
|
||
.landscape-divider { position: relative; overflow: hidden; height: 80px; margin: -1px 0; }
|
||
.landscape-divider svg { position: absolute; bottom: 0; width: 100%; height: 100%; }
|
||
|
||
/* ===== HERO-ANIMATION: Boote, Vögel, Fachbegriffe-Drift ===== */
|
||
.hero-anim { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
|
||
.hero-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(74,124,138,0.08) 30%, rgba(74,124,138,0.18) 100%); }
|
||
/* Boote — outer Wrapper macht horizontale Drift, inner Element macht Wippen.
|
||
Zwei Animationen auf demselben Element würden sich auf transform überschreiben. */
|
||
.hero-boat { position: absolute; will-change: transform; opacity: .9; left: -300px; }
|
||
.hero-boat-inner { display: inline-block; will-change: transform; }
|
||
|
||
/* Segelyacht 1 — fern (hinteres Drittel des Meers, klein, leicht entsättigt), segelt nach rechts */
|
||
.boat-sail { bottom: 30%; animation: driftRight 75s linear infinite;
|
||
opacity: .7; filter: saturate(.85); transform-origin: left center; }
|
||
.boat-sail .hero-boat-inner { animation: bobSail 5.5s ease-in-out infinite; transform-origin: left center; }
|
||
|
||
/* Segelyacht 2 — näher (weiter vorne, größer, mit Startnummer 26 in Orange), segelt nach links */
|
||
.boat-sail-2 { bottom: 18%; left: auto; right: -300px; opacity: .95;
|
||
animation: driftLeft 55s linear infinite; animation-delay: -22s;
|
||
transform-origin: right center; }
|
||
.boat-sail-2 .hero-boat-inner { animation: bobSail2 4.2s ease-in-out infinite; transform-origin: right center; }
|
||
|
||
/* Containerschiff — ganz weit hinten am Horizont, sehr langsamer Transit
|
||
(deutlich langsamer als die Segler), kreuzt ≈1× pro 6 Min.
|
||
Sehr klein und stark entsättigt (atmosphärische Perspektive). Segelt nach links. */
|
||
.boat-container { bottom: 37%; left: auto; right: -400px; opacity: .35;
|
||
filter: saturate(.4);
|
||
animation: passContainer 360s linear infinite;
|
||
transform-origin: right center; }
|
||
.boat-container .hero-boat-inner { animation: bobContainer 9s ease-in-out infinite; transform-origin: right center; }
|
||
|
||
/* Drift-Keyframes + Sail-Bob (Scale + sanftes Wippen kombiniert) */
|
||
@keyframes driftRight { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 500px)); } }
|
||
@keyframes driftLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100vw - 500px)); } }
|
||
/* Container-Pass: in ~120s (33%) extra-langsam durchqueren, dann 240s versteckt → ≈1× pro 6 Min */
|
||
@keyframes passContainer {
|
||
0% { transform: translateX(0); }
|
||
33% { transform: translateX(calc(-100vw - 700px)); }
|
||
100% { transform: translateX(calc(-100vw - 700px)); }
|
||
}
|
||
@keyframes bobSail {
|
||
0%,100% { transform: scale(.32) translateY(0); }
|
||
50% { transform: scale(.32) translateY(-10px); }
|
||
}
|
||
@keyframes bobSail2 {
|
||
0%,100% { transform: scale(.5) translateY(0); }
|
||
50% { transform: scale(.5) translateY(-8px); }
|
||
}
|
||
@keyframes bobContainer {
|
||
0%,100% { transform: scale(.28) translateY(0); }
|
||
50% { transform: scale(.28) translateY(-2px); }
|
||
}
|
||
/* Vögel */
|
||
.hero-bird { position: absolute; top: 0; left: 0; width: 32px; will-change: transform; opacity: .55; }
|
||
/* animation-fill-mode: backwards → Vogel sitzt während des Delays in seinem
|
||
0%-Keyframe-Zustand (off-screen), nicht in der Ursprungs-Position top-left. */
|
||
.hero-bird-1 { animation: birdFly1 18s linear infinite; animation-delay: 0s; animation-fill-mode: backwards; }
|
||
.hero-bird-2 { animation: birdFly2 22s linear infinite; animation-delay: 6s; animation-fill-mode: backwards; transform-origin: 50% 50%; }
|
||
.hero-bird-3 { animation: birdFly3 25s linear infinite; animation-delay: 12s; animation-fill-mode: backwards; }
|
||
@keyframes birdFly1 { 0% { transform: translate(-60px, 40px) rotate(8deg); } 100% { transform: translate(calc(100vw + 60px), 30px) rotate(-3deg); } }
|
||
@keyframes birdFly2 { 0% { transform: translate(calc(100vw + 60px), 80px) rotate(-5deg) scaleX(-1); } 100% { transform: translate(-60px, 70px) rotate(2deg) scaleX(-1); } }
|
||
@keyframes birdFly3 { 0% { transform: translate(-60px, 110px) rotate(-2deg); } 100% { transform: translate(calc(100vw + 60px), 130px) rotate(4deg); } }
|
||
.hero-bird svg path { animation: wingFlap 0.6s ease-in-out infinite; transform-origin: center; }
|
||
@keyframes wingFlap { 0%, 100% { d: path('M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z'); } 50% { d: path('M0,8 Q6,12 12,8 Q18,12 24,8 Q18,8 12,8 Q6,8 0,8 Z'); } }
|
||
/* Fachbegriffe-Drift */
|
||
.hero-words { position: absolute; inset: 0; pointer-events: none; }
|
||
.hero-word { position: absolute; font-family: var(--display, 'Fraunces', Georgia, serif); font-weight: 700; font-style: italic; color: var(--fjord); opacity: .07; white-space: nowrap; will-change: transform; font-size: clamp(1.4rem, 3vw, 2.8rem); }
|
||
.hero-word.hw-1 { top: 18%; left: -300px; animation: wordDrift 80s linear infinite; }
|
||
.hero-word.hw-2 { top: 32%; left: -300px; animation: wordDrift 95s linear infinite; animation-delay: -25s; }
|
||
.hero-word.hw-3 { top: 58%; left: -300px; animation: wordDrift 110s linear infinite; animation-delay: -55s; }
|
||
.hero-word.hw-4 { top: 72%; left: -300px; animation: wordDrift 70s linear infinite; animation-delay: -10s; }
|
||
.hero-word.hw-5 { top: 8%; left: -300px; animation: wordDrift 100s linear infinite; animation-delay: -65s; }
|
||
.hero-word.hw-6 { top: 45%; left: -300px; animation: wordDrift 88s linear infinite; animation-delay: -38s; }
|
||
@keyframes wordDrift { 0% { transform: translateX(0); } 100% { transform: translateX(calc(100vw + 600px)); } }
|
||
@media (max-width: 700px) { .hero-bird, .hero-word { display: none; } }
|
||
|
||
/* ===== HERO-PILLS (Lehrplan, Glossar) ===== */
|
||
.hero-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
|
||
.hero-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; background: var(--white); border: 1.5px solid rgba(31,75,55,.18); border-radius: 99px; font-size: .78rem; font-weight: 600; color: var(--fjord); text-decoration: none; transition: all .2s; }
|
||
.hero-pill:hover { border-color: var(--fjord); background: var(--fjord-l); transform: translateY(-2px); }
|
||
/* Catcher-Pill: Glossar als visuelles Verkaufsargument (orange-akzentuiert) */
|
||
.hero-pill.catcher { border-color: #e8833a; color: #e8833a; }
|
||
.hero-pill.catcher:hover { border-color: #e8833a; background: #fde8d0; }
|
||
|
||
/* ===== FACHARTIKEL-SEKTION ===== */
|
||
.articles-sec { padding: 4rem 0 3rem; background: var(--bg2); }
|
||
.articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
|
||
.article-card { background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04); transition: all .3s; display: flex; flex-direction: column; }
|
||
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); border-color: rgba(74,124,138,.2); }
|
||
.article-cover { height: 200px; background: var(--fjord-l); position: relative; overflow: hidden; }
|
||
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.article-cover::after { content: 'FACHARTIKEL'; position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--fjord); padding: .15rem .55rem; border-radius: 4px; font-size: .58rem; font-weight: 800; letter-spacing: .06em; z-index: 2; }
|
||
.article-body { padding: 1.4rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
|
||
.article-body h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: .4rem; line-height: 1.25; }
|
||
.article-body p { font-size: .85rem; color: var(--text2); margin-bottom: 1rem; line-height: 1.55; flex: 1; }
|
||
.article-meta { font-size: .68rem; color: var(--text3); margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .04em; }
|
||
.article-cta { align-self: flex-start; padding: .55rem 1rem; background: var(--fjord); color: var(--white); border-radius: 8px; font-weight: 700; font-size: .8rem; text-decoration: none; transition: all .2s; }
|
||
.article-cta:hover { background: #3d6671; transform: translateY(-1px); }
|
||
@media (max-width: 700px) { .articles-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* ===== CTA ===== */
|
||
.cta { text-align: center; padding: 5rem 2rem; }
|
||
.cta h2 { font-size: 2.5rem; font-weight: 900; letter-spacing: -.03em; }
|
||
.cta h2 em { font-style: normal; color: var(--fjord); }
|
||
.cta p { color: var(--text2); margin: .5rem 0 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer { padding: 1.5rem; text-align: center; color: var(--text3); font-size: .72rem; border-top: 1px solid rgba(0,0,0,.04); }
|
||
footer a { color: var(--fjord); text-decoration: none; }
|
||
|
||
/* ===== USER PILL (logged in state) ===== */
|
||
.user-pill { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .4rem; background: var(--fjord-l); border-radius: 99px; font-size: .75rem; font-weight: 600; color: var(--fjord); text-decoration: none; }
|
||
.user-pill .emoji { font-size: 1.1rem; }
|
||
|
||
/* ===== SCROLL REVEAL ===== */
|
||
.reveal { opacity: 0; transform: translateY(40px); transition: all .8s cubic-bezier(.22,1,.36,1); }
|
||
.reveal.visible { opacity: 1; transform: translateY(0); }
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 900px) {
|
||
.hero-content { grid-template-columns: 1fr; text-align: center; }
|
||
.hero-text .lead { margin: 0 auto .8rem; }
|
||
.hero-btns { justify-content: center; }
|
||
.hero-visual { display: none; }
|
||
.feat-grid { grid-template-columns: 1fr; }
|
||
.sim-grid { grid-template-columns: repeat(2, 1fr) !important; }
|
||
.value-grid { grid-template-columns: 1fr; }
|
||
.steps { grid-template-columns: repeat(2, 1fr); }
|
||
.step::after { display: none; }
|
||
.nav-links { gap: 0; }
|
||
.nav-links .hide-m { display: none; }
|
||
}
|
||
@media (max-width: 550px) {
|
||
.sim-grid { grid-template-columns: 1fr !important; }
|
||
.steps { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav class="nav" id="nav">
|
||
<div class="w">
|
||
<a href="#" class="nav-brand"><img src="assets/img/geograsim_t.svg" alt="GeoGraSim"></a>
|
||
<div class="nav-links">
|
||
<a href="#sims" class="hide-m">Simulationen</a>
|
||
<a href="#fuer-lehrkraefte" class="hide-m">Lehrperson</a>
|
||
<a href="lehrplan" class="hide-m">Lehrplan</a>
|
||
<a href="forschung/" class="hide-m">Forschung</a>
|
||
<a href="handbuch.html" class="hide-m">Handbuch</a>
|
||
<a href="kontakt.html" class="hide-m">Kontakt</a>
|
||
<span id="nav-auth"></span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<canvas id="sc"></canvas>
|
||
|
||
<!-- Hero-Animation: Fachbegriffe driften, Vögel ziehen, Boote segeln -->
|
||
<div class="hero-anim" aria-hidden="true">
|
||
<div class="hero-words">
|
||
<span class="hero-word hw-1">Klimawandel</span>
|
||
<span class="hero-word hw-2">Topografie</span>
|
||
<span class="hero-word hw-3">Mitentscheidung</span>
|
||
<span class="hero-word hw-4">Klimazonen</span>
|
||
<span class="hero-word hw-5">Hochwasserschutz</span>
|
||
<span class="hero-word hw-6">Pumpspeicher</span>
|
||
</div>
|
||
<!-- Drei Vögel im V-Flug -->
|
||
<div class="hero-bird hero-bird-1">
|
||
<svg viewBox="0 0 24 16" width="32" height="22"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#1f4e5a"/></svg>
|
||
</div>
|
||
<div class="hero-bird hero-bird-2">
|
||
<svg viewBox="0 0 24 16" width="26" height="18"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#4a7c8a"/></svg>
|
||
</div>
|
||
<div class="hero-bird hero-bird-3">
|
||
<svg viewBox="0 0 24 16" width="22" height="16"><path d="M0,8 Q6,2 12,8 Q18,2 24,8 Q18,6 12,6 Q6,6 0,8 Z" fill="#1f4e5a"/></svg>
|
||
</div>
|
||
<div class="hero-sea"></div>
|
||
|
||
<!-- Containerschiff — weit hinten am Horizont, kreuzt nur 1× pro 2 Min (links) -->
|
||
<div class="hero-boat boat-container"><div class="hero-boat-inner">
|
||
<img src="assets/img/containerschiff.svg" alt="" width="320" height="60">
|
||
</div></div>
|
||
|
||
<!-- Segelyacht 1 — fährt fern im hinteren Drittel des Meeres, klein/leicht entsättigt -->
|
||
<div class="hero-boat boat-sail"><div class="hero-boat-inner">
|
||
<img src="assets/img/segelyacht.svg" alt="" width="170" height="125">
|
||
</div></div>
|
||
|
||
<!-- Segelyacht 2 — fährt näher/größer in Gegenrichtung, Startnummer 26 in Orange -->
|
||
<div class="hero-boat boat-sail-2"><div class="hero-boat-inner">
|
||
<img src="assets/img/segelyacht-race.svg" alt="" width="170" height="125">
|
||
</div></div>
|
||
|
||
</div>
|
||
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<h1>Geografie<br><em>erleben.</em><br>Nicht nur lesen.</h1>
|
||
<p class="lead">Interaktive Simulationen für den GW-Unterricht. Klimawandel verstehen. Städte planen. Flüsse managen. Evidenzbasiert und lehrplankonform.</p>
|
||
<div class="hero-btns">
|
||
<a href="#sims" class="btn btn-p">Jetzt ausprobieren</a>
|
||
<a href="#fuer-lehrkraefte" class="btn btn-o">Für Lehrpersonen</a>
|
||
</div>
|
||
<div class="hero-pills">
|
||
<a href="lehrplan" class="hero-pill">📋 Lehrplan-Bezug 1. - 4. Klasse</a>
|
||
<a href="glossar" class="hero-pill catcher">📚 Glossar · <span data-glossar-count>140</span> Begriffe — alle bebildert</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-card">
|
||
<img src="assets/img/card-climate.webp" alt="Klimasimulation">
|
||
<div class="hero-card-body">
|
||
<h3>Klimasimulator 3D</h3>
|
||
<p>Inselstaat durch die Klimakrise führen. Kostenlos ausprobieren.</p>
|
||
</div>
|
||
</div>
|
||
<div class="hero-mini hero-mini-1">3 Module sofort testen</div>
|
||
<div class="hero-mini hero-mini-2">Lernen mit Simulationen</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SVG Landscape Divider: Mountains + Trees -->
|
||
<div class="landscape-divider" style="background:var(--bg)">
|
||
<svg viewBox="0 0 1440 80" preserveAspectRatio="none">
|
||
<!-- Mountains -->
|
||
<path d="M0,80 L120,25 L200,55 L320,10 L440,45 L520,20 L640,50 L720,15 L840,40 L960,8 L1080,35 L1160,18 L1280,42 L1360,12 L1440,38 L1440,80 Z" fill="#8a9a82" opacity=".15"/>
|
||
<path d="M0,80 L80,45 L180,60 L280,30 L400,55 L500,35 L620,58 L740,28 L860,50 L980,32 L1100,52 L1200,38 L1320,55 L1440,40 L1440,80 Z" fill="#5a8a5e" opacity=".1"/>
|
||
<!-- Trees -->
|
||
<g fill="#5a8a5e" opacity=".12">
|
||
<path d="M100,80 L108,55 L96,58 L104,40 L92,43 L100,28 L108,43 L96,40 L104,58 L92,55 Z"/>
|
||
<path d="M300,80 L308,58 L296,61 L304,45 L292,48 L300,35 L308,48 L296,45 L304,61 L292,58 Z"/>
|
||
<path d="M500,80 L507,60 L494,63 L502,48 L490,51 L500,38 L510,51 L498,48 L506,63 L494,60 Z"/>
|
||
<path d="M750,80 L758,55 L746,58 L754,40 L742,43 L750,28 L758,43 L746,40 L754,58 L742,55 Z"/>
|
||
<path d="M1000,80 L1007,62 L995,64 L1003,50 L991,52 L1000,40 L1009,52 L997,50 L1005,64 L993,62 Z"/>
|
||
<path d="M1200,80 L1208,56 L1196,59 L1204,42 L1192,45 L1200,30 L1208,45 L1196,42 L1204,59 L1192,56 Z"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
|
||
<!-- ======================== SIMULATIONEN ======================== -->
|
||
<section class="sec" id="sims" style="padding-top:3rem">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Jetzt ausprobieren</span>
|
||
<h2 class="sec-title">Drei Simulationen.<br>Sofort testen.</h2>
|
||
<p class="sec-sub">Einfach starten und Geografie erleben — oder erst mehr über Lehrplan-Bezug und Lernziele lesen.</p>
|
||
</div>
|
||
<div class="sim-grid reveal">
|
||
|
||
<!-- FREE: Klimasimulator 3D -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.webp" alt="Klimasimulator 3D"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Klimasimulator 3D <span class="badge-free">TESTEN</span></h3>
|
||
<p>Führe einen Inselstaat durch 75 Jahre Klimakrise. Steigende Meeresspiegel, Extremwetter, politische Entscheidungen.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">20 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="klima-3d" class="sim-btn sim-btn-primary">▶ Simulation starten</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FREE: Sonnensystem -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-sonnensystem.webp" alt="Sonnensystem"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Sonnensystem <span class="badge-free">TESTEN</span></h3>
|
||
<p>Sonne, Erde und Mond als 3D-Modell. Tag und Nacht, Jahreszeiten, Sonnen- und Mondfinsternis selbst beobachten.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">15 – 25 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-sonnensystem" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="sonnensystem" class="sim-btn sim-btn-primary">▶ Simulation starten</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FREE: Heli-Navigation -->
|
||
<div class="sim-card split">
|
||
<div class="sim-card-img"><img src="assets/img/card-heli.webp" alt="Heli-Navigation"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Heli-Navigation <span class="badge-free">TESTEN</span></h3>
|
||
<p>Rettungsflüge in den Alpen: Koordinaten lesen, Höhenstufen interpretieren, Einsatzplanung unter Zeitdruck.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span><span class="sim-tag st-time">40 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-heli" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="heli-game" class="sim-btn sim-btn-primary">▶ Simulation starten</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======================== WEITERE MODULE ======================== -->
|
||
<section class="sec" style="padding-top:1rem">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Im Unterricht</span>
|
||
<h2 class="sec-title">Weitere Module —<br>mit Begleitung der Lehrperson.</h2>
|
||
<p class="sec-sub">Diese Simulationen entfalten ihren vollen Wert im begleiteten Unterricht: mit Lernzielen, Assessment und Ergebnissicherung.</p>
|
||
</div>
|
||
<div class="sim-grid reveal">
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-climate.webp" alt="Klimasimulator 2D"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Klimasimulator 2D</h3>
|
||
<p>Dieselbe Klimasimulation in 2D-Ansicht. Ideal für ältere Geräte und barrierefreien Unterricht.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span><span class="sim-tag st-time">20 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-klima" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-fluss.webp" alt="Flussmanagement"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Flussmanagement</h3>
|
||
<p>Deiche bauen, Fluss begradigen oder renaturieren? Finde die Balance zwischen Hochwasserschutz, Ökologie und Wirtschaft.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">10 – 35 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-fluss" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-eu-werkstatt.webp" alt="EU-Werkstatt"></div>
|
||
<div class="sim-card-body">
|
||
<h3>EU-Werkstatt</h3>
|
||
<p>Wie ein EU-Gesetz entsteht — zehn echte Fälle von der Bürgerinitiative bis zum Mitentscheidungsverfahren.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st3">3.–4. Klasse</span><span class="sim-tag st-time">20 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-eu-werkstatt" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-farmer.webp" alt="Landwirtschaft"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Landwirtschaft</h3>
|
||
<p>Bau auf der Welt-Karte Pflanzen an und halte Tiere. Lerne durch wiederholte Versuche, welche Region welcher Pflanze gerecht wird.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2.–3. Klasse</span><span class="sim-tag st-time">25 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-farmer" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-busfahrt.webp" alt="Busfahrt"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Busfahrt</h3>
|
||
<p>Topografie Europa: Aufträge kommen rein („Fahre nach Paris"), tippe die richtige Stadt auf der Karte. Drei Versuche pro Auftrag.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1.–2. Klasse</span><span class="sim-tag st-time">15 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-busfahrt" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-energiemanager.webp" alt="Energiemanager"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Energiemanager</h3>
|
||
<p>Strom durch den Tag balancieren: Pumpspeicher hoch- und runterfahren, je nach Wetter und Verbrauch. 18 Tagesszenarien.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2.–3. Klasse</span><span class="sim-tag st-time">20 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-energiemanager" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split">
|
||
<div class="sim-card-img"><img src="assets/img/card-logistik.webp" alt="Logistik Europa"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Logistik Europa</h3>
|
||
<p>Plane Transportaufträge quer durch Europa. Wähle Fahrzeuge, beachte Fristen, vermeide Leerfahrten.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st3">3.–4. Klasse</span><span class="sim-tag st-time">30 min</span></div>
|
||
<div class="sim-card-cta">
|
||
<a href="modul-logistik" class="sim-btn sim-btn-secondary">📖 Mehr erfahren</a>
|
||
<a href="login.html" class="sim-btn sim-btn-disabled">🔒 Anmelden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<p style="text-align:center;margin-top:1.5rem;font-size:.85rem;color:var(--text2)" class="reveal">
|
||
Alle Module sind im begleiteten Unterricht verfügbar. <a href="login.html" style="color:var(--fjord);font-weight:600;text-decoration:none">Jetzt anmelden</a> oder <a href="handbuch.html" style="color:var(--fjord);font-weight:600;text-decoration:none">Handbuch lesen</a>.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======================== IN KÜRZE ======================== -->
|
||
<section class="sec" style="padding-top:1rem">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">In Vorbereitung</span>
|
||
<h2 class="sec-title">In Kürze.</h2>
|
||
<p class="sec-sub">Diese Module sind in Entwicklung. Sobald sie fertig sind, kommen sie hier hoch.</p>
|
||
</div>
|
||
<div class="sim-grid reveal">
|
||
|
||
<div class="sim-card locked split" style="opacity:.65">
|
||
<div class="sim-card-img"><img src="assets/img/card-city.webp" alt="Stadt & Raumplanung"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Stadt & Raumplanung <span style="font-size:.7rem;background:#fde8d0;color:#a37800;padding:.1rem .5rem;border-radius:5px">🚧 In Kürze</span></h3>
|
||
<p>Plane eine Stadt mit Wohngebieten, Gewerbe, Infrastruktur. Nutzungskonflikte und Standortentscheidungen erleben.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st3">3. Klasse</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split" style="opacity:.65">
|
||
<div class="sim-card-img"><img src="assets/img/card-tectonic.webp" alt="Erdbeben"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Erdbeben & Plattentektonik <span style="font-size:.7rem;background:#fde8d0;color:#a37800;padding:.1rem .5rem;border-radius:5px">🚧 In Kürze</span></h3>
|
||
<p>50 Jahre Stadtplanung in einer Erdbebenzone. Bauqualität und Vorsorge entscheiden über Überleben.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split" style="opacity:.65">
|
||
<div class="sim-card-img"><img src="assets/img/card-globe.webp" alt="Regenwald"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Regenwald-Expedition <span style="font-size:.7rem;background:#fde8d0;color:#a37800;padding:.1rem .5rem;border-radius:5px">🚧 In Kürze</span></h3>
|
||
<p>Fahre mit dem Boot den Fluss hoch. Entdecke Tiere, Pflanzen und Menschen vom Delta bis zum Nebelwald.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st1">1. Klasse</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split" style="opacity:.65">
|
||
<div class="sim-card-img"><img src="assets/img/card-energy.webp" alt="Energiemix"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Energiemix <span style="font-size:.7rem;background:#fde8d0;color:#a37800;padding:.1rem .5rem;border-radius:5px">🚧 In Kürze</span></h3>
|
||
<p>Stelle den Energiemix eines Landes zusammen. Sonne, Wind, Wasser, Gas, Kohle — wann kommt der Blackout?</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sim-card locked split" style="opacity:.65">
|
||
<div class="sim-card-img"><img src="assets/img/card-globe.webp" alt="Lieferketten"></div>
|
||
<div class="sim-card-body">
|
||
<h3>Lieferketten <span style="font-size:.7rem;background:#fde8d0;color:#a37800;padding:.1rem .5rem;border-radius:5px">🚧 In Kürze</span></h3>
|
||
<p>Folge Rohstoffen und Waren um die Welt. Sieh Arbeitsbedingungen, CO₂-Fußabdruck und Fairness.</p>
|
||
<div class="sim-card-tags"><span class="sim-tag st2">2. Klasse</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======================== FACHARTIKEL ======================== -->
|
||
<section class="sec articles-sec">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Forschung & Didaktik</span>
|
||
<h2 class="sec-title">Wissenschaftlich<br>fundiert.</h2>
|
||
<p class="sec-sub">Zwei Fachartikel als Hintergrund: Wirkung von Simulationen im Geografieunterricht und der aktuelle Stand der Geografie-Didaktik in der Sekundarstufe I.</p>
|
||
</div>
|
||
<div class="articles-grid reveal">
|
||
<article class="article-card">
|
||
<div class="article-cover"><img src="assets/img/articles/lernen-durch-simulation.png" alt="Lernen durch Simulation"></div>
|
||
<div class="article-body">
|
||
<div class="article-meta">Fachartikel · Sekundarstufe I</div>
|
||
<h3>Lernen durch Simulation</h3>
|
||
<p>Wie wirken interaktive Simulationen im Unterricht — kognitiv, motivational, didaktisch? Forschungsstand, Mechanismen und Gestaltungsprinzipien für GW-Lehrkräfte.</p>
|
||
<a href="forschung/lernen-durch-simulation.html" class="article-cta" target="_blank" rel="noopener">Artikel öffnen →</a>
|
||
</div>
|
||
</article>
|
||
<article class="article-card">
|
||
<div class="article-cover"><img src="assets/img/articles/geografie-didaktik.png" alt="Geografie unterrichten"></div>
|
||
<div class="article-body">
|
||
<div class="article-meta">Fachartikel · GW-Lehrplan 2023</div>
|
||
<h3>Geografie unterrichten in der Sekundarstufe I</h3>
|
||
<p>Aktuelle Geografie-Didaktik nach österreichischem Lehrplan: Kompetenzen, Schülervorstellungen, Inklusion, Differenzierung und Sprachsensibilität.</p>
|
||
<a href="forschung/geografie-didaktik.html" class="article-cta" target="_blank" rel="noopener">Artikel öffnen →</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SVG Divider: City Skyline + Water -->
|
||
<div class="landscape-divider" style="height:100px;background:var(--bg)">
|
||
<svg viewBox="0 0 1440 100" preserveAspectRatio="none">
|
||
<!-- City skyline -->
|
||
<g fill="#1f4e5a" opacity=".08">
|
||
<rect x="80" y="40" width="25" height="60"/>
|
||
<rect x="110" y="55" width="20" height="45"/>
|
||
<rect x="135" y="30" width="15" height="70" rx="1"/>
|
||
<rect x="155" y="50" width="22" height="50"/>
|
||
<rect x="400" y="45" width="18" height="55"/>
|
||
<rect x="422" y="35" width="12" height="65" rx="1"/>
|
||
<rect x="438" y="55" width="25" height="45"/>
|
||
<rect x="468" y="42" width="14" height="58"/>
|
||
<rect x="800" y="38" width="20" height="62"/>
|
||
<rect x="825" y="50" width="16" height="50"/>
|
||
<rect x="845" y="28" width="12" height="72" rx="1"/>
|
||
<rect x="862" y="48" width="22" height="52"/>
|
||
<rect x="1100" y="52" width="18" height="48"/>
|
||
<rect x="1122" y="40" width="14" height="60"/>
|
||
<rect x="1140" y="55" width="24" height="45"/>
|
||
<!-- Windows (tiny dots) -->
|
||
<rect x="84" y="48" width="3" height="3" fill="#e8833a" opacity=".5"/>
|
||
<rect x="92" y="48" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||
<rect x="84" y="56" width="3" height="3" fill="#e8833a" opacity=".4"/>
|
||
<rect x="92" y="56" width="3" height="3" fill="#e8833a" opacity=".6"/>
|
||
<rect x="84" y="64" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||
<rect x="406" y="52" width="2" height="2" fill="#e8833a" opacity=".5"/>
|
||
<rect x="412" y="52" width="2" height="2" fill="#e8833a" opacity=".3"/>
|
||
<rect x="406" y="58" width="2" height="2" fill="#e8833a" opacity=".4"/>
|
||
<rect x="806" y="46" width="3" height="3" fill="#e8833a" opacity=".5"/>
|
||
<rect x="813" y="46" width="3" height="3" fill="#e8833a" opacity=".3"/>
|
||
<rect x="806" y="54" width="3" height="3" fill="#e8833a" opacity=".4"/>
|
||
</g>
|
||
<!-- Water waves -->
|
||
<path d="M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z" fill="#4a7c8a" opacity=".06">
|
||
<animate attributeName="d" dur="4s" repeatCount="indefinite"
|
||
values="M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z;
|
||
M0,90 Q60,84 120,90 Q180,96 240,90 Q300,84 360,90 Q420,96 480,90 Q540,84 600,90 Q660,96 720,90 Q780,84 840,90 Q900,96 960,90 Q1020,84 1080,90 Q1140,96 1200,90 Q1260,84 1320,90 Q1380,96 1440,90 L1440,100 L0,100 Z;
|
||
M0,88 Q60,82 120,88 Q180,94 240,88 Q300,82 360,88 Q420,94 480,88 Q540,82 600,88 Q660,94 720,88 Q780,82 840,88 Q900,94 960,88 Q1020,82 1080,88 Q1140,94 1200,88 Q1260,82 1320,88 Q1380,94 1440,88 L1440,100 L0,100 Z"/>
|
||
</path>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- ======================== WERT-VERSPRECHEN (Lehrkraefte) ======================== -->
|
||
<section class="sec value-sec" id="fuer-lehrkraefte">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Für Lehrpersonen</span>
|
||
<h2 class="sec-title">Simulationen wirken im Unterricht.<br>Nicht als Einzelerlebnis.</h2>
|
||
</div>
|
||
<div class="value-grid reveal">
|
||
<div class="value-text">
|
||
<p>
|
||
Jede Simulation ist für eine 45-Minuten-Einheit konzipiert: mit Hinleitung, Vorhersage, Durchführung, Auswertung und Reflexion. Das didaktische Modell basiert auf <strong>Predict–Observe–Explain</strong> — Schüler*innen formulieren zuerst eine Hypothese, beobachten dann die Simulation und erklären abschließend die Abweichung.
|
||
</p>
|
||
<p>
|
||
Der eigentliche Wert liegt nicht in der Software allein, sondern in der <strong>Einbettung im Unterricht</strong>: Lehrpersonen steuern, welche Module wann freigeschaltet sind, begleiten den Lernprozess und sichern Ergebnisse.
|
||
</p>
|
||
<ul class="value-list">
|
||
<li><span class="vi">📊</span> <span><strong>Dashboard:</strong> Echtzeit-Überblick über Fortschritt, Ergebnisse und Fehlkonzepte aller Schüler*innen</span></li>
|
||
<li><span class="vi">🔒</span> <span><strong>Modulsteuerung:</strong> Module einzeln freischalten, sperren oder auf Knopfdruck starten</span></li>
|
||
<li><span class="vi">👩🎓</span> <span><strong>Anonyme Zugänge:</strong> Automatisch generierte Benutzernamen — DSGVO-konform, kein Aufwand mit Schüler*innendaten</span></li>
|
||
<li><span class="vi">🎫</span> <span><strong>Einladungstickets:</strong> PDF mit Zugangsdaten zum Ausdrucken und Verteilen</span></li>
|
||
<li><span class="vi">📖</span> <span><strong>Didaktisches Handbuch:</strong> Zu jedem Modul ein fertiger Unterrichtsentwurf für 45 Minuten</span></li>
|
||
<li><span class="vi">🎯</span> <span><strong>Lehrplan 2023:</strong> Alle Module auf den österreichischen GW-Lehrplan gemapped</span></li>
|
||
</ul>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;gap:1rem">
|
||
<div class="feat"><div class="feat-ico">1.</div><h3>Registrieren</h3><p>E-Mail-Adresse als Benutzername. Kostenlos starten.</p></div>
|
||
<div class="feat"><div class="feat-ico">2.</div><h3>Klasse anlegen</h3><p>Schüler*innen-Zugänge automatisch generieren oder Daten einzeln eingeben.</p></div>
|
||
<div class="feat"><div class="feat-ico">3.</div><h3>Modul freischalten</h3><p>Bestimmen Sie, welche Simulation wann gespielt wird.</p></div>
|
||
<div class="feat"><div class="feat-ico">4.</div><h3>Ergebnisse sichern</h3><p>Alle Entscheidungen, Vorhersagen und Reflexionen werden gespeichert.</p></div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:2.5rem" class="reveal">
|
||
<a href="login.html" class="btn btn-p" style="padding:.7rem 2rem;font-size:.9rem">Jetzt als Lehrperson registrieren</a>
|
||
<a href="handbuch.html" class="btn btn-o" style="margin-left:.6rem">Handbuch lesen</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ======================== FEATURES ======================== -->
|
||
<section class="sec" id="features">
|
||
<div class="w">
|
||
<div class="reveal">
|
||
<span class="label">Features</span>
|
||
<h2 class="sec-title">Für Schüler*innen und Lehrpersonen.</h2>
|
||
</div>
|
||
<div class="feat-grid reveal">
|
||
<div class="feat"><div class="feat-ico">📊</div><h3>Dashboard</h3><p>Echtzeit-Überblick, Ergebnisvergleich, Fehlkonzept-Erkennung.</p></div>
|
||
<div class="feat"><div class="feat-ico">♿</div><h3>Inklusion</h3><p>Vereinfachte Sprache, flexible Zeiten, barrierefreie Bedienung.</p></div>
|
||
<div class="feat"><div class="feat-ico">🎯</div><h3>Lehrplan 2023</h3><p>Alle Kompetenzziele und Basiskonzepte referenziert. DACH-kompatibel.</p></div>
|
||
<div class="feat"><div class="feat-ico">⚙️</div><h3>Steuerbar</h3><p>Module freischalten, Schwierigkeit und Zeitlimits anpassen.</p></div>
|
||
<div class="feat"><div class="feat-ico">📈</div><h3>Assessment</h3><p>Predict–Observe–Explain eingebaut. Prozess- und Ergebnisdaten.</p></div>
|
||
<div class="feat"><div class="feat-ico">🔐</div><h3>DSGVO-konform</h3><p>Anonyme Pseudonyme, keine personenbezogenen Daten nötig. Hosting in Europa.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SVG Divider: Mountain + Forest panorama -->
|
||
<div class="landscape-divider" style="height:90px;background:var(--bg)">
|
||
<svg viewBox="0 0 1440 90" preserveAspectRatio="none">
|
||
<!-- Far mountains -->
|
||
<path d="M0,90 L0,60 Q100,35 200,55 Q280,25 380,50 Q460,18 560,45 Q640,12 720,40 Q800,20 900,48 Q980,15 1060,42 Q1140,22 1240,50 Q1320,30 1440,55 L1440,90 Z" fill="#1f4e5a" opacity=".06"/>
|
||
<!-- Near hills -->
|
||
<path d="M0,90 L0,70 Q120,55 240,68 Q360,50 480,65 Q600,48 720,62 Q840,52 960,66 Q1080,50 1200,64 Q1320,55 1440,68 L1440,90 Z" fill="#5a8a5e" opacity=".08"/>
|
||
<!-- Trees on hills -->
|
||
<g fill="#5a8a5e" opacity=".1">
|
||
<path d="M200,68 L206,52 L194,55 L200,42 L206,55 L194,52 Z"/>
|
||
<path d="M215,70 L220,58 L210,60 L215,50 L220,60 L210,58 Z"/>
|
||
<path d="M550,65 L556,50 L544,53 L550,40 L556,53 L544,50 Z"/>
|
||
<path d="M565,67 L570,56 L560,58 L565,48 L570,58 L560,56 Z"/>
|
||
<path d="M900,66 L906,51 L894,54 L900,41 L906,54 L894,51 Z"/>
|
||
<path d="M920,68 L925,57 L915,59 L920,49 L925,59 L915,57 Z"/>
|
||
<path d="M1250,64 L1256,50 L1244,53 L1250,40 L1256,53 L1244,50 Z"/>
|
||
</g>
|
||
<!-- Subtle cloud -->
|
||
<ellipse cx="350" cy="25" rx="50" ry="10" fill="#fff" opacity=".15">
|
||
<animate attributeName="cx" values="350;380;350" dur="12s" repeatCount="indefinite"/>
|
||
</ellipse>
|
||
<ellipse cx="1000" cy="20" rx="40" ry="8" fill="#fff" opacity=".1">
|
||
<animate attributeName="cx" values="1000;1030;1000" dur="15s" repeatCount="indefinite"/>
|
||
</ellipse>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- ======================== CTA ======================== -->
|
||
<section class="cta reveal" style="position:relative;overflow:hidden">
|
||
<!-- Decorative mini landscape behind CTA -->
|
||
<svg style="position:absolute;bottom:0;left:0;right:0;height:60px;opacity:.05" viewBox="0 0 1440 60" preserveAspectRatio="none">
|
||
<path d="M0,60 L0,40 Q200,20 400,35 Q600,10 800,30 Q1000,15 1200,32 Q1350,20 1440,35 L1440,60 Z" fill="#4a7c8a"/>
|
||
<path d="M0,60 L0,48 Q300,35 600,45 Q900,30 1200,42 L1440,38 L1440,60 Z" fill="#5a8a5e"/>
|
||
</svg>
|
||
<h2 style="position:relative">Bereit, Geografie<br>zu <em>erleben</em>?</h2>
|
||
<p style="position:relative">Drei Module sofort testen. Alle Module mit Lehrpersonen-Konto.</p>
|
||
<div style="display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;position:relative">
|
||
<a href="#sims" class="btn btn-p" style="padding:.7rem 2rem;font-size:.9rem">Module ausprobieren</a>
|
||
<a href="login.html" class="btn btn-o">Anmelden / Registrieren</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div style="margin-bottom:.5rem"><img src="assets/img/bildLogo.png" alt="GeoGraSim" style="height:40px;opacity:.5"></div>
|
||
<p>GeoGraSim — Schroffenegger & Mößlang, 2026 · <a href="handbuch.html">Handbuch</a> · <a href="lehrplan">Lehrplan</a> · <a href="glossar">Glossar</a> · <a href="kontakt.html">Kontakt</a> · <a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a> · <a href="barrierefreiheit.html">Barrierefreiheit</a></p>
|
||
<p style="font-size:.62rem;margin-top:.3rem">
|
||
<a href="forschung/">Forschung-Übersicht</a> ·
|
||
<a href="forschung/geografie-didaktik.html">Aktueller Forschungsstand GW-Didaktik</a> ·
|
||
<a href="forschung/quellen-geografie.html">Literatur GW-Didaktik</a> ·
|
||
<a href="forschung/lernen-durch-simulation.html">Simulationen im Unterricht</a> ·
|
||
<a href="forschung/quellen-simulation.html">Literatur Simulation</a>
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
var BASE = (window.__GGS__?.baseUrl) || '';
|
||
if (!BASE) { var p = location.pathname, i = p.indexOf('/geograsim'); if (i !== -1) { var rest = p.substring(i + '/geograsim'.length); BASE = rest.indexOf('/App/') === 0 ? p.substring(0, i) + '/geograsim/App' : p.substring(0, i) + '/geograsim'; } }
|
||
|
||
// === GLOSSAR-ZAEHLER (dynamisch aus DB) ===
|
||
(async function() {
|
||
try {
|
||
var r = await fetch(BASE + '/api/glossar?count=1', { credentials: 'same-origin' });
|
||
if (!r.ok) return;
|
||
var d = await r.json();
|
||
if (d && d.count) {
|
||
document.querySelectorAll('[data-glossar-count]').forEach(function(el){ el.textContent = d.count; });
|
||
}
|
||
} catch (e) { /* Fallback: gerendeter Statik-Wert bleibt sichtbar */ }
|
||
})();
|
||
|
||
// === AUTH STATE ===
|
||
(async function() {
|
||
try {
|
||
var r = await fetch(BASE + '/api/auth', {
|
||
method: 'POST', headers: {'Content-Type':'application/json'}, credentials: 'same-origin',
|
||
body: JSON.stringify({action: 'status'})
|
||
});
|
||
var d = await r.json();
|
||
var el = document.getElementById('nav-auth');
|
||
if (d.role === 'teacher') {
|
||
el.innerHTML = '<a href="teacher.html" class="user-pill"><span class="emoji">👩🏫</span>' + (d.user?.display_name || 'Lehrperson') + '</a>';
|
||
// Sim-Cards für eingeloggte Lehrer:innen freischalten — Ziel ist das
|
||
// Schüler:innen-Cockpit, von dort wird die jeweilige Sim per Wrapper geöffnet.
|
||
document.querySelectorAll('.sim-card.locked').forEach(function(c) {
|
||
if (c.getAttribute('href') === 'login.html') c.href = 'schueler.html';
|
||
c.classList.remove('locked');
|
||
var ov = c.querySelector('.lock-overlay');
|
||
if (ov) ov.remove();
|
||
});
|
||
} else if (d.role === 'student') {
|
||
el.innerHTML = '<a href="profil.html" class="user-pill"><span class="emoji">🧑🎓</span>' + (d.session?.display_name || 'Schueler') + '</a>';
|
||
document.querySelectorAll('.sim-card.locked').forEach(function(c) {
|
||
if (c.getAttribute('href') === 'login.html') c.href = 'schueler.html';
|
||
c.classList.remove('locked');
|
||
var ov = c.querySelector('.lock-overlay');
|
||
if (ov) ov.remove();
|
||
});
|
||
} else {
|
||
el.innerHTML = '<a href="login.html" class="btn btn-p" style="margin-left:.3rem">Anmelden</a>';
|
||
}
|
||
} catch(e) {
|
||
document.getElementById('nav-auth').innerHTML = '<a href="login.html" class="btn btn-p" style="margin-left:.3rem">Anmelden</a>';
|
||
}
|
||
})();
|
||
|
||
// === NAV SCROLL ===
|
||
var nav = document.getElementById('nav');
|
||
window.addEventListener('scroll', function() { nav.classList.toggle('scrolled', scrollY > 50); });
|
||
|
||
// === SCROLL REVEAL ===
|
||
var obs = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
|
||
}, { threshold: 0.15 });
|
||
document.querySelectorAll('.reveal').forEach(function(el) { obs.observe(el); });
|
||
|
||
// === SCENIC CANVAS ===
|
||
var C = document.getElementById('sc'), X = C.getContext('2d');
|
||
var W, H, t = 0;
|
||
function resize() {
|
||
var dpr = devicePixelRatio || 1;
|
||
W = C.parentElement.offsetWidth; H = C.parentElement.offsetHeight;
|
||
C.width = W * dpr; C.height = H * dpr; X.scale(dpr, dpr);
|
||
}
|
||
resize(); addEventListener('resize', resize);
|
||
|
||
var cls = [];
|
||
for (var i = 0; i < 7; i++) cls.push({ x: Math.random()*1500, y: H*(.04+Math.random()*.18), w: 40+Math.random()*100, sp: .06+Math.random()*.14, op: .2+Math.random()*.4 });
|
||
|
||
function frame() {
|
||
t += .016; X.clearRect(0,0,W,H);
|
||
var wl = H * .56;
|
||
|
||
// Sky
|
||
var sk = X.createLinearGradient(0,0,0,wl);
|
||
sk.addColorStop(0,'#e8ebe4'); sk.addColorStop(.5,'#dde3d8'); sk.addColorStop(1,'#ced8ca');
|
||
X.fillStyle = sk; X.fillRect(0,0,W,wl);
|
||
|
||
// Sun glow
|
||
var sg = X.createRadialGradient(W*.78,H*.1,0,W*.78,H*.1,H*.3);
|
||
sg.addColorStop(0,'rgba(255,235,200,.3)'); sg.addColorStop(1,'rgba(255,235,200,0)');
|
||
X.fillStyle = sg; X.fillRect(0,0,W,wl);
|
||
|
||
// Mountains
|
||
[{c:'#c0caba',p:6,r:.05,h:.3},{c:'#a8b5a0',p:9,r:.08,h:.4},{c:'#8a9a82',p:12,r:.11,h:.5}].forEach(function(m) {
|
||
X.beginPath(); X.moveTo(0,wl);
|
||
var sw = W/m.p;
|
||
for(var j=0;j<=m.p;j++){
|
||
var px=j*sw, py=wl-wl*m.h*(.4+Math.sin(j*1.7+.3)*.3+Math.cos(j*.9)*m.r);
|
||
j===0?X.lineTo(px,py):X.quadraticCurveTo(px-sw*.4,py-wl*m.r*.2,px,py);
|
||
}
|
||
X.lineTo(W,wl); X.closePath(); X.fillStyle=m.c; X.fill();
|
||
});
|
||
|
||
// Water
|
||
var wg = X.createLinearGradient(0,wl,0,H);
|
||
wg.addColorStop(0,'#9ab5a8'); wg.addColorStop(.4,'#7a9a8a'); wg.addColorStop(1,'#5a7a6a');
|
||
X.fillStyle = wg; X.fillRect(0,wl,W,H-wl);
|
||
|
||
// Water shimmer
|
||
X.globalAlpha = .08;
|
||
for(var j=0;j<15;j++){
|
||
var wy = wl+10+j*(H-wl)/15;
|
||
X.beginPath(); X.moveTo(0,wy);
|
||
for(var k=0;k<W;k+=30) X.lineTo(k,wy+Math.sin(k*.01+t*1.5+j)*.8);
|
||
X.strokeStyle='#fff'; X.lineWidth=.5; X.stroke();
|
||
}
|
||
X.globalAlpha = 1;
|
||
|
||
// Clouds
|
||
cls.forEach(function(c) {
|
||
c.x += c.sp; if(c.x>W+c.w*2){c.x=-c.w*2; c.y=H*(.04+Math.random()*.18);}
|
||
X.globalAlpha=c.op; X.fillStyle='#fff';
|
||
X.beginPath(); X.ellipse(c.x,c.y,c.w*.5,c.w*.18,0,0,Math.PI*2); X.fill();
|
||
X.beginPath(); X.ellipse(c.x+c.w*.2,c.y-c.w*.06,c.w*.35,c.w*.15,0,0,Math.PI*2); X.fill();
|
||
X.globalAlpha=1;
|
||
});
|
||
|
||
requestAnimationFrame(frame);
|
||
}
|
||
frame();
|
||
</script>
|
||
<script src="assets/js/version-tag.js" defer></script>
|
||
</body>
|
||
</html>
|