:root{
      --bg:#07070b;
      --bg2:#0b0b12;

      --glass: rgba(255,255,255,0.06);
      --glass2: rgba(255,255,255,0.09);
      --stroke: rgba(255,255,255,0.12);

      --text: rgba(255,255,255,0.88);
      --muted: rgba(255,255,255,0.62);

      --accent:#ff5a00;
      --accent2:#ff8a3d;

      --shadow: 0 18px 60px rgba(0,0,0,.55);
      --radius: 18px;

      --max: 1180px;
      --rightMenuW: 270px;

      --topbarH: 66px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(255,90,0,.14), transparent 55%),
        radial-gradient(1000px 650px at 80% 25%, rgba(255,90,0,.10), transparent 60%),
        radial-gradient(900px 650px at 40% 100%, rgba(255,90,0,.08), transparent 60%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ color: var(--accent2); }

    /* dezentes Grid */
    .grid-overlay{
      position:fixed; inset:0;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(800px 520px at 50% 18%, black 45%, transparent 70%);
      pointer-events:none;
      opacity:.35;
    }

    /* Header */
    header{
      position: sticky;
      top:0;
      z-index: 60;
      height: var(--topbarH);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: rgba(0,0,0,0.35);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .topbar{
      max-width: calc(var(--max) + var(--rightMenuW));
      margin: 0 auto;
      padding: 10px 14px;
      height: var(--topbarH);
      display:flex;
      align-items:center;
      gap: 12px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 180px;
    }

    /* Logo-Box (Platzhalter) */
    .logoBox{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255,90,0,.35);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,90,0,.55), rgba(255,90,0,.12) 55%, rgba(255,255,255,0.08));
      box-shadow: 0 0 28px rgba(255,90,0,.22);
      flex: 0 0 auto;
      overflow:hidden;
      display:grid;
      place-items:center;
    }
    .logoBox img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .brand h1{
      margin:0;
      font-size: 14px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 800;
    }
    .brand span{
      display:block;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .06em;
      margin-top: 2px;
    }

    /* Desktop Nav */
    nav{
      display:flex;
      align-items:center;
      gap: 6px;
      flex: 1;
      min-width:0;
    }

    .navlink, .navbtn{
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 14px;
      line-height: 1;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text);
      cursor:pointer;
      transition: 160ms ease;
      white-space: nowrap;
    }
    .navlink:hover, .navbtn:hover{
      border-color: rgba(255,90,0,.35);
      background: rgba(255,90,0,.08);
      box-shadow: 0 0 24px rgba(255,90,0,.14);
    }

    .dropdown{
      position: relative;
    }
    .menu{
      position:absolute;
      top: calc(100% + 10px);
      left: 0;
      min-width: 240px;
      padding: 10px;
      border-radius: 14px;
      background: rgba(18,18,22,.78);
      border: 1px solid rgba(255,255,255,0.10);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      display:none;
    }
    .dropdown[data-open="true"] .menu{ display:block; }
    .menu a{
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 12px;
      font-size: 14px;
      color: var(--text);
    }
    .menu a small{ color: var(--muted); }
    .menu a:hover{
      background: rgba(255,90,0,.10);
      outline: 1px solid rgba(255,90,0,.25);
    }

    .spacer{ flex:1; }

    /* Mobile Buttons */
    .iconbtn{
      display:none;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      cursor:pointer;
      transition: 160ms ease;
      color: rgba(255,255,255,0.86);
      flex: 0 0 auto;
    }
    .iconbtn:hover{
      border-color: rgba(255,90,0,.35);
      box-shadow: 0 0 26px rgba(255,90,0,.14);
    }

    /* Layout */
    .wrap{
      max-width: calc(var(--max) + var(--rightMenuW));
      margin: 0 auto;
      padding: 18px 14px 90px;
      display:grid;
      grid-template-columns: 1fr var(--rightMenuW);
      gap: 14px;
      align-items:start;
    }

    main{ min-width:0; }

    aside{
      position: sticky;
      top: calc(var(--topbarH) + 14px);
      height: fit-content;
    }

    /* Panels / Cards */
    .panel{
      border-radius: var(--radius);
      background: var(--glass);
      border: 1px solid var(--stroke);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .panel h2{
      margin:0;
      padding: 14px 14px 10px;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    section{ margin-bottom: 14px; }

    .sectionCard{
      border-radius: var(--radius);
      background: var(--glass);
      border: 1px solid var(--stroke);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .sectionHead{
      padding: 14px 16px;
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .sectionHead h3{
      margin:0;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.78);
    }
    .sectionHead p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
    }
    .sectionBody{
      padding: 14px 16px 16px;
    }

    /* HERO */
    .hero{
      padding: 22px;
      border-radius: calc(var(--radius) + 4px);
      background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045));
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
      position: relative;
      overflow:hidden;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:-120px -120px auto auto;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle at 30% 30%, rgba(255,90,0,.35), transparent 60%);
      transform: rotate(18deg);
      pointer-events:none;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      align-items:stretch;
    }
    .kicker{
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.70);
    }
    .headline{
      margin: 10px 0 8px;
      font-size: clamp(26px, 3.2vw, 42px);
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
    .headline b{
      color: var(--accent2);
      text-shadow: 0 0 28px rgba(255,90,0,.22);
    }
    .lead{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
      max-width: 68ch;
    }
    .ctaRow{
      margin-top: 16px;
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .btn{
      padding: 11px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,90,0,.35);
      background: rgba(255,90,0,.10);
      color: var(--text);
      font-weight: 700;
      font-size: 14px;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      cursor:pointer;
      transition: 160ms ease;
      box-shadow: 0 0 26px rgba(255,90,0,.14);
    }
    .btn:hover{
      background: rgba(255,90,0,.16);
      box-shadow: 0 0 34px rgba(255,90,0,.18);
    }
    .btn.secondary{
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      box-shadow: none;
      color: rgba(255,255,255,0.86);
    }
    .btn.secondary:hover{
      border-color: rgba(255,90,0,.22);
      background: rgba(255,255,255,0.07);
    }

    .featureCard{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.22);
      overflow:hidden;
      display:flex;
      flex-direction: column;
      min-height: 240px;
    }
    .featureTop{
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
    }
    .featureTop strong{
      font-size: 14px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .featureTop small{ color: var(--muted); }

    .featureMedia{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10; /* stabil, kein Layout-Jump */
      background: rgba(255,255,255,0.03);
      border-top: 1px solid rgba(255,255,255,0.06);
      overflow:hidden;
    }
    .featureMedia img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    /* Galerie + Videos */
    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .gallery{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    /* WICHTIG: Tile ist BUTTON, damit es auf allen Browsern stabil bleibt */
    .tile{
      display:block;
      width: 100%;
      position:relative;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      aspect-ratio: 1 / 1;   /* stabil */
      overflow:hidden;
      cursor:pointer;
      padding:0;
    }
    .tile img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      z-index:1;
    }
    .tile::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(180px 120px at 30% 30%, rgba(255,90,0,.18), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
      opacity:.45;
      z-index:2;
      pointer-events:none;
    }
    .tile span{
      position:absolute;
      bottom: 10px;
      left: 10px;
      z-index:3;
      font-size: 12px;
      color: rgba(255,255,255,0.78);
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.12);
      padding: 5px 8px;
      border-radius: 999px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .videos{
      display:grid;
      gap: 10px;
    }
    .video{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      overflow:hidden;
    }
    .video .ratio{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9; /* stabil */
      background: rgba(0,0,0,0.35);
    }
    .video iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    .video .meta{
      padding: 10px 12px;
      display:flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
    }
    .video .meta strong{
      font-size: 13px;
      color: rgba(255,255,255,0.86);
    }
    .video .meta a{
      font-size: 13px;
      color: var(--accent2);
    }

    /* Projekte rechts */
    .projlist{
      padding: 10px;
      display:grid;
      gap: 8px;
    }
    .projlist a{
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.10);
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      font-size: 14px;
    }
    .projlist a:hover{
      border-color: rgba(255,90,0,.35);
      background: rgba(255,90,0,.08);
    }
    .pill{
      font-size: 12px;
      color: var(--muted);
      border: 1px solid rgba(255,255,255,0.14);
      padding: 4px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }

    /* Tabelle */
    .tableWrap{
      overflow:auto;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.20);
    }
    table{
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }
    thead th{
      text-align:left;
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      position: sticky;
      top: 0;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 1;
    }
    tbody td{
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.84);
      font-size: 14px;
      vertical-align: middle;
    }
    tbody tr:hover td{ background: rgba(255,90,0,.06); }

    .status{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
      font-size: 13px;
      color: rgba(255,255,255,0.78);
      white-space: nowrap;
    }
    .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.35);
      box-shadow: 0 0 16px rgba(255,255,255,0.18);
    }
    .status.done{
      border-color: rgba(255,90,0,.30);
      background: rgba(255,90,0,.10);
    }
    .status.done .dot{
      background: rgba(255,90,0,.85);
      box-shadow: 0 0 18px rgba(255,90,0,.25);
    }

    footer{
      margin-top: 16px;
      color: var(--muted);
      font-size: 13px;
      padding: 10px 4px;
    }

    /* Lightbox */
    .lightbox{
      position: fixed;
      inset: 0;
      z-index: 90;
      display:none;
    }
    .lightbox[data-open="true"]{ display:block; }
    .lbBack{
      position:absolute;
      inset:0;
      background: rgba(0,0,0,0.68);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .lbPanel{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(92vw, 980px);
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(18,18,22,.82);
      box-shadow: var(--shadow);
    }
    .lbTop{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .lbTop strong{
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.82);
    }
    .lbClose{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.86);
      cursor:pointer;
    }
    .lbClose:hover{
      border-color: rgba(255,90,0,.30);
      box-shadow: 0 0 24px rgba(255,90,0,.14);
    }
    .lbMedia{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: rgba(0,0,0,0.35);
    }
    .lbMedia img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit: contain;
      display:block;
      background: rgba(0,0,0,0.30);
    }

    /* Mobile drawers */
    .backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 70;
      display:none;
    }
    .backdrop[data-open="true"]{ display:block; }

    .drawer{
      position: fixed;
      z-index: 80;
      top: var(--topbarH);
      bottom: 12px;
      width: min(92vw, 360px);
      border-radius: 18px;
      overflow:hidden;
      display:none;
    }
    .drawer[data-open="true"]{ display:block; }

    .drawer.left{ left: 12px; }
    .drawer.right{ right: 12px; }

    .navStack{
      padding: 10px;
      display:grid;
      gap: 8px;
    }
    .navStack a, .navStack button{
      width: 100%;
      text-align:left;
    }
    .miniMenu{
      padding: 8px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
      display:none;
    }
    .miniMenu[data-open="true"]{ display:block; }
    .miniMenu a{
      display:block;
      padding: 9px 10px;
      border-radius: 12px;
      font-size: 14px;
      color: rgba(255,255,255,0.82);
    }
    .miniMenu a:hover{
      background: rgba(255,90,0,.10);
      outline: 1px solid rgba(255,90,0,.22);
    }

    /* Responsive */
    @media (max-width: 1020px){
      .wrap{ grid-template-columns: 1fr; }
      aside{ display:none; } /* auf Mobile in Drawer */
      nav{ display:none; }
      .iconbtn{ display:inline-flex; }
      .heroGrid{ grid-template-columns: 1fr; }
      .grid2{ grid-template-columns: 1fr; }
      .gallery{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .brand{ min-width: 0; }
      .brand h1{ letter-spacing: .16em; }
      .gallery{ grid-template-columns: repeat(2, 1fr); }
      .hero{ padding: 18px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition: none !important; scroll-behavior: auto !important; }
    }