:root{
  --bg:#0b0b0c;
  --bg2:#0e0f12;
  --card:#171a1f;
  --line:#23262e;
  --text:#e7eaf0;
  --muted:#b6bdc8;
  --accent:#c29b47;
  --accent2:#d8b868;
}

/* === Grundlayout === */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 40%, #10131a 100%);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent2);}

/* === Container === */
.container{max-width:1100px;margin:0 auto;padding:20px;}

/* === Header / Navigation === */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,15,18,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;gap:16px;padding:10px 0;
}
.brand{font-weight:800;}

.nav{
  display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;
}
.nav a{
  position:relative;
  color:var(--muted);
  padding:8px 12px;
  border-radius:12px;
  transition:background .15s ease,color .15s ease, box-shadow .15s ease;
}
.nav a:hover{
  color:var(--text);
  background:#1b1f27;
}
.nav a.active{
  color:#0b0b0c;
  font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.nav a.active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-6px;
  height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
.nav a:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
}

/* === Hero / Logos === */
.logo-wrap{
  display:flex;justify-content:center;align-items:center;padding:28px 0 10px;
}
.logo-wrap img{
  max-width:460px;width:85%;height:auto;image-rendering:auto;
}
.hero{padding:6px 0 16px;text-align:center;}
.claim{font-size:clamp(16px,2.2vw,20px);color:var(--muted);}
h1,h2,h3{line-height:1.2;}
h1{font-size:clamp(26px,5vw,40px);margin:6px 0;}
h2{font-size:clamp(22px,3.6vw,28px);margin:10px 0 8px;color:var(--accent);}
.section{margin:24px 0;}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;}
.small{font-size:.92rem;color:var(--muted);}
.badge{display:inline-block;background:#1b1f27;border:1px solid var(--line);padding:4px 8px;border-radius:10px;margin-right:6px;}
.notice{background:#121616;border:1px solid #2d2a20;border-radius:12px;padding:12px;color:#e8d6ae;}

/* === Footer === */
footer{
  border-top:1px solid var(--line);
  margin-top:36px;
}
.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:16px 0;
  color:var(--muted);
}

/* Link-Block mittig */
.footer-inner .links{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
}
.footer-inner .links a{
  color:var(--muted);
  font-size:.9rem;
  transition:color .15s ease;
}
.footer-inner .links a:hover{color:var(--text);}

/* Link-Icon links */
.footer-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.footer-left .footer-brand img{
  height:92px;
  width:auto;
  filter:drop-shadow(0 0 8px rgba(210,180,100,.25));
  opacity:.95;
}
.footer-left .copy{
  color:var(--muted);
  font-size:.9rem;
  margin:0;
}

/* Footer: Logo über Copy – beides zentriert */
.footer-left{
  display:flex;
  flex-direction:column;
  align-items:center;   /* Logo + Copy horizontal zentrieren */
  gap:6px;
}

.footer-left .footer-brand img{
  height:62px;          /* ggf. 22–36px nach Geschmack */
  width:auto;
  filter:drop-shadow(0 0 8px rgba(210,180,100,.25));
  opacity:.95;
}

.footer-left .copy{
  text-align:center;
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* Footer-Links mittig, fett und größer */
.footer-inner .links{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;              /* Abstand zwischen den Links */
}

.footer-inner .links a{
  font-weight:700;       /* fett */
  font-size:1.1rem;        /* größer (≈ 16px) – gerne 1.05–1.1rem testen */
  color:var(--muted);
  padding:4px 6px;       /* Klickfläche */
  border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.footer-inner .links a:hover{
  color:var(--text);
  background:#1b1f27;
}

/* === Sprache & Buttons === */
.lang-switch{
  display:flex;gap:8px;align-items:center;
}
.lang-switch button{
  background:#1b1f27;border:1px solid var(--line);color:var(--text);
  padding:6px 10px;border-radius:10px;cursor:pointer;
}
.lang-switch button.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0b0c;border:0;
}

/* === Scroll-to-Top === */
.top-btn{
  position:fixed;right:18px;bottom:18px;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease-in-out;
  background:#1b1f27;border:1px solid var(--line);
  border-radius:999px;padding:10px 12px;color:#fff;
}
.top-btn.show{opacity:1;pointer-events:auto;}

/* === Sprache sichtbar schalten === */
[data-lang]{display:none;}
body.lang-de [data-lang="de"]{display:block;}
body.lang-en [data-lang="en"]{display:block;}
.nav a.disabled{opacity:.5;pointer-events:none;}

/* === Tabellen === */
table{width:100%;border-collapse:collapse;}
th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;}

@media (max-width: 520px){
  .footer-inner .links{ gap:14px; }
  .footer-inner .links a{ font-size:.95rem; }
  .footer-left .footer-brand img{ height:24px; }
}

/* Einheitliche Tabellen-Optik auf Portfolio */
.content .tbl{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;           /* gleiche Spaltenbreiten unabhängig vom Text */
  margin-top:8px;
}
.content .tbl th,
.content .tbl td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.content .tbl th:nth-child(1),
.content .tbl td:nth-child(1){ width:28%; }  /* Projekt/Project */
.content .tbl th:nth-child(2),
.content .tbl td:nth-child(2){ width:52%; }  /* Beschreibung/Description */
.content .tbl th:nth-child(3),
.content .tbl td:nth-child(3){ width:20%; }  /* Status */

/* Optional: schöne Umbrüche bei langen Wörtern */
.content .tbl td{ word-wrap:break-word; overflow-wrap:anywhere; }