:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #06101d;
  --panel: rgba(12, 26, 44, 0.84);
  --panel-strong: #0d1c30;
  --line: rgba(156, 188, 224, 0.16);
  --muted: #91a4bd;
  --text: #f5f8fc;
  --blue: #409cff;
  --blue-deep: #4c5dff;
  --green: #5de3af;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 50% -10%, #122b4a 0, var(--bg) 45%); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ambient { position: fixed; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; }
.ambient-one { top: 15%; left: -20rem; background: #1478ff; }
.ambient-two { right: -20rem; bottom: -10rem; background: #5155ff; }
.app-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(5, 14, 25, .76); backdrop-filter: blur(18px); }
.header-inner, main, footer { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; position: relative; border: 1px solid rgba(76, 153, 255, .45); background: linear-gradient(145deg, rgba(54, 150, 255, .2), rgba(70, 81, 255, .1)); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.brand-mark span { font-size: 24px; font-weight: 900; transform: translateX(-3px); }
.brand-mark i { position: absolute; right: 6px; bottom: 5px; color: var(--blue); font-size: 14px; font-style: normal; font-weight: 900; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .04em; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 2px; }
main { display: grid; align-items: center; padding: 72px 0; }
footer { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }

.login-layout { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: clamp(48px, 8vw, 112px); }
.eyebrow { color: #75b8ff; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.login-copy h1 { margin: 20px 0 26px; max-width: 750px; font-size: clamp(46px, 6.2vw, 86px); line-height: .98; letter-spacing: -.055em; }
.login-copy h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg, #58afff, #6e7bff); background-clip: text; }
.login-copy > p { max-width: 640px; color: #a9b8cb; font-size: 18px; line-height: 1.72; }
.trust-row { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 38px; color: #c5d1e0; font-size: 13px; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { color: var(--green); }
.login-card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(28px, 4vw, 44px); background: linear-gradient(155deg, rgba(18, 38, 64, .94), rgba(8, 21, 37, .94)); box-shadow: 0 34px 90px rgba(0, 0, 0, .3); }
.card-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 28px; color: #77baff; border: 1px solid rgba(79, 157, 255, .32); border-radius: 15px; background: rgba(47, 124, 219, .12); }
.card-icon svg { width: 25px; height: 25px; }
.login-card h2 { margin: 12px 0; font-size: 28px; }
.login-card > p { color: var(--muted); line-height: 1.6; }
.primary-button { width: 100%; min-height: 54px; margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 11px; background: linear-gradient(105deg, #238cee, #4b5fff); box-shadow: 0 14px 34px rgba(40, 106, 255, .25); cursor: pointer; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(40, 106, 255, .34); }
.privacy-note { display: block; margin-top: 18px; color: #788ca6; font-size: 11px; line-height: 1.5; text-align: center; }
.notice { margin-top: 18px; padding: 12px 14px; border-radius: 9px; font-size: 13px; line-height: 1.5; }
.notice-error { color: #ffbdc5; border: 1px solid rgba(255, 102, 123, .25); background: rgba(154, 35, 52, .15); }

.status-view { min-height: 50vh; display: grid; place-content: center; justify-items: center; text-align: center; }
.status-view h1 { margin: 22px 0 8px; font-size: 28px; }
.status-view p { color: var(--muted); }
.loader { width: 44px; height: 44px; border: 3px solid rgba(84, 163, 255, .18); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dashboard { align-self: start; width: 100%; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.dashboard-heading h1 { margin: 12px 0 10px; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.045em; }
.dashboard-heading p { margin: 0; color: var(--muted); }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 56px 0 20px; }
.section-heading h2 { margin: 9px 0 0; font-size: 28px; }
.customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.customer-card { width: 100%; position: relative; overflow: hidden; padding: 26px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(15, 34, 56, .9), rgba(8, 21, 37, .9)); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.customer-card:hover { transform: translateY(-3px); border-color: rgba(80, 158, 255, .34); box-shadow: 0 20px 44px rgba(0, 0, 0, .2); }
.customer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(var(--blue), var(--blue-deep)); }
.customer-number { color: #6e9dce; font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.customer-main { display: flex; align-items: center; gap: 15px; margin: 22px 0 26px; }
.customer-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; color: #77baff; border-radius: 12px; background: rgba(62, 141, 238, .12); }
.customer-main h3 { margin: 0 0 4px; font-size: 20px; }
.customer-main p { margin: 0; color: var(--muted); font-size: 13px; }
.card-link { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 22px; color: #75b8ff; font-size: 12px; font-weight: 750; }
.card-link svg { width: 16px; height: 16px; }
.empty-state { min-height: 260px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; border: 1px dashed rgba(140, 176, 216, .24); border-radius: 16px; background: rgba(10, 24, 41, .44); }
.empty-state > svg { width: 38px; height: 38px; color: #6384a8; }
.empty-state h3 { margin: 20px 0 8px; }
.empty-state p { max-width: 460px; margin: 0; color: var(--muted); line-height: 1.6; }
.user-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip i { width: 34px; height: 34px; display: grid; place-items: center; color: #dcecff; font-size: 12px; font-style: normal; font-weight: 800; border: 1px solid rgba(86, 158, 255, .28); border-radius: 10px; background: rgba(47, 126, 226, .13); }
.user-chip span, .user-chip small { display: block; }
.user-chip span { font-size: 12px; font-weight: 700; }
.user-chip small { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .1em; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: #a9bad0; border: 1px solid var(--line); border-radius: 10px; background: rgba(11, 25, 43, .7); cursor: pointer; }
.icon-button:hover { color: white; border-color: rgba(96, 165, 255, .35); }
.back-button { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; padding: 0; color: var(--muted); border: 0; background: none; cursor: pointer; font-weight: 650; }
.back-button:hover { color: var(--text); }
.detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.detail-hero h1 { margin: 12px 0 10px; font-size: clamp(38px, 5vw, 60px); letter-spacing: -.045em; }
.detail-hero p { margin: 0; color: var(--muted); }
.count-badge { min-width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: #8cc5ff; background: rgba(40, 112, 197, .1); font-weight: 750; }
.project-grid { display: grid; gap: 14px; }
.project-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12, 27, 46, .72); }
.project-icon { width: 46px; height: 46px; display: grid; place-items: center; color: #75b8ff; border-radius: 12px; background: rgba(47, 126, 226, .13); }
.project-content { min-width: 0; }
.project-content h3 { max-width: 100%; margin: 7px 0 6px; overflow-wrap: anywhere; word-break: break-word; font-size: 19px; }
.project-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.project-next-step { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.project-next-step span,.project-next-step strong { display: block; }
.project-next-step span { color: #75b8ff; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.project-next-step strong { margin-top: 5px; color: #dce9f8; font-size: 12px; line-height: 1.45; }
.project-card dl { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 22px; margin: 0; }
.project-card dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.project-card dd { margin: 0; font-size: 13px; white-space: nowrap; }
.project-open-button { display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:0; color:#78bbff; border:0; background:none; cursor:pointer; font-size:11px; font-weight:800; }
.project-open-button:hover { color:#fff; }
.project-open-button svg { width:15px; height:15px; }
.project-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:32px; margin-bottom:18px; padding:30px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,rgba(18,43,74,.92),rgba(8,23,41,.72)); }
.project-detail-hero > div:first-child { min-width:0; }
.project-detail-hero h1 { max-width:100%; margin:10px 0; overflow-wrap:anywhere; word-break:break-word; font-size:clamp(38px,5vw,62px); letter-spacing:-.05em; }
.project-detail-hero p { max-width:760px; margin:0; color:#aebfd2; line-height:1.7; }
.project-state { min-width:260px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.project-state span { min-height:82px; display:flex; flex-direction:column; justify-content:center; padding:14px; color:#7289a4; border:1px solid rgba(111,161,217,.14); border-radius:11px; background:rgba(5,16,29,.38); font-size:9px; letter-spacing:.11em; text-transform:uppercase; }
.project-state strong { margin-top:7px; color:#edf6ff; font-size:13px; letter-spacing:0; text-transform:none; }
.project-progress-panel { display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:28px; margin-bottom:16px; padding:23px 26px; border:1px solid var(--line); border-radius:14px; background:rgba(12,27,46,.72); }
.project-progress-panel > div:first-child { display:grid; grid-template-columns:1fr auto; align-items:end; gap:5px 14px; }
.project-progress-panel .eyebrow { grid-column:1/-1; }
.project-progress-panel strong { color:#75b8ff; font-size:30px; }
.project-progress-panel small { color:var(--muted); font-size:10px; text-align:right; }
.progress-bar { height:9px; overflow:hidden; border-radius:999px; background:rgba(86,129,178,.16); }
.progress-bar i { height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#2c8ff2,#5de3b4); box-shadow:0 0 18px rgba(70,163,245,.42); }
.next-step-panel { padding:22px 25px; border:1px solid rgba(91,164,255,.2); border-radius:14px; background:rgba(40,112,197,.09); }
.next-step-panel p { margin:10px 0 0; color:#d9e9fa; line-height:1.65; }
.project-workspace .section-heading { margin-top:38px; }
.portal-milestone-list { display:grid; gap:11px; }
.portal-milestone { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; padding:20px 22px; border:1px solid var(--line); border-left:3px solid #73869c; border-radius:13px; background:rgba(12,27,46,.72); }
.portal-milestone.status-in_progress { border-left-color:#54a8ff; }
.portal-milestone.status-done { border-left-color:#5de3b4; }
.milestone-index { padding-top:2px; color:#6f89a6; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; letter-spacing:.1em; }
.portal-milestone header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.portal-milestone header strong { font-size:15px; }
.portal-milestone header span { color:#83c2ff; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.portal-milestone p { margin:10px 0 0; color:#afc1d5; font-size:12px; line-height:1.6; white-space:pre-wrap; }
.portal-milestone small { display:block; margin-top:9px; color:#748da9; font-size:9px; }
.portal-timeline { position:relative; display:grid; }
.portal-timeline::before { content:""; position:absolute; top:17px; bottom:17px; left:7px; width:1px; background:linear-gradient(#4ca3ff,rgba(83,148,218,.12)); }
.portal-timeline > article { position:relative; display:grid; grid-template-columns:15px minmax(0,1fr); gap:17px; padding-bottom:17px; }
.portal-timeline > article:last-child { padding-bottom:0; }
.portal-timeline .timeline-dot { z-index:1; width:15px; height:15px; margin-top:3px; border:4px solid #081726; border-radius:50%; background:#59adff; box-shadow:0 0 0 1px rgba(91,170,255,.35); }
.portal-timeline article > div { padding:19px 21px; border:1px solid var(--line); border-radius:13px; background:rgba(12,27,46,.72); }
.portal-timeline header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:11px; }
.portal-timeline header span { color:#76baff; font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.portal-timeline time { color:#748ba5; font-size:9px; }
.portal-timeline strong { display:block; font-size:15px; }
.portal-timeline p { margin:9px 0 0; color:#afc1d5; font-size:12px; line-height:1.65; white-space:pre-wrap; }
.empty-state.compact { min-height: 220px; }
.secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; color: #cfe5ff; border: 1px solid rgba(91, 164, 255, .3); border-radius: 10px; background: rgba(40, 112, 197, .11); cursor: pointer; font-weight: 700; }
.secondary-button:hover { border-color: rgba(91, 164, 255, .52); background: rgba(40, 112, 197, .19); }
.secondary-button svg { width: 17px; height: 17px; }
.request-list { display: grid; gap: 12px; }
.request-card { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; color: inherit; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 27, 46, .72); cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.request-card:hover { transform: translateY(-2px); border-color: rgba(91, 164, 255, .4); }
.request-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #75b8ff; border-radius: 11px; background: rgba(47, 126, 226, .13); }
.request-copy { min-width: 0; display: grid; gap: 5px; }
.request-copy small { color: #75b8ff; font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.request-copy strong { overflow: hidden; text-overflow: ellipsis; font-size: 16px; white-space: nowrap; }
.request-copy em { color: var(--muted); font-size: 11px; font-style: normal; }
.request-status { padding: 7px 10px; color: #acd2fa; border: 1px solid var(--line); border-radius: 999px; background: rgba(37, 88, 145, .12); font-size: 10px; font-weight: 750; white-space: nowrap; }
.status-new { color: #9ed0ff; }
.status-waiting_customer { color: #ffd68e; border-color: rgba(255, 190, 80, .2); }
.status-resolved { color: #8ce8c4; border-color: rgba(93, 227, 175, .2); }
.status-closed { color: #9daec3; opacity: .75; }
.portal-dialog { width: min(720px, calc(100% - 28px)); max-height: min(88vh, 850px); padding: 0; color: var(--text); border: 1px solid rgba(128, 178, 235, .24); border-radius: 18px; background: #0b1b2e; box-shadow: 0 40px 100px rgba(0, 0, 0, .55); overflow: auto; }
.portal-dialog::backdrop { background: rgba(1, 7, 14, .78); backdrop-filter: blur(7px); }
.dialog-panel { padding: 28px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin: 9px 0 7px; font-size: 26px; }
.dialog-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.request-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding-top: 23px; }
.request-form label, .reply-form label { display: grid; gap: 8px; color: #bbcaDC; font-size: 12px; font-weight: 650; }
.request-form .wide { grid-column: 1 / -1; }
.request-form input, .request-form select, .request-form textarea, .reply-form textarea { width: 100%; color: var(--text); border: 1px solid rgba(143, 180, 222, .2); border-radius: 10px; outline: none; background: #071522; }
.request-form input, .request-form select { height: 46px; padding: 0 13px; }
.request-form textarea, .reply-form textarea { padding: 13px; resize: vertical; line-height: 1.55; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus, .reply-form textarea:focus { border-color: rgba(82, 163, 255, .65); box-shadow: 0 0 0 3px rgba(55, 134, 230, .1); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.compact-button { width: auto; min-height: 44px; margin: 0; padding: 0 18px; }
.form-error, .closed-notice { padding: 11px 13px; color: #ffbdc5; border: 1px solid rgba(255, 102, 123, .25); border-radius: 9px; background: rgba(154, 35, 52, .15); font-size: 12px; }
.message-thread { display: grid; gap: 12px; max-height: 44vh; margin: 22px 0; overflow-y: auto; }
.message { max-width: 88%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(27, 58, 94, .25); }
.message.from-customer { margin-left: auto; border-bottom-right-radius: 4px; background: rgba(41, 111, 201, .18); }
.message.from-florevision { border-bottom-left-radius: 4px; }
.message header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.message header strong { font-size: 12px; }
.message time { color: var(--muted); font-size: 10px; }
.message p { margin: 9px 0 0; color: #d8e4f3; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.reply-form { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.reply-form .compact-button { justify-self: end; }

@media (max-width: 820px) {
  .login-layout { grid-template-columns: 1fr; gap: 48px; }
  .login-copy h1 { font-size: clamp(42px, 12vw, 68px); }
  .customer-grid { grid-template-columns: 1fr; }
  .dashboard-heading { align-items: flex-start; flex-direction: column; }
  .project-card { grid-template-columns: auto minmax(0, 1fr); }
  .project-card dl { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
  .project-detail-hero { grid-template-columns: 1fr; }
  .project-state { min-width:0; }
  .project-progress-panel { grid-template-columns:1fr; }
  .request-form { grid-template-columns: 1fr; }
  .request-form .wide { grid-column: auto; }
}

@media (max-width: 560px) {
  .header-inner, main, footer { width: min(100% - 28px, 1160px); }
  .header-inner { min-height: 72px; }
  main { padding: 48px 0; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 18px 0; }
  .brand small { display: none; }
  .login-copy > p { font-size: 16px; }
  .trust-row { align-items: flex-start; flex-direction: column; margin-top: 28px; }
  .login-card { padding: 25px 20px; border-radius: 16px; }
  .user-chip > span { display: none; }
  .detail-hero { align-items: flex-start; flex-direction: column; }
  .project-card { grid-template-columns: 1fr; padding: 20px; }
  .project-card dl { grid-column: auto; grid-template-columns: 1fr; }
  .project-detail-hero { padding:22px 19px; }
  .project-detail-hero h1 { font-size:clamp(30px,10vw,42px); line-height:1.08; }
  .project-state { grid-template-columns:1fr; }
  .project-progress-panel { padding:21px 18px; }
  .project-progress-panel > div:first-child { grid-template-columns:1fr; }
  .project-progress-panel small { text-align:left; }
  .portal-milestone { padding:18px 16px; }
  .portal-milestone header,.portal-timeline header { align-items:flex-start; flex-direction:column; gap:7px; }
  .section-heading { align-items: flex-start; gap: 14px; }
  .section-heading .secondary-button { flex: 0 0 auto; }
  .request-card { grid-template-columns: auto minmax(0, 1fr); }
  .request-status { grid-column: 2; justify-self: start; }
  .dialog-panel { padding: 22px 17px; }
  .dialog-heading h2 { font-size: 22px; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions button, .reply-form .compact-button { width: 100%; }
  .message { max-width: 96%; }
}

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

/* Markenbrücke zwischen florevision.de und dem Kundenportal */
:root {
  --bg:#0c0f14;
  --panel:#11161e;
  --panel-strong:#1a202a;
  --line:rgba(226,233,240,.14);
  --muted:#a2acb8;
  --text:#f2f5f7;
  --blue:#82a8ff;
  --blue-deep:#3566c4;
}

body {
  background:radial-gradient(circle at 12% 0%,rgba(69,105,178,.14),transparent 34rem),linear-gradient(180deg,#0e1218 0%,var(--bg) 46%);
}

.site-header { background:rgba(12,15,20,.9); backdrop-filter:blur(16px); }
.header-inner,main,footer { width:min(1240px,calc(100% - 56px)); }
.brand { gap:13px; }
.brand-mark { width:48px; height:48px; flex:0 0 48px; border:0; background:none; clip-path:none; }
.brand-mark img { width:100%; height:100%; display:block; object-fit:contain; }
.brand > span:last-child { display:grid; font-size:14px; font-weight:900; line-height:1; text-transform:uppercase; }
.brand strong { font-size:inherit; letter-spacing:0; }
.brand small { margin-top:6px; color:var(--muted); font-size:8px; letter-spacing:.14em; }
.portal-public-nav { display:flex; align-items:center; gap:22px; }
.portal-public-nav > span { color:#7f8b99; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.portal-public-nav a { min-height:38px; display:inline-flex; align-items:center; gap:8px; padding:0 14px; border:1px solid var(--line); color:#dce5ef; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.portal-public-nav a:hover { color:#fff; border-color:rgba(130,168,255,.5); background:#141922; }
.portal-public-nav svg { width:15px; height:15px; }
footer a { color:#aab6c3; text-decoration:none; }
footer a:hover { color:#fff; }

.login-layout { min-height:570px; position:relative; grid-template-columns:minmax(0,1.22fr) minmax(340px,.68fr); gap:clamp(54px,8vw,120px); }
.login-layout::before { content:"FLOREVISION / KUNDENPORTAL"; position:absolute; top:14px; left:0; color:#73808e; font-size:9px; font-weight:800; letter-spacing:.18em; }
.login-copy { padding-left:28px; border-left:2px solid #3566c4; }
.login-copy h1 { max-width:720px; margin:18px 0 24px; font-size:clamp(48px,6vw,82px); }
.login-copy h1 em { color:#82a8ff; background:none; }
.login-copy > p { max-width:620px; color:#a2acb8; }
.trust-row { color:#c9d1da; }
.trust-row svg { color:#82a8ff; }
.login-card { position:relative; overflow:hidden; border-color:var(--line); border-radius:2px; background:#11161e; box-shadow:18px 18px 0 rgba(26,32,42,.52); }
.login-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#3566c4,#82a8ff); }
.card-icon { width:48px; height:48px; border-color:rgba(130,168,255,.28); border-radius:2px; background:#1a202a; }
.primary-button { border-radius:2px; background:#3566c4; box-shadow:none; text-transform:uppercase; letter-spacing:.04em; }
.primary-button:hover { background:#4778d1; box-shadow:none; }
.privacy-note { color:#84909d; }

@media (max-width:820px) {
  .header-inner,main,footer { width:min(100% - 36px,1240px); }
  .login-layout { min-height:auto; grid-template-columns:1fr; gap:42px; padding-top:54px; }
  .login-layout::before { top:0; }
  .login-copy { padding-left:20px; }
  .login-card { box-shadow:10px 10px 0 rgba(26,32,42,.52); }
  .portal-public-nav > span { display:none; }
}

@media (max-width:560px) {
  .header-inner,main,footer { width:min(100% - 28px,1240px); }
  .brand-mark { width:42px; height:42px; flex-basis:42px; }
  .brand small { display:block; max-width:142px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .portal-public-nav a { width:40px; min-height:40px; justify-content:center; padding:0; font-size:0; }
  .login-copy { padding-left:16px; }
  .login-card { padding:25px 20px; border-radius:2px; }
}

/* Klare Informationshierarchie im angemeldeten Kundenportal */
.dashboard { max-width:1080px; margin:0 auto; }
.dashboard-heading { max-width:760px; margin-bottom:26px; }
.dashboard-heading h1 { font-size:clamp(36px,4.5vw,54px); }
.dashboard-heading p { max-width:650px; font-size:15px; line-height:1.65; }
.dashboard-section-heading { margin-top:30px; }
.section-heading { margin-top:46px; }
.section-heading.first-content-section { margin-top:32px; }

.customer-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.customer-card { min-height:220px; display:flex; flex-direction:column; padding:28px; }
.customer-main { margin:22px 0 12px; }
.customer-main h3 { overflow-wrap:anywhere; font-size:23px; }
.customer-card .card-link { margin-top:auto; padding-top:24px; justify-content:flex-start; }

.detail-hero { align-items:flex-start; margin-bottom:24px; padding-bottom:26px; }
.detail-hero h1 { max-width:850px; overflow-wrap:anywhere; font-size:clamp(34px,4.6vw,54px); line-height:1.04; }
.detail-hero p { font-size:15px; line-height:1.6; }
.overview-strip { display:grid; grid-template-columns:180px 180px minmax(220px,1fr); gap:12px; align-items:stretch; }
.overview-stat,.overview-action { min-height:92px; border:1px solid var(--line); border-radius:14px; background:rgba(12,27,46,.72); }
.overview-stat { display:flex; flex-direction:column; justify-content:center; padding:18px 20px; }
.overview-stat span { color:var(--muted); font-size:11px; }
.overview-stat strong { margin-top:6px; color:#f4f8fc; font-size:26px; }
.overview-action { justify-self:stretch; align-self:stretch; font-size:14px; }

.project-card { align-items:start; padding:26px; }
.project-card dl { align-self:center; }
.project-content h3 { font-size:21px; }
.project-open-button { margin-top:18px; font-size:12px; }

.project-detail-hero { align-items:center; padding:28px; }
.project-detail-hero h1 { font-size:clamp(34px,4.8vw,56px); }
.customer-main h3,.detail-hero h1,.project-content h3,.project-detail-hero h1 { hyphens:auto; word-break:normal; }
.project-overview-grid { display:grid; gap:14px; margin-top:14px; }
.project-overview-grid.has-two-panels { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.project-overview-grid .project-progress-panel { grid-template-columns:1fr; gap:18px; margin:0; }
.project-overview-grid .project-progress-panel > div:first-child { grid-template-columns:1fr auto; }
.project-overview-grid .next-step-panel { display:flex; flex-direction:column; justify-content:center; min-height:150px; padding:26px; }
.next-step-panel h2 { max-width:620px; margin:12px 0 0; color:#edf6ff; font-size:clamp(20px,2.4vw,28px); line-height:1.35; }
.project-workspace .section-heading.first-content-section { margin-top:42px; }

.request-card { padding:18px 20px; }
.request-copy em { line-height:1.45; }

@media (max-width:820px) {
  .overview-strip { grid-template-columns:1fr 1fr; }
  .overview-action { grid-column:1/-1; min-height:54px; }
  .project-overview-grid.has-two-panels { grid-template-columns:1fr; }
}

@media (max-width:560px) {
  main { padding:38px 0 48px; }
  .dashboard-heading { margin-bottom:22px; }
  .dashboard-heading h1 { margin-top:9px; font-size:clamp(32px,10vw,42px); }
  .dashboard-section-heading,.section-heading.first-content-section { margin-top:26px; }
  .section-heading { margin-top:38px; }
  .section-heading h2 { font-size:24px; }
  .customer-card { min-height:190px; padding:22px 20px; }
  .customer-main { align-items:flex-start; margin:18px 0 8px; }
  .customer-main h3 { font-size:20px; }
  .detail-hero { margin-bottom:18px; padding-bottom:20px; }
  .detail-hero h1 { font-size:clamp(31px,10vw,40px); }
  .overview-strip { grid-template-columns:1fr 1fr; gap:9px; }
  .overview-stat { min-height:78px; padding:14px 15px; }
  .overview-stat strong { font-size:22px; }
  .overview-action { min-height:50px; }
  .project-card { padding:20px 18px; }
  .project-detail-hero { padding:22px 18px; }
  .project-overview-grid .next-step-panel,.project-overview-grid .project-progress-panel { min-height:0; padding:21px 18px; }
  .request-card { padding:17px 15px; }
}