/* Erzeugt aus src/ui/theme.ts — nicht von Hand ändern (scripts/blog/style.ts). */

@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/Lora-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/Lora-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('/fonts/Lora-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --paper: #fbfaf7;
  --desk: #e7e4dd;
  --ink: #262320;
  --ink-soft: rgba(38,35,32,.78);
  --ink-soft2: rgba(38,35,32,.70);
  --line: rgba(38,35,32,.2);
  --faint: rgba(38,35,32,.05);
  --gold: #ab7c00;
  --gold-deep: #7a5800;
  --gold-fill: #7a5800;
  --gold-line: rgba(171,124,0,.55);
  --dark: #6b3fc4;
  --dark-deep: #4a2a8c;
  --dark-line: rgba(107,63,196,.5);
  --colors: #16803c;
  --colors-deep: #0f5c2b;
  --colors-line: rgba(22,128,60,.5);
  --edge: rgba(38,35,32,.16);
  --error: #cc2222;
  --highlight: #b5257f;
  --key-own: #1f5fc0;
  --key-own-deep: #164a99;
  --outside: #6b3fc4;
  --veil: rgba(251,250,247,.86);
  --veil-solid: rgba(251,250,247,.96);
  --raised: #ffffff;
  --scrim: rgba(24,19,11,.45);
  --lift-shade: rgba(24,19,11,.2);
  --twin-wash: rgba(38,35,32,0.08);
  --drawer: rgba(38,35,32,0.08);
  --drawer-head: rgba(38,35,32,0.08);
  --frame: #262320;
}

:root {
  --serif: 'Lora', Georgia, serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --column: 34rem;
}

* { box-sizing: border-box; margin: 0; }
body { background: var(--desk); color: var(--ink); font-family: var(--serif);
       font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

.sheet { max-width: 52rem; margin: 0 auto; min-height: 100vh; background: var(--paper);
         box-shadow: 0 2px 30px rgba(32,31,29,.10); padding: 56px clamp(20px, 6vw, 72px) 72px; }

.masthead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 54px;
            padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.masthead a { font-family: var(--display); font-size: 21px; color: var(--ink); text-decoration: none; }
.masthead .eyebrow { font-family: var(--serif); font-size: 12px; letter-spacing: .34em;
                     text-transform: uppercase; color: var(--gold-deep); }

h1 { font-family: var(--display); font-weight: 600; font-size: clamp(31px, 5vw, 44px);
     line-height: 1.12; max-width: var(--column); }
h2 { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.2;
     margin: 42px 0 10px; max-width: var(--column); }
h3 { font-family: var(--display); font-weight: 600; font-size: 20px; margin: 30px 0 6px; }

p, ul, ol, blockquote { max-width: var(--column); margin-bottom: 18px; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 7px; }
strong { font-weight: 500; }
blockquote { border-left: 2px solid var(--gold); padding-left: 16px; color: var(--ink-soft); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; max-width: var(--column); }

a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
a:hover { border-bottom-color: var(--gold-deep); }

/* Der Kopf eines Artikels: Datum und Tags, leiser als der Titel und ohne
   eigene Überschrift — sie stehen unter ihm und brauchen keine Ankündigung. */
.meta { font-size: 13px; color: var(--ink-soft2); letter-spacing: .04em; margin: 14px 0 34px; }
.meta .tag { color: var(--ink-soft2); }

/* Die Liste. Ein Eintrag ist ein Block, kein Kärtchen — der Blog ist eine
   Zeitschrift und kein Regal. */
.entry { max-width: var(--column); margin-bottom: 34px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry h2 { margin-top: 0; }
.entry h2 a { border-bottom: 0; color: var(--ink); }
.entry h2 a:hover { color: var(--gold-deep); }
.entry p { margin-bottom: 8px; }

/* ── die Teilen- und Antwortzeile ────────────────────────────────────────── */
.share { max-width: var(--column); margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.share h2 { margin: 0 0 12px; font-size: 19px; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }

/* Die Links und der Knopf sehen gleich aus und sind gleich gross: was sie
   unterscheidet, ist wohin sie fuehren, nicht wie wichtig sie sind. 48 px
   wie ueberall sonst auf dieser Seite und auf der Landing Page. */
.share-row a, .share-native {
  display: inline-flex; align-items: center; font-family: var(--serif); font-size: 15px;
  padding: 11px 16px; min-height: 48px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; cursor: pointer; text-decoration: none;
}
.share-row a:hover, .share-native:hover { border-color: var(--gold); color: var(--gold-deep); }
.share-row a:focus-visible, .share-native:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Die Rueckmeldung des Kopier-Fallbacks. Das status-Attribut sagt sie dem
   Vorleser an; leer nimmt sie keinen Platz. */
.share-said { font-size: 13px; color: var(--ink-soft2); }

.share-reply { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 0; }
.share-reply a { color: var(--gold-deep); }

/* Der Teilen-Knopf steht hidden im HTML und wird erst vom Skript sichtbar,
   wenn das Geraet teilen ODER kopieren kann. Ohne diese Regel setzt die
   display-Angabe oben das hidden-Attribut ausser Kraft, und der Knopf
   staende auf jedem Desktop-Browser da, ohne etwas zu tun. */
[hidden] { display: none !important; }

/* ── die Anmeldebox ──────────────────────────────────────────────────────── */
.signup { max-width: var(--column); margin: 52px 0 0; padding: 24px 26px 20px;
          background: var(--desk); border: 1px solid var(--line); }
.signup h2 { margin: 0 0 12px; font-size: 21px; }
/* 48 px und nicht 44: das ist das Mass, das die CTA-Knoepfe der Landing Page
   schon tragen (public/landing/index.html). Der Blog ist ihr Nachbar und soll
   sich nicht um drei Pixel unterscheiden. Im Browser gemessen am 07.09.2026 —
   vorher 45 px, jetzt 48. KEINE Backticks in diesem Block: er steht in einem
   Template-Literal, und die erste Fassung dieses Kommentars hat den Build mit
   "tokenBlock(...).cta is not a function" umgeworfen. */
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input[type=email] { flex: 1 1 15rem; min-width: 0; font-family: var(--serif); font-size: 16px;
                            padding: 12px 13px; min-height: 48px; color: var(--ink);
                            background: var(--paper); border: 1px solid var(--line); border-radius: 0; }
.signup input[type=email]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.signup button { flex: 0 0 auto; font-family: var(--serif); font-size: 16px; letter-spacing: .01em;
                 padding: 12px 26px; min-height: 48px; cursor: pointer; color: var(--paper);
                 background: var(--gold-fill); border: 1px solid var(--gold-deep); border-radius: 0; }
.signup button:hover { background: var(--gold-deep); }
.consent { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.consent p { margin: 0; max-width: none; }

/* Die Honigfalle. Weder sichtbar noch erreichbar — ein Mensch kann sie nicht
   ausfüllen, ein Automat füllt jedes Feld aus, das er findet. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Ein Label, das nur der Screenreader liest. Der Platzhalter im Feld ist KEIN
   Label — er verschwindet beim Tippen und wird von manchen Vorlesern gar nicht
   angesagt. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip-path: inset(50%); white-space: nowrap; }

.foot { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line);
        font-size: 13px; color: var(--ink-soft2); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--ink-soft2); border-bottom: 1px dotted var(--line); }

@media (max-width: 640px) {
  .sheet { padding-top: 34px; }
  .masthead { margin-bottom: 38px; }
}