/* magazin.css – gemeinsames Stylesheet fuer das neue Layout (Artikel, Startseite, Rubrik, Autor, Textseiten). Cloudflare-cachebar, identisch ueber alle Domains. Domain-spezifische Akzentfarben werden inline im per :root-Override injiziert (siehe seiten/incl_header.php). Inter-Variable wird selbst gehostet (/webfonts/InterVariable.woff2). Fallt sich der Webfont nicht laed, greift der System-Stack -- die Seite bleibt sofort lesbar. Kein Bootstrap, kein jQuery, kein FontAwesome. */ /* ─── Inter Variable (selfhosted) ──────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/webfonts/InterVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/webfonts/InterVariable-Italic.woff2') format('woff2-variations'); } /* ─── Tokens ──────────────────────────────────────────────────────── */ :root { --bg: #fdfcfb; --bg-soft: #f5f1ec; --ink: #16151a; --ink-soft: #56535d; --ink-mute: #8b8794; --line: #e8e2d9; --accent: #b8442e; --accent-soft: #fbe9e3; --cta-color: #16151a; --cta-bg: #f5d34a; --cta-color-hv: #fdfcfb; --cta-bg-hv: #16151a; --max: 720px; --max-wide: 1180px; --r: 4px; } @media (prefers-color-scheme: dark) { :root { --bg: #0f0e10; --bg-soft: #1b1a1d; --ink: #f0ebe3; --ink-soft: #b6b1a7; --ink-mute: #75716a; --line: #292729; --accent: #ff7a5e; --accent-soft: #2c1410; } } /* ─── Reset / Basis ───────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-feature-settings: 'cv11', 'ss01'; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .15s; } a:hover { text-decoration-color: var(--accent); } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } /* ─── Header ──────────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2) blur(8px); background: color-mix(in srgb, var(--bg) 88%, transparent); } .site-header__inner { max-width: var(--max-wide); margin: 0 auto; padding: .9rem 1.5rem; display: flex; align-items: center; gap: 2rem; } .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); } .brand--logo img { height: 36px; width: auto; } .brand span { color: var(--accent); } .nav { display: flex; gap: 1.4rem; font-size: .9rem; font-weight: 500; margin-left: auto; align-items: center; } .nav a { text-decoration: none; color: var(--ink-soft); padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .15s, background-color .15s, border-color .15s; } .nav a:hover { color: var(--ink); } .nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); } /* CTA-Button rechts in der Nav -- gleiche Spezifitaet wie .nav a, damit hier nichts mit !important nachgeholfen werden muss. Farben kommen aus den Domain-Variablen (cssCta*). */ .nav a.nav__cta { background: var(--cta-bg); color: var(--cta-color); padding: .45rem 1.1rem; border: 1px solid var(--cta-bg); border-radius: 999px; font-weight: 600; } .nav a.nav__cta:hover { background: var(--cta-bg-hv); color: var(--cta-color-hv); border-color: var(--cta-bg-hv); } @media (max-width: 720px) { .nav { gap: .9rem; font-size: .82rem; } .nav a:not(.nav__cta) { display: none; } .nav__cta { margin-left: auto; } } /* ─── Tagstrip (Slogan-Zeile unter Header auf der Startseite) ───── */ .tagstrip { border-bottom: 1px solid var(--line); background: var(--bg); font-size: .82rem; color: var(--ink-mute); } .tagstrip__inner { max-width: var(--max-wide); margin: 0 auto; padding: .55rem 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; } .tagstrip strong { color: var(--ink); font-weight: 600; } /* ─── Reading-Progress-Bar oben ──────────────────────────────────── */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 100; transition: width .1s linear; } /* ============================================================ ARTIKEL ============================================================ */ .article { padding: 4rem 1.5rem 2rem; } .article__head { max-width: var(--max); margin: 0 auto 3rem; } .kicker { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-bottom: 1.4rem; } .kicker::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; background: var(--accent); vertical-align: middle; margin-right: .6rem; margin-bottom: .15rem; } h1.article__title { font-size: clamp(1.8rem, 4vw + .5rem, 3rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 1.2rem; } .article__lead { font-size: clamp(1.1rem, 1.4vw + .5rem, 1.32rem); line-height: 1.5; color: var(--ink-soft); margin: 0 0 2rem; font-weight: 400; } .byline { display: flex; align-items: center; gap: .85rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .92rem; } .byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .byline__meta { display: flex; flex-direction: column; line-height: 1.3; } .byline__name { font-weight: 600; } .byline__name a { text-decoration: none; } .byline__time { color: var(--ink-mute); font-size: .85rem; } .byline__time .dot { display: inline-block; padding: 0 .35rem; color: var(--line); } .cta-button { display: inline-block; margin-top: 1rem; padding: .8rem 1.5rem; background: var(--cta-bg); color: var(--cta-color); border-radius: var(--r); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background .15s, color .15s; } .cta-button:hover { background: var(--cta-bg-hv); color: var(--cta-color-hv); } .cta-button--disabled { background: var(--bg-soft); color: var(--ink-mute); cursor: not-allowed; } /* Hero-Bild */ .hero { max-width: var(--max-wide); margin: 0 auto 3rem; } .hero figure { margin: 0; } .hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r); } .hero figcaption { font-size: .82rem; color: var(--ink-mute); margin-top: .6rem; padding: 0 1.5rem; } /* Body-Layout: ToC + Text */ .article__layout { max-width: var(--max-wide); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .article__layout { grid-template-columns: 220px 1fr; gap: 5rem; } } .toc { font-size: .88rem; } @media (min-width: 1024px) { .toc { position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } } .toc__head { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .8rem; } .toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); } .toc li { margin: 0; } .toc a { display: block; padding: .35rem .9rem; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--ink-soft); line-height: 1.35; font-size: .85rem; transition: color .15s, border-color .15s; } .toc a:hover { color: var(--ink); } .toc a.is-active { color: var(--ink); border-left-color: var(--accent); font-weight: 500; } .article__body { max-width: var(--max); } .article__body h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 3rem 0 1rem; line-height: 1.25; scroll-margin-top: 5rem; } .article__body h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.01em; margin: 2rem 0 .8rem; scroll-margin-top: 5rem; } .article__body p { margin: 0 0 1.2rem; } .article__body p:first-of-type::first-letter { font-size: 3.4rem; float: left; line-height: .9; margin: .35rem .55rem -.1rem 0; font-weight: 700; color: var(--accent); } .article__body ul, .article__body ol { margin: 0 0 1.2rem 1.4rem; padding: 0; } .article__body li { margin-bottom: .35rem; } .article__body strong { font-weight: 600; } .article__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .article__body img { border-radius: var(--r); margin: 1.5rem 0; } .article__body figure { margin: 2rem 0; } .article__body figcaption { font-size: .82rem; color: var(--ink-mute); margin-top: .5rem; } /* Pull-Quote */ .pullquote { margin: 2.5rem 0; padding: 1.5rem 0 1.5rem 2rem; border-left: 3px solid var(--accent); font-size: 1.4rem; line-height: 1.35; font-weight: 500; color: var(--ink); letter-spacing: -0.015em; } /* FAQ-Akkordeon (eigene
-basierte Loesung, kein Bootstrap) */ .faq { max-width: var(--max); margin: 3rem auto 2rem; } .faq h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.2rem; } .faq__item { border-bottom: 1px solid var(--line); padding: 1rem 0; } .faq__item summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 1.02rem; padding-right: 2rem; position: relative; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.4rem; font-weight: 400; color: var(--ink-mute); transition: transform .15s; } .faq__item[open] summary::after { content: "−"; } .faq__item[open] summary { color: var(--accent); } .faq__answer { padding: .8rem 0 .2rem; color: var(--ink-soft); line-height: 1.6; } .faq__answer p:first-child { margin-top: 0; } .faq__answer p:last-child { margin-bottom: 0; } /* Author-Card am Artikelende */ .author-card { max-width: var(--max); margin: 4rem auto 0; padding: 2rem; background: var(--bg-soft); border-radius: var(--r); display: grid; grid-template-columns: 88px 1fr; gap: 1.5rem; align-items: start; } .author-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; } .author-card__role { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .4rem; } .author-card h3 { font-size: 1.15rem; margin: 0 0 .25rem; font-weight: 600; } .author-card h3 a { text-decoration: none; } .author-card__bio { font-size: .94rem; color: var(--ink-soft); margin: .4rem 0; line-height: 1.55; } .author-card__more { font-size: .88rem; color: var(--accent); text-decoration: none; font-weight: 500; } .author-card__more::after { content: " →"; } /* Related-Card-Grid (3 thematisch passende Beitraege) */ .related { max-width: var(--max-wide); margin: 6rem auto 4rem; padding: 0 1.5rem; } .related__head { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 1.5rem; } .related__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .related__grid { grid-template-columns: repeat(3, 1fr); } } /* Stretched-Link-Pattern: nur am Titel, ::after macht die ganze Card klickbar. Sauberer Anchor-Text fuer Crawler, ein Klickziel fuer Nutzer. */ .related__card { position: relative; display: block; } .related__card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); margin-bottom: 1rem; transition: transform .25s ease; } .related__card:hover img { transform: scale(1.02); } .related__card__kicker { font-size: .72rem; color: var(--accent); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; } .related__card__title { font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0; } .related__card__title a { color: var(--ink); text-decoration: none; } .related__card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .related__card:hover .related__card__title a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* ============================================================ STARTSEITE ============================================================ */ /* Hero-Block: Top-Story + 3 Side-Stories */ .hero-block { max-width: var(--max-wide); margin: 0 auto; padding: 3rem 1.5rem 2rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 900px) { .hero-block { grid-template-columns: 1.7fr 1fr; gap: 3rem; } } /* Solo-Variante: nur Top-Story, keine Side-Stories (Rubrik-Uebersicht) */ .hero-block--solo, .hero-block--solo .hero-story h2 { /* keine Selektor-Aenderung am h2; Block-Override unten */ } .hero-block--solo { padding-top: 1rem; } @media (min-width: 900px) { .hero-block--solo { grid-template-columns: 1fr; } } .hero-story { position: relative; } .hero-story img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r); margin-bottom: 1.4rem; } .hero-story .kicker { margin-bottom: .9rem; } .hero-story h2 { font-size: clamp(1.7rem, 2.6vw + .5rem, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 1rem; } .hero-story h2 a { color: var(--ink); text-decoration: none; } .hero-story h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .hero-story:hover h2 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .hero-story p { font-size: 1.08rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 1.2rem; max-width: 36rem; } .hero-story .meta { font-size: .85rem; color: var(--ink-mute); } .hero-story .meta a { text-decoration: none; color: var(--ink-soft); position: relative; z-index: 2; } .hero-story .meta a:hover { color: var(--accent); } .side-stories { display: flex; flex-direction: column; border-left: 1px solid var(--line); padding-left: 2rem; } @media (max-width: 899px) { .side-stories { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; } } .side-story { position: relative; padding: 1.3rem 0; border-bottom: 1px solid var(--line); } .side-story:first-child { padding-top: 0; } .side-story:last-child { border-bottom: 0; } .side-story .kicker { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; margin-bottom: .4rem; display: inline-block; position: relative; z-index: 2; } .side-story .kicker::before { display: none; } .side-story h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 .35rem; } .side-story h3 a { color: var(--ink); text-decoration: none; } .side-story h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .side-story:hover h3 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .side-story .meta { font-size: .78rem; color: var(--ink-mute); } /* Rubrik-Sektion auf der Startseite (1 Lead + 4 Listen-Eintraege) */ .rubrik-section { max-width: var(--max-wide); margin: 0 auto; padding: 3.5rem 1.5rem 1.5rem; border-top: 1px solid var(--line); } .rubrik-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .rubrik-section__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .rubrik-section__title a { color: var(--ink); text-decoration: none; } .rubrik-section__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .rubrik-section__more { font-size: .85rem; font-weight: 500; color: var(--accent); text-decoration: none; } .rubrik-section__more::after { content: " →"; } .rubrik-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 900px) { .rubrik-grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; } } .rubrik-lead { position: relative; } .rubrik-lead img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--r); margin-bottom: 1rem; } .rubrik-lead h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 .6rem; } .rubrik-lead h3 a { color: var(--ink); text-decoration: none; } .rubrik-lead h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rubrik-lead:hover h3 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .rubrik-lead p { font-size: .96rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 .7rem; } .rubrik-lead .meta { font-size: .8rem; color: var(--ink-mute); } .rubrik-list { list-style: none; padding: 0; margin: 0; } .rubrik-list li { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--line); } .rubrik-list li:first-child { padding-top: 0; } .rubrik-list li:last-child { border-bottom: 0; } .rubrik-list h4 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 .25rem; } .rubrik-list h4 a { color: var(--ink); text-decoration: none; } .rubrik-list h4 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rubrik-list li:hover h4 a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .rubrik-list .meta { font-size: .78rem; color: var(--ink-mute); } /* "Zuletzt erschienen"-Liste */ .latest { max-width: var(--max-wide); margin: 0 auto; padding: 4rem 1.5rem 2rem; border-top: 1px solid var(--line); } .latest__head { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 1.5rem; } .latest__list { list-style: none; padding: 0; margin: 0; } .latest__list li { position: relative; display: grid; grid-template-columns: 90px 1fr auto; gap: 1.2rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); } .latest__list li:last-child { border-bottom: 0; } @media (max-width: 600px) { .latest__list li { grid-template-columns: 1fr; gap: .35rem; } .latest__list .latest__date { order: -1; } } .latest__date { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--ink-mute); letter-spacing: .02em; } .latest__title { font-size: 1rem; font-weight: 500; line-height: 1.35; margin: 0; } .latest__title a { color: var(--ink); text-decoration: none; } .latest__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .latest__list li:hover .latest__title a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .latest__rubrik { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; position: relative; z-index: 2; } /* ============================================================ AUTOR-DETAILSEITE ============================================================ */ .autor-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 720px) { .autor-hero { grid-template-columns: 160px 1fr; gap: 2.5rem; } } .autor-hero__portrait { width: 100%; max-width: 160px; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; } .autor-hero__placeholder { width: 100%; max-width: 160px; aspect-ratio: 1/1; border-radius: 50%; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 700; color: var(--ink-mute); } .autor-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .92rem; color: var(--ink-soft); margin: 1rem 0 0; } .autor-hero__meta a { color: var(--ink-soft); text-decoration: none; } .autor-hero__meta a:hover { color: var(--accent); } /* Faktenblock auf der Autor-Seite (Expertise / Qualifikationen) */ .autor-facts { max-width: var(--max); margin: 2rem auto; padding: 1.5rem 2rem; background: var(--bg-soft); border-radius: var(--r); display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 720px) { .autor-facts { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .autor-facts h3 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .6rem; } .autor-facts p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); } /* ============================================================ PILLS (Unterrubriken auf der Rubrik-Uebersicht) ============================================================ */ .pill-row { display: flex; flex-wrap: wrap; gap: .6rem; max-width: var(--max-wide); margin: 0 auto; padding: 0 1.5rem; } .pill { display: inline-block; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink-soft); text-decoration: none; transition: border-color .15s, color .15s; } .pill:hover { border-color: var(--accent); color: var(--accent); } /* ============================================================ NEWSLETTER ============================================================ */ .newsletter { max-width: 100%; margin: 4rem 0 0; padding: 4rem 2rem; background: #74716a59; text-align: center; } .newsletter__kicker { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; } .newsletter h3 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 .8rem; } .newsletter p { color: var(--ink-soft); max-width: 36rem; margin: 0 auto 1.8rem; font-size: 1rem; } .newsletter form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 32rem; margin: 0 auto; } @media (min-width: 600px) { .newsletter form { grid-template-columns: 1fr 1fr auto; } } .newsletter input[type=text], .newsletter input[type=email] { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); font-size: 1rem; font-family: inherit; color: var(--ink); width: 100%; } .newsletter input[type=email] { grid-column: 1 / -1; } @media (min-width: 600px) { .newsletter input[type=email] { grid-column: auto; } } .newsletter input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .newsletter button { padding: .85rem 1.5rem; background: var(--cta-bg); color: var(--cta-color); border: 0; border-radius: var(--r); font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s, color .15s; grid-column: 1 / -1; } @media (min-width: 600px) { .newsletter button { grid-column: auto; } } .newsletter button:hover { background: var(--cta-bg-hv); color: var(--cta-color-hv); } .newsletter__small { font-size: .78rem; color: var(--ink-mute); margin-top: 1rem; padding-top: 10px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); margin-top: 4rem; padding: 4rem 1.5rem 2rem; } .site-footer__inner { max-width: var(--max-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; } } .site-footer__brand .brand { font-size: 1.25rem; display: inline-block; margin-bottom: .9rem; } .site-footer__tagline { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; max-width: 28rem; margin: 0 0 1rem; } .site-footer__social { display: flex; gap: .8rem; margin-top: .4rem; } .site-footer__social a { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; } .site-footer__social a:hover { color: var(--accent); border-color: var(--accent); } .site-footer__col h4 { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: .25rem 0 1rem; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col li { margin-bottom: .55rem; } .site-footer__col a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; } .site-footer__col a:hover { color: var(--accent); } .site-footer__legal { max-width: var(--max-wide); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; font-size: .82rem; color: var(--ink-mute); } .site-footer__legal a { color: var(--ink-mute); text-decoration: none; margin-left: 1.2rem; } .site-footer__legal a:hover { color: var(--ink); } /* ============================================================ BREADCRUMB (Artikel + Rubrik) ============================================================ */ .breadcrumb { max-width: var(--max); margin: 0 auto 1.5rem; font-size: .82rem; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .breadcrumb a { color: var(--ink-mute); text-decoration: none; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb__sep { color: var(--line); } /* ============================================================ UTILITY ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }