/* ========================================================================== tim-tation.com — Stylesheet Reines CSS, keine Abhängigkeiten, kein Build-Step. Aufbau 1 Token-Block (unverändert aus starter/tokens.css) 2 Ergänzende Tokens 3 Schriften (lokal, WOFF2) 4 Grundlagen 5 Raster und Sektionen 6 Kopfzeile, Navigation, mobiles Menü 7 Fußzeile 8 Bausteine: Buttons, Tags, Karten, Chips 9 Startseite 10 Bereichsseiten 11 Über mich 12 Kontakt und Formular 13 Rechtsseiten 14 CTA-Band 15 Mobil 16 Bewegung und Druck ========================================================================== */ /* ========================================================================== 1 TOKEN-BLOCK — unverändert aus starter/tokens.css ========================================================================== */ :root { /* --- Grundtöne --------------------------------------------------- */ --ink-deep: #0D0D0D; /* Footer-Fläche, tiefster Grund */ --bg: #121212; /* Seitengrund */ --surface: #171717; /* Karten, Formularrahmen */ --surface-2: #1F1F1F; /* Karte auf Karte, Eingabefeld gefüllt */ --surface-hi: #191919; /* hervorgehobene Bereichskarte */ /* --- Text (Kontrast auf --bg) ------------------------------------ */ --text: #EDEDED; /* 15.9:1 Überschriften, Buttons */ --text-2: #A8A8A8; /* 6.1:1 Fließtext */ --text-3: #8F8F8F; /* 4.6:1 Labels, Meta, Footer */ /* Nie dunkler als --text-3 für lesbaren Text. */ /* --- Kanten ------------------------------------------------------ */ --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --line-hairline: rgba(255,255,255,0.07); /* --- Bereichsfarben (oklch: L .70–.79 / C .095–.145) ------------- */ --violet: #8E8CF2; /* Systemarchitektur & Methodik 7.0:1 */ --cyan: #47CFD4; /* KI & Simulation 10.4:1 */ --amber: #E8A65C; /* Entwicklung & Betrieb 9.3:1 */ --rose: #EE85B5; /* Design & Markenidentität (4.) 7.6:1 */ /* --- Aktiver Akzent ---------------------------------------------- */ /* Neutrale Seiten (Start, Über mich, Kontakt): Weiß. Bereichsseiten setzen --accent im oder per Body-Klasse. */ --accent: #EDEDED; --accent-edge: rgba(255,255,255,0.55); --accent-wash: rgba(255,255,255,0.05); --accent-glow: rgba(255,255,255,0.10); /* --- Typografie -------------------------------------------------- */ --font: 'Outfit', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fs-display: clamp(42px, 6vw, 82px); /* H1 Startseite 500 / -0.035em / 1.0 */ --fs-h1-sub: clamp(34px, 4.4vw, 58px); /* H1 Bereichsseite */ --fs-h2: clamp(28px, 3.2vw, 44px); /* 500 / -0.025em / 1.1 */ --fs-h2-s: clamp(26px, 2.4vw, 34px); /* Sektionsüberschrift Unterseite */ --fs-h3: 25px; /* Kartentitel 500 / -0.015em / 1.2 */ --fs-lead: clamp(16.5px, 1.5vw, 25px);/* 300 / 1.45–1.6 */ --fs-body: 17.5px; /* 400 / 1.7 / max 68ch */ --fs-body-s: 15.5px; /* Karten */ --fs-small: 14px; --fs-mono: 11.5px; /* Eyebrow/Tag 500 / 0.14em / uppercase */ /* --- Abstände (Basis 4) ------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --pad-x: 24px; /* mobil */ --pad-x-lg: 120px; /* ab 1000px */ --content-max: 1200px; --measure: 68ch; /* --- Radien / Schatten ------------------------------------------- */ --r-tag: 6px; --r-card: 12px; --r-glass:16px; --r-pill: 999px; --shadow-glass: 0 24px 60px -30px rgba(0,0,0,0.6); /* --- Bewegung ---------------------------------------------------- */ --t: 160ms cubic-bezier(0.2, 0, 0.2, 1); /* nur Farbe & Deckkraft */ /* Das Rauschen aus starter/tokens.css ist ersatzlos entfallen. Es war bei 0.4 Deckkraft als weiße Sprenkel sichtbar und sah nach Bildrauschen aus. Ein Verlauf steht ebenfalls nicht mehr darin: Glas entsteht hier aus der milchigen Fläche, der Weichzeichnung und den Kanten. */ } /* Bereichsseiten: eine Zeile pro Seite, sonst ändert sich nichts. */ body.area-architektur { --accent: var(--violet); --accent-edge: rgba(142,140,242,0.5); --accent-wash: rgba(142,140,242,0.05); --accent-glow: rgba(142,140,242,0.20); } body.area-ki { --accent: var(--cyan); --accent-edge: rgba(71,207,212,0.65); --accent-wash: rgba(71,207,212,0.07); --accent-glow: rgba(71,207,212,0.20); } body.area-betrieb { --accent: var(--amber); --accent-edge: rgba(232,166,92,0.5); --accent-wash: rgba(232,166,92,0.05); --accent-glow: rgba(232,166,92,0.20); } body.area-design { --accent: var(--rose); --accent-edge: rgba(238,133,181,0.5); --accent-wash: rgba(238,133,181,0.05); --accent-glow: rgba(238,133,181,0.20); } /* --- Glas: genau zwei Orte (Kopfzeile, CTA-Band) ------------------- Der Glaseindruck entsteht aus drei Dingen: einer halbtransparenten Fläche, einem weichen Lichtverlauf darüber und harten Kanten. Oben eine helle Innenkante als Lichtkante, unten eine dunkle als Materialstärke. */ .glass { background-color: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.11); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.28); isolation: isolate; contain: paint; } /* Farbiges Licht liegt DAHINTER, nicht darin: */ .glass--lit { background-image: radial-gradient(60% 120% at 82% 50%, var(--accent-glow), transparent 70%); } /* Weichzeichnung nur dort, wo tatsächlich etwas dahinter durchläuft: die Kopfzeile liegt beim Scrollen über dem Inhalt. Hinter dem CTA-Band steht nur die ruhige Seitenfläche, dort würde Unschärfe Rechenzeit kosten und nichts zeigen (Teil C2). Die Leiste ist dunkel getönt statt hell. Milchig, aber der Inhalt darunter scheint nur gedämpft durch. */ .site-header.glass { background-color: rgba(16,16,16,0.88); } @supports (backdrop-filter: blur(1px)) { .site-header.glass { /* 8 px ist die Obergrenze aus Teil C2. Die Dämpfung kommt aus der dunklen Tönung, nicht aus mehr Unschärfe. */ backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); background-color: rgba(14,14,14,0.72); } } /* --- Bereichsraster: nimmt den vierten Bereich ohne Umbau auf ------ */ .area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); align-content: start; } /* --- Zustände ----------------------------------------------------- */ a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; transition: color var(--t); } a:hover { color: #ffffff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav__link[aria-current="page"] { color: var(--text); border-bottom: 1px solid var(--accent); padding-bottom: 5px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== 2 ERGÄNZENDE TOKENS Alles, was der Token-Block nicht benennt, aber mehrfach gebraucht wird. ========================================================================== */ :root { /* Akzent als Kanal-Trio, damit Bausteine eigene Deckkraft rechnen können. */ --accent-rgb: 237,237,237; /* Farbe des Zeichens. Neutrale Seiten tragen Violett, Bereichsseiten die Farbe ihres Bereichs. */ --mark: var(--violet); /* Fußzeilenfläche: README 7.2 und die Artboards S1/S2/S4 nennen #101010. --ink-deep (#0D0D0D) bleibt der tiefste Grund für alles darunter. */ --footer-bg: #101010; --panel: #141414; /* mobiles Menü, Anmerkungsflächen */ --text-quiet: #7C7C7C; /* dritte Claim-Zeile */ --text-cta: #CFCFCF; /* zweite Zeile im CTA-Band */ --text-chip: #D4D4D4; /* Chips, Listenzeilen */ --text-lead: #C4C4C4; /* Ein-Satz-Definition Bereichsseite */ --header-h: 72px; /* Sektionsluft: 88–112 px Desktop, 52–56 px mobil */ --sec-y: clamp(52px, 7vw, 88px); --sec-y-md: clamp(52px, 7.5vw, 100px); --sec-y-lg: clamp(56px, 8vw, 112px); } /* Vier Bereiche, vier Farben aus dem Token-Block. Gleiche Bauart wie dort, nur unter den Namen der Bereiche. */ body.area-entwicklung { --accent: var(--violet); --accent-edge: rgba(142,140,242,0.5); --accent-wash: rgba(142,140,242,0.05); --accent-glow: rgba(142,140,242,0.20); } body.area-hosting { --accent: var(--amber); --accent-edge: rgba(232,166,92,0.5); --accent-wash: rgba(232,166,92,0.05); --accent-glow: rgba(232,166,92,0.20); } /* Kanalwerte je Bereich, dazu die Farbe des Zeichens. */ body.area-entwicklung { --accent-rgb: 142,140,242; --mark: var(--accent); } body.area-ki { --accent-rgb: 71,207,212; --mark: var(--accent); } body.area-hosting { --accent-rgb: 232,166,92; --mark: var(--accent); } body.area-design { --accent-rgb: 238,133,181; --mark: var(--accent); } /* Lokale Einfärbung einzelner Bausteine (Karten, Verweise) ohne Seitenwechsel. */ .tint-entwicklung { --accent: var(--violet); --accent-rgb: 142,140,242; } .tint-ki { --accent: var(--cyan); --accent-rgb: 71,207,212; } .tint-hosting { --accent: var(--amber); --accent-rgb: 232,166,92; } .tint-design { --accent: var(--rose); --accent-rgb: 238,133,181; } /* ========================================================================== 3 SCHRIFTEN — lokal, WOFF2, font-display: swap, Latin ========================================================================== */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/outfit-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/outfit-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/outfit-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/outfit-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== 4 GRUNDLAGEN ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; /* kein waagerechtes Scrollen, auch bei 320 px */ } body.is-menu-open { overflow: hidden; } h1, h2, h3 { margin: 0; font-weight: 500; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* Mono-Signalschrift — nie für Fließtext. */ .mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); line-height: 1.6; } .mono--accent { color: var(--accent); } .mono--plain { text-transform: none; letter-spacing: 0; font-weight: 400; } /* Nur für Screenreader */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprungmarke zum Hauptinhalt — erstes fokussierbares Element */ .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--text); color: var(--bg); font-size: var(--fs-small); font-weight: 500; padding: 12px 20px; border-radius: var(--r-pill); text-decoration: none; } .skip-link:focus { top: var(--s-3); color: var(--bg); } /* ========================================================================== 5 RASTER UND SEKTIONEN Der Rand ist die Differenz zwischen Fenster und 1200-px-Inhalt: bei 1440 px ergibt das exakt die 120 px der Artboards, mobil 24 px. ========================================================================== */ .section { padding-inline: var(--pad-x); } .wrap { width: 100%; max-width: var(--content-max); margin-inline: auto; } .section--line { border-top: 1px solid var(--line-hairline); } .sec { padding-block: var(--sec-y); } .sec-md { padding-block: var(--sec-y-md); } .sec-lg { padding-block: var(--sec-y-lg); } /* Rasterkinder müssen schrumpfen dürfen. Ohne min-width: 0 nimmt eine 1fr-Spalte die Mindestgröße ihres Inhalts an — ein in ch bemessenes max-width oder ein langes Wort macht die Spalte dann breiter als das Fenster, und die Seite scrollt waagerecht. */ .hero__grid > *, .split > *, .duo > *, .contact > *, .area-grid > *, .stack { display: flex; flex-direction: column; } .stack-4 { gap: var(--s-4); } .stack-5 { gap: var(--s-5); } .stack-6 { gap: var(--s-6); } .lead-in { display: flex; flex-direction: column; gap: var(--s-5); } /* Sektionsüberschrift Startseite: 38 px / 500 / -0.025em */ .h2-md { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.025em; line-height: 1.15; color: var(--text); } /* Sektionsüberschrift Unterseiten: 34 px / 500 / -0.02em */ .h2-s { font-size: var(--fs-h2-s); letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } /* Kleine Sektionsüberschrift: 26 px */ .h2-sm { font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; line-height: 1.2; color: var(--text); } /* ========================================================================== 6 KOPFZEILE, NAVIGATION, MOBILES MENÜ Der Block ist auf jeder Seite identisch. Es unterscheiden sich nur aria-current am aktiven Punkt und das Ziel des Sprachumschalters. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--line); border-radius: 0; } /* Die Kante unter der Leiste bleibt auf allen Seiten neutral. */ /* Die Leiste liegt im selben Raster wie der Seiteninhalt: .section gibt den Rand, .wrap die Inhaltsbreite. Zeichen und Button stehen damit auf jeder Seite exakt über der ersten und letzten Spalte des Inhalts. */ .site-header__bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); } /* --- Zeichen ------------------------------------------------------ Das Zeichen liegt als Inline-SVG in der Seite, damit es die Farbe des Bereichs annehmen kann. Vor jeder color-mix-Zeile steht der violette Ausgangswert als Rückfall für Browser ohne color-mix. */ .mark { display: block; flex: none; } /* Die Deckkraft lässt den dunklen Grund durchscheinen. Genau das macht aus vier Flächen einen Glaskörper statt eines flachen Dreiecks. */ .mark .f1 { fill: #ded8fa; fill: color-mix(in srgb, var(--mark) 34%, #ffffff); fill-opacity: 0.85; } .mark .f2 { fill: #b3aae0; fill: color-mix(in srgb, var(--mark) 64%, #ffffff); fill-opacity: 0.78; } .mark .f3 { fill: #6f68a8; fill: color-mix(in srgb, var(--mark) 58%, #000000); fill-opacity: 0.80; } .mark .f4 { fill: #241d45; fill: color-mix(in srgb, var(--mark) 22%, #0a0a12); fill-opacity: 0.92; } .mark .e { fill: none; stroke: #ffffff; } .mark .e1 { stroke-opacity: 0.90; } .mark .e2 { stroke-opacity: 0.60; } .mark .e3 { stroke-opacity: 0.48; } /* Wortmarke */ .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--text); flex: none; } .brand span { font-size: 15px; font-weight: 500; letter-spacing: 0.11em; color: var(--text); white-space: nowrap; } .brand img { flex: none; } .brand:hover span { color: #ffffff; } /* Alles rechts vom Zeichen: Navigation, Trenner, Sprache, Button, Menüknopf */ .site-header__end { display: flex; align-items: center; gap: 30px; min-width: 0; } /* Navigation */ .nav { display: flex; align-items: center; gap: 30px; } .nav__link { font-size: 14.5px; color: var(--text-3); text-decoration: none; white-space: nowrap; } .nav__link:hover { color: #ffffff; } /* Der aktive Punkt wird eingefärbt statt unterstrichen. Überschreibt die Unterlinie aus dem Token-Block. */ .nav .nav__link[aria-current="page"] { color: var(--accent); border-bottom: 0; padding-bottom: 0; } .nav__sep { width: 1px; height: 18px; background: rgba(255,255,255,0.12); flex: none; } /* Sprachumschalter */ .lang { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; } .lang a { color: var(--text-3); text-decoration: none; } .lang a:hover { color: #ffffff; } .lang a[aria-current] { color: var(--accent); } .lang__sep { color: #3a3a3a; } /* Menüknopf mobil */ .menu-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-right: -10px; } .menu-toggle__bar { width: 20px; height: 1.5px; background: var(--text); transition: transform var(--t), opacity var(--t); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(3.25px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-3.25px) rotate(-45deg); } /* Aufklappbares Menü — Panel unter der Leiste */ .menu-panel { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; background: var(--panel); border-bottom: 1px solid var(--line); /* Nur die Höhe setzen. Die Kurzschreibweise padding würde den Seitenrand überschreiben, den .section beisteuert, und das Menü liefe randlos. */ padding-block: 12px 28px; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .menu-panel[hidden] { display: none; } .menu-panel__inner { display: flex; flex-direction: column; } .menu-panel__link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding: 18px 0; border-bottom: 1px solid var(--line-hairline); font-size: 18px; font-weight: 500; color: var(--text); text-decoration: none; } .menu-panel__link:last-of-type { border-bottom: 0; } .menu-panel__link:hover { color: #ffffff; } .menu-panel__dot { width: 7px; height: 7px; border-radius: var(--r-pill); flex: none; background: var(--accent); } .menu-panel .btn { margin-top: 14px; } /* ========================================================================== 7 FUSSZEILE ========================================================================== */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--line-hairline); padding-block: 56px 40px; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .site-footer__brand { display: flex; flex-direction: column; gap: 14px; } .site-footer__brand .brand span { font-size: 14px; } .site-footer__claim { font-size: 14.5px; line-height: 1.6; color: var(--text-3); max-width: 42ch; } .site-footer__col { display: flex; flex-direction: column; gap: 12px; } .site-footer__col .mono { font-size: 10.5px; } .site-footer__col ul { display: flex; flex-direction: column; gap: 12px; } .site-footer__col a { font-size: 14.5px; color: var(--text-2); text-decoration: none; line-height: 1.45; } .site-footer__col a:hover { color: #ffffff; } .site-footer__note { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--text-3); max-width: 44ch; } .site-footer__note a { color: var(--text-2); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); margin-top: 40px; padding-top: var(--s-5); border-top: 1px solid var(--line-hairline); } .site-footer__legal { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--text-3); } .site-footer__bottom .lang { font-size: 11.5px; } /* ========================================================================== 8 BAUSTEINE ========================================================================== */ /* --- Buttons ------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-body-s); font-weight: 500; line-height: 1.2; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; transition: background-color var(--t), border-color var(--t), color var(--t); } .btn--primary { background: var(--text); color: var(--bg); padding: 14px 26px; border: 1px solid var(--text); } .btn--primary:hover { background: #fbfbfb; border-color: #fbfbfb; color: var(--bg); } .btn--secondary { border: 1px solid rgba(255,255,255,0.2); color: var(--text); padding: 13px 25px; } .btn--secondary:hover { background: rgba(255,255,255,0.04); border-color: var(--line-strong); color: #ffffff; } .btn--sm { padding: 9px 17px; font-size: 14px; min-height: 0; } .btn--block { display: flex; width: 100%; } /* --- Tag ---------------------------------------------------------- */ .tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: 2px; } .tag { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.4; color: var(--text-2); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-tag); padding: 5px 9px; } /* --- Bereichskarte ------------------------------------------------- Jede Karte trägt den Lichthof ihrer eigenen Farbe. Keine Karte ist mehr hervorgehoben, die Bereiche stehen gleichwertig nebeneinander. */ .area-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 30px; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0) 45%), var(--surface-hi); border: 1px solid rgba(255,255,255,0.10); border-top: 1px solid rgba(var(--accent-rgb), 0.65); border-radius: 2px 2px var(--r-card) var(--r-card); box-shadow: 0 24px 60px -34px rgba(var(--accent-rgb), 0.35); color: inherit; text-decoration: none; transition: border-color var(--t), background-color var(--t), box-shadow var(--t); } .area-card:hover { border-color: var(--line-strong); border-top-color: rgb(var(--accent-rgb)); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0) 45%), var(--surface-hi); box-shadow: 0 24px 60px -30px rgba(var(--accent-rgb), 0.45); } .area-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .area-card__num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--accent); } .area-card h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; line-height: 1.2; color: var(--text); hyphens: auto; } .area-card p { font-size: var(--fs-body-s); line-height: 1.65; color: var(--text-2); } .area-card__more { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--accent); } .area-card__more span { font-family: var(--font-mono); } /* --- Standardkarte ------------------------------------------------ */ .card { display: flex; flex-direction: column; gap: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; transition: border-color var(--t); } .card:hover { border-color: var(--line-strong); } .card__num { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--text-3); } .card__title { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--text); } .card p { font-size: 15px; line-height: 1.6; color: var(--text-2); } /* ========================================================================== 9 STARTSEITE ========================================================================== */ /* --- Hero --------------------------------------------------------- */ .hero { padding-block: 104px 112px; background: radial-gradient(48% 60% at 84% 42%, rgba(142,140,242,0.14), rgba(142,140,242,0) 70%); } .hero__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; } .hero__text { display: flex; flex-direction: column; gap: 28px; } .hero__eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; line-height: 1.6; text-transform: uppercase; color: var(--text-3); } .hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: 1.0; color: var(--text); } .hero h1 .quiet { color: var(--text-quiet); } .hero__sub { font-size: 20px; font-weight: 300; line-height: 1.55; color: var(--text-2); max-width: 54ch; } .hero__actions { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; } .hero__visual { display: flex; align-items: center; justify-content: center; } .hero__visual img { width: 100%; max-width: 430px; } /* Bereiche auf der Startseite: 24 px Luft nach oben, volle Sektionsluft nach unten */ .home-areas { padding-block: clamp(0px, 2vw, 24px) var(--sec-y-lg); } .home-cta { padding-bottom: var(--sec-y-md); } /* --- Die Lücke ---------------------------------------------------- */ .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; } .split h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; line-height: 1.1; color: var(--text); } .split__body { display: flex; flex-direction: column; gap: 22px; } .split__body p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); max-width: 64ch; } /* --- Bereiche ------------------------------------------------------ Vier gleichwertige Karten ohne Cluster darüber. minmax(420px, 1fr) ergibt zwei Spalten auf dem Schreibtisch und eine auf dem Telefon. */ .home-areas .area-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; } /* --- Abschnitt mit einer Überschrift und einem Absatz --------------- */ .statement { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; } .statement h2 { font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.025em; line-height: 1.15; color: var(--text); } .statement p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); max-width: 72ch; } /* ========================================================================== 10 BEREICHSSEITEN ========================================================================== */ /* Die Unterseiten laufen ohne Trennlinien zwischen den Sektionen. */ .area-head { padding-block: 88px 80px; background: radial-gradient(46% 70% at 88% 30%, rgba(var(--accent-rgb), 0.13), rgba(var(--accent-rgb), 0) 70%); } .area-head__grid { display: flex; flex-direction: column; gap: 30px; } .area-head__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .area-head__meta .num { color: var(--accent); } .area-head__meta .rule { width: 56px; height: 1px; background: rgba(var(--accent-rgb), 0.5); flex: none; } .area-head__meta .cluster-name { color: var(--text-3); letter-spacing: 0.14em; } .area-head h1 { font-size: var(--fs-h1-sub); letter-spacing: -0.03em; line-height: 1.05; color: var(--text); } .area-head__lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.45; color: var(--text-lead); max-width: 58ch; } /* Zweispaltige Sektion: Überschrift links, Inhalt rechts */ .duo { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 56px; } /* Ausgangslagen — nummerierte Zeilen mit Trennern */ .reasons { display: flex; flex-direction: column; } .reasons li { display: flex; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line-hairline); } .reasons li:last-child { border-bottom: 0; } .reasons li:first-child { padding-top: 0; } .reasons__num { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--accent); padding-top: 5px; flex: none; } .reasons p { font-size: 19px; line-height: 1.5; color: #d4d4d4; max-width: 62ch; } /* Leistungen */ .services .card { gap: 10px; } .services .card__title { font-size: 17.5px; } /* ========================================================================== 11 ÜBER MICH ========================================================================== */ .about { padding-block: var(--sec-y-lg); display: flex; flex-direction: column; gap: 34px; } .about__person { display: flex; align-items: center; gap: 20px; } .about__portrait { width: 76px; height: 76px; border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line-strong); flex: none; display: flex; align-items: center; justify-content: center; /* Platzhalter, bis das Foto vorliegt */ background: repeating-linear-gradient(135deg, #1d1d1d 0 6px, #232323 6px 12px); } .about__portrait img { width: 100%; height: 100%; object-fit: cover; } .about__portrait span { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; line-height: 1.4; color: #9b9b9b; text-align: center; } .about__name { display: flex; flex-direction: column; gap: 5px; } .about__name strong { font-size: 16px; font-weight: 500; color: var(--text); } .about__name .mono { font-size: 11.5px; letter-spacing: 0.1em; } .about h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.08; color: var(--text); max-width: 22ch; } .about__text { display: flex; flex-direction: column; gap: 22px; max-width: 70ch; } .about__text p { font-size: 18px; line-height: 1.7; color: var(--text-2); } .about__quote { border-left: 1px solid rgba(255,255,255,0.16); padding: 4px 0 4px 26px; max-width: 60ch; margin: 0; } .about__quote p { font-size: 22px; font-weight: 400; line-height: 1.45; color: var(--text); } /* ========================================================================== 12 KONTAKT UND FORMULAR ========================================================================== */ /* .contact trägt zugleich .wrap, damit der Inhalt exakt im selben Raster steht wie Kopfzeile, Fußzeile und alle anderen Seiten. */ .contact { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; } .contact__intro { display: flex; flex-direction: column; gap: 26px; } .contact h1 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1.08; color: var(--text); } .contact__intro p { font-size: var(--fs-body); line-height: 1.7; color: var(--text-2); } .contact__direct { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--line); } .contact__row { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; } .contact__row dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); width: 66px; flex: none; } .contact__row dd { margin: 0; font-size: 16px; color: var(--text); } .contact__row dd.quiet { color: var(--text-2); } /* --- Formularkarte ------------------------------------------------ */ .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 20px; } .field { display: flex; flex-direction: column; gap: var(--s-2); } .field > label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } .field input, .field select, .field textarea { width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; padding: 14px 15px; font-family: var(--font); font-size: var(--fs-body-s); line-height: 1.6; color: var(--text); transition: border-color var(--t); } .field textarea { min-height: 116px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #6f6f6f; opacity: 1; } .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f6f6f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } .field select option { background: var(--surface); color: var(--text); } /* Fokus: 1 px Akzentkante plus 2-px-Ring mit 2 px Abstand */ .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); outline: 2px solid rgba(var(--accent-rgb), 0.25); outline-offset: 2px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); } /* Fehlerzustand */ .field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea { border-color: #E8A65C; } .field__error { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: #E8A65C; } .field__error:empty { display: none; } /* Einwilligung */ .consent { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: 2px; } .consent input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent); } .consent label { font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); } .consent a { color: var(--text); } /* Honeypot — visuell und für Screenreader nicht vorhanden */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-3); } /* Rückmeldung */ .form-status { display: none; } .form-status[data-state] { display: block; border-radius: var(--r-card); padding: 18px 20px; font-size: var(--fs-body-s); line-height: 1.6; } .form-status[data-state="ok"] { border: 1px solid rgba(71,207,212,0.4); background: rgba(71,207,212,0.06); color: var(--text); } .form-status[data-state="error"] { border: 1px solid rgba(232,166,92,0.4); background: rgba(232,166,92,0.06); color: var(--text); } /* ========================================================================== 13 RECHTSSEITEN ========================================================================== */ .legal { padding-block: var(--sec-y-lg); } .legal h1 { font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.1; color: var(--text); margin-bottom: var(--s-6); } .legal h2 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.3; color: var(--text); margin: var(--s-7) 0 var(--s-3); } .legal h3 { font-size: 17px; color: var(--text); margin: var(--s-5) 0 var(--s-2); } .legal p, .legal li { font-size: 16.5px; line-height: 1.75; color: var(--text-2); max-width: 76ch; } .legal p + p { margin-top: var(--s-3); } .legal ul { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } .legal ul li { padding-left: 18px; position: relative; } .legal ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 1px; background: var(--text-3); } .legal address { font-style: normal; font-size: 16.5px; line-height: 1.75; color: var(--text); } /* Kontaktzeile auf den Rechtsseiten */ .legal a { color: var(--text); } /* ========================================================================== 13b KONTAKT ALS AUFLIEGENDES FENSTER Das