/* ========================================================================== Thomas Gerl — Autorenwebsite Palette "Silk": tiefes Nachtblau, Kobalt, Flieder, Rosé. ========================================================================== */ /* Weiche Überblendung zwischen Seiten statt hartem Cut (verhindert den kurzen Blitzer aus Browser-Leerbildschirm/Silk-Hintergrund beim Navigieren). Der eigentliche Übergangs-"Vorhang" (#pt-curtain) wird komplett per Inline-Skript im und main.js erzeugt und gestylt — siehe dort. Html/Body selbst werden dabei nicht angefasst, damit der dauerhaft laufende Silk-Hintergrund auf der Startseite nicht bei jedem Opacity-Schritt neu compositen muss. */ /* -------------------------------------------------------------------------- Web Fonts (lokal statt Google Fonts CDN, DSGVO/Datenschutz) -------------------------------------------------------------------------- */ @font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/fira-sans-condensed-400.woff2") format("woff2"); } @font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/fira-sans-condensed-500.woff2") format("woff2"); } @font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fira-sans-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Fira Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fira-sans-condensed-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-variable.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); } :root { /* Farb-Tokens */ --color-bg: #0b1026; --color-bg-elevated: #161b3d; --color-bg-elevated-2: #1e234c; --color-fg: #ece9fb; --color-fg-muted: #9c9fc4; --color-accent: #3d46e8; --color-accent-text: #3d46e8; --color-stamp: #ffd6e7; --color-apricot: #fbceb1; --color-logo-orange: #ff6a00; --color-border: rgba(236, 234, 251, 0.14); --color-border-strong: rgba(236, 234, 251, 0.28); --color-scrim: rgba(8, 11, 28, 0.65); /* Typografie */ --font-display: "Fira Sans Condensed", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem); --step-3: clamp(2rem, 1.6rem + 2vw, 2.75rem); --step-4: clamp(2.6rem, 1.9rem + 3.5vw, 4.25rem); /* Layout */ --content-max: 72rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 8rem; --radius: 3px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* -------------------------------------------------------------------------- Reset & Grundlagen -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; overscroll-behavior-y: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } body.theme-bloodred { background: #260606; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--color-accent-text); } a:not([class]) { text-decoration-color: rgba(177, 140, 255, 0.4); text-underline-offset: 0.2em; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 var(--space-sm); letter-spacing: -0.01em; } h1 { font-size: var(--step-4); font-weight: 700; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); } p { margin: 0 0 var(--space-sm); max-width: 62ch; } .lede { font-size: var(--step-1); color: var(--color-fg-muted); max-width: 46ch; } .book-section .lede { color: var(--color-apricot); } .lede--quote { font-style: italic; font-size: calc(var(--step-1) - 2pt); } ul { padding-left: 1.2em; } :focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; top: -6rem; left: var(--space-sm); background: var(--color-accent); color: #fff; padding: 0.6em 1em; border-radius: var(--radius); z-index: 1000; transition: top 150ms var(--ease); } .skip-link:focus { top: var(--space-sm); } /* -------------------------------------------------------------------------- Layout-Hilfen -------------------------------------------------------------------------- */ .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-md); } .section { padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } .section--bordered { border-top: 1px solid var(--color-border); } .section-head { max-width: 40rem; margin-bottom: var(--space-lg); } .buecher-lead { padding-bottom: 0; } .buecher-lead h1, .heading--light { font-weight: 400; font-size: calc(var(--step-4) - 6px); margin-left: 2.5rem; } .buecher-cards { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .page-hero { position: relative; } .page-hero::before { content: ""; position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 0; } .page-hero::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim); z-index: 0; } .page-hero > .wrap { position: relative; z-index: 1; } .page-hero--kontakt::before, .page-hero--kontakt::after { -webkit-mask-image: radial-gradient(ellipse 92% 62% at 50% 48%, #000 48%, transparent 100%); mask-image: radial-gradient(ellipse 92% 62% at 50% 48%, #000 48%, transparent 100%); } .page-hero--kontakt::before { background-image: url("../img/kontakt-hintergrund.jpg"); background-position: center calc(50% + 38px); } .page-hero--kontakt .eyebrow { color: var(--color-logo-orange); } .page-hero--kontakt .eyebrow::before { background: var(--color-logo-orange); } .page-hero--kontakt h1 { white-space: nowrap; } .page-hero--kontakt .lede { color: var(--color-apricot); } .page-hero--kontakt { min-height: 588px; display: flex; align-items: center; } @media (max-width: 720px) { .page-hero--kontakt h1 { white-space: normal; } } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--space-sm); } .eyebrow::before { content: ""; width: 1.4em; height: 1px; background: var(--color-accent); } /* -------------------------------------------------------------------------- Kopfzeile / Navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 16, 38, 0.01); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Startseite: Header bleibt komplett transparent über dem animierten Hero */ body.snap-page .site-header { position: fixed; left: 0; right: 0; } .site-header__bar { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; } .site-header__start { display: flex; align-items: center; gap: var(--space-md); } .brand { display: inline-flex; text-decoration: none; } .brand__logo { height: clamp(4.4rem, 3.6rem + 3.6vw, 6.4rem); width: auto; } .site-header__social { display: flex; align-items: center; gap: var(--space-sm); } .site-header__social a { display: inline-flex; color: var(--color-apricot); transition: color 150ms var(--ease); } .site-header__social a:hover { color: var(--color-accent-text); } .site-header__social svg { width: 20px; height: 20px; } .nav-toggle { display: none; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius); color: var(--color-fg); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } .primary-nav { display: flex; align-items: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; } .primary-nav a { color: var(--color-apricot); text-decoration: none; font-size: var(--step--1); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; padding: 0.4em 0; border-bottom: 2px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease); } .primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--color-apricot); border-color: var(--color-logo-orange); } @media (max-width: 720px) { .nav-toggle { display: inline-flex; } .primary-nav { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 220ms var(--ease); } .primary-nav.is-open { max-height: 24rem; } .primary-nav li { width: 100%; } .primary-nav a { display: block; padding: var(--space-sm) var(--space-md); width: 100%; border-bottom: 1px solid var(--color-border); border-left: 2px solid transparent; } .primary-nav a:hover, .primary-nav a[aria-current="page"] { border-color: var(--color-border); border-left-color: var(--color-accent); } } /* -------------------------------------------------------------------------- Hero-Textbausteine (wiederverwendet in Buch-Sektionen & Detailseiten) -------------------------------------------------------------------------- */ .hero__quote { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--color-fg-muted); border-left: 2px solid var(--color-accent); padding-left: var(--space-sm); margin-bottom: var(--space-md); max-width: 34ch; } .book-detail__grid p:not(.hero__quote) + p.hero__quote { margin-top: var(--space-md); } /* -------------------------------------------------------------------------- Startseite: 3 Buch-Sektionen im Scroll-Snap -------------------------------------------------------------------------- */ body.snap-page { scroll-snap-type: y proximity; } @media (prefers-reduced-motion: reduce) { body.snap-page { scroll-snap-type: none; } } .site-silk-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; background: #260606; opacity: 0; transition: opacity 300ms ease; } .site-silk-bg.is-ready { opacity: 1; } @media (prefers-reduced-motion: reduce) { .site-silk-bg { transition: none; } } .book-section { position: relative; z-index: 1; min-height: 100dvh; display: flex; align-items: center; padding-block: calc(var(--space-2xl) + 3rem) var(--space-2xl); scroll-snap-align: start; scroll-snap-stop: always; } body.snap-page .site-footer { scroll-snap-align: end; } .book-section__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(50, 8, 6, 0.45); } .book-section .wrap { position: relative; z-index: 2; } .book-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: stretch; } .book-section--reverse .book-section__cover-wrap { order: 2; } .book-section__cover-wrap { position: relative; display: flex; } .book-section__cover { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); } .book-section__title-img { width: 100%; max-width: 30rem; height: auto; margin-bottom: var(--space-sm); } @media (max-width: 860px) { .book-section { padding-block: calc(var(--space-lg) + 3rem) var(--space-lg); } .book-section__grid { grid-template-columns: 1fr; gap: var(--space-md); } .book-section--reverse .book-section__cover-wrap { order: -1; } .book-section__cover-wrap { max-width: 15rem; height: auto; } .book-section__cover { width: 100%; height: auto; } } .section-counter { position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 90; margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--color-apricot); pointer-events: none; } .section-counter__current { color: var(--color-logo-orange); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-body); font-weight: 600; font-size: var(--step--1); text-decoration: none; padding: 0.85em 1.5em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform 150ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease); min-height: 44px; } .btn--primary { background: var(--color-accent); color: #fff; } .btn--primary:hover { background: #2c33b0; } /* "Mädchen in der Grube" — Akzentfarbe des Covers (Gelb) */ .book-section--yellow .hero__quote { border-left-color: #f0c300; } .book-section--yellow .btn--primary { background: #f0c300; color: #000; } .book-section--yellow .btn--primary:hover { background: #d9af00; } /* "Memorien" — Titelgrafik hat breite, transparente Ränder; Abstand kompensieren, damit der Text direkt am sichtbaren Schriftzug anschließt */ .book-section--red .book-section__title-img { margin-bottom: -4.6rem; } /* "Rachetreiben" — Akzentfarbe des Covers (Blutrot) */ .book-section--red .hero__quote { border-left-color: #b91c1c; } .book-section--red .btn--primary { background: #b91c1c; color: #000; } .book-section--red .btn--primary:hover { background: #991b1b; } /* "und mein bist du" — Akzentfarbe des Covers (Grün, vom Cover-Rand abgeleitet) */ .book-section--green .hero__quote { border-left-color: #28bc4e; } .book-section--green .btn--primary { background: var(--color-logo-orange); color: #000; } .book-section--green .btn--primary:hover { background: #e05e00; } .btn--ghost { background: transparent; border-color: var(--color-border-strong); color: var(--color-fg); } .btn--ghost:hover { border-color: var(--color-logo-orange); color: var(--color-logo-orange); } .btn:active { transform: translateY(1px); } /* -------------------------------------------------------------------------- Asservat-Karten (Bücher) -------------------------------------------------------------------------- */ .case-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); position: relative; } @media (max-width: 900px) { .case-board { grid-template-columns: 1fr; } } .case-card { position: relative; display: block; text-decoration: none; color: var(--color-fg); overflow: hidden; transition: opacity 400ms var(--ease); } .case-card__cover { display: block; width: 100%; height: auto; } .case-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-sm); padding: var(--space-md); background: rgba(8, 11, 28, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity 220ms var(--ease); } .case-card:hover .case-card__overlay, .case-card:focus-visible .case-card__overlay { opacity: 1; } .case-card__title { font-size: var(--step-1); color: #fff; margin-top: 2.4em; margin-bottom: 0; } .case-card .hero__quote { margin-bottom: 0; color: #e8dcc0; border-left: none; padding-left: 0; font-size: calc(var(--step-1) - 4px); } .case-card .btn--primary { align-self: flex-start; } /* Reveal-on-scroll: JS fügt .is-visible hinzu */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .case-card { transition: border-color 150ms var(--ease); } } /* -------------------------------------------------------------------------- Buch-Kategorien (Platzhalter-Cover) -------------------------------------------------------------------------- */ .book-category { margin-bottom: var(--space-xl); } .book-category:last-child { margin-bottom: 0; } .category-head { display: flex; margin-bottom: var(--space-lg); } .category-head__logo { height: 15.6rem; width: auto; } .category-head__logo--teenage { height: 4rem; } .book-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); } @media (min-width: 901px) { .book-board--teenage { grid-template-columns: repeat(6, 1fr); } .book-board--teenage .book-card:nth-child(1) { grid-column: 1 / 3; } .book-board--teenage .book-card:nth-child(2) { grid-column: 3 / 5; } .book-board--teenage .book-card:nth-child(3) { grid-column: 5 / 7; } .book-board--teenage .book-card:nth-child(4) { grid-column: 2 / 4; } .book-board--teenage .book-card:nth-child(5) { grid-column: 4 / 6; } } @media (max-width: 900px) { .book-board { grid-template-columns: 1fr; } } .book-card { display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: var(--color-fg); } .book-card__cover { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius); border: 1px dashed var(--color-border-strong); background: linear-gradient(160deg, var(--color-bg-elevated), var(--color-bg-elevated-2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); overflow: hidden; transition: border-color 220ms var(--ease), transform 220ms var(--ease); } .book-card:hover .book-card__cover, .book-card:focus-visible .book-card__cover { border-color: var(--book-accent, var(--color-border-strong)); border-style: solid; transform: translateY(-4px); } .book-card__cover--filled { aspect-ratio: 1410 / 2250; border: none; border-radius: 0; background: none; } .book-card:hover .book-card__cover--filled, .book-card:focus-visible .book-card__cover--filled { border: none; transform: translateY(-4px); } .book-card__cover--filled img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.45)); } .book-card__overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md); background: rgba(0, 0, 0, 0.72); opacity: 0; transition: opacity 220ms var(--ease); } .book-card:hover .book-card__overlay, .book-card:focus-visible .book-card__overlay { opacity: 1; } .book-card__overlay-title { font-size: var(--step-0); color: #fff; margin: 0 0 0.5em; text-align: left; } .book-card__overlay-teaser { font-size: var(--step--1); line-height: 1.5; color: #e2e0f2; margin: 0; text-align: left; } .book-card__icon { width: 2.2rem; height: 2.2rem; color: var(--book-accent, var(--color-fg-muted)); opacity: 0.8; } .book-card__flag { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-muted); } .book-card__title { font-size: var(--step-0); margin: 0; text-align: center; } .book-board--teenage { --book-accent: #e2e0f2; } .book-board--memorien { --book-accent: #e8a13d; } /* -------------------------------------------------------------------------- Buch-Detailseite -------------------------------------------------------------------------- */ .back-link { display: inline-flex; margin-bottom: var(--space-lg); } .book-detail__grid .eyebrow { color: var(--color-logo-orange); } .book-detail__grid .eyebrow::before { background: var(--color-logo-orange); } .book-detail__grid .btn--primary { background: var(--color-logo-orange); color: #000; } .book-detail__grid .btn--primary:hover { background: #e05e00; } .book-detail__grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-xl); } @media (max-width: 780px) { .book-detail__grid { grid-template-columns: 1fr; } } .book-detail__cover { aspect-ratio: 3 / 4; background: var(--color-bg-elevated-2); border: 1px dashed var(--color-border-strong); position: sticky; top: 13rem; } .book-detail__cover--portrait { aspect-ratio: 4 / 5; } .book-detail__cover--filled { aspect-ratio: auto; background: none; border: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); } .book-detail__meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .book-detail__meta-list dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-logo-orange); } .book-detail__meta-list dd { margin: 0.2em 0 0; color: var(--color-apricot); font-size: var(--step--1); } .book-detail__meta-list dd a { color: var(--color-apricot); } .book-detail__release-note { display: inline-block; margin: var(--space-md) 0; padding: 0.6em 1.1em; border: 1px solid var(--color-logo-orange); border-radius: var(--radius); color: var(--color-logo-orange); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; } /* -------------------------------------------------------------------------- Der Autor — Vorstellungstext, Porträt, Signatur -------------------------------------------------------------------------- */ body.page-autor .eyebrow { color: var(--color-apricot); } body.page-autor .eyebrow::before { background: var(--color-apricot); } .author-intro__heading { font-family: var(--font-display); font-weight: 400; font-size: calc((var(--step-3) - 4px) / 2); line-height: 1.3; max-width: 70ch; color: var(--color-logo-orange); text-align: center; margin-left: auto; margin-right: auto; margin-bottom: var(--space-lg); } .author-intro__text { display: flow-root; max-width: none; text-align: left; margin-bottom: var(--space-md); } .author-intro__text p { color: var(--color-apricot); font-size: var(--step-0); text-align: left; max-width: none; } .author-intro__portrait { float: left; width: 100%; max-width: 20rem; height: auto; object-fit: cover; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); margin: 0.4em var(--space-xl) var(--space-lg) 0; } @media (max-width: 700px) { .author-intro__portrait { float: none; max-width: 16rem; } } .author-intro__signature { display: block; width: 230px; height: auto; margin: 0; clear: both; opacity: 0.9; } /* -------------------------------------------------------------------------- Kontakt -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-xl); align-items: stretch; } @media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: none; border: none; padding: 0; } .contact-card h2 { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--step-4) - 6px - 8pt); } .social-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .social-list a { display: flex; align-items: center; gap: 0.7em; text-decoration: none; color: var(--color-fg); padding: 0.7em 0; transition: color 150ms var(--ease); } .social-list li:first-child a { padding-top: 0; } .social-list a:hover { color: var(--color-logo-orange); } .contact-card .btn--primary { background: var(--color-logo-orange); color: #000; } .contact-card .btn--primary:hover { background: #e05e00; } .social-list svg { width: 20px; height: 20px; flex-shrink: 0; } /* -------------------------------------------------------------------------- Bild-Platzhalter -------------------------------------------------------------------------- */ .placeholder-note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-fg-muted); text-align: center; padding: var(--space-sm); } /* -------------------------------------------------------------------------- Termine -------------------------------------------------------------------------- */ body.page-termine .eyebrow { color: var(--color-logo-orange); } body.page-termine .eyebrow::before { background: var(--color-logo-orange); } /* Abstand zur Überschrift halbiert: section--tight liefert 5rem darunter, diese Section normalerweise 8rem darüber (zusammen 13rem) — hier auf 6,5rem reduziert, indem nur der obere Teil verkleinert wird. */ .termine-events { padding-top: 1.5rem; } .termine-list { display: flex; flex-direction: column; } .termine-item { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-md); align-items: baseline; padding-block: var(--space-md); border-top: 1px solid var(--color-border); } .termine-item:last-child { border-bottom: 1px solid var(--color-border); } .termine-item__date { font-family: var(--font-mono); color: var(--color-logo-orange); } .termine-item__day { display: block; font-size: var(--step-1); letter-spacing: 0.02em; } .termine-item__time { display: block; margin-top: 0.2em; font-size: var(--step--1); color: var(--color-apricot); } .termine-item__body h2 { font-size: var(--step-1); margin-bottom: 0.2em; } .termine-item__location { color: var(--color-apricot); margin-bottom: 0.4em; } .termine-item__link { font-family: var(--font-mono); font-size: var(--step--1); text-decoration: none; color: var(--color-accent-text); border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease); } .termine-item__link:hover { border-color: var(--color-accent-text); } .termine-status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-fg-muted); } @media (max-width: 620px) { .termine-item { grid-template-columns: 1fr; gap: 0.3em; } } /* -------------------------------------------------------------------------- Legal-Seiten (Impressum / Datenschutz) -------------------------------------------------------------------------- */ .legal-content .eyebrow { color: var(--color-logo-orange); } .legal-content .eyebrow::before { background: var(--color-logo-orange); } .legal-content a { color: var(--color-logo-orange); } .legal-content h2 { font-size: var(--step-2); margin-top: var(--space-lg); } .legal-fill { color: var(--color-accent-text); background: rgba(61, 70, 232, 0.16); padding: 0.1em 0.4em; font-family: var(--font-mono); font-size: 0.85em; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { position: relative; z-index: 1; background: var(--color-bg); padding-block: var(--space-lg); color: var(--color-apricot); font-size: var(--step--1); } body.theme-bloodred .site-footer, body.snap-page .site-footer { background: #260606; } .site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); } .site-footer nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-md); flex-wrap: wrap; } .site-footer a { color: var(--color-apricot); text-decoration: none; } .site-footer a:hover { color: var(--color-logo-orange); }