/* ============================================================
   INGRID MERKLI — style.css
   ============================================================ */


/* ── FONT ─────────────────────────────────────────────────── */

@font-face {
  font-family: 'Gotu';
  src: url('./Gotu-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ── CUSTOM PROPERTIES ────────────────────────────────────── */

:root {
  --font:          'Gotu', 'Helvetica Neue', Helvetica, sans-serif;

  --c-bg:          #ffffff;
  --c-text:        #1c1c1c;
  --c-rule:        #d4d4d4;
  --c-muted:       #777777;
  --c-link:        #1c1c1c;

  /* Layout */
  --max-w:         860px;          /* comfortable on ~A4-half screen */
  --max-w-wide:    940px;          /* gentle stretch on large screens */
  --pad-x:         2rem;

  /* Spacing scale */
  --sp-xs:  0.4rem;
  --sp-sm:  0.75rem;
  --sp-md:  1.4rem;
  --sp-lg:  2.8rem;

  /* Transitions */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      250ms;
  --dur-mid:       500ms;
  --dur-slow:      750ms;

  --section-title-size:    clamp(1rem, 1.5vw, 1.5rem)
}


/* ── RESET ────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
  font-size: medium;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family:             var(--font);
  color:                   var(--c-text);
  background:              var(--c-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Initial state for page-load fade */
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
}

body.ready {
  opacity: 1;
}

img {
  display:    block;
  max-width:  100%;
  height:     auto;
}

a {
  color:           var(--c-link);
  text-decoration:        underline;
  text-underline-offset:  3px;
  text-decoration-color:  var(--c-rule);
  transition:             text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-color: var(--c-link);
}


/* ── SITE WRAPPER ─────────────────────────────────────────── */

.site-wrapper {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--pad-x);
}


/* ── FOOTER ───────────────────────────────────────────────── */

.site-footer {
  border-top: 0px solid var(--c-rule);
  margin-top: calc(var(--sp-lg) * 1.2);
  padding: var(--sp-sm) 0 var(--sp-md);
  text-align: right;

  & a {
    font-size: 0.7rem;
    letter-spacing: 0;
    color: var(--c-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
  }

  & a:hover,
  & a:focus-visible {
    color: var(--c-text);
    outline: none;
  }
}


/* ── HEADER ───────────────────────────────────────────────── */

.site-header {
  margin-top: 2.5rem;
  margin-bottom: 1.75rem;
  padding:          var(--sp-md) 0 var(--sp-md);
  will-change:      opacity, transform;
}

.artist-name-link {
  display:         inline-block;
  text-decoration: none;
}

.artist-name {
  font-size:      clamp(2.55rem, 3.6vw, 2.7rem);
  font-weight:    normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height:    1;
}


/* ── NAVIGATION ───────────────────────────────────────────── */

.site-nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid var(--c-rule);
  border-bottom:   1px solid var(--c-rule);
  padding:         0.55rem 0;
  margin:          var(--sp-sm) 0 0;
  will-change:     opacity;
}

.site-nav a {
  font-family:     var(--font);
  font-size:       large;
  letter-spacing:  0.06em;
  text-transform:  none;
  color:           var(--c-text);
  text-decoration: none;
  position:        relative;
  padding-bottom:  2px;
  white-space:     nowrap;
  transition:      color var(--dur-fast) var(--ease);
}

/* Sliding underline on hover / active */
.site-nav a::after {
  content:          '';
  position:         absolute;
  left:  0;
  right: 0;
  bottom: 0;
  height:           1px;
  background:       var(--c-text);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform var(--dur-fast) var(--ease);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}


/* ── IMAGE REVEAL ANIMATION ───────────────────────────────── */
/*
   Images start invisible. JS adds .img-reveal--loaded once the
   native load event fires; CSS handles the transition.
*/

.img-reveal {
  opacity:    0;
  transition: opacity var(--dur-slow) var(--ease),
              filter  var(--dur-slow) var(--ease);
  filter:     blur(4px);
  will-change: opacity, filter;
}

