/* Basic styles for desktop */



html {
    scroll-snap-type: y mandatory;
}

@media (max-width: 600px) {
    html {
        scroll-snap-type: none;
    }
}

body {
    font-family: 'Karla', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

p{
    color: #441F20;
    line-height: 30px;
    margin: 10px 0 !important;
}

a{
    color: #441F20;
    margin: 0;
}

.main-container {
    text-align: center;
    padding: 2em;
    width: 80%;
    max-width: 800px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.logo {
   max-height: 30vh;
}

.logo--white {
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35));
}

.opening-date {
    font-size: 1.2rem;
    margin-top: 10px;
    font-weight: 300; /* Karla Light */
    letter-spacing: 1px;
}

.info-section, /*.info-section2,*/ .contact-section, .essen-section {
    margin-top: 6em;
}
.special-section {
    margin-top: 6em;
    margin-bottom: 7em;
}

 h1 {
    font-size: 	1.3em;
    margin: 20px 0 30px;
    font-family: 'Karla', sans-serif;
    font-weight: 600; /* Karla SemiBold */
    letter-spacing: 2px;
    color: #441F20;
}


.info-section p {
    font-size: 	1.3em;
    margin: 5px 0;
    font-weight: 300; /* Karla Light */
}

/*
.info-section2 p {
    font-size: 	1.3em;
    margin: 5px 0;
    font-weight: 300; /* Karla Light 
    color: #97B492;
}
*/

.info-section2 h1 {
    font-size: 	1.3em;
    margin: 20px 0 30px;
    font-family: 'Karla', sans-serif;
    font-weight: 600; /* Karla SemiBold */
    letter-spacing: 2px;
    color: #97B492;
}


.special-section p {
    font-weight: 300;
    font-size: 1.3em;
}


.contact-section p {
    font-size: 	1.3em ;
    font-weight: 300; /* Karla Light */
    color: #441F20;
}

.contact-section a{
    text-decoration: none;
    color: #441F20;
}

.essen-section a{
    font-size: 	1.3em;
    font-weight: 300; /* Karla Light */
    text-align: center; 
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    color: #441F20; /* Stellt sicher, dass die Linkfarbe konsistent ist */
}

.essen-section a:hover {
    text-decoration: underline; /* Unterstreicht den Link beim Hover */
}

.essen-section ul {
    list-style-type: none; /* Entfernt die Aufzählungszeichen */
    padding: 0; /* Entfernt die Standard-Einrückung */
}

.essen-section li {
    margin: 20px 0; /* Vertikaler Abstand zwischen den Listenelementen */
}

.sticker {
    position: absolute;
    top: 380px;
    left: -100px;
    width: 250px;
}

.sticker img {
    width: 100%;
}

footer {
    width: 100%;
    position: absolute;
    bottom: 2.5em;
    left: 0;
    text-align: center;
    z-index: 150;
}

footer a {
    text-align: center;
    text-decoration: underline;
    color: #441F20;
    font-size: 1em;
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    margin: 0 10px;
}


/*--------impressum------------*/

.impressum, .datenschutz{


    font-size: 1.3em;

    background-color: #f5f5f5;

    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100vw);
    transition: .3s ease-in-out;

    height: 100vh;
    height: 100dvh;
    width: 100vw;

    box-sizing: border-box;
    padding: 10%;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;



}

.impressum p, .datenschutz p{
    margin: 12px 0;
}

.impressum-open, .datenschutz-open{
    transform: translateX(0);
}

.impressum h2, .datenschutz h2{
    text-transform: uppercase;
    color: #441F20;
}



/* Mobile Styles */
@media screen and (max-width: 600px) {


    .container {
        width: 90%;
        
    }

    .main-container{
        font-size: 0.9em !important;
    }

    .impressum, .datenschutz{
        font-size: .8em !important;
        line-height: 0;
        padding: 6% 5%;
    }

    .impressum p, .datenschutz p{
        line-height: 1.5;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
    }

    footer a {
        font-size: 1em;
    }

    p{
        color: #441F20;
        line-height: 20px;
        margin: 20px 0 !important;
    }



    .contact-section {
        margin-top: 4em;
    }

    .info-section,
    .essen-section {
        margin-top: 58px;
    }

    h1 {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        margin: 0 0 13px;
    }

    .info-section p,
    .contact-section p,
    .essen-section a {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.4;
        white-space: nowrap;
        margin: 0 0 13px !important;
    }

    .essen-section li {
        margin: 13px 0;
    }

    .logo {
        width: 200px;
    }


    .sticker {
        width: 120px;
        top: 10px;
        left: 10px;
    }

    footer{
        height: 2em;

    }
}


