@import url("fonts/fonts.css"); /* ============================================================ matthias möbius — Frontend Typografie C: Crimson Pro (Titel) + Fira Sans (Text) Hell / Dunkel / Auto über [data-theme] am ============================================================ */ :root { --paper: #F6F1E8; --paper-2: #EFE8DA; --ink: #241F18; --ink-soft: #574E42; --muted: #8C8273; --line: #DCD3C2; --clay: #B0532C; --clay-deep: #8A3E1E; --switch-bg: rgba(246, 241, 232, 0.82); --maxw: 720px; --serif: "Crimson Pro", Georgia, "Times New Roman", serif; --sans: "Fira Sans", system-ui, -apple-system, sans-serif; } html[data-theme="dark"] { --paper: #181410; --paper-2: #221C16; --ink: #EFE7D9; --ink-soft: #C7BDAB; --muted: #968B79; --line: #3A322A; --clay: #D5764C; --clay-deep: #E89068; --switch-bg: rgba(34, 28, 22, 0.82); } @media (prefers-color-scheme: dark) { html[data-theme="auto"], html:not([data-theme]) { --paper: #181410; --paper-2: #221C16; --ink: #EFE7D9; --ink-soft: #C7BDAB; --muted: #968B79; --line: #3A322A; --clay: #D5764C; --clay-deep: #E89068; --switch-bg: rgba(34, 28, 22, 0.82); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--sans); font-size: 18px; line-height: 1.72; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; } ::selection { background: rgba(176, 83, 44, 0.18); } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } /* ---------- Zweispaltiges Layout mit Seitenleiste ---------- */ .layout { max-width: 1060px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 76px; align-items: start; } .layout .main { min-width: 0; } .aside { position: sticky; top: 40px; align-self: start; } .aside-head { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); } .aside-list { list-style: none; margin: 0; padding: 0; } .aside-item { padding: 20px 0; border-bottom: 1px solid var(--line); } .aside-date { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .aside-title { display: block; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.18; color: var(--ink); text-decoration: none; border: 0; } a.aside-title:hover { color: var(--clay); } .aside-excerpt { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aside-foot { margin-top: 18px; } .aside-foot a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); text-decoration: none; border: 0; } /* ---------- Themen-Wolke (Seitenspalte) ---------- */ .tagcloud { margin-top: 42px; } .tagcloud-tags { margin-top: 14px; line-height: 2; } .tagcloud-tag { font-family: var(--sans); color: var(--muted); text-decoration: none; border: 0; margin-right: 6px; white-space: nowrap; transition: color .2s; } .tagcloud-tag:hover { color: var(--clay); } .tagcloud-tag.is-on { color: var(--clay); font-weight: 500; } .tagcloud-tag.s1 { font-size: 12px; } .tagcloud-tag.s2 { font-size: 14px; } .tagcloud-tag.s3 { font-size: 16px; } .tagcloud-tag.s4 { font-size: 19px; color: var(--ink-soft); } .tagcloud-tag.s5 { font-size: 23px; color: var(--ink); } .tagcloud-tag.s4:hover, .tagcloud-tag.s5:hover { color: var(--clay); } /* ---------- Kopf / Wortmarke ---------- */ .site-head { padding: 64px 0 40px; text-align: center; } .wordmark { font-family: var(--serif); font-weight: 500; font-size: 33px; letter-spacing: 0; color: var(--ink); text-decoration: none; display: inline-block; } .wordmark span { font-style: italic; } .site-nav { margin-top: 22px; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; align-items: center; } .nav-item { position: relative; display: inline-flex; } .site-nav .nav-top { font-family: var(--sans); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .site-nav .nav-top:hover { color: var(--ink); } .site-nav .nav-top.is-active { color: var(--clay); border-color: var(--clay); } /* Dropdown-Untermenü */ .nav-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 210px; padding: 12px 0; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; z-index: 60; } .nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; } .nav-sub a { display: block; padding: 7px 24px; white-space: nowrap; font-family: var(--sans); font-size: 14px; letter-spacing: 0.01em; color: var(--ink-soft); text-decoration: none; border: 0; transition: color .2s; } .nav-sub a:hover, .nav-sub a.is-active { color: var(--clay); } /* ---------- Typografie ---------- */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.12; letter-spacing: 0; } .page-title { font-size: clamp(38px, 6.5vw, 60px); line-height: 1.08; font-weight: 500; letter-spacing: -0.01em; margin: 8px 0 20px; } .page-kicker { font-family: var(--sans); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); margin: 0; } h2 { font-size: 32px; margin: 2.4em 0 0.5em; } h3 { font-size: 24px; margin: 2em 0 0.4em; } h4 { font-size: 20px; margin: 1.8em 0 0.4em; } p { margin: 0 0 1.25em; } a { color: var(--clay); text-decoration: none; border-bottom: 1px solid rgba(176,83,44,.32); transition: color .2s, border-color .2s; } a:hover { color: var(--clay-deep); border-color: var(--clay-deep); } em, i { font-style: italic; } strong, b { font-weight: 600; } .lead { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 26px; line-height: 1.46; color: var(--ink); margin: 0 0 1.4em; } .dropcap::first-letter { font-family: var(--serif); font-weight: 600; float: left; font-size: 76px; line-height: 0.78; padding: 6px 12px 0 0; color: var(--clay); } blockquote { margin: 1.8em 0; padding-left: 24px; border-left: 2px solid var(--clay); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--ink); } /* ---------- Bilder / Figuren ---------- */ figure { margin: 2.4em 0; } .post-body img { max-width: 100%; height: auto; display: block; margin: 1.6em auto; } .default.text img { max-width: 100%; height: auto; display: block; margin: 1.6em auto; } figcaption { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 8px; line-height: 1.4; text-align: center; } /* ---------- Blog-Liste ---------- */ .section-head { text-align: center; margin: 0 0 8px; } .section-head h2 { margin: 0; font-size: 40px; font-weight: 500; } .section-head .page-kicker { margin-bottom: 10px; } .post-list { list-style: none; margin: 0; padding: 0; } .post-item { display: grid; grid-template-columns: 150px 1fr; gap: 36px; padding: 42px 0; border-top: 1px solid var(--line); align-items: start; } .post-item:last-child { border-bottom: 1px solid var(--line); } .post-date { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding-top: 8px; } .post-title { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.12; color: var(--ink); margin: 0 0 .35em; display: inline-block; text-decoration: none; border: 0; } a.post-title:hover { color: var(--clay); } .post-excerpt { margin: 0; color: var(--ink-soft); } .post-more { display: inline-block; margin-top: 14px; font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); text-decoration: none; border: 0; } /* ---------- Listenelement: Bild + Text ---------- */ .post-body-row { display: flex; gap: 30px; align-items: flex-start; } .post-body-row.has-thumb { flex-direction: row-reverse; } .post-main { flex: 1 1 auto; min-width: 0; } .post-thumb { flex: 0 0 200px; display: block; border: 0; } .post-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--line); } /* Variante: Bild über dem Text */ .post-list--imgtop .post-body-row.has-thumb { flex-direction: column; gap: 16px; } .post-list--imgtop .post-thumb { flex: 0 0 auto; width: 100%; } .post-list--imgtop .post-thumb img { aspect-ratio: 16 / 9; } /* ---------- Seitenanzeige (Seite x von y) ---------- */ .page-indicator { text-align: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; } /* ---------- Pagination ---------- */ .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 54px 0 0; } .pagination a, .pagination span { font-family: var(--sans); font-size: 13px; letter-spacing: 0.03em; min-width: 40px; text-align: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); text-decoration: none; transition: color .2s, border-color .2s, background .2s; } .pagination a:hover { color: var(--clay); border-color: var(--clay); } .pagination .is-current { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pagination .pg-arrow { color: var(--ink); } /* ---------- Themen (Tags, verlinkt) ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; } .post-header .tags { justify-content: center; margin: 4px 0 0; } .tag { font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; line-height: 1.9; transition: color .2s, border-color .2s, background .2s; } .tag:hover { color: var(--clay); border-color: var(--clay); } .tag.is-on { color: var(--paper); background: var(--clay); border-color: var(--clay); } .section-back { margin: 14px 0 0; } .section-back a { font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 0; } .section-back a:hover { color: var(--clay); } /* ---------- Einzelbeitrag ---------- */ .post-back { display: inline-block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 0; margin: 0 0 22px; cursor: pointer; } .post-back:hover { color: var(--clay); } .post-header { text-align: center; padding: 8px 0 28px; } .post-header .post-title-big { font-size: clamp(38px, 6vw, 56px); color: var(--ink); margin: 6px 0 18px; line-height: 1.08; font-weight: 500; } .post-meta { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .post-hero { margin: 28px 0 40px; } .post-body { font-size: 19px; } .post-nav { display: flex; justify-content: space-between; gap: 20px; margin: 56px 0 0; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .post-nav a { color: var(--clay); text-decoration: none; border: 0; } .post-nav span { display:block; color: var(--muted); font-size: 11px; letter-spacing:.18em; margin-bottom:4px; } /* VG-Wort-Zählpixel (unsichtbar, muss aber geladen werden) */ .vgwort { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Fuß ---------- */ .site-foot { margin-top: 96px; padding: 48px 0 64px; background: var(--paper-2); border-top: 1px solid var(--line); text-align: center; } .foot-nav { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; } .foot-nav a { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-decoration: none; border: 0; } .foot-nav a:hover { color: var(--clay); } .foot-mark { font-family: var(--sans); font-style: italic; font-size: 18px; color: var(--ink); } .foot-fine { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 10px; } /* ---------- Ansicht-Umschalter (Hell/Dunkel/Auto) ---------- */ .controls { position: absolute; top: 18px; right: 22px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .switch { display: flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--switch-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 5px 7px; } .switch .sw-label { color: var(--muted); padding: 0 6px 0 4px; } .switch button { border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: 0.12em; color: var(--muted); padding: 4px 11px; border-radius: 999px; transition: background .2s, color .2s; } .switch button:hover { color: var(--ink); } .switch button.is-on { background: var(--ink); color: var(--paper); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 0; max-width: var(--maxw); } .aside { position: static; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--ink); } .aside-head { border-bottom: 0; padding-bottom: 0; } } @media (max-width: 620px) { .post-item { grid-template-columns: 1fr; gap: 8px; } .post-date { padding-top: 0; } .site-head { padding: 44px 0 30px; } .post-body-row, .post-body-row.has-thumb { flex-direction: column; gap: 14px; } .post-thumb { flex-basis: auto; width: 100%; } }