/* RESET */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Lato-Regular', sans-serif;

   }

   @font-face {
       font-family: 'Lato-Regular';
       src: url('/fonts/Lato-Regular.ttf') format('truetype');
       /* Pfad zur TTF-Datei */
       font-weight: normal;
       /* oder bold oder ein anderer Wert, je nach Font */
       font-style: normal;
       /* oder italic, oblique, etc. */
   }

   @font-face {
       font-family: 'JuliusSansOne';
       src: url('/fonts/JuliusSansOne-Regular.ttf') format('truetype');
       /* Pfad zur TTF-Datei */
       font-weight: normal;
       /* oder bold oder ein anderer Wert, je nach Font */
       font-style: normal;
       /* oder italic, oblique, etc. */
   }

   @font-face {
       font-family: 'Lobster-Regular';
       src: url('/fonts/Lobster-Regular.ttf') format('truetype');
       /* Pfad zur TTF-Datei */
       font-weight: normal;
       /* oder bold oder ein anderer Wert, je nach Font */
       font-style: normal;
       /* oder italic, oblique, etc. */
   }

   /* GRUNDDESIGN */
   body {
       color: #000000;
       background-color: #f5f5f5;
       line-height: 1.6;
   }

   a {
       text-decoration: none;
       color: inherit;
   }

   h2 {
       font-family: 'JuliusSansOne';
   }

   /* NAVIGATION */
   header {
       background-color: #5e2129;
       color: #fff;
       padding: 1rem;
       position: sticky;
       top: 0;
       z-index: 999;
   }

   nav {
       display: flex;
       align-items: center;
       /* Logo und Hamburger-Button vertikal zentrieren */
       justify-content: space-between;
       /* Logo links, Hamburger rechts */
       max-width: 1200px;
       margin: 0 auto;
       position: relative;
       /* nur falls du es später brauchst */

   }

   /* Logo */
   .logoTop img {
       max-width: 100px;

   }

   .logo {
       font-size: 2rem;
       font-weight: bold;
       font-family: 'Lobster-Regular';

   }

   .nav-links {
       display: flex;
       gap: 1rem;
   }

   .nav-links a {
       font-size: 1rem;
       padding: 0.5rem 1rem;
       transition: background-color 0.3s;
       font-family: 'JuliusSansOne';
   }

   .nav-links a:hover {
       background-color: #7f3a42;
       border-radius: 5px;
   }

   /* Hamburger-Icon – standardmässig versteckt (wird nur bei kleinerer Breite sichtbar) */
   .hamburger {
       display: none;
       /* bleibt auf grossen Screens versteckt */
       cursor: pointer;
       background: transparent;
       border: none;
       font-size: 1.5rem;
       color: #fff;
       /* Kein position: absolute; notwendig,
       da 'justify-content: space-between' die Position rechts übernimmt. */
   }

   /* optional: Symbol statt Icon-Schrift */

   /* ---------- FULLSCREEN OVERLAY ---------- */
   .overlay {
       display: none;
       /* sichtbar per .open */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: transparent;
       /* wichtig: transparent */
       flex-direction: column;
       justify-content: center;
       align-items: center;
       color: #fff;
       z-index: 9999;
   }

   .circle {
       position: absolute;

       /* Hier ungefähr so platzieren wie dein Hamburger (rechts oben) */
       top: 1rem;
       right: 1rem;

       width: 20px;
       /* Anfangs kleiner Kreis */
       height: 20px;
       background-color: #5e2129;
       border-radius: 50%;

       /* Start-Zustand: Kreis ist winzig (Scale 0) */
       transform: scale(0);
       transition: transform 0.8s ease-in-out;

       /* Klicks können durch das Kreiselement hindurch gehen */
       pointer-events: none;
       z-index: 1;
       /* Hinter den Overlay-Links (z-index:2) */
   }

   .logo-nav {
       z-index: 2;
       position: absolute;
       top: 40px;
       font-size: 2.5rem;
       text-align: center;
       font-family: 'Lobster-Regular';


   }

   .logo-nav img {
       max-width: 300px;
   }

   .logo-nav a {
       font-family: 'Lobster-Regular';
   }

   .logo-nav:hover {
       color: #7f3a42;
       border-color: #7f3a42;
   }




   .overlay.open .circle {
       transform: scale(130);
       /* Grösse vom Kreis */
       transition: transform 1s ease-in-out;
       /* Geschwindigkeit */
   }

   /* Ist die Overlay-Navigation geöffnet, so wird sie angezeigt */
   .overlay.open {
       display: flex;
   }

   /* Links in der Overlay-Navigation */
   .overlay-links {

       z-index: 2;
       /* höher als 1 in .circle */
       list-style: none;
       text-align: center;
       margin-top: -40px;


   }


   .overlay-links li {
       margin: 1rem 0;
   }

   .overlay-links a {
       transition: transform 0.8s ease-in-out;
       /* Geschwindigkeit */
       color: #fff;
       text-decoration: none;
       font-size: 2rem;
       transition: color 0.3s;
       font-family: 'JuliusSansOne';
   }

   .overlay-links a:hover {
       color: #7f3a42;
   }

   .overlay-links img {
       margin-top: 0;
       max-height: 150px;
   }

   /* Schliessen-Button (Kreuz) 
   position: absolute;
   transform: translateX(-50%);
   */

   .close-btn {
       z-index: 2;

       left: 50%;

       font-size: 5rem;
       cursor: pointer;
       background: none;
       border: none;
       color: #fff;
       transition: color 0.3s;
   }

   .close-btn:hover {
       color: #7f3a42;
   }

   /* HERO-BEREICH */
   .hero {
       width: 100%;
       height: 60vh;
       background: url("/images/Aussen2big.webp") center/cover no-repeat;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       color: #fff;
       position: relative;

   }

   .hero-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 60vh;
       background-color: rgba(0, 0, 0, 0.3);
   }

   .hero-content {
       position: relative;
       z-index: 1;
   }


   .image-container {
       position: relative;
       display: inline-block;
   }

   .image-container img {
       display: block;
       /* Entfernt den Standard-Inline-Abstand */
       width: 100%;
       /* Sorgt dafür, dass das Bild den Container füllt */
       height: auto;
       /* Beibehaltung des Seitenverhältnisses */
   }

   .hero-content img {
       max-width: 350px;
       max-height: 30vh;

   }

   .image-container::after {
       content: "";
       background: url('/images/Logo-Muuh.webp') no-repeat center center;
       background-size: cover;
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       opacity: 0;
       transition: opacity 1s ease;
   }

   .image-container:hover::after {
       opacity: 1;
   }

   .hero h1 {
       font-size: 2rem;
       margin-bottom: 0.5rem;
   }

   .hero p {
       font-size: 1.2rem;
       margin-bottom: 1rem;
   }

   .btn-visit {
       background-color: #5e2129;
       color: #fff;
       padding: 0.8rem 1.5rem;
       border: none;
       cursor: pointer;
       font-size: 1rem;
       font-weight: bold;
       border-radius: 5px;
       transition: background-color 0.3s;
   }

   .btn-visit:hover {
       background-color: #7f3a42;
   }



   /* ÜBER UNS (SECTION) */
   #ueber-uns {
       scroll-margin-top: 110px;
       max-width: 1200px;
       margin: 2rem auto;
       padding: 0 1rem;
   }

   #ueber-uns h2 {
       text-align: center;
       margin-bottom: 2rem;
       font-size: 2rem;
       color: #000000;

   }

   .ueber-uns-inhalt {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 2rem;
   }

   .ueber-uns-text {
       font-size: 1rem;
   }

   .ueber-uns-bild {
       background: url("/images/Bildueberuns.jpg") center/cover no-repeat;
       min-height: 300px;
       border-radius: 8px;
   }


   /* Öffnungszeiten (SECTION) */
   #öffnungszeiten {
       scroll-margin-top: 70px;

       padding: 2rem 1rem;
       margin-left: auto;
       margin-right: auto;
       align-items: center;
       justify-content: center;
       text-align: center;
   }

   .öz-Box {
       justify-content: center;
       min-width: 350px;
       padding-top: 30px;
       padding-bottom: 30px;
       text-align: center;
       margin-left: auto;
       margin-right: auto;
       background-color: #5e2129;
   }

   #öffnungszeiten h2 {
       margin-bottom: 2rem;
       font-size: 2rem;
       color: #fafafa;
   }

   #öffnungszeiten h3 {
       margin-bottom: 0.5rem;
       font-size: 2rem;
       font-weight: bold;
       color: #fafafa;
   }

   #öffnungszeiten p {
       font-size: 1.3rem;
       color: #fafafa;
   }

   /* Restaurant (SECTION) */
   #restaurant {
       background-color: #f5f5f5;
       scroll-margin-top: 70px;

       padding: 2rem 1rem;
   }

   #restaurant h2 {
       text-align: center;
       margin-bottom: 1.5rem;
       font-size: 2rem;
       color: #000000;
   }

   .restaurant-liste {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
       gap: 1.5rem;
   }

   .restaurant-item {
       padding: 0.5rem;
   }

   .restaurant-item img {
       max-width: 100%;
       border-radius: 5px;
       margin-bottom: 0.5rem;
   }

   .restaurant-item p {
       font-size: 0.9rem;

   }



   /* SPEISEKARTE (SECTION) */
   #speisekarte {
       scroll-margin-top: 70px;
       background-color: #fff;
       padding: 2rem 1rem;
   }

   .download {
       text-align: center;
       margin-bottom: 1.5rem;
   }

   #speisekarte h2 {
       text-align: center;
       margin-bottom: 1.5rem;
       font-size: 2rem;
       color: #000000;
   }

   .speisekarte-liste {
       max-width: 1200px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 1.5rem;
   }

   .speise-item {
       background-color: #fafafa;
       padding: 1rem;
       border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       text-align: center;
   }

   .speise-item img {
       max-width: 100%;
       border-radius: 8px;
       margin-bottom: 0.5rem;
   }

   .speise-item h3 {
       margin-bottom: 0.5rem;
       color: #000000;
   }

   .speise-item p {
       font-size: 0.9rem;
       color: #000000;
   }

   .preis {
       font-weight: bold;
       color: #000000;
       margin-top: 0.5rem;
   }

   /* KONTAKT (SECTION) */
   #kontakt {
       scroll-margin-top: 50px;
       padding: 2rem 1rem;
   }

   #kontakt h2 {
       text-align: center;
       margin-bottom: 2rem;
       font-size: 2rem;
       color: #000000;
   }

   #kontakt p {
       margin-bottom: 1rem;
   }

   .kontakt-container {
       max-width: 1000px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 2rem;
   }

   .kontakt-info {
       font-size: 1rem;
       color: #000000;
   }

   .kontakt-formular {
       background-color: #fafafa;
       padding: 1rem;
       border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .kontakt-formular form {
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   .kontakt-formular input,
   .kontakt-formular textarea {
       padding: 0.8rem;
       border-radius: 5px;
       border: 1px solid #ccc;
       width: 100%;
       font-size: 1rem;
   }

   .kontakt-formular button {
       background-color: #5e2129;
       color: #fff;
       padding: 0.8rem 1.5rem;
       border: none;
       cursor: pointer;
       font-size: 1rem;
       font-weight: bold;
       border-radius: 5px;
       transition: background-color 0.3s;
       width: fit-content;
   }

   .kontakt-formular button:hover {
       background-color: #5e2129;
   }

   /* FOOTER */
   footer {
       background-color: #5e2129;
       color: #fff;
       text-align: center;
       padding: 1rem;
       margin-top: 2rem;

   }

   /* PopUp Start -------------------------------------------------------- */
   /* Vollflächiges Overlay; */
   .overlay {
       position: fixed;
       inset: 0;
       display: none;
       /* wird per JS auf grid/flex gestellt */
       place-items: center;
       background: rgba(0, 0, 0, .5);
       z-index: 2147483647;
       /* maximal praktisch */
       overflow: auto;
       -webkit-overflow-scrolling: touch;
   }

   /* wenn Pop-up offen: optional allen Header/Nav die Klicks sperren */
   .popup-open .site-header,
   .popup-open nav,
   .popup-open .dropdown,
   .popup-open .menu {
       pointer-events: none;
   }


   .popup {
       position: relative;
       background: transparent;
       border-radius: 12px;

       padding: 0;
       margin: 16px;

       max-width: calc(100vw - 32px);

       max-height: var(--popup-max-h, 60vh);
       display: block;
   }

   /* Bild füllt nie mehr als den erlaubten Platz, bleibt vollständig sichtbar */
   .popup-image {
       display: block;
       width: auto;
       /* Breite passt sich proportional an */
       height: auto;
       /* proportional */
       max-width: 100%;
       /* nie breiter als Container */
       max-height: var(--popup-max-h, 60vh);
       /* harte Grenze */
       object-fit: contain;
       /* niemals beschneiden */
       border-radius: 12px;
   }

   /* Schliessen-Button */
   .close-btn {
       position: absolute;
       top: 8px;
       right: 12px;
       border: none;
       background: transparent;
       color: #fff;
       font-size: 28px;
       line-height: 1;
       cursor: pointer;
       text-shadow: 0 0 8px rgba(0, 0, 0, .7);
   }

   .close-btn:focus {
       outline: 2px solid #fff4;
       border-radius: 6px;
   }

   .close-btn:hover {
       color: #ff6666;
   }

   /* Schutz: Verhindere, dass globales CSS das Bild auf width:100% ODER height:100% zwingt */
   img.popup-image {
       width: auto !important;
       height: auto !important;
   }





   /* PopUp Ende -------------------------------------------------------- */

   /* RESPONSIVE DESIGN */
   @media (max-width: 768px) {
       .ueber-uns-inhalt {
           grid-template-columns: 1fr;
       }

       .kontakt-container {
           grid-template-columns: 1fr;
       }

       .hero h1 {
           font-size: 1.5rem;
       }

       .hero p {
           font-size: 1rem;
       }
   }


   @media (max-width: 910px) {
       .nav-links {
           display: none;
       }

       .hamburger {
           display: block;
       }
   }

   @media (max-width: 860px) {
       .restaurant-liste {
           display: block;
           margin-left: auto;
           margin-right: auto;
           justify-content: center;


       }

       .map iframe {
           max-width: 100%;
       }

       .restaurant-item {
           display: block;
           margin-left: auto;
           margin-right: auto;
           justify-content: center;
           text-align: center;
       }
   }

   @media (max-width: 1110px) {
       .speisekarte-liste {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;
           grid-template-columns: repeat(2, minmax(200px, 1fr));
           gap: 1.5rem;
       }
   }

   @media (max-width: 500px) {
       .speisekarte-liste {
           max-width: 1200px;
           margin: 0 auto;
           display: grid;
           grid-template-columns: repeat(1, minmax(250px, 1fr));
           gap: 1.5rem;
       }

   }


   * {
       box-sizing: border-box;
   }