/*  CSS 
 * 
 *  public/assets/css/layout_standard_01.css     (Nr 01 ist Start-Nr und wird fortlaufend erhöht) 
 *
 *  Standard-Layout für alle Produktiv-Seiten 
 *
 *
 *         - Mobil bis 1000px siehe:  --- ERWEITERUNG FÜR MOBILGERÄTE: ---  
*/



/* --------------- Mitte-Segment-Bereich -------------------- */

.mitte-segment { 

/* width: 100%;  ← ENTFERNEN oder ändern zu: */
    
    z-index: 1;          /* Basis-Ebene - wg. HG-Bild */

    width: auto;
    height: auto;        /* Auch sinnvoll: height ist jedoch nicht nötig */
 
    flex-grow: 1; 
    
    /* GEÄNDERT: min-height nutzt jetzt 'vh' (Viewport Height). 
       Zusammen mit 'flex-grow: 1' sorgt das dafür, dass das Segment bei wenig Inhalt 
       den Bildschirm füllt, aber bei langen Listen unendlich nach unten mitwächst. */
    min-height: calc(100vh - 80px - 30px - 20px); 
    
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: flex-start;    /* Wichtig für das Sticky-Verhalten der Banner */

    flex-wrap: nowrap;

    /* GEÄNDERT: Oben 2rem (ca. 32px), Seiten 0, Unten exakt 60px - Werbe-DIVs links und rechts scrolle mit, wenn Footer kommt */
    padding: 2rem 0 60px 0;

    gap: 20px;
}


    /* --- ERWEITERUNG FÜR MOBILGERÄTE: --- */
    @media (max-width: 1000px) {
         .mitte-segment {
              gap: 0px;
         }
     }



.mitte-seg-text {
    position: relative; 
    z-index: 1;                 /* Basis-Ebene - wg. HG-Bild */

    color:      #000;
    font-size:  0.8em; 
    text-align: left;
    margin:     30px auto;      /* Gibt Abstand nach oben/unten und zentriert horizontal */
    padding:    10px 10px;
}



/* Home-Mitte-Seg HG-Bild: Das img-Tag, das sich wie ein Hintergrundbild verhält und verblasst */

.home-mitte-fade-out-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        /* Füllt die volle Breite des DIVs aus */
    height: 100%;       /* Füllt die volle Höhe aus */
    object-fit: cover;  /* Verhindert das Verzerren des Bildes */
    z-index: -1;        /* Schiebt das Bild in den Hintergrund, hinter Text und Formular */
    
    /* Die Animation: Name, Dauer (15s), Ablauf (linear), bleibt am Ende stehen (forwards) */
    animation: verblassen 15s linear forwards;
}


/* Home-Mitte-Seg HG-Bild: Die Animations-Regel für das Verblassen */
@keyframes verblassen {
    0% {
        opacity: 0.3;    /* Am Anfang voll sichtbar - 0.3 */
    }
    10% {
        opacity: 0.3;    /* Optional: Bleibt bis Sekunde 2 zu 0.3 sichtbar (10% von 15s) */
    }
    100% {
        opacity: 0;      /* Nach 15 Sekunden völlig unsichtbar */
        display: none;   /* Macht das Bild auch für Klicks unsichtbar */
    }
}

       /* ---  !!! Such-Formular ist weiter unten !!! --- */

/* --------------- Ende Mitte-Segment-Bereich -------------------- */



/* ------------------------- Orte-Wolke mit arr-Zeilen -------------------------- */

/* Der Hauptcontainer der arr-Wolke */
.orte-wolke-container {
    background: transparent;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
    max-width: 900px;
    margin: 10px auto;
    font-family: Verdana, sans-serif, Tahoma, Geneva, ;
    line-height: 1.5;     /* Schafft vertikalen Raum zwischen den "Wolken-Schichten" */
}

/* Eine logische Zeile in der Wolke */
.wolke-zeile {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}


/* Styling für den Wechsel-Ort-Button */
.wolke-w-ort-btn {
    margin-bottom: 5px; 
    padding:       4px 8px;
    color:         #333;
    font-size:     1.0em;
    border:        1px solid #999;
    cursor:        pointer;
    border-radius: 4px;

    background-color: transparent;
}

.wolke-w-ort-btn:hover {
    background-color: #e8f1f8; 
}