.img-reveal.img-reveal--loaded {
  opacity: 1;
  filter:  blur(0px);
}


/* ── STAGGER FADE-IN (load sequence) ──────────────────────── */
/*
   JS adds .animate-in to body after font/DOM ready.
   Elements carry their own delay via --delay custom property.
*/

.anim-item {
  opacity:    0;
  transform:  translateY(6px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.animate-in .anim-item {
  opacity:   1;
  transform: translateY(0);
}

/* ── HERO BANNER (homepage only) ─────────────────────────── */

.hero-banner {
  width:    100%;
  overflow: hidden;
  /* Fixed height = image is deliberately cropped (object-fit: cover) */
  height:   clamp(160px, 28vw, 280px);
  margin-bottom: 0;  /* nav sits directly below */
}

.hero-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: left top;
  transition: transform 8s ease;  /* very slow drift on load for life */
}

.hero-img.img-reveal--loaded {
  transform: scale(1.015);
}

/* ── AKTUELL ──────────────────────────────────────────────── */

.section-label {
  font-size:      var(--section-title-size);
  font-weight:    normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--c-muted);
  margin-bottom:  var(--sp-sm);
}

.event-list {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;

  .event {
    display:               grid;
    grid-template-columns: 11.5rem 1fr;
    column-gap:            var(--sp-md);
    font-size:             clamp(0.78rem, 1.35vw, 0.875rem);
    line-height:           1.65;
  }

  .event-date {
    white-space: nowrap;
  }
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.6rem) clamp(1rem, 3vw, 2rem);
  align-items: start;
  width: min(calc(100vw - (2 * var(--pad-x))), 1800px);
  margin-left: max(calc(50% - 50vw + var(--pad-x)), calc(50% - 900px));

  .event {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.55rem;
    align-content: start;
    min-width: 0;
    height: clamp(30rem, 50vw, 44rem);
    padding: clamp(0.85rem, 1.8vw, 1.2rem);
    box-shadow: 0 14px 26px -20px rgba(0, 0, 0, 0.5);
    background: var(--c-bg);
    font-size: clamp(1rem, 2vw, 1.2rem);
    transition: filter var(--dur-slow) var(--ease),
                transform var(--dur-fast) var(--ease);
  }

  .event-date {
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
  }

  .event-title {
    line-height: 1.5;
    text-decoration-color: color-mix(in srgb, var(--c-link) 28%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition:
      text-decoration-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease);
  }

  .event-title:hover,
  .event-title:focus-visible {
    color: var(--c-text);
    text-decoration-color: currentColor;
  }

  .event-flyer {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  @media (max-width: 960px) {
    grid-template-columns: 1fr;

    .event {
      height: clamp(18rem, 100vw, 32rem);
    }
    .event:has(.placeholder) {
      height: auto;
    }
  }

  @media (min-width: 961px) {
    .event:hover {
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.1));
      transform: scale(1.01);
    }
  }
}

/* ============================================================
   HOMEPAGE
   All rules inside apply only to the homepage context.
   ============================================================ */

.homepage {
    padding-top: var(--sp-lg);

    .site-nav {
      border-top: none;
    }

  /* ── THUMBNAILS ───────────────────────────────────────────── */

  .thumbnails {
    margin-top: var(--sp-lg);
    overflow:   hidden;
  }

  .thumb-strip {
    display:   grid;
    grid-template-columns: repeat(8, 1fr);
    gap:       5px;
    width:     100%;
  }

  .thumb-item {
    display:      block;
    overflow:     hidden;
    height:       clamp(100px, 18vw, 148px);
    cursor:       zoom-in;
  }

  .thumb-item img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    transition:  transform var(--dur-mid) var(--ease),
                opacity   var(--dur-slow) var(--ease),
                filter    var(--dur-slow) var(--ease);
  }

  .thumb-item:hover img {
    transform: scale(1.04);
  }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */


