/* NOTE: variables.css muss vor dieser Datei in base.html verlinkt sein.
   Keine @import hier. */

*{box-sizing:border-box}

/* Skip-link für Tastaturnutzer: am Anfang unsichtbar, bei Fokus sichtbar */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--accent);
  color: #06121a;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 2000;
  transform: translateY(-140%);
  transition: transform 120ms ease;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus, .skip-link:active{ transform: translateY(0); outline: 3px solid rgba(255,255,255,0.9); outline-offset:2px; }

/* Fokus-Styles für Keyboard-Navigation */
a:focus-visible, button:focus-visible, .nav-link:focus-visible, .cta:focus-visible, .g-card:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(125,211,252,0.12);
}
.nav-link:focus-visible{ border-radius:12px; }

/* Formulare: klare Fokusindikatoren (nutzt vorhandene input:focus-Regeln, hier für keyboard-only sichtbar) */
.contact-fields input:focus-visible, .contact-fields textarea:focus-visible, .contact-submit:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(125,211,252,0.12);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}
html,body{ height:100%; margin:0; font-family: Inter, "Segoe UI", system-ui, -apple-system; color:var(--text); background:transparent; overflow-x:hidden; }
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: radial-gradient(1600px 900px at 18% 10%, rgba(134,227,255,0.25), transparent 62%),
              radial-gradient(1200px 560px at 88% -6%, rgba(155,140,255,0.20), transparent 60%),
              linear-gradient(180deg, #0b0e12 0%, #0a0d12 100%);
  filter:saturate(115%) blur(0px);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-d));
  background-size: 300% 300%; opacity:0.08; animation: gradientShift var(--gradient-duration) ease-in-out infinite;
}

.container{ max-width: var(--container); margin: 0 auto; padding: var(--space-6) var(--space-4); }

.topnav{ position:fixed; top:16px; left:0; right:0; z-index:1000; display:flex; justify-content:center; pointer-events:auto; }
.nav-inner{
  display:flex; align-items:center; gap: var(--space-3);
  background: transparent; backdrop-filter: none;
  border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  box-shadow: none;
}
/* Glass effect only when nav passes "Moin" hero */
#topnav.nav--scrolled .nav-inner{
  background: var(--glass); backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.brand{ color:var(--text); text-decoration:none; font-weight:700; letter-spacing:0.02em; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,0.04); }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.nav-link{ color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:12px; font-weight:600; }
.nav-link.active{
  color:#e7eef7;
  background: var(--glass-strong);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 18px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
}
.nav-link:hover{
  color:white;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(134,227,255,0.18);
}

.hero-centered{ display:flex; align-items:center; justify-content:center; text-align:center; padding: var(--space-6) 0 var(--space-5); }
.hero-content{ max-width:800px; }
.greeting{ font-size: clamp(34px, 6vw, 56px); letter-spacing:-0.02em; margin:0 0 var(--space-3); }
.lead{ color:var(--muted); font-size: clamp(16px, 2.2vw, 20px); line-height:1.7; margin:0 auto var(--space-5); }

.cards{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}
.card h2{ margin:0 0 var(--space-2); font-size:20px; }
.list{ margin:0; padding-left: 18px; color:var(--muted); }

.timeline-section{ margin-top: var(--space-6); }

/* Full-bleed wrapper to span viewport width while keeping centered content */
.full-bleed{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding: var(--space-4) 0;
}
.full-bleed-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Abschnitts-Stile */
.timeline-section{
  margin-top: var(--space-6);
  background: transparent;            /* Hintergrund entfernt */
  border-top: none;                   /* Rahmen entfernt */
  border-bottom: none;
  padding-bottom: 0;
}

/* Abstand unter der Timeline zum nächsten Element */
.timeline-section + .cards,
.timeline-section + section {
  margin-top: var(--space-5);         /* zusätzlicher Abstand */
}

/* Gantt chart styles */
.gantt-chart svg{
  width:90%;
  margin:0 auto;
  display:block;
  overflow:visible;
}

/* Mobile: Gantt noch schmaler */
@media (max-width: 700px){
  .gantt-chart svg{
    width:95%;
  }
}
.gantt-chart .bar{
  filter: saturate(115%) brightness(105%);
}
.gantt-chart .bar-text{
  pointer-events: none;
  dominant-baseline: middle;
}
.gantt-chart .bar-text-ext text{
  fill:#e7eef7;
  font-weight:600;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.gantt-pill{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.32));
  transition: transform 180ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.gantt-row:hover .gantt-pill{ filter:none; transform:none; }
.gantt-pill:hover{ filter:brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(134,227,255,0.22); }
.pill-company{ font-weight:700; letter-spacing:0.01em; }
.pill-role{ opacity:0.85; }
.pill-years{
  font-variant-numeric: tabular-nums;
  letter-spacing:0.5px;
}