/* Die Orte als "Tröpfchen" in der Wolke */
.wolke-ort {
    display: inline-block;
    color: #1a5276;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8em;
    padding: 2px 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Ein schöner Wolken-Hover-Effekt */
.wolke-ort:hover {
    color: #ffffff;
    background-color: #1a5276;
    border-radius: 20px;
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 82, 118, 0.3);
}

/* Das Styling für die zufälligen Freiräume */
.wolke-space {
    display: inline-block;
    pointer-events: none; /* Nicht markier- oder anklickbar */
}

/* Fortgeschrittener Trick: Pseudo-Zufall für Schriftgrößen, 
   damit die Wolke dynamischer wirkt (jeder x-te Ort wird leicht größer/kleiner) */
.wolke-ort:nth-child(3n) { font-size: 1.2em; font-weight: 600; opacity: 0.9; }
.wolke-ort:nth-child(4n) { font-size: 0.9em; font-weight: 400; opacity: 0.8; }
.wolke-ort:nth-child(5n) { font-size: 1.1em; font-weight: 500; }


/* ----------------------- Ende Orte-Wolke mit arr-Zeilen  ----------------------- */ 



/* ------------------------- Orte-Wolke mit sam-String --------------------------- */

/* Der Hauptcontainer der sam-Wolke */
.sam_orte_wolke-container {
    width: 100%;
    max-width: 900px;
    height: 32em;   /* Genug Höhe für die vertikale Ausbreitung der Spirale */
    overflow: hidden;
    background: transparent;
    position: relative;
    margin: 0 auto;
}

.sam_orte_wolke-inhalt {
    position: relative;
    width: 100%;
    height: 100%;
}

.sam_orte_wolke-ort {
    display: inline-block;
    color: #333;
    text-decoration: none;
    padding: 6px 10px; 
    position: absolute; /* Wichtig für freie Positionierung */
    white-space: nowrap;
    line-height: 1;
    transform-origin: center center; /* Rotation um die eigene Mitte */
    transition: color 0.2s, transform 0.2s;
}

.sam_orte_wolke-ort:hover {
    color: #0066bb;
    /* Behält beim Hovern eine eventuelle Drehung bei und vergrößert leicht */
    scale: 1.1; 
}

/* ---------------------- Ende Orte-Wolke mit sam-String ------------------------- */





/* ----------------------- Orte-Wolke Meer-Menu ------------------- */ 
/* --------------- Alpen, Nordsee, Ostee, 12 Best Orte ------------ */

/* Container relativ positionieren, damit das Menü absolut darunter ausgerichtet werden kann */
.wolke-dropdown-container {
    position: relative;
    display: inline-block;
    margin-left: 6px; 
}

/* Styling für den Button */
.wolke-dropdown-btn {
    background-color: transparent;
    color: #333;
    padding: 4px 8px;
    font-size: 1.0rem;
    border: 1px solid #999;
    cursor: pointer;
    border-radius: 4px;
}

.wolke-dropdown-btn:hover {
    background-color: #e8f1f8; 
}

/* Das Menü (standardmäßig ausgeblendet) */
.wolke-dropdown-menu {
    display: none;
    position: absolute;
    left: -40px;
    top: 105%;    /* Platziert das Menü direkt unter dem Button */
    padding: 10px 8px;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid #999;
    border-radius: 6px;
    z-index: 1000;
}

/* Die Links untereinander darstellen */
.wolke-dropdown-menu a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block; /* Erzwingt den Zeilenumbruch (untereinander) */
    font-size: 15px;
}

/* Hover-Effekt für die Links */
.wolke-dropdown-menu a:hover {
    background-color: #f5f5f5;
    color: #000;
}

/* Diese Klasse wird per JavaScript hinzugefügt, um das Menü anzuzeigen */
.wolke-dropdown-menu.show {
    display: block;
}


/* -------------------- Ende Orte-Wolke Meer-Menu ------------------- */ 


 
 
/* ------------ FIXIERTE WERBUNG links und rechts ---------------- */

.banner-fix {
    position: -webkit-sticky; 
    position: sticky;
    top: 20px; 
    
    width: 300px;
    height: 600px; 
    background-color: #f2f4f4;
    border: 1px solid #bdc3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;           /* Verhindert das Stauchen der 310px */
}


