/* ============================================================
base.css — Brand-Tokens, Reset, Typografie, Layout, Nav, Buttons
Brand: Klinik Südhang — Fira Sans, deep-rose #a50044 + teal #007088,
on warm-off-white paper. Mobile-first: 920 / 600 / 375 px Breakpoints,
Touch-Targets ≥ 44 px.
============================================================ */
:root {
/* Brand — variable names kept (--sage etc.) so existing selectors keep
working; values mapped to the Südhang palette extracted from
www.suedhang.ch's theme bundle. */
--sage: #a50044; /* primary deep rose (was sage) */
--sage-soft: #cc82a0; /* soft rose accent */
--sage-deep: #8c1c4b; /* hover / active */
--sage-mist: #d5a6b9; /* faint tint for backgrounds */
--teal: #007088; /* secondary water-blue */
--teal-soft: #9bc1c9;
--teal-deep: #35666f;
--cream: #f8f8f7; /* paper canvas (was --cream) */
--cream-warm: #f0eee9; /* warmer beige for alternating rows */
--paper: #ffffff; /* cards / tiles */
--ink: #383027; /* primary text (deep warm brown) */
--ink-strong: #1c1812;
--muted: #747068; /* secondary text */
--rule: #d5d1cb; /* dividers / borders */
--rule-soft: #e8e6e1;
--faint: #b7b3aa; /* hint text, placeholder */
/* Semantic */
--danger: #c1503c;
--warn: #d4a85e;
--ok: #5a8a64;
--info: var(--teal);
/* Typo — Südhang uses Fira Sans for both display and body. We keep two
variable names because existing selectors reference them; both resolve
to Fira Sans, distinguished only by weight. */
--font-serif: 'Fira Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-sans: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Geometry */
--radius: 10px;
--radius-lg: 14px;
--shadow-paper: 0 1px 0 rgba(37, 36, 31, 0.04),
0 8px 24px -16px rgba(37, 36, 31, 0.18);
--shadow-paper-strong: 0 1px 0 rgba(37, 36, 31, 0.06),
0 18px 40px -22px rgba(37, 36, 31, 0.28);
--container-max: 1180px;
--container-pad: clamp(16px, 4vw, 32px);
--touch: 44px;
}
/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
/* ---------- Typografie ---------- */
h1, h2, h3 {
font-family: var(--font-serif);
font-weight: 500; /* Südhang uses medium for display */
color: var(--ink-strong);
line-height: 1.2;
letter-spacing: -0.005em; /* slight tracking-in like the source site */
margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 2.4vw + 1.4rem, 3rem); }
h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2.1rem); }
h3 { font-size: clamp(1.2rem, 0.8vw + 0.9rem, 1.55rem); }
h4, h5, h6 {
font-family: var(--font-sans);
font-weight: 700;
margin: 0 0 0.5em;
line-height: 1.3;
}
p { margin: 0 0 1em; }
small { color: var(--muted); }
a {
color: var(--ink);
text-decoration: none;
background-image: linear-gradient(var(--sage), var(--sage));
background-repeat: no-repeat;
background-size: 0 1.5px;
background-position: 0 100%;
transition: background-size 160ms ease, color 160ms ease;
padding-bottom: 1px;
}
a:hover,
a:focus-visible {
background-size: 100% 1.5px;
color: var(--sage-deep);
}
a:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 3px;
border-radius: 3px;
}
::selection {
background: var(--sage-soft);
color: var(--ink);
}
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
main.container {
padding-block: clamp(24px, 4vw, 48px);
}
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
background: var(--ink);
color: var(--cream);
padding: 8px 14px;
border-radius: var(--radius);
z-index: 9999;
}
.skip-link:focus { left: 8px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ---------- Top-Nav ---------- */
.site-nav {
background: var(--paper);
border-bottom: 1px solid var(--rule);
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(110%);
}
.site-nav__inner {
display: flex;
align-items: center;
gap: 16px;
min-height: 64px;
padding-block: 10px;
/* Nav darf voll breit werden — sonst kollidieren die vielen Tabs ans
Container-Max und springen in die zweite Zeile. */
max-width: none;
padding-inline: clamp(12px, 2vw, 24px);
}
.site-nav__logo {
display: inline-flex;
align-items: center;
gap: 10px;
background: none;
padding: 6px 4px;
}
.site-nav__logo:hover { background-size: 0 0; }
.logo-mark {
height: 36px;
width: auto;
flex: 0 0 auto;
display: block;
}
.logo-word {
font-family: var(--font-serif);
font-weight: 300;
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--muted);
padding-left: 14px;
margin-left: 4px;
border-left: 1px solid var(--rule);
text-transform: none;
}
@media (max-width: 600px) {
.logo-word { display: none; }
}
/* Nav-Tabs direkt rechts vom Logo, Bell+User rechtsbündig am Ende. */
.site-nav__tabs { margin-left: 8px; }
/* Erstes Element nach den Tabs (Bell oder User) drückt sich an den
rechten Rand — alles dahinter bleibt natürlich nebenan stehen. */
.site-nav__tabs ~ * { margin-left: 12px; }
.site-nav__tabs + * { margin-left: auto; }
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: var(--touch);
padding: 8px 10px; /* etwas kompakter, damit Nav nicht 2-zeilig wird */
font-size: 0.9rem;
font-weight: 500;
color: var(--ink);
background: none;
border: 0;
border-radius: var(--radius);
cursor: pointer;
position: relative;
white-space: nowrap;
}
.site-nav__link:hover {
background: var(--cream-warm);
background-image: none;
}
.site-nav__link.is-active {
background: var(--cream-warm);
background-image: none;
color: var(--sage-deep);
}
.site-nav__link.is-active::after {
content: '';
position: absolute;
left: 14px; right: 14px;
bottom: 4px;
height: 2px;
background: var(--sage);
border-radius: 2px;
}
.site-nav__caret { font-size: 0.8em; opacity: 0.7; }
.site-nav__dropdown { position: relative; }
.site-nav__submenu {
list-style: none;
margin: 0; padding: 6px;
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 200px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-paper-strong);
display: none;
z-index: 60;
}
.site-nav__dropdown.is-open .site-nav__submenu { display: block; }
.site-nav__sublink {
display: block;
padding: 10px 12px;
min-height: var(--touch);
border-radius: 8px;
font-size: 0.92rem;
font-weight: 500;
color: var(--ink);
background: none;
background-image: none;
}
.site-nav__sublink:hover { background: var(--cream-warm); }
.site-nav__sublink.is-active { color: var(--sage-deep); background: var(--cream-warm); }
.site-nav__user {
display: inline-flex;
align-items: center;
gap: 12px;
padding-left: 12px;
border-left: 1px solid var(--rule-soft);
}
.site-nav__user-name {
font-weight: 600;
font-size: 0.92rem;
color: var(--muted);
}
.site-nav__logout {
font-size: 0.9rem;
color: var(--sage-deep);
padding: 8px 10px;
min-height: var(--touch);
display: inline-flex;
align-items: center;
}
.site-nav__toggle {
display: none;
width: var(--touch);
height: var(--touch);
border: 1px solid var(--rule);
background: var(--paper);
border-radius: var(--radius);
margin-left: auto;
position: relative;
padding: 0;
cursor: pointer;
}
.site-nav__toggle-bar {
position: absolute;
left: 10px; right: 10px;
height: 2px;
background: var(--ink);
border-radius: 2px;
}
.site-nav__toggle-bar:nth-child(1) { top: 14px; }
.site-nav__toggle-bar:nth-child(2) { top: 21px; }
.site-nav__toggle-bar:nth-child(3) { top: 28px; }
/* ---------- Buttons ---------- */
/* ─── Nachhaltige Abstandregeln für interaktive Elemente ───────────── */
/* Buttons untereinander oder neben dem Geschwister-Button: 12 px Luft. */
.btn + .btn,
.btn + a,
.btn + button,
a + .btn,
button + .btn { margin-left: 12px; }
/* Wenn ein Button in einer eigenen Zeile steht (Block-Container), greift
margin-left nicht. Dafür sorgt der Flow-Selector unten. */
/* Inputs / Selects / Buttons untereinander im Block-Container — egal ob
einem .field oder direkt im