/*  CSS 
 * 
 *  public/assets/css/layout_base_haeder_footer_werbung_01.css     (Nr 01 ist Start-Nr und wird fortlaufend erhöht) 
 *
 * - Responsive Design
 * 
 *  => Layout Website      - Mobil bis 1000px siehe:  @media OR --- ERWEITERUNG FÜR MOBILGERÄTE: ---  
 *     - Base   
 *     - Header  
 *     - Footer 
 *     - Werbung  
 *
*/


/* ------------------------------- B a s e ---------------------------------------- */
/* -----------------------------             -------------------------------------- */
/* --------------- Grund-Styling für den General-site-Base ------------------------ */
/* ----------------      Für: html, body                   ------------------------ */  
/* ----------------      h1 - h3, button, ul  u.a.         ------------------------ */  


/* 1. Global Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2. Basis-Größen */
html {
    font-size: 100%; 
    min-height: 100vh;           //--- Bildschirm-Größe 
}


/* 3. Body-Styling (Klammer wird jetzt korrekt geschlossen!) */
body {
    min-height:       100vh;
    background-color: #cfe8f5; /* helles Blau */
    display:          flex;
    flex-direction:   column;

    font-family:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight:   400;
    color:         #2d3748;

    /* HIER greift jetzt die Fließtext-Größe für das gesamte Portal */
    line-height:   1.5;
    font-size:     1.2rem; 
}

    @media (max-width: 1000px) {
        body {
             padding-left:  1%;
             padding-right: 1%;
        }
    }

 
/* 4. Überschriften & Gemeinsame Styles */
h1, h2, h3, .hotel-title {
    font-family: system-ui, sans-serif;
    font-weight: 600;
    color:       #1a202c;
    line-height: 1.2;
}

/* 5. Spezifische Hierarchien */
h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; }
h2 { font-size: 1.6rem; font-weight: 600; line-height: 1.3; margin-bottom: 1.2rem; }
h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 1.0rem; }

h3 { margin-top: 1.0rem; }

.hotel-preis {
    font-size:   1.25rem;
    font-weight: 700;
}

.kleingedrucktes {
    font-size: 0.9rem;
}

/* --- <span>  ------------------ */
.span-neukom {          /* Neu-Kommentar */ 
  margin-left: 40px;
  color:       #009; 
}


/* 6. Formular-Elemente & Links */
a {
    color:           inherit;
    text-decoration: none;
}

button {
    cursor:      pointer;
    font-family: inherit;
    font-size:   1.0rem; 
    /* Nutzt 1rem basierend auf dem HTML-Standard (16px), damit Buttons nicht riesig werden, falls der Body wächst */
}


/* --- <ul>  ------------------ */
ul {
  margin-top: 20px;   /* Abstand nach oben */
  font-weight: bold;  /* Text fett (vererbt sich auch auf die li) */
}

li {
  margin-top:   6px;    /* Abstand nach oben */
  margin-left: 30px;    /* Rückt die Listenpunkte nach rechts ein */
  font-weight: normal;  /* Text normal */
}
/* --- Ende - <ul>  ---------- */




/* ----------- Ende Base ---------------------- */




/* ---------------------------- H e a d e r --------------------------------------- */
/* ----------------------------             --------------------------------------- */
/* --------------- Grund-Styling für den General-site-Header ---------------------- */



/* ---------- Banner ---------- */
/* --- Domain-Name Website ---- */ 
.site-header {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a5276;
    color: white;
}

.banner-text {
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: bold;
}



/* Werbe-DIV - NUR Mobile sichtbar */
.head-werbe-mantel {
    position: sticky;   
    top:      0;
    z-index:  1000;          /* Werbung liegt über den anderen Inhalten */

    display:     flex;       /* Oder 'flex'/'grid', je nach Inhalt */
    width:       100%;
    min-height:  120px;      /* min-height, wg. Werbe-Banner: 320 x 100px */
    align-items: center;

    justify-content:  center;
    background-color: #e8f1f8;    /* bg-Color vom Menu */  
}


