/* Farbvariante für Entwicklung: nur Farben, keine Layout- oder Formänderungen. */
:root {
  --color-primary:#008b97; --color-primary-hover:#006c76; --color-primary-soft:#e2f8f7;
  --color-accent:#00a3ad; --color-background:#fff; --color-surface:#fff;
  --color-surface-elevated:#fff; --color-text:#123b43; --color-text-secondary:#42666b;
  --color-border:#c5e8e7; --color-brand-red:#008b97; --color-brand-red-dark:#006c76;
  --color-brand-rose:#e2f8f7; --logo-bg:#fff; --header-bg:#fff;
  --nav-bg:#fff; --content-bg:#fff; --primary-color:#008b97;
  --accent-color:#008b97; --button-hover-bg:#00727b; --button-text-color:#17464d;
}
html, body, #mainContainer, main { background-color:#fff; color:#123b43; }
body>header, header { background:#fff; color:#123b43; border-color:#c5e8e7; }
header h1, header .brand-caption { color:#075f69; }
nav, #navLoggedOut, #navLoggedIn, #primary-navigation { background-color:#fff; border-color:#c5e8e7; }
nav button.active, nav button:hover { background-color:#e2f8f7; color:#006c76; }
main>section, .card, .auth-panel, .welcome-story, .social-hero, dialog, [role="dialog"] { background-color:#fff; border-color:#c5e8e7; color:#123b43; }
h1, h2, h3, a, .eyebrow { color:#075f69; }
button[type="submit"], .btn-primary, .primary-button { background-color:#008b97; color:#fff; border-color:#008b97; }
button[type="submit"]:hover, .btn-primary:hover, .primary-button:hover { background-color:#006c76; }
input, textarea, select { background-color:#fff; border-color:#b9dede; color:#123b43; }
input:focus, textarea:focus, select:focus { border-color:#008b97; }
#matching-buttons-container #likeBtnMatch { background-color:#008b97; border-color:#008b97; }
.welcome-modes>div:nth-child(2) .nav-icon, .tip, .prompt { background-color:#e2f8f7; border-color:#b8e8e6; color:#006c76; }