/* optional: Abschnitt-Hintergrund für bessere Abhebung */
.timeline-section{
  margin-top: var(--space-6);
  }

.cta-section{ display:flex; justify-content:center; gap: 24px; flex-wrap: wrap; margin: var(--space-6) 0; }
.cta{
  display:inline-block; padding:12px 16px; border-radius:12px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#06121a; font-weight:700; text-decoration:none;
  box-shadow: 0 10px 28px rgba(134,227,255,0.2);
  transition: transform 180ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.cta:hover{ filter:brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(134,227,255,0.28); }

.site-footer{ padding: var(--space-5) var(--space-4) var(--space-6); }
.footer-inner{ max-width: var(--container); margin:0 auto; display:flex; align-items:center; gap:12px; color:var(--muted); flex-wrap: wrap; justify-content: center; }

/* Work / Fun Gallery */
.gallery{ padding-top: var(--space-4); }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-3);
}
.gallery-grid.mosaic{
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
}
.g-card{ position:relative; overflow:hidden; border-radius: var(--radius); text-decoration:none; }
.g-card{ transition: transform 180ms ease, box-shadow 200ms ease; }
.g-card-inner{ display:flex; flex-direction:column; gap:14px; padding: var(--space-4); height:100%; min-width:0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border:1px solid rgba(255,255,255,0.06); box-shadow: var(--shadow); }
.g-card-inner{ transition: transform 180ms ease, box-shadow 200ms ease, filter 200ms ease; }
.g-card--tall{ grid-row: span 2; }
.g-card--wide{ grid-column: span 2; }
.g-card--disabled{ opacity: 0.55; filter: grayscale(8%); cursor: not-allowed; }
.g-card--disabled .g-card-inner{ pointer-events: none; }
.g-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; }

/* Tooltip for disabled cards */
.g-card{ position: relative; }
.g-tooltip{ position:absolute; left:12px; bottom:12px; padding:6px 10px; font-size:12px; font-weight:700; color:#1a1003; background: rgba(255, 166, 33, 0.92); border:1px solid rgba(255, 166, 33, 0.95); border-radius:12px; box-shadow: 0 10px 24px rgba(255,166,33,0.35), 0 6px 16px rgba(0,0,0,0.35); opacity:0; transform: translateY(6px); transition: opacity 160ms ease, transform 160ms ease; pointer-events:none; }
.g-card.g-card--disabled:hover .g-tooltip{ opacity:1; transform: translateY(0); }
.g-content{ min-width:0; flex:1; display:flex; flex-direction:column; }
.g-heading{ margin:0 0 4px; font-size:18px; letter-spacing:0.01em; color:var(--text); word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
.g-desc{ margin:0; font-size:14px; line-height:1.55; color:var(--muted); word-wrap: break-word; overflow-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.g-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(134,227,255,0.22); }
.g-card:hover .g-card-inner{ border-color: rgba(255,255,255,0.14); filter: brightness(1.08); box-shadow: 0 14px 32px rgba(134,227,255,0.22); }
.g-card:hover .g-heading{ color:#fff; }

@media (max-width: 800px){
  .gallery-grid.mosaic{ grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-auto-rows: 160px; }
  .g-card--wide{ grid-column: span 2; }
  .g-card-inner{ padding: 16px; gap: 10px; }
  .g-heading{ font-size: 16px; }
  .g-desc{ font-size: 13px; -webkit-line-clamp: 3; }
}
@media (max-width: 560px){
  .gallery-grid.mosaic{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .g-card--wide{ grid-column: span 1; }
  .g-card--tall{ grid-row: span 1; }
  .g-card-inner{ padding: 18px; }
  .g-heading{ font-size: 17px; }
  .g-desc{ font-size: 14px; -webkit-line-clamp: 5; }
}
.g-card{
  display:block;
  text-decoration:none;
  color:inherit;
}
.g-figure{
  margin:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 180ms ease, filter 200ms ease;
}
.g-figure:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 32px rgba(134,227,255,0.22);
  filter: brightness(1.06);
}
.g-figure img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(105%) contrast(98%);
}
.g-caption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.2);
}
.g-title{ font-weight:700; letter-spacing:0.01em; }
.g-tags{ color:var(--muted); font-size: 13px; }

