Hier ist die komplette CSS, inklusive Fix für den weißen Fortfahren-/Submit-Button auf iOS/Safari und sauberem Dark/Light-Mode: /* Simson-Treff.de listmonk public pages Einbinden in listmonk: Einstellungen → Appearance/Templates → Public pages CSS */ /* ========================================================= THEME TOKENS Default: Light Mode Automatisch: prefers-color-scheme Optional manuell: oder alternativ: .theme-light / .theme-dark ========================================================= */ :root, html[data-theme="light"], body[data-theme="light"], .theme-light { color-scheme: light; --st-bg: #ffffff; --st-bg-end: #f8fafd; --st-surface: rgba(255, 255, 255, .86); --st-surface-strong: #ffffff; --st-surface-soft: rgba(255, 255, 255, .72); --st-input-bg: rgba(255, 255, 255, .92); --st-input-bg-focus: #ffffff; --st-table-bg: #ffffff; --st-notice-bg: rgba(255, 255, 255, .9); --st-text: #202124; --st-text-strong: #3c4043; --st-muted: #5f6368; --st-muted-soft: #9aa0a6; --st-line: #e8eaed; --st-line-strong: rgba(218, 220, 224, .9); --st-blue: #4285f4; --st-blue-hover: #3367d6; --st-red: #ea4335; --st-yellow: #fbbc04; --st-green: #34a853; --st-success-text: #137333; --st-success-bg: rgba(52, 168, 83, .08); --st-success-line: rgba(52, 168, 83, .28); --st-error-text: #a50e0e; --st-error-bg: rgba(234, 67, 53, .08); --st-error-line: rgba(234, 67, 53, .28); --st-grid: rgba(60, 64, 67, .035); --st-grid-mask: rgba(0, 0, 0, .55); --st-logo-ring: #ffffff; --st-shadow: 0 24px 80px rgba(60, 64, 67, .18); --st-soft-shadow: 0 1px 2px rgba(60, 64, 67, .06); --st-button-shadow: 0 10px 24px rgba(66, 133, 244, .25); --st-button-shadow-hover: 0 14px 28px rgba(66, 133, 244, .28); --st-secondary-bg: #f1f3f4; --st-secondary-text: var(--st-text); --st-focus: 0 0 0 4px rgba(66, 133, 244, .18); --st-radius-xl: 34px; --st-radius-md: 18px; --st-radial-blue: rgba(66, 133, 244, .14); --st-radial-yellow: rgba(251, 188, 4, .18); --st-radial-green: rgba(52, 168, 83, .10); } /* Automatischer Dark Mode */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --st-bg: #0f1115; --st-bg-end: #171a21; --st-surface: rgba(24, 27, 34, .84); --st-surface-strong: #1b1f27; --st-surface-soft: rgba(255, 255, 255, .055); --st-input-bg: rgba(255, 255, 255, .06); --st-input-bg-focus: rgba(255, 255, 255, .09); --st-table-bg: rgba(255, 255, 255, .045); --st-notice-bg: rgba(255, 255, 255, .055); --st-text: #f1f3f4; --st-text-strong: #e8eaed; --st-muted: #bdc1c6; --st-muted-soft: #8f959e; --st-line: rgba(255, 255, 255, .12); --st-line-strong: rgba(255, 255, 255, .16); --st-blue: #8ab4f8; --st-blue-hover: #a8c7fa; --st-red: #f28b82; --st-yellow: #fdd663; --st-green: #81c995; --st-success-text: #81c995; --st-success-bg: rgba(129, 201, 149, .10); --st-success-line: rgba(129, 201, 149, .28); --st-error-text: #f28b82; --st-error-bg: rgba(242, 139, 130, .10); --st-error-line: rgba(242, 139, 130, .30); --st-grid: rgba(255, 255, 255, .045); --st-grid-mask: rgba(0, 0, 0, .68); --st-logo-ring: #12151b; --st-shadow: 0 24px 90px rgba(0, 0, 0, .48); --st-soft-shadow: 0 1px 2px rgba(0, 0, 0, .28); --st-button-shadow: 0 10px 26px rgba(138, 180, 248, .18); --st-button-shadow-hover: 0 14px 32px rgba(138, 180, 248, .24); --st-secondary-bg: rgba(255, 255, 255, .10); --st-secondary-text: var(--st-text); --st-focus: 0 0 0 4px rgba(138, 180, 248, .22); --st-radial-blue: rgba(138, 180, 248, .16); --st-radial-yellow: rgba(253, 214, 99, .11); --st-radial-green: rgba(129, 201, 149, .12); } } /* Manuell erzwungener Dark Mode überschreibt System */ html[data-theme="dark"], body[data-theme="dark"], .theme-dark { color-scheme: dark; --st-bg: #0f1115; --st-bg-end: #171a21; --st-surface: rgba(24, 27, 34, .84); --st-surface-strong: #1b1f27; --st-surface-soft: rgba(255, 255, 255, .055); --st-input-bg: rgba(255, 255, 255, .06); --st-input-bg-focus: rgba(255, 255, 255, .09); --st-table-bg: rgba(255, 255, 255, .045); --st-notice-bg: rgba(255, 255, 255, .055); --st-text: #f1f3f4; --st-text-strong: #e8eaed; --st-muted: #bdc1c6; --st-muted-soft: #8f959e; --st-line: rgba(255, 255, 255, .12); --st-line-strong: rgba(255, 255, 255, .16); --st-blue: #8ab4f8; --st-blue-hover: #a8c7fa; --st-red: #f28b82; --st-yellow: #fdd663; --st-green: #81c995; --st-success-text: #81c995; --st-success-bg: rgba(129, 201, 149, .10); --st-success-line: rgba(129, 201, 149, .28); --st-error-text: #f28b82; --st-error-bg: rgba(242, 139, 130, .10); --st-error-line: rgba(242, 139, 130, .30); --st-grid: rgba(255, 255, 255, .045); --st-grid-mask: rgba(0, 0, 0, .68); --st-logo-ring: #12151b; --st-shadow: 0 24px 90px rgba(0, 0, 0, .48); --st-soft-shadow: 0 1px 2px rgba(0, 0, 0, .28); --st-button-shadow: 0 10px 26px rgba(138, 180, 248, .18); --st-button-shadow-hover: 0 14px 32px rgba(138, 180, 248, .24); --st-secondary-bg: rgba(255, 255, 255, .10); --st-secondary-text: var(--st-text); --st-focus: 0 0 0 4px rgba(138, 180, 248, .22); --st-radial-blue: rgba(138, 180, 248, .16); --st-radial-yellow: rgba(253, 214, 99, .11); --st-radial-green: rgba(129, 201, 149, .12); } /* ========================================================= BASE ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--st-bg); } body { margin: 0; min-height: 100vh; color: var(--st-text); font-family: "Google Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 16% 18%, var(--st-radial-blue), transparent 28rem), radial-gradient(circle at 78% 16%, var(--st-radial-yellow), transparent 25rem), radial-gradient(circle at 82% 84%, var(--st-radial-green), transparent 23rem), linear-gradient(180deg, var(--st-bg) 0%, var(--st-bg-end) 100%); } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--st-grid) 1px, transparent 1px), linear-gradient(90deg, var(--st-grid) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(180deg, var(--st-grid-mask), transparent 78%); -webkit-mask-image: linear-gradient(180deg, var(--st-grid-mask), transparent 78%); } body::after { content: ""; position: fixed; left: 50%; top: 34px; z-index: 0; width: 34px; height: 34px; transform: translateX(-50%); border-radius: 12px; background: linear-gradient(90deg, var(--st-blue) 0 50%, var(--st-red) 50% 100%) top / 100% 50% no-repeat, linear-gradient(90deg, var(--st-yellow) 0 50%, var(--st-green) 50% 100%) bottom / 100% 50% no-repeat; box-shadow: 0 6px 18px rgba(0, 0, 0, .16), 0 0 0 6px var(--st-logo-ring), inset 0 0 0 1px rgba(255, 255, 255, .32); } body > * { position: relative; z-index: 1; } a { color: var(--st-blue); text-decoration: none; font-weight: 650; } a:hover { text-decoration: underline; } /* ========================================================= CONTAINER ========================================================= */ main, .container, .content, .public, .page, .subscription, .unsubscribe, .confirmation, .login, body > section, body > div:first-of-type { width: min(680px, calc(100% - 40px)); margin-inline: auto; } main, .container, .content, .public, .page, .subscription, .unsubscribe, .confirmation, .login, body > section, body > div:first-of-type { margin-top: clamp(92px, 12vh, 148px); margin-bottom: 56px; padding: clamp(24px, 5vw, 44px); border: 1px solid var(--st-line-strong); border-radius: var(--st-radius-xl); background: var(--st-surface); box-shadow: var(--st-shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } /* Doppelte Karten vermeiden, falls listmonk verschachtelte Wrapper ausgibt. */ main .container, .container .content, .public .container, .page .container, .subscription .content, .unsubscribe .content, .confirmation .content { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================= TYPOGRAPHY ========================================================= */ h1, h2, h3 { margin: 0 0 16px; color: var(--st-text); line-height: 1.04; letter-spacing: -.045em; } h1 { font-size: clamp(38px, 7vw, 64px); max-width: 12ch; } h2 { font-size: clamp(28px, 5vw, 42px); } h3 { font-size: 22px; letter-spacing: -.025em; } p, li, label, small { color: var(--st-muted); line-height: 1.6; } p { margin: 0 0 18px; } ul, ol { padding-left: 1.25rem; } /* ========================================================= FORMS ========================================================= */ form { display: grid; gap: 14px; margin-top: 26px; } fieldset { margin: 0; padding: 0; border: 0; } label { display: block; margin: 0 0 8px; color: var(--st-text-strong); font-size: 14px; font-weight: 700; } input, select, textarea { width: 100%; min-height: 54px; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); outline: 0; background: var(--st-input-bg); color: var(--st-text); font: inherit; padding: 14px 16px; box-shadow: var(--st-soft-shadow); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } textarea { min-height: 120px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--st-muted-soft); } input:focus, select:focus, textarea:focus { border-color: var(--st-blue); box-shadow: var(--st-focus); background: var(--st-input-bg-focus); } select { color-scheme: inherit; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0 10px 0 0; accent-color: var(--st-blue); box-shadow: none; } input[type="checkbox"] + label, input[type="radio"] + label, label:has(input[type="checkbox"]), label:has(input[type="radio"]) { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 650; } /* ========================================================= BUTTONS Wichtig: iOS/Safari-Submit-Button-Fix ========================================================= */ button, input[type="button"], input[type="submit"], input[type="reset"], .button, .btn, a.button, a.btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; width: fit-content; border: 0 !important; border-radius: var(--st-radius-md); padding: 15px 22px; cursor: pointer; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--st-blue) !important; background-color: var(--st-blue) !important; font: inherit; font-weight: 750; text-align: center; text-decoration: none !important; box-shadow: var(--st-button-shadow); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, background-color .2s ease, opacity .2s ease; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .button:hover, .btn:hover, a.button:hover, a.btn:hover { transform: translateY(-1px); box-shadow: var(--st-button-shadow-hover); background: var(--st-blue-hover) !important; background-color: var(--st-blue-hover) !important; } button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, .button:focus-visible, .btn:focus-visible, a.button:focus-visible, a.btn:focus-visible { outline: 0; box-shadow: var(--st-focus), var(--st-button-shadow); } button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled { opacity: .65; cursor: wait; transform: none; } /* listmonk-Submit-Buttons auf volle Breite ziehen */ form input[type="submit"], form button[type="submit"] { width: 100%; text-align: center; } /* Zusätzlicher iOS/Safari-Fallback */ input[type="submit"] { border-radius: var(--st-radius-md) !important; } /* Sekundäre Buttons */ button.secondary, .btn-secondary, a.secondary, input.secondary { color: var(--st-secondary-text) !important; -webkit-text-fill-color: var(--st-secondary-text) !important; background: var(--st-secondary-bg) !important; background-color: var(--st-secondary-bg) !important; box-shadow: none; } /* ========================================================= CONTENT ELEMENTS ========================================================= */ hr { height: 1px; margin: 28px 0; border: 0; background: var(--st-line); } table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); background: var(--st-table-bg); } th, td { padding: 13px 14px; border-bottom: 1px solid var(--st-line); text-align: left; } th { color: var(--st-text-strong); font-size: 13px; } td { color: var(--st-muted); } tr:last-child td { border-bottom: 0; } /* ========================================================= MESSAGES ========================================================= */ .notice, .alert, .message, .error, .success, .flash, .toast, .msg { margin: 18px 0; padding: 14px 16px; border-radius: var(--st-radius-md); border: 1px solid var(--st-line); background: var(--st-notice-bg); color: var(--st-muted); } .success, .notice.success, .alert-success, .message-success { border-color: var(--st-success-line); background: var(--st-success-bg); color: var(--st-success-text); } .error, .notice.error, .alert-error, .message-error { border-color: var(--st-error-line); background: var(--st-error-bg); color: var(--st-error-text); } /* ========================================================= LISTMONK-SPEZIFISCHE FEINSCHLIFFE ========================================================= */ .logo, .brand, header { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .lists, .list, .subscriptions, .campaigns { display: grid; gap: 12px; } .list, .subscription-list, .campaign { padding: 14px; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); background: var(--st-surface-soft); } footer { width: min(680px, calc(100% - 40px)); margin: -26px auto 36px; color: var(--st-muted-soft); text-align: center; font-size: 13px; } footer a { color: var(--st-muted); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { body::after { top: 22px; } main, .container, .content, .public, .page, .subscription, .unsubscribe, .confirmation, .login, body > section, body > div:first-of-type { width: min(100% - 24px, 680px); margin-top: 76px; padding: 24px; border-radius: 26px; } h1 { font-size: clamp(34px, 12vw, 48px); } button, input[type="button"], input[type="submit"], input[type="reset"], .button, .btn, a.button, a.btn { width: 100%; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================= LISTMONK BRANDING AUSBLENDEN ========================================================= */ a[href*="listmonk.app"], a[href*="github.com/knadh/listmonk"], .powered-by, .poweredby, .powered, .listmonk-powered, .listmonk-branding, #powered-by, #poweredby { display: none !important; } /* Falls listmonk den Hinweis als isolierten Footer-Text rendert, wird er per JS entfernt. */