/* ══════════  Foto-Vollbild-Sektionen  ══════════ */

.photo-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #3a2317;
  background-image: var(--bg-img-desktop, linear-gradient(160deg, #52351f 0%, #2c1b10 60%, #1b100a 100%));
  background-size: cover;
  background-position: center center;
}
@media (max-width: 600px) {
  .photo-section {
    background-image: var(--bg-img-mobile, var(--bg-img-desktop, linear-gradient(160deg, #52351f 0%, #2c1b10 60%, #1b100a 100%)));
  }
}

/* Kontakt-Foto: nutzt schon ab Tablet-Breite den Mobil-Ausschnitt */
@media (max-width: 1090px) {
  .photo-section--contact {
    background-image: var(--bg-img-mobile, var(--bg-img-desktop, linear-gradient(160deg, #52351f 0%, #2c1b10 60%, #1b100a 100%)));
  }
}
.photo-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  pointer-events: none;
}
.photo-section > *:not(footer) {
  position: relative;
  z-index: 1;
}

.content-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}

.main-container {
  position: relative;
}

.photo-section .contact-section {
  margin-top: 0;
  text-align: center;
  width: 80%;
  max-width: 800px;
  padding: 0 2em;
  box-sizing: border-box;
}
.photo-section .contact-section h1,
.photo-section .contact-section p,
.photo-section .contact-section a {
  color: #fff;
}
.photo-section footer a {
  color: #fff;
}
.impressum.impressum-open ~ .photo-section footer a,
.datenschutz.datenschutz-open ~ .photo-section footer a {
  color: #441F20;
}

/* ══════════  NEWS Button & Panel  ══════════ */
/* ── Basis-Regeln ZUERST, damit Media Queries sie korrekt überschreiben ── */

.stamp-wrap {
  position: fixed;
  left: calc(50% - min(40vw, 400px) - 105px);
  top: 40vh;
  transform: translateY(-50%);
  z-index: 200;
  transition: left 0.4s cubic-bezier(.4,0,.2,1), top 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}

.impressum.impressum-open ~ .stamp-wrap,
.datenschutz.datenschutz-open ~ .stamp-wrap {
  opacity: 0;
  pointer-events: none;
}

.stamp-img {
  transition: opacity 0.4s ease;
}
.stamp-img--white {
  opacity: 0;
}
.stamp-wrap.on-photo .stamp-img--white {
  opacity: 1;
}
.stamp-wrap.on-photo .stamp-img--brown {
  opacity: 0;
}

.stamp {
  --size: 210px;        /* Basis-Größe — wird von Media Queries überschrieben */
  --stamp-fill: #441F20;
  width: var(--size);
  height: var(--size);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  transform: translate(0, 0) scale(1);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1.4), filter 0.3s ease;
  will-change: transform;
}
.stamp:hover {
  transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(1.15);
  filter: brightness(1.05);
}

/* ── Media Queries NACH den Basis-Regeln → überschreiben korrekt ── */
/* ≤ 1090px (Tablet + Mobil): Button bleibt wie am Desktop fix stehen und wechselt
   beim Scrollen die Farbe, verschwindet aber sobald der Kontakt-Bereich erreicht ist
   (dort gibt's stattdessen die statische weiße Kopie). */

@media (max-width: 1090px) {
  .stamp-wrap {
    position: fixed;
    /* Sobald man aus dem Hero raus ist (z.B. Info-Bereich): oben, überdeckt keinen Text */
    top: 130px;
    transform: none;
  }
  /* Im Hero selbst: tiefer, berührt das Logo oben links */
  .stamp-wrap.in-hero {
    top: 40vh;
  }
}

@media (max-width: 1090px) and (min-width: 601px) {
  .stamp-wrap {
    left: calc(50% - 19.05vh - 100px);
  }
  .stamp {
    --size: 190px;
  }
}

@media (max-width: 600px) {
  .stamp-wrap {
    left: calc(50% - 150px);
    top: 60px;
  }
  .stamp {
    --size: 100px;
  }
}

.stamp-inner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-origin: center;
  will-change: transform;
}

.stamp.idle-shake {
  animation: idleShake 0.6s ease-in-out;
}
@keyframes idleShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%      { transform: translate(-4px, -2px) rotate(-3deg); }
  30%      { transform: translate(4px, 1px) rotate(3deg); }
  45%      { transform: translate(-3px, 2px) rotate(-2deg); }
  60%      { transform: translate(3px, -1px) rotate(2deg); }
  75%      { transform: translate(-2px, 1px) rotate(-1deg); }
}
.stamp .custom-news-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 14px rgba(68,31,32,0.25));
  pointer-events: none;
}

