/* KoeMail – public Listmonk pages (opt-in, unsubscribe, preferences, messages, archive).
   One enamel reading plate on the indigo lacquer, after koemail.de's legal pages. Self-contained:
   no dependency on Listmonk's style.css or on the settings' custom CSS. */

@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(schrift/saira-condensed-latin-400.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: 'Saira Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(schrift/saira-condensed-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(schrift/saira-condensed-latin-600.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: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(schrift/saira-condensed-latin-ext-600.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(schrift/saira-condensed-latin-700.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: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(schrift/saira-condensed-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(schrift/sofia-sans-extra-condensed-latin-800.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: 'Sofia Sans Extra Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(schrift/sofia-sans-extra-condensed-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --lack: #1a2d74;
  --elfenbein: #e6dfd2;
  --elfenbein-hell: #f6f1e7;
  --tafel-schrift: #121a3d;
  --wort-tinte: #11205c;
  --tafel-link: #2a3497;
  --tafel-messing: #a37a3a;
  --messing: #c79a3e;
  --rot-schrift: #f6eee5;
  --lampe: #f2b23a;
  --display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --text: 'Saira Condensed', 'Arial Narrow', sans-serif;
  /* The page is one fixed palette (lacquer + ivory plate); it reads the same in light and dark mode. */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  min-height: 100%;
  background: linear-gradient(170deg, rgb(255 255 255 / .045), transparent 45%, rgb(0 0 20 / .12)), var(--lack) url(koemail-lack.webp) repeat;
  color: var(--elfenbein);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.1875rem;
  line-height: 1.5;
}
::selection { background: var(--lampe); color: var(--tafel-schrift); }
:focus-visible { outline: 3px solid var(--lampe); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; }

.schrank { max-width: 780px; margin-inline: auto; padding: clamp(20px, 4vw, 48px) 16px 32px; }
@media (min-width: 700px) { .schrank { padding-inline: 32px; } }

/* Wordmark: enamel sign as 9-slice, real text in word ink. */
.kopf { padding-bottom: clamp(20px, 3vw, 32px); }
.wortmarke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 24px 2px;
  border: solid transparent;
  border-width: 8px 31px;
  border-image: url(koemail-schild.webp) 12 46 fill / 8px 31px stretch;
  filter: drop-shadow(0 3px 2px rgb(3 5 13 / .8));
  color: var(--wort-tinte);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .03em;
  text-decoration: none;
}
.logo { display: inline-block; }
.logo img { display: block; max-height: 64px; width: auto; }

/* The reading plate: ivory enamel in a brass rim, four rivets. */
.tafel {
  position: relative;
  padding: clamp(32px, 5.5vw, 60px) clamp(22px, 6vw, 64px);
  border: 4px solid var(--tafel-messing);
  border-radius: 6px;
  background: linear-gradient(#f1eadf, #ebe3d6);
  box-shadow: 0 0 0 1px #1a1208, 0 4px 8px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(70 50 20 / .45), inset 0 2px 0 rgb(255 255 255 / .8);
  color: var(--tafel-schrift);
  color-scheme: light;
}
.tafel::before {
  --niete: radial-gradient(circle closest-side, #fff3cc 0 12%, #d4a24c 30%, #8a5a18 58%, #4a2e0a 80%, #1a0f04 92%, transparent 100%);
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    var(--niete) left top / 10px 10px no-repeat,
    var(--niete) right top / 10px 10px no-repeat,
    var(--niete) left bottom / 10px 10px no-repeat,
    var(--niete) right bottom / 10px 10px no-repeat;
}
/* Focus on ivory: the amber lamp ring needs a dark rim to stay visible. */
.tafel :focus-visible { outline: 3px solid var(--wort-tinte); outline-offset: 3px; box-shadow: 0 0 0 3px var(--lampe); }

.tafel h1 {
  margin: 0 0 .4em;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 8vw, 4rem);
  line-height: .95;
  letter-spacing: -.005em;
  color: var(--wort-tinte);
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.tafel h2 { margin: 0 0 .5em; font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--wort-tinte); text-wrap: balance; }
.tafel p { margin: 0 0 1em; max-width: 60ch; text-wrap: pretty; }
.tafel a { color: var(--tafel-link); text-decoration-color: var(--tafel-messing); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.tafel a:hover { text-decoration-color: currentColor; }
.tafel strong { font-weight: 700; }

/* A second block on the same plate (data and privacy) sits below a brass rule. */
.data-form {
  margin-top: 2em;
  padding-top: 1.75em;
  background: linear-gradient(90deg, var(--tafel-messing), rgb(163 122 58 / .2)) top / 100% 2px no-repeat;
}

/* Lists the subscriber is plugged into: brass jack collars as marks. */
.listen, .lists { margin: 0 0 1.25em; padding: 0; list-style: none; }
.listen li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-weight: 600;
}
.listen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(6px + .36em);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle, #0c0603 0 34%, #6e4c17 40%, #e2c27e 56%, #9a7638 72%, #4a320e 100%);
  box-shadow: 0 1px 1.5px rgb(0 0 0 / .6);
}