/* img-Werbe-Bild - NUR Mobile sichtbar */
.img-head-werbe-top {
    margin-top: 10px;
    height:     100px;               /* Füllt die Höhe des Containers */
    width:      320px;               /* Füllt die Breite des Containers */  
    border:     1px solid #333;
    
    /* Jetzt wirkt der Zaubertrick: Skaliert und beschneidet, ohne Verzerrung */
    object-fit: cover;
    
    /* Optional: Zentriert den Bildinhalt */
    object-position: center;
}

 
     /* Desktop-Ansicht: Ab 1001 Pixel Bildschirmbreite wird der Mantel ausgeblendet */
     @media (min-width: 1000px) {
         .head-werbe-mantel {
            display: none;
         }
     }



/* -------------------- Menü -------------------------- */

.menu-zeile {
    position: sticky;   
    top:      0;
    z-index:  999;           /* Menü liegt über den anderen Inhalten */
     
    display:     flex;
    width:       100%;
    min-height:  100px;      /* min-height - wg. Werbebanner: 320 x 100px */
    align-items: center;

    justify-content:  center;
    background-color: #e8f1f8; 

    box-sizing: border-box;
    flex-wrap:  wrap;         /* Erlaubt das Umbrechen der Gruppen auf Mobilgeräten */
    padding:    5px 10px;     /* Ein bisschen Polsterung oben/unten/links/rechts */
}


/* Die Text-Links-Gruppe */
.menu-links {
    display: flex;
    gap: 15px;       /* Flexibler Abstand zwischen den Texten */
}


/* Die Flaggen-Gruppe */
.menu-flags {
    display: flex;
    gap: 8px;             /* Flexibler Abstand zwischen den beiden Flaggen */
    margin-left: 30px;    /* Desktop-Abstand zum Menü */
}


     /* --- ERWEITERUNG FÜR MOBILGERÄTE --- */
     @media (max-width: 1000px) {
         .menu-zeile {
             top:           120px;          /* statt 0 - wg.: Werbe-Div: head-werbe-mantel - */
                                            /*           Höhe vom Werbe-DIV mit margin: 120px -> .head-werbe-mantel */ 

             min-height:  40px;             /* min-height - hier für Menu-Zeile ok */

             /* flex-direction: column; */  /* Stapelt Menü und Flaggen untereinander -> NICHT gut, da 3 Stapel entstehen */
             gap: 8px;                      /* Abstand zwischen Menüblock und Flaggenblock */
         }

         .menu-links {
             flex-wrap: wrap;        /* Erlaubt den Wörtern selbst zu brechen, falls das Handy extrem schmal ist */
             justify-content: center;
         }

        .menu-flags {
             display:         flex;     /* Aktiviert Flexbox auch mobil für die Flaggen */
             flex-direction:  row;      /* Zwingt die Flaggen stur nebeneinander in einer Zeile zu bleiben */
             justify-content: center;   /* Zentriert die Flaggen-Zeile perfekt in der Mitte */
             margin-left:     0;        /* Entfernt den großen Desktop-Abstand */
             gap: 10px;                 /* Definiert den Abstand zwischen den beiden Flaggen mobil */
         }

     }



/* Gemeinsame Basis für die konkaven Bögen links und rechts */
.menu-zeile::before,
.menu-zeile::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;  /* 12% Bildschirmbreite */
    z-index: 1;  /* WICHTIG: Holt die Bögen VOR den Hintergrund des Menüs */
    
    /* Der Farbverlauf von oben nach unten */
    background: linear-gradient(to bottom, #1a5276 0%, #e8f1f8 100%);
}
   
 
      /* --- ERWEITERUNG FÜR MOBILGERÄTE: --- */
      @media (max-width: 1000px) {
          .menu-zeile::before,
          .menu-zeile::after {
            content: none;      /* Schaltet die Bögen mobil komplett ab */
          }
      }


/* Linker konkaver Bogen */
.menu-zeile::before {
    left: 0;
    /* Schneidet einen Viertelkreis mit dem Radius der Elementbreite (100%) aus der unteren rechten Ecke */
    -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, transparent 99%, black 100%);
    mask-image: radial-gradient(100% 100% at 100% 100%, transparent 99%, black 100%);
}

/* Rechter konkaver Bogen */
.menu-zeile::after {
    right: 0;
    /* Schneidet einen Viertelkreis aus der unteren linken Ecke */
    -webkit-mask-image: radial-gradient(100% 100% at 0% 100%, transparent 99%, black 100%);
    mask-image: radial-gradient(100% 100% at 0% 100%, transparent 99%, black 100%);
}

 
 