/* NEWS Panel */
.news-fill {
  position: fixed;
  inset: 0;
  background: #441F20;
  z-index: 1090;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.news-fill.on { opacity: 1; pointer-events: auto; }

.news-panel {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(.7,0,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0px;
}
.news-panel.in { transform: translateX(0); }

/* Coming-soon-Hinweis: immer vertikal & horizontal zentriert, auch wenn die
   News-Cards (siehe HTML, aktuell auskommentiert) auf schmalen Screens sonst
   .news-panel { justify-content: flex-start } erzwingen würden */
.news-panel--coming-soon {
  justify-content: center;
}

.news-panel .news-hint {
  margin: 0 !important;
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: #441F20;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
  line-height: 1.6;
}
.news-panel.in .news-hint {
  opacity: 1;
  transform: translateY(0);
}
.news-hint .finger {
  display: inline-block;
  margin-right: 0.25em;
  transform: rotate(-12deg);
  font-size: 1.1em;
  vertical-align: -0.1em;
}

.news-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px;
  z-index: 1110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.8s;
}

@media (max-width: 1090px) {
  .news-footer {
    background: #f5f5f5;
    box-shadow: 0 -2px 16px rgba(68,31,32,0.07);
  }
}
.news-footer.show { opacity: 1; pointer-events: auto; }

.news-close {
  background: transparent;
  border: 0;
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-size: 1em;
  color: #441F20;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ══════════  LIGHTBOX  ══════════ */
.lightbox {
  position: fixed;
  inset: 0;
  background: #f5f5f5;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lb-img {
  max-width: min(78vw, 560px);
  max-height: 75vh;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(68,31,32,0.18), 0 4px 16px rgba(68,31,32,0.10);
  object-fit: contain;
  transition: opacity 0.23s ease, transform 0.23s ease;
}

.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-size: 2rem;
  color: #441F20;
  cursor: pointer;
  padding: 20px 24px;
  z-index: 1210;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
.lb-nav:hover { opacity: 1; }
#lbPrev { left: 16px; }
#lbNext { right: 16px; }

@media (max-width: 600px) {
  .lb-img { max-width: 88vw; }
  .lb-nav { font-size: 1.4rem; padding: 14px 16px; }
  #lbPrev { left: 4px; }
  #lbNext { right: 4px; }
}

/* NEWS Cards */
.news-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 40px 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
}
.news-panel.in .news-cards {
  opacity: 1;
  transform: translateY(0);
}
.news-card {
  width: clamp(200px, 34vw, 360px);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(68, 31, 32, 0.18), 0 2px 8px rgba(68, 31, 32, 0.10);
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1.1);
}

/* Überlappend & schräg – Ruhezustand */
.news-card:first-child {
  transform: rotate(-5deg) translateX(60px);
  z-index: 2;
}
.news-card:last-child {
  transform: rotate(4deg) translateX(-60px);
  z-index: 1;
}

/* Hover: auseinander gleiten, gerade */
.news-cards:hover .news-card:first-child {
  transform: rotate(0deg) translateX(-16px);
}
.news-cards:hover .news-card:last-child {
  transform: rotate(0deg) translateX(16px);
}

/* ≤ 1090px: gestapelt, kein Overlap, kein Klick nötig */
@media (max-width: 1090px) {
  .news-panel {
    overflow-y: auto;
    padding: 0;
  }
  .news-panel:not(.news-panel--coming-soon) {
    justify-content: flex-start;
  }
  .news-cards {
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px 120px;
  }
  .news-card {
    width: clamp(260px, 82vw, 500px);
    cursor: default;
  }
  .news-card:first-child,
  .news-cards:hover .news-card:first-child {
    transform: none;
    z-index: auto;
  }
  .news-card:last-child,
  .news-cards:hover .news-card:last-child {
    transform: none;
    z-index: auto;
  }
}

@media (max-width: 600px) {
  .news-card {
    width: clamp(220px, 88vw, 380px);
  }
}

