:root{
  --bg:#F4F6FA;
  --panel:#ffffff;
  --ink:#0F172A;
  --muted:#475569;
  --brand:#2563EB;
  --brand-2:#10B981;
  --cta:#0EA5E9;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --rad:16px;
  --rad-lg:22px;
  --maxw:97vw;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 ui-sans-serif,system-ui,"Segoe UI",Roboto,Inter,Arial;
  color:var(--ink); background:var(--bg);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,2vw,30px)}

/* Global transitions */
a, .btn, .card, .chip {
  transition: all 0.2s ease-out;
}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(244,246,250,.88); backdrop-filter:saturate(150%) blur(8px); border-bottom:1px solid #e5e7eb}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{font-weight:800; letter-spacing:.2px}
.menu{display:flex; gap:10px; align-items:center}
.menu a{padding:10px 14px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600}
.menu a:hover{background:#e9eef9}
.menu a.active {
  background-color: #e9eef9;
  color: var(--brand);
}
.menu .pill{background:#111827; color:#fff}
.menu .pill:hover { background: #374151; }

/* hero */
.hero{padding:56px 0}
.hero .grid{display:grid; gap:28px; grid-template-columns: 1.3fr .7fr; align-items:center}
@media (max-width:1000px){ .hero .grid{grid-template-columns:1fr} }
.kicker{display:inline-flex; padding:6px 10px; border-radius:999px; font-size:13px; color:var(--muted); background:#e9eef9}
h1{font-size:clamp(28px,3.6vw,44px); line-height:1.15; margin:12px 0}
.lead{color:var(--muted); max-width:70ch}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid #e5e7eb; background:#fff; box-shadow:var(--shadow); color:#0f172a}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.ghost{background:#fff}
.btn.green{background:var(--brand-2); border-color:var(--brand-2); color:#fff}
.btn:hover{transform:translateY(-2px); box-shadow: 0 12px 28px rgba(2,6,23,.1);}
.btn.primary:hover{background: #1D4ED8;}
.btn.green:hover{background: #059669;}

/* photo card */
.photo{margin-left:auto; max-width:420px; background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:14px; border:1px solid #e5e7eb}
.photo .frame{aspect-ratio:4/5; border-radius:14px; background:#f2f4f9; display:grid; place-items:center; overflow:hidden}
.photo img{width:100%; height:100%; object-fit:contain; transform:scale(.98)}
/* sections */
section{padding:32px 0}
.grid-3{display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
.grid-2{display:grid; gap:16px; grid-template-columns: repeat(2, 1fr)}
@media (max-width:1100px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:800px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--panel); border-radius:var(--rad-lg); border:1px solid #e5e7eb; box-shadow:var(--shadow); padding:20px}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(2,6,23,.12);
  border-color: var(--brand);
}

h2{margin:0 0 10px}
h3{margin:0 0 6px}
.small{color:var(--muted); font-size:13px}
ul.clean{margin:0; padding-left:18px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:6px 10px; border-radius:999px; background:#eef2ff; color:#374151; font-weight:700; font-size:13px; border:1px solid #e5e7eb}
.chip:hover {
  background: #DBEAFE; 
  border-color: #BFDBFE;
}

/* Project cards */
.project{display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; align-items:stretch}
.project .thumb{border-radius:14px; overflow:hidden; background:#0b1220; display:block}
.project img{display:block; width:100%; height:100%; object-fit:cover}
.project .meta{display:flex; flex-direction:column; justify-content:space-between}
.meta .row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.meta .title{font-size:20px; font-weight:800}

/* Projekt "Meine Rolle" Stile */
.role-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  margin: 12px 0 2px;
}
.role-desc.small {
  margin-bottom: 0;
}

/* CTA Sektion Stile */
.cta-section {
  background: linear-gradient(145deg, var(--brand), var(--cta));
  padding: 56px 0;
  color: #fff;
  margin-top: 32px;
  border-radius: var(--rad-lg);
}
.cta-section .wrap {
  max-width: 1100px;
}
.cta-card {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 0;
}
.cta-card:hover {
    transform: none;
    box-shadow: none;
    border: none;
}
.cta-card h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
}
.cta-card .lead {
  color: #E0F2FE;
  max-width: 60ch;
  margin: 10px auto 24px;
  font-size: 18px;
  opacity: 0.9;
}
.cta-card .cta {
  justify-content: center;
}
.cta-card .btn.primary {
    background: #fff;
    color: var(--brand);
    border-color: #fff;
}
.cta-card .btn.primary:hover {
    background: #f0f0f0;
    color: var(--brand);
}
.cta-card .btn.ghost {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.cta-card .btn.ghost:hover {
    background: rgba(255,255,255,0.1);
}

/* ------------------------------------- */
/* --- NEUE/GEÄNDERTE FOOTER STILE --- */
/* ------------------------------------- */
footer{
  border-top:1px solid #e5e7eb; 
  padding:32px 0 40px; /* Mehr Padding oben */
  color:var(--muted);
}
.foot{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  flex-wrap:wrap;
  gap: 20px; /* Wichtig für Umbruch auf Mobilgeräten */
}
.foot-left {
  display: flex;
  flex-direction: column; /* Stapelt Copyright und E-Mail */
  gap: 4px;
}
.foot-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
/* Links im Footer besser hervorheben */
.foot-right a, .foot-left .small a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.foot-right a:hover, .foot-left .small a:hover {
  color: var(--brand); /* Markenfarbe beim Hover */
  text-decoration: underline;
}

/* Zusätzliche Stile für Orbiora Visuals auf der Projektseite */
.orbiora-visuals {
  grid-column: 1 / -1; /* Nimmt die volle Breite im Grid ein */
  background: var(--panel);
  border-radius: var(--rad-lg);
  border: 1px solid #e5e7eb;
  box-shadow: var(--shadow);
  padding: 20px;
  margin-top: 20px; /* Abstand zum oberen Projekt-Card */
  color: var(--ink);
}

.orbiora-visuals h3 {
  color: var(--brand); /* Markenfarbe für die Überschrift */
  font-size: 1.4em;
  margin-bottom: 10px;
}

.orbiora-visuals p.small {
  margin-bottom: 20px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
  gap: 20px;
  justify-content: center; /* Zentriert die Bilder */
}

.gallery-item {
  flex: 1 1 calc(50% - 20px); /* Zwei Spalten, mit Lücke */
  min-width: 280px; /* Minimale Breite pro Bild */
  text-align: center;
}

.gallery-item img {
  max-width: 100%;
  height: auto;
  border-radius: var(--rad);
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.image-caption {
  font-size: 0.85em;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 100%; /* Auf kleinen Bildschirmen eine Spalte */
  }
}

/* ===== Original Theme: Warm Glass Header (restored) ===== */
.wrap.nav{
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72));
  border:1px solid #e6eaf2;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08), inset 0 -1px 0 rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 10px 14px;
}

/* Menu: subtle pills */
.menu{ gap:10px; }
.menu a{
  padding:8px 12px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration:none;
  background: transparent;
  border:1px solid transparent;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.menu a:hover{
  background: rgba(66,133,244,.06);
  border-color: #e6eaf2;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.menu a.active{
  background: #eef3ff;
  color: var(--ink);
  border-color: #d9e2ff;
  box-shadow: 0 10px 22px rgba(37,99,235,.12);
}