/* --- FONTS --- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-v21-latin-300-400-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-display-v40-latin-regular-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root {
      --dark-red: #7a1c2e;
      --gray:     #555555;
      --off-white: #f7f4f0;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: var(--off-white);
      font-family: 'Cormorant Garamond', serif;
      color: #222;
      overflow-x: hidden;
    }

    /* ── NOTICE BANNER ──────────────────────────── */
    .notice {
      width: 100% !important;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2222;
      font-size: 19px;
      color: #fff;
      height: auto;
      text-align: center !important;
      background-color: var(--dark-red) !important;
    }
    .notice h5 {
      font-size: 19px !important;
    }
    .notice a {
      color: #fff;
      text-decoration: underline;
    }
    #notice {
      margin-bottom: 2px;
    }
    .notice .btn-notice {
      border-radius: 5px !important;
      padding: 5px 25px 0 25px;
      margin-top: -5px;
      background-color: #fff !important;
      color: var(--dark-red) !important;
      border: none;
      font-family: 'Cormorant Garamond', serif;
      letter-spacing: 0.05em;
    }
    .notice .btn-notice:hover {
      background-color: var(--off-white) !important;
      color: var(--dark-red) !important;
    }

    /* ── HEADER / LOGO ──────────────────────────── */
    .site-header { padding: 2.5rem 3rem 1rem; }

    .logo-img {
        height: 150px;       /* Höhe je nach bisheriger Logo-Größe anpassen */
        width: auto;
        display: block;
        margin: -25px 0 !important;
    }
    @media (max-width: 768px) {
        .logo-img {
            height: 120px;
        }
    }

    .logo { font-family: 'Playfair Display', serif; line-height: 1; user-select: none; }

    .logo .line1 {
      display: block;
      font-size: clamp(2.8rem, 6vw, 4.5rem);
      font-weight: 700;
      color: var(--dark-red);
      letter-spacing: -1px;
    }
    .logo .line1 .italic { font-style: italic; }

    .logo .line2 {
      display: block;
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 400;
      color: var(--gray);
      letter-spacing: -0.5px;
      margin-top: -0.15em;
    }
    .logo .ampersand { font-style: italic; margin-right: 0.1em; }

    /* ── NAVIGATION ─────────────────────────────── */
    .site-nav { padding: 1.2rem 3rem 0.8rem; }

    .site-nav a {
        font-family: 'Cormorant Garamond', serif;

        font-size: clamp(1.15rem, 1.4vw, 1.6rem);

        font-weight: 500;

        color: #333;
        text-decoration: none;

        margin-right: 2.2rem;
        line-height: 1.8;

        letter-spacing: 0.04em;

        transition:
                color 0.2s ease,
                opacity 0.2s ease;
    }
    .site-nav a:hover { color: var(--dark-red); }

    .btn-suche {
      display: inline-block;
      margin: 0.8rem 3rem;
      background: var(--dark-red);
      color: #fff;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      padding: 0.35rem 1.1rem;
      border: none;
      cursor: pointer;
      text-transform: lowercase;
    }
    .btn-suche::before { content: "# "; opacity: 0.7; }

    /* ── COLLAGE GRID ───────────────────────────── */
    .collage-wrapper { padding: 0 1.5rem 3rem; }

    .collage-grid {
        column-count: 5;
        column-gap: 12px;
        padding: 12px;
    }

    .photo-card {
        break-inside: avoid;
        margin-bottom: 12px;
        overflow: hidden;
        background: #ddd;
        position: relative;
        border-radius: 2px;
    }

    .photo-card img {
        width: 100%;
        height: auto;
        display: block;

        object-fit: cover;
        object-position: center 15%;

        filter: grayscale(100%);
        transition:
                transform 0.4s ease,
                filter 0.4s ease;
    }

    .photo-card:hover img {
        filter: grayscale(40%);
        transform: scale(1.02);
    }

    /* unterschiedliche Höhen für Editorial-Look */
    .photo-card.tall img {
        aspect-ratio: 2/3;
    }

    .photo-card.medium img {
        aspect-ratio: 4/5;
    }

    .photo-card.square img {
        aspect-ratio: 1/1;
    }

    /* RESPONSIVE */

    @media (max-width: 1400px) {
        .collage-grid {
            column-count: 4;
        }
    }

    @media (max-width: 1000px) {
        .collage-grid {
            column-count: 3;
        }
    }

    @media (max-width: 700px) {
        .collage-grid {
            column-count: 2;
        }
    }

    @media (max-width: 480px) {
        .collage-grid {
            column-count: 2;
            column-gap: 8px;
        }

        .photo-card {
            margin-bottom: 8px;
        }
    }
    .spacer-logo { grid-column: 1 / 8; grid-row: 1 / 2; min-height: 10px; }

    /* ── DEBUG-HINWEIS (nur sichtbar wenn Ordner fehlt) ─────── */
    .img-missing-hint {
      display: none;
      background: #fff3cd;
      border: 1px solid #ffc107;
      padding: 0.8rem 1.2rem;
      margin: 0 3rem 1rem;
      font-size: 0.85rem;
      color: #664d03;
    }

    /* ── MODEL DETAIL & GALLERY ────────────────── */
    .model-gallery-collage {
        column-count: 4;
        column-gap: 12px;
        padding: 12px;
    }

    @media (max-width: 1200px) {
        .model-gallery-collage {
            column-count: 3;
        }
    }

    @media (max-width: 992px) {
        .model-gallery-collage {
            column-count: 2;
        }
    }

    @media (max-width: 576px) {
        .model-gallery-collage {
            column-count: 1;
        }
    }

    .model-detail-container {
        padding: 0 1.5rem;
    }

    .model-headline {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2rem, 4vw, 3.5rem);
        color: var(--dark-red);
        margin-bottom: 2rem;
        font-weight: 700;
        text-transform: lowercase;
    }

    #lightboxModal .modal-content {
        background: transparent;
        border: none;
    }

    #lightboxModal .modal-body {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #lightboxModal .modal-body img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
    }

    #lightboxModal .btn-close {
        position: absolute;
        top: -40px;
        right: 0;
        filter: invert(1);
        opacity: 0.8;
        z-index: 1060;
    }

    .btn-prev, .btn-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.3);
        color: #fff;
        border: none;
        padding: 15px 10px;
        cursor: pointer;
        transition: background 0.3s;
        z-index: 1055;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-prev:hover, .btn-next:hover {
        background: rgba(0,0,0,0.6);
    }

    .btn-prev { left: 0; border-radius: 0 4px 4px 0; }
    .btn-next { right: 0; border-radius: 4px 0 0 4px; }

    @media (max-width: 768px) {
        .btn-prev, .btn-next {
            padding: 10px 5px;
        }
        .btn-prev svg, .btn-next svg {
            width: 30px;
            height: 30px;
        }
    }

    /* ── SEARCH OVERLAY ────────────────────────── */
    .search-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(247, 244, 240, 0.98);
      z-index: 2000;
      display: none; /* Hidden by default */
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .search-overlay.active {
      display: flex;
    }

    .search-box {
      background: #fff;
      width: 100%;
      max-width: 800px;
      padding: 3rem;
      position: relative;
      box-shadow: 0 10px 40px rgba(0,0,0,0.05);
      border-radius: 4px;
    }

    .btn-close-search {
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      background: none;
      border: none;
      font-size: 2.5rem;
      color: var(--gray);
      cursor: pointer;
      line-height: 1;
    }

    .search-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .search-field {
      display: flex;
      flex-direction: column;
    }

    .search-field label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.9rem;
      text-transform: lowercase;
      color: var(--gray);
      margin-bottom: 0.3rem;
      letter-spacing: 0.05em;
    }

    .search-field input {
      padding: 0.5rem;
      border: 1px solid #eee;
      background: #f9f9f9;
      font-family: Arial, sans-serif;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s;
    }

    .search-field input:focus {
      border-color: var(--dark-red);
    }

    .search-actions {
      text-align: center;
    }

    .btn-submit-search {
      background: var(--dark-red);
      color: #fff;
      border: none;
      padding: 0.8rem 3rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      cursor: pointer;
      text-transform: lowercase;
      letter-spacing: 0.1em;
      transition: background 0.3s;
    }

    .btn-submit-search:hover {
      background: #111;
    }

    @media (max-width: 768px) {
      .search-grid {
        grid-template-columns: 1fr 1fr;
      }
      .search-box {
        padding: 2rem 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .search-grid {
        grid-template-columns: 1fr;
      }
    }

    .content-body {
        font-family: Arial, sans-serif;
        font-size: 1rem;
        line-height: 1.7;
        color: #333;
    }

    .content-body a {
        color: var(--dark-red);
        text-decoration: underline;
        transition: opacity 0.2s ease;
    }

    .content-body a:hover {
        opacity: 0.8;
    }

    /* ── RESPONSIVE ─────────────────────────────── */
    @media (max-width: 768px) {
      .site-header, .site-nav, .btn-suche { padding-left: 1.2rem; }
      .collage-wrapper { padding: 0 0.5rem 2rem; }
      .collage-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .card-1,.card-2,.card-3,.card-4,
      .card-5,.card-6,.card-7,.card-8 {
        grid-column: auto; grid-row: auto;
        transform: none; margin: 0;
        aspect-ratio: 3/4;
      }
      .spacer-logo { display: none; }
    }

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

    .site-footer {
        background: #111;
        color: rgba(255,255,255,0.82);

        margin-top: 5rem;
        padding: 5rem 3rem 4rem;

        position: relative;
        overflow: hidden;
    }

    .footer-inner {
        display: grid;
        grid-template-columns:
        1.5fr
        1fr
        1fr;

        gap: 4rem;
        align-items: start;
    }

    .footer-logo {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.2rem, 4vw, 3.8rem);
        line-height: 0.95;

        color: white;

        margin-bottom: 1.2rem;
    }

    .footer-logo span {
        font-style: italic;
    }

    .footer-logo em {
        font-style: italic;
        color: #888;
    }

    .footer-brand p {
        font-size: 1.2rem;
        letter-spacing: 0.08em;
        opacity: 0.65;
    }

    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
    }

    .footer-nav a {
        color: rgba(255,255,255,0.82);

        text-decoration: none;

        font-size: 1.3rem;
        letter-spacing: 0.04em;

        transition:
                opacity 0.2s ease,
                transform 0.2s ease;
    }

    .footer-nav a:hover {
        opacity: 0.55;
        transform: translateX(4px);
    }

    .footer-contact p {
        font-size: 1.2rem;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.82);
    }

    .footer-contact a {
        color: inherit;
        text-decoration: none;
        display: inline-block;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .footer-contact a:hover {
        opacity: 0.55;
        transform: translateX(4px);
    }

    .footer-legal a {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.82);
        text-transform: lowercase;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .footer-legal a:hover {
        color: rgba(255, 255, 255, 0.85);
    }

    /* feine obere Linie */

    .site-footer::before {
        content: "";

        position: absolute;
        top: 0;
        left: 3rem;
        right: 3rem;

        height: 1px;

        background:
                linear-gradient(
                        to right,
                        transparent,
                        rgba(255,255,255,0.15),
                        transparent
                );
    }

    /* RESPONSIVE */

    @media (max-width: 900px) {

        .footer-inner {
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .site-footer {
            padding:
                    4rem 1.5rem
                    3rem;
        }

        .site-footer::before {
            left: 1.5rem;
            right: 1.5rem;
        }
    }