.banner-links { 
    left: 10px;      /* 10px vom linken Bildschirmrand entfernt */
    width: 300px;    /* Auf 300px Breite verkleinert */
    height: 600px;   /* Deine gewünschte Höhe */

    flex-shrink: 0;  /* Verhindert, dass sie bei wenig Platz schrumpfen */
}

    /* --- ERWEITERUNG FÜR MOBILGERÄTE: --- */
    @media (max-width: 1000px) {
         .banner-fix.banner-links {
              left:   1px;
              width:  1px;
              height: 600px;
              border: none;
              background-color: #99c;
         }
     }


 
.banner-rechts { 
    right: 10px;     /* 10px vom rechten Bildschirmrand entfernt */
    width: 300px;    /* Auf 300px Breite verkleinert */
    height: 600px;   /* Deine gewünschte Höhe */

    flex-shrink: 0;  /* Verhindert, dass sie bei wenig Platz schrumpfen */
}


    /* --- ERWEITERUNG FÜR MOBILGERÄTE: --- */
    @media (max-width: 1000px) {
         .banner-fix.banner-rechts {
              left:   1px;
              width:  1px;
              height: 600px;
              border: none;
              background-color: #99c;
         }
     }




/* --- SCROLLBARER INHALT - Segment Seiten-Mitte --- */
.content-scroll {

    z-index: 1;           /* Basis-Ebene - wg. HG-Bild */

    position: relative;   /* WICHTIG: Verhindert, dass das HG-Bild auf den ganzen Bildschirm ausbricht */
    width:    100%;       /* Oder deine gewünschte Breite, z.B. max-width: 1200px; */
    overflow: hidden;     /* Schneidet überstehende Bildränder sauber ab */

    flex-grow:   1;  
    flex-shrink: 1; 
    min-width:   320px;   /* VERHINDERT das Zusammenschieben nach links */
    
    max-width:        1200px; 
    margin:           0 auto;
    padding:          20px;
    border:           1px solid #eaeded;
    background-color: #ffffff;
}


/* ------------ Ende FIXIERTE WERBUNG links und rechts ---------------- */



/* ----------------------------- Such-Formular ------------------------------------------------------- */
/* -----                       Segment Seiten-Mitte                                           -------- */ 
/* ----- mit: Such-Input, Such-Button, Clear-Button, 2 Checkboxen Long-Stay + Cheap Monteure  -------- */ 


.such-formular { 
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem; 

    flex-wrap: wrap;          /* Verhindert, dass das Formular die Spaltenbreite starr blockiert */
    justify-content: center;  /* ← Zentriert Input + Button */
}


.such-formular input[type="text"] {
    min-width: 250px;

    padding: 0.6rem;
    font-size: 1.2rem;
    border: 1px solid #888;
    border-radius: 4px;
    min-width: 250px;
}

.such-formular button {
    background-color: #1a5276;
    color: #f6f4f4;
    font-size: 1.2rem;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
}

.such-formular button:hover {
    background-color: #14405c;
}


/* Styles für den schmalen Clear-Button */
.such-formular .button-clear {
    padding: 8px 6px;             /* Weniger Breite links/rechts */
    background-color: #e8f1f8;    /* Hellblaues/neutrales Hintergrunddesign */
    color: #1a5276;               /* Deine dunkelblaue Farbe */
    border: 1px solid #1a5276;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s ease;
}

/* Hover-Effekt für den Clear-Button */
.such-formular .button-clear:hover {
    background-color: #d4e4f1;
    color: #c0392b;               /* Wird beim Drüberfahren dezent rot für das "Löschen"-Gefühl */
    border-color: #c0392b;
}

 
.fehler-text {
    color: #c0392b;
    margin-top: 1rem;
    font-weight: bold;
    text-align: center;
}

 

     /** Mobil-Such-Formular **/
     /** **/ 
     @media (max-width: 1000px) {
         .such-formular {
             flex-direction: column;
             align-items: center;
             width: 90%;
         }
         .such-formular input[type="text"] {
             width: 100%;
             min-width: 0;
         }
         .such-formular button {
             width: 100%;
         }
     }





/* ---- Check-Boxen - Long Stay + Cheap Monteure  ------------- */


/* Container für die beiden Zeilen untereinander */
.such-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Das Label dient als Klickfläche und Zeile */
.such-toggle-row {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
}


/* Die unsichtbare echte Checkbox */
.such-toggle-row input[type="checkbox"] {
    display: none;
}

