@charset "utf-8";
/* CSS Document */

    :root {
      --page-width: 100%;
      --gap: 28px;
      --radius: 0px;
      --bg: #f5f6f8;
      --card: #ffffff;
      --text: #0f172a; /* slate-900 */
      --muted: #64748b; /* slate-500 */
      --shadow: 0 10px 30px rgba(10, 20, 40, .08), 0 2px 6px rgba(10, 20, 40, .06);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
    }

    .wrap {
      max-width:100%;
      padding: 0px;/* 48px 20px 80px */
      margin: 0 auto;
    }



    header {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 16px;
      margin-bottom: 34px;
    }

    .title {
      font-size: clamp(24px, 4vw, 40px);
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0;
    }

    .meta { color: var(--muted); font-size: 14px; }

    .project-note {
      background: var(--card);
      border: 1px solid rgba(2, 6, 23, .06);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin: 10px 0 28px;
      box-shadow: var(--shadow);
    }

    
    .project-media {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
    }

    figure.media {
      margin: 0;
      background: var(--card);
     /* border: 1px solid rgba(2, 6, 23, .06);*/
      border-radius: var(--radius);
      overflow: clip;
      box-shadow: var(--shadow);
    }

    .media img {
      display: block;
      width: 100%;
      height: auto;
    }

    figcaption {
      font-size: 14px;
      color: var(--muted);
      padding: 10px 14px 14px;
      border-top: 1px solid rgba(2, 6, 23, .06);
    }

    /* === CSS-only Lightbox via :target === */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .92);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 4vmin;
      z-index: 999;
    }
    .lightbox:target { display: flex; }
    .lightbox img {
      max-width: min(96vw, var(--page-width));
      max-height: 92vh;
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0,0,0,.5);
    }
    .lightbox a.close {
      position: fixed;
      top: 14px; right: 16px;
      font-size: 28px; text-decoration: none; color: white;
      line-height: 1; padding: 6px 10px;
      background: rgba(255,255,255,.08);
      border-radius: 10px;
    }
    /* Click anywhere outside to close */
    .lightbox::before {
      content: "";
      position: absolute; inset: 0;
    }

    /* === Optional: Masonry-Grid wie auf Portfolio-Übersichtsseiten === */
    .masonry {
      column-count: 1;
      column-gap: var(--gap);
    }
    @media (min-width: 720px) { .masonry { column-count: 2; } }
    @media (min-width: 1024px) { .masonry { column-count: 3; } }
    .masonry .media { break-inside: avoid; margin: 0 0 var(--gap); }

    /* Helfer */
    .muted { color: var(--muted); }
    .pill {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      background: #eef2ff;
      color: #3730a3;
      font-weight: 600;
      font-size: 12px;
      margin-right: 8px;
    }
    .toolbar { display:flex; gap:10px; align-items:center; justify-content:flex-end; }
    .toolbar button {
      appearance:none; border:1px solid rgba(2, 6, 23, .1);
      background: var(--card); color: var(--text);
      border-radius: 999px; padding: 8px 12px; cursor: pointer;
      box-shadow: var(--shadow);
      font-weight: 600; font-size: 14px;
    }
    .toolbar button[aria-pressed="true"] { background:#111827; color:#fff; }
	  
	    #gif { position: fixed;              /* bleibt beim Scrollen im Zentrum */
  top: 50%;                     /* 50% von oben */
  left: 50%;                    /* 50% von links */
  transform: translate(-50%, -50%); /* echte Mitte */
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  opacity: 1;
  transition: opacity 1s ease;  /* für weiches Ausblenden */
  z-index: 1000;                /* über allem anderen */
    }
	  p{
		  text-align: center;
	  }