/* Contact form enhancements */
.contact-form{
  max-width:560px;
  margin:0 auto;
  background:linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  padding:32px 34px 36px;
  border-radius:20px;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  backdrop-filter:blur(12px);
}
.contact-fields{display:flex;flex-direction:column;gap:22px;}
.contact-fields label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500;color:var(--text);}
.contact-fields input,
.contact-fields textarea{
  font:inherit;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:var(--glass-strong);
  color:var(--text);
  outline:none;
  width:100%;
  resize:vertical;
}
.contact-fields input:focus,
.contact-fields textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(125,211,252,0.25);
}
.consent{flex-direction:row;align-items:flex-start;gap:12px;font-size:13px;line-height:1.55;}
.consent input{width:20px;height:20px;margin-top:2px;cursor:pointer;}
.contact-submit{
  width:100%;
  justify-content:center;
  font-size:16px;
  padding:16px 20px;
  color:#06121a !important; /* deutlicher Text */
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border:none;
  border-radius:14px;
  font-weight:600;
}
.contact-submit:hover{filter:brightness(1.08);}

/* Flash messages */
.flash-wrap{max-width:560px;margin:0 auto var(--space-4);display:flex;flex-direction:column;gap:12px;}
.flash{padding:12px 16px;border-radius:14px;font-weight:600;font-size:14px;}
.flash-success{background:rgba(0,200,130,0.18);border:1px solid rgba(0,200,130,0.35);color:#7bffc9;}
.flash-error{background:rgba(255,80,80,0.18);border:1px solid rgba(255,80,80,0.40);color:#ffb4b4;}

/* Responsive */
@media (max-width: 1024px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .gallery-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .cards{ grid-template-columns: 1fr; }
}

/* Timeline full width override */
.timeline-section.full-bleed .full-bleed-inner{
  max-width: none;
  width: 100%;
  padding: 0 0; /* entferne zentrierung */
}

/* Optional: gantt chart spans full viewport width */
#ganttChart{
  width:90%;
  margin:0 auto;
}

/* --- About page additions --- */
.about-hero{display:flex;justify-content:center;align-items:center;text-align:center;padding:var(--space-6) 0 var(--space-4);}
.moin-heading{font-size:clamp(46px,7vw,86px);margin:0;display:inline-flex;align-items:center;gap:22px;letter-spacing:-0.035em;font-weight:700;}
.moin-icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;}
.moin-icon svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35));border-radius:18px;}

/* --- Mobile timeline list --- */
.timeline-list{display:none;gap:14px;}
.t-item{padding:var(--space-3);border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.06);box-shadow:var(--shadow);}
.t-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.t-company{font-weight:700;letter-spacing:0.01em;color:var(--text);}
.t-years{font-weight:700;background:linear-gradient(90deg, var(--accent), var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.t-role{color:var(--muted);font-size:14px;}

/* Responsive: hide Gantt on phones, show list */
@media (max-width: 700px){
  .gantt-chart{display:none;}
  .timeline-list{display:flex;flex-direction:column;width:90%;margin:0 auto;}
}

.about-intro-grid{display:grid;grid-template-columns:280px 1fr;gap:var(--space-5);align-items:center;max-width:var(--container);margin:0 auto var(--space-6);padding:0 var(--space-4);}
.about-photo-wrap{margin:0;}
.about-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);display:block;border:1px solid rgba(255,255,255,0.10);box-shadow:var(--shadow);background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));}
.about-intro-text .lead{margin:0;}

.mission-section{max-width:var(--container);margin:0 auto var(--space-6);padding:var(--space-5) var(--space-4);background:transparent;border:none;box-shadow:none;}
.mission-section h2{margin:0 0 var(--space-3);font-size:26px;letter-spacing:-0.01em;}
.mission-section p{margin:0 0 var(--space-3);color:var(--muted);line-height:1.65;font-size:16px;}

.work-style-box{max-width:var(--container);margin:0 auto var(--space-6);padding:var(--space-5) var(--space-4);background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.03));border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius);box-shadow:var(--shadow);transition: transform 180ms ease, box-shadow 200ms ease, filter 200ms ease;} 
.work-style-box:hover{ filter:brightness(1.08); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(134,227,255,0.28); }
.work-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
.ws-item{display:flex;flex-direction:column;gap:10px;padding:0;}
.ws-item:hover{filter:brightness(1.03);}
.ws-num{font-weight:700;font-size:13px;letter-spacing:0.08em;opacity:0.65;}
.ws-title{margin:0;font-size:16px;letter-spacing:0.01em;}
.ws-text{margin:0;font-size:14px;line-height:1.55;color:var(--muted);}

@media (max-width:1040px){.work-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.about-intro-grid{grid-template-columns:1fr;}.work-style-grid{grid-template-columns:1fr;}.about-photo{max-width:320px;margin:0 auto;}}

/* Externe Label links vom Balken */
.gantt-chart .bar-text-ext text{
  fill:#e7eef7;
  font-weight:600;
  text-anchor:end;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}