/* Longevity Horizons: public pages of listmonk-lh (sign up, confirm, unsubscribe).
   Stored in the settings key appearance.public.custom_css, served at /public/custom.css.
   Source of all values: _doku/DESIGN.md (v3), sections 2 and 9.
   Light surfaces only; green #25342c for type, lines and the button.
   Fonts are served by this instance (/public/static/fonts/, OFL), no Google Fonts. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/static/fonts/sourceserif4-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/public/static/fonts/playfairdisplay-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/public/static/fonts/opensans-var-latin.woff2") format("woff2"); }

:root {
  color-scheme: light only;
  --papier: #f5f1ec; --papier-hell: #fbf9f6; --rose: #f4e8dc;
  --gruen: #25342c; --gruen-2: #2f4137; --tinte: #262826; --tinte-2: #5b5a53;
  --oliv: #747e3f; --oliv-text: #5e6632; --linie: #d8d0c3;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --titel: "Playfair Display", Georgia, "Times New Roman", serif;
  --ui: "Open Sans", Arial, Helvetica, sans-serif;
}

html, body { background: var(--papier); }
body {
  font-family: var(--text); font-size: 18px; line-height: 1.6; color: var(--tinte);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gruen); text-decoration: underline; text-decoration-color: var(--oliv); text-underline-offset: 3px; }
a:hover { color: var(--gruen-2); text-decoration-color: var(--gruen); }

/* one sheet, no card: the page itself is the paper */
.container { max-width: 620px; margin: 0 auto; padding: 0 24px; }
.wrap { background: transparent; border: 0; box-shadow: none; padding-top: 32px; padding-bottom: 8px; }

/* running head as on every page of the journal */
.header { border: 0; margin: 0 0 40px; padding: 0; }
.kolumnentitel {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--ui); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oliv-text); padding-bottom: 11px; border-bottom: 1px solid var(--oliv); margin-bottom: 28px;
}
.header .logo img { width: 220px; max-width: 70%; height: auto; display: block; }

h1, h2 { font-family: var(--titel); font-weight: 500; color: var(--gruen); letter-spacing: 0; }
h1 { font-size: clamp(32px, 6vw, 44px); line-height: 1.08; margin: 6px 0 16px; }
h2 { font-size: clamp(26px, 5vw, 34px); line-height: 1.12; margin: 0 0 16px; }
h3 { font-family: var(--ui); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--tinte-2); margin: 0 0 8px; }
.rubrik { font-family: var(--ui); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oliv-text); margin: 0; }
.einleitung { font-size: 20px; line-height: 1.5; margin: 0 0 32px; }

/* fields */
label { font-family: var(--ui); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--tinte); }
.form p { margin: 0 0 20px; }
input[type="text"], input[type="email"], input[type="password"], select {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font-family: var(--ui); font-size: 16px; color: var(--tinte);
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; box-shadow: none;
}
input:focus, select:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gruen); width: 18px; height: 18px; vertical-align: -3px; margin: 0 8px 0 0; }

/* required Fachkreis confirmation: checkbox and text side by side */
.pflicht { display: grid; grid-template-columns: 26px 1fr; align-items: start; padding: 18px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.pflicht input { margin-top: 3px; }
.pflicht label { font-family: var(--text); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0; }

.einwilligung, .hinweis { font-size: 15px; line-height: 1.55; color: var(--tinte-2); }
.form .captcha { margin: 4px 0 20px; }
altcha-widget {
  --altcha-border-width: 1px; --altcha-border-radius: 2px; --altcha-color-base: #fbf9f6;
  --altcha-color-border: #d8d0c3; --altcha-color-text: #262826; --altcha-color-border-focus: #25342c;
  --altcha-color-error-text: #8a2b1f; --altcha-max-width: 100%;
  font-family: var(--ui); font-size: 14px;
}

/* button: email-knopf/button-primary */
.button, button.button, input[type="submit"].button {
  display: inline-block; min-width: 0; padding: 15px 34px; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-decoration: none;
  background: var(--gruen); color: var(--papier); border: 1px solid var(--gruen); border-radius: 2px;
}
.button:hover, button.button:hover { background: var(--gruen-2); border-color: var(--gruen-2); color: var(--papier); }
.button.button-outline { background: transparent; color: var(--gruen); border: 1px solid var(--gruen); }
.button.button-outline:hover { background: var(--gruen); color: var(--papier); }

/* unsubscribe / manage page */
.lists { list-style: none; padding: 0; margin: 0 0 20px; }
.lists li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.unsub-all { border-top: 1px solid var(--linie); }
.data-form { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--oliv); }
.data-form .row { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
.section { margin-bottom: 24px; }
.optin-form ul { padding-left: 20px; }

/* light foot, no colour band */
footer.container.lh-fuss {
  margin: 48px auto 40px; padding: 22px 0 0; text-align: left; max-width: 572px; border-top: 1px solid var(--oliv);
  font-family: var(--ui); font-size: 12px; line-height: 1.6; color: var(--tinte-2);
}
footer.lh-fuss .rubrik { margin-bottom: 8px; }
footer.lh-fuss p { margin: 0 0 4px; }
footer.lh-fuss a { color: var(--tinte-2); text-decoration: underline; }
footer.lh-fuss a:hover { color: var(--gruen); }

@media (max-width: 650px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .wrap { padding-top: 20px; }
  footer.container.lh-fuss { margin-left: 16px; margin-right: 16px; }
  .button, button.button { display: block; width: 100%; }
}