/* Choices: the whole row is the touch target. */
fieldset .lists { margin: 0; }
fieldset { margin: 0 0 .5em; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .4em; font-weight: 600; max-width: 60ch; }
.wahl { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 .5em; }
.wahl input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 11px 0 0;
  accent-color: var(--lack);
  cursor: pointer;
}
.wahl label { flex: 1; min-height: 44px; padding-block: 8px; cursor: pointer; }
.wahl label strong { display: block; }
.hilfe { display: block; font-size: 1.0625rem; line-height: 1.45; }
.wahl input:disabled + label { cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--tafel-messing); }

/* Text field: light enamel in a brass rim. */
.feld { display: grid; gap: 6px; max-width: 32rem; }
.feld label { font-weight: 600; }
.feld input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid #8c6a30;
  border-radius: 4px;
  background: #fbf8f2;
  box-shadow: inset 0 2px 3px rgb(80 60 30 / .2);
  color: var(--tafel-schrift);
  font: inherit;
  caret-color: #c0261a;
}
.feld input:disabled { background: #e2d9ca; cursor: not-allowed; }

/* Action plate: red enamel with the brass jack on the right. The one red on the page. */
.aktion { margin: 1.5em 0 1em; }
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 66px 0 26px;
  border: 1px solid #7c160f;
  border-radius: 3px;
  background: linear-gradient(#b4231a, #9e1c12);
  box-shadow: 0 3px 4px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 200 180 / .35), inset 0 -2px 0 rgb(80 10 5 / .35);
  color: var(--rot-schrift);
  font: inherit;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s cubic-bezier(.16, 1, .3, 1);
}
.button::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 28px;
  height: 28px;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, rgb(255 240 200 / .55) 0 6%, transparent 22%),
    radial-gradient(circle, #140904 0 29%, #5e4217 33%, #d3b06a 42%, #9a7638 55%, #e2c27e 68%, #7a5a26 84%, #3e2a0d 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / .5);
}
.button:hover { filter: brightness(1.08) saturate(1.05); }
.tafel .button { color: var(--rot-schrift); text-decoration: none; }
/* Secondary action: an ivory enamel sign, no red. */
.button.button-outline {
  justify-content: center;
  padding: 0 26px;
  border: 2px solid var(--tafel-messing);
  background: linear-gradient(#f6f1e7, #e9e0d2);
  box-shadow: 0 2px 2px rgb(3 5 13 / .35), inset 0 1px 0 #fff;
  color: #0b1338;
}
.button.button-outline::after { content: none; }
.button.button-outline:hover { filter: none; border-color: var(--wort-tinte); }

/* Archive: one row per issue, date right. */
.archive { margin: 0 0 1.5em; padding: 0; list-style: none; }
.archive li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 12px 0;
  border-bottom: 1px solid #cbbd9f;
}
.archive li a { display: inline-block; padding-block: 8px; font-weight: 600; overflow-wrap: anywhere; }
.archive .date { font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.verweis a { display: inline-flex; align-items: center; min-height: 44px; }
.right, .home-options { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 1em 0; }
.right a, .home-options a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.right svg { flex: none; }

.pagination { margin-top: 1.5em; }
.pagination ul, .pagination { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.pg-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 2px solid var(--tafel-messing);
  border-radius: 3px;
  background: #f6f1e7;
  font-weight: 600;
}
.tafel a.pg-page { text-decoration: none; }
.pg-page.pg-selected { background: var(--wort-tinte); border-color: var(--wort-tinte); color: var(--elfenbein-hell); }

/* Footer on the lacquer: ivory at 9:1 and up, brass underline. */
.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-top: 20px; font-size: 1.0625rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss p { margin: 0; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; color: var(--elfenbein-hell); text-decoration-color: var(--messing); text-underline-offset: .25em; }

@media (max-width: 559px) {
  .button { width: 100%; }
  .wortmarke { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}