:root{
      --paper:#f7f5f2;
      --ink:#43494d;
      --accent:#9a9cff;           /* dezenter Neon-Akzent */
      --accent-2:#ffd6a5;
    }

    html { scroll-behavior: smooth; }
    body {
      color: var(--ink);
      background-color: #fff;
    }

  /* island-moments-regular - latin */
  @font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Island Moments';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/island-moments-v8-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

    /* ======= HERO / HEADER ======= */
    .hero {
      position: relative;
      min-height: 70vh;
      display: grid;
      place-items: center;
      text-align: center;
      background:
        radial-gradient(60% 40% at 70% 30%, rgba(154,156,255,.20) 0%, rgba(154,156,255,0) 60%),
        radial-gradient(50% 35% at 25% 70%, rgba(255,214,165,.22) 0%, rgba(255,214,165,0) 60%),
        linear-gradient(180deg, var(--paper) 0%, #ffffff 100%);
      overflow: hidden;
    }
    /* feine Papier-Textur */
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.035"/></svg>');
      pointer-events:none;
    }
    /* Wellen-Abschluss unten */
    .hero-wave{
      position:absolute;
      left:0; right:0; bottom:-1px;
      line-height:0;
    }

  


   .logo-ring {
        margin-inline: auto;
        /*animation: float 6s ease-in-out infinite;*/
        animation: none;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background-color: #ffffff;
        display: grid;
        place-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;

         background-color: #fff;
        }

    .logo-ring img {
        width: 70%;
        height: auto;
        display: block;
        object-fit: contain;

        will-change: transform, opacity; 
        backface-visibility: hidden; 
        transform: translateZ(0);
    }

    @keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.05);
  }
}

@media (max-width: 768px) {
    .logo-ring {
      margin-top: 5em;
    }
  }


.w-65 {
  width: 65%;
}
@media (max-width: 768px) {
  .w-65 {
    width: 100%;
  }
}


    .hero h1{
      font-weight:700;
      letter-spacing:.02em;
      margin-top:1rem;
      font-family: "Island Moments", cursive;
      font-weight: 400;
      font-style: normal;
      font-size: 4em;
    }
    .hero .subtle{
      color: rgba(67,73,77,.7);
    }


    h2 {
      font-family: "Island Moments", cursive;
      font-weight: 400;
      font-style: bold;
      font-size: 4em;
    }

  h3 {
  position: relative;
  font-family: "Island Moments", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  text-align: center;
  color: #333;
  margin: 0.7em 0;
  margin-top: 1.5em;
}

h3::before,
h3::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 25%;
  height: 1px;
  background: linear-gradient(to right, transparent, #999, transparent);
  vertical-align: middle;
  margin: 0 1em;
  border-radius: 50%;
}

h3::before {
  margin-right: 1em;
}

h3::after {
  margin-left: 1em;
}
/* sanfter Anker-Offset für Sticky-Navi + Buttonbar */
h3, .grid-gallery { scroll-margin-top: 120px; }

/* Aktive Button-Optik (deutlicher) */
.gallery-jump .btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(154,156,255,.35);
}

/* Aktive Galerie: Heading + Grid betonen */
h3.is-active{
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
h3.is-active::before,
h3.is-active::after{
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: .9;
}

@media (max-width: 768px) {
  h3 {
    font-size: 2em;   
    margin: 0.5em 0;       
  }

  h3::before,
  h3::after {
    width: 15%;         
    margin: 0 0.6em;
  }
}

/* dezent leuchtender Rahmen/Glow um die aktuelle Grid-Galerie */
.grid-gallery.is-active {
  background: color-mix(in srgb, var(--accent) 12%, white);
  border-radius: 12px;
  padding: 0.5rem;
  transition: background-color .35s ease, box-shadow .35s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

h3.is-active {
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
  transition: color .35s ease;
}




    p {
      font-size: 1.15em;
    }

    /* ======= NAVBAR ======= */
    .navbar{
      transition: background-color .25s ease, box-shadow .25s ease;
    }
    .navbar.scrolled{
      background-color:#ffffffd9; /* leicht transparent */
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
      backdrop-filter: saturate(135%) blur(6px);
    }
    .nav-link{ font-weight:500; }
    .nav-link.active{ color: var(--accent) !important; }

    /* ======= SEKTIONEN ======= */
    section{ padding-block: 6rem; }
    #ueber-mich{ background: linear-gradient(180deg,#fff 0%, #fff 40%, #faf8f6 100%); }
    #galerie .thumb{
      aspect-ratio: 1/1;
      background: linear-gradient(135deg, #eee 0%, #f6f6f6 100%);
      border-radius: .75rem;
    }

    /* Sanfter Fokus-Ring */
    a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset:2px; }

    /* Motion-Respect */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior: auto; }
      .navbar{ transition:none; }
    }


  /* Masonry via CSS-Columns */
