/* Shared dashboard system. Content and protected access remain in the React app. */
:root {
  --bg: #06111e;
  --muted: #b0bfce;
  --green: #80d8fa;
  --surface: #0c2134;
  --surface-raised: #102b42;
  --dashboard-border: rgba(152, 202, 231, .19);
  --content-width: 1440px;
}
body { background: var(--bg); }
.page-shell { padding: 28px clamp(20px, 5vw, 96px) 0; }
.console-background { background: radial-gradient(ellipse at 80% 10%, #123650, transparent 55%), linear-gradient(130deg, #06111e, #091b2c); }
.console-background::after { background: linear-gradient(180deg, transparent, rgba(4, 12, 22, .5)); }
.console-symbols, .console-ribbon, .console-glow { display: none; }
.nav, .hero, .section, footer, .home-dashboard { max-width: var(--content-width); }
.nav {
  top: 0; min-height: 92px; padding: 16px 24px; gap: 26px;
  border: 0; border-bottom: 1px solid var(--dashboard-border); border-radius: 0;
  background: rgba(6, 17, 30, .95); box-shadow: none; backdrop-filter: blur(12px);
}
.brand { gap: 14px; }
.brand-logo { width: 48px; height: 48px; border-radius: 50%; }
.brand-name { display: block; font-weight: 600; }
.brand-name strong { display: block; font-size: .94rem; font-weight: 650; }
.brand-name small { display: block; color: var(--muted); font-size: .68rem; font-weight: 450; margin-top: 5px; }
.nav-links { gap: 10px; font-size: .96rem; }
.nav-links a { position: relative; padding: 13px 16px; border: 1px solid transparent; border-radius: 3px; font-weight: 550; }
.nav-links a.active { color: #f5fbff; border-color: rgba(137, 220, 255, .45); background: #14344b; box-shadow: 0 0 18px rgba(60, 163, 215, .09); }
.nav-links a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -18px; height: 3px; background: var(--blue); transform: scaleX(0); transition: transform 180ms ease; }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a:hover { background: #10283c; }
.language-switch { border-color: var(--dashboard-border); background: transparent; }
.language-option.active, .mobile-menu a.active { color: #e5f7ff; background: #1b4156; }
.menu-button { border-color: var(--dashboard-border); border-radius: 3px; }
.mobile-menu { background: #0a1c2c; top: calc(100% + 1px); border-color: var(--dashboard-border); }
.mobile-menu a { padding: 17px 20px; }
.mobile-menu a.active { box-shadow: inset 3px 0 var(--blue); }
.logout-link { font-size: .85rem; }
.page-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; color: var(--blue); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page-eyebrow > span { color: #637f93; }
h1, h2, h3 { letter-spacing: -.025em; }
.button { min-height: 54px; padding: 0 24px; border-radius: 3px; font-size: .95rem; font-weight: 650; }
.button.primary { color: #051522; background: #a1e4ff; border-color: #a1e4ff; }
.button.secondary { color: #eff9ff; border-color: rgba(187, 220, 243, .35); background: rgba(5, 20, 33, .58); }
.button:hover { transform: translateY(-2px); }
.hero, .hero-compact { min-height: 0; padding: 64px 0 40px; }
.hero > div, .hero-compact > div { max-width: 850px; }
.hero h1, .hero-compact h1 { font-size: clamp(2.8rem, 4.5vw, 4.4rem); font-weight: 700; line-height: 1.06; margin: 0 0 24px; }
.hero .lead { font-size: 1.12rem; line-height: 1.8; max-width: 760px; }
.section.page-intro { padding: 64px 0 40px; border-top: 0; }
.page-intro h1 { font-size: clamp(2.8rem, 4.5vw, 4.4rem); font-weight: 700; line-height: 1.06; margin: 0 0 24px; }
.section .page-eyebrow { font-size: .78rem; color: var(--blue); line-height: 1.4; }
.section { padding: 72px 0; border-top: 1px solid var(--dashboard-border); }
.section h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 650; }
.section > p, .profile-section-head p { font-size: 1.06rem; line-height: 1.8; }

/* Portfolio destinations below the immersive project dashboard. */
.home-explore { padding: 100px 0 0; }
.shelf-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 40px; }
.shelf-heading .page-eyebrow { margin-bottom: 16px; }
.shelf-heading h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.1; }
.dashboard-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dashboard-shortcuts > a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: start; min-height: 0; padding: 28px; gap: 20px; transition: transform 180ms ease; }
.dashboard-shortcuts > a > svg { color: var(--blue); }
.dashboard-shortcuts > a > div { min-width: 0; max-width: 280px; }
.dashboard-shortcuts strong { font-size: 1.2rem; font-weight: 550; line-height: 1.3; }
.dashboard-shortcuts span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.6; margin-top: 10px; }
.dashboard-shortcuts > a > svg:last-child { width: 20px; height: 20px; margin-top: 3px; }

/* The project library is spacious, with large covers and practical details. */
.page-projekte .hero { padding-bottom: 32px; }
.page-projekte .section { padding-top: 36px; }
.page-projekte .section > h2 { font-size: 1.7rem; }
.project-filters { gap: 12px; margin: 32px 0 24px; }
.project-filter { min-height: 48px; padding: 0 20px; color: #c0cedb; font-size: .95rem; font-weight: 550; background: #0c2438; border-radius: 3px; }
.project-filter.active { border-color: var(--blue); color: #effbff; background: #1a4058; }
.filter-result { font-size: .94rem; margin: 24px 0 32px; }
.page-projekte .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 34px; margin-top: 0; }
.project-card { scroll-margin-top: 120px; }
.project-preview { position: relative; aspect-ratio: 16 / 11; border-radius: 0; }
.project-preview img { transition: transform 200ms ease, filter 200ms ease; }
.project-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 15, 28, .98), rgba(3, 15, 28, .72) 22%, transparent 60%); pointer-events: none; }
.project-image-title { position: absolute; z-index: 1; bottom: 30px; left: 32px; right: 32px; }
.project-image-title h3 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); margin: 0; line-height: 1.1; font-weight: 650; }
.project-copy { padding: 30px 32px 34px; }
.project-copy p { font-size: 1rem; line-height: 1.8; }
.project-tags { margin-top: 24px; gap: 8px; }
.project-tags span { color: #bbd5e4; font-size: .78rem; font-weight: 550; text-transform: none; padding: 7px 11px; }
.project-links { margin-top: 28px; gap: 12px; }
.project-link { min-height: 46px; font-size: .9rem; padding: 0 16px; font-weight: 550; }
.project-card > .project-number { top: 24px; left: 24px; padding: 8px 11px; font-size: .78rem; }
.project-featured { grid-column: 1 / -1; min-height: 500px; padding: 48px; }
.project-featured .project-content-media { grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(40px, 7vw, 120px); align-items: center; }
.project-featured .project-copy { padding: 0; justify-content: center; }
.project-featured h3 { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 26px; max-width: 550px; }
.project-featured .project-copy p { max-width: 660px; font-size: 1.1rem; line-height: 1.85; }
.project-featured .project-video-wrap { width: 100%; }
.project-video { border-radius: 0; }
.project-video-wrap figcaption { margin-top: 16px; font-size: .9rem; line-height: 1.7; }
.project-card:focus-within { transform: translateY(-3px) scale(1.006); }
.project-card:focus-within .project-preview img { transform: scale(1.025); }
.project-card:focus-within .project-preview-focus img { transform: scale(1.31); }
.arcade-showcase { margin-top: 96px; }
.arcade-grid { gap: 34px; }
.arcade-tile { border-radius: 5px; border-color: var(--dashboard-border); }
.arcade-label { font-size: 1.6rem; }

/* Profile becomes a portrait-led page with large, calm content panels. */
.page-profil .hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 80px; align-items: center; }
.page-profil .hero-compact > div { max-width: 780px; }
.profile-hero-art { position: relative; isolation: isolate; margin: 0; height: 380px; overflow: hidden; align-self: stretch; }
.profile-hero-art img { display: block; height: 112%; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 15px 22px rgba(0, 0, 0, .3)); }
.profile-hero-art::after { content: ''; position: absolute; inset: 1px; clip-path: var(--panel-inner-shape); z-index: 1; background: linear-gradient(0deg, #061a2b, transparent 38%); pointer-events: none; }
.profile-hero-art figcaption { position: absolute; left: 32px; bottom: 30px; z-index: 2; font-size: 1.5rem; font-weight: 600; }
.profile-hero-art figcaption span { display: block; font-size: .9rem; color: #bdd9e8; margin-top: 9px; font-weight: 450; }
.profile-grid, .profile-main { display: grid; gap: 56px; }
.profile-overview { display: block; max-width: none; min-width: 0; width: 100%; margin: 0; }
.profile-summary { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 28px; align-items: stretch; }
.profile-facts { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
.profile-fact { padding-bottom: 22px; }
.profile-fact span { font-size: .8rem; font-weight: 550; letter-spacing: .04em; }
.profile-fact strong { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin-top: 12px; }
.profile-fact:last-child { border: 0; padding-bottom: 0; }
.story-feature { padding: 32px; align-content: start; }
.story-feature p { font-size: 1rem; line-height: 1.8; max-width: 68ch; }
.profile-split { gap: 34px; padding: 0; border: 0; }
.profile-panel, .ai-panel { padding: 32px; }
.profile-panel h2 { font-size: 1.65rem; margin-bottom: 24px; }
.profile-panel p { font-size: 1.02rem; line-height: 1.85; }
.profile-panel .tag-list { margin-top: 30px; }
.profile-skills, .profile-soft-skills, .profile-hobbies { gap: 38px; }
.profile-soft-skills { padding-top: 0; border: 0; }
.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.info-card { padding: 30px; }
.card-index { color: var(--blue); font-size: .82rem; margin-bottom: 24px; }
.info-card h3 { font-size: 1.5rem; line-height: 1.25; margin-bottom: 20px; }
.info-card p { font-size: 1rem; line-height: 1.8; }
.soft-skill-grid { column-gap: 56px; row-gap: 20px; }
.soft-skill-item { padding: 30px 0; border-color: var(--dashboard-border); }
.soft-skill-item h3 { font-size: 1.45rem; }
.soft-skill-item p { font-size: 1rem; line-height: 1.8; }
.hobby-stage { aspect-ratio: 21 / 9; }
.hobby-caption { padding: 28px 34px; }
.hobby-caption h3 { font-size: 2rem; }
.hobby-arrow { width: 54px; height: 54px; }
.hobby-dots { padding: 0 34px 28px; }

.page-lebenslauf .section.page-intro { padding: 40px 0 28px; }
.page-lebenslauf .page-intro h1 { font-size: clamp(2.5rem, 3.6vw, 4rem); margin-bottom: 18px; }
.page-lebenslauf .page-intro .page-eyebrow { margin-bottom: 16px; }
.page-lebenslauf .download-section { padding-top: 28px; }

/* Employer documents: clear access panel and comfortably spaced document tiles. */
.auth-gate-section { min-height: 0; padding: 56px 0; display: block; border: 0; }
.gate-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); gap: clamp(48px, 8vw, 130px); align-items: center; }
.gate-intro h1 { font-size: clamp(2.6rem, 4vw, 4rem); margin: 0 0 24px; line-height: 1.05; }
.gate-intro > p:not(.page-eyebrow) { max-width: 610px; font-size: 1.1rem; line-height: 1.85; }
.gate-document-types { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 36px; color: #9fb7c9; font-size: .9rem; }
.gate-document-types span:first-child { color: var(--blue); }
.login-panel { width: 100%; max-width: none; padding: 44px; }
.login-panel h2 { margin: 0 0 24px; font-size: 2rem; line-height: 1.15; }
.login-kicker { font-weight: 550; color: var(--blue); letter-spacing: .06em; font-size: .77rem; }
.login-copy { font-size: 1rem; margin-bottom: 32px; line-height: 1.8; }
.login-form { gap: 14px; }
.login-form input { height: 58px; background: #071b2d; border-radius: 3px; border-color: #3c5b71; }
.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(120, 216, 255, .13); }
.login-form button { min-height: 54px; margin-top: 12px; color: #062031; background: #a1e4ff; border-radius: 3px; font-weight: 650; }
.reference-gate-section { padding: 72px 0; }
.reference-gate-section .gate-layout { display: block; }
.reference-gate-section .login-panel { max-width: 720px; }
.download-grid, .report-grid { gap: 28px; }
.download-card, .report-card { padding: 36px; }
.download-card h3, .report-card h3 { font-size: 1.7rem; }
.grade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 38px; }
.grade-card { padding: 32px; }
.grade-card h3 { font-size: 1.3rem; }
.grade-summary { margin-top: 32px; padding: 24px 32px; }
.download-link { min-height: 48px; border-radius: 3px; }
.download-all-button { border-radius: 3px; min-height: 54px; }

/* Contact: large, straightforward actions without visual clutter. */
.contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 38px; }
.contact-card { padding: 36px; min-height: 150px; gap: 26px; }
.contact-card:first-child { grid-column: 1 / -1; min-height: 190px; background: linear-gradient(110deg, #153b53, #0e273d); }
.contact-card strong { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 550; line-height: 1.45; }
.contact-card:first-child strong { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.contact-card small, .social-link small { font-size: .9rem; font-weight: 500; margin-bottom: 13px; }
.contact-icon, .social-icon { width: 60px; border-radius: 0; color: var(--blue); background: rgba(120, 216, 255, .08); }
.social-grid { gap: 28px; margin-top: 38px; }
.social-link { padding: 36px; min-height: 180px; gap: 24px; }
.social-link strong { font-size: 1.3rem; font-weight: 550; }
.reference-card { padding: 36px; gap: 24px; }
.references-grid { gap: 28px; margin-top: 38px; }
.legal-grid { gap: 34px; }
.legal-panel { padding: 38px; }
.privacy-copy p { font-size: 1rem; line-height: 1.85; }
footer { margin: 100px auto 0; padding: 36px 0 42px; border-top: 1px solid var(--dashboard-border); font-size: .86rem; }

/* Original curved visor intro: unchanged session behavior, no interaction blocking. */
.visor-intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; background: rgba(2, 13, 25, .28); animation: visorFade 1300ms ease-out both; }
.visor-scan { position: absolute; inset: -4%; color: rgba(133, 225, 255, .5); mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 50%, transparent 85%); mask-size: 100% 220%; animation: visorSweep 1150ms 40ms cubic-bezier(.2, .55, .35, 1) both; }
.visor-wireframe { width: 100%; height: 100%; filter: drop-shadow(0 0 5px rgba(74, 196, 251, .35)); }
.visor-rim { opacity: .5; }
.visor-scanning-light { position: absolute; left: -15%; right: -15%; top: -25%; height: 25%; border-bottom: 1px solid rgba(139, 229, 255, .45); border-radius: 0 0 50% 50%; background: linear-gradient(0deg, rgba(78, 190, 243, .12), transparent 65%); box-shadow: 0 15px 35px rgba(54, 174, 231, .06); animation: visorLight 1150ms 40ms ease-out both; }
@keyframes visorFade { 0% { opacity: 0; } 12%, 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes visorSweep { 0% { transform: translateY(-36%); opacity: 0; } 20% { opacity: 1; } 70% { opacity: .65; } 100% { transform: translateY(36%); opacity: 0; } }
@keyframes visorLight { 0% { transform: translateY(-10vh); opacity: 0; } 20% { opacity: 1; } 85% { opacity: .5; } 100% { transform: translateY(125vh); opacity: 0; } }
@keyframes stageImageIn { from { opacity: .65; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .dashboard-shortcuts > a:hover { border-color: var(--blue); transform: translateY(-3px); }
  .project-card:hover { transform: translateY(-3px) scale(1.006); }
}

@media (max-width: 1200px) {
  .nav-links { gap: 2px; font-size: .87rem; }
  .nav-links a { padding-inline: 11px; }
  .brand-name small { max-width: 140px; }
  .page-profil .hero { gap: 44px; grid-template-columns: 1.1fr .9fr; }
  .profile-hero-art { height: 360px; }
  .project-featured { padding: 38px; }
  .project-featured .project-content-media { grid-template-columns: minmax(0, 1fr) 230px; gap: 45px; }
  .dashboard-shortcuts > a { padding: 28px; }
  .dashboard-shortcuts strong { font-size: 1.2rem; }
}
@media (max-width: 980px) {
  .nav { gap: 20px; }
  .nav-links { display: none; }
  .language-switch { margin-left: auto; }
  .brand-name { display: block; }
  .dashboard-shortcuts { grid-template-columns: 1fr; }
  .dashboard-shortcuts > a { padding: 24px; }
    .page-profil .hero { grid-template-columns: 1fr 320px; gap: 32px; }
  .profile-hero-art { height: 340px; }
  .profile-summary { grid-template-columns: 1fr; gap: 24px; }
  .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-fact { border: 0; padding: 0; }
  .profile-split { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gate-layout { grid-template-columns: 1fr; gap: 56px; }
  .login-panel { max-width: 720px; }
  .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card, .social-link { padding: 28px; gap: 20px; }
  .contact-icon, .social-icon { width: 50px; }
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .menu-button { display: block; }
  .mobile-menu.open { display: block; }
  .language-switch { margin-left: auto; }
}
@media (max-width: 740px) {
  .page-shell { padding: 12px 20px 0; }
  .nav { min-height: 80px; gap: 14px; }
  .brand-name strong { font-size: .84rem; }
  .brand-name small { font-size: .58rem; }
  .logout-link { margin-left: 0; padding: 8px; }
  .logout-link span { display: none; }
  .hero, .hero-compact, .page-intro { padding: 56px 0 44px; }
  .section.page-intro { padding: 56px 0 44px; }
  .hero h1, .hero-compact h1, .page-intro h1 { font-size: clamp(3rem, 8vw, 4.5rem); }
  .hero .lead { font-size: 1rem; }
  .section { padding: 54px 0; }
  .shelf-heading { margin-bottom: 30px; gap: 14px; }
  .shelf-heading h2 { font-size: 2rem; }
  .shelf-heading .page-eyebrow { font-size: .65rem; letter-spacing: .06em; }
  .shelf-controls button { width: 40px; height: 40px; }
  .shelf-selection { flex-wrap: wrap; gap: 24px; }
  .dashboard-shortcuts { gap: 24px; }
  .dashboard-shortcuts > a { padding: 24px; }
  .dashboard-shortcuts strong { font-size: 1.2rem; }
  .dashboard-shortcuts span { font-size: .9rem; }
  .page-projekte .project-list { grid-template-columns: 1fr; gap: 34px; }
  .project-copy { padding: 26px; }
  .project-preview { aspect-ratio: 4 / 3; }
  .project-image-title { left: 26px; right: 26px; bottom: 26px; }
  .project-image-title h3 { font-size: 1.8rem; }
  .project-featured { padding: 30px; }
  .project-featured .project-content-media { grid-template-columns: 1fr; gap: 38px; }
  .project-featured .project-video-wrap { width: min(100%, 280px); justify-self: center; }
  .project-featured .project-copy p { font-size: 1rem; }
  .arcade-grid { gap: 24px; grid-template-columns: 1fr; }
  .arcade-label { font-size: 1.4rem; }
  .page-profil .hero { grid-template-columns: 1fr; gap: 44px; }
  .profile-hero-art { width: 100%; height: 360px; max-width: 500px; }
  .profile-grid, .profile-main { gap: 44px; }
  .profile-panel { padding: 30px; }
  .profile-panel h2 { font-size: 1.75rem; }
  .card-grid { grid-template-columns: 1fr; gap: 24px; }
  .info-card { padding: 30px; }
  .soft-skill-grid { grid-template-columns: 1fr; }
  .hobby-stage { aspect-ratio: 4 / 3; }
  .hobby-caption { padding: 24px; }
  .hobby-caption h3 { font-size: 1.6rem; }
  .gate-intro h1 { font-size: 2.6rem; }
  .auth-gate-section { padding-top: 56px; }
  .login-panel { padding: 30px; }
  .grade-grid, .report-grid, .download-grid, .contact-grid, .social-grid, .references-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-card:first-child { grid-column: auto; min-height: 180px; }
  .contact-card { min-height: 150px; padding: 26px; gap: 18px; }
  .contact-card:first-child strong { font-size: 1.25rem; }
  .contact-card strong { font-size: 1.13rem; }
  .contact-icon { width: 40px; }
  .social-link { padding: 28px; }
  .social-link strong { font-size: 1.15rem; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-panel { padding: 28px; }
  footer { margin-top: 72px; flex-wrap: wrap; gap: 22px; font-size: .84rem; }
}
@media (max-width: 420px) {
  .page-shell { padding-inline: 16px; }
  .brand-name { display: none; }
  .brand-logo { width: 44px; height: 44px; }
  .page-eyebrow { font-size: .65rem; gap: 9px; }
  .shelf-heading { align-items: flex-start; }
  .shelf-heading h2 { font-size: 1.75rem; }
  .shelf-controls { gap: 6px; }
  .shelf-controls button { width: 34px; height: 40px; }
  .project-featured { padding: 26px; }
  .project-featured h3 { font-size: 2.25rem; }
  .project-filters { gap: 8px; }
  .project-filter { padding-inline: 13px; font-size: .85rem; }
  .profile-facts { padding: 26px; gap: 18px; }
  .profile-fact strong { font-size: 1.25rem; }
  .contact-card { align-items: flex-start; flex-direction: column; }
  .social-link { gap: 16px; padding: 24px; }
  .social-icon { width: 44px; }
  .social-link strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .visor-intro { display: none; }
  .project-card:focus-within .project-preview img { transform: none; }
  .project-card:focus-within .project-preview-focus img { transform: scale(1.28); }
}