/* ==========================================================================
   Medphone Basis: Design-Tokens und Grundbausteine
   Abgeleitet aus dem Designsystem von munter.ch (wk-theme), damit Medphone
   visuell zur Espace Health Familie passt.
   ========================================================================== */

@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/Outfit-Variable.ttf") format("truetype");
}

:root {
    /* Farben (Munter) */
    --color-white: #fff;
    --color-black: #141414;
    --color-grey-150: #d9d9d9;
    --color-grey-500: #f5f5f5;
    --color-grey-600: #e6e6e6;
    --color-grey-700: #929292;
    --color-grey-800: #6b6b6b;
    --color-red-200: #fdf4f4;
    --color-red-300: #fbe3e4;
    --color-red-400: #f49ba1;
    --color-red-500: #e30613;
    --color-red-600: #c2000c;
    --color-red-700: #85090e;
    --color-red-800: #72030a;
    --color-yellow-100: #ffe09a;
    --color-yellow-50: #fff3d6;

    /* Typografie (Munter) */
    --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --text-extra-small: .75rem;
    --text-small: .875rem;
    --text-body: clamp(1rem, .952rem + .19vw, 1.125rem);
    --text-lead: clamp(1.125rem, 1.079rem + .19vw, 1.25rem);
    --text-h4: clamp(1.125rem, 1.079rem + .19vw, 1.25rem);
    --text-h3: clamp(1.375rem, 1.305rem + .286vw, 1.563rem);
    --text-h2: clamp(1.75rem, 1.657rem + .381vw, 2rem);
    --text-h1: clamp(2.25rem, 1.971rem + 1.143vw, 3rem);
    --text-cover: clamp(2.5rem, 2rem + 2.2vw, 4rem);

    /* Radien und Schatten (Munter) */
    --radius-small: 16px;
    --radius-2xl: 1rem;
    --radius-card: 32px;
    --radius-card-inner: 26px;
    --radius-large: 200px;
    --shadow-sm: 0 1px 3px 0 #14141440;
    --shadow-lg: 0 10px 20px 0 #2c3e500d;
    --shadow-xl: 0 8px 32px 0 #14141440;

    /* Layout (Munter) */
    --outer-gap: 1rem;
    --container-default: 54rem;
    --container-wide: 82rem;
    --content-width-default: min(100% - var(--outer-gap) * 2, var(--container-default));
    --content-width-wide: min(100% - var(--outer-gap) * 2, var(--container-wide));
    --section-space: clamp(2.75rem, 1.8rem + 3.6vw, 5.5rem);
    --card-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);

    --z-header: 200;
    --z-sticky-call: 900;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (width >= 48rem) { :root { --outer-gap: 2rem; } }
@media (width >= 64rem) { :root { --outer-gap: 3rem; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 9rem; }
body {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.55;
    color: var(--color-black);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-semibold); line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--color-red-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--color-red-500); color: var(--color-white); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Hilfsklassen ---------- */
.container-wide { width: var(--content-width-wide); margin-inline: auto; }
.container-default { width: var(--content-width-default); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 9999; width: auto; height: auto; clip-path: none; padding: .75rem 1.25rem; background: var(--color-white); border-radius: 999px; box-shadow: var(--shadow-xl); }

.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); }
.h4 { font-size: var(--text-h4); }
.cover { font-size: var(--text-cover); font-weight: var(--font-weight-semibold); line-height: 1.05; letter-spacing: -.01em; }
.lead { font-size: var(--text-lead); }
.muted { color: var(--color-grey-800); }

/* ---------- Tag (Munter) ---------- */
.tag {
    display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
    padding: .25rem .75rem; border-radius: 999px;
    background: var(--color-red-500); color: var(--color-white);
    font-size: var(--text-small); font-weight: var(--font-weight-medium); line-height: 1.3;
}
.tag-light { background: var(--color-red-200); color: var(--color-red-600); }
.tag-white { background: var(--color-white); color: var(--color-red-500); }

/* ---------- Buttons (Munter: Pill-Form) ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.35rem; border-radius: 999px; border: 0;
    font-size: var(--text-body); font-weight: var(--font-weight-medium); line-height: 1.25;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.btn svg { width: 1.35rem; height: 1.35rem; flex: none; }
.btn-lg { padding: 1rem 1.6rem; font-size: var(--text-lead); }
.btn-filled { background: var(--color-red-500); color: var(--color-white); }
.btn-filled:hover { background: var(--color-red-800); }
.btn-white { background: var(--color-white); color: var(--color-black); }
.btn-white:hover { color: var(--color-red-500); }
.btn-outline { color: var(--color-red-500); box-shadow: inset 0 0 0 2px currentColor; background: transparent; }
.btn-outline:hover { background: var(--color-red-800); color: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-red-800); }
.btn-outline-white { color: var(--color-white); box-shadow: inset 0 0 0 2px currentColor; background: transparent; }
.btn-outline-white:hover { background: var(--color-white); color: var(--color-red-500); }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--color-red-500); font-weight: var(--font-weight-semibold); }
.link-arrow svg { width: 1.1rem; height: 1.1rem; transition: transform .2s var(--ease); }
.link-arrow:hover svg, a:hover > .link-arrow svg { transform: translateX(4px); }