/*
 * Kunden-Portal — Stylesheet
 * Datei:   assets/css/portal.css
 * Version: 2.2.0
 * Package: nexxus-cinematic
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
	--p-bg:        #070D0D;
	--p-surface:   #0E1C1A;
	--p-border:    rgba(255,255,255,.08);
	--p-text:      #EDE9E1;
	--p-muted:     rgba(237,233,225,.55);
	--p-gold:      #D9A441;
	--p-gold-dim:  rgba(217,164,65,.18);
	--p-green:     #27C93F;
	--p-radius:    14px;
	--p-gutter:    clamp(1rem,4vw,2.5rem);
	--p-max:       860px;
	--p-font-mono: "PlexMono","Courier New",monospace;
	--p-font-sans: "Archivo","Arial",sans-serif;
}

/* ── Reset (scope: .portal-page body only) ───────────────────────────── */
.portal-page *,
.portal-page *::before,
.portal-page *::after{ box-sizing:border-box }

.portal-page{
	margin:0;
	background:var(--p-bg);
	color:var(--p-text);
	font-family:var(--p-font-sans);
	font-size:1rem;
	line-height:1.65;
	min-height:100vh;
}

/* Remove main theme chrome that gets injected via header.php */
.portal-page .head,
.portal-page .mask,
.portal-page .prog,
.portal-page .atmo,
.portal-page .wa-btn{ display:none!important }

/* ── Background grain ────────────────────────────────────────────────── */
.portal-bg{
	position:fixed;inset:0;z-index:0;pointer-events:none;
	background:
		radial-gradient(ellipse 70% 50% at 20% 80%, rgba(39,201,63,.04) 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(217,164,65,.05) 0%, transparent 60%);
}

/* ── Main ────────────────────────────────────────────────────────────── */
.portal{
	position:relative;z-index:1;
	padding:var(--p-gutter) var(--p-gutter) calc(var(--p-gutter) * 2);
}

/* ── Shared skip link ────────────────────────────────────────────────── */
.portal-page .skip{
	position:absolute;top:-100%;left:var(--p-gutter);
	background:var(--p-gold);color:#070D0D;padding:.4rem .9rem;border-radius:4px;
	font-weight:700;font-size:.85rem;z-index:100;
}
.portal-page .skip:focus{ top:var(--p-gutter) }

/* =========================================================================
 * DASHBOARD
 * ====================================================================== */

/* Outer wrapper ─────────────────────────────────────────────────────── */
.portal__wrap{
	max-width:var(--p-max);
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:1.5rem;
}

/* Header ────────────────────────────────────────────────────────────── */
.portal__head{
	display:flex;
	align-items:flex-start;
	gap:1.5rem;
	padding:1.5rem var(--p-gutter);
	border-bottom:1px solid var(--p-border);
	flex-wrap:wrap;
}

.portal__brand img,
.portal__brand svg{ height:36px;width:auto;display:block }

.portal__brand-text{
	font-size:1.15rem;font-weight:700;color:var(--p-text);
	text-decoration:none;letter-spacing:-.02em;
}

.portal__head-meta{ flex:1;min-width:0 }

.portal__eyebrow{
	margin:0 0 .2rem;
	font-size:.72rem;font-family:var(--p-font-mono);
	letter-spacing:.12em;text-transform:uppercase;
	color:var(--p-gold);
}

.portal__title{
	margin:0 0 .15rem;
	font-size:clamp(1.4rem,3vw,2rem);
	font-weight:700;line-height:1.2;
	letter-spacing:-.03em;
}

.portal__project-name{
	margin:0;color:var(--p-muted);font-size:.85rem;
}

/* Card ──────────────────────────────────────────────────────────────── */
.portal__card{
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	padding:clamp(1.2rem,3vw,1.8rem);
}

.portal__card-title{
	margin:0 0 1rem;
	font-size:1rem;font-weight:600;
	letter-spacing:-.01em;
	color:var(--p-text);
}

.portal__card-note{
	margin:-.5rem 0 1.25rem;
	color:var(--p-muted);
	font-size:.9rem;
}

/* Progress bar ──────────────────────────────────────────────────────── */
.portal__progress-row{
	display:flex;
	align-items:center;
	gap:1rem;
	margin-bottom:1.4rem;
}

