/* ========================================================= Jakob Jonathan Schall – Persönliche Website Aufbau: 1. Design-Tokens 2. Basis 3. Layout 4. Komponenten 5. Sektionen 6. Animationen 7. Breakpoints ========================================================= */ /* ---------- 0. Schriften (lokal gehostet, keine Verbindung zu Google) ---------- Cormorant Garamond und Inter, Lizenz: SIL Open Font License 1.1 (freie Nutzung, auch kommerziell). Nur der Zeichensatz "latin" ist enthalten; er deckt Deutsch (ä, ö, ü, ß) und € ab. */ @font-face { /* Meldet dem Browser eine Schriftdatei an, die er selbst laden darf */ font-family: "Cormorant Garamond"; /* Name, unter dem die Schrift im restlichen CSS benutzt wird */ font-style: normal; /* Diese Datei enthält die gerade (nicht kursive) Schrift */ font-weight: 400 600; /* Die Datei deckt alle Schriftstärken von 400 (normal) bis 600 (halbfett) ab */ font-display: swap; /* Zeigt zuerst eine Ersatzschrift und tauscht sofort, sobald die echte geladen ist (kein leerer Text) */ src: url("../assets/fonts/cormorant-garamond-variable.woff2") format("woff2"); /* Pfad zur Schriftdatei (eine Ebene hoch, dann in assets/fonts) im Format WOFF2 */ } /* Ende dieser Schriftanmeldung */ @font-face { /* Zweite Schriftanmeldung: die kursive Variante */ font-family: "Cormorant Garamond"; /* Gleicher Name wie oben, damit "kursiv" automatisch diese Datei nutzt */ font-style: italic; /* Diese Datei enthält die kursive Schrift */ font-weight: 400; /* Nur die normale Stärke 400 wird in kursiv gebraucht */ font-display: swap; /* Wie oben: erst Ersatzschrift, dann tauschen */ src: url("../assets/fonts/cormorant-garamond-italic-400.woff2") format("woff2"); /* Pfad zur kursiven Schriftdatei */ } /* Ende dieser Schriftanmeldung */ @font-face { /* Dritte Schriftanmeldung: die Text-Schrift Inter */ font-family: "Inter"; /* Name der Text-Schrift */ font-style: normal; /* Gerade Schrift */ font-weight: 300 500; /* Die Datei deckt Stärken von 300 (leicht) bis 500 (mittel) ab */ font-display: swap; /* Erst Ersatzschrift, dann tauschen */ src: url("../assets/fonts/inter-variable.woff2") format("woff2"); /* Pfad zur Inter-Schriftdatei */ } /* Ende dieser Schriftanmeldung */ /* ---------- 1. Design-Tokens ---------- */ :root { /* ":root" ist die ganze Seite; hier stehen Variablen, die überall wiederverwendet werden */ /* Farben – hier zentral anpassbar */ --color-bg: #faf8f4; /* leichtes Creme */ /* Variable: Hintergrundfarbe der Seite */ --color-bg-alt: #f2efe8; /* abgesetzte Sektionen */ /* Variable: etwas dunkleres Creme für abgesetzte Bereiche */ --color-ink: #141414; /* Typografie */ /* Variable: fast schwarze Schriftfarbe */ --color-muted: #6b6862; /* Fließtext sekundär (Kontrast > 4.5:1) */ /* Variable: Grau für Nebentexte, bewusst dunkel genug für gute Lesbarkeit */ --color-line: #e2ddd3; /* Linien, Rahmen */ /* Variable: helles Beige für dünne Trennlinien */ /* Typografie */ --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif; /* Variable: Überschriften-Schrift; die weiteren Namen sind Ersatzschriften, falls die erste fehlt */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Variable: Text-Schrift mit Ersatzschriften des jeweiligen Systems */ --fs-small: 0.8125rem; /* Variable: kleine Schriftgröße (13 px) */ --fs-body: 1rem; /* Variable: normale Textgröße (16 px) */ --fs-lead: clamp(1.125rem, 1rem + 0.35vw, 1.25rem); /* Variable: Einleitungstext; wächst mit der Fensterbreite, aber nie unter 18 px und nie über 20 px */ --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.875rem); /* Variable: Größe der Überschriften dritter Ebene (20 bis 30 px, mitwachsend) */ --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); /* Variable: Größe der Abschnitts-Überschriften (36 bis 60 px, mitwachsend) */ --fs-hero: clamp(2.75rem, 14.5vw, 5.5rem); /* Variable: Größe des großen Namens auf Handy und Tablet (44 bis 88 px); so gewählt, dass "Jakob Jonathan" in eine Zeile passt */ /* Abstände */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* Variable: seitlicher Rand der Seite (16 bis 40 px, mitwachsend) */ --section-space: clamp(3rem, 2rem + 4vw, 6rem); /* Variable: Abstand über und unter jedem Abschnitt (48 bis 96 px, vorher 80 bis 160 px) */ --container: 75rem; /* Variable: maximale Inhaltsbreite (1200 px) */ --header-h: 4.5rem; /* Variable: Höhe des Headers auf dem Handy (72 px) */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Variable: Bewegungskurve für Animationen: schnell starten, sanft auslaufen */ } /* Ende der Variablen */ /* ---------- 2. Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Für alle Elemente: Breite und Höhe schließen Rand und Innenabstand mit ein (macht Berechnungen einfach) */ html { /* Einstellungen für die ganze Seite */ -webkit-text-size-adjust: 100%; /* Verhindert, dass iPhones die Schrift im Querformat von selbst vergrößern */ scroll-behavior: smooth; /* Sprünge zu Ankern (z. B. "Nach oben") scrollen sanft statt ruckartig */ scroll-padding-top: var(--header-h); /* Beim Sprung zu einem Abschnitt bleibt oben Platz für den festen Header */ } /* Ende html */ body { /* Einstellungen für den sichtbaren Seiteninhalt */ margin: 0; /* Entfernt den Standard-Außenabstand des Browsers */ background: var(--color-bg); /* Hintergrund: leichtes Creme */ color: var(--color-ink); /* Textfarbe: fast schwarz */ font-family: var(--font-sans); /* Standard-Schrift: Inter */ font-size: var(--fs-body); /* Standard-Schriftgröße: 16 px */ font-weight: 400; /* Standard-Schriftstärke: normal */ line-height: 1.7; /* Zeilenabstand: 1,7-fach der Schriftgröße (luftig und gut lesbar) */ -webkit-font-smoothing: antialiased; /* Glättet die Schrift auf Mac und iPhone für ein feineres Bild */ text-rendering: optimizeLegibility; /* Der Browser darf Schrift auf beste Lesbarkeit statt Tempo optimieren */ /* Lange deutsche Wörter dürfen auf schmalen Bildschirmen getrennt werden (lang="de" ist gesetzt) */ hyphens: auto; /* Erlaubt automatische Silbentrennung (nutzt die Sprache "de" aus dem HTML) */ overflow-wrap: break-word; /* Bricht zu lange Wörter notfalls um, damit nie etwas über den Rand ragt */ } /* Ende body */ img { display: block; width: 100%; height: auto; background: var(--color-bg-alt); } /* Alle Fotos: eigene Zeile (kein Spalt darunter), so breit wie ihr Platz, Höhe passt sich an, beiger Grund solange das Foto lädt */ h1, h2, h3 { /* Gemeinsame Einstellungen für alle drei Überschrift-Ebenen */ margin: 0; /* Kein Standard-Außenabstand (Abstände setzt das Design selbst) */ font-family: var(--font-serif); /* Überschriften in der eleganten Serifenschrift */ font-weight: 500; /* Mittlere Schriftstärke */ line-height: 1.08; /* Enger Zeilenabstand, passend für große Überschriften */ letter-spacing: -0.01em; /* Buchstaben minimal enger zusammen für ein edleres Schriftbild */ } /* Ende der Überschriften */ p { margin: 0 0 1em; } /* Absätze: unten ein Abstand von einer Zeile, sonst keiner */ p:last-child { margin-bottom: 0; } /* Der letzte Absatz in einem Block bekommt keinen Abstand nach unten */ a { color: inherit; text-decoration: none; } /* Links: übernehmen die Textfarbe und sind nicht unterstrichen (das Design setzt eigene Hervorhebungen) */ :focus-visible { /* Gilt für Elemente, die per Tastatur angesteuert werden */ outline: 2px solid var(--color-ink); /* Zeichnet einen 2 px dicken schwarzen Rahmen, damit man sieht, wo man ist */ outline-offset: 4px; /* Der Rahmen sitzt 4 px außerhalb des Elements */ } /* Ende :focus-visible */ ::selection { background: var(--color-ink); color: var(--color-bg); } /* Markierter Text erscheint invertiert: cremefarbene Schrift auf schwarzem Grund */ .visually-hidden { /* Hilfsklasse: Inhalt ist unsichtbar, wird aber von Screenreadern vorgelesen */ position: absolute !important; /* Nimmt das Element aus dem normalen Textfluss */ width: 1px; height: 1px; /* Macht es nur 1 Pixel groß */ padding: 0; margin: -1px; /* Entfernt Abstände und schiebt es aus dem Weg */ overflow: hidden; clip: rect(0 0 0 0); /* Schneidet alles ab, was darüber hinausragt */ white-space: nowrap; border: 0; /* Kein Zeilenumbruch, kein Rand */ } /* Ende .visually-hidden */ .skip-link { /* "Zum Inhalt springen": versteckter Link für Tastatur- und Screenreader-Nutzer */ position: absolute; /* Frei positionierbar */ left: 1rem; top: -4rem; /* Liegt zunächst außerhalb des Bildschirms (oben) */ z-index: 100; /* Liegt über allen anderen Elementen */ padding: 0.75rem 1.25rem; /* Innenabstand, damit der Link wie ein Knopf aussieht */ background: var(--color-ink); /* Schwarzer Hintergrund */ color: var(--color-bg); /* Cremefarbene Schrift */ transition: top 0.2s var(--ease); /* Gleitet in 0,2 Sekunden sanft ins Bild, wenn er erscheint */ } /* Ende .skip-link */ .skip-link:focus { top: 1rem; } /* Sobald der Link per Tab angesteuert wird, rutscht er ins sichtbare Bild */ /* Platzhalter-Text: bewusst erkennbar, bis echte Inhalte eingetragen sind */ .ph { color: var(--color-muted); font-style: italic; } /* Platzhalter: grau und kursiv, damit man sie leicht findet */ /* ---------- 3. Layout ---------- */ .container { /* Inhaltsbehälter: hält den Inhalt mittig und begrenzt seine Breite */ width: 100%; /* Nimmt die volle verfügbare Breite */ max-width: var(--container); /* Wird aber nie breiter als 1200 px */ margin-inline: auto; /* Zentriert den Behälter links und rechts automatisch */ padding-inline: var(--gutter); /* Innenabstand links und rechts, damit Text nie am Rand klebt */ } /* Ende .container */ .section { padding-block: var(--section-space); } /* Jeder Abschnitt bekommt oben und unten viel Weißraum */ .section-alt { background: var(--color-bg-alt); } /* Abgesetzter Abschnitt (Projekte): etwas dunkleres Creme als Hintergrund */ .section-head { margin-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); max-width: 48rem; } /* Kopfbereich eines Abschnitts: Abstand nach unten (48 bis 88 px), maximal 768 px breit */ .eyebrow { /* Kleine Zeile über Überschriften (z. B. "01 ÜBER MICH") */ display: flex; /* Ordnet Text und Linie nebeneinander an */ align-items: center; /* Richtet beides mittig auf einer Höhe aus */ gap: 0.75rem; /* 12 px Abstand zwischen den Teilen */ margin-bottom: 1.5rem; /* 24 px Abstand nach unten */ font-size: var(--fs-small); /* Kleine Schrift */ font-weight: 500; /* Mittlere Stärke */ letter-spacing: 0.16em; /* Weiter Buchstabenabstand für den edlen Look */ text-transform: uppercase; /* Alles in GROSSBUCHSTABEN */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .eyebrow */ .eyebrow::after { /* Hängt hinter den Text ein künstliches Element an: die kleine Linie */ content: ""; /* Leerer Inhalt (nötig, damit das Element existiert) */ width: 2.5rem; height: 1px; /* 40 px lang und 1 px dünn */ background: var(--color-line); /* In der hellen Linienfarbe */ } /* Ende .eyebrow::after */ .section-index { color: var(--color-ink); } /* Die Nummer ("01") ist schwarz statt grau */ .section-title { font-size: var(--fs-h2); } /* Abschnitts-Überschrift: große Schriftgröße aus den Variablen */ .section-intro { /* Einleitungstext unter einer Abschnitts-Überschrift */ margin-top: 1.5rem; /* 24 px Abstand nach oben */ max-width: 34rem; /* Maximal 544 px breit, damit Zeilen nicht zu lang werden */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .section-intro */ /* ---------- 4. Komponenten ---------- */ /* Buttons */ .btn { /* Gemeinsame Grundlage aller Knöpfe */ display: inline-flex; /* Knopf so breit wie sein Inhalt, innen flexibel angeordnet */ align-items: center; /* Inhalt vertikal mittig */ gap: 0.5rem; /* 8 px Abstand zwischen Text und Pfeil */ min-height: 3rem; /* Mindesthöhe 48 px (gut mit dem Finger zu treffen) */ font-size: 0.875rem; /* Schriftgröße 14 px */ font-weight: 500; /* Mittlere Stärke */ letter-spacing: 0.04em; /* Leicht erweiterter Buchstabenabstand */ transition: background-color 0.3s var(--ease), color 0.3s var(--ease), gap 0.3s var(--ease); /* Farbwechsel und Pfeil-Bewegung laufen in 0,3 Sekunden sanft ab */ } /* Ende .btn */ .btn-primary { /* Der schwarze Haupt-Knopf ("Kontakt aufnehmen") */ padding: 0 1.75rem; /* Innenabstand links und rechts 28 px */ background: var(--color-ink); /* Schwarzer Hintergrund */ color: var(--color-bg); /* Cremefarbene Schrift */ border: 1px solid var(--color-ink); /* Schwarzer Rand (wird beim Überfahren sichtbar) */ } /* Ende .btn-primary */ .btn-primary:hover { background: transparent; color: var(--color-ink); } /* Beim Überfahren mit der Maus: Hintergrund verschwindet, Schrift wird schwarz */ .btn-link { padding: 0 0.25rem; } /* Der Textlink-Knopf ("← Zurück" auf den Unterseiten) hat nur kleinen seitlichen Abstand */ .btn-link:hover { gap: 0.85rem; } /* Beim Überfahren rutscht der Pfeil ein Stück weiter vom Text weg (größerer Abstand) */ /* Header */ .site-header { /* Der feste Kopfbereich oben */ position: fixed; /* Bleibt beim Scrollen immer oben stehen */ inset: 0 0 auto; /* Klebt oben, links und rechts am Fensterrand (unten frei) */ z-index: 50; /* Liegt über dem Seiteninhalt */ height: var(--header-h); /* Höhe aus der Variable (72 px Handy, 88 px Computer) */ background: rgba(250, 248, 244, 0.85); /* Cremefarben, zu 85 % deckend, damit der Inhalt leicht durchscheint */ -webkit-backdrop-filter: saturate(140%) blur(12px); /* Weichzeichner für Safari: verwischt den Hintergrund hinter dem Header */ backdrop-filter: saturate(140%) blur(12px); /* Dasselbe für alle anderen Browser: Milchglas-Effekt */ border-bottom: 1px solid transparent; /* Unsichtbare untere Linie (wird beim Scrollen sichtbar) */ transition: border-color 0.3s var(--ease); /* Die Linie blendet in 0,3 Sekunden sanft ein */ } /* Ende .site-header */ .site-header.is-scrolled { border-bottom-color: var(--color-line); } /* Sobald gescrollt wurde (Klasse vom JavaScript), wird die Linie sichtbar */ .header-inner { /* Innenleben des Headers */ display: flex; /* Logo links, Menü rechts nebeneinander */ align-items: center; /* Vertikal mittig */ justify-content: space-between; /* Maximaler Abstand: Logo ganz links, Menü ganz rechts */ height: 100%; /* Volle Höhe des Headers */ } /* Ende .header-inner */ .brand { display: flex; align-items: center; gap: 0.85rem; } /* Logo-Bereich: Kürzel und Name nebeneinander, mittig, 14 px Abstand */ .brand-mark { /* Das Kürzel-Kästchen "JJS" */ display: grid; place-items: center; /* Zentriert den Text im Kästchen */ width: 2.5rem; height: 2.5rem; /* Quadrat von 40 × 40 px */ border: 1px solid var(--color-ink); /* Dünner schwarzer Rahmen */ font-family: var(--font-serif); /* Serifenschrift */ font-size: 0.95rem; /* Etwa 15 px */ font-weight: 600; /* Halbfett */ letter-spacing: 0.06em; /* Etwas Buchstabenabstand */ } /* Ende .brand-mark */ .brand-name { /* Der ausgeschriebene Name neben dem Kürzel */ font-size: 0.875rem; /* 14 px */ font-weight: 500; /* Mittlere Stärke */ letter-spacing: 0.04em; /* Leichter Buchstabenabstand */ } /* Ende .brand-name */ /* Navigation – mobil zuerst */ .nav-toggle { /* Der Menü-Knopf mit den zwei Strichen (nur auf dem Handy sichtbar) */ position: relative; /* Nötig, damit z-index wirkt */ z-index: 60; /* Liegt über dem aufgeklappten Menü, damit man es wieder schließen kann */ display: grid; /* Ordnet die zwei Striche untereinander an */ place-content: center; /* Zentriert beide Striche im Knopf */ gap: 6px; /* 6 px Abstand zwischen den Strichen */ width: 2.75rem; height: 2.75rem; /* Knopfgröße 44 × 44 px (gut mit dem Finger zu treffen) */ padding: 0; /* Kein Innenabstand */ background: none; /* Kein Hintergrund */ border: 0; /* Kein Rand */ cursor: pointer; /* Zeigt auf dem Computer die Klick-Hand */ } /* Ende .nav-toggle */ .nav-toggle-bar { /* Ein einzelner Strich des Menü-Knopfs */ display: block; /* Als eigener Block darstellen */ width: 1.5rem; height: 1px; /* 24 px lang, 1 px dünn */ background: var(--color-ink); /* Schwarz */ transition: transform 0.35s var(--ease); /* Dreht und verschiebt sich in 0,35 Sekunden sanft */ } /* Ende .nav-toggle-bar */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-of-type { transform: translateY(3.5px) rotate(45deg); } /* Ist das Menü offen: erster Strich wandert nach unten und dreht 45° (bildet ein X) */ .nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-of-type { transform: translateY(-3.5px) rotate(-45deg); } /* Ist das Menü offen: zweiter Strich wandert nach oben und dreht -45° (vollendet das X) */ .site-nav { /* Das Menü auf dem Handy: ein Vollbild, das über die Seite fährt */ position: fixed; /* Fest am Fenster verankert */ inset: 0; /* Füllt das ganze Fenster aus (oben, unten, links, rechts 0) */ z-index: 55; /* Liegt über der Seite, aber unter dem Menü-Knopf */ display: flex; /* Flexible Anordnung des Inhalts */ align-items: center; /* Menüpunkte vertikal in der Mitte */ padding: var(--gutter); /* Seitlicher Rand */ background: var(--color-bg); /* Deckender Creme-Hintergrund */ opacity: 0; /* Zunächst vollständig durchsichtig */ visibility: hidden; /* Zunächst unsichtbar und nicht anklickbar */ transition: opacity 0.35s var(--ease), visibility 0.35s; /* Blendet in 0,35 Sekunden sanft ein und aus */ } /* Ende .site-nav */ .site-nav.is-open { opacity: 1; visibility: visible; } /* Ist das Menü geöffnet (Klasse vom JavaScript): voll sichtbar */ .site-nav ul { /* Die Liste der Menüpunkte */ display: flex; /* Flexible Anordnung */ flex-direction: column; /* Menüpunkte untereinander */ gap: 1.25rem; /* 20 px Abstand dazwischen */ margin: 0; padding: 0; /* Standard-Abstände der Liste entfernen */ list-style: none; /* Keine Aufzählungspunkte */ } /* Ende .site-nav ul */ .site-nav a { /* Die einzelnen Menü-Links auf dem Handy */ font-family: var(--font-serif); /* Serifenschrift */ font-size: 2.5rem; /* Große Schrift (40 px) */ line-height: 1.1; /* Enger Zeilenabstand */ } /* Ende .site-nav a */ body.nav-open { overflow: hidden; } /* Ist das Menü offen, kann die Seite dahinter nicht gescrollt werden */ /* backdrop-filter würde das fixierte Menü im Header einsperren */ body.nav-open .site-header { /* Header, solange das Menü offen ist */ -webkit-backdrop-filter: none; /* Milchglas-Effekt aus (Safari) */ backdrop-filter: none; /* Milchglas-Effekt aus (andere Browser); sonst würde das Menü im Header "gefangen" */ background: var(--color-bg); /* Voll deckendes Creme */ } /* Ende body.nav-open .site-header */ /* ---------- 5. Sektionen ---------- */ /* Hero */ .hero { /* Der Einstiegsbereich ganz oben */ position: relative; /* Bezugspunkt für den "Scroll"-Pfeil darin */ padding-top: calc(var(--header-h) + clamp(1.5rem, 0.5rem + 3vw, 3rem)); /* Oben Platz für den festen Header plus zusätzlicher Abstand (24 bis 48 px), damit der Knopf ohne Scrollen sichtbar bleibt */ padding-bottom: clamp(4rem, 2rem + 5vw, 7rem); /* Unten Abstand (64 bis 112 px) */ } /* Ende .hero */ .hero-grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: center; } /* Hero-Raster: Text und Bild, Abstand 40 bis 80 px, vertikal mittig */ .hero-title { /* Der große Name */ margin-bottom: 1.25rem; /* 20 px Abstand nach unten */ font-size: var(--fs-hero); /* Sehr große, mitwachsende Schrift */ font-weight: 400; /* Normale (feine) Stärke */ line-height: 0.95; /* Sehr enger Zeilenabstand, die drei Namenszeilen rücken zusammen */ letter-spacing: -0.02em; /* Buchstaben etwas enger */ } /* Ende .hero-title */ .hero-title em { font-style: italic; color: var(--color-muted); } /* Der Nachname ("Schall") ist kursiv und grau */ .hero-sub { /* Unterzeile unter dem Namen ("Immobilienmanagement M.Sc. · Wales · …") */ margin-bottom: 1.25rem; /* 20 px Abstand nach unten */ font-size: var(--fs-small); /* Kleine Schrift */ font-weight: 500; /* Mittlere Stärke */ letter-spacing: 0.12em; /* Weiter Buchstabenabstand */ text-transform: uppercase; /* Großbuchstaben */ line-height: 1.6; /* Zeilenabstand, falls die Zeile auf dem Handy umbricht */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .hero-sub */ .hero-slogan { /* Der Slogan unter der Unterzeile */ max-width: 30rem; /* Maximal 480 px breit, damit die drei Sätze schön umbrechen */ margin-bottom: 1.25rem; /* 20 px Abstand nach unten */ font-family: var(--font-serif); /* Serifenschrift wie die Überschriften */ font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* 24 bis 32 px, mitwachsend */ line-height: 1.25; /* Enger Zeilenabstand */ } /* Ende .hero-slogan */ .hero-status { /* Status-Zeile unter den Knöpfen ("Bis Ende Januar 2027 in Bangkok …") */ display: flex; /* Punkt und Text nebeneinander */ align-items: flex-start; /* Punkt oben bündig mit der ersten Textzeile */ gap: 0.65rem; /* 10 px Abstand zwischen Punkt und Text */ max-width: 30rem; /* Maximal 480 px breit */ margin: 1.5rem 0 0; /* 24 px Abstand nach oben, sonst keiner */ font-size: var(--fs-small); /* Kleine Schrift */ line-height: 1.5; /* Zeilenabstand */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .hero-status */ .hero-status::before { /* Der kleine Punkt vor der Status-Zeile */ content: ""; /* Leerer Inhalt (nötig, damit das Element existiert) */ flex: none; /* Wird nie zusammengedrückt */ width: 0.5rem; height: 0.5rem; /* 8 × 8 px */ margin-top: 0.4rem; /* Schiebt den Punkt auf die Höhe der Textmitte */ border-radius: 50%; /* Macht aus dem Quadrat einen Kreis */ background: var(--color-ink); /* Schwarz */ } /* Ende .hero-status::before */ .hero-lead { /* Der Vorstellungs-Satz unter dem Namen */ max-width: 36rem; /* Maximal 576 px breit */ margin-bottom: 2rem; /* 32 px Abstand nach unten */ font-size: var(--fs-lead); /* Größe des Einleitungstextes */ font-weight: 300; /* Leichte Schriftstärke */ line-height: 1.55; /* Zeilenabstand */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .hero-lead */ .hero-actions { display: flex; } /* Knopf-Behälter: flexibel, damit der Knopf keinen störenden Zeilenabstand darunter erzeugt */ .hero-media { margin: 0; max-width: 30rem; } /* Rahmen um das große Titelfoto samt Bildunterschrift: ohne Standard-Außenabstand von
, auf Handy und Tablet höchstens 480 px breit (sonst wird das Hochformat-Foto riesig) */ .hero-media img, .gallery img { aspect-ratio: 4 / 5; object-fit: cover; } /* Titelfoto und Galeriefotos haben das feste Format 4:5 (Hochformat), füllen es komplett aus und werden dabei passend zugeschnitten. Die Bildunterschrift steht dadurch sichtbar darunter, statt abgeschnitten zu werden */ .scroll-hint { /* Kleiner senkrechter Strich unten ("Scrollen") */ position: absolute; /* Frei im Hero-Bereich platziert */ left: 50%; bottom: 1.5rem; /* Horizontal mittig, 24 px über dem unteren Rand */ display: none; /* Auf dem Handy ausgeblendet */ width: 1px; height: 3.5rem; /* 1 px dünn und 56 px lang */ background: var(--color-line); /* Helle Linienfarbe */ overflow: hidden; /* Der wandernde Balken darin wird an den Enden abgeschnitten */ } /* Ende .scroll-hint */ .scroll-hint span { /* Der bewegte schwarze Balken innerhalb des Strichs */ position: absolute; inset: 0; /* Füllt den Strich komplett aus */ background: var(--color-ink); /* Schwarz */ animation: scroll-line 2.4s var(--ease) infinite; /* Spielt die Animation "scroll-line" ab: 2,4 Sekunden, sanft, unendlich wiederholt */ } /* Ende .scroll-hint span */ @keyframes scroll-line { /* Definiert den Ablauf der Animation */ 0% { transform: translateY(-100%); } /* Start: Balken sitzt komplett über dem Strich (unsichtbar) */ 60%, 100% { transform: translateY(100%); } /* Bei 60 % der Zeit ist er komplett unten raus, danach Pause bis zum Neustart */ } /* Ende der Animation */ /* Über mich */ .about-grid { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 6rem); } /* "Über mich"-Raster: Foto und Text untereinander (Handy), Abstand 40 bis 96 px */ .portrait { margin: 0; max-width: 23.5rem; } /* Rahmen ums Porträt: ohne Außenabstand, höchstens 376 px breit (= Originalbreite des Fotos, damit es scharf bleibt) */ .portrait img { aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; } /* Porträt: Format 2:3, füllt den Rahmen ohne Ränder, Ausschnitt oben ausgerichtet (der Kopf bleibt beim Zuschneiden sichtbar) */ /* Textblöcke (Absätze in gut lesbarer Schrift) */ .prose p { margin-bottom: 1.25em; font-size: 1.0625rem; line-height: 1.75; } /* Absätze im Textblock: etwas größer (17 px) und luftiger, 1,25 Zeilen Abstand dazwischen */ /* Zweispaltige Abschnitte: Text und Foto (Ausbildung, Praxis, Engagement) */ .split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); } /* Raster: auf dem Handy Text und Foto untereinander, 32 bis 64 px Abstand */ .split + .split { margin-top: clamp(3rem, 2rem + 4vw, 6rem); } /* Folgt eine zweite Zeile direkt auf die erste, entsteht dazwischen ein größerer Abstand (48 bis 96 px) */ .split-media { margin: 0; max-width: 30rem; } /* Foto-Rahmen: ohne Standard-Außenabstand von
, auf Handy und Tablet höchstens 480 px breit */ .split-media.is-small { max-width: 20rem; } /* Kleineres Foto (höchstens 320 px breit) für Zeilen mit kurzem Text daneben; gilt auch in der Computer-Ansicht, weil die Regel stärker ist als die "max-width: none" weiter unten */ .split-media img.is-wide { aspect-ratio: 2 / 1; object-fit: cover; object-position: center bottom; } /* Breiter Zuschnitt (2:1) für Fotos mit viel leerem Himmel: schneidet oben ab, die Unterkante (Skyline) bleibt voll sichtbar */ .caption { margin: 0.75rem 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted); } /* Bildunterschrift: kleine graue Schrift, 12 px Abstand zum Foto */ /* Fotogalerie (Praxiserfahrung) */ .gallery-title { margin: clamp(4rem, 3rem + 5vw, 7rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); font-size: var(--fs-h3); } /* Galerie-Überschrift: großer Abstand davor (64 bis 112 px), kleinerer danach (24 bis 40 px) */ .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem); } /* Galerie als gleichmäßiges Raster: zwei gleich breite Spalten auf dem Handy (minmax(0, 1fr) verhindert, dass ein langes Wort in der Unterschrift eine Spalte aufweitet); Abstände zwischen den Reihen 24 bis 40 px, zwischen den Spalten 16 bis 32 px */ .gallery figure { margin: 0; } /* Jedes Bild samt Unterschrift: ohne Standard-Außenabstand von
(die Abstände regelt das Raster) */ /* Kontakt */ .contact { border-top: 1px solid var(--color-line); } /* Der Kontaktbereich bekommt oben eine dünne Trennlinie */ .contact-grid { display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); align-items: end; } /* Kontakt-Raster: Überschrift und Liste, Abstand 48 bis 96 px, unten bündig */ .contact-list { margin: 0; padding: 0; list-style: none; } /* Kontaktliste: keine Standard-Abstände, keine Aufzählungspunkte */ .contact-list li { padding-block: 1.5rem; border-top: 1px solid var(--color-line); } /* Jeder Eintrag: 24 px Abstand oben und unten, Linie oben */ .contact-list li:last-child { border-bottom: 1px solid var(--color-line); } /* Der letzte Eintrag bekommt zusätzlich eine Linie unten */ .contact-label { /* Die Beschriftung ("E-MAIL", "LINKEDIN") */ display: block; /* Eigene Zeile */ margin-bottom: 0.35rem; /* Kleiner Abstand nach unten */ font-size: var(--fs-small); /* Kleine Schrift */ letter-spacing: 0.12em; /* Buchstabenabstand */ text-transform: uppercase; /* Großbuchstaben */ color: var(--color-muted); /* Graue Farbe */ } /* Ende .contact-label */ .contact-value { /* Der Link selbst (E-Mail-Adresse bzw. LinkedIn-Adresse) */ font-family: var(--font-serif); /* Serifenschrift */ font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); /* 22 bis 32 px, mitwachsend */ overflow-wrap: anywhere; /* Lange Adressen dürfen an jeder Stelle umbrechen, damit sie nie über den Rand ragen */ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; /* Unsichtbare Unterstreichung: eine 1 px hohe Linie, anfangs 0 px breit, am unteren Rand */ transition: background-size 0.4s var(--ease); /* Die Linie wächst in 0,4 Sekunden sanft */ } /* Ende .contact-value */ .contact-value:hover { background-size: 100% 1px; } /* Beim Überfahren wächst die Unterstreichung auf volle Breite */ /* Footer */ .site-footer { /* Der Fußbereich ganz unten */ padding-block: 2.5rem; /* 40 px Abstand oben und unten */ background: var(--color-ink); /* Schwarzer Hintergrund */ color: #c9c5bc; /* Helles Grau-Beige als Schriftfarbe */ font-size: var(--fs-small); /* Kleine Schrift */ } /* Ende .site-footer */ .footer-inner { display: flex; flex-direction: column; gap: 1rem; } /* Fußzeile auf dem Handy: alles untereinander, 16 px Abstand */ .footer-inner p { margin: 0; } /* Der Copyright-Text ohne Außenabstand */ .footer-links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin: 0; padding: 0; list-style: none; } /* Fußzeilen-Links: nebeneinander, bei Platzmangel umbrechen, 28 px Abstand, keine Aufzählungspunkte */ .footer-links a { display: inline-block; padding-block: 0.5rem; } /* Jeder Link bekommt oben und unten 8 px Innenabstand: die anklickbare Fläche ist mit ca. 32 px Höhe gut mit dem Finger zu treffen */ .footer-links a:hover { color: #fff; } /* Beim Überfahren werden die Links weiß */ /* Unterseiten (Impressum, Datenschutz, 404) */ .legal { padding-top: calc(var(--header-h) + 4rem); padding-bottom: var(--section-space); } /* Rechtsseiten: oben Platz für Header plus 64 px, unten der übliche Abschnittsabstand */ .legal .container { max-width: 48rem; } /* Schmalere Textspalte (768 px) für angenehme Lesbarkeit */ .legal h1 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.75rem); margin-bottom: 2.5rem; } /* Seitentitel: 30 bis 60 px, 40 px Abstand nach unten */ .legal h2 { font-size: 1.625rem; margin: 2.5rem 0 1rem; } /* Zwischenüberschriften: 26 px, 40 px Abstand davor, 16 px danach */ .legal p, .legal li { color: var(--color-muted); } /* Fließtext der Rechtsseiten: grau */ .legal h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; } /* Überschriften dritter Ebene: 20 px, 32 px Abstand davor, 12 px danach */ .legal h4 { margin: 1.5rem 0 0.5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; line-height: 1.4; } /* Überschriften vierter Ebene (Fragen): 16 px in der Text-Schrift, mittlere Stärke */ .legal ul { margin: 0 0 1em; padding-left: 1.25rem; } /* Aufzählungen: eingerückt, 1 Zeile Abstand danach */ .legal li { margin-bottom: 0.5em; } /* Einzelne Aufzählungspunkte: kleiner Abstand dazwischen */ .legal a { border-bottom: 1px solid currentColor; } /* Links auf den Rechtsseiten werden unterstrichen, damit sie erkennbar sind */ /* ---------- 6. Animationen ---------- */ /* Nur aktiv, wenn JavaScript läuft (Klasse "js" auf ) */ .js .reveal { /* Ausgangszustand eines einzublendenden Elements (nur wenn JavaScript läuft) */ opacity: 0; /* Zunächst unsichtbar */ transform: translateY(24px); /* Und 24 px nach unten versetzt */ transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); /* Blendet in 0,9 Sekunden sanft ein und gleitet an seinen Platz */ } /* Ende .js .reveal */ .js .reveal.is-visible { opacity: 1; transform: none; } /* Zielzustand (Klasse vom JavaScript beim Erscheinen): voll sichtbar und an der richtigen Stelle */ @media (prefers-reduced-motion: reduce) { /* Gilt nur, wenn Nutzer im System "weniger Bewegung" eingestellt haben (Barrierefreiheit) */ html { scroll-behavior: auto; } /* Kein sanftes Scrollen, sondern direkte Sprünge */ *, *::before, *::after { /* Für alle Elemente */ animation-duration: 0.01ms !important; /* Animationen laufen praktisch sofort durch */ animation-iteration-count: 1 !important; /* Und werden nicht wiederholt */ transition-duration: 0.01ms !important; /* Übergänge laufen praktisch sofort durch */ } /* Ende der Elementauswahl */ .js .reveal { opacity: 1; transform: none; } /* Einzublendende Elemente sind von Anfang an sichtbar, ohne Bewegung */ } /* Ende der Reduced-Motion-Regeln */ /* ---------- 7. Breakpoints ---------- */ @media (min-width: 40em) { /* Gilt ab einer Fensterbreite von 40em (ca. 640 px, große Handys und Tablets) */ .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; } /* Fußzeile: Text links, Links rechts, in einer Reihe */ } /* Ende der Regeln ab 40em */ @media (min-width: 60em) { /* Gilt ab einer Fensterbreite von 60em (ca. 960 px, Computer-Ansicht) */ :root { --header-h: 5.5rem; --fs-hero: clamp(3.25rem, min(7.8vw, 11vh + 1rem), 6rem); } /* Der Header wird höher (88 px); der Name wird an die schmalere Textspalte angepasst (52 bis 96 px) und zusätzlich an die Fensterhöhe gekoppelt, damit der Startbereich auch auf niedrigen Laptop-Bildschirmen passt */ .nav-toggle { display: none; } /* Der Handy-Menü-Knopf verschwindet */ .site-nav { /* Das Menü wird zur normalen Leiste im Header */ position: static; /* Kein Vollbild mehr, sondern ganz normal im Textfluss */ padding: 0; /* Kein Innenabstand */ background: none; /* Kein eigener Hintergrund */ opacity: 1; /* Voll sichtbar */ visibility: visible; /* Und sichtbar geschaltet */ } /* Ende .site-nav */ .site-nav ul { flex-direction: row; align-items: center; gap: 2.5rem; } /* Menüpunkte nebeneinander, mittig, 40 px Abstand */ .site-nav a { /* Menü-Links in der Computer-Ansicht */ position: relative; /* Bezugspunkt für die Unterstreichung */ font-family: var(--font-sans); /* Text-Schrift statt Serifenschrift */ font-size: 0.875rem; /* 14 px */ letter-spacing: 0.04em; /* Leichter Buchstabenabstand */ } /* Ende .site-nav a */ .site-nav a:not(.nav-cta)::after { /* Unterstreichung für alle Links außer dem "Kontakt"-Knopf */ content: ""; /* Leerer Inhalt (damit das Element existiert) */ position: absolute; /* Frei positioniert */ left: 0; right: 0; bottom: -0.35rem; /* Über die ganze Linkbreite, 5,6 px unter dem Text */ height: 1px; /* 1 px dünn */ background: currentColor; /* In der Textfarbe */ transform: scaleX(0); /* Zunächst auf Breite 0 zusammengedrückt (unsichtbar) */ transform-origin: left; /* Wächst von links nach rechts */ transition: transform 0.35s var(--ease); /* Wachstum in 0,35 Sekunden sanft */ } /* Ende der Unterstreichung */ .site-nav a:hover::after, /* Beim Überfahren mit der Maus ... */ .site-nav a[aria-current="location"]::after { transform: scaleX(1); } /* ... oder beim aktuell angezeigten Abschnitt wird die Unterstreichung voll sichtbar */ .nav-cta { /* Der umrandete "Kontakt"-Knopf im Menü */ padding: 0.65rem 1.25rem; /* Innenabstand: 10 px oben/unten, 20 px links/rechts */ border: 1px solid var(--color-ink); /* Schwarzer Rahmen */ transition: background-color 0.3s var(--ease), color 0.3s var(--ease); /* Farbwechsel in 0,3 Sekunden sanft */ } /* Ende .nav-cta */ .nav-cta:hover { background: var(--color-ink); color: var(--color-bg); } /* Beim Überfahren: schwarz gefüllt mit cremefarbener Schrift */ .hero { min-height: 100svh; display: flex; align-items: center; } /* Hero füllt mindestens die ganze Bildschirmhöhe und zentriert den Inhalt senkrecht */ .hero-grid { grid-template-columns: 1.1fr 0.9fr; } /* Hero zweispaltig: Text etwas breiter (55 %), Foto etwas schmaler (45 %) */ .hero-media, .split-media { max-width: none; } /* In der Computer-Ansicht bestimmt die Spaltenbreite die Fotobreite, die 480-px-Grenze entfällt */ .scroll-hint { display: block; } /* Der kleine Scroll-Strich wird sichtbar */ .about-grid { grid-template-columns: 5fr 7fr; align-items: start; } /* "Über mich" zweispaltig: Foto 5 Teile, Text 7 Teile, oben bündig */ .portrait { position: sticky; top: calc(var(--header-h) + 2rem); } /* Das Foto bleibt beim Scrollen kleben, bis der Text vorbei ist (unterhalb des Headers) */ .split { grid-template-columns: 7fr 5fr; align-items: start; } /* Text und Foto nebeneinander: Text 7 Teile, Foto 5 Teile, oben bündig */ .split-reverse { grid-template-columns: 5fr 7fr; } /* Umgekehrte Zeile: Foto 5 Teile links, Text 7 Teile rechts */ .split-reverse .split-media { order: -1; } /* Das Foto rutscht in der umgekehrten Zeile nach links (vor den Text) */ .split-media { position: sticky; top: calc(var(--header-h) + 2rem); } /* Das Foto bleibt beim Scrollen kleben, solange der Text daneben läuft */ .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Galerie in drei gleich breiten Spalten statt zwei */ .contact-grid { grid-template-columns: 1fr 1fr; } /* Kontakt zweispaltig: Überschrift links, Liste rechts */ } /* Ende der Regeln ab 60em */