body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #333;
    text-align: center;
}

/* ZDJĘCIE GŁÓWNE */
.hero {
    position: relative;
    background: url("../img/header.jpg") center/cover no-repeat;
    min-height: 65vh;
    padding: 80px 20px;
}





/* INFO */
.hero-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6%;
    background: #f4a000;
    color: #fff;
    padding: 15px;
    border-radius: 15px;
}

/* NOWE OTWARCIE */
 .hero {
    position: relative;
}

.neuer {
    position: absolute;
    top: 45%;              /* ← środek między logo a paskiem */
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 2px;

    text-shadow: 0 3px 8px rgba(0,0,0,0.6);

    animation: softPulse 1.3s ease-in-out infinite; 
}
 @keyframes softPulse 
  0% {
    transform: scale(1);
    opacity: 0.7;

    }  
    50%  {
    transform: scale(1.12);
    opacity: 1;
    }
    100% {
    transform: scale(1);
    opacity: 0.7;
    }  
}

/* BRAND NAME OFF */
.brand-name {
    display: none;
}

/* MOBILE */
@media (max-width: 768px) {
    .hero {
        min-height: 55vh;
        background-position: center top;
    }

    .hero-info {
        bottom: 10%;
        font-size: 14px;
  } 
    .neuer {
        top: 50%;
        font-size: 20px;
  }
}
/* =========================
   NEUERÖFFNUNG – ANIMACJA
   ========================= */

.neuer {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 2px;

    text-shadow: 0 3px 8px rgba(0,0,0,0.6);

    animation: softPulse 1.5s ease-in-out infinite;
}

/* =========================
   KEYFRAMES
   ========================= */

@keyframes softPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.69);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
} 
/* =========================
   IMPRESSUM / DATENSCHUTZ
   ========================= */

.legal-box {
    display: inline-flex;
    gap: 20px;
    background: #3b2a1a; /* ciemny brąz */
    padding: 14px 28px;
    border-radius: 12px;
    border: 2px solid #5a3b20;
}

.legal-box a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.legal-box a:hover {
    color: #f4a000;              /* złoty akcent */
    text-shadow: 0 0 6px rgba(244,160,0,0.6);
}
.tagesgericht-highlight {
    color: #c00000;           /* czerwony napis obok dan dnia */
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    margin: 20px 0;
}

.tagesgericht-highlight .arrow {
    color: #c00000;
    font-weight: bold;
    margin: 0 10px;
}
/* === Wochenkarte Animation === */

.wochenkarte-highlight {
    color: #c00000;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    margin: 20px 0;
}

.arrow {
    display: inline-block;
    color: #c00000;
    font-weight: bold;
    margin: 0 10px;
}

/* lewa strzałka: lewo → prawo */
.arrow-left {
    animation: moveRight 1.5s ease-in-out infinite;
}

/* prawa strzałka: prawo → lewo */
.arrow-right {
    animation: moveLeft 1.5s ease-in-out infinite;
}

/* animacje */
@keyframes moveRight {
    0%   { transform: translateX(-8px); }
    50%  { transform: translateX(8px); }
    100% { transform: translateX(-8px); }
}

@keyframes moveLeft {
    0%   { transform: translateX(8px); }
    50%  { transform: translateX(-8px); }
    100% { transform: translateX(8px); }
}
 p.wochenkarte-highlight {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .wochenkarte-highlight {
    font-size: 0.95rem;
    gap: 6px;
  }
}
p.wochenkarte-hihglight .arrow {
    color: red;
    font-weight: bold;
}
img {
  transition: transform 0.3s ease;
}
/*komputer myszka hover*/
@media (hover: hover) {
  img:hover {
    transform: scale(1.05);
  }
}
body {
 background-image: url("../img/bg.jpg");
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 }