/* -------------------------------------------------------------
   0️⃣   Variablen (bleiben so wie im alten Design)
------------------------------------------------------------- */
:root{
    --clr-primary:#C41E3A;   /* Warmes Rot */
    --clr-bg:#FFFDD0;        /* Creme‑Hintergrund */
    --clr-gold:#D4AF37;      /* Gold‑Akzent */
    --clr-dark:#1A1A1A;      /* Text‑Dunkelgrau */
    --ff-header:'Bebas Neue',cursive;
    --ff-body:'Roboto',sans-serif;
}

/* -------------------------------------------------------------
   1️⃣   Globale Grundstile (falls noch nicht vorhanden)
------------------------------------------------------------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:var(--ff-body);
    background:var(--clr-bg);
    color:var(--clr-dark);
    line-height:1.6;
}

/* -------------------------------------------------------------
   2️⃣   Buttons (werden überall wiederverwendet)
------------------------------------------------------------- */
.btn{
    display:inline-block;
    padding:.8rem 1.6rem;
    border-radius:30px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:opacity .2s;
}
.btn--primary{
    background:var(--clr-primary);
    color:#fff;
}
.btn--primary:hover{opacity:.9;}
.btn--secondary{
    background:var(--clr-gold);
    color:#111;
}
.btn--secondary:hover{opacity:.9;}

/* -------------------------------------------------------------
   3️⃣   SITE‑HEADER (mit Hamburger‑Icon)
------------------------------------------------------------- */
.site-header{
    position:sticky;
    top:0;
    left:0;
    right:0;
    background:#fff;               /* weißer Header, damit das Menü über dem Bild liegt */
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.8rem 1.2rem;
    border-bottom:2px solid var(--clr-primary);
    z-index:1000;
}

/* Brand‑Name */
.site-header .brand{
    font-family:var(--ff-header);
    font-size:1.6rem;
    color:var(--clr-primary);
}

/* Desktop‑Navigation (sichtbar ab 768 px) */
.main-nav{
    display:none;                  /* wird erst bei größerem Viewport eingeblendet */
    gap:1.5rem;
}
.main-nav a{
    color:var(--clr-dark);
    text-decoration:none;
    font-weight:600;
    transition:color .2s;
}
.main-nav a:hover{color:var(--clr-primary);}

/* Hamburger‑Button – 3 Balken */
.hamburger{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:24px;
    height:20px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:1100;          /* über dem Off‑Canvas-Panel */
}
.hamburger span{
    display:block;
    height:3px;
    width:100%;
    background:var(--clr-primary);
    border-radius:2px;
}

/* Off‑Canvas Mobile‑Nav (links‑seitig einfahrend) */
.mobile-nav{
    position:fixed;
    top:0;
    left:-260px;                 /* Ausgangs‑Position außerhalb des Viewports */
    width:260px;
    height:100vh;
    background:#111;            /* dunkles Hintergrund‑Panel */
    color:#fff;
    padding:4rem 1.2rem 2rem;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
    transition:left .3s ease;
    z-index:1050;
}
.mobile-nav a{
    color:#fff;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:600;
}
.mobile-nav a:hover{color:var(--clr-primary);}

/* --------------------------------------------
   4️⃣   Media‑Queries – Header‑Verhalten
-------------------------------------------- */
@media(min-width:768px){
    .hamburger{display:none;}                 /* Hamburger nur mobil */
    .main-nav{
        display:flex;
        align-items:center;
    }
    .mobile-nav{
        display:none;                         /* Off‑Canvas ist dann nicht nötig */
    }
}

/* -------------------------------------------------------------
   5️⃣   SIDEBAR‑ANIMATION (Klasse wird per JS getoggelt)
------------------------------------------------------------- */
.mobile-nav.open{
    left:0;   /* schiebt das Panel komplett ins Bild */
}

/* -------------------------------------------------------------
   6️⃣   Restliche Vintage‑Hybrid‑Sektionen
   (Kopiere die bereits im vorherigen Beispiel gezeigten Styles,
   z. B. hero-neon, split-section, timeline, hero-dish, testimonials,
   location, footer etc. – hier nur ein kurzer Verweis)
------------------------------------------------------------- */