/* ── LARGE SCREENS (≥ 1100px) ─────────────────────────────── */

@media (min-width: 1100px) {
  :root {
    --pad-x: 5rem;
  }

  .site-wrapper {
    max-width: var(--max-w-wide);
  }

  .homepage .thumb-strip {
    grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr 1.0fr 1.0fr 1.0fr 1.0fr;
  }

  .homepage .thumb-item {
    height: 182px;
  }
}


/* ── MEDIUM (600px – 860px) ───────────────────────────────── */

@media (max-width: 860px) {
  :root {
    --pad-x: 1.4rem;
  }
}


/* ── MOBILE (≤ 580px) ─────────────────────────────────────── */

@media (max-width: 580px) {
  :root {
    --pad-x: 1rem;
  }

  /* Nav wraps gracefully */
  .site-nav {
    flex-wrap:       wrap;
    justify-content: flex-start;
    gap:             0.35rem 1.1rem;
    padding:         0.5rem 0;
  }

  /* Hero shorter on narrow screens */
  .hero-banner {
    height: clamp(120px, 38vw, 180px);
  }

  /* Events: stack date above title */
  .homepage .event-list {
    .event {
      grid-template-columns: 1fr;
      row-gap:               0.1rem;
      margin-bottom:         0.55rem;
    }

    .event-date {
      font-size: 0.72rem;
      color:     var(--c-muted);
    }
  }

  .homepage .thumb-strip {
    grid-template-columns: repeat(6, 1fr);
  }

  .homepage .thumb-strip::-webkit-scrollbar {
    display: none;
  }

  .homepage .thumb-item {
    height: clamp(90px, 22vw, 120px);
  }

  .homepage .thumb-item:nth-child(1), .homepage .thumb-item:nth-child(7) {
    display: none;
  }
}


/* ── REDUCED MOTION ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .img-reveal,
  .anim-item,
  .hero-img,
  .homepage .thumb-item img {
    transition:       none;
    animation:        none;
    transform:        none;
    filter:           none;
    opacity:          1;
  }

  body {
    opacity:    1;
    transition: none;
  }
}


/* ============================================================
 *   GALLERY PAGES
 *   ============================================================ */

/* ── GALLERY CONTAINER ────────────────────────────────────── */

.gallery {
  --gallery-row-gap: 6.5rem;
  --gallery-col-gap: 1.8rem;
  
  padding-top:    var(--sp-lg);
  padding-bottom: calc(var(--sp-lg) * 2);

  img {
    /* Subtle fade-in for page content (header/nav stagger from main.js) */
    animation: galleryFadeIn var(--dur-slow) var(--ease) 200ms both;
  }

  & .gallery-title {
    font-size:      var(--section-title-size);
    font-weight:    normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--c-muted);
    margin-bottom:  var(--sp-lg);
  }

  & .gallery-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--gallery-row-gap);
  }

  & .gallery-row {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--gallery-col-gap);
    align-items:           center;
  }

  /* ── IMAGE CARD ─────────────────────────────────────────── */

  & .image-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    cursor:         pointer;
    outline:        none;
    aspect-ratio:   1;          /* ← square card */
    overflow:       hidden;

    & img {
      width:            100%;
      height:           100%;   /* ← fill the square */
      display:          block;
      object-fit:       contain; /* ← image contained, no crop */
      color:            transparent; /* hide alt text */
      background-color: transparent;
      transition:       transform var(--dur-mid) var(--ease);
    }

    &:hover img,
    &:focus-visible img {
      transform: scale(1.015);
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px var(--c-text);
    }

    /* ── PLACEHOLDER CELL ─────────────────────────────────── */

    &.placeholder {
      cursor:         default;
      pointer-events: none;

      & img { display: none; }
    }

    /* ── ERROR STATE ──────────────────────────────────────── */

    &.img-error img {
      /* Suspected to not actually be applied on errors */
      min-height: 80px;
      object-fit: contain;
    }
  }

  /* ── CARD INFO (hidden, used for mobile in-place display) ─ */

  & .card-info {
    display: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    /* JS reveals on mobile via .lb-mobile-active */
  }
}