.grid-gallery{
  column-count: initial;
  column-gap: 0;
  column-fill: initial;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: 800px 2000px; /* grobe Platzhalterhöhe */
}

@media (min-width: 768px){  .grid-gallery{ column-count: 2; } }
@media (min-width: 1200px){ .grid-gallery{ column-count: 4; } }

.grid-gallery .g-item { margin-bottom: 12px; }
.grid-gallery .g-item img{ display:block; width:100%; height:auto; }

/* Cover-Hover-Effekt */
/* FIGURE: eigener Stacking-Context + sauberes Clipping */
.g-item{
  position: relative;
  isolation: isolate;   
  overflow: hidden;
  border-radius: .75rem;
  
  background:#f7f7f7;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  cursor: pointer;
}

/* BILD: unter Overlay halten + GPU-kompositing */
.g-item img{
  display:block;
  vertical-align: top; 
  width:100%;
  height:auto;
  border-radius: inherit;
  transform-origin: center;
  transition: transform .5s ease, filter .5s ease;
  position: relative;
  z-index: 0;
  will-change: transform, filter;
  transform: translateZ(0);

  cursor: pointer;           /* Fallback */
  cursor: -webkit-zoom-in;   /* Safari (älter/quirks) */
  cursor: zoom-in;           /* Standard */

  
  height:auto;

}

/* OVERLAY: über dem Bild */
.g-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 70%);
  opacity:0;
  transition: opacity .4s ease;
  pointer-events:none;
  z-index: 1; 
  pointer-events: none;
}

/* HOVER-Effekt */
.g-item:hover img{ transform: scale(1.05); filter: brightness(.9); }
.g-item:hover::after{ opacity:1; }


figure.g-item{ display:block; margin:0; }


/* === Lightbox Styling (optimiert) === */
#lightboxModal .modal-body {
  padding: 3rem 0 2.5rem 0; /* mehr Abstand oben/unten */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#lightboxModal img {
  max-height: 80vh;     
  width: auto;
  object-fit: contain;
  border-radius: .5rem;
  margin: 1rem auto;        
  display: block;
}

/* Runder Close-Button */
#lightboxModal .btn-light[data-bs-dismiss="modal"] {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: all .2s ease;
  z-index: 10;
}

#lightboxModal .btn-light[data-bs-dismiss="modal"]:hover {
  transform: scale(1.1);
}

/* Navigation-Pfeile */
#lightboxPrev, #lightboxNext {
  
  top: 45% !important;                 /* höher setzen */
  transform: translateY(-50%);         /* vertikal mittig relativ zu top */
  
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1;
  font-size: 1.25rem; 
  
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  opacity: .8;
  transition: opacity .2s, box-shadow .2s, transform .2s;
  z-index: 5;
}

#lightboxPrev {
  left: 1.5rem !important;   
}
#lightboxNext {
  right: 1.5rem !important;  
}

/* Hover ohne Translate zu verlieren */
#lightboxPrev:hover, #lightboxNext:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}


/* Caption – leicht nach unten versetzt */
#lightboxCaption {
  margin-top: 0rem;
  font-size: 0.9rem;
  opacity: .85;
  text-align: center;
}

/* Wrapper für Infos, Ausstellungen etc. */
.wrapper_info {
  position: relative;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-2) 35%, white),
    #fff 60%,
    color-mix(in srgb, var(--accent) 35%, white)
  );
  overflow: hidden;
}

.wrapper_info > * {
  position: relative;
  z-index: 1;
}