/* ---- HERO‑NEON ------------------------------------------------- */
.hero-neon{
    position:relative;
    background:#000 url('photos/img/04.jpeg') center/cover no-repeat;
    color:#fff;
    text-align:center;
    padding:6rem 1rem 4rem;
    overflow:hidden;
}

#logo-fish {
height:300px;
background: url(images/Logo_Dat-Fischhus__weiss_cmyk420t.png) no-repeat center center;
algin:center;
}

.hero-neon::after{
    content:'';position:absolute;inset:0;background:rgba(0,0,0,0);
}
.hero-neon__content{
    position:relative;
    max-width:900px;margin:auto;
}
.hero-neon h1{
    font-family:var(--ff-header);
    font-size:3.5rem;
    margin:0 0 .5rem;
}
.hero-neon .tagline{
    font-size:1.2rem;
    margin-bottom:1.5rem;
}
.hero-neon__line{
    position:absolute;
    bottom:0;left:0;width:100%;height:30px;
}

/* ---- SPLIT‑SECTION --------------------------------------------- */
.split-section{
    display:flex;align-items:center;min-height:70vh;
}
.split-section__img,
.split-section__txt{
    flex:1 1 50%;padding:2rem;
}
.split-section__img img{
    width:100%;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.split-section__txt h2{
    font-family:var(--ff-header);
    font-size:2.5rem;
    color:var(--clr-primary);
    margin-bottom:.8rem;
}
.split-section--reverse{
    flex-direction:row-reverse;
}
@media(max-width:768px){
    .split-section{flex-direction:column;}
    .split-section__img,
    .split-section__txt{padding:1rem;}
}

/* ---- TIMELINE --------------------------------------------------- */
.timeline{
    max-width:900px;margin:4rem auto;padding:0 1rem;
    position:relative;
}
.timeline::before{
    content:'';
    position:absolute;top:0;bottom:0;width:4px;
    background:linear-gradient(180deg,var(--clr-primary),var(--clr-gold));
    transform:translateX(-50%);
}
.timeline__title{
    text-align:center;
    font-family:var(--ff-header);
    font-size:2.8rem;
    color:var(--clr-primary);
    margin-bottom:2rem;
}
.timeline__item{
    display:flex;margin:2rem 0;position:relative;
}
.timeline__item:nth-child(even){flex-direction:row-reverse;}
.timeline__year{
    flex:0 0 120px;
    text-align:center;
    font-size:1.4rem;
    font-weight:600;
    background:var(--clr-primary);
    color:#fff;
    line-height:2.2;
    border-radius:6px;
    align-self:flex-start;
}
.timeline__content{
    background:#fff;
    padding:1.2rem 1.6rem;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.07);
    margin:0 1rem;
    position:relative;
}
.timeline__content::before{
    content:'';
    position:absolute;top:1rem;width:0;height:0;
    border:8px solid transparent;
}
.timeline__item:nth-child(odd) .timeline__content::before{
    left:-16px; border-right-color:#fff;
}
.timeline__item:nth-child(even) .timeline__content::before{
    right:-16px; border-left-color:#fff;
}
@media(max-width:768px){
    .timeline::before{left:20px;}
    .timeline__item{flex-direction:column;align-items:flex-start;}
    .timeline__year{margin-bottom:.5rem;}
    .timeline__content{margin-left:2rem;}
}

/* ---- HERO‑DISH ------------------------------------------------- */
.hero-dish{
    position:relative;overflow:hidden;display:flex;align-items:center;
    min-height:70vh;
}
.hero-dish__pic img{
    width:100%;height:auto;display:block;object-fit:cover;
    filter:brightness(0.85);
}
.hero-dish__text{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.93);
    padding:2rem 2.5rem;
    border-radius:12px;
    box-shadow:0 6px 12px rgba(0,0,0,.2);
    max-width:420px;text-align:center;
}
.hero-dish__text h2{
    font-family:var(--ff-header);
    color:var(--clr-primary);
    margin-bottom:.6rem;
}
@media(max-width:768px){
    .hero-dish__text{max-width:90%;padding:1.5rem;}
    .hero-dish{min-height:50vh;}
}