/* Die eigentliche Farbfläche (Basis-Styling) */
.such-toggle-text-long-stay {
    padding: 0 4px;
    border: 1px solid #999;  
    border-radius: 3px;
    flex-shrink: 0;             /* Verhindert, dass die Box unsichtbar klein gedrückt wird */ 

    width: 110px;               /* Feste Breite – groß genug für "Long Stay OFF" - wg. Wackeln OFF - ON */
    text-align: center;         /* Zentriert den Text in der Box */
    display: inline-block;      /* Sorgt dafür, dass die Breite korrekt berechnet wird */
}


/* Die eigentliche Farbfläche (Basis-Styling) */
.such-toggle-text-mont {
    padding: 0 4px;
    border: 1px solid #1a5276;  
    border-radius: 3px;
    flex-shrink: 0;            /* Verhindert, dass die Box unsichtbar klein gedrückt wird */

    width: 110px;               /* Feste Breite – groß genug für "Long Stay OFF" - wg. Wackeln OFF - ON */
    text-align: center;         /* Zentriert den Text in der Box */
    display: inline-block;      /* Sorgt dafür, dass die Breite korrekt berechnet wird */
}



/* Farben für die Boxen über Klassen zugewiesen - helles Blau-Grau */
.such-toggle-text-long-stay { background-color: #e8f1f8; }
.such-toggle-text-mont      { background-color: #e8f1f8; }


.such-toggle-text-long-stay:hover { background-color: #f6f6fd; }
.such-toggle-text-mont:hover      { background-color: #f6f6fd; }


/* WENN die Checkbox aktiv ist -> Farbfläche hell: Hell-Blau */
input[type="checkbox"]:checked + .such-toggle-text-long-stay {
    background-color: #66ffee;
}

/* WENN die Checkbox aktiv ist -> Farbfläche hell: Hell-Gelb */
input[type="checkbox"]:checked + .such-toggle-text-mont {
    background-color: #ffffaa;
}
 


/* --------------------------------- Ende Such-Formular --------------------------------- */






/* ---------- haus-Treffer-Liste LEER ---------- */
     /* --- mit Text-Info oder Ort-Wolke --- */ 
 

.mitte-2t-mitte-seg-text {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}



.mitte-2t-inhalt-text {
    margin-top: 10px;
    padding: 10px;
    line-height: 1.5; 
    font-size: 1.2rem; 
}

 
/* --- Die Wechsel-Buttons oben --- */
.mitte-2t-button-wechsel {
    background-color: #e8f1f8;
    color: #1a5276;
    border: 1px solid #1a5276;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 15px;
    transition: all 0.2s ease;
}

.mitte-2t-button-wechsel:hover {
    background-color: #1a5276;
    color: #ffffff;
}

/* Einfaches Styling für die Städte-Verlinkungen (Wolke) */
.mitte-2t-inhalt-wolke {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
}


/* ---------- Ende haus-Treffer-Liste LEER  ---------- */



/* ---------- haus-Treffer-Liste  ---------- */


/* xx Treffer für Stadt xyz */
.treffer-u-hinweis {
    text-align:   center;       /* Zentriert den Treffer-Hinweis passend zur Suche */
    margin-left:  20px;    /* Gleichmäßiger Abstand nach oben/unten, zentriert */
    font-size:    1.1rem;         
    color:        #555; 
}



.fon-49 {
    font-size: 1.0rem;         /* +49 Telefon minimal kleiner */
    color:     #555; 
}


/* Treffer-Listung der Unterkünfte */
.haus-liste {
    list-style:  none;                  /* Entfernt die Standard-Aufzählungspunkte */
    padding:     0;                     /* Entfernt den Standard-Innenabstand der Liste */
    margin:      8px auto 20px auto;    /* Außenabstand nach oben und unten - auto sorgt für Symmetrie*/
    display:     flex;
    flex-direction: column;             /* Listeneinträge untereinander */ 

    gap:         12px;                  /* Moderner Abstand zwischen den einzelnen Einträgen */
    font-size:   1.0rem;
    width:       100%;                  /* Garantiert, dass die Liste die volle Breite des zentrierten Inhalts nutzt */
    max-width:   100%;
    font-family: -apple-system, BlinkMacSystemFont, "Verdana", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* Der einzelne Listeneintrag (Unterkunft) */
.haus-eintrag {
    margin-left:      0;
    padding:          16px 20px;            /* Genug "Atemraum" für den Text */
    width:            100%; 

    border:           1px solid #e2e8f0;    /* Sehr feiner, hellgrauer Rahmen */
    border-radius:    8px;                  /* Leicht abgerundete Ecken */
    line-height:      1.5;                  /* Erhöhter Zeilenabstand für bessere Lesbarkeit */
    color:            #334155;              /* Dunkelgrau statt hartem Schwarz */

    transition: all 0.2s ease-in-out;       /* Weicher Übergang bei Hover */

    background-color: #fcfcfc;              /* Weißer Hintergrund für Leichtigkeit */

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);   /* Minimaler Schatten für Tiefe */
}



/* Hover-Effekt: Zeigt dem Nutzer interaktiv, wo er sich befindet */
.haus-eintrag:hover {
    border-color:     #cbd5e1;
    box-shadow:       0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background-color: #f8fafc; /* Minimaler Graustich beim Drüberfahren */
}


/* Kreis: Preis-Niveau div-Kreis der Unterkunft (haus) */
.div-preis-niveau {
     float: left; 
     width: 14px; 
     height: 14px; 
     margin: 8px 10px 0 0;
     border: 1px solid #999; 
     border-radius: 50%; 
     background-color: #CC3;   /* Wird überschrieben per style= */
}



/* Legende-DIV  Preis-Niveau-Scala der div-Kreise am Ende der Listung */

div.preis-niveau-scala {
   display:     flex; 
   margin-left: 16px;
   align-items: center; 
   gap:         6px;
}

div.preis-niveau-kreis {
   width:  14px; 
   height: 14px; 
   margin: 6px 4px 0 0;

   border:        1px solid #999; 
   border-radius: 50%;
 
   /* Verhindert, dass die Kreise zu Ovalen gequetscht werden */
   flex-shrink: 0;
}

         /** Mobil: Preis-Niveau-Scala **/ 
         @media (max-width: 1000px) {
              div.preis-niveau-scala {
                 /* Erlaubt den Elementen, in die nächste Zeile zu springen */
                 flex-wrap: wrap; 
                 /* Optional: Etwas mehr Abstand nach unten, falls sie umbrechen */
                 row-gap: 10px; 
              }
         }
         /** Ende Mobil Preis-Niveau-Scala **/ 


/* Ende Legende-DIV  Preis-Niveau-Scala */ 
         




/* Styling für den Link (Firmenname) per strong-Tag */
.haus-eintrag strong a {
    color: #2563eb;            /* Ein klares, gut lesbares Blau für Links */
    text-decoration: none;     /* Unterstreichung standardmäßig weg */
    display: block;            /* Macht den Namen zu einer eigenen Zeile */
    margin-bottom: 4px;        /* Abstand zur Adresse darunter */
    font-size: 1.0rem;         /* Name minimal größer als die Adresse */
}


span.haus-name {
    font-size:   1.15rem;
    font-weight: bold;
    color:       #116; 
}


span.haus-adresse {
    font-size:1.0rem;
}

span.haus-ortsteil {
   font-size: 1.0rem;
}


/* Telefon - Klick-Telefon*/
.haus-tel {
    font-size: 1.0rem;         /* Telefon_Symbol minimal größer als die Adresse */
}



/* Map, OSM OpenStreetMap */
.haus-map {
    font-size: 0.9rem;         /* Map minimal größer als die Adresse */
}

/* FU-App - Zielscheibe */
.fu-app-zielscheibe {
    margin: 0 20px 0 30px;    
    width:  20px;       
}


/* Haus Lage im Ort - z.B.: [Zentrum] */
.lage-zca {
    margin-left: 10px;    
    font-size: 0.7em;       
}


.haus-tel-klick {
    font-size: 1.1rem;         /* Telefon minimal größer als die Adresse */
    color: #000; 
}


/* Tel-Link-Hover */
.haus-tel-klick:hover {
    text-decoration: underline; /* Unterstreichen beim Hovern für Klarheit */
    color: #1a1a90;             /* Etwas dunkleres Blau beim Hovern */
}


/* UK-Link-Hover */
.haus-eintrag strong a:hover {
    text-decoration: underline; /* Unterstreichen beim Hovern für Klarheit */
    color: #1d4ed8;            /* Etwas dunkleres Blau beim Hovern */
}