/* upgrade.wholenesswork.eu — Brand-Tokens wie der Website-Nachbau (Marine, Altrosa, Ubuntu 300) */
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:300; font-display:swap; src:url('assets/fonts/ubuntu-300-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:300; font-display:swap; src:url('assets/fonts/ubuntu-300-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/ubuntu-400-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/ubuntu-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/ubuntu-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Ubuntu'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/ubuntu-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --ink: #1A2D4D;          /* Marine — Schrift, gebuchte Level, Button */
    --ink-hover: #12213A;
    --text: #3A3A3A;
    --muted: #6E7788;
    --rose: #D9B4AC;         /* Altrosa — nur für das, was neu dazukommt */
    --rose-deep: #B98C82;    /* lesbare Altrosa-Variante für Text */
    --ground: #F1F3F7;       /* Seitengrund, aus dem Marine abgeleitet */
    --card: #FFFFFF;
    --line: #D8DDE6;
    --radius: 4px;
    --focus: 0 0 0 3px rgba(26, 45, 77, .18);
    --dot: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--ground);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--rose-deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Kopf & Fuß */
.top {
    width: min(100% - 2.5rem, 640px);
    margin: 0 auto;
    padding: 1.4rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.brand img { display: block; height: 44px; width: auto; }
.brand__name { font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lang { font-size: .875rem; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.lang:hover { border-color: var(--ink); color: var(--ink); }

.foot {
    width: min(100% - 2.5rem, 640px);
    margin: auto auto 0;
    padding: 2.5rem 0 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    font-size: .8125rem;
    color: var(--muted);
}

/* ------------------------------------------------------------ Seite & Hero */
.page { width: min(100% - 2.5rem, 640px); margin: 0 auto; padding: 3.5rem 0 1rem; }
.hero { margin-bottom: 2.25rem; }
.eyebrow {
    margin: 0;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rose-deep);
}
h1 {
    margin: .3rem 0 .9rem;
    font-weight: 300;
    font-size: clamp(3.4rem, 10vw, 5.75rem);
    line-height: .95;
    letter-spacing: -.025em;
    color: var(--ink);
}
.lede { margin: 0; max-width: 44ch; font-size: 1.125rem; color: var(--text); }

/* ------------------------------------------------------------ Level-Track (Signatur) */
.track {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), 1fr);
    gap: .5rem;
}
.track::before {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2);
    left: calc(100% / var(--n, 4) / 2);
    right: calc(100% / var(--n, 4) / 2);
    height: 1px;
    background: var(--line);
}
.lv { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; }
.lv__dot {
    position: relative;
    z-index: 1;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    display: grid;
    place-items: center;
    font-weight: 300;
    font-size: calc(var(--dot) * .38);
    letter-spacing: .02em;
    color: var(--ink);
    margin-bottom: .55rem;
    transition: background .3s, border-color .3s, color .3s, transform .25s;
}
.lv--booked .lv__dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.lv--new .lv__dot { background: var(--rose); border-color: var(--rose); color: var(--ink); }
.lv__date { font-size: .8125rem; font-weight: 500; color: var(--ink); }
.lv__days { font-size: .75rem; color: var(--muted); }
.lv--open .lv__date { color: var(--muted); font-weight: 400; }

.track--sm { --dot: 30px; gap: .3rem; margin: 0; width: 148px; flex: none; }
.track--sm .lv__dot { margin: 0; font-size: .78rem; }

@media (prefers-reduced-motion: no-preference) {
    .track--reveal .lv--booked .lv__dot,
    .track--reveal .lv--new .lv__dot {
        animation: dotfill .6s cubic-bezier(.2, .7, .2, 1) both;
        animation-delay: calc(160ms + var(--i, 0) * 120ms);
    }
    @keyframes dotfill {
        from { transform: scale(.7); background: var(--card); border-color: var(--line); color: var(--ink); }
    }
}

/* ------------------------------------------------------------ Panel, Formular */
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.75rem 1.75rem 1.6rem;
}
.panel--sent h2 { margin: 0 0 .5rem; font-weight: 300; font-size: 1.9rem; line-height: 1.15; color: var(--ink); }
.panel__text { margin: 0 0 .5rem; }
.panel__text:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
    display: block;
    margin-bottom: .4rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.field input {
    width: 100%;
    font: inherit;
    padding: .78rem .9rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.help { margin: .75rem 0 1.4rem; font-size: .875rem; color: var(--muted); }
.form-note { margin: 1.25rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--muted); max-width: 54ch; }
.field--gate { max-width: 320px; }
.field--gate input { font-size: 1.25rem; letter-spacing: .04em; }

.btn {
    font: inherit;
    font-weight: 500;
    font-size: .9375rem;
    color: #fff;
    background: var(--ink);
    border: 0;
    border-radius: var(--radius);
    padding: .9rem 1.5rem;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled, .opt:disabled { opacity: .6; cursor: progress; }

.notice {
    border-left: 3px solid var(--ink);
    padding: .2rem 0 .2rem 1.1rem;
    margin: 0 0 1.5rem;
}
.notice__title { margin: 0 0 .3rem; color: var(--ink); font-weight: 500; }
.notice__body { margin: 0; color: var(--text); }

/* ------------------------------------------------------------ Upgrade-Optionen */
.options { margin-top: 1.5rem; }
.options__title {
    margin: 0 0 .85rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rose-deep);
}
.opt-form { margin: 0 0 .65rem; }
.opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-align: left;
    font: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.05rem 1.2rem 1.05rem 1.25rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .25s, transform .2s;
}
.opt:hover, .opt:focus-visible { border-color: var(--ink); box-shadow: 0 10px 26px -18px rgba(26, 45, 77, .55); }
.opt:focus-visible { outline: none; box-shadow: var(--focus); }
.opt:hover .lv--new .lv__dot { transform: translateY(-2px); }
.opt:hover .opt__arrow { transform: translateX(4px); color: var(--ink); }
.opt__text { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.opt__label { font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.opt__dates { font-size: .875rem; color: var(--muted); }
.opt__arrow { font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--muted); transition: transform .2s, color .2s; }
.opt.is-sending .opt__arrow { animation: nudge .8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.diff-note { margin: 1.1rem 0 0; font-size: .875rem; color: var(--muted); max-width: 52ch; }

.aside { margin: 1.5rem 0 0; font-size: .875rem; }
.link { color: var(--muted); }
.link:hover { color: var(--ink); }

/* ------------------------------------------------------------ Mobil */
@media (max-width: 560px) {
    :root { --dot: 46px; }
    .page { padding-top: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .panel { padding: 1.4rem 1.25rem 1.3rem; }
    .lv__days { display: none; }
    .opt { flex-wrap: wrap; gap: .75rem 1rem; padding: 1rem; }
    .track--sm { width: 128px; }
    .opt__text { flex-basis: 100%; order: 3; }
    .opt__arrow { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}