.portal__progress-track{
	flex:1;
	height:10px;
	background:rgba(255,255,255,.08);
	border-radius:99px;
	overflow:hidden;
}

.portal__progress-fill{
	height:100%;
	width:var(--p,0%);
	background:linear-gradient(90deg,var(--p-gold) 0%,var(--p-green) 100%);
	border-radius:99px;
	transition:width 1.2s cubic-bezier(.2,.8,.2,1);
	will-change:width;
}

.portal__progress-pct{
	flex:none;
	font-family:var(--p-font-mono);
	font-size:.85rem;
	color:var(--p-gold);
	min-width:3.5ch;
	text-align:right;
}

/* Milestones ────────────────────────────────────────────────────────── */
.portal__milestones{
	display:flex;
	gap:.5rem;
	flex-wrap:wrap;
}

.portal__ms{
	display:flex;
	align-items:center;
	gap:.4rem;
	padding:.35rem .75rem;
	border:1px solid var(--p-border);
	border-radius:99px;
	font-size:.78rem;
	color:var(--p-muted);
	transition:background .2s,border-color .2s,color .2s;
}

.portal__ms-icon{ font-size:.85em;line-height:1 }

.portal__ms--done{
	border-color:rgba(39,201,63,.25);
	color:rgba(39,201,63,.7);
}

.portal__ms--active{
	background:var(--p-gold-dim);
	border-color:var(--p-gold);
	color:var(--p-gold);
	font-weight:600;
}

/* Status-Nachricht ──────────────────────────────────────────────────── */
.portal__status-msg{
	display:flex;
	align-items:flex-start;
	gap:.75rem;
	margin-top:1.25rem;
	padding:1rem 1.1rem;
	background:rgba(217,164,65,.07);
	border:1px solid var(--p-gold-dim);
	border-radius:10px;
	font-size:.9rem;
	line-height:1.55;
}

.portal__status-msg svg{
	width:18px;height:18px;flex:none;
	stroke:var(--p-gold);margin-top:.1rem;
}

.portal__status-msg p{ margin:0 }

/* Downloads ─────────────────────────────────────────────────────────── */
.portal__dl-list{
	list-style:none;margin:0;padding:0;
	display:flex;flex-direction:column;gap:.5rem;
}

.portal__dl-item{}

.portal__dl-link{
	display:flex;align-items:center;gap:.85rem;
	padding:.75rem 1rem;
	border:1px solid var(--p-border);
	border-radius:10px;
	color:var(--p-text);
	text-decoration:none;
	transition:background .18s,border-color .18s;
}

.portal__dl-link:hover,
.portal__dl-link:focus-visible{
	background:rgba(255,255,255,.04);
	border-color:rgba(255,255,255,.18);
	outline:none;
}

.portal__dl-ico{
	width:20px;height:20px;flex:none;
	stroke:var(--p-gold);
}

.portal__dl-name{ display:block;font-weight:600;font-size:.9rem }
.portal__dl-date{ display:block;font-size:.78rem;color:var(--p-muted);font-family:var(--p-font-mono) }

/* =========================================================================
 * TICKET-FORMULAR
 * ====================================================================== */

.portal__form{ margin-top:.25rem }

.pf-row{ display:grid;gap:1rem;margin-bottom:1rem }
.pf-row--2{ grid-template-columns:1fr 1fr }
@media(max-width:540px){ .pf-row--2{ grid-template-columns:1fr } }

.pf-field{ display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem }
.pf-field:last-child{ margin-bottom:0 }

.pf-label{
	font-size:.82rem;font-weight:600;letter-spacing:.03em;
	color:var(--p-muted);
	text-transform:uppercase;
}

.pf-req{ color:var(--p-gold) }

.pf-input{
	background:rgba(255,255,255,.04);
	border:1px solid var(--p-border);
	border-radius:8px;
	color:var(--p-text);
	font-size:.95rem;
	font-family:var(--p-font-sans);
	padding:.65rem .9rem;
	transition:border-color .18s,background .18s;
	width:100%;
	-webkit-appearance:none;
	appearance:none;
}

.pf-input:focus{
	outline:none;
	border-color:var(--p-gold);
	background:rgba(217,164,65,.06);
}

.pf-input::placeholder{ color:rgba(237,233,225,.28) }

