@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
    * { box-sizing: border-box; }
    :root {
      --text: #edf3ff;
      --muted: #b7c3da;
      --blue: #83b8e6;
      --gold: #efb46b;
      --line: rgba(255,255,255,.10);
      --line-strong: rgba(255,255,255,.16);
      --shadow: 0 22px 80px rgba(0,0,0,.35);
      --radius: 16px;
      --max: 1180px;
      --bg1: #040915;
      --bg2: #081325;
      --bg3: #09162d;
      --panel: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
    }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      background:
        radial-gradient(circle at 15% 15%, rgba(131,184,230,.15), transparent 22%),
        radial-gradient(circle at 80% 12%, rgba(131,184,230,.07), transparent 20%),
        linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 40%, var(--bg3) 100%);
      line-height: 1.6;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    main { flex: 1; }
    .container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
    .header {
      position: sticky; top: 0; z-index: 30;
      backdrop-filter: blur(24px);
      background: linear-gradient(180deg, rgba(4, 9, 21, .65), rgba(4, 9, 21, .48) 90%);
      border-bottom: 1px solid rgba(255,255,255,.08);
      box-shadow: none;
    }
    .header::after {
      content: none;
    }
    .nav {
      min-height: 68px;
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      position: relative;
    }
    .brand {
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: .01em;
      display: flex; align-items: center;
      transition: transform .3s ease;
    }
    .brand:hover {
      transform: scale(1.02);
    }
    .brand img {
      width: 160px;
      height: auto;
      filter: drop-shadow(0 4px 16px rgba(131,184,230,.15));
    }
    .nav-right { display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:flex-end; }
    .nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .nav-links a {
      color: var(--muted); font-weight: 600;
      position: relative;
      transition: color .3s ease;
      padding-bottom: 4px;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: var(--blue);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .3s ease;
    }
    .nav-links a:hover {
      color: #fff;
    }
    .nav-links a[aria-current="page"] { color: #fff; }
    .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
    .lang-switch {
      display:flex; gap:4px; padding:4px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.04);
      border-radius:999px;
    }
    .lang-switch button {
      border:0; background:transparent; color:var(--muted);
      padding:4px 11px; border-radius:999px; font-weight:700; cursor:pointer;
      transition:.3s ease;
      font-size: .75rem;
    }
    .lang-switch button:hover:not(.active) {
      color: #fff;
      background: rgba(255,255,255,.06);
    }
    .lang-switch button.active {
      background: var(--blue);
      color: #040915;
      box-shadow: 0 2px 8px rgba(131,184,230,.18);
    }
    .hero { padding: 80px 0 60px; }
    .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 14px; border-radius: 999px;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
      font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #dce7f8;
    }
    h1 {
      margin: 8px 0 14px;
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: .98; letter-spacing: -.04em; max-width: 11ch;
    }
    .lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; margin: 0 0 18px; }
    .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
    .btn {
      min-height: 52px; padding: 0 22px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 800; border: 1px solid transparent; cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      background: var(--blue);
      color: #040915; box-shadow: 0 14px 36px rgba(131,184,230,.22);
    }
    .btn-secondary {
      background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--text);
    }
    .btn-block { width: 100%; }
    .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .glass {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .stat {
      border-radius: 14px; padding: 20px;
      min-height: 136px;
      display:flex; flex-direction:column; justify-content:center;
    }
    .stat .title {
      display:block; font-size: 1.03rem; font-weight: 800; margin-bottom: 8px; line-height: 1.28; min-height: 2.6em;
    }
    .stat .desc { color: var(--muted); font-size: .93rem; }
    .visual { min-height: 300px; position: relative; display: grid; place-items: center; }
    .orb { position: absolute; border-radius: 999px; filter: blur(10px); opacity: .95; }
    .orb.one { width: 260px; height: 260px; top: 30px; right: 30px; background: radial-gradient(circle, rgba(131,184,230,.40), transparent 68%); }
    .orb.two { width: 280px; height: 280px; left: 0; bottom: 40px; background: radial-gradient(circle, rgba(131,184,230,.15), transparent 68%); }
    .visual-card { width: 100%; border-radius: 20px; padding: 22px 26px; position: relative; overflow: hidden; }
    .visual-card::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(145deg, rgba(255,255,255,.10), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.02), transparent 55%);
      pointer-events: none;
    }
    .visual-card img, .visual-card svg { display: block; width: min(100%, 279px); margin: 0 auto 12px; }
    .visual-card h2 { margin: 0 0 10px; font-size: 1.8rem; letter-spacing: -.02em; }
    .visual-card p { margin: 0; color: var(--muted); }
    .section { padding: 80px 0; }
    .section-alt { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }
    .section-head { max-width: 860px; margin-bottom: 26px; }
    .section-head h2 { margin: 14px 0 12px; font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em; }
    .section-head p, .feature p, .idea-card p, .contact-box p, .footer p { color: var(--muted); }
      .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .feature { border-radius: var(--radius); padding: 26px; }
    .feature h3 { margin: 0 0 10px; font-size: 1.18rem; }
    .ideas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .idea-card { border-radius: var(--radius); overflow: hidden; }
    .idea-visual {
      min-height: 220px; position: relative; overflow: hidden;
      display:flex; align-items:flex-end; justify-content:flex-start; padding: 20px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .idea-visual::before {
      content:""; position:absolute; inset:0;
      background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.00));
      pointer-events:none;
    }
    .v1 { background: linear-gradient(135deg, rgba(20,56,82,.95), rgba(14,40,65,.92) 55%, rgba(22,63,80,.86)); }
    .v2 { background: linear-gradient(135deg, rgba(15,39,68,.95), rgba(19,50,79,.92) 55%, rgba(42,84,90,.82)); }
    .v3 { background: linear-gradient(135deg, rgba(18,49,77,.95), rgba(17,44,71,.92) 55%, rgba(68,88,86,.82)); }
    .idea-badge {
      position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
      min-width: 112px; min-height: 112px; padding: 16px; border-radius: 28px; border: 1px solid var(--line-strong);
      background: linear-gradient(180deg, rgba(4,9,21,.18), rgba(255,255,255,.07)); backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0,0,0,.18);
    }
    .idea-badge.mpf { min-width: 126px; min-height: 126px; padding: 12px; background: linear-gradient(180deg, rgba(4,9,21,.22), rgba(255,255,255,.05)); }
    .idea-body { padding: 22px; }
    .idea-card h3 { margin: 0 0 8px; font-size: 1.18rem; }
    .contact { padding-bottom: 80px; }
    .contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items: start; }
    .contact-box, .form-box { border-radius: 16px; padding: 28px; }
    .note { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #e3ebf8; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    label { font-weight: 700; color: #edf3ff; }
    input, textarea {
      width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: white;
      border-radius: 10px; padding: 14px 16px; font: inherit; outline: none;
    }
    input:focus, textarea:focus { border-color: rgba(239,180,107,.70); background: rgba(255,255,255,.06); }
    textarea { min-height: 150px; resize: vertical; }
    .form-status {
      margin: 0 0 14px;
      min-height: 1.4em;
      color: var(--muted);
      font-size: .95rem;
    }
    .form-status.is-visible {
      color: #dce7f8;
    }
    .contact-title { margin: 14px 0 12px; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; }
    .contact-option { margin-top: 18px; font-size: .95rem; color: var(--muted); }
    .contact-email {
      color: var(--blue); font-weight: 700;
      border-bottom: 1px solid rgba(131,184,230,.35);
      transition: color .2s ease, border-color .2s ease;
    }
    .contact-email:hover { color: #fff; border-color: rgba(255,255,255,.5); }
    .footer { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0 16px; }
    .footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
    .footer-logo { width: 120px; margin-bottom: 8px; }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); align-items:center; }
    .footer-brand { display: flex; flex-direction: column; gap: 4px; }
    .footer-brand strong { font-size: 1.05rem; letter-spacing: -.01em; }
    .footer-brand p { margin: 0; font-size: .88rem; color: var(--muted); }
    .footer-nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
    .footer-nav a { color: var(--muted); font-size: .9rem; transition: color .2s ease; }
    .footer-nav a:hover { color: var(--text); }
    .footer-bottom { margin-top: 0; padding-top: 0; border-top: none; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
    .footer-bottom p { margin: 0; color: var(--muted); font-size: .82rem; }
    .footer-legal { display: flex; gap: 16px; align-items: center; }
    .footer-legal a { color: var(--muted); font-size: .82rem; transition: color .2s ease; }
    .footer-legal a:hover { color: var(--text); }
    .footer-legal a[aria-current="page"] { color: var(--text); }

    /* Legal content (impressum, datenschutz) */
    .legal-content { max-width: 780px; padding: 12px 0 16px; }
    .legal-content h2 { margin: 0 0 20px; font-size: clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; font-weight: 700; color: var(--text); }
    .legal-content h3 { margin: 32px 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--text); }
    .legal-content p { color: var(--muted); font-size: .97rem; line-height: 1.72; margin: 0 0 14px; }
    .legal-content a.contact-email { font-size: .97rem; }
    .legal-list { color: var(--muted); font-size: .97rem; line-height: 1.72; padding-left: 22px; margin: 0 0 14px; }
    .legal-list li { margin-bottom: 4px; }
    .legal-note { font-size: .85rem; color: var(--muted); opacity: .65; margin-top: 32px; }
    .legal-divider { border: none; border-top: 1px solid var(--line); margin: 6px 0; }

    /* Bilingual content toggle (uses class set by applyTranslations on <html>) */
    .lang-de .lang-en-content { display: none; }
    .lang-en .lang-de-content { display: none; }

    /* ---- Portfolio Page ---- */
    .portfolio-hero, .about-hero { padding: 40px 0 20px; }
    .portfolio-hero h1 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); max-width: none; }
    .portfolio-hero .lead { color: var(--muted); font-size: 1.08rem; max-width: 58ch; margin: 0; }
    .about-hero h1 { margin: 8px 0 14px; font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; max-width: 22ch; }
    .about-hero .lead { color: var(--muted); font-size: 1.05rem; max-width: 62ch; margin: 0; }
    .about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }
    .about-visual { position: relative; display: grid; place-items: center; min-height: 380px; }
    .about-visual-img { width: 100%; max-width: 400px; position: relative; z-index: 1; }
    .team-bg { border-radius: var(--radius); padding: 36px 40px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 16px; }
    .team-bg h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.025em; line-height: 1.2; }
    .team-bg p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 72ch; }
    .ind-tags { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
    .ind-tag {
      padding: 7px 16px; border-radius: 999px;
      background: rgba(131,184,230,.07); border: 1px solid rgba(131,184,230,.18);
      font-size: .82rem; font-weight: 700; letter-spacing: .03em; color: var(--blue);
    }
    .project-section { padding-top: 28px; padding-bottom: 80px; }
    .project-list { display: flex; flex-direction: column; gap: 18px; }
    .project-entry { display: flex; border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s ease, transform .25s ease; scroll-margin-top: 96px; }
    .project-entry:hover { transform: translateY(-2px); box-shadow: 0 24px 64px rgba(0,0,0,.40); }
    .project-entry.flip { flex-direction: row-reverse; }
    .project-visual {
      flex: 0 0 28%; min-height: 220px; position: relative;
      display: flex; align-items: center; justify-content: center; padding: 28px;
      border-right: 1px solid var(--line);
    }
    .project-entry.flip .project-visual { border-right: 0; border-left: 1px solid var(--line); }
    .project-visual::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(145deg, rgba(255,255,255,.04), transparent 60%);
      pointer-events: none;
    }
    .pv1 { background: linear-gradient(145deg, rgba(131,184,230,.07), rgba(131,184,230,.03)); }
    .pv2 { background: linear-gradient(145deg, rgba(131,184,230,.06), rgba(80,160,200,.04)); }
    .pv3 { background: linear-gradient(145deg, rgba(131,184,230,.06), rgba(100,180,160,.03)); }
    .project-badge-large {
      position: relative; z-index: 1;
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 152px; min-height: 152px; padding: 22px; border-radius: 20px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(4,9,21,.30) 70%);
      backdrop-filter: blur(14px);
      box-shadow: 0 24px 64px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
      font-size: 1.15rem; font-weight: 900; letter-spacing: .06em; color: var(--text);
    }
    .project-badge-large.mpf-badge { font-size: 1.6rem; }
    .project-content {
      flex: 1; padding: 28px 36px;
      display: flex; flex-direction: column; justify-content: center; gap: 12px;
    }
    .project-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .status-badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 13px; border-radius: 999px;
      background: rgba(239,180,107,.10); border: 1px solid rgba(239,180,107,.24);
      font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--gold);
    }
    .status-badge::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      background: var(--gold); box-shadow: 0 0 6px rgba(239,180,107,.55);
    }
    .project-domain {
      display: inline-flex; align-items: center;
      padding: 5px 12px; border-radius: 999px;
      background: rgba(131,184,230,.07); border: 1px solid rgba(131,184,230,.14);
      font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--blue);
    }
    .project-content h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.02em; line-height: 1.2; }
    .project-content p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.65; max-width: 54ch; }
    .portfolio-teaser {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
      padding-top: 28px; margin-top: 6px; border-top: 1px solid var(--line);
    }
    .portfolio-teaser-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .pteaser-badge {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 8px 16px; border-radius: 14px;
      border: 1px solid var(--line); background: rgba(255,255,255,.04);
      font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--muted);
    }
    .home-cards { padding: 80px 0; }
    .hcards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hcard {
      border-radius: var(--radius); padding: 20px 22px 16px;
      display: flex; flex-direction: column; gap: 10px;
      text-decoration: none; color: inherit;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .hcard:hover {
      transform: translateY(-5px);
      box-shadow: 0 32px 80px rgba(0,0,0,.45);
      border-color: rgba(255,255,255,.22);
    }
    .hcard-label {
      font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
      color: var(--blue);
    }
    .hcard p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; flex: 1; }
    .hcard-arrow {
      font-size: 1.4rem; color: var(--muted); opacity: .7;
      transition: transform .25s ease, opacity .25s ease;
      align-self: flex-end;
    }
    .hcard:hover .hcard-arrow { transform: translateX(5px); opacity: 1; }
    .home-projs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .home-projs-link { font-size: .88rem; color: var(--muted); transition: color .2s ease; }
    .home-projs-link:hover { color: var(--text); }
    .hcard-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .hcard-badge {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 5px 12px; border-radius: 10px;
      font-size: .75rem; font-weight: 900; letter-spacing: .05em; color: var(--text);
      border: 1px solid rgba(255,255,255,.14);
    }
    .hcard-badge.pv1 { background: linear-gradient(135deg, rgba(14,44,72,.95), rgba(18,52,82,.90)); }
    .hcard-badge.pv2 { background: linear-gradient(135deg, rgba(12,36,64,.95), rgba(32,72,84,.88)); }
    .hcard-badge.pv3 { background: linear-gradient(135deg, rgba(14,40,70,.95), rgba(54,80,78,.88)); }
    .hcard-name { font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.38; }
    @media (max-width: 1080px) {
      .hero-grid, .features, .ideas, .contact-grid, .about-grid { grid-template-columns: 1fr; }
      .visual { min-height: auto; }
      h1 { max-width: 12ch; }
      .project-content { padding: 36px 40px; }
      .hcards-grid { grid-template-columns: 1fr; }
      .about-visual { min-height: 280px; }
      .hero { padding-bottom: 32px; }
      .home-cards { padding-top: 40px; }
    }
    @media (max-width: 720px) {
      .nav { flex-direction: column; padding: 20px 0; }
      .nav-right { justify-content:center; }
      .nav-links { justify-content: center; gap: 16px; }
      .brand img { width: 128px; }
      .stats, .field-row { grid-template-columns: 1fr; }
      .hero { padding-top: 44px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
      .footer-nav { gap: 14px; }
      .idea-badge { min-width: 96px; min-height: 96px; }
      .project-entry, .project-entry.flip { flex-direction: column; }
      .project-visual { flex: 0 0 auto; min-height: 220px; border-right: 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--line); }
      .project-content { padding: 28px 24px; }
      .project-badge-large { min-width: 120px; min-height: 120px; }
    }