/* Heller Modus - Grundeinstellung */ :root { color-scheme: light; --bg: #faf6f0; --bg-alt: #f3ece2; --text: #2e2a25; --text-muted: #6f665b; --accent: #b5713f; --border: #e4dacb; /* Gedämpftes Terrakotta für die Kopfleiste. Entsättigt statt aufgehellt, damit die weiße Schrift darauf lesbar bleibt. */ --terrakotta-weich: #ab7d5e; --terrakotta-weich-rand: #96684b; /* Tönung am oberen Rand des Titelbereichs */ --titel-ton: #f5ece0; /* Weltkarte */ --karte-meer: #cfe3ef; --karte-land: #fdfaf5; --karte-grenze: #8f887b; /* Gestrichelte Spur hinter dem Flugzeug */ --flug-spur: #000; /* Aufgeklebter Zettel auf den Projektkarten - greift in beiden Modi die Farbe der Kopfleiste auf, deshalb helle Schrift darauf. */ --notiz-flaeche: #ab7d5e; --notiz-schrift: #fff; /* Serifenschrift nur für Überschriften. Alle Schnitte sind auf Windows und Mac vorhanden, es wird nichts nachgeladen. */ --schrift-ueberschrift: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --maxw: 960px; --gap: 1.5rem; } /* Dunkler Modus - nur die Farben werden ausgetauscht, alles andere bleibt gleich. Umgeschaltet wird über data-thema am -Element. */ :root[data-thema="dunkel"] { color-scheme: dark; /* Kein Schwarz, sondern ein gedämpftes Dunkelgrau mit leichtem Blaustich, passend zu den lila-blauen Akzenten. */ --bg: #191819; --bg-alt: #232122; --text: #f7f3ec; --text-muted: #c9c2b7; /* Im Dunkelmodus heller, damit das Terrakotta auf dunklem Grund genug Kontrast hat. */ /* Im Dunkelmodus tragen die beiden Akzentvariablen einen Lila-Blau-Ton statt Terrakotta. Die Namen bleiben, damit im Stylesheet nur an einer Stelle getauscht werden muss. */ --accent: #a99ce6; --border: #3c393b; --terrakotta-weich: #635e96; --terrakotta-weich-rand: #4f4a7d; /* Nur ein Hauch Lila, damit der Titelbereich nicht blau wirkt. */ --titel-ton: #262329; /* Gleiches Lila wie die Kopfleiste, deshalb helle Schrift darauf. */ --notiz-flaeche: #635e96; --notiz-schrift: #f7f5ff; --karte-meer: #1c2b42; --karte-land: #cfc9be; --karte-grenze: #6d6860; --flug-spur: #fff; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* Header */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; background: var(--terrakotta-weich); border-bottom: 1px solid var(--terrakotta-weich-rand); } .logo { font-family: var(--schrift-ueberschrift); font-weight: 600; font-size: 1.15rem; text-decoration: none; letter-spacing: 0.02em; color: #fff; } .nav { display: flex; gap: 2rem; } .nav a { text-decoration: none; color: #fff; font-size: 0.95rem; transition: opacity 0.2s ease; } .nav a:hover { opacity: 0.75; } /* Menüpunkt des Bereichs, in dem man sich gerade befindet */ .nav a.ist-aktiv { font-weight: 600; border-bottom: 2px solid #fff; padding-bottom: 2px; } /* Umschalter in der Kopfleiste */ .kopf-schalter { display: flex; align-items: center; gap: 0.6rem; } .thema-knopf { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 0.95rem; line-height: 1; cursor: pointer; transition: background 0.2s ease; } .thema-knopf:hover { background: rgba(255, 255, 255, 0.3); } /* Sprachumschalter */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.16); } .lang-btn { padding: 0.2rem 0.7rem; border: none; border-radius: 999px; background: none; font: inherit; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .lang-btn:hover { color: #fff; } .lang-btn.is-active { background: #fff; color: var(--terrakotta-weich); } /* Titelbereich */ /* Über die volle Breite mit sanfter Tönung, die in den Seitenhintergrund übergeht. Der Inhalt steht mittig und füllt fast eine Bildschirmhöhe. */ .hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 82vh; padding: 3rem 2rem 5rem; background: linear-gradient(180deg, var(--titel-ton) 0%, var(--bg) 100%); text-align: left; } .hero-inhalt { display: flex; align-items: center; gap: 3rem; width: 100%; max-width: var(--maxw); margin: 0 auto; } .hero-spalte { flex: 1; min-width: 0; } .hero h1 { font-family: var(--schrift-ueberschrift); font-size: clamp(2.2rem, 5vw, 3.5rem); margin: 0 0 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .hero-text { margin: 0; font-size: 1.15rem; color: var(--text-muted); max-width: 40ch; } .hero-knopf { display: inline-block; margin-top: 1.75rem; padding: 0.7rem 1.5rem; border-radius: 999px; background: var(--terrakotta-weich); color: #fff; font-size: 0.95rem; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .hero-knopf:hover { background: var(--accent); transform: translateY(-2px); } .hero-avatar { flex-shrink: 0; height: 320px; width: auto; } /* Hinweis zum Weiterscrollen */ .scroll-hinweis { position: absolute; left: 50%; bottom: 1.5rem; color: var(--text-muted); font-size: 1.5rem; line-height: 1; text-decoration: none; animation: scroll-wippen 1.9s ease-in-out infinite; } .scroll-hinweis:hover { color: var(--accent); } @keyframes scroll-wippen { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } /* Beim Laden nacheinander einblenden */ .hero h1, .hero-text, .hero-knopf, .hero-avatar { opacity: 0; animation: hero-auftauchen 0.7s ease forwards; } .hero h1 { animation-delay: 0.1s; } .hero-text { animation-delay: 0.25s; } .hero-avatar { animation-delay: 0.3s; } .hero-knopf { animation-delay: 0.42s; } @keyframes hero-auftauchen { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } @media (max-width: 760px) { .hero { min-height: 0; padding: 3rem 1.25rem 4rem; } .hero-inhalt { flex-direction: column; align-items: flex-start; gap: 2rem; } .hero-avatar { height: 240px; align-self: center; } .scroll-hinweis { display: none; } } /* Sections */ .section { max-width: var(--maxw); margin: 0 auto; padding: 4rem 2rem; border-top: 1px solid var(--border); } .section h2 { font-family: var(--schrift-ueberschrift); font-size: 1.6rem; font-weight: 600; margin: 0 0 2rem; color: var(--accent); } /* Projekte */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); } .card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(46, 42, 37, 0.08); } /* Karten erscheinen nacheinander, sobald der Bereich ins Bild kommt. */ .reveal .card { opacity: 0; transform: translateY(16px); } .reveal.is-visible .card { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.is-visible .card:nth-child(1) { transition-delay: 0.05s; } .reveal.is-visible .card:nth-child(2) { transition-delay: 0.19s; } .reveal.is-visible .card:nth-child(3) { transition-delay: 0.33s; } .reveal.is-visible .card:nth-child(4) { transition-delay: 0.47s; } .card-video { display: block; width: 100%; max-height: 240px; margin: 0 0 1rem; background: #000; border-radius: 8px; object-fit: contain; } .card h3 { margin: 0 0 0.5rem; font-family: var(--schrift-ueberschrift); font-size: 1.15rem; } .card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; } /* Aufgeklebter Zettel in Terrakotta auf einer Projektkarte */ .card p.karten-notiz { margin: 1.3rem 0 0.3rem; padding: 1.2rem 1rem; min-height: 7rem; background: var(--notiz-flaeche); color: var(--notiz-schrift); font-size: 0.92rem; border-radius: 2px; box-shadow: 0 5px 14px rgba(46, 42, 37, 0.22); transform: rotate(-1.6deg); transition: transform 0.2s ease; } .card p.karten-notiz:hover { transform: rotate(0deg); } /* Über mich */ .about-row { display: flex; align-items: center; gap: 1.25rem; margin: -1rem 0 2.5rem; } .plane-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0; border: none; background: none; font: inherit; cursor: pointer; } .plane-hinweis { font-size: 0.8rem; color: var(--text-muted); } /* Flugzeug in der Menüleiste */ .plane-btn-nav { align-self: center; flex-shrink: 0; } /* In der Menüleiste als weiße Strichzeichnung, damit es auf der farbigen Kopfleiste klar zu erkennen ist. Das Flugzeug bei "Über mich" bleibt farbig. */ .nav-flugzeug { display: block; height: 32px; width: auto; filter: brightness(0) invert(1); transition: transform 0.25s ease; } .plane-btn-nav:hover .nav-flugzeug { transform: translateY(-3px) rotate(-6deg); } .about-icon { height: 72px; width: auto; transition: transform 0.25s ease; } /* Im Dunkelmodus als weiße Strichzeichnung, damit es sich vom dunklen Hintergrund abhebt. */ :root[data-thema="dunkel"] .about-icon { filter: brightness(0) invert(1); } .plane-btn:hover .about-icon { transform: translateY(-4px) rotate(-5deg); } /* Flugzeug fliegt einmal quer über die Seite */ /* Die Flugbahn selbst wird in main.js berechnet (Anflug, Herz, Abflug), deshalb steht hier keine Animation - nur Lage und Größe. */ .plane-flyer { position: fixed; top: 0; left: 0; height: 56px; width: auto; z-index: 200; pointer-events: none; will-change: transform; } /* Im Dunkelmodus fliegt es als weiße Strichzeichnung. */ :root[data-thema="dunkel"] .plane-flyer { filter: brightness(0) invert(1); } /* Gestrichelte Spur hinter dem Flugzeug */ .flug-spur { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 199; pointer-events: none; opacity: 1; transition: opacity 0.8s ease; } .flug-spur.verblasst { opacity: 0; } .flug-spur path { fill: none; stroke: var(--flug-spur); stroke-width: 2.5; stroke-dasharray: 7 9; stroke-linecap: round; stroke-linejoin: round; } /* Wer Animationen abgeschaltet hat, sieht den Flug nicht - der Bereich öffnet sich in dem Fall direkt (siehe main.js). */ @media (prefers-reduced-motion: reduce) { .plane-flyer { display: none; } .rahmen-foto, .about-icon, .card, .reveal { transition: none; } /* Ohne Animationen müssen die Inhalte trotzdem sichtbar sein. */ .rahmen-foto, .hero h1, .hero-text, .hero-knopf, .hero-avatar { animation: none; opacity: 1; translate: none; } .scroll-hinweis { animation: none; transform: translateX(-50%); } .map-wrap svg path.land, .map-wrap svg path.land:hover, .map-wrap svg path.land.is-aktiv { animation: none; transform: none; transition: none; } .reveal .card, .reveal.is-visible .card { opacity: 1; transform: none; transition-delay: 0s; } } .about-text { margin: 0; max-width: 55ch; font-size: 1.05rem; color: var(--text-muted); text-align: left; } .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; } .timeline-item { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .timeline-date { min-width: 140px; color: var(--text-muted); font-size: 0.9rem; } .timeline-role { font-weight: 500; } /* Weltkarte mit Reise-Notizen */ /* Etwas breiter als die übrigen Abschnitte, damit Karte und Post-it Platz haben. */ #geheim { max-width: 1200px; } /* Karte über die volle Breite, das Post-it erscheint darunter. So sind auch kleine Länder wie Österreich noch gut zu treffen. */ /* Bezugspunkt für das Post-it, das über der Karte aufpoppt. */ .map-layout { display: block; position: relative; } .map-wrap { min-width: 0; } /* Ländername beim Drüberfahren */ .karten-tipp { position: absolute; z-index: 6; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 0.8rem; line-height: 1.4; white-space: nowrap; pointer-events: none; transform: translate(-50%, -150%); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } .karten-tipp[hidden] { display: none; } /* Blauer Grund als Meer, die Länder liegen als helle Flächen darauf. */ .map-wrap svg { display: block; width: 100%; height: auto; background: var(--karte-meer); border-radius: 8px; } .map-wrap svg path { fill: var(--karte-land); stroke: var(--karte-grenze); stroke-width: 0.9; } /* transform-box sorgt dafür, dass sich ein Land um seine eigene Mitte vergrößert und nicht um den Nullpunkt der ganzen Karte. */ .map-wrap svg path.land { cursor: pointer; stroke: #3a352e; stroke-width: 1.1; transform-box: fill-box; transform-origin: center; transition: transform 0.25s ease, opacity 0.15s ease; } .map-wrap svg path.land:hover, .map-wrap svg path.land:focus { opacity: 0.8; outline: none; transform: scale(1.12); } /* Angeklicktes Land bleibt hervorgehoben und poppt einmal auf. */ .map-wrap svg path.land.is-aktiv { stroke-width: 2; transform: scale(1.3); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); animation: land-aufpoppen 0.45s ease-out; } @keyframes land-aufpoppen { 0% { transform: scale(1); } 55% { transform: scale(1.5); } 100% { transform: scale(1.3); } } /* Post-it unter der Karte */ /* Poppt mittig über der Karte auf. Ist der Inhalt höher als die Karte, lässt sich innerhalb des Post-its scrollen. */ .postit { position: absolute; top: 50%; left: 50%; z-index: 5; width: min(860px, 94%); max-height: 94%; overflow-y: auto; padding: 1.5rem 1.4rem; background: #fdf2a0; color: #3a352e; box-shadow: 0 14px 34px rgba(46, 42, 37, 0.32); transform: translate(-50%, -50%) rotate(-1deg); animation: postit-aufpoppen 0.28s ease-out; } @keyframes postit-aufpoppen { from { opacity: 0; transform: translate(-50%, -50%) rotate(-1deg) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg) scale(1); } } .postit-title { font-weight: 600; } .postit[hidden] { display: none; } .postit-close { position: absolute; top: 0.5rem; right: 0.7rem; padding: 0; border: none; background: none; font: inherit; font-size: 1.4rem; line-height: 1; color: #6b6459; cursor: pointer; } .postit-close:hover { color: #3a352e; } .postit-title { margin: 0 0 0.6rem; font-family: var(--schrift-ueberschrift); font-size: 1.35rem; } .postit-text { margin: 0; font-size: 0.95rem; color: #5a5348; } /* Fotos rahmen den Text ein */ .postit-rahmen { display: grid; grid-template-columns: 1fr 2.4fr 1fr; gap: 10px; align-items: center; } .rahmen-mitte { grid-column: 1 / -1; display: flex; align-items: center; } .postit-rahmen.hat-fotos .rahmen-mitte { grid-column: 2; padding: 0.3rem 0.2rem; } /* Ohne Fotos steht der Text allein - dann mittig und deutlich größer, damit die Notiz nicht leer wirkt. */ .postit-rahmen:not(.hat-fotos) .rahmen-mitte { justify-content: center; min-height: 160px; padding: 1rem 0.5rem; } .postit-rahmen:not(.hat-fotos) .postit-text { font-size: 1.6rem; line-height: 1.5; text-align: center; } .rahmen-reihe { grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-end; gap: 10px; } /* In den Reihen behalten die Fotos ihr eigenes Format: Hochkant bleibt hochkant, Querformat bleibt quer. Gleiche Höhe hält die Reihe ruhig, die Breitenbegrenzung verhindert, dass ein Foto die Reihe sprengt. */ .rahmen-reihe .rahmen-foto { flex: 0 0 auto; height: 165px; width: auto; aspect-ratio: auto; max-width: calc(50% - 5px); } /* Die Fotos tauchen nacheinander auf. Bewegt wird dabei die translate-Eigenschaft, damit die Drehung in transform erhalten bleibt. Die Verzögerung je Foto setzt main.js. */ .rahmen-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 3px 8px rgba(46, 42, 37, 0.16); transition: transform 0.2s ease; opacity: 0; translate: 0 14px; animation: foto-auftauchen 0.5s ease forwards; } @keyframes foto-auftauchen { to { opacity: 1; translate: 0 0; } } /* Seitlich vom Text behalten die Fotos ihr eigenes Format, damit Hochkantbilder nicht auf Querformat beschnitten werden. Bis das Bild geladen ist, hält das 4:3 aus .rahmen-foto den Platz frei; danach setzt main.js das tatsächliche Seitenverhältnis. */ .rahmen-foto.ist-seite { height: auto; } .rahmen-foto:hover { transform: rotate(0deg) scale(1.03); z-index: 2; position: relative; } /* Auf schmalen Bildschirmen ist die Karte zu klein für eine Überlagerung nur über ihr - dort poppt das Post-it mittig über der ganzen Seite auf. */ @media (max-width: 760px) { .postit { position: fixed; top: 50%; left: 50%; z-index: 60; width: min(520px, 92vw); max-height: 86vh; margin: 0; } } /* Kontakt */ .contact-link { display: inline-block; font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid var(--accent); color: var(--accent); transition: opacity 0.2s ease; } .contact-link:hover { opacity: 0.7; } /* Zurück nach oben */ .nach-oben { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: var(--terrakotta-weich); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(46, 42, 37, 0.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: translateY(0); } .nach-oben:hover { background: var(--accent); } /* Footer */ .site-footer { max-width: var(--maxw); margin: 0 auto; padding: 2rem; color: var(--text-muted); font-size: 0.85rem; } /* Scroll-reveal (JS toggles .is-visible) */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 640px) { .site-header { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 1rem 1.25rem; } .nav { gap: 1rem; font-size: 0.9rem; } .hero { padding: 6rem 1.25rem 4rem; } .section { padding: 3rem 1.25rem; } }