.pf-textarea{ resize:vertical;min-height:120px;line-height:1.6 }

/* Select arrow */
select.pf-input{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='rgba(237,233,225,.5)' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right .8rem center;
	padding-right:2.2rem;
	cursor:pointer;
}

/* File input ────────────────────────────────────────────────────────── */
.pf-file{ position:absolute;opacity:0;width:1px;height:1px;overflow:hidden }

.pf-file-wrap{ position:relative }

.pf-file-label{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.6rem 1.1rem;
	border:1px dashed var(--p-border);
	border-radius:8px;
	font-size:.88rem;
	color:var(--p-muted);
	cursor:pointer;
	transition:border-color .18s,color .18s;
}

.pf-file-label:hover{ border-color:var(--p-gold);color:var(--p-gold) }

.pf-file-label svg{ width:15px;height:15px;flex:none }

.pf-hint{
	margin:.25rem 0 0;
	font-size:.78rem;
	color:rgba(237,233,225,.35);
}

/* Actions ───────────────────────────────────────────────────────────── */
.pf-actions{ margin-top:1.5rem }

.pf-msg{
	margin-top:1rem;
	padding:.75rem 1rem;
	border-radius:8px;
	font-size:.88rem;
	line-height:1.5;
}

.pf-msg--error{
	background:rgba(192,57,43,.12);
	border:1px solid rgba(192,57,43,.3);
	color:#e87961;
}

.pf-msg--success{
	background:rgba(39,201,63,.08);
	border:1px solid rgba(39,201,63,.25);
	color:rgba(39,201,63,.9);
}

/* ── Button ──────────────────────────────────────────────────────────── */
.portal__btn{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.7rem 1.4rem;
	background:transparent;
	border:1px solid var(--p-gold);
	border-radius:8px;
	color:var(--p-gold);
	font-family:var(--p-font-sans);
	font-size:.9rem;
	font-weight:600;
	letter-spacing:.03em;
	cursor:pointer;
	transition:background .18s,color .18s,opacity .18s;
}

.portal__btn:hover,
.portal__btn:focus-visible{
	background:var(--p-gold);
	color:#070D0D;
	outline:none;
}

.portal__btn svg{ width:15px;height:15px;flex:none;transition:transform .18s }
.portal__btn:hover svg{ transform:translateX(3px) }

.portal__btn:disabled{
	opacity:.45;
	cursor:not-allowed;
}

/* =========================================================================
 * LANDING PAGE
 * ====================================================================== */

.portal__landing{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:var(--p-gutter);
}

.portal__landing-card{
	width:100%;
	max-width:480px;
	background:var(--p-surface);
	border:1px solid var(--p-border);
	border-radius:var(--p-radius);
	padding:clamp(1.5rem,5vw,2.5rem);
}

.portal__brand--landing{
	margin-bottom:1.5rem;
}

.portal__brand--landing img,
.portal__brand--landing svg{ height:32px;width:auto }

.portal__landing-title{
	margin:0 0 .6rem;
	font-size:clamp(1.5rem,4vw,2rem);
	font-weight:700;
	letter-spacing:-.03em;
	line-height:1.2;
}

.portal__landing-note{
	margin:0 0 2rem;
	color:var(--p-muted);
	font-size:.92rem;
}

.portal__token-form{}

.portal__token-row{
	display:flex;
	gap:.6rem;
	margin:.5rem 0 .5rem;
}

.portal__token-input{
	font-family:var(--p-font-mono)!important;
	font-size:1.2rem!important;
	letter-spacing:.2em;
	text-transform:lowercase;
	flex:1;
	text-align:center;
}

.portal__btn--token{ flex:none;white-space:nowrap }

/* =========================================================================
 * FOOTER
 * ====================================================================== */

.portal__footer{
	text-align:center;
	padding:1.5rem var(--p-gutter) 2rem;
	font-size:.78rem;
	color:rgba(237,233,225,.25);
}

.portal__footer a{
	color:rgba(237,233,225,.35);
	text-decoration:none;
}

.portal__footer a:hover{ color:var(--p-muted) }

/* =========================================================================
 * REDUCED MOTION
 * ====================================================================== */

@media(prefers-reduced-motion:reduce){
	.portal__progress-fill{ transition:none }
	.portal__btn svg{ transition:none }
}