/* Gallery pages can breathe wider than .site-wrapper while
   keeping consistent viewport gutters via --pad-x. */
.gallery-grid {
  width: min(1920px, calc(100vw - (2 * var(--pad-x))));
  margin-left: calc(50% - min(50vw,1000px) + var(--pad-x));
}


/* ── LIGHTBOX (desktop) ───────────────────────────────────── */

.lightbox-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(10, 10, 10, 0.78);
  z-index:        100;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--dur-mid) var(--ease);
  backdrop-filter: blur(1px);
}

.lightbox-overlay.is-open {
  opacity:        1;
  pointer-events: all;
  cursor:         zoom-out;
}

.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         101;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         2.5rem;
  pointer-events:  none;
  opacity:         0;
  transition:      opacity var(--dur-mid) var(--ease);
}

.lightbox.is-open {
  opacity:        1;
  pointer-events: all;
}

.lightbox-frame {
  position:       relative;
  display:        flex;
  flex-direction: column;
  max-width:      90vw;
  max-height:     90vh;
}

.lightbox-img {
  display:          block;
  /* Image fills frame width, height constrained to leave room for caption */
  max-height:       calc(90vh - 72px);
  max-width:        90vw;
  width:            auto;
  height:           auto;
  object-fit:       contain;
  background-color: #111;
  transition:
  opacity var(--dur-mid) var(--ease),
  filter  var(--dur-mid) var(--ease);
}

.lightbox-caption::after {
  content: "© Ingrid Merkli";
  position: fixed;
  right: 0.45rem;
  bottom: 0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--c-muted);
  pointer-events: none;
  z-index: 120;
}

.lightbox-img.is-loading {
  filter:  blur(5px);
  opacity: 0.85;
}

.lightbox-caption {
  background:    rgba(18, 18, 18, 0.88);
  backdrop-filter: blur(8px);
  color:         #e8e8e8;
  padding:       0.55rem 0.85rem 0.6rem;
  font-family:   var(--font);
  font-size:     0.78rem;
  line-height:   1.6;
  flex-shrink:   0;

  & strong {
    font-weight: 600;
    letter-spacing: 0.01em;
  }
}

.lightbox-close {
  position:    absolute;
  top:         -2.2rem;
  right:       0;
  background:  transparent;
  border:      none;
  color:       rgba(255, 255, 255, 0.75);
  font-family: var(--font);
  font-size:   1.4rem;
  line-height: 1;
  padding:     0.2rem 0.4rem;
  cursor:      pointer;
  transition:  color var(--dur-fast) var(--ease);

  &:hover,
  &:focus-visible {
    color: #fff;
    outline: none;
  }
}

/* Prevent scroll behind open lightbox */
body.lb-scroll-lock {
  overflow: hidden;
}


/* ── MOBILE ───────────────────────────────────────────────── */