/* NEWS Posts (dynamische WordPress-Beiträge) */
.news-posts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
  width: 100%;
  padding: 40px 20px 120px;
  overflow-y: auto;
  max-height: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
}
.news-panel.in .news-posts {
  opacity: 1;
  transform: translateY(0);
}
.news-post-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(68, 31, 32, 0.18), 0 2px 8px rgba(68, 31, 32, 0.10);
  padding: 24px 28px;
  font-family: 'Karla', sans-serif;
  color: #441F20;
}
.news-post-card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.news-post-card h3 a {
  color: inherit;
  text-decoration: none;
}
.news-post-card h3 a:hover {
  text-decoration: underline;
}
.news-post-card .news-date {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.news-post-card .news-excerpt {
  font-weight: 300;
  line-height: 1.6;
}

/* ══════════  BLOG-GALERIE (handgezeichneter Polaroid-Stil)  ══════════ */

.blog-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* -- Gemeinsames Polaroid-Element -- */
.polaroid {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 324 / 323;
}
.polaroid-photo {
  position: absolute;
  top: 8%;
  left: 7%;
  width: 86%;
  height: 70%;
  object-fit: cover;
  background: #e8e2da;
}
.polaroid-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.polaroid-date {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  font-family: 'Steindl Handschrift', 'Karla', cursive;
  font-size: 1.35rem;
  color: #441F20;
  text-align: center;
  pointer-events: none;
}
.polaroid-date--large {
  bottom: 8%;
  font-size: 1.8rem;
}

/* -- Übersicht: Polaroids auf gezeichneten Regal-Linien -- */
.blog-grid {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 70px 0 160px;
  box-sizing: border-box;
}
.blog-row {
  width: 100%;
  padding: 90px 0 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto;
  box-sizing: border-box;
}
.blog-row-inner {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 170px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}
.blog-row:nth-of-type(2n+1) .blog-row-inner {
  transform: translateX(-85px);
}
.blog-row:nth-of-type(2n) .blog-row-inner {
  transform: translateX(30px);
}
.polaroid-card {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 340px;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1.2);
}
.polaroid-card:hover,
.polaroid-card:focus-visible {
  transform: translateY(-6px);
}

/* -- Detailansicht -- */
.blog-detail {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 60px 90px;
  box-sizing: border-box;
}
.blog-detail[hidden],
.blog-grid[hidden] {
  display: none;
}
.blog-detail-photo {
  flex: 0 0 auto;
  width: min(34vw, 380px);
  text-align: center;
}
.blog-detail-text {
  flex: 0 1 480px;
  text-align: left;
}
.blog-detail-thumbs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.blog-detail-thumbs img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.55;
  filter: grayscale(40%);
}
.blog-detail-text h3 {
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #441F20;
  margin: 0 0 16px;
}
.blog-detail-excerpt p,
.blog-detail-full p {
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  color: #441F20;
  margin: 0;
}
.blog-more {
  color: #441F20;
  text-decoration: underline;
  font-style: italic;
  cursor: pointer;
  white-space: nowrap;
}
.blog-detail-full { margin-top: 10px; }

.blog-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 16px 20px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.blog-nav:hover { opacity: 1; }
.blog-nav img { width: 34px; height: auto; display: block; }
.blog-nav--prev { left: 10px; }
.blog-nav--next { right: 10px; }
.blog-nav--next img { transform: scaleX(-1); }

.blog-back {
  color: #441F20;
  text-decoration: underline;
  font-family: 'Karla', sans-serif;
  font-weight: 300;
  margin-right: 24px;
  cursor: pointer;
}

@media (max-width: 1090px) {
  .blog-grid {
    padding: 70px 24px 160px;
  }
  /* Regal-Linie skaliert hier NICHT mit der Zeilenbreite: sie behält ihre gezeichnete
     Originalgröße, ist links verankert (background-position: left) und wird einfach am
     rechten Rand abgeschnitten -- Hintergrund-Malbereich endet automatisch an der Box,
     kein overflow:hidden nötig. */
  .blog-row {
    padding: 50px 0 0;
    background-position: left bottom;
    background-size: auto;
  }
  .blog-row-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 30px;
    transform: none !important;
  }
  /* Feste Kartengröße -- schrumpft NICHT mit der Bildschirmbreite. Passen weniger
     Karten in eine Zeile, wird einfach umgebrochen bzw. am Rand abgeschnitten, statt
     die Karte selbst zu verkleinern. */
  .polaroid-card {
    width: 300px;
  }
  .blog-detail {
    flex-direction: column;
    gap: 24px;
    padding: 80px 30px 140px;
    overflow-y: auto;
    justify-content: flex-start;
  }
  .blog-detail-photo { width: min(70vw, 320px); }
  .blog-detail-text { flex: 0 1 auto; max-width: 100%; text-align: center; }
  .blog-detail-thumbs { justify-content: center; }
  .blog-nav { top: auto; bottom: 20px; transform: none; }
  .blog-nav--prev { left: 10px; }
  .blog-nav--next { right: 10px; }
}

@media (max-width: 600px) {
  .blog-grid {
    padding: 60px 20px 150px;
  }
  .blog-row {
    padding-top: 40px;
  }
  .polaroid-date { font-size: 1.15rem; }
  .blog-detail-text h3 { font-size: 1rem; }
  .blog-detail-excerpt p, .blog-detail-full p { font-size: 0.85rem; }
}