/* ---- TESTIMONIALS ----------------------------------------------- */
.testimonials{
    background:var(--clr-bg);
    padding:4rem 1rem;
    text-align:center;
}
.testimonials__title{
    font-family:var(--ff-header);
    font-size:2.8rem;
    color:var(--clr-primary);
    margin-bottom:2rem;
}
.testimonials__grid{
    display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;
}
.testimonial{
    background:#fff9e6;
    border-left:6px solid var(--clr-primary);
    padding:1.2rem 1.6rem;
    border-radius:6px;
    max-width:300px;
    position:relative;
    box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.testimonial::before{
    content:'“';
    font-size:4rem;
    position:absolute;top:-10px;left:-10px;
    color:var(--clr-primary);opacity:.3;
}
.testimonial__quote{font-style:italic;margin-bottom:.8rem;}
.testimonial__author{font-weight:600;color:var(--clr-dark);}
@media(max-width:600px){
    .testimonials__grid{flex-direction:column;align-items:center;}
}

/* ---- LOCATION --------------------------------------------------- */
.location{
    background:#fff;
    padding:4rem 1rem;
}
.location__title{
    text-align:center;
    font-family:var(--ff-header);
    font-size:2.8rem;
    color:var(--clr-primary);
    margin-bottom:2rem;
}
.location__wrapper{
    display:flex;gap:2rem;max-width:1100px;margin:auto;
}
.location__map{
    flex:2;min-height:300px;border:6px solid var(--clr-primary);
    border-radius:8px;overflow:hidden;
}
.location__info{
    flex:1;background:#fff9e6;border-left:6px solid var(--clr-primary);
    padding:1.5rem;border-radius:6px;
}
.location__info p{margin-bottom:1rem;}
@media(max-width:768px){
    .location__wrapper{flex-direction:column;}
    .location__map,.location__info{flex:initial;}
}

/* ---- FOOTER ----------------------------------------------------- */
.footer{
    background:#222;color:#fff;text-align:center;padding:1.5rem;
}
.footer a{color:var(--clr-gold);text-decoration:none;}

/* -------------------------------------------------------------
   7️⃣   OPTIONAL: Smooth‑Scroll für Anker‑Links
------------------------------------------------------------- */
html{scroll-behavior:smooth;}

  .container{max-width:1100px;margin:auto;padding:2rem 1rem;}
  .grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;
  }
  .card{
    background:white;padding:1.5rem;border-radius:6px;box-shadow:0 3px 6px rgba(0,0,0,.15);
    position:relative;
  }
  .card::before{
    content:"";position:absolute;top:-10px;right:-10px;width:30px;height:30px;
    background:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%23C41E3A%22><path d=%22M12 2L15 8l6 1-4.5 4.5L18 20l-6-3-6 3 1.5-6.5L5 9l6-1z%22/></svg>') no-repeat center/contain;
  }
  .polaroid{
    background:white;padding:1rem;margin-top:1rem;
    box-shadow:0 4px 6px rgba(0,0,0,.2);
    text-align:center;
  }
  .polaroid img{max-width:100%;height:auto;}
  .polaroid p{margin-top:.5rem;font-style:italic;color:#555;}

/* ---------- Galerie‑Container ---------- */
.gallery-container{
    max-width:1200px;
    margin:auto;
    padding:2rem 1rem;
}

/* ---------- Polaroid‑Karten + Gold‑Border ---------- */
#lightgallery a{
    display:block;
    position:relative;
    overflow:hidden;
    margin:0.8rem;
    border-radius:8px;
    background:white;
    box-shadow:0 4px 8px rgba(0,0,0,.15);
    transition:transform .2s ease;
}
#lightgallery a:hover{
    transform:scale(1.02);
}

/* Bild‑Styling (Thumbnails) */
#lightgallery img{
    width:100%;
    height:auto;
    display:block;
}

/* Gold‑Border oben (Vintage‑Touch) */
#lightgallery a::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:4px;
    background:var(--clr-gold);
}

.impressum_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(images/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:610px;
	height:410px;		
	
	/* some padding to layout nested elements nicely  */
	padding:50px;
    
	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper left corner */
.impressum_overlay .close {
	background-image:url(images/close.png);
	position:absolute; left:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

 footer{
    background:var(--clr-dark);color:white;padding:1.5rem;text-align:center;
  }
  footer a{color:var(--clr-gold);text-decoration:none;}