@media (max-width: 860px) {
  .gallery {

    & .gallery-grid {
      gap: clamp(4rem, 12vw, 6rem);
    }

    /* Stack each row into a single column on mobile */
    & .gallery-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(4rem, 12vw, 6rem);
      align-items: start;
    }

    & .image-card {
      aspect-ratio: auto;
      overflow: visible;
      display: block;

      & img {
        height: auto;
      }

      /* Placeholders collapse on mobile */
      &.placeholder {
        display: none;
      }

      /* In-place active state */
      &.lb-mobile-active {
        position: relative;
        z-index:  102;
        overflow: visible;

        & img {
          /* Subtle highlight — image stays in DOM position */
          outline: 1px solid rgba(255, 255, 255, 0.15);
        }

        & .card-info {
          display:         block;
          position:        absolute;
          top:          100%;
          left:            0;
          right:           0;
          background:      rgba(18, 18, 18, 0.88);
          backdrop-filter: blur(8px);
          color:           #e8e8e8;
          padding:         0.55rem 0.85rem 0.6rem;
          font-size:       0.78rem;
          line-height:     1.6;
          width:           100%;
          opacity:         1;
          transition:      opacity var(--dur-mid) var(--ease);

          & p { margin: 0; }

          & strong {
            font-weight:    600;
            letter-spacing: 0.01em;
          }
        }

        & .card-info::after {
          content: "© Ingrid Merkli";
          position: fixed;
          right: 0.45rem;
          bottom: 0.35rem;
          font-size: 0.7rem;
          line-height: 1;
          color: var(--c-muted);
          pointer-events: none;
          z-index: 120;
        }
      }
    }
  }
}

@media (min-width: 860px) {
  .gallery-row:has(> .image-card:nth-child(1):not(.placeholder) + .image-card:not(.placeholder) + .image-card:not(.placeholder) + .image-card.placeholder:last-child) > .image-card {
    transform: translateX(50%); /* This is needed, but not in edit mode */
  }
}

@media (width = 860px) {
  .gallery-row:has(> .image-card:nth-child(1):not(.placeholder) + .image-card:not(.placeholder) + .image-card:not(.placeholder) + .image-card.placeholder:last-child) > .image-card {
    transform: none;
  }
}


/* ── ANIMATION ────────────────────────────────────────────── */

@keyframes galleryFadeIn {
  from {
    opacity:   0;
    transform: translateY(8px);
  }
  to {
    opacity:   1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery {
    animation: none;
  }
  .lightbox-img {
    transition: none;
    filter:     none;
  }
}


/* ── PAGE-SPECIFIC VARIABLES ──────────────────────────────── */

.druckgrafik {
  --gallery-row-gap: 14rem;
  --gallery-col-gap: 5vw;
}

.malerei {
  --gallery-row-gap: 7rem;
  --gallery-col-gap: 5vw;

  &.gallery .image-card {
    aspect-ratio: 3 / 5;
  }
}

@media (max-width: 860px) {
  .gallery.malerei .image-card {
    aspect-ratio: auto;
  }
}


/* ── SHARED INNER PAGE SPACING ────────────────────────────── */
/*
   Both .cv and .kontakt sit inside .site-wrapper which already
   handles horizontal padding. Vertical rhythm uses a base unit
   --cv-gap so the whole page can be retuned in one place.
*/

:root {
  --cv-year-w:      7.5rem;   /* width of the date column */
  --cv-gap:         1.6rem;   /* base vertical spacing unit */
  --cv-text-size:   clamp(0.82rem, 1.5vw, 0.9rem);
  --cv-label-size:  var(--section-title-size);
}


/* ── CV PAGE ──────────────────────────────────────────────── */

.cv {
  padding-top:    var(--sp-lg);
  padding-bottom: calc(var(--sp-lg) * 2);
  font-size:      var(--cv-text-size);
  line-height:    1.75;

  /* sections separated by 2× gap */
  & .cv-section + .cv-section,
  & .cv-bio + .cv-section {
    margin-top: calc(var(--cv-gap) * 2);
  }
}


/* ── BIO ──────────────────────────────────────────────────── */

.cv-bio {
  /* Fliesstext in Blocksatz */
  text-align: justify;
  hyphens:    auto;

  & p + p {
    margin-top: var(--cv-gap);
  }

  & .cv-born {
    font-size:      var(--cv-label-size);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--c-muted);
    text-align:     left;     /* override Blocksatz for this line */
    margin-bottom:  var(--cv-gap);
  }
}


/* ── SECTION LABEL ────────────────────────────────────────── */

.cv-section-label {
  font-size:      var(--cv-label-size);
  font-weight:    normal;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--c-muted);
  margin-bottom:  calc(var(--cv-gap) * 0.6);
}


