:root {
  --ink: #1c2731;
  --muted: #68747e;
  --brand: #263746;
  --accent: #6b747c;
  --surface: #ffffff;
  --soft: #f1f3f4;
  --line: #d9dee2;
  --radius: 14px;
  font-family: "Noto Sans", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f7f8f9; padding-bottom: 76px; }
a { color: inherit; text-decoration: none; }
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: var(--brand); color: white; }
.brand { font-weight: 800; letter-spacing: .01em; }
.user { font-size: .85rem; opacity: .8; }
.container { width: min(1050px, 100%); margin: 0 auto; padding: 24px 18px 40px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.25rem); letter-spacing: -.035em; }
h2 { margin: 0; font-size: 1.1rem; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 15px; border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.button.primary { color: white; background: var(--brand); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.metrics article { display: flex; flex-direction: column; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.metrics strong { font-size: 1.8rem; }
.metrics span { color: var(--muted); font-size: .85rem; }
.quick-links { display: flex; flex-wrap: wrap; gap: 9px; margin: -8px 0 20px; }
.quick-links a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .82rem; font-weight: 700; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.import-note { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 18px; padding: 14px 16px; border-left: 4px solid var(--brand); border-radius: 8px; background: #eaf0f4; }
.import-note span { color: var(--muted); font-size: .9rem; }
.form-error { margin: 0 0 16px; padding: 11px; border-radius: 8px; background: #fbe9e9; }
.assessment { margin-bottom: 16px; }
.assessment-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.fit-score { flex: 0 0 auto; font-size: 2rem; font-weight: 850; color: var(--brand); }
.fit-score small { font-size: .75rem; color: var(--muted); }
.dimension-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; margin-bottom: 22px; }
.dimension { display: grid; gap: 5px; }
.dimension span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.dimension div { height: 7px; overflow: hidden; border-radius: 99px; background: var(--soft); }
.dimension i { display: block; height: 100%; border-radius: inherit; background: #607786; }
.assessment-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.assessment h3 { margin: 0 0 9px; font-size: .92rem; }
.finding { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; padding: 10px 11px; border-radius: 9px; }
.finding span { color: var(--muted); font-size: .84rem; }
.finding.positive { background: #edf5f0; }
.finding.risk { background: #fff4dc; }
details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
summary { cursor: pointer; font-weight: 750; }
details li { margin-bottom: 7px; }
.suggestion-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.suggestion-groups p { margin: 0 0 9px; font-size: .84rem; }
.suggestion-groups p small { display: block; color: var(--muted); margin-top: 2px; }
.inline-action { display: flex; justify-content: flex-end; margin-top: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-heading a { color: var(--muted); font-size: .9rem; }
.list-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.list-card:last-child { border-bottom: 0; }
.list-card div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.list-card strong, .list-card span { overflow-wrap: anywhere; }
.list-card small { color: var(--muted); }
.list-card div > span { color: var(--muted); font-size: .92rem; }
.badge, .level { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: var(--brand); background: var(--soft); font-size: .74rem; font-weight: 700; }
.badge.success { color: #17623a; background: #e2f4e9; }
.badge.warning { color: #805a10; background: #fff0c8; }
.case-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.case-summary div { display: flex; flex-direction: column; gap: 4px; }
.case-summary span, .build-card span { color: var(--muted); font-size: .82rem; }
.generate-box { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.generate-box small { color: var(--muted); }
.build-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.build-card:last-child { border-bottom: 0; }
.build-card > div:first-child { display: flex; flex-direction: column; }
.file-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.file-links a { color: #244e72; font-size: .88rem; font-weight: 700; }
.empty { color: var(--muted); }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-size: .86rem; font-weight: 750; }
.form-control { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #b9c1c7; border-radius: 9px; background: white; font: inherit; }
textarea.form-control { min-height: 110px; resize: vertical; }
ul.form-control { height: auto; list-style: none; margin: 0; }
ul.form-control label { display: flex; gap: 9px; padding: 6px 0; font-weight: 500; }
.error { color: #9a2c2c; margin: 0; font-size: .82rem; }
.sticky-actions { position: sticky; bottom: 82px; display: flex; justify-content: flex-end; padding-top: 12px; }
.bottom-nav { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; overflow-x: auto; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
.bottom-nav a { padding: 9px 12px; color: var(--muted); font-size: .78rem; font-weight: 700; }
@media (max-width: 700px) {
  .container { padding: 20px 14px 32px; }
  .page-heading { align-items: flex-start; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics article { padding: 14px; }
  .bottom-nav { justify-content: flex-start; }
  .bottom-nav a { padding-inline: 6px; }
  .panel { padding: 14px; }
  .list-card { align-items: flex-start; }
  .case-summary { grid-template-columns: repeat(2, 1fr); }
  .generate-box { align-items: stretch; flex-direction: column; }
  .assessment-columns, .dimension-grid, .suggestion-groups { grid-template-columns: 1fr; }
}
/* Mehrbenutzer-Anmeldung und portabler Katalogexport */
.account-menu{display:flex;align-items:center;gap:.8rem}.account-menu form{margin:0}.account-menu button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;font-size:.78rem}.auth-page{min-height:100vh;display:grid;place-items:center;padding:1.25rem;background:linear-gradient(145deg,#e8eef2,#f7f9fa)}.auth-card{width:min(100%,440px);padding:2rem;background:#fff;border:1px solid #dbe2e7;border-radius:14px;box-shadow:0 18px 50px rgba(35,51,65,.12)}.auth-card h1{margin:.35rem 0 .5rem}.auth-card>p{color:#667784;line-height:1.5}.auth-card form{display:grid;gap:1rem;margin-top:1.4rem}.auth-switch{margin:1.25rem 0 0!important;font-size:.9rem}.export-panel{max-width:820px}.export-panel>p{color:#667784;line-height:1.55}.export-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.25rem 0}.export-counts span{padding:1rem;border-radius:9px;background:#f2f5f7;color:#60717d}.export-counts strong{display:block;color:#263746;font-size:1.35rem}.export-panel li{margin:.65rem 0;line-height:1.45}
@media(max-width:640px){.account-menu .user{display:none}.export-counts{grid-template-columns:1fr}.auth-card{padding:1.4rem}}

/* Öffentliche Erklärung und LLM-Einrichtung */
.landing-page{padding:0;background:#f7f8f9}.public-header{display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,calc((100vw - 1120px)/2));background:var(--brand);color:#fff}.public-header nav,.hero-actions,.prompt-actions{display:flex;align-items:center;gap:12px}.public-header nav>a:not(.button){font-weight:700}.button.light{background:#fff;color:var(--brand)}.button.ghost{border:1px solid var(--line);background:#fff;color:var(--brand)}.hero{padding:clamp(70px,10vw,130px) max(24px,calc((100vw - 1120px)/2));background:radial-gradient(circle at 85% 20%,#d7e2e8 0,transparent 35%),linear-gradient(145deg,#f8fafb,#e9eef1)}.hero h1{max-width:850px;font-size:clamp(2.6rem,7vw,5.5rem);line-height:.98}.hero .lead{max-width:760px;margin:28px 0;color:#51616d;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.65}.landing-section{max-width:1120px;margin:0 auto;padding:80px 24px}.landing-section>h2,.split-section h2{font-size:clamp(1.8rem,4vw,3rem);max-width:720px}.step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}.step-grid article{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.step-grid article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800}.step-grid h3{margin:20px 0 8px}.step-grid p,.split-section p{color:var(--muted);line-height:1.6}.split-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line)}.privacy-strip{display:flex;gap:24px;justify-content:center;padding:30px 24px;background:var(--brand);color:#fff}.privacy-strip span{max-width:700px;opacity:.8}.setup-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;padding:18px;border:1px solid #c7d7e0;border-radius:var(--radius);background:#eaf1f5}.setup-banner div{display:flex;flex-direction:column;gap:4px}.setup-banner span,.onboarding-intro>p,.import-panel>p,.update-note>p{color:var(--muted);line-height:1.55}.onboarding-intro,.import-panel,.update-note,.update-export{margin-bottom:18px}.onboarding-intro h2,.import-panel h2,.update-note h2,.update-export h2{margin-bottom:10px}.privacy-note{padding:12px;border-left:4px solid var(--brand);background:var(--soft)}.prompt-actions{margin:18px 0 12px}.prompt-box{width:100%;height:320px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#f7f8f9;color:#374651;font:13px/1.55 Consolas,monospace;resize:vertical}.update-export{margin-top:18px}.update-export .prompt-box{height:240px}
@media(max-width:900px){.step-grid{grid-template-columns:repeat(2,1fr)}.split-section{grid-template-columns:1fr;gap:18px}}
@media(max-width:600px){.public-header{padding:14px}.public-header nav{gap:8px}.hero{padding:60px 18px}.landing-section{padding:55px 18px}.step-grid{grid-template-columns:1fr}.privacy-strip,.setup-banner{align-items:stretch;flex-direction:column}.hero-actions,.prompt-actions{align-items:stretch;flex-direction:column}.hero-actions .button,.prompt-actions .button{width:100%}}