/* Menü-Links ganz nach vorne holen, damit sie klickbar bleiben */
.menu-zeile a {
    position: relative;
    z-index: 2;                /* Höher als die Bögen */
    color: #333;
    text-decoration: none;
    padding: 0 12px;           /* Abstand zueinander:  Link-Buttons  */
}


.menue-button {
    padding: 0 10px; 
    color: #333;
    border: none;
    font-size: 1.0em;   
}


.menue-button:hover {
    color: #999;
}


nav a:hover {
    color: #999;
}

nav a {
    padding: 0 10px; 
    color: #000;
    border: none;
    font-size: 0.8em;   
    text-decoration: none;
}

nav a.active {
    padding: 0 12px; 
    color: #1a5276;
    border: none;
    font-size: 0.8em;   
    text-decoration: overline; 
    text-decoration-color: #1a5276;
}

/* -------------------- Ende Menü -------------------------- */





/* ---------------------------- F o o t e r --------------------------------------- */
/* ----------------------------             --------------------------------------- */
/* ---------- Grund-Styling für den General-Footer-Container ---------------------- */
/* --- 3 DIVs hoch  -  oberes DIV hat 6 Spalten   -  DIV 2 und 3 sind ohne Spalten  */


/* Grundaufbau des Haupt-Footers als Zeilen-Grid */
.site-footer {
    display: grid;
    /* Definiert die 3 horizontalen Zeilen: 400px, 100px, 100px */
    grid-template-rows: 460px 100px 40px; 
    
    height: 600px;
    background-color: #1a5276; 
    color: #fff;
    box-sizing: border-box;
}


/* --- OBERES DIV: Das Spalten-Grid --- */
.footer-top-row {
    display: grid;
    /* Nutzt deine PHP-Variable für die Spalten */
    grid-template-columns: var(--footer-cols, repeat(6, 1fr));
    gap: 20px; 
    
    /* Innenabstand nur im oberen Bereich, damit das Layout atmen kann */
    padding: 60px 20px 20px 20px; 
    box-sizing: border-box;
}


     /* --- ERWEITERUNG FÜR MOBILGERÄTE --- */
     @media (max-width: 1000px) {
        .site-footer {
            /* Auf Mobilgeräten heben wir die starren Höhen auf, damit nichts überlappt */
            height: auto;
            grid-template-rows: auto auto auto;
        }

        .footer-top-row {
            /* Spalten untereinander auf Smartphones */
            grid-template-columns: 1fr; 
        }
     }




/* --- MITTLERES & UNTERES DIV --- */
.footer-middle-row,
.footer-bottom-row {

    /* WICHTIG: Damit die Zeilen exakt so breit sind wie die obere Zeile */
    width: 100%; 
    
    /* Gleicher Seitenabstand wie oben (20px), um die Symmetrie zu wahren */
    padding:    20px;
    box-sizing: border-box;

    /* Aktiviert Flexbox */
    display: flex;
    
    /* Zentriert den Inhalt horizontal (links/rechts) */
    justify-content: center;
    
    /* Zentriert den Inhalt vertikal (oben/unten) */
    align-items: center;

    text-align: center; 
    
    /* Sicherheitsnetz: Verhindert, dass der Inhalt bei Zoom/viel Text 
       den Container nach rechts aufbläht */
    overflow: hidden;
}

 

/* Styling für die einzelnen Spalten */
.footer-col {
    background-color: #1a5276;   
    padding: 15px;
    border-radius: 4px;
}

/* --------- Ende Grund-Styling für den General-Footer-Container ------------------- */





/* ------------------------------------------------------------------------------------- */ 
/* ------------------------------------------------------------------------------------- */ 
/* ---------- Werbung DIV 300x600 links und rechts - DIV mit HG-Bild und Text ---------- */
/* ----------   Werbung-Layout für alle Werbeflächen aller Produktiv-Seiten   ---------- */

.werbe-bg-300-600 {
    width:      300px;
    height:     600px;
    margin-top: 0;
    
    /* Hintergrundbild-Einstellungen */
    /* background-image: url('dein-bild-pfad.jpg');  Pfad individuell per style */
    background-size: cover;
    background-position: center;
    
    /* Text-Zentrierung und Styling */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    color: white;
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
}

      /* --- ERWEITERUNG FÜR MOBILGERÄTE: --- */
      @media (max-width: 1000px) {
           .werbe-bg-300-600 {
              display: none; 
           }
      }

/* ---------- Ende Werbung DIV 300x600 ---------- */