/* ── PLAIN LIST (Mitgliedschaften, Publikation) ───────────── */

.cv-list {
  list-style:  none;
  padding:     0;
  margin:      0;

  & li + li {
    margin-top: calc(var(--cv-gap) * 0.35);
  }

  & .cv-meta {
    color:     var(--c-muted);
    font-size: calc(var(--cv-text-size) * 0.93);
  }
}


/* ── DATED ENTRIES (Ausstellungen, Werdegang) ─────────────── */
/*
   <dl> with one <div class="cv-entry"> per row.
   dt = year (fixed width, right-aligned within its column)
   dd = content (left-aligned, fills remaining space)
*/

.cv-dated {
  margin: 0;

  & .cv-entry {
    display:               grid;
    grid-template-columns: var(--cv-year-w) 1fr;
    column-gap:            var(--sp-md);
    line-height:           1.65;
  }

  & .cv-entry + .cv-entry {
    margin-top: calc(var(--cv-gap) * 0.3);
  }

  & dt {
    color:      var(--c-muted);
    text-align: right;
    direction: rtl;
    white-space: nowrap;
    /* Optically align baseline with dd text */
    padding-top: 0;
  }

  & dd {
    margin: 0;
  
  }
}


/* ── MOBILE ───────────────────────────────────────────────── */

@media (max-width: 580px) {
  :root {
    --cv-year-w: 5rem;
  }

  .cv-bio {
    /* Blocksatz on narrow screens can look ragged — keep it */
    hyphens: auto;
  }

  /* Slightly tighter vertical rhythm on small screens */
  .cv {
    & .cv-section + .cv-section,
    & .cv-bio + .cv-section {
      margin-top: calc(var(--cv-gap) * 1.5);
    }
  }

  .cv-dated .cv-entry {
    grid-template-columns: 1fr;
    row-gap: 0.1rem;
  }

  .cv-dated dt {
    text-align:  left;
    padding-top: calc(var(--cv-gap) * 0.5);  /* Abstand zum vorherigen Eintrag */
  }

  .cv-dated .cv-entry:first-child dt {
    padding-top: 0;
  }
}


/* ── KONTAKT PAGE ─────────────────────────────────────────── */

.kontakt {
  padding-top:    var(--sp-lg);
  padding-bottom: calc(var(--sp-lg) * 2);

  & .kontakt-content {
    display: flex;
    align-items: center;
    gap: var(--sp-lg);
  }

  & .kontakt-image-wrap {
    flex: 0 0 45%;
  }

  & .kontakt-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  & .kontakt-text {
    flex: 1;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    line-height: 1.6;
  }

  & .kontakt-text a {
    text-decoration: none;
    border-bottom: 1px dotted var(--c-text);
  }

  @media (max-width: 768px) {
    & .kontakt-content {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-md);
    }
    
    & .kontakt-image-wrap {
      flex: none;
      width: 100%;
    }
  }
}

/* ── AKTUELL PAGE ─────────────────────────────────────────── */

.aktuell-page {
  padding-top:    var(--sp-lg);
  padding-bottom: calc(var(--sp-lg) * 2);

  .aktuell {
    padding-top: var(--sp-lg);
  }

  & .aktuell-image-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-md);
  }

  & .aktuell-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
    background: #e8e8e8;   /* placeholder colour while image loads */
    display: block;
  }

  @media (max-width: 768px) {
    & .aktuell-image-wrap {
      grid-template-columns: 1fr;
    }
  }
}


/* ── IMPRESSUM / DATENSCHUTZ PAGE ────────────────────────── */

.legal-page {
  padding-top: var(--sp-lg);
  font-size: var(--cv-text-size);
  line-height: 1.75;

  & .legal-block + .legal-block {
    margin-top: calc(var(--cv-gap) * 1.8);
  }

  & p + p {
    margin-top: var(--cv-gap);
  }
}