/*===================================================== = = = CSS Cleaning — Comment Column 60 = = Jede Deklaration rechtsbündig kommentiert = = = = Hinweise: = = - Kommentare beginnen ab Spalte 60 (Monospace). = = - Header-Blöcke leiten Themenabschnitte ein. = = - Unused-Kandidaten werden nur markiert, = = nicht gelöscht. = = = =====================================================*/ /*===================================================== = = = Local fonts (SIL OFL) — eindeutige Family-Namen = = = =====================================================*/ /* Bebas Neue – Logo BEYOND */ @font-face{ font-family: "Bebas Neue"; /* Schriftfamilie */ src: url("../assets/fonts/bebas-neue/bebas-neue-v15-latin-regular.woff2") format("woff2"); /* src */ font-weight: 400; /* Regular */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } /* Source Sans 3 – Logo STEPS & Boxen-Body */ @font-face{ font-family: "Source Sans 3"; /* Schriftfamilie */ src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-regular.woff2") format("woff2"); /* src */ font-weight: 400; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "Source Sans 3"; /* Schriftfamilie */ src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-italic.woff2") format("woff2"); /* src */ font-weight: 400; /* Schriftstärke */ font-style: italic; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "Source Sans 3"; /* Schriftfamilie */ src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-700.woff2") format("woff2"); /* src */ font-weight: 700; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "Source Sans 3"; /* Schriftfamilie */ src: url("../assets/fonts/source-sans-3/source-sans-3-v19-latin-700italic.woff2") format("woff2"); /* src */ font-weight: 700; /* Schriftstärke */ font-style: italic; /* Schriftschnitt */ font-display: swap; /* font-display */ } /* Inter — mit eindeutigem Namen "InterLocal", um Windows-Inter auszuschließen */ @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/Inter-ExtraLight.woff2") format("woff2"); /* src */ font-weight: 200; /* ExtraLight */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/Inter-ExtraLightItalic.woff2") format("woff2"); /* src */ font-weight: 200; /* Schriftstärke */ font-style: italic; /* Schriftschnitt */ font-display: swap; /* font-display */ } /* Inter 400/600/700 (v19 latin) – liegen jetzt auch im /inter-Ordner */ @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/inter-v19-latin-regular.woff2") format("woff2"); /* src */ font-weight: 400; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/inter-v19-latin-600.woff2") format("woff2"); /* src */ font-weight: 600; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/inter-v19-latin-700.woff2") format("woff2"); /* src */ font-weight: 700; /* Bold */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } /* Optional: Inter 800 (ExtraBold) – nur wenn benötigt */ @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/Inter-ExtraBold.woff2") format("woff2"); /* src */ font-weight: 800; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "InterLocal"; /* Schriftfamilie */ src: url("../assets/fonts/inter/Inter-ExtraBoldItalic.woff2") format("woff2"); /* src */ font-weight: 800; /* Schriftstärke */ font-style: italic; /* Schriftschnitt */ font-display: swap; /* font-display */ } /* Optional: Manrope — nur falls du sie irgendwo verwendest (eindeutiger Name "ManropeLocal") */ @font-face{ font-family: "ManropeLocal"; /* Schriftfamilie */ src: url("../assets/fonts/manrope/manrope-v20-latin-regular.woff2") format("woff2"); /* src */ font-weight: 400; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "ManropeLocal"; /* Schriftfamilie */ src: url("../assets/fonts/manrope/manrope-v20-latin-600.woff2") format("woff2"); /* src */ font-weight: 600; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } @font-face{ font-family: "ManropeLocal"; /* Schriftfamilie */ src: url("../assets/fonts/manrope/manrope-v20-latin-700.woff2") format("woff2"); /* src */ font-weight: 700; /* Schriftstärke */ font-style: normal; /* Schriftschnitt */ font-display: swap; /* font-display */ } /*===================================================== = = = ROOT = = = =====================================================*/ /* ---------- Root: zentrale Steuerung ---------- */ /*===================================================== = = = :root Tokens = = Sortiert & kommentiert (Step 7 Pass) = = = =====================================================*/ :root { /* Colors */ --aboutme-bg: rgba(255, 255, 255, .05); /* Colors */ --aboutme-bg-hover: rgba(255, 255, 255, .14); /* Colors */ --bg-body: #0b1d27; /* Colors */ --bg-image: url("../assets/img/bg-universe.png"); /* Colors */ --box-bg: rgba(255,255,255,0.0); /* Colors */ --box-hover-bg: rgba(255,255,255,0.10); /* Colors */ --connector-color: rgba(255,255,255,0.60); /* Colors */ --feature-marker-color: rgba(255,255,255,.8); /* Colors */ --stage-foot-bg: rgba(0,0,0,.18); /* Colors */ --stage-foot-color: rgba(234,243,255,.92); /* Colors */ --subgen-bg-image: url("../assets/img/bg-universe.png"); /* Colors */ --subgen-card-bg: rgba(10,16,24,.55); /* Colors */ --subgen-card-blur: 8px; /* Colors */ --subgen-card-bottomline: rgba(255, 0, 153, .35); /* Colors */ --subgen-card-radius: 18px; /* Colors */ --subgen-card-saturate: 115%; /* Colors */ --subgen-card-topline: rgba(0, 230, 255, .35); /* Colors */ --subgen-content-max: 960px; /* Colors */ --subgen-content-pad: clamp(18px, 2.6vw, 28px); /* Colors */ --subgen-foot-bg: rgba(10,16,24,.40); /* Colors */ --subgen-foot-blur: 8px; /* Colors */ --subgen-foot-pad: 10px 16px; /* Colors */ --subgen-foot-topline: rgba(255,255,255,.06); /* Colors */ --subgen-hero-gap: clamp(16px, 3vw, 24px); /* Colors */ --subgen-hero-height: 7vh; /* Colors */ --subgen-hero-pad: clamp(28px, 6vw, 48px); /* Colors */ --subgen-logo-left: 10%; /* Colors */ --subgen-logo-size: clamp(50px, 7vw, 240px); /* Colors */ --subgen-logo-top: 50%; /* Colors */ --subgen-split-body-bg: rgba(10,16,24,.55); /* Colors */ --subgen-split-body-blur: 8px; /* Colors */ --subgen-split-body-pad: clamp(18px, 2.5vw, 28px); /* Colors */ --subgen-split-body-radius: 16px; /* Colors */ --subgen-split-body-saturate: 115%; /* Colors */ --subgen-split-body-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25); /* Colors */ --subgen-split-gap: clamp(18px, 3vw, 32px); /* Colors */ --subgen-split-li-gap: 8px; /* Colors */ --subgen-split-li-line: 1.4; /* Colors */ --subgen-split-list-indent: 1.15em; /* Colors */ --subgen-split-list-style: disc; /* Colors */ --subgen-split-marker-color: rgba(255,255,255,.85); /* Colors */ --subgen-split-marker-size: 1em; /* Colors */ --subgen-split-max: 1080px; /* Colors */ --subgen-split-media-clip: inset(0 round var(--subgen-split-media-radius)); /* Colors */ --subgen-split-media-fit: cover; /* Colors */ --subgen-split-media-radius: 16px; /* Colors */ --subgen-split-media-shadow: 0 14px 36px rgba(0,0,0,.28); /* Colors */ --subgen-split-pad: clamp(18px, 4vh, 40px); /* Colors */ --subgen-split-ratio: 1fr 2fr; /* Colors */ --subgen-split-ratio-reverse: 2fr 1fr; /* Colors */ --subgen-split-row-h: clamp(260px, 38vh, 420px); /* Colors */ --subgen-split-stack-break: 900px; /* Colors */ --subgen-split-text-color: rgba(255,255,255,.92); /* Colors */ --subgen-split-text-font: "InterLocal", system-ui, sans-serif; /* Colors */ --subgen-split-text-line: 1.5; /* Colors */ --subgen-split-text-size: clamp(15px, 1.7vw, 18px); /* Colors */ --subgen-split-title-color: #fff; /* Colors */ --subgen-split-title-font: "Bebas Neue", system-ui, sans-serif; /* Colors */ --subgen-split-title-size: clamp(26px, 3.4vw, 38px); /* Colors */ --subgen-split-title-weight: 400; /* Colors */ --subgen-sub-color: rgba(255,255,255,.86); /* Colors */ --subgen-sub-font: "InterLocal", system-ui, sans-serif; /* Colors */ --subgen-sub-size: clamp(16px, 2.2vw, 20px); /* Colors */ --subgen-sub-weight: 200; /* Colors */ --subgen-title-color: #fff; /* Colors */ --subgen-title-font: "Bebas Neue", system-ui, sans-serif; /* Colors */ --subgen-title-left: 50%; /* Colors */ --subgen-title-letter: .6px; /* Colors */ --subgen-title-line: 1.06; /* Colors */ --subgen-title-size: clamp(28px, 4vw, 42px); /* Colors */ --subgen-title-top: 50%; /* Colors */ --subgen-title-weight: 400; /* Colors */ --tagline-color: #eaf3ff; /* Colors */ --topics-bg: rgba(255,255,255,.04); /* Colors */ --color-accent1: #3557c9; /* CTA Gradient-Farben */ /* Blau */ --color-accent2: #5a37c9; /* CTA Gradient-Farben */ /* Lila */ --grad-1: #263a6a; /* CTA Navy-Blau */ --grad-2: #2f4687; /* CTA Indigo */ --grad-3: #4439a6; /* CTA gedecktes Violett */ --grad-4: #5b3fc2; /* CTA Lila */ --grad-5: #734ad8; /* CTAViolett heller */ /* Typography */ --aboutme-letter: .02em; /* Typography */ --aboutme-text: #f7fbff; /* Typography */ --beyond-font-size: calc(var(--logo-size-px) * 0.36); /* Typography */ --beyond-letter: 0.03em; /* Typography */ --box-body-font: "Source Sans 3", system-ui, sans-serif; /* Typography */ --box-head-font: "Bebas Neue", system-ui, sans-serif; /* Typography */ --logo-text-left: 30.1%; /* Typography */ --logo-text-scale: 1; /* Typography */ --logo-text-top: 23.0%; /* Typography */ --sub-title-font: "Bebas Neue", system-ui, sans-serif; /* Typography */ --tagline-align: left; /* Typography */ --tagline-font: "InterLocal", system-ui, sans-serif; /* Typography */ --tagline-left: 60%; /* Typography */ --tagline-letterspace: 0.2px; /* Typography */ --tagline-lineheight: 1.35; /* Typography */ --tagline-maxch: 60ch; /* Typography */ --tagline-maxvw: 52vw; /* Typography */ --tagline-scale: 1; /* Typography */ --tagline-size: clamp(16px, 2.2vw, 24px); /* Typography */ --tagline-style: italic; /* Typography */ --tagline-top: 23%; /* Typography */ --tagline-weight: 200; /* Typography */ --text: #e9f3f4; /* Typography */ /* Radii & Shadows */ --aboutme-radius: 999px; /* Radii & Shadows */ --aboutme-shadow: 0 6px 24px rgba(0,0,0,.35); /* Radii & Shadows */ --aboutme-shadow-hover: 0 8px 28px rgba(0,0,0,.45); /* Radii & Shadows */ --box-radius: 14px; /* Radii & Shadows */ --topics-shadow: 0 8px 30px rgba(0,0,0,.35); /* Radii & Shadows */ /* Spacing */ --aboutme-padX: 14px; /* Spacing */ --aboutme-padY: 8px; /* Spacing */ --box-gap: 30px; /* Spacing */ --feature-li-gap: 8px; /* Spacing */ --feature-pad-y: 16px; /* Spacing */ --line-gap: -0.52em; /* Spacing */ --pad-x: 1rem; /* Spacing */ --stage-foot-pad: 10px 16px; /* Spacing */ --sub-hero-gap: 16px; /* Spacing */ --topics-pad: 0px; /* Spacing */ /* Layout */ --aboutme-size: clamp(12px, 1.1vw, 14px); /* Layout */ --beyond-size: clamp(64px, 9.5vw, 200px); /* Layout */ --box-body-size: clamp(14px, 1.6vw, 16px); /* Layout */ --box-head-size: clamp(18px, 2.4vw, 26px); /* Layout */ --box-height: 265px; /* Layout */ --box-width: 350px; /* Layout */ --connector-width: 200px; /* Layout */ --feature-marker-size: 1em; /* Layout */ --features-group-width: calc(var(--box-width) * 3 + var(--box-gap) * 2); /* Layout */ --hero-min-h: min(92vh, 820px); /* Layout */ --logo-left: 30%; /* Layout */ --logo-size-px: 187px; /* Layout */ --logo-top: 23%; /* Layout */ --stage-foot-blur: 4px; /* Layout */ --stage-foot-border: rgba(255,255,255,.0); /* Layout */ --stage-foot-link: rgba(234,243,255,.92); /* Layout */ --stage-foot-link-hover: #fff; /* Layout */ --stage-foot-offset: 20px; /* Layout */ --sub-hero-minh: 28vh; /* Layout */ --sub-logo-left: 0%; /* Layout */ --sub-logo-size: 122px; /* Layout */ --sub-logo-top: 50%; /* Layout */ --sub-title-size: clamp(22px, 4vw, 37px); /* Layout */ /* Components */ --aboutme-border: rgba(255, 255, 255, .02); /* Components */ --aboutme-border-hover: rgba(255, 255, 255, .35); /* Components */ --aboutme-right: calc(12px + env(safe-area-inset-right)); /* Components */ --aboutme-top: calc(12px + env(safe-area-inset-top)); /* Components */ --aboutme-weight: 600; /* Components */ --feature-li-line: 1.35; /* Components */ --feature-list-indent: 1.15em; /* Components */ --feature-list-style: disc; /* Components */ --features-left: 50%; /* Components */ --features-scale: 1; /* Components */ --features-top: 55%; /* Components */ /* Other */ --beyond-scaleX: 1.4; /* Other */ --beyond-scaleY: 0.55; /* Other */ --box-blur: 8px; /* Other */ --box-body-line: 1.4; /* Other */ --box-border: rgba(255,255,255,0.35); /* Other */ --box-head-alpha: 0.20; /* Other */ --box-head-track: 1px; /* Other */ --box-hover-lift: -4px; /* Other */ --box-hover-scale: 1.01; /* Other */ --connector-glow: rgba(0, 255, 240, 0.35); /* Other */ --connector-thickness: 2px; /* Other */ --container-max: 1120px; /* Other */ --doc-max: 860px; /* Other */ --edge-boost: 1.25; /* Other */ --edge-bottom: rgba(255, 0, 160, 0.65); /* Other */ --edge-glow: 28px; /* Other */ --edge-thickness: 2px; /* Other */ --edge-top: rgba(0, 255, 240, 0.65); /* Other */ --steps-ratio: 0.33; /* Other */ --sub-title-line: 1.15; /* Other */ --sub-title-track: 2.5px; /* Other */ --sub-title-weight: 700; /* Other */ --topics-border: 1px solid rgba(255,255,255,.12); /* Other */ --topics-br: 16px; /* Other */ --topics-cap: rgba(255,255,255,.66); /* Other */ --topics-max: 1120px; /* Other */ } /* ---------- Base ---------- */ *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; /* Außenabstand */ font-family: "InterLocal", system-ui, sans-serif; /* Schriftfamilie */ color: var(--text); /* Schriftfarbe */ background: var(--bg-body); /* Hintergrund */ line-height: 1.45; /* Zeilenhöhe */ } /* ---------- HERO ---------- */ /*===================================================== = = = Hero / Logo / Claim = = = =====================================================*/ .hero{ display:grid; place-items:center; padding:0; /* Anzeigeart */ } .hero-canvas{ position: relative; /* Positionierung */ width: 100vw; /* Breite */ min-height: 100vh; /* Mindesthöhe */ overflow: hidden; /* overflow */ background: /* Hintergrund */ radial-gradient(120% 75% at 50% 0%, rgba(255,255,255,.06), transparent 60%), radial-gradient(120% 85% at 50% 100%, rgba(0,0,0,.28), transparent 65%), var(--bg-image) center / cover no-repeat, linear-gradient(180deg, #0B1D27 0%, #091319 100%); background-blend-mode: screen, multiply, normal, normal; /* Background Blend Modus */ } /* Planet relativ zu .hero-canvas ausrichten */ .hero-canvas > .planet-logo{ position: absolute; /* Positionierung */ left: var(--logo-left); /* Abstand links */ top: var(--logo-top); /* Abstand oben */ width: var(--logo-size-px); /* Breite */ height: var(--logo-size-px); /* Höhe */ transform: translate(-50%, -50%); /* Transformation */ object-fit: contain; /* Bild-Anpassung */ filter: drop-shadow(0 18px 36px rgba(0,0,0,0)); /* Filter */ pointer-events: none; /* Mausereignisse */ user-select: none; /* Textauswahl */ z-index: 1; /* Stapelreihenfolge */ } .hero-inner{ width: min(var(--container-max), 92vw); /* Breite */ margin-inline: auto; /* Außenabstand horizontal */ padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(48px, 8vh, 96px); /* Innenabstand */ position: relative; /* Positionierung */ } /* ---------- Navigation ---------- */ .hero-nav{ position: absolute; /* Positionierung */ inset: 0 0 auto 0; /* Kanten-Abstand */ height: 64px; /* Höhe */ display: flex; /* Anzeigeart */ align-items: center; /* align-items */ justify-content: space-between; /* justify-content */ width: min(var(--container-max), 92vw); /* Breite */ margin-inline: auto; /* Außenabstand horizontal */ padding: 0 var(--pad-x); /* Innenabstand */ z-index: 2; /* Stapelreihenfolge */ } .hero-nav a{ color: var(--text); text-decoration: none; opacity:.92; } .hero-nav a:hover{ opacity:1; } .hero-nav .brand{ font-weight:700; letter-spacing:.2px; } /*===================================================== = = = Button AboutMe = = = =====================================================*/ /*===================================================== = = = Buttons = = = =====================================================*/ .aboutme-btn{ position: fixed; /* position */ top: var(--aboutme-top); /* top */ right: var(--aboutme-right); /* right */ z-index: 9999; /* z-index */ display: inline-flex; /* Anzeigeart */ align-items: center; /* Vertikale Ausrichtung */ gap: .5ch; /* Abstand zwischen Elementen */ padding: var(--aboutme-padY) var(--aboutme-padX); /* Innenabstand */ border-radius: var(--aboutme-radius); /* Eckenradius */ border: 1px solid var(--aboutme-border); /* Rahmen */ background: var(--aboutme-bg); /* Hintergrund */ color: var(--aboutme-text); /* Schriftfarbe */ box-shadow: var(--aboutme-shadow); /* Schatten */ -webkit-backdrop-filter: blur(6px); /* -webkit-backdrop-filter */ backdrop-filter: blur(6px); /* backdrop-filter */ font-size: var(--aboutme-size); /* font-size */ font-weight: var(--aboutme-weight); /* Schriftstärke */ letter-spacing: var(--aboutme-letter); /* Laufweite */ text-decoration: none; /* text-decoration */ line-height: 1; /* line-height */ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease; /* Übergang */ } .aboutme-btn:hover{ background: var(--aboutme-bg-hover); /* Hintergrund */ border-color: var(--aboutme-border-hover); /* border-color */ box-shadow: var(--aboutme-shadow-hover); /* Schatten */ transform: translateY(-1px); /* Transformation */ } .aboutme-btn:active{ transform: translateY(0); /* Transformation */ } .aboutme-btn:focus-visible{ outline: 2px solid rgba(255,255,255,.8); /* Fokus-Rand */ outline-offset: 3px; /* Abstand Fokus-Rand */ border-color: #fff; /* border-color */ } .aboutme-two-col { display: flex; align-items: stretch; /* gleiche Höhe */ gap: 2rem; } .aboutme-text, .aboutme-visuals { flex: 1; } .aboutme-visuals { display: flex; flex-direction: column; justify-content: center; /* Bilder mittig verteilen */ gap: 1.5rem; } .aboutme-visuals img { max-width: 100%; height: auto; margin: 0 auto; } /*===================================================== = = = AboutMe / Story Box = = = = Intro-Story oben: ruhige, lesbare Textbox = = Struktur: Hook / Warum / Wie / Wirkung / CTA = = = =====================================================*/ .aboutme-story .story-block { max-width: 1070px; margin: 0 auto 2rem; padding: 1.25rem 1.25rem 1rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(10, 16, 24, 0.35); backdrop-filter: blur(2px); } .aboutme-story .story-block h2 { margin: 0 0 .75rem 0; line-height: 1.25; } .aboutme-story .story-block h3 { margin: 1.25rem 0 .4rem; font-size: 1.05rem; letter-spacing: .02em; } .aboutme-story .story-block p { margin: 0 0 .5rem 0; line-height: 1.6; } .aboutme-story .story-block .lead { font-size: 1.05rem; line-height: 1.65; margin-bottom: .75rem; } /*===================================================== = = = AboutMe / Topic Cards = = = = 6 Karten (Grid), mobil 1-spaltig, klar & ruhig = = = =====================================================*/ .aboutme-topics { max-width: 1100px; margin: 0 auto 2.5rem; padding: 0 1rem; } .aboutme-topics h2 { margin: 0 0 1rem; line-height: 1.25; } .topic-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .topic-card { background: rgba(10,16,24,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; } .topic-card h3 { margin: 0 0 .25rem; font-size: 1.05rem; letter-spacing: .02em; } .topic-card p { margin: 0; line-height: 1.55; } .topic-card ul { margin: .25rem 0 0; padding-left: 1.1rem; } .topic-card li { margin: .1rem 0; } .topic-card .more { margin-top: .6rem; align-self: flex-start; text-decoration: underline; text-underline-offset: 2px; } /*===================================================== = = = AboutMe / Story / Collapsible = = = = = = = =====================================================*/ /* AboutMe / Story: Collapsible */ .story-collapsible { max-height: 10rem; /* zeigt ca. Hook + bisschen Warum */ overflow: hidden; position: relative; } .story-collapsible.is-expanded { /* offene Ansicht */ max-height: none; } .story-collapsible.is-collapsed::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4.5rem; /* Fade-Maske unten */ background: linear-gradient(to bottom, transparent, rgba(10,16,24,0.7)); } .story-toggle { margin-top: .5rem; display: inline-flex; gap: .5rem; align-items: center; padding: .45rem .75rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; } .story-toggle:hover { background: rgba(255,255,255,.1); } /* AboutMe / CTA */ .aboutme-cta .cta-box { width: 100%; /* volle Breite im Container */ box-sizing: border-box; /* Padding zählt zur Breite */ padding: 1.25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(10,16,24,.35); } .aboutme-cta .cta-link { text-decoration: underline; text-underline-offset: 3px; } /* AboutMe / CTA – Container auf gleiche Breite wie die anderen Sektionen bringen */ .subgen-section.aboutme-cta { max-width: 1100px; /* gleich wie .aboutme-topics / .aboutme-visual-grid */ margin: 0 auto 2.5rem; padding: 0 1rem; } .aboutme-cta .cta-box h2 { margin: 0 0 .5rem; line-height: 1.25; } /* CTA soll im Grid auf volle Spurbreite gehen */ .subgen-section.aboutme-cta { justify-self: stretch; /* überschreibt justify-items:center vom Grid */ width: min(1100px, 96vw); /* gleiche optische Breite wie andere Sektionen */ } /* Box füllt den Container vollständig */ .aboutme-cta .cta-box { width: 100%; box-sizing: border-box; } /*===================================================== = = = AboutMe / Story / New Style = = = = = = = =====================================================*/ /*===================================================== = Mission = = Vollbreit, ruhig, mit farbiger Akzentleiste = =====================================================*/ .aboutme-mission .mission-block { max-width: 1100px; margin: 0 auto 2.5rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; /* hast du schon */ overflow: hidden; /* wichtig: clippt Inhalte/Layer an die Rundung */ position: relative; background: linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18)), /* sanft abdunkeln */ radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.12), transparent 60%), /* leichte Vignette */ linear-gradient(180deg, #0b3140 0%, #134d62 58%, #1d7090 100%); /* dein Verlauf B */ color:#fff; /* Text wirklich Weiß */ } /* linke Akzentleiste mit deinem CTA-Gradient (Variante B Farben) */ .aboutme-mission .mission-block::before{ content: none !important; /* content:"";*/ position:absolute; inset: -1px auto -1px -1px; /* bündig an der linken Kante */ width: 8px; border-radius: 16px 0 0 16px; background: linear-gradient(180deg, var(--grad-1) 0%, var(--grad-2) 22%, var(--grad-3) 48%, var(--grad-4) 74%, var(--grad-5) 100%); opacity: .95; } .aboutme-mission .mission-title{ margin: 0 0 .75rem; line-height: 1.25; } .aboutme-mission .mission-block a { color:#fff; text-decoration: underline; } .aboutme-mission .mission-block h3{ margin: 1.2rem 0 .35rem; font-size: 1.05rem; letter-spacing: .02em; } .aboutme-mission .mission-block p{ margin: 0 0 .6rem; line-height: 1.65; } .aboutme-mission .mission-block .lead{ font-size: 1.05rem; line-height: 1.7; } /*===================================================== = = = AboutMe / CTA = = = = = = = =====================================================*/ /*===================================================== = AboutMe / CTA Split Block = =====================================================*/ /* Gradient-Fläche */ .cta-gradient { width:100%;height:100%; background: radial-gradient(90% 120% at 85% 15%, rgba(0,0,0,.50), transparent 60%), /* Vignette/Ecken abdunkeln */ linear-gradient(135deg, var(--grad-1) 00%, var(--grad-2) 22%, var(--grad-3) 48%, var(--grad-4) 74%, var(--grad-5) 100%); border-radius: var(--subgen-split-media-radius); } /* CTA Link */ .cta-link { display: inline-block; padding: .5rem 1rem; margin-top: .5rem; border-radius: 12px; text-decoration: none; color: #fff; transition: background .3s ease, transform .2s ease; /*background: var(--color-accent1);*/ background: color-mix(in oklab, var(--color-accent1) 55%, black); } .cta-link:hover { /*background: var(--color-accent2);*/ background: color-mix(in oklab, var(--color-accent2) 85%, black); transform: translateY(-2px); } .cta-gradient:hover::after{ background: linear-gradient(0deg, rgba(0,0,0,.16), rgba(0,0,0,.16)); } /*===================================================== = CTA Hybrid: Foto + Farb-Overlay = =====================================================*/ .aboutme-cta .cta-media{ position: relative; overflow: hidden; /* runde Ecken clippen */ border-radius: var(--subgen-split-media-radius); } /* Foto füllt die Fläche, bleibt stilvoll */ .aboutme-cta .cta-media .cta-photo{ width: 100%; height: 100%; object-fit: cover; /* keine Verzerrung, vollflächig */ display: block; transform: scale(1.02); /* minimaler Crop für saubere Kanten */ filter: saturate(0) contrast(1.05) brightness(.95); /* S/W-ish, edel */ transition: transform .5s ease, filter .3s ease; } /* Farb-Overlay im Beyond-Steps-Stil (Lila/Blau) + leichte Vignette */ .aboutme-cta .cta-media::after{ content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.18), transparent 60%), linear-gradient(135deg, rgba(122,74,240,.40), rgba(74,124,240,.35)); /* lila→blau, transparent */ pointer-events: none; mix-blend-mode: normal; /* konsistent über allen Browsern */ } /* dezente Interaktion (optional) */ .aboutme-cta .cta-media:hover .cta-photo{ transform: scale(1.05); filter: saturate(.15) contrast(1.08) brightness(.96); } /*===================================================== = AboutMe / Visual Cards = = 2er-Grid, gleiche Kästchen, Bilder klickbar = =====================================================*/ .aboutme-visual-grid { max-width: 1100px; margin: 0 auto 2.5rem; padding: 0 1rem; } .aboutme-visual-grid .grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Karte: gleiche Größe via aspect-ratio */ .viz-card { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(10,16,24,.35); overflow: hidden; cursor: zoom-in; } /* Button-Reset (weil wir Buttons als Trigger nehmen) */ .viz-card-btn { all: unset; width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; } /* Bild skaliert sauber in die Karte */ .viz-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; pointer-events: none; /* Klick geht auf die Karte/den Button */ } /*===================================================== = = = AboutMe - Split Media = = = =====================================================*/ /* AboutMe – Visuals in den Split-Boxen */ .aboutme-personal .split-media { position: relative; overflow: hidden; border-radius: var(--subgen-split-media-radius); box-shadow: var(--subgen-split-media-shadow); display: grid; place-items: center; /* zentriert Inhalt sauber */ } .aboutme-personal .split-media .split-media-trigger { all: unset; width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; } .aboutme-personal .split-media img { width: 92%; height: 92%; object-fit: contain; /* nie verzerren, sauber einbetten */ display: block; } /* Einheitliche Medienfläche in allen AboutMe-Splits */ .aboutme-personal .split-media, .aboutme-roadmap .split-media, .aboutme-wheel .split-media { position: relative; overflow: hidden; border-radius: var(--subgen-split-media-radius); box-shadow: var(--subgen-split-media-shadow); display: grid; place-items: center; } /* Button-Trigger: klickbar + Cursor */ .aboutme-personal .split-media .split-media-trigger, .aboutme-roadmap .split-media .split-media-trigger, .aboutme-wheel .split-media .split-media-trigger { all: unset; width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; outline: none; /* kein Fokusrahmen */ -webkit-tap-highlight-color: transparent; } /* Bild sauber einpassen + Klick geht an den Button */ .aboutme-personal .split-media img, .aboutme-roadmap .split-media img, .aboutme-wheel .split-media img { width: 92%; height: 92%; object-fit: contain; display: block; pointer-events: none; /* Cursor/Clickevent kommt vom Button */ } .aboutme-roadmap .split-media img, .aboutme-wheel .split-media img { width: 100%; height: 100%; object-fit: contain; } /* Roadmap & Wheel: Bild vollständig einpassen statt zuschneiden */ .aboutme-roadmap .split-media, .aboutme-wheel .split-media{ --subgen-split-media-fit: contain; /* überschreibt globales "cover" nur hier */ } /* (Optional) Einen Tick Luft lassen – wenn dir 100% zu „eng“ wirkt */ .aboutme-roadmap .split-media img, .aboutme-wheel .split-media img{ width: 98%; height: 98%; } /* Roadmap & Wheel: Bild vollständig in den Rahmen einpassen */ .aboutme-roadmap .split-media .split-media-trigger, .aboutme-wheel .split-media .split-media-trigger{ width: 100%; height: 100%; display: grid; place-items: center; cursor: zoom-in; } .aboutme-roadmap .split-media img, .aboutme-wheel .split-media img{ width: 100% !important; height: 100% !important; object-fit: contain; /* keine Beschneidung */ display: block; pointer-events: none; /* Klick bleibt auf dem Button */ } /*===================================================== = = = Logo Bild = = = =====================================================*/ /* ---------- Planet-Logo: endlich steuerbar ---------- */ .planet-logo{ position: absolute; /* Positionierung */ left: var(--logo-left); /* Abstand links */ top: var(--logo-top); /* Abstand oben */ width: var(--logo-size-px); /* Breite */ height: var(--logo-size-px); /* Höhe */ transform: translate(-50%, -50%); /* über dem Messpunkt zentrieren */ object-fit: contain; /* Bild-Anpassung */ filter: drop-shadow(0 18px 36px rgba(0,0,0,0)); /* Filter */ pointer-events: none; /* Mausereignisse */ user-select: none; /* Textauswahl */ z-index: 1; /* Stapelreihenfolge */ } /*===================================================== = = = Logo Text = = = =====================================================*/ /* Container frei positionierbar wie Planet */ .logo-text{ position: absolute; /* Positionierung */ left: var(--logo-text-left); /* Abstand links */ top: var(--logo-text-top); /* Abstand oben */ transform: translate(-50%, -50%) scale(var(--logo-text-scale)); /* Transformation */ text-align: center; /* Textausrichtung */ line-height: 1.1; /* Zeilenhöhe */ color: #fff; /* Schriftfarbe */ user-select: none; /* Textauswahl */ z-index: 2; /* Stapelreihenfolge */ } /* BEYOND – stabil & frei skalierbar */ .logo-beyond{ display: inline-block; /* Anzeigeart */ font-family: "Bebas Neue", system-ui, sans-serif; /* Schriftfamilie */ font-weight: 400; /* Schriftstärke */ font-size: var(--beyond-font-size); /* Schriftgröße */ transform: translateZ(0) scale(var(--beyond-scaleX), var(--beyond-scaleY)); /* Transformation */ transform-origin: center; /* Transformationsursprung */ will-change: transform; /* Rendering-Hinweis */ /* optisch „leichter“ wirken lassen: */ letter-spacing: var(--beyond-letter); /* Laufweite */ line-height: 0.92; /* Zeilenhöhe */ color: rgba(255,255,255,.95); /* Schriftfarbe */ -webkit-font-smoothing: antialiased; /* Font-Smoothing (WebKit) */ text-rendering: geometricPrecision; /* Text-Rendering */ } /* STEPS kleiner & dezenter */ .logo-steps{ display:block; /* Anzeigeart */ font-family: "Source Sans 3", system-ui, sans-serif; /* Schriftfamilie */ /*font-size: calc(var(--beyond-size) * var(--steps-ratio));*/ /*font-size: calc(var(--logo-size-px) * 0.36 * var(--steps-ratio));*/ font-size: calc(var(--beyond-font-size) * var(--steps-ratio)); /* Schriftgröße */ margin-top: var(--line-gap); /* margin-top */ font-weight: 400; /* Schriftstärke */ letter-spacing: 7px; /* Laufweite */ opacity: 0.85; /* Deckkraft */ } /* ---------- Claim/Text ---------- */ .claim{ position: relative; /* Positionierung */ margin: 0; /* Außenabstand */ font-weight: 800; /* Schriftstärke */ font-size: clamp(26px, 3.6vw, 40px); /* Schriftgröße */ letter-spacing: .4px; /* Laufweite */ line-height: 1.15; /* Zeilenhöhe */ text-shadow: 0 4px 18px rgba(0,0,0,.45); /* Textschatten */ z-index: 1; /* Stapelreihenfolge */ } .claim small{ display:block; /* Anzeigeart */ margin-top:.35em; /* margin-top */ font-weight:500; /* Schriftstärke */ font-size:.55em; /* Schriftgröße */ opacity:.9; /* Deckkraft */ } /*===================================================== = = = Claim Text = = = =====================================================*/ /* frei positionierbarer Container (wie beim Planet) */ .tagline{ position: absolute; /* Positionierung */ left: var(--tagline-left); /* Abstand links */ top: var(--tagline-top); /* Abstand oben */ transform: translate(-50%, -50%) scale(var(--tagline-scale)); /* Transformation */ z-index: 2; /* Stapelreihenfolge */ max-width: min(var(--tagline-maxch), var(--tagline-maxvw)); /* Maximalbreite */ pointer-events: none; /* Mausereignisse */ user-select: none; /* Textauswahl */ } /* Text mit echten Umbrüchen & Leerzeilen */ .tagline-text{ white-space: pre-line; /* white-space */ font-style: var(--tagline-style); /* Schriftschnitt */ font-family: var(--tagline-font); /* Schriftfamilie */ font-size: var(--tagline-size); /* Schriftgröße */ font-weight: var(--tagline-weight); /* Schriftstärke */ font-synthesis: none; /* font-synthesis */ color: var(--tagline-color); /* Schriftfarbe */ text-align: var(--tagline-align); /* Textausrichtung */ line-height: var(--tagline-lineheight); /* Zeilenhöhe */ letter-spacing: var(--tagline-letterspace); /* Laufweite */ text-shadow: 0 3px 12px rgba(0,0,0,.35); /* Textschatten */ } /*===================================================== = = = Feature Boxen = = = =====================================================*/ /* Gruppe frei positionierbar wie Planet/Text */ /*===================================================== = = = Cards / Feature-Boxen = = = =====================================================*/ .feature-boxes{ width: min(var(--features-group-width), 92vw); /* nicht breiter als Viewport */ position: absolute; /* Positionierung */ left: var(--features-left); /* Abstand links */ top: var(--features-top); /* Abstand oben */ transform: translate(-50%, -50%) scale(var(--features-scale)); /* Transformation */ display: grid; /* Anzeigeart */ grid-template-columns: repeat(3, var(--box-width)); /* Grid-Spalten */ align-items: center; /* align-items */ gap: var(--box-gap); /* Abstand zwischen Elementen */ z-index: 3; /* Stapelreihenfolge */ column-gap: var(--box-gap); /* Spaltenabstand */ row-gap: var(--box-gap); /* Zeilenabstand */ } /* Einzelbox, oben Head, unten Body */ .feature-box{ position: relative; /* Positionierung */ width: var(--box-width); /* Breite */ height: var(--box-height); /* Höhe */ display: grid; /* Anzeigeart */ grid-template-rows: auto 1fr; /* Grid-Zeilen */ /* Glassmorphism */ border: none; /* kein Rahmen mehr */ border-radius: var(--box-radius); /* Eckenradius */ background: var(--box-bg); /* Hintergrund */ backdrop-filter: blur(var(--box-blur)); /* Glas-Effekt */ -webkit-backdrop-filter: blur(var(--box-blur)); /* Glas-Effekt (Safari) */ color: #fff; /* Schriftfarbe */ overflow: hidden; /* Überlauf */ z-index: 1; /* Stapelreihenfolge */ transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease, filter .35s ease; /* Übergang */ } /* Top-Linie */ .feature-box::before, .feature-box::after{ content: ""; /* content */ position: absolute; /* Positionierung */ left: 0; /* Abstand links */ width: 100%; /* Breite */ height: var(--edge-thickness); /* Höhe */ pointer-events: none; /* Mausereignisse */ } /* oben: cyan */ .feature-box::before{ top: 0; /* Abstand oben */ background: linear-gradient(90deg, transparent 0%, var(--edge-top) 12%, var(--edge-top) 88%, transparent 100%); box-shadow: 0 0 var(--edge-glow) var(--edge-top); /* Schatten */ } /* unten: magenta */ .feature-box::after{ bottom: 0; /* Abstand unten */ background: linear-gradient(90deg, transparent 0%, var(--edge-bottom) 12%, var(--edge-bottom) 88%, transparent 100%); box-shadow: 0 0 var(--edge-glow) var(--edge-bottom); /* Schatten */ } /* Hover: Lift + stärkerer Glow + etwas „glasiger“ */ .feature-box:hover{ transform: translateY(var(--box-hover-lift)) scale(var(--box-hover-scale)); /* Transformation */ background: var(--box-hover-bg); /* Hintergrund */ box-shadow: 0 18px 36px rgba(0,0,0,.35), inset 0 0 0.5px rgba(255,255,255,.25); } /* Linien beim Hover etwas kräftiger */ .feature-box:hover::before{ filter: saturate(var(--edge-boost)) brightness(1.1); /* Filter */ } .feature-box:hover::after{ filter: saturate(var(--edge-boost)) brightness(1.1); /* Filter */ } /* Liste in den Feature-Boxen */ .feature-box .box-body ul{ list-style: var(--feature-list-style) outside; /* list-style */ padding-left: var(--feature-list-indent); /* padding-left */ margin: 0; /* Außenabstand */ } .feature-box .box-body li{ line-height: var(--feature-li-line); /* Zeilenhöhe */ margin: 0 0 var(--feature-li-gap) 0; /* Außenabstand */ } /* optional: etwas mehr Innenabstand im Textbereich */ .feature-box .box-body{ padding-top: var(--feature-pad-y); /* padding-top */ padding-bottom: var(--feature-pad-y); /* padding-bottom */ } .feature-box .box-body li::marker{ color: var(--feature-marker-color); /* Schriftfarbe */ font-size: var(--feature-marker-size); /* Schriftgröße */ } /* Klickbare Feature-Box */ .feature-box.link-card{ display: block; /* als Block */ color: inherit; /* Schriftfarbe übernehmen */ text-decoration: none; /* keine Unterstreichung */ } /* auch bei Hover/Focus keine Unterstreichung */ .feature-box.link-card:where(:hover, :focus, :focus-visible){ text-decoration: none; /* Textdekoration */ } /* Falls in der Box echte Links vorkommen sollen, die unterstrichen bleiben: */ .feature-box.link-card .box-body a{ text-decoration: underline; /* Textdekoration */ } .feature-box.link-card:hover{ filter: brightness(1.03); /* Filter */ box-shadow: 0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); /* Schatten */ transform: translateY(-1px); /* Transformation */ } .feature-box.link-card:active{ transform: translateY(0); /* Transformation */ filter: brightness(1.0); /* Filter */ } /* ---------- Box-Header: nur der Titel-Streifen bekommt einen Hintergrund ---------- */ .feature-box .box-head{ /* Standard-Optik */ padding: 12px 16px; /* Innenabstand */ border-radius: 10px 10px 0 0; /* Eckenradius */ font-weight: 700; /* Schriftstärke */ /* NEU: Hintergrund nur für den Header – per Variable steuerbar */ background: var(--box-head-bg, transparent); /* Default = transparent */ color: var(--box-head-color, #eaf8ff); /* Textfarbe für gute Lesbarkeit */ text-shadow: var(--box-head-shadow, 0 1px 2px rgba(0,0,0,.25)); /* Textschatten */ } /* Optional: feine Linie unten, damit der Header klar abgegrenzt ist */ .feature-box .box-head{ box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); /* Schatten */ text-shadow: 0 1px 2px rgba(0,0,0,.35); /* Textschatten */ } /* Organisationsentwicklung – Cyan/Türkis → Golden (wie Orga-Bild) */ .feature-box.orga{ --box-head-bg: linear-gradient( 90deg, rgba(6, 52, 70, 0.35) 0%, /* tiefes Petrol (dunkelt ab) */ rgba(43, 178, 192, 0.28) 38%,/* Türkis/Cyan Licht */ rgba(248, 186, 110, 0.25) 100% /* warmes Amber */ ); --box-head-color: #f7fbff; /* weißlich, gut lesbar */ } /* Coach & Mentor – Teal → Sun-Yellow (kräftiger) → Warm Orange → Magenta/Rose */ .feature-box.coach{ /* Feinfühler: 0.22–0.30. Höher = kräftiger Balken */ --box-head-alpha: 0.26; /* --box-head-alpha */ --box-head-bg: linear-gradient( 90deg, rgba( 8, 160, 173, var(--box-head-alpha)) 0%, /* Teal/Cyan */ rgba(255, 215, 88, calc(var(--box-head-alpha)*1.05)) 28%, /* Sun-Yellow etwas heller */ rgba(255, 140, 72, var(--box-head-alpha)) 56%, /* wärmeres Orange */ rgba(228, 73, 116, var(--box-head-alpha)) 100% /* Magenta/Rose */ ); --box-head-color: #f7fbff; /* --box-head-color */ --box-head-shadow: 0 1px 2px rgba(0,0,0,.35); /* --box-head-shadow */ } /* Digitales – Neon-Cyan → Electric Blue → Violett/Magenta */ .feature-box.digitales{ /* Stell dir die “Stärke” hier ein (0.18–0.34 ist meist sweet spot) */ --box-head-alpha: 0.26; /* --box-head-alpha */ --box-head-bg: linear-gradient( 90deg, rgba( 0, 231, 255, var(--box-head-alpha)) 0%, /* Neon-Cyan */ rgba( 45, 179, 255, var(--box-head-alpha)) 28%, /* Electric Blue */ rgba( 74, 72, 255, var(--box-head-alpha)) 58%, /* Indigo/Violett-Blue */ rgba(154, 60, 255, var(--box-head-alpha)) 100% /* Violett/Magenta */ ); --box-head-color: #f6fbff; /* off-white, gut lesbar */ --box-head-shadow: 0 1px 2px rgba(0,0,0,.35); /* subtiler Kontrast */ } /* Oberer Bereich (Headline) */ .box-head{ font-family: var(--box-head-font); /* Schriftfamilie */ font-size: var(--box-head-size); /* Schriftgröße */ letter-spacing: var(--box-head-track); /* Laufweite */ padding: 14px 16px 8px; /* Innenabstand */ text-transform: uppercase; /* text-transform */ line-height: 1.1; /* Zeilenhöhe */ } /* Unterer Bereich (Stichpunkte) */ .box-body{ font-family: var(--box-body-font); /* Schriftfamilie */ font-size: var(--box-body-size); /* Schriftgröße */ line-height: var(--box-body-line); /* Zeilenhöhe */ padding: 10px 16px 14px; /* Innenabstand */ } .box-body ul{ margin: 0; /* Außenabstand */ padding-left: 1.1em; /* padding-left */ } .box-body ul{ margin:0; padding-left:1.1em; } .box-body li{ opacity:.92; } /* ------------------------------------------------------- Connector: garantiert sichtbar + „Durchlauf“ durch die Boxen ------------------------------------------------------- */ .connector{ width: var(--connector-width); /* Breite */ height: var(--connector-thickness); /* Höhe */ background: var(--connector-color); /* Hintergrund */ border-radius: 999px; /* Eckenradius */ position: relative; /* Positionierung */ z-index: 2; /* über den Boxen */ box-shadow: 0 0 18px var(--connector-glow); /* Schatten */ /* optisch in die Boxen hineinlaufen lassen */ margin-inline: -14px; /* überlappt die inneren Boxkanten */ } /* „Öffnung“ der inneren Kanten, damit die Linie durchgeht */ .feature-box:first-child{ border-right-color: transparent; } .feature-box:last-child{ border-left-color: transparent; } /*===================================================== = = = SubSite AboutMe SVG MapOfTopics = = = =====================================================*/ /* === AboutMe – Topics SVG via === */ .subgen .topics-figure { /* hast du schon */ max-width: var(--topics-max); /* Maximalbreite */ margin: clamp(16px, 3vw, 32px) auto; /* Außenabstand */ padding: var(--topics-pad); /* Innenabstand */ background: var(--topics-bg); /* Hintergrund */ border: var(--topics-border); /* Rahmen */ border-radius: var(--topics-br); /* Eckenradius */ box-shadow: var(--topics-shadow); /* Schatten */ } .subgen .topics-img{ display: block; /* Anzeigeart */ width: 100%; /* Breite */ height: auto; /* Höhe */ } .subgen .topics-caption{ margin-top: 10px; /* margin-top */ text-align: center; /* Textausrichtung */ color: var(--topics-cap); /* Schriftfarbe */ font-size: clamp(12px, 1.5vw, 14px); /* Schriftgröße */ } .subgen .topics-caption a{ color: inherit; /* Schriftfarbe */ text-decoration: underline; /* Textdekoration */ text-underline-offset: 2px; /* text-underline-offset */ } /*===================================================== = = = Footer = = = =====================================================*/ /*===================================================== = = = Footer = = = =====================================================*/ .stage-footer{ position: absolute; /* position */ left: 0; /* left */ right: 0; /* right */ bottom: var(--stage-foot-offset); /* bottom */ z-index: 5; /* z-index */ width: min(var(--features-group-width), 92vw); /* width */ margin-left: auto; /* margin-left */ margin-right: auto; /* margin-right */ } .stage-foot-inner{ width: min(var(--features-group-width), 92vw); /* width */ margin: 0 auto; /* Außenabstand */ display: flex; /* Anzeigeart */ justify-content: space-between; /* Horizontale Ausrichtung */ gap: 16px; /* Abstand zwischen Elementen */ align-items: center; /* Vertikale Ausrichtung */ color: var(--stage-foot-color); /* Schriftfarbe */ padding: var(--stage-foot-pad); /* Innenabstand */ border-radius: 10px; /* border-radius */ background: var(--stage-foot-bg); /* Hintergrund */ backdrop-filter: blur(var(--stage-foot-blur)); /* backdrop-filter */ -webkit-backdrop-filter: blur(var(--stage-foot-blur)); /* -webkit-backdrop-filter */ border: 1px solid var(--stage-foot-border); /* border */ } .stage-foot-inner a{ color: var(--stage-foot-link); /* Schriftfarbe */ text-decoration: none; /* text-decoration */ border-bottom: 1px dotted rgba(255,255,255,.35); /* Unterkante/Rahmen */ } .stage-foot-inner a:hover{ color: var(--stage-foot-link-hover); border-bottom-style: solid; /* Schriftfarbe */ } .stage-foot-left, .stage-foot-right{ display: flex; /* Anzeigeart */ gap: 12px 16px; /* Abstand zwischen Elementen */ align-items: center; /* Vertikale Ausrichtung */ flex-wrap: wrap; /* flex-wrap */ } /*===================================================== = = = SubSites = = = =====================================================*/ .sub-hero{ min-height: var(--sub-hero-minh); /* Mindesthöhe */ background: radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.06), transparent 60%), radial-gradient(120% 95% at 50% 100%, rgba(0,0,0,.28), transparent 65%), var(--bg-image) center / cover no-repeat; background-blend-mode: screen, multiply, normal; /* Background Blend Modus */ display: grid; /* Anzeigeart */ place-items: center; /* Ausrichtung im Grid */ color: #fff; /* Schriftfarbe */ text-shadow: 0 3px 12px rgba(0,0,0,.35); /* Textschatten */ } /* Innenbereich dient als Positionierungs-Referenz */ .sub-hero-inner{ width: min(var(--container-max), 92vw); /* Breite */ position: relative; /* WICHTIG: Bezug für das Logo */ padding: 18px 0; /* etwas Luft */ } .sub-logo{ position: absolute; /* Positionierung */ left: var(--sub-logo-left); /* Abstand links */ top: var(--sub-logo-top); /* Abstand oben */ transform: translate(-50%, -50%); /* auf den Messpunkt zentrieren */ display: block; /* Anzeigeart */ width: var(--sub-logo-size); /* Breite */ height: var(--sub-logo-size); /* Höhe */ } .sub-logo img{ width: 100%; /* Breite */ height: 100%; /* Höhe */ object-fit: contain; /* Bild-Anpassung */ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); /* Filter */ display: block; /* Anzeigeart */ } .sub-title{ max-width: var(--doc-max); /* Maximalbreite */ margin: 0 auto; /* Außenabstand */ text-align: left; /* Textausrichtung */ /* Schrift festlegen */ font-family: var(--sub-title-font); /* Schriftfamilie */ font-weight: var(--sub-title-weight); /* Schriftstärke */ font-size: var(--sub-title-size); /* Schriftgröße */ letter-spacing: var(--sub-title-track); /* Laufweite */ line-height: var(--sub-title-line); /* Zeilenhöhe */ -webkit-font-smoothing: antialiased; /* -webkit-font-smoothing */ text-rendering: optimizeLegibility; /* text-rendering */ } .doc{ background:#fff; color:#0b1d27; /* Hintergrund */ width:min(var(--container-max),92vw); /* Breite */ margin: 32px auto 80px; /* Außenabstand */ padding: 24px 16px 48px; /* Innenabstand */ line-height:1.6; /* Zeilenhöhe */ } .doc h2{ margin-top:1.6em; } .doc a{ color:#0f2b33; text-decoration: underline; } /* ---------- Slim-Section ---------- */ .slim{ padding: 4rem 0 3rem; background:#eef2f3; color:#0f262b; } /*.container{ width:min(var(--container-max), 92vw); margin-inline:auto; padding:0 var(--pad-x); }*/ .container{ width:min(var(--container-max), 92vw); margin-inline:auto; } .prose{ max-width: var(--doc-max); margin: 0 auto; } .lead{ margin:0; font-size:clamp(18px, 2.2vw, 21px); max-width:72ch; opacity:.9; } /* ---------- Footer ---------- */ .site-foot{ background:#f7f9fa; color:#0a1c20; padding:1.25rem 0 2.5rem; /* Hintergrund */ } .foot-grid{ display:grid; grid-template-columns:1fr auto auto; gap:.75rem 1rem; align-items:center; /* Anzeigeart */ } .site-foot a{ color:#0f2b33; text-decoration:none; border-bottom:1px dotted rgba(15,43,51,.35); /* Schriftfarbe */ } .site-foot a:hover{ border-bottom-style: solid; /* border-bottom-style */ } .nocookies{ opacity:.75; } .legal span{ opacity:.45; margin-inline:.35rem; } /*===================================================== = = = SubSites-General = = = =====================================================*/ /* HERO */ .subgen .subgen-hero{ position: relative; /* Positionierung */ min-height: var(--subgen-hero-height); /* Mindesthöhe */ padding: var(--subgen-hero-pad) var(--pad-x); /* Innenabstand */ background: radial-gradient(120% 120% at 25% 15%, rgba(0,215,255,.22) 0%, rgba(0,42,58,.6) 42%, rgba(9,10,20,.85) 100%), var(--subgen-bg-image) center/cover no-repeat; overflow: hidden; /* Überlauf */ color: #fff; /* Schriftfarbe */ } /* sanfter Overlay-Nebel */ .subgen .subgen-hero::after{ content:""; /* content */ position:absolute; inset:0; /* Positionierung */ background: radial-gradient(60% 60% at 75% 80%, rgba(255,0,153,.10), transparent 60%); /* Hintergrund */ pointer-events:none; /* Mausereignisse */ } /* Freies Positionierungs-Layout (Logo & Titel) */ .subgen .subgen-hero-inner{ position: relative; /* Positionierung */ min-height: inherit; /* Mindesthöhe */ } /* Logo */ .subgen .subgen-logo{ position: absolute; /* Positionierung */ width: var(--subgen-logo-size); /* Breite */ height: auto; /* Höhe */ left: var(--subgen-logo-left); /* Abstand links */ top: var(--subgen-logo-top); /* Abstand oben */ transform: translate(-50%, -50%); /* Transformation */ filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); /* Filter */ } /* Titel */ .subgen .subgen-title{ position: absolute; /* Positionierung */ left: var(--subgen-title-left); /* Abstand links */ top: var(--subgen-title-top); /* Abstand oben */ transform: translate(-50%, -50%); /* Transformation */ margin: 0; /* Außenabstand */ font-family: var(--subgen-title-font); /* Schriftfamilie */ font-weight: var(--subgen-title-weight); /* Schriftstärke */ font-size: var(--subgen-title-size); /* Schriftgröße */ letter-spacing: var(--subgen-title-letter); /* Laufweite */ line-height: var(--subgen-title-line); /* Zeilenhöhe */ color: var(--subgen-title-color); /* Schriftfarbe */ text-shadow: 0 1px 0 rgba(0,0,0,.25); /* Textschatten */ } /* Unterzeile (falls verwendet) */ .subgen .subgen-sub{ margin: .25em 0 0; /* Außenabstand */ font-family: var(--subgen-sub-font); /* Schriftfamilie */ font-weight: var(--subgen-sub-weight); /* Schriftstärke */ font-size: var(--subgen-sub-size); /* Schriftgröße */ color: var(--subgen-sub-color); /* Schriftfarbe */ } /* CONTENT-CARD */ .subgen .subgen-content{ display: grid; /* Anzeigeart */ place-items: center; /* Ausrichtung im Grid */ padding: clamp(28px, 6vh, 56px) var(--pad-x) clamp(36px, 10vh, 80px); /* Innenabstand */ } .subgen .subgen-card{ width: min(96vw, var(--subgen-content-max)); /* Breite */ padding: var(--subgen-content-pad); /* Innenabstand */ background: var(--subgen-card-bg); /* Hintergrund */ backdrop-filter: blur(var(--subgen-card-blur)) saturate(var(--subgen-card-saturate)); /* Glas-Effekt */ -webkit-backdrop-filter: blur(var(--subgen-card-blur)) saturate(var(--subgen-card-saturate)); /* Glas-Effekt (Safari) */ border-radius: var(--subgen-card-radius); /* Eckenradius */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25); border-top: 2px solid var(--subgen-card-topline); /* Oberkante/Rahmen */ border-bottom: 2px solid var(--subgen-card-bottomline); /* Unterkante/Rahmen */ } /* Typo in der Card justieren (kompatibel zu .prose) */ .subgen .subgen-card.prose h2{ margin-top: .2em; } .subgen .subgen-card.prose h3{ margin-top: 1.2em; } .subgen .subgen-card.prose p, .subgen .subgen-card.prose li{ color: rgba(255,255,255,.92); } /* FOOTER – nur wenn aktiv ist, optisch leicht anpassen */ .subgen .stage-foot{ background: var(--subgen-foot-bg); /* Hintergrund */ backdrop-filter: blur(var(--subgen-foot-blur)); /* backdrop-filter */ -webkit-backdrop-filter: blur(var(--subgen-foot-blur)); /* -webkit-backdrop-filter */ border-top: 1px solid var(--subgen-foot-topline); /* Oberkante/Rahmen */ } .subgen .stage-foot-inner{ padding: var(--subgen-foot-pad); /* Innenabstand */ } /* RESPONSIVE: unter 720px Logo/Titel mittig untereinander */ @media (max-width: 720px){ .subgen .subgen-hero-inner{ min-height: max(var(--subgen-hero-height), 46vh); /* Mindesthöhe */ } .subgen .subgen-logo{ left: 50%; top: 36%; /* Abstand links */ } .subgen .subgen-title{ left: 50%; top: 66%; /* Abstand links */ text-align: center; /* Textausrichtung */ } } /* Klickbares SubGen-Logo (Link zurück zur Startseite) */ .subgen .subgen-logo-link{ position: absolute; /* Positionierung */ left: var(--subgen-logo-left); /* Abstand links */ top: var(--subgen-logo-top); /* Abstand oben */ transform: translate(-50%, -50%); /* Transformation */ display: inline-block; /* Anzeigeart */ line-height: 0; /* Zeilenhöhe */ text-decoration: none; /* Textdekoration */ cursor: pointer; /* Mauszeiger */ } .subgen .subgen-logo-link:focus-visible{ outline: 2px solid rgba(0,230,255,.9); /* Fokus-Rand */ outline-offset: 3px; /* Abstand Fokus-Rand */ } /* Bildgröße bleibt über die Variable steuerbar */ .subgen .subgen-logo{ width: var(--subgen-logo-size); /* Breite */ height: auto; /* Höhe */ filter: drop-shadow(0 8px 24px rgba(0,0,0,.35)); /* Filter */ } /*===================================================== = = = Box gesplitted = = = =====================================================*/ /* Section-Wrapper */ .subgen .subgen-split{ width: min(96vw, var(--subgen-split-max)); /* Breite */ margin: 0 auto; /* Außenabstand */ padding: var(--subgen-split-pad) 0; /* Innenabstand */ display: grid; /* Anzeigeart */ gap: var(--subgen-split-gap); /* Abstand zwischen Elementen */ } /* Eine Split-Box */ .subgen .split{ display: grid; /* Anzeigeart */ grid-template-columns: var(--subgen-split-ratio); /* Grid-Spalten */ gap: var(--subgen-split-gap); /* Abstand zwischen Elementen */ align-items: stretch; /* beide Spalten gleiche Höhe */ min-height: var(--subgen-split-row-h, auto); /* optional erzwingen */ } /* Bildseite füllt die Höhe */ .subgen .split-media{ margin: 0; /* Außenabstand */ position: relative; /* Positionierung */ overflow: hidden; /* Überlauf */ -webkit-mask: var(--subgen-split-media-clip); /* -webkit-mask */ mask: var(--subgen-split-media-clip); /* mask */ border-radius: var(--subgen-split-media-radius); /* Eckenradius */ box-shadow: var(--subgen-split-media-shadow); /* Schatten */ height: 100%; /* volle Zeilenhöhe */ } /* Bild skaliert auf Container */ .subgen .split-media img{ position: absolute; /* cover über gesamten Container */ inset: 0; /* Kanten-Abstand */ width: 100%; /* Breite */ height: 100%; /* Höhe */ object-fit: var(--subgen-split-media-fit); /* Bild-Anpassung */ display: block; /* Anzeigeart */ } /* Textseite füllt die Höhe */ .subgen .split-body{ display: flex; /* vertikale Balance im Textblock */ flex-direction: column; /* flex-direction */ justify-content: center; /* Text mittig – optional */ height: 100%; /* Höhe */ background: var(--subgen-split-body-bg); /* Hintergrund */ backdrop-filter: blur(var(--subgen-split-body-blur)) saturate(var(--subgen-split-body-saturate)); /* Glas-Effekt */ -webkit-backdrop-filter: blur(var(--subgen-split-body-blur)) saturate(var(--subgen-split-body-saturate)); /* Glas-Effekt (Safari) */ border-radius: var(--subgen-split-body-radius); /* Eckenradius */ box-shadow: var(--subgen-split-body-shadow); /* Schatten */ padding: var(--subgen-split-body-pad); /* Innenabstand */ } .subgen .split-title{ margin: 0 0 .25em 0; /* Außenabstand */ font-family: var(--subgen-split-title-font); /* Schriftfamilie */ font-weight: var(--subgen-split-title-weight); /* Schriftstärke */ font-size: var(--subgen-split-title-size); /* Schriftgröße */ color: var(--subgen-split-title-color); /* Schriftfarbe */ letter-spacing: .5px; /* Laufweite */ line-height: 1.06; /* Zeilenhöhe */ } .subgen .split-text{ margin: 0 0 .6em 0; /* Außenabstand */ font-family: var(--subgen-split-text-font); /* Schriftfamilie */ font-size: var(--subgen-split-text-size); /* Schriftgröße */ line-height: var(--subgen-split-text-line); /* Zeilenhöhe */ color: var(--subgen-split-text-color); /* Schriftfarbe */ } /* Liste in der Split-Box */ .subgen .split-list{ list-style: var(--subgen-split-list-style) outside; /* list-style */ padding-left: var(--subgen-split-list-indent); /* padding-left */ margin: .25em 0 0 0; /* Außenabstand */ } .subgen .split-list li{ line-height: var(--subgen-split-li-line); /* Zeilenhöhe */ margin: 0 0 var(--subgen-split-li-gap) 0; /* Außenabstand */ } .subgen .split-list li::marker{ color: var(--subgen-split-marker-color); /* Schriftfarbe */ font-size: var(--subgen-split-marker-size); /* Schriftgröße */ } /* Variante: Spiegeln (Text links, Bild rechts) */ .subgen .split.is-reverse{ grid-template-columns: var(--subgen-split-ratio-reverse); /* Grid-Spalten */ } .subgen .split.is-reverse > .split-media{ order: 2; } .subgen .split.is-reverse > .split-body{ order: 1; } /* Responsive: stapeln unter Breakpoint */ @media (max-width: 900px){ .subgen .split, .subgen .split.is-reverse{ grid-template-columns: 1fr; /* Grid-Spalten */ } .subgen .split.is-reverse > .split-media{ order: 1; } .subgen .split.is-reverse > .split-body{ order: 2; } } /*===================================================== = = = SVG Overlay (AboutMe Lightbox) = = = =====================================================*/ .fishbone-svg, .myplanet-svg { display: block; width: auto; max-width: 100%; height: auto; margin: 1rem auto; cursor: zoom-in; /* zeigt Interaktivität an */ } .svg-overlay { display: none; /* wird per JS = flex */ position: fixed; inset: 0; background: rgba(21,38,47,1); z-index: 9999; justify-content: center; align-items: center; } .svg-overlay-content { position: relative; width: 95%; height: 95%; max-width: 100%; max-height: 100%; display: flex; justify-content: center; align-items: center; } .svg-overlay-close { position: absolute; top: -2rem; right: 0; font-size: 2rem; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; } .fishbone-svg-full { max-width: 100%; max-height: 100%; width: auto; /* hält Seitenverhältnis */ height: auto; /* hält Seitenverhältnis */ display: block; } /*===================================================== = = = Visual Card = = = =====================================================*/ /* gleiche Höhe für beide Kästchen */ .viz-card { aspect-ratio: 4 / 3; } /* z.B. 4:3; nimm 16/10, 1/1 etc. nach Geschmack */ /* Planet: nur die Bildgröße feinjustieren */ .viz-card.planet-card { aspect-ratio: 4 / 3; } /* gleich wie .viz-card */ .viz-card.planet-card img { max-width: 70%; } /* Feintuning: 70–90 % */ .viz-card.roadmap-card img { max-width: 86%; } .viz-card.planet-card img { max-width: 72%; } /*===================================================== = Aurora Cards – dezente Verlauf-Boxen = = nutzt dein Mission-Farbschema, umkehrbar per .rev = =====================================================*/ /*===================================================== = Aurora Cards – Verlauf für Textspalten (AboutMe) = =====================================================*/ /* Basis: gleicher Look wie Mission, unter Text gedämpft */ .split-body.card-aurora{ border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: linear-gradient(0deg, rgba(0,0,0,.14), rgba(0,0,0,.14)), radial-gradient(120% 80% at 50% 110%, rgba(0,0,0,.10), transparent 60%), /* Mission-Variante B – oben dunkler, unten heller */ linear-gradient(180deg, #0b3140 0%, #134d62 58%, #1d7090 100%) !important; color: #fff; padding: 1.25rem 1.5rem; /* Angleichen */ } /* Umkehrung für die nächste Box darunter */ .split-body.card-aurora.rev{ background: linear-gradient(0deg, rgba(0,0,0,.14), rgba(0,0,0,.14)), radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,.10), transparent 60%), linear-gradient(0deg, #0b3140 0%, #134d62 58%, #1d7090 100%) !important; } /* Links im Verlauf sicher weiß */ .split-body.card-aurora a{ color:#fff; text-decoration: underline; } /*===================================================== = = = Media = = = =====================================================*/ /* ===================================================== = Responsive (neu, clean) = ===================================================== */ /* L – bis 1200px (große Laptops/kleine Desktops) */ @media (max-width: 1200px){ :root{ --container-max: 1040px; /* --container-max */ /* Logo & Logo-Text leicht kleiner */ --logo-size-px: 170px; /* --logo-size-px */ --beyond-font-size: calc(var(--logo-size-px) * 0.36); /* --beyond-font-size */ /* Claim etwas kompakter */ --tagline-size: clamp(16px, 2vw, 22px); /* --tagline-size */ --tagline-maxvw: 56vw; /* --tagline-maxvw */ /* Feature-Boxen ein bisschen schmaler */ --box-width: 440px; /* --box-width */ --box-gap: 24px; /* --box-gap */ } } /* M – bis 900px (Tablets / kleine Laptops) */ @media (max-width: 900px){ :root{ --container-max: 900px; /* --container-max */ /* Bühne/Logo/Claim fein nachjustieren */ --logo-size-px: 150px; /* --logo-size-px */ --logo-left: 28%; /* --logo-left */ --logo-top: 24%; /* --logo-top */ --logo-text-left: 28.2%; /* --logo-text-left */ --logo-text-top: 24%; /* --logo-text-top */ --beyond-font-size: calc(var(--logo-size-px) * 0.38); /* --beyond-font-size */ --beyond-scaleX: 1.12; /* minimal breiter für Lesbarkeit */ --beyond-scaleY: 0.88; /* --beyond-scaley */ --tagline-left: 60%; /* --tagline-left */ --tagline-top: 33%; /* --tagline-top */ --tagline-size: clamp(16px, 2.4vw, 21px); /* --tagline-size */ --tagline-maxvw: 64vw; /* --tagline-maxvw */ /* Boxen bereiten wir auf „stapeln“ vor */ --features-left: 50%; /* --features-left */ --features-top: 64%; /* --features-top */ --features-scale: 1; /* --features-scale */ --box-width: 420px; /* --box-width */ --box-height: auto; /* automatische Höhe bei Umbau */ --box-gap: 20px; /* --box-gap */ --box-head-size: clamp(18px, 2.6vw, 24px); /* --box-head-size */ --box-body-size: clamp(14px, 1.9vw, 16px); /* --box-body-size */ } /* ab M: Boxen gestapelt (vertikal) */ .feature-boxes{ flex-direction: column; /* flex-direction */ align-items: stretch; /* align-items */ width: min(92vw, var(--container-max)); /* Breite */ } .feature-box{ width: 100%; /* volle Breite der Gruppe */ min-height: 140px; /* komfortable Mindesthöhe */ } .connector{ display: none; } /* keine Querlinie im Stack */ .stage-foot-inner{ width: min(92vw, var(--container-max)); /* width */ } } /* S – bis 600px (Phones) */ @media (max-width: 600px){ :root{ --container-max: 560px; /* --container-max */ /* Bühne enger: Logo + Text + Claim */ --logo-size-px: 128px; /* --logo-size-px */ --logo-left: 50%; /* Planet mittiger, wirkt ruhiger */ --logo-top: 22%; /* --logo-top */ --logo-text-left: 50%; /* --logo-text-left */ --logo-text-top: 22%; /* --logo-text-top */ --beyond-font-size: calc(var(--logo-size-px) * 0.40); /* --beyond-font-size */ --beyond-scaleX: 1.06; /* --beyond-scalex */ --beyond-scaleY: 0.90; /* --beyond-scaley */ --beyond-letter: 0.07em; /* --beyond-letter */ --line-gap: 0.06em; /* --line-gap */ --tagline-left: 50%; /* --tagline-left */ --tagline-top: 43%; /* --tagline-top */ --tagline-size: clamp(15px, 4vw, 18px); /* --tagline-size */ --tagline-maxvw: 86vw; /* --tagline-maxvw */ --tagline-maxch: 56ch; /* --tagline-maxch */ /* Boxen: volle Breite, gute Lesbarkeit */ --features-left: 50%; /* --features-left */ --features-top: 72%; /* --features-top */ --box-width: 100%; /* --box-width */ --box-gap: 14px; /* --box-gap */ --box-head-size: clamp(16px, 4.2vw, 20px); /* --box-head-size */ --box-body-size: clamp(14px, 3.8vw, 16px); /* --box-body-size */ /* Footer näher zum Rand */ --stage-foot-offset: 12px; /* --stage-foot-offset */ --stage-foot-pad: 8px 12px; /* --stage-foot-pad */ } .hero-inner{ padding: clamp(64px, 8vh, 100px) var(--pad-x) clamp(36px, 7vh, 72px); /* Innenabstand */ } .feature-boxes{ width: 92vw; /* harte Begrenzung auf Screenbreite */ } .feature-box{ min-height: 128px; /* Mindesthöhe */ } .box-head{ padding: 12px 14px 6px; } .box-body{ padding: 8px 14px 12px; } } @media (max-width: 520px){ :root{ --topics-max: 96vw; } .subgen .topics-figure{ padding: 12px; } } /* Kleine Screens – etwas kompakter */ @media (max-width: 560px){ :root{ --aboutme-padY: 7px; /* --aboutme-pady */ --aboutme-padX: 12px; /* --aboutme-padx */ --aboutme-size: 13px; /* --aboutme-size */ } } /*===================================================== = = = Media Query Skeleton = = (Platzhalter – aktuell ohne Stiländerungen) = = = =====================================================*/ /* ≥ 1200px — Desktop Wide */ @media (min-width: 1200px) { /* Variablen oder Layout-Regeln optional hier */ } /* 900–1199px — Laptop/Tablet Quer */ @media (max-width: 1199px) and (min-width: 900px) { /* Platzhalter */ } @media (max-width: 1024px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ≤ 899px — Tablet Hoch/Phones */ @media (max-width: 899px) { .aboutme-story .story-block { margin: 0 1rem 1.5rem; } .aboutme-mission .mission-block{ margin: 0 1rem 2rem; } } @media (max-width: 799px){ .aboutme-visual-grid .grid { grid-template-columns: 1fr; } } /* ≤ 599px — Small Phones */ @media (max-width: 599px) { .topic-grid { grid-template-columns: 1fr; } }