:root {
    color-scheme: light;
    --background: #f1f0e9;
    --surface: #fffefa;
    --surface-soft: #f7f4ec;
    --ink: #17231d;
    --muted: #657067;
    --line: #d6d8cf;
    --green: #214b38;
    --green-deep: #14251d;
    --green-soft: #e3ebe4;
    --amber: #dcaa48;
    --amber-soft: #fbf1d8;
    --red: #9b392f;
    --red-soft: #f8e5e2;
    --focus: #b87918;
    font-family: "LM Sans", ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
    background: var(--background);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--background); }
button, input, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .18em; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-180%); padding: .7rem 1rem; background: var(--surface); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2 { font-family: "LM Space", ui-sans-serif, system-ui, sans-serif; }
h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin: 0; line-height: 1.15; }
p { line-height: 1.55; }
.eyebrow, .kicker { margin: 0 0 .65rem; color: var(--green); font: 700 .74rem/1.2 "LM Space", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }

.button, button { min-height: 44px; padding: .72rem 1rem; border: 1px solid var(--green); border-radius: 5px; background: var(--green); color: #fff; font-weight: 700; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button:hover, button:hover { background: #183d2d; }
.button.secondary { border-color: #718078; background: transparent; color: var(--green); }
.button.secondary:hover { border-color: var(--green); background: var(--green-soft); }
.button.small { min-height: 40px; padding: .55rem .85rem; }
.button.full { width: 100%; margin-top: .35rem; }
button:disabled { cursor: not-allowed; opacity: .62; }

label { display: block; margin: 0 0 .42rem; font-weight: 700; }
input, textarea { width: 100%; min-height: 48px; padding: .78rem .9rem; border: 1px solid #9da59e; border-radius: 5px; background: #fff; color: var(--ink); }
textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
input:hover, textarea:hover { border-color: #69766e; }
input:focus, textarea:focus { outline: 3px solid rgba(184, 121, 24, .2); border-color: var(--focus); }
.form-field, form > div { margin-bottom: 1rem; }
.help-text { margin-top: .38rem; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.form-errors, .form-errors ul, form ul { margin: .38rem 0 0; padding-left: 1.15rem; color: var(--red); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red); }

.flash { width: min(100%, 52rem); margin: 0 0 1rem; padding: .9rem 1rem; border-left: 3px solid var(--green); border-radius: 4px; background: var(--green-soft); }
.flash.error { border-left-color: var(--red); background: var(--red-soft); color: #6e211c; }
.flash.success { border-left-color: var(--green); background: var(--green-soft); color: #194e32; }

/* Öffentliche Kopfleiste außerhalb des Kontoablaufs. */
.site-header { min-height: 68px; padding: 0 clamp(1rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.site-header nav { display: flex; align-items: center; gap: 1rem; }
.brand, .auth-brand, .app-brand, .mobile-brand { display: inline-flex; align-items: center; gap: .7rem; font: 600 1.05rem/1 "LM Space", sans-serif; text-decoration: none; }
.public-content { width: min(100% - 2rem, 70rem); margin: 0 auto; padding: 3.5rem 0; }

/* Konto und Registrierung. */
.auth-page { background: var(--surface); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(20rem, 42%) minmax(0, 1fr); }
.auth-intro { position: sticky; top: 0; min-height: 100vh; padding: clamp(1.5rem, 4vw, 4.5rem); display: flex; flex-direction: column; color: #f7f4ec; background: var(--green-deep); overflow: hidden; }
.auth-intro::after { content: ""; position: absolute; right: clamp(-8rem, -8vw, -4rem); bottom: clamp(5rem, 12vh, 10rem); width: 16rem; height: 16rem; border: 1px solid rgba(220, 170, 72, .25); transform: rotate(45deg); }
.auth-brand { position: relative; z-index: 1; color: #fff; font-size: 1.18rem; }
.auth-promise { position: relative; z-index: 1; width: min(100%, 32rem); margin: auto 0; }
.auth-promise .kicker { color: var(--amber); }
.auth-promise-title { margin: 0; font: 600 clamp(2.25rem, 4vw, 4.4rem)/.98 "LM Space", sans-serif; letter-spacing: -.05em; }
.auth-promise ul { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 0; color: #d1d9d3; list-style: none; }
.auth-promise li { display: flex; align-items: center; gap: .7rem; }
.auth-promise li span { display: grid; flex: 0 0 1.45rem; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid #52685b; border-radius: 50%; color: var(--amber); font-size: .78rem; }
.auth-intro-note { position: relative; z-index: 1; margin: 0; color: #94a39a; font-size: .86rem; }
.auth-workspace { min-width: 0; display: grid; align-items: center; padding: clamp(1.25rem, 5vw, 5rem); background: var(--surface); }
.auth-workspace-inner { width: min(100%, 34rem); margin: 0 auto; }
.auth-card { width: 100%; }
.auth-card h1 { max-width: 11ch; font-size: clamp(2.25rem, 5vw, 3.65rem); }
.auth-lead { margin: 1rem 0 1.75rem; color: var(--muted); font-size: 1.03rem; }
.auth-form { margin-top: 1.5rem; }
.auth-form > div { margin-bottom: 1rem; }
.auth-form .form-field { margin-bottom: 1rem; }
.auth-form > div:not(.form-field):not(.password-guide) { display: flex; flex-direction: column; }
.auth-form > div:not(.form-field):not(.password-guide) > label { order: 1; }
.auth-form > div:not(.form-field):not(.password-guide) > input { order: 2; }
.auth-form > div:not(.form-field):not(.password-guide) > .form-errors,
.auth-form > div:not(.form-field):not(.password-guide) > ul { order: 3; }
.auth-form > div:not(.form-field):not(.password-guide) > .help-text { order: 4; }
.login-password-field { display: block; }
.forgot-link { display: inline-block; margin-top: .55rem; color: var(--green); font-size: .88rem; font-weight: 700; }
.password-control { position: relative; }
.password-control input { padding-right: 3.5rem; }
.password-toggle { position: absolute; top: 50%; right: .2rem; width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; transform: translateY(-50%); border: 0; background: transparent; color: var(--green); }
.password-toggle svg { width: 1.25rem; height: 1.25rem; }
.password-toggle [hidden] { display: none; }
.password-toggle:hover { background: var(--green-soft); color: var(--green-deep); }
.auth-switch { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); text-align: center; }
.auth-switch a { color: var(--green); font-weight: 700; }
.registration-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: -1rem 0 1.5rem; padding: 0; color: var(--muted); list-style: none; font-size: .88rem; }
.registration-facts li::before { content: "✓"; margin-right: .4rem; color: var(--green); font-weight: 800; }
.password-guide { margin: -.2rem 0 1rem; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--surface-soft); }
.password-guide p { margin: 0; font-size: .88rem; }
.password-guide ul { display: grid; gap: .45rem; margin: .7rem 0; padding: 0; color: var(--muted); list-style: none; }
.password-guide li { display: flex; align-items: flex-start; gap: .55rem; color: #762b24; font-size: .87rem; }
.check-mark { display: grid; flex: 0 0 1.1rem; width: 1.1rem; height: 1.1rem; margin-top: .08rem; place-items: center; border: 1px solid #c08a84; border-radius: 50%; background: var(--red-soft); color: var(--red); }
.check-mark::before { content: "×"; font-size: .82rem; font-weight: 800; line-height: 1; }
.password-guide li[data-state="met"] { color: var(--green); }
.password-guide li[data-state="met"] .check-mark { border-color: var(--green); background: var(--green); color: #fff; }
.password-guide li[data-state="met"] .check-mark::before { content: "✓"; font-size: .7rem; }
.password-summary { color: var(--muted); }
.mail-expectation { margin: .4rem 0 1rem; color: var(--muted); font-size: .88rem; }
.local-mail-note { margin: 1.25rem 0; padding: 1rem; border-left: 3px solid var(--amber); background: var(--amber-soft); }
.local-mail-note p { margin: .3rem 0; }
.local-mail-note a { color: var(--green); font-weight: 700; }

/* Zentrale Werkbank. */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.app-sidebar { position: sticky; top: 0; height: 100vh; padding: 1.15rem 1rem; display: flex; flex-direction: column; background: var(--green-deep); color: #f8f7f0; }
.app-brand { padding: .1rem .45rem 1.45rem; color: #fff; }
.nav-label { margin: .4rem 0 0; padding: .55rem .65rem; color: #87998e; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.app-nav { display: grid; gap: .2rem; }
.app-nav a { min-height: 46px; padding: .65rem .72rem; display: flex; align-items: center; gap: .72rem; border-radius: 5px; color: #c9d0ca; font-size: .9rem; font-weight: 650; text-decoration: none; }
.app-nav a:hover, .app-nav a.active { background: #2a392f; color: #fff; }
.app-nav a.active::after { content: ""; width: .45rem; height: .45rem; margin-left: auto; border-radius: 50%; background: var(--amber); }
.app-nav svg { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.sidebar-account { min-width: 0; margin-top: auto; padding: 1rem .55rem 0; border-top: 1px solid #34453a; }
.sidebar-account strong, .sidebar-account span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { color: #fff; font-size: .9rem; }
.sidebar-account span { margin-top: .2rem; color: #9eada3; font-size: .75rem; }
.sidebar-account form { margin: .75rem 0 0; }
.sidebar-logout { min-height: 38px; padding: 0; border: 0; background: transparent; color: #c9d0ca; text-decoration: underline; }
.sidebar-logout:hover { background: transparent; color: #fff; }
.app-main { min-width: 0; }
.app-topbar { position: sticky; z-index: 20; top: 0; min-height: 70px; padding: .55rem clamp(1rem, 3vw, 2.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: rgba(241, 240, 233, .96); backdrop-filter: blur(12px); }
.app-topbar-context { min-width: 0; display: flex; align-items: center; gap: 1rem; }
.mobile-brand { display: none; }
.platform-state { margin: 0; display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .86rem; }
.platform-state span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px #f3e6c5; }
.platform-state.published span { background: #3f7859; box-shadow: 0 0 0 4px #dce9df; }
.platform-state.unpublished span { background: #879087; box-shadow: 0 0 0 4px #e2e3de; }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.dashboard-actions { justify-content: flex-end; }
.topbar-publish-form { margin: 0; }
.topbar-action { min-height: 44px; padding: .55rem .72rem; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; border: 1px solid #89948c; border-radius: 5px; background: var(--surface); color: var(--green); font-size: .8rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.topbar-action:hover { border-color: var(--green); background: var(--green-soft); color: var(--green-deep); }
.topbar-action svg { flex: 0 0 1.05rem; width: 1.05rem; height: 1.05rem; }
.topbar-action.save-action { border-color: var(--green); background: var(--green); color: #fff; }
.topbar-action.save-action:hover { background: #183d2d; }
.topbar-action.publish-action { border-color: #aa761a; background: var(--amber); color: #2d2619; }
.topbar-action.publish-action:hover { background: #c79231; }
.topbar-action:disabled { border-color: #b9bdb7; background: #e1e2dd; color: #70766f; }
.app-content { width: min(100%, 82rem); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.6rem); }
.mobile-nav { display: none; }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: end; margin-bottom: 1.75rem; }
.page-lead { max-width: 52rem; margin: .7rem 0 0; color: var(--muted); }
.account-chip { padding: .7rem .9rem; border: 1px solid var(--line); background: var(--surface); text-align: right; }
.account-chip span, .account-chip strong { display: block; }
.account-chip span { color: var(--muted); font-size: .75rem; }
.attention-strip { margin: 0 0 1.2rem; padding: .9rem 1rem; display: flex; align-items: flex-start; gap: .75rem; border: 1px solid #e4cf9b; background: var(--amber-soft); }
.attention-strip p { margin: 0; font-size: .9rem; }
.attention-icon { display: grid; flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; place-items: center; border: 1px solid #8a6410; border-radius: 50%; color: #76550b; font: 700 .78rem "LM Space", sans-serif; }
.dashboard-workspace { width: min(100%, 52rem); }
.section-card { padding: 1.2rem; border: 1px solid var(--line); background: var(--surface); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.section-heading h2 { font-size: 1.5rem; }
.state-badge { padding: .3rem .55rem; border: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-weight: 700; }
.state-badge.draft { border-color: #d8bb78; background: var(--amber-soft); color: #6c4d08; }
.state-badge.live { border-color: #92aa9a; background: var(--green-soft); color: #194e32; }
.profile-facts { margin: 0 0 1.25rem; }
.profile-facts div { padding: .8rem 0; display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; border-bottom: 1px solid var(--line); }
.profile-facts dt { color: var(--muted); font-size: .82rem; }
.profile-facts dd { margin: 0; }
.business-switcher { margin-top: 1.5rem; }
.business-switcher > h2 { margin-bottom: .8rem; font-size: 1.15rem; }
.business-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.business-card.active { border-color: #547865; box-shadow: inset 0 0 0 1px #547865; }
.business-card h2 { font-size: 1.35rem; }
.business-card form { margin: 1rem 0 0; }
.status-line { color: var(--green); font-weight: 700; }
.empty-state { max-width: 44rem; }
.editor-shell { display: grid; gap: 1.25rem; }
.editor-heading { width: min(100%, 52rem); }
.editor-heading h1 { font-size: clamp(2.15rem, 5vw, 3.35rem); }
.form-panel { width: min(100%, 52rem); }
.form-panel form { margin: 0; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field-grid > div { margin-bottom: 1rem; }
.publication-panel { width: min(100%, 52rem); }
.publication-panel h2 { font-size: 1.5rem; }
.publication-panel > div > p:not(.eyebrow) { margin: .65rem 0 0; color: var(--muted); }
.action-row { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.action-row form { margin: 0; }
.publication-note { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

@media (max-width: 64rem) {
    .auth-shell { grid-template-columns: minmax(17rem, 36%) minmax(0, 1fr); }
    .auth-promise-title { font-size: clamp(2rem, 4.2vw, 3.2rem); }
}

@media (max-width: 54rem) {
    .app-shell { display: block; }
    .app-sidebar { display: none; }
    .app-topbar { min-height: 0; flex-wrap: wrap; }
    .app-topbar-context { width: 100%; justify-content: space-between; }
    .mobile-brand { display: inline-flex; }
    .app-topbar-actions { width: 100%; margin-left: 0; }
    .topbar-action.view-action { flex: 0 0 44px; width: 44px; padding-inline: 0; }
    .topbar-action.view-action .topbar-action-label { display: none; }
    .topbar-action.save-action, .topbar-publish-form { flex: 1 1 auto; }
    .topbar-publish-form .topbar-action { width: 100%; }
    .topbar-action.save-action svg, .topbar-action.publish-action svg { display: none; }
    .dashboard-actions .topbar-action.view-action { flex: 0 1 auto; width: auto; padding-inline: .72rem; }
    .dashboard-actions .topbar-action.view-action .topbar-action-label { display: inline; }
    .app-content { padding-bottom: 6.2rem; }
    .mobile-nav { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; min-height: 68px; padding: .35rem .45rem max(.35rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); background: var(--green-deep); color: #c8d0c9; }
    .mobile-nav a, .mobile-nav button { position: relative; min-height: 56px; padding: .3rem; display: grid; place-items: center; align-content: center; gap: .18rem; border: 0; background: transparent; color: inherit; font-size: .7rem; font-weight: 650; text-decoration: none; }
    .mobile-nav form { margin: 0; }
    .mobile-nav button { width: 100%; }
    .mobile-nav a.active { color: #fff; }
    .mobile-nav a.active::before { content: ""; position: absolute; top: -.35rem; width: 1.4rem; height: .18rem; background: var(--amber); }
    .mobile-nav svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
}

@media (min-width: 30rem) and (max-width: 54rem) {
    .app-topbar-actions .topbar-action.view-action { flex: 0 1 auto; width: auto; padding-inline: .72rem; }
    .app-topbar-actions .topbar-action.view-action .topbar-action-label { display: inline; }
}

@media (max-width: 48rem) {
    .auth-shell { display: block; }
    .auth-intro { position: relative; min-height: 0; padding: 1rem 1.25rem; }
    .auth-intro::after, .auth-promise, .auth-intro-note { display: none; }
    .auth-brand { font-size: 1rem; }
    .auth-brand img { width: 34px; height: 34px; }
    .auth-workspace { min-height: 0; padding: 1.75rem 1.25rem 2.5rem; }
    .page-heading { grid-template-columns: 1fr; }
    .account-chip { display: none; }
}

@media (max-width: 42.5rem) {
    .field-grid { grid-template-columns: 1fr; gap: 0; }
    .profile-facts div { grid-template-columns: 1fr; gap: .25rem; }
    .platform-state { max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 26.25rem) {
    .site-header { padding-inline: 1rem; }
    .site-header nav > a:first-child { display: none; }
    .auth-workspace { padding-inline: 1rem; }
    .registration-facts { display: grid; }
    .password-control input { padding-right: 3.5rem; }
    .app-content { padding-inline: .9rem; }
    .mobile-brand span { display: none; }
    .platform-state { max-width: 68vw; }
}

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

@media print {
    .app-sidebar, .app-topbar, .mobile-nav, .site-header, .skip-link { display: none !important; }
    .app-shell { display: block; }
    .app-content { max-width: none; padding: 0; }
    body { background: #fff; }
}