/* =========================================================
   Minimal, clean, gallery-first style (light)
   Works with your existing HTML structure:
   header .navbar, .brand, .navlink, .hero, .gallery, .card,
   .thumb, .meta, .lightbox, .panel, footer
   ========================================================= */

/* ---------- Theme ---------- */
:root{
    --bg: #ffffff;
    --text: #121212;
    --muted: #6f6f6f;
    --line: rgba(0,0,0,.12);
  
    --max: 980px;
    --radius: 10px;
  }
  
  /* ---------- Base ---------- */
  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
  }
  
  a{ color: inherit; text-decoration: none; }
  img{ display: block; max-width: 100%; }
  
  /* ---------- Layout ---------- */
  .container{
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto;
  }
  
  main{
    padding: 44px 0 78px;
  }
  
  /* ---------- Header / Nav ---------- */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    border-bottom: 1px solid var(--line);
  }
  
  .navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 0;
  }
  
  .brand{
    display: flex;
    align-items: baseline;
    gap: 10px;

    /* neu */
    color: inherit;
    text-decoration: none;
  }

  .brand:hover{
    opacity: .85;
  }
  
  .brand .name{
    font-weight: 600;
    letter-spacing: .2px;
    font-size: 1.2rem;
  }
  
  .brand .tag{
    color: var(--muted);
    font-size: 0.92rem;
  }
  
  nav ul{
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    align-items: center;
  }
  
  .navlink{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: var(--text);
    font-size: 0.95rem;
    text-transform: lowercase;
  }
  
  .navlink:hover{
    border-color: var(--line);
    background: rgba(0,0,0,.03);
  }
  
  .navlink.active{
    border-color: rgba(0,0,0,.18);
    background: rgba(0,0,0,.04);
  }
  
  /* ---------- Hero ---------- */
  .hero{
    display: grid;
    gap: 10px;
    margin: 4px 0 26px;
  }
  
  .hero h1{
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
    letter-spacing: .2px;
    font-weight: 600;
  }
  
  .hero p{
    margin: 0;
    color: var(--muted);
    max-width: 72ch;
  }
  
  /* ---------- Buttons (subtle) ---------- */
  .actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }
  
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: 0.95rem;
  }
  
  .btn:hover{
    background: rgba(0,0,0,.03);
  }
  
  .btn.secondary{
    color: var(--muted);
  }
  
  /* ---------- Gallery (clean, image-forward) ---------- */
  /* Mobile: alles untereinander */
  .gallery{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
    margin-top: 22px;
  }

  /* Card reset */
  .card{
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Desktop: 3 Spalten */
  @media (min-width: 600px){
    .gallery{
      grid-template-columns: repeat(3, 1fr);
      column-gap: 18px;
      row-gap: 40px;
    }

    /* Querformat = ganze Zeile */
    .card.landscape{
      grid-column: 1 / -1;
    }
  }

  /* Image as main visual; no forced aspect ratio */
  .thumb{
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
  }
  
  /* Simple caption */
  .meta{
    padding: 12px 0 0;
    display: grid;
    gap: 0px;
    text-align: center;
  }

  .meta .line-main{
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .meta .line-dim{
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.3;
  }
  
  /* Subtle hover: underline caption, tiny opacity shift */
  .card:hover .meta .title{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .card:hover .thumb{
    opacity: .98;
  }
  
  /* ---------- Lightbox (no JS, via :target) ---------- */
  .lightbox{
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(255,255,255,.92);
    z-index: 1000;
  }
  
  .lightbox:target{
    display: grid;
  }
  
  .lightbox .frame{
    width: min(1100px, 100%);
    max-height: 86vh;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
  }
  
  .lightbox img{
    width: 100%;
    height: 100%;
    max-height: 86vh;
    object-fit: contain;
    background: #fff;
  }
  
  .lightbox .close{
    position: fixed;
    top: 18px;
    right: 18px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    color: var(--text);
  }
  
  .lightbox .close:hover{
    background: rgba(0,0,0,.03);
  }

  .lightbox .frame.video{
    aspect-ratio: 16 / 9;
  }

  .lightbox iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  /* ---------- Panels (CV / Contact) ---------- */
  .panel{
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 18px;
  }
  
  .panel h2{
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
  }
  
  .panel p{
    margin: 0;
    color: var(--muted);
  }
  
  /* ---------- Footer ---------- */
  footer{
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 22px 0;
    font-size: 0.92rem;
  }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 520px){
    .brand .tag{ display: none; }
    nav ul{ gap: 6px; }
    .navlink{ padding: 8px 9px; font-size: 0.93rem; }
    main{ padding: 30px 0 64px; }
  }

  /* ---------- Home (single centered artwork) ---------- */
 .home{
    padding: 58px 0 84px;
    min-height: 72vh;
    display: grid;
    place-items: center;
  }
  
  .home-image{
    display: block;
    width: 100%;
    max-width: 520px;
  }
  
  .home-image img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---------- CV (typografisch korrekt) ---------- */

  .cv{
    display: grid;
    gap: 44px;
  }
  
  .cv-block{
    max-width: 72ch;
  }
  
  .cv-block h2{
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 18px;
  }
  
  /* Liste der Einträge */
  .cv-list{
    display: grid;
    row-gap: 20px;           /* Abstand ZWISCHEN Einträgen */
  }
  
  .cv-item{
    display: grid;
  
    /* Linke Spalte: flexibel, aber begrenzt */
    grid-template-columns: minmax(6.8ch, 10ch) 1fr;
  
    column-gap: 16px;
    line-height: 1.45;
    align-items: start;
  }  
  
  .cv-item .year{
    color: var(--muted);
    font-variant-numeric: tabular-nums;

    white-space: normal;
    overflow: visible;
  }
  
  @media (max-width: 600px){
    .cv-item{
      grid-template-columns: minmax(6.2ch, 8.5ch) 1fr;
      column-gap: 12px;
    }
  }  

  /* ---------- MailerLite minimal style ---------- */
  .ml-embedded form{
    display: grid;
    gap: 10px;
    max-width: 420px;
  }

  .ml-embedded input[type="email"]{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
  }

  .ml-embedded button{
    align-self: flex-start;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .ml-embedded button:hover{
    background: rgba(0,0,0,.03);
  }

  /* ---------- Mobile nav (hamburger) ---------- */

  .nav-toggle{
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .nav-toggle:hover{
    border-color: var(--line);
    background: rgba(0,0,0,.03);
  }

  .nav-toggle span{
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
  }

  /* Mobile layout */
  /* ---------- Mobile off-canvas nav (drawer) ---------- */

  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    display: none;       /* wird per JS ein/aus geschaltet */
  }

  /* Mobile */
  @media (max-width: 700px){

    /* Header über dem Backdrop lassen */
    header{
      z-index: 200;
    }

    .nav-toggle{
      display: inline-flex;
    }

    /* Backdrop über Content, aber unter Header/Nav */
    .nav-backdrop{
      z-index: 150;
    }

    /* Drawer */
    #primary-nav{
      position: fixed;
      top: 0;
      right: 0;
      height: 500vh;
      width: min(50vw, 160px);
      padding: 72px 18px 18px;
      background: rgba(255,255,255,.96);
      border-left: 1px solid var(--line);

      z-index: 250;                 /* über Backdrop + Header */
      transform: translateX(100%);
      transition: transform .22s ease;
    }

    #primary-nav ul{
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #primary-nav.open{
      transform: translateX(0);
    }

    /* Backdrop sichtbar wenn Menü offen */
    body.nav-open .nav-backdrop{
      display: block;
    }

    #primary-nav .navlink{
      display: block;
      width: 100%;
    }
  }

  /* Bigger CV headline */
  .cv > h2{
    font-size: 1.4rem;
    margin-bottom: 0px;
  }
  .cv-birth{
    color: var(--muted);
    margin: 0 0 14px;   /* Abstand zum Lebenslauf */
  }
  .artist-statement > h2{
    font-size: 1.4rem;
    margin-bottom: 6px;
  }

  /* kleines Play-Overlay auf Video-Thumbnails */
  .card.video{
    position: relative;
  }

  .card.video::after{
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(255,255,255,.85);
    pointer-events: none;
  }