/* ==========================================================================
   Schriftarten-Lizenzhinweis  (SIL Open Font License 1.1)
   --------------------------------------------------------------------------
   Die Website verwendet lokal eingebettete Schriften. Beide Fonts sind unter
   der SIL Open Font License 1.1 (http://scripts.sil.org/OFL) lizenziert und
   dürfen frei verwendet, weitergegeben und eingebettet werden.

   Domine
      Copyright 2020 The Domine Project Authors (https://github.com/googlefonts/domine)
      Copyright (c) 2012, Pablo Impallari (www.impallari.com)
      Copyright (c) 2012, Rodrigo Fuenzalida (www.rfuenzalida.com)
      Copyright (c) 2012, Brenda Gallo (gbrenda1987@gmail.com)
      "Domine" ist ein Reserved Font Name dieser Schrift.
      Lizenztext: assets/fonts/OFL-Domine.txt

   Roboto Condensed
      Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
      Lizenztext: assets/fonts/OFL-RobotoCondensed.txt

   Vollständige Lizenztexte liegen unter assets/fonts/ als OFL-Dateien bei.
   ========================================================================== */

    /* Domine – SIL OFL 1.1 */
    @font-face {
      font-family: 'Domine';
      font-style: normal;
      font-weight: 400 700;
      font-display: optional;
      src: url('fonts/domine-latin.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: 'Domine';
      font-style: normal;
      font-weight: 400 700;
      font-display: optional;
      src: url('fonts/domine-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    /* Roboto Condensed – SIL OFL 1.1 */
    @font-face {
      font-family: 'Roboto Condensed';
      font-style: normal;
      font-weight: 300 700;
      font-display: optional;
      src: url('fonts/robotocondensed-latin.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: 'Roboto Condensed';
      font-style: normal;
      font-weight: 300 700;
      font-display: optional;
      src: url('fonts/robotocondensed-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    :root {
      --accent: #7b4f2a;
      --accent-dark: #5f3b1d;
      --bg: #f7f2ea;
      --surface: #faf6f0;
      --card: #ffffff;
      --text: #3b2a1f;
      --muted: #77685a;
      --white: #ffffff;
      --line: rgba(123,79,42,0.12);
      --shadow: 0 12px 40px rgba(62,35,15,0.10);
      --radius: 18px;
      --content: 1200px;
      --header-h: 72px;
      /* Verfügbare Höhe für Video-Boxen: Viewport minus Header + etwas Luft für Titel/Caption */
      --video-avail-h: calc(100vh - var(--header-h) - 110px);
      --video-avail-h: calc(100dvh - var(--header-h) - 110px);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Roboto Condensed', sans-serif;
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: min(calc(100% - 32px), var(--content));
      margin: 0 auto;
    }

    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 32px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .header-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Domine', serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--accent-dark);
    }

    .header-logo img {
      height: 44px;
      width: auto;
    }

    .header-hours {
      font-size: 0.9rem;
      color: var(--muted);
      font-weight: 400;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 22px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      transition: background 180ms ease, transform 180ms ease;
      font-family: 'Roboto Condensed', sans-serif;
    }

    .btn:hover { transform: translateY(-1px); }

    .btn-primary {
      background: var(--accent);
      color: #fff;
    }

    .btn-primary:hover { background: var(--accent-dark); }

    .btn-outline {
      background: transparent;
      color: var(--accent);
      border: 2px solid var(--accent);
    }

    .btn-outline:hover { background: var(--accent); color: #fff; }

    .hero-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      padding-top: 72px;
    }

    .hero-image {
      position: relative;
      overflow: hidden;
    }

    .hero-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
    }

    .hero-image::after {
      content: '';
      position: absolute;
      inset: auto 0 0 0;
      height: 80px;
      background: linear-gradient(to bottom, transparent, var(--bg));
    }

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 60px 48px;
    }

    .hero-content .hero-logo {
      max-width: 320px;
      width: min(80%, 320px);
      margin-bottom: 28px;
    }

    .hero-content h1 {
      margin: 0;
      font-family: 'Domine', serif;
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      line-height: 1.1;
      color: var(--accent-dark);
    }

    .hero-content .hero-sub {
      margin: 16px 0 0;
      font-size: 1.1rem;
      color: var(--muted);
      line-height: 1.7;
      font-weight: 300;
      max-width: 480px;
    }

    .hero-content .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 32px;
    }

    .section {
      padding: 80px 0;
    }

    .section-dark {
      background: var(--accent-dark);
      color: #fffaf5;
    }

    .section h2 {
      margin: 0 0 16px;
      font-family: 'Domine', serif;
      font-size: 2.2rem;
      line-height: 1.15;
      color: var(--accent-dark);
    }

    .section-dark h2 { color: #fff; }

    .section-sub {
      max-width: 640px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.7;
      font-weight: 300;
    }

    .section-dark .section-sub { color: rgba(255,250,245,0.8); }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .card {
      background: #fff;
      border-radius: var(--radius);
      padding: 32px;
      box-shadow: var(--shadow);
    }

    .card h3 {
      margin: 0 0 20px;
      font-family: 'Domine', serif;
      font-size: 1.5rem;
      color: var(--accent-dark);
    }

    .hours-list {
      display: grid;
      gap: 12px;
    }

    .hour-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      font-size: 1rem;
    }

    .hour-row:last-child { border-bottom: 0; padding-bottom: 0; }
    .hour-row strong { font-weight: 600; }

    .hours-note {
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .contact-list {
      display: grid;
      gap: 14px;
      color: var(--muted);
      font-size: 1rem;
    }

    .contact-list strong {
      color: var(--text);
      font-weight: 600;
    }

    .contact-list a {
      color: var(--accent);
      font-weight: 500;
    }

    .contact-list a:hover { text-decoration: underline; }

    .menu-card-link {
      margin-top: 20px;
    }

    .menu-card-link a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-radius: 10px;
      background: var(--surface);
      border: 1px solid var(--line);
      font-weight: 600;
      color: var(--accent-dark);
      transition: background 180ms ease;
    }

    .menu-card-link a:hover { background: #eeeae2; }

    .menu-card-link .arrow {
      font-size: 1.3rem;
    }

    .menu-preview {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .menu-preview-text h2 {
      font-size: 2.2rem;
    }

    .menu-preview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .menu-preview-item {
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow);
      transition: transform 300ms ease;
    }

    .menu-preview-item:hover {
      transform: translateY(-4px);
    }

    .menu-preview-item img {
      width: 100%;
      height: auto; /* GEÄNDERT: 200px → auto für originales Seitenverhältnis */
      display: block;
    }

    .menu-preview-item .label {
      padding: 12px 16px;
      font-weight: 600;
      font-size: 0.95rem;
      text-align: center;
      color: var(--accent-dark);
    }

    .block-section {
      padding: 30px 0;
    }

    .block-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
    }

    .block-grid.reverse { direction: rtl; }
    .block-grid.reverse > * { direction: ltr; }

    .block-image {
      border-radius: var(--radius);
      width: 100%;
      height: auto; /* GEÄNDERT: feste Höhe entfernt für originales Seitenverhältnis */
      box-shadow: var(--shadow);
    }

    .block-text h3 {
      margin: 0 0 14px;
      font-family: 'Domine', serif;
      font-size: 1.8rem;
      color: var(--accent-dark);
    }

    .block-text p {
      color: var(--muted);
      line-height: 1.8;
      font-size: 1.05rem;
      font-weight: 300;
    }

    .gallery-grid {
      column-count: 3;       /* GEÄNDERT: Grid → Masonry (Spalten) für variable Höhen */
      column-gap: 14px;
    }

    .gallery-grid img {
      width: 100%;
      height: auto; /* GEÄNDERT: 300px → auto für originales Seitenverhältnis */
      border-radius: 12px;
      cursor: pointer;
      transition: transform 400ms ease;
      display: block;
      margin-bottom: 14px;
      break-inside: avoid;   /* HINZUGEFÜGT: verhindert Zerreißen über Spalten */
    }

    .gallery-grid img:hover {
      transform: scale(1.02);
    }

    /* Video-Blöcke: 9:16-Box, damit Videos ohne Layout-Shift (CLS) responsiv sind */
    .video-frame {
      position: relative;
      aspect-ratio: 9 / 16;
      border-radius: var(--radius);
      overflow: hidden;
      background: #000;
      box-shadow: var(--shadow);
      /* Breite aus verfügbarer Höhe ableiten -> Höhe bleibt <= --video-avail-h, Seitenverhältnis intakt */
      width: min(100%, max(280px, calc(var(--video-avail-h) * 9 / 16)));
      margin-inline: auto;
    }

    .video-frame video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
      object-fit: contain; 
    }

    /* Zentrierter Play-Button als Overlay; wird beim Abspielen ausgeblendet */
    .video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 76px;
      height: 76px;
      border: 0;
      border-radius: 50%;
      padding: 0;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, transform 0.2s, opacity 0.2s;
      z-index: 2;
    }

    .video-play svg {
      width: 40px;
      height: 40px;
      fill: currentColor;
      margin-left: 4px;
    }

    .video-play:hover,
    .video-play:focus-visible {
      background: rgba(0, 0, 0, 0.75);
      transform: translate(-50%, -50%) scale(1.06);
      outline: none;
    }

    .video-frame.is-playing .video-play {
      opacity: 0;
      pointer-events: none;
    }

    .block-video {
      display: block;
      max-width: 860px;
      margin: 0 auto;
    }

    .block-video figcaption {
      margin-top: 10px;
      color: var(--muted);
      font-weight: 300;
      font-size: 0.95rem;
      text-align: center;
    }

    .video-list {
      display: grid;
      gap: 32px;
    }

    .video-list .block-video {
      max-width: 860px;
      margin: 0 auto;
    }

    .video-youtube {
      margin-top: 14px;
    }

    .featured-intro {
      max-width: 720px;
      margin: 0 auto 48px;
      text-align: center;
    }

    .featured-images {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 14px;
    }

    .featured-images img {
      border-radius: 12px;
      width: 100%;
      height: auto; /* GEÄNDERT: 320px → auto für originales Seitenverhältnis */
    }

    .vacation-banner {
      background: rgba(123,79,42,0.08);
      border: 1px solid rgba(123,79,42,0.2);
      border-radius: var(--radius);
      padding: 16px 24px;
      text-align: center;
      font-weight: 600;
      color: var(--accent-dark);
    }

    .vacation-wrap {
      padding: 90px 0 0;
    }

    .footer {
      padding: 48px 0 60px;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid var(--line);
      padding-top: 24px;
      flex-wrap: wrap;
    }

    .footer-inner a {
      color: var(--accent);
      font-weight: 500;
    }

    .footer-inner a:hover { text-decoration: underline; }

    .page-wrap {
      min-height: 100vh;
      padding: 100px 0 60px;
      background: var(--bg);
    }

    .page-wrap .card {
      max-width: 800px;
      margin: 0 auto;
    }

    .page-wrap h1 {
      font-family: 'Domine', serif;
      color: var(--accent-dark);
    }

    .btn-back {
      display: inline-block;
      margin-top: 24px;
      padding: 12px 28px;
      border-radius: 6px;
      background: var(--accent);
      color: #fff;
      font-weight: 600;
    }

    .btn-back:hover { background: var(--accent-dark); }

    .carousel { position: relative; }
    .carousel-viewport { position: relative; overflow: hidden; min-height: 100px; transition: height 0.4s ease; }
    .carousel-slide {
      position: absolute; top: 0; left: 0; width: 100%;
      opacity: 0; transition: opacity 1s ease; pointer-events: none;
    }
    .carousel-slide.active {
      opacity: 1; pointer-events: auto;
    }
    .carousel-slide img.block-image { max-width: 100%; height: auto; border-radius: 12px; }
    .carousel-slide .section-sub { max-width: none; }
    .carousel-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
    .carousel-prev, .carousel-next {
      background: var(--accent); color: #fff; border: none; border-radius: 50%;
      width: 36px; height: 36px; font-size: 1.3rem; cursor: pointer; line-height: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .carousel-prev:hover, .carousel-next:hover { background: var(--accent-dark); }
    .carousel-dots { display: flex; gap: 8px; }
    .carousel-dot {
      width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
      background: rgba(123,79,42,0.25);
      cursor: pointer; display: inline-block;
      transition: background 0.3s;
    }
    .carousel-dot.active { background: var(--accent); }
    .carousel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    .fs-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.85); z-index: 9999;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }
    .fs-overlay.hidden { display: none; }
    .fs-image { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; }
    .fs-close {
      position: absolute; top: 20px; right: 30px;
      font-size: 2.5rem; color: #fff; cursor: pointer; line-height: 1; font-weight: 300;
      background: transparent; border: none; padding: 0;
    }
    .fs-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

    @media (max-width: 980px) {
      .hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
      }
      .hero-image {
        min-height: 50vh;
      }
      .hero-content {
        padding: 40px 24px 60px;
      }
      .menu-preview {
        grid-template-columns: 1fr;
      }
      .info-grid, .block-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        column-count: 2; /* GEÄNDERT: 2 Spalten auf Tablets */
      }
      .block-grid.reverse { direction: ltr; }
      .featured-images { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .site-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .header-right { width: 100%; justify-content: flex-end; }
      .header-hours { display: none; }
      .header-logo span { display: none; }
      .btn { padding: 0 14px; min-height: 38px; font-size: 0.8rem; }
      .section { padding: 48px 0; }
      .block-image { min-height: 260px; } /* kann entfernt werden, da height: auto */

      .menu-preview-grid { grid-template-columns: 1fr 1fr; }
      .gallery-grid { column-count: 2; }
    }

    @media (max-width: 480px) {
      .site-header { padding: 10px 12px; }
      .header-right { gap: 6px; }
      .btn { font-size: 0.75rem; padding: 0 10px; min-height: 34px; }
      .menu-preview-grid { grid-template-columns: 1fr; }
      .gallery-grid { column-count: 1; }
    }