:root{
    --bg:#0c0c0d;
    --bg-panel:#131315;
    --bg-panel-2:#0f0f10;
    --line:#2b2b2e;
    --line-strong:#45454a;
    --ink:#f3f1ea;
    --ink-dim:#98968f;
    --ink-dimmer:#6c6a65;
    --accent:#f07300;
    --accent-ink:#0c0c0d;
    --accent-soft:rgba(240,115,0,0.12);
    --mono:'IBM Plex Mono', monospace;
    --sans:'IBM Plex Sans', sans-serif;
    --disp:'Space Grotesk', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent); color:var(--accent-ink);}

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  /* height:auto matters: without it the HTML height attribute pins the box and any
     aspect-ratio further down is ignored. Rules that want a fixed height set one. */
  img{display:block; max-width:100%; height:auto;}

  :focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  /* blueprint grid backdrop */
  .grid-bg{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:0.35;
    mask-image:linear-gradient(to bottom, black, transparent 92%);
    pointer-events:none;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:var(--accent);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--disp);
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.08;
  }

  /* corner crop marks - architectural drawing frame */
  .crop{
    position:relative;
  }
  .crop::before,
  .crop::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:1px solid var(--line-strong);
    opacity:0.9;
  }
  .crop::before{ top:0; left:0; border-right:none; border-bottom:none; }
  .crop::after{ top:0; right:0; border-left:none; border-bottom:none; }

  /* ---------- HEADER ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(12,12,13,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:84px;
  }
  .nav-logo img{ height:44px; width:auto; }
  .nav-links{
    display:flex;
    gap:36px;
    align-items:center;
    font-family:var(--mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .nav-links a{ position:relative; padding:6px 0; transition:color .2s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--accent);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }

  .btn{
    font-family:var(--mono);
    font-size:0.76rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:13px 22px;
    border:1px solid var(--line-strong);
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition:border-color .2s, background .2s, color .2s, transform .2s;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--accent);
    color:var(--accent-ink);
    border-color:var(--accent);
  }
  .btn-primary:hover{ background:#ff8a1f; border-color:#ff8a1f; transform:translateY(-1px); }
  .btn-ghost{
    color:var(--ink);
    border-color:var(--line-strong);
  }
  .btn-ghost:hover{ border-color:var(--ink); }
  .btn-ghost .arrow, .btn-primary .arrow{ transition:transform .2s; }
  .btn:hover .arrow{ transform:translateX(3px); }

  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{ display:none; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:88px 0 96px;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .hero-inner{
    position:relative;
    display:grid;
    grid-template-columns:1.25fr 0.8fr;
    gap:56px;
    align-items:center;
  }
  .hero-copy h1{
    font-size:clamp(2.5rem, 4.6vw, 4.1rem);
    margin-top:22px;
  }
  .hero-copy h1 .hl{ color:var(--accent); }
  .hero-copy p{
    color:var(--ink-dim);
    max-width:46ch;
    font-size:1.08rem;
    margin-top:24px;
  }
  .hero-actions{
    display:flex;
    gap:16px;
    margin-top:38px;
    flex-wrap:wrap;
  }
  .hero-meta{
    display:flex;
    gap:34px;
    margin-top:56px;
    padding-top:28px;
    border-top:1px solid var(--line);
    font-family:var(--mono);
  }
  .hero-meta div strong{
    display:block;
    font-size:1.5rem;
    font-family:var(--disp);
    color:var(--ink);
    font-weight:600;
  }
  .hero-meta div span{
    font-size:0.7rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
  }

  /* ---------- HERO PHOTO ---------- */
  .hero-photo{
    position:relative;
    width:100%;
    max-width:440px;
    margin-left:auto;
  }
  /* offset technical-drawing frame behind the photo */
  .hero-photo::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translate(12px,12px);
    border:1px solid var(--line-strong);
    pointer-events:none;
  }
  .hero-photo figure{
    position:relative;
    margin:0;
    overflow:hidden;
    border:1px solid var(--line-strong);
    background:var(--bg-panel-2);
  }
  /* Fixed height on purpose: the hero photo stands as a tall portrait card next to
     the copy column, not as a wide band. 587px is the source height, so the crop is
     identical to what it has always been. Do not swap this for height:auto. */
  .hero-photo img{
    width:100%;
    height:587px;
    object-fit:cover;
    object-position:50% 50%;
    filter:saturate(.94) contrast(1.03);
  }
  /* scrim so the caption stays legible and the photo settles into the dark page */
  .hero-photo figure::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(12,12,13,0) 55%, rgba(12,12,13,.85) 100%);
    pointer-events:none;
  }
  .photo-tag{
    position:absolute;
    left:0; bottom:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:15px 16px;
    font-family:var(--mono);
    text-transform:uppercase;
  }
  .photo-tag .main{
    font-size:0.64rem;
    letter-spacing:.1em;
    color:var(--ink);
  }
  .photo-tag .sub{
    font-size:0.56rem;
    letter-spacing:.08em;
    color:var(--ink-dimmer);
  }
  .photo-scale{
    position:absolute;
    top:13px; right:0;
    z-index:2;
    background:var(--accent);
    color:var(--accent-ink);
    font-family:var(--mono);
    font-size:0.58rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:4px 8px;
  }
  /* registration mark, echoing the blueprint placeholders */
  .hero-photo .corner{
    position:absolute;
    top:10px; left:10px;
    z-index:2;
    width:10px; height:10px;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
  }
  /* the photo builds in from the top, like a floor being fitted out */
  .photo-reveal{
    clip-path:inset(0 0 100% 0);
    animation:photoReveal .9s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay:.2s;
  }
  @keyframes photoReveal{ to{ clip-path:inset(0 0 0 0); } }

  .fade-up{
    opacity:0;
    transform:translateY(14px);
    animation:fadeUp .7s ease forwards;
  }
  .fade-up.d1{ animation-delay:.15s; }
  .fade-up.d2{ animation-delay:.3s; }
  .fade-up.d3{ animation-delay:.45s; }
  @keyframes fadeUp{ to{ opacity:1; transform:none; } }

  /* labels land as the photo finishes revealing */
  .tag-pop{
    animation:tagPop .5s ease forwards;
    opacity:0;
    animation-delay:1s;
  }
  @keyframes tagPop{ to{ opacity:1; } }

  /* ---------- SECTION shared ---------- */
  section{ padding:110px 0; border-bottom:1px solid var(--line); }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:64px;
    flex-wrap:wrap;
  }
  .section-head h2{ font-size:clamp(1.9rem, 3.2vw, 2.7rem); margin-top:16px; max-width:16ch; }
  .section-head p{ color:var(--ink-dim); max-width:38ch; padding-bottom:6px; }

  /* ---------- SERVICES ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .service{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:40px 34px;
    position:relative;
    transition:background .25s ease;
  }
  .service:hover{ background:var(--bg-panel); }
  .service .num{
    font-family:var(--mono);
    font-size:0.72rem;
    color:var(--ink-dimmer);
    letter-spacing:.1em;
  }
  .service .icon{
    width:46px; height:46px;
    margin:22px 0 20px;
    color:var(--accent);
  }
  .service h3{
    font-size:1.22rem;
    margin-bottom:12px;
    font-weight:600;
  }
  .service p{ color:var(--ink-dim); font-size:0.95rem; }
  .service.wide{ grid-column:span 1; }

  /* ---------- PROCESS ---------- */
  .process-line{
    position:relative;
    display:flex;
    justify-content:space-between;
    margin-top:70px;
  }
  .process-line::before{
    content:"";
    position:absolute;
    top:9px;
    left:9px;
    right:9px;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .process-step{
    position:relative;
    width:22%;
    text-align:left;
  }
  .process-step .tick{
    width:19px; height:19px;
    border:1px solid var(--accent);
    background:var(--bg);
    position:relative;
    z-index:2;
  }
  .process-step .tick::after{
    content:"";
    position:absolute;
    inset:5px;
    background:var(--accent);
  }
  .process-step .label{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    margin-top:22px;
  }
  .process-step h3{ margin-top:8px; font-size:1.2rem; }
  .process-step p{ margin-top:10px; color:var(--ink-dim); font-size:0.92rem; max-width:26ch; }

  /* ---------- WHY / STATS ---------- */
  .why{
    background:var(--bg-panel);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
  }
  .why-list{ display:flex; flex-direction:column; gap:0; }
  .why-item{
    padding:26px 0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:64px 1fr;
    gap:22px;
  }
  .why-item:last-child{ border-bottom:1px solid var(--line); }
  .why-item .mono-tag{
    font-family:var(--mono);
    color:var(--accent);
    font-size:0.85rem;
    padding-top:2px;
  }
  .why-item h3{ font-size:1.08rem; font-weight:600; margin-bottom:6px; }
  .why-item p{ color:var(--ink-dim); font-size:0.93rem; }

  .stats{ display:flex; flex-direction:column; justify-content:center; gap:38px; }
  .stat strong{
    display:block;
    font-family:var(--disp);
    font-size:clamp(1.7rem,2.6vw,2.2rem);
    font-weight:600;
    line-height:1.1;
    color:var(--ink);
  }
  .stat strong .accent{
    color:var(--accent);
    font-size:1.85em;
    line-height:1;
    letter-spacing:-0.02em;
    margin-right:0.06em;
  }
  .stat span{
    font-family:var(--mono);
    font-size:0.69rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
  }

  /* ---------- CTA ---------- */
  .cta{
    position:relative;
    text-align:left;
    padding:110px 0;
  }
  .cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
  }
  .cta h2{ font-size:clamp(2rem,4vw,3rem); max-width:16ch; }
  .cta p{ color:var(--ink-dim); margin-top:16px; max-width:44ch; }
  .cta-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .cta-copy{ max-width:620px; }

  /* ---------- DOWNLOAD ---------- */
  .dl-stack{
    flex:1 1 100%;
    scroll-margin-top:110px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    gap:22px;
  }
  .dl-card{
    flex:1 1 320px;
    scroll-margin-top:110px;
    display:flex;
    flex-direction:column;
    background:var(--bg-panel);
    border:1px solid var(--line-strong);
    padding:32px 30px;
    position:relative;
  }
  .dl-card::before{
    content:"";
    position:absolute;
    top:-1px; right:-1px;
    width:46px; height:46px;
    border-top:1px solid var(--accent);
    border-right:1px solid var(--accent);
  }
  .dl-doc{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin:18px 0 22px;
  }
  .dl-doc svg{ flex:none; color:var(--accent); }
  .dl-title{
    font-family:var(--disp);
    font-size:1.18rem;
    font-weight:600;
    line-height:1.35;
  }
  .dl-meta{
    font-family:var(--mono);
    font-size:0.74rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    margin-top:8px;
  }
  .dl-card p{ color:var(--ink-dim); font-size:0.92rem; margin-bottom:24px; }
  .dl-card .btn{ width:100%; justify-content:center; margin-top:auto; }
  .btn:hover .arrow.down{ transform:translateY(3px); }

  @media (max-width:640px){
    .dl-card{ flex:1 1 100%; }
  }

  /* ---------- FOOTER ---------- */
  footer{ padding:64px 0 40px; }
  .foot-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
    padding-bottom:48px;
    border-bottom:1px solid var(--line);
  }
  .foot-logo img{ height:52px; width:auto; margin-bottom:18px; }
  .foot-logo p{ color:var(--ink-dimmer); font-size:0.88rem; max-width:34ch; }
  .foot-cols{ display:flex; gap:64px; flex-wrap:wrap; }
  .foot-col h4{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    margin-bottom:16px;
  }
  .foot-col a, .foot-col p{
    display:block;
    color:var(--ink-dim);
    font-size:0.9rem;
    margin-bottom:10px;
    transition:color .2s;
  }
  .foot-col a:hover{ color:var(--accent); }
  .foot-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:26px;
    font-family:var(--mono);
    font-size:0.72rem;
    color:var(--ink-dimmer);
    flex-wrap:wrap;
    gap:10px;
  }
  .foot-legal{ display:flex; gap:24px; flex-wrap:wrap; }
  .foot-bottom a{ transition:color .2s; }
  .foot-bottom a:hover{ color:var(--accent); }

  @media (max-width:940px){
    .nav-logo img{ height:38px; }
    .hero-inner{ grid-template-columns:1fr; gap:52px; }
    .hero-photo{ max-width:440px; margin:0 auto; }
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .why{ grid-template-columns:1fr; }
    .process-line{ flex-direction:column; gap:34px; }
    .process-line::before{ display:none; }
    .process-step{ width:100%; padding-left:26px; border-left:1px solid var(--line-strong); }
  }
  @media (max-width:640px){
    .wrap{ padding:0 20px; }
    .nav-links{ display:none; }
    .nav-logo img{ height:34px; }
    .foot-logo img{ height:40px; }
    .services-grid{ grid-template-columns:1fr; }
    .hero-meta{ gap:24px; flex-wrap:wrap; }
    .btn span.long{ display:none; }
  }

  /* ---------- IMAGE PLACEHOLDER ---------- */
  .img-slot{
    position:relative;
    width:100%;
    background:
      repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 14px),
      var(--bg-panel-2);
    border:1px solid var(--line-strong);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .img-slot .img-slot-inner{
    text-align:center;
    color:var(--ink-dimmer);
  }
  .img-slot svg{
    width:34px; height:34px;
    margin:0 auto 10px;
    opacity:0.8;
  }
  .img-slot .img-slot-label{
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .img-slot .img-slot-dim{
    font-family:var(--mono);
    font-size:0.62rem;
    color:var(--ink-dimmer);
    opacity:0.7;
    margin-top:4px;
  }
  .img-slot::after{
    content:"";
    position:absolute;
    top:8px; left:8px;
    width:10px; height:10px;
    border-top:1px solid var(--accent);
    border-left:1px solid var(--accent);
    opacity:0.7;
  }

  /* ---------- PROJECTS ---------- */
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .project-card{ background:var(--bg); padding-bottom:26px; }
  .project-card .img-slot{ aspect-ratio:4/3; border:none; border-bottom:1px solid var(--line); }
  .project-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px 0;
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .project-meta span:last-child{ color:var(--ink-dimmer); }
  .project-card h3{ padding:10px 24px 0; font-size:1.08rem; font-weight:600; }
  .project-card .loc{ padding:8px 24px 0; color:var(--ink-dim); font-size:0.88rem; }
  .projects-foot{
    display:flex;
    justify-content:center;
    margin-top:48px;
  }

  @media (max-width:940px){
    .projects-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:640px){
    .projects-grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    .fade-up, .tag-pop, .photo-reveal{ animation:none !important; opacity:1 !important; clip-path:none !important; transform:none !important; }
  }

  /* ---------- LEGAL PAGES (Impressum, Datenschutz, Cookies, Disclaimer) ---------- */
  .legal-hero{
    position:relative;
    padding:88px 0 64px;
    border-bottom:1px solid var(--line);
  }
  .legal-hero h1{
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    margin-top:18px;
  }
  .legal-hero p{
    color:var(--ink-dim);
    margin-top:18px;
    max-width:52ch;
  }
  .legal-hero .breadcrumb{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    margin-bottom:26px;
  }
  .legal-hero .breadcrumb a{ transition:color .2s; }
  .legal-hero .breadcrumb a:hover{ color:var(--accent); }

  .legal{ padding:96px 0 110px; border-bottom:1px solid var(--line); }
  .legal-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .legal-block{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:38px 34px 42px;
    background:var(--bg-panel-2);
  }
  .legal-block h2{
    font-size:1.15rem;
    font-weight:600;
    margin-top:14px;
  }
  .legal-block .mono-tag{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .legal-block .body{ margin-top:20px; }
  .legal-block p{ color:var(--ink-dim); font-size:0.95rem; }
  .legal-block a{ color:var(--ink); border-bottom:1px solid var(--line-strong); transition:color .2s, border-color .2s; }
  .legal-block a:hover{ color:var(--accent); border-color:var(--accent); }

  .legal-rows{ display:flex; flex-direction:column; gap:16px; }
  .legal-row{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:18px;
    align-items:baseline;
  }
  .legal-row dt{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
  }
  .legal-row dd{ color:var(--ink); font-size:0.95rem; }
  .legal-row dd .dim{ color:var(--ink-dim); }

  .legal-note{
    margin-top:44px;
    padding-top:26px;
    border-top:1px solid var(--line);
    color:var(--ink-dimmer);
    font-size:0.86rem;
    max-width:72ch;
  }

  /* long-form legal text: a numbered rail on the left, prose on the right */
  .legal-doc{
    display:flex;
    flex-direction:column;
    border-top:1px solid var(--line);
  }
  .legal-sec{
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    gap:40px;
    padding:44px 0;
    border-bottom:1px solid var(--line);
  }
  .legal-sec > .sec-label{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    padding-top:6px;
  }
  .legal-sec > .sec-label .n{
    display:block;
    color:var(--accent);
    margin-bottom:8px;
  }
  .legal-sec h2{
    font-size:1.5rem;
    font-weight:600;
    margin-bottom:18px;
  }
  .legal-sec h3{
    font-family:var(--sans);
    font-size:1rem;
    font-weight:600;
    margin:26px 0 8px;
  }
  .legal-sec p{
    color:var(--ink-dim);
    font-size:0.95rem;
    max-width:68ch;
    margin-bottom:14px;
  }
  .legal-sec p:last-child{ margin-bottom:0; }
  .legal-sec a{ color:var(--ink); border-bottom:1px solid var(--line-strong); transition:color .2s, border-color .2s; }
  .legal-sec a:hover{ color:var(--accent); border-color:var(--accent); }
  .legal-sec ul{ margin:0 0 14px; max-width:68ch; }
  .legal-sec li{
    position:relative;
    color:var(--ink-dim);
    font-size:0.95rem;
    padding-left:20px;
    margin-bottom:9px;
  }
  .legal-sec li::before{
    content:"";
    position:absolute;
    left:0; top:9px;
    width:7px; height:1px;
    background:var(--accent);
  }
  .legal-sec .callout{
    margin-top:20px;
    padding:22px 24px;
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    border-left:2px solid var(--accent);
  }
  .legal-sec .callout p{ margin-bottom:0; }

  /* storage/cookie inventory table */
  .legal-table{
    width:100%;
    border-collapse:collapse;
    margin-top:6px;
    font-size:0.9rem;
  }
  .legal-table th{
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
    text-align:left;
    font-weight:400;
    padding:0 18px 12px 0;
    border-bottom:1px solid var(--line-strong);
  }
  .legal-table td{
    color:var(--ink-dim);
    padding:16px 18px 16px 0;
    border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  .legal-table td:first-child{
    font-family:var(--mono);
    font-size:0.82rem;
    color:var(--ink);
    white-space:nowrap;
  }

  @media (max-width:940px){
    .legal-grid{ grid-template-columns:1fr; }
    .legal-sec{ grid-template-columns:1fr; gap:16px; padding:38px 0; }
    .legal-sec > .sec-label{ padding-top:0; }
    .legal-sec > .sec-label .n{ display:inline; margin:0 10px 0 0; }
  }
  @media (max-width:640px){
    .legal{ padding:64px 0 76px; }
    .legal-block{ padding:30px 22px 34px; }
    .legal-row{ grid-template-columns:1fr; gap:4px; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
    .legal-table thead{ display:none; }
    .legal-table tr{ border-bottom:1px solid var(--line); padding:16px 0; }
    .legal-table td{ border:none; padding:2px 0; }
    .legal-table td::before{
      content:attr(data-label);
      display:block;
      font-family:var(--mono);
      font-size:0.64rem;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--ink-dimmer);
      margin-bottom:3px;
    }
  }

  /* ---------- COOKIE-HINWEIS ---------- */
  .cookie-banner{
    position:fixed;
    left:20px; right:20px; bottom:20px;
    z-index:120;
    max-width:760px;
    margin:0 auto;
    padding:28px 30px 26px;
    background:var(--bg-panel);
    border:1px solid var(--line-strong);
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
    /* mirrors the corner accent used on the download cards */
    background-image:linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
    background-repeat:no-repeat;
    background-size:36px 2px, 2px 36px;
    background-position:left top, left top;
    opacity:0;
    transform:translateY(14px);
    animation:cookieIn .45s cubic-bezier(.2,.7,.3,1) .35s forwards;
  }
  .cookie-banner[hidden]{ display:none; }
  @keyframes cookieIn{ to{ opacity:1; transform:translateY(0); } }

  .cookie-banner .eyebrow{ margin-bottom:12px; }
  .cookie-banner h2{
    font-size:1.12rem;
    font-weight:600;
    margin-bottom:10px;
  }
  .cookie-banner p{
    color:var(--ink-dim);
    font-size:0.92rem;
    max-width:62ch;
    line-height:1.75;
  }
  .cookie-banner p a{
    color:var(--ink);
    border-bottom:1px solid var(--line-strong);
    transition:color .2s, border-color .2s;
  }
  .cookie-banner p a:hover{ color:var(--accent); border-color:var(--accent); }
  .cookie-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:22px;
  }

  @media (max-width:640px){
    .cookie-banner{ left:12px; right:12px; bottom:12px; padding:24px 22px 22px; }
    .cookie-actions .btn{ width:100%; justify-content:center; }
  }
  @media (prefers-reduced-motion: reduce){
    .cookie-banner{ animation:none; opacity:1; transform:none; }
  }

  /* ---------- REFERENZEN ---------- */
  /* Mirrors the reference slides of the presentation: a three-up row of 16:9
     photos, each with title, location line and a short project note. */
  .ref-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:26px;
  }
  .ref-item{
    background:var(--bg-panel-2);
    border:1px solid var(--line);
    position:relative;
    display:flex;
    flex-direction:column;
    transition:border-color .25s ease;
  }
  .ref-item:hover{ border-color:var(--line-strong); }
  .ref-item::before{
    content:"";
    position:absolute;
    bottom:-1px; right:-1px;
    width:36px; height:36px;
    border-bottom:1px solid var(--accent);
    border-right:1px solid var(--accent);
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .ref-item:hover::before{ opacity:1; }

  .ref-figure{
    position:relative;
    margin:0;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:var(--bg-panel);
  }
  .ref-figure img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    filter:saturate(.96) contrast(1.02);
  }
  .ref-figure .corner,
  .ref-cta .corner{
    position:absolute;
    top:10px; right:10px;
    z-index:2;
    width:10px; height:10px;
    border-top:1px solid var(--accent);
    border-right:1px solid var(--accent);
  }

  .ref-body{ padding:24px 22px 26px; }
  .ref-body h3{
    font-size:1.14rem;
    font-weight:600;
  }
  .ref-loc{
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
    margin-top:10px;
  }
  .ref-body > p{
    color:var(--ink-dim);
    font-size:0.92rem;
    margin-top:14px;
  }

  /* Sixth tile: no photo, invites an enquiry. The dashed edge marks it as the open
     slot rather than a finished project. */
  .ref-cta{
    justify-content:space-between;
    gap:26px;
    padding:26px 22px;
    border-style:dashed;
  }
  .ref-cta:hover{ border-color:var(--accent); }
  .ref-cta-top{ display:block; }
  .ref-cta-title{
    display:block;
    font-family:var(--disp);
    font-size:1.14rem;
    font-weight:600;
    line-height:1.35;
    margin-top:16px;
  }
  .ref-cta-text{
    display:block;
    color:var(--ink-dim);
    font-size:0.92rem;
    margin-top:14px;
  }
  .ref-cta-link{
    display:block;
    font-family:var(--mono);
    font-size:0.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .ref-cta .arrow{ display:inline-block; transition:transform .2s; }
  .ref-cta:hover .arrow{ transform:translateX(3px); }

  /* Column widths stay narrow enough that the photos are never upscaled. */
  @media (max-width:899px){
    .ref-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:479px){
    .ref-grid{ grid-template-columns:minmax(0,1fr); }
  }

  /* ---------- REGIONAL LANDING PAGE (Büroausbau Wiesbaden / Mainz / Frankfurt) ---------- */

  /* the hero reuses .legal-hero; it just needs room for buttons and keyword chips */
  .legal-hero .hero-actions{ margin-top:36px; }

  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
  }
  .chip{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-dim);
    border:1px solid var(--line);
    padding:9px 14px;
    transition:color .2s, border-color .2s;
  }
  a.chip:hover{ color:var(--ink); border-color:var(--accent); }

  /* one card per city — same hairline grid language as .services-grid */
  .city-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .city-card{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:38px 32px 40px;
    background:var(--bg-panel-2);
    transition:background .25s ease;
  }
  .city-card:hover{ background:var(--bg-panel); }
  .city-card .mono-tag{
    font-family:var(--mono);
    font-size:0.7rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .city-card h2{
    font-size:1.32rem;
    font-weight:600;
    margin-top:14px;
  }
  .city-card > p{
    color:var(--ink-dim);
    font-size:0.94rem;
    margin-top:14px;
  }
  .city-facts{
    margin-top:26px;
    border-top:1px solid var(--line);
  }
  .city-fact{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:14px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    align-items:baseline;
  }
  .city-fact dt{
    font-family:var(--mono);
    font-size:0.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-dimmer);
  }
  .city-fact dd{ color:var(--ink); font-size:0.92rem; }

  /* FAQ — native <details>, no JS */
  .faq-list{ border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:28px;
    padding:26px 0;
    font-family:var(--disp);
    font-size:1.05rem;
    font-weight:600;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    flex:none;
    font-family:var(--mono);
    font-size:1.1rem;
    color:var(--accent);
    line-height:1;
  }
  .faq-item[open] summary::after{ content:"–"; }
  .faq-item summary:hover{ color:var(--accent); }
  .faq-answer{ padding:0 0 30px; max-width:74ch; }
  .faq-answer p{ color:var(--ink-dim); font-size:0.95rem; }
  .faq-answer p + p{ margin-top:12px; }
  .faq-answer a{ color:var(--ink); border-bottom:1px solid var(--line-strong); transition:color .2s, border-color .2s; }
  .faq-answer a:hover{ color:var(--accent); border-color:var(--accent); }

  @media (max-width:1023px){
    .city-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }
  @media (max-width:719px){
    .city-grid{ grid-template-columns:minmax(0,1fr); }
    .city-card{ padding:32px 22px 34px; }
  }

  /* the "why regional" band: .why is a section-level grid, so this page uses its own
     wrapper split instead — the tinted background stays on the section. */
  .region-why{ background:var(--bg-panel); }
  .why-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:start;
  }
  @media (max-width:1023px){
    .why-split{ grid-template-columns:minmax(0,1fr); gap:52px; }
  }

  /* Five nav items instead of four (the regional page was added): tighten the spacing,
     then fall back to logo + CTA before the row can crowd the button. */
  @media (max-width:1120px){
    .nav-links{ gap:22px; }
  }
  @media (max-width:880px){
    .nav-links{ display:none; }
  }