.wrapper_info.is-past {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent-2) 10%, white),
    #fafafa 60%,
    color-mix(in srgb, var(--accent) 10%, white)
  );
  opacity: 0.85;
}

@media (min-width: 768px) {
  .wrapper_info {
    flex: 0 0 calc(50% - .75rem);
    width: auto;
  }
}


.past-headline {
  margin-top: .5rem;
}

.past-headline h3 {
  font-size: 1.1rem;
  opacity: .75;
}



/*glitzer*/
.magie {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: #5a4bb5; /* Grundfarbe – gut lesbar */
  background: linear-gradient(90deg, #5a4bb5 0%, #a88cff 40%, #5a4bb5 80%);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s ease-in-out infinite;
  text-shadow:
    0 0 4px rgba(200,180,255,0.3),
    0 0 10px rgba(180,160,255,0.2);
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* optional: sanft funkelnde Mini-Partikel */
.magie::after {
  content: "✨";
  position: absolute;
  top: -0.3em;
  right: -0.2em;
  opacity: 0;
  font-size: 0.8em;
  animation: sparkle 3s infinite ease-in-out;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.1) rotate(10deg); }
}


.gallery-jump{
  top: 64px;                 /* unter der Haupt-Navi “kleben” */
  background: #ffffffcc;     /* leicht transparent */
  backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(0,0,0,.04);
  z-index: 1020;
}

.gallery-jump .btn{
  --bs-btn-padding-y: .4rem;
  --bs-btn-padding-x: .85rem;
  --bs-btn-font-size: .9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

.gallery-jump .btn.active,
.gallery-jump .btn:focus,
.gallery-jump .btn:hover{
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.presselink {
  display: inline-block;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;

  /* --- DAS hier sorgt für echten Zeilenumbruch --- */
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  word-wrap: break-word;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;

  line-height: 1.4;
  transition: color .25s ease, text-shadow .25s ease;
  
  padding-right: 1em;
}

.presselink:hover,
.presselink:focus {
  color: color-mix(in srgb, var(--accent) 60%, black);
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.gallery-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  max-width: 750px;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1em;
  color: var(--ink);

  background: color-mix(in srgb, var(--accent-2) 25%, white);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, white);
  border-radius: 0.75rem;
  padding: 0.7em 1em;
  margin: 1.5rem auto 2rem;
  max-width: 700px;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  line-height: 1.1;
  text-align: center;
}

.gallery-hint span {
  display: inline-block;
  max-width: 90%;
  text-wrap: balance;
}

.icon-bulb {
  width: 1.6em;
  height: 1.6em;
  color: var(--accent);
  flex-shrink: 0;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Optionales „Aufleuchten“ beim Hover */
.gallery-hint:hover .icon-bulb {
  color: color-mix(in srgb, var(--accent) 80%, white);
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .gallery-hint {
    flex-direction: column;
    gap: 0.4em;
    font-size: 1em;
    padding: 0.5em 0.8em;
    margin: 1rem auto 1.5rem;
  }

  .icon-bulb {
    width: 1.4em;
    height: 1.4em;
  }

}

.contact-mail {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

.contact-mail:hover {
  opacity: 0.7;
}

.logo-ring { animation: none; }
.glitch { position: relative; width: 70%; /* wie vorher img */ }
.glitch .logo-img { display: block; width: 100%; height: auto; will-change: transform, opacity; backface-visibility: hidden; }

/* Slices */
.glitch .slice {
  position: absolute; inset: 0;
  background: center/contain no-repeat;
  will-change: transform, opacity, clip-path;
  pointer-events: none;
  opacity: 0;
}

/* Optional: RGB-Split */
.glitch .rgb.r, .glitch .rgb.b {
  position: absolute; inset: 0;
  background: center/contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.icon-bulb {
  width: 26px;
  height: 26px;
  
  vertical-align: middle;
  margin-right: 6px;
  transform-box: fill-box;   /* wichtig für SVG */
  transform-origin: 50% 50%; /* Mittelpunkt als Bezug */
  display: inline-block; 
  will-change: transform, opacity;
}

.icon-bulb-wrap {
  display: inline-block;   /* wichtig, damit scale sichtbar wird */
  will-change: transform;  /* kleine Perf-Optimierung */
}