:root {
  --comtop-size: 60px;
  --Main-BG-Color: #ffffff;
  --Main-BG-Border: #eaeaea; 
  --Main-Font-Color:#000000;
  --Main-Hover-Color:#000000;
  --Main-WibBG-Color:#ffffff;
  --Link-Font-Color:#000000;
  --Font-Logo-Color: #000000;
}

/* Sicherheitsnetz: verhindert horizontales Scrollen/Verschieben der
   gesamten Seite, falls irgendwo (z.B. eine PHP-Warnung mit langem
   Windows-Dateipfad ohne Umbruchstelle) ein zu breites Element auftaucht */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
  width: 100%; 
  box-sizing: border-box;
  border: 0px dotted var(--Main-BG-Border);
  padding: 0px;
  margin-top: 10px;
  float: left;
  bottom:0; 
  color: var(--Main-Font-Color);
}
#container a {
  color: var(--Main-Font-Color);
  /*text-decoration: underline;*/
}
#container a:hover {
   color: var(--Main-Hover-Color);
}
/*
====================================================
    Kopfbereich
====================================================
*/
#header {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  width: 100%;
  position: relative;
 /* position: fixed;*/
 /* height:85px;*/
  font-size: 15px;
 /* color: var(--Main-Font-Color);*/
 /*  color: var(--Main-Font-Color);*/ 
  border: 0px solid var(--Main-BG-Border);
 /* background-color: #eaeaea;*/
  padding-left: 0px;
  margin: 0px;
  float: left;
  }
#textHeaderLeft {
  padding-left: 10%;
  margin-top: 22px; 
  margin-bottom: 5px; 
  font-size: 35px;
  border: 0px solid #000000;
  color: var(--Main-Font-Color);
  float: left;
  /*font-weight: bold;*/
  /*border: 1px solid var(--Main-BG-Border);*/
}
#textHeaderLeft a {
 /* color: #729abf;*/
  color: var(--Link-Font-Color);
  text-decoration: none;
}
#textHeaderLeft a:hover {
  color: var(--Font-Logo-Color);
  text-decoration: none;
}
#textHeaderRight {
  position: absolute; 
  bottom: 5px;
/*  left: 450px;*/
  left: 70%;
  font-size: 15px;
  text-align: bottom;
  background-color: var(--Main-WibBG-Color);
  /*font-weight: bold;*/
  border: 0px solid var(--Main-BG-Border);
}
#textHeaderRight a {
  color: var(--Font-Logo-Color);
  text-decoration: none;
}
#textHeaderRight a:hover {
  color: var(--Font-Logo-Color);
  text-decoration: underline;
}
#naviright {
  text-align: right;
  /*color: #000000;*/
  height: 15px;
  margin-top: 0px; 
  font-size: 10px;  
  margin-right: 0px;
  padding-right: 20px;
  border-bottom: 0px solid var(--Main-BG-Border);
  float: right;
}
#naviright a {
  color: var(--Link-Font-Color);
  text-decoration: none;
}
#naviright a:hover {
  /*color: #ffffff;*/
  text-decoration: underline;
}
/*
====================================================
    Toolbar
====================================================
*/
#movit {
  padding-left: 10%;
  margin-bottom: 20px;
}
#path_navigation_start {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*position:fixed;*/
  /*background-color: var(--Main-BG-Color);*/
  width: 99%;
 /* height: 30px;*/
  font-size: 12px;
  color: var(--Main-Font-Color);  
  border-bottom: 1px solid var(--Main-BG-Border) ;
  padding-left: 0%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
}

#path_navigation {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  /*position:fixed;*/
  /*background-color: var(--Main-BG-Color);*/
  width: 99%;
 /* height: 30px;*/
  font-size: 12px;
  color: var(--Main-Font-Color);  
  border-bottom: 1px solid var(--Main-BG-Border) ;
  padding-left: 10%;
  margin-top: 20px;
  margin-bottom: 20px;
  float: left;
}
#path_navigation a {
  color: var(--Main-Font-Color);
  text-decoration: none;
}
#path_navigation a:hover {
  color:var(--Main-Font-Color);
  text-decoration: underline;
}

/*
====================================================
    Hauptbereich
====================================================
*/
#content {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: var(--Main-Font-Color);
  text-align: justify;
  width: 100%; 
  border: 0px solid var(--Main-BG-Border);
/*  background-color: var(--Main-BG-Color);
   background-image: url("../pic/overCloud.jpg");*/
  float: left;
  padding-right: 0px;
  margin-right: 50px;
  margin-top: 0px;
}

#content ul {
  margin-top: 0px;
  padding-top: 0px;
  border: 0px;
}

#content h1 {
  font-size: 14px;
  font-weight: bold;
  color: #003399;
  text-align: left;
  padding: 10px 0px 5px 0px;
  margin: 0px;
  margin-bottom: 10px;
  border-bottom: 1px solid #DDDDDD;
}
#content h2 {
  font-size: 22px;
}

#content t2 {
  font-size: 30px;
}

#content h3 {
  font-size: 12px;
  font-weight: normal;
  background-color: #F5F5F5;
  color: #0099FF;
  text-align: left;
  padding: 1px 5px;
  border: 0px;
  margin: 0px;
}
#content h4 {
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  color: #000000;
  background-color: #F5F5F5;
  text-align: left;
  padding: 1px 5px;
  border: 0px;
  margin: 0px;
}
  
#content h5 {
  font-size: 14px;
  font-weight: bold;
  color: #003399;
  text-align: left;
  padding: 5px 0px 10px 0px;
  border-bottom: 0px;
  margin: 0px;
}
  
#content a {
  font-size: 10px;
  font-style: normal;
  color: var(--Link-Font-Color);
  text-align: left;
  text-decoration: none;
}
#content a:hover {
  color:var(--Link-Font-Color);
  text-decoration: underline;
}

#showleft {
  width: 40vw;
  padding-right: 0%;
  padding-top: 0px;
  border: 0px solid var(--Main-BG-Border);
  margin-left: 0%;
  margin-top: 0px;
  float: left;
}
/*
====================================================
    Hauptbereich - eingeloggt
====================================================
*/

#showleftleast {
  overflow-y: auto;
  width: 41vw;
  height:200px;
  padding-top:  0px;
  padding-left: 0px;
  font-size: 12px;
 /* font-weight: bold; */
  border: 1px dotted var(--Main-BG-Border);   
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 10px;
  float: left;
  vertical-align: top;
  border-radius: 10px;
  }


/*
====================================================
    ehemals werbung
====================================================
*/
/*
====================================================
    Rechter Seitenbereich
====================================================
*/

/*
====================================================
    Fußbereich und Bild 
====================================================
*/
#footer {
    position: relative;
    z-index: 200;
    margin-top: 5px;
    padding: 5px 14px;
    font-size: 0.8em;
    border-radius: 10px;
  }
 
  #footer .footer-line {
  display: flex;
  flex-wrap: wrap;                 /* auf schmalen Screens umbrechen */
  justify-content: space-between;  /* Copyright links, Links rechts */
  align-items: center;
  gap: 6px 14px;
}
#footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
#footer a {
  color: var(--Main-Font-Color);  /* wie bisher mobil, sonst weglassen = weiß */
  text-decoration: none;
}


#brewer {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
/* border: 1px solid#eaeaea;*/
  width: 34%;
  margin-top: 0px;
  margin-left: 10px;
  padding: 10px; 
  background-color: white; 
  float: left;

}

#brewer_text {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  color:var(--Main-Font-Color);
/*  border: 1px solid #eaeaea;*/
  width: 98%;
  margin-top: 00px;
  margin-left: 10px;
  float: left;
  background-color: white; 
}

#distributor {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
/*  border: 1px solid#eaeaea;*/
  width: 25%;
  padding: 25px; 
  margin-top: -15px;
  float: right;
  color:var(--Main-Font-Color);
  background-color: white; 
}

#distributor_text {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  color:var(--Main-Font-Color);
/*  border: 2px solid #eaeaea;*/
  width: 98%;
  margin-top: 30px;
  margin-left: 10px;
  float: right;
  background-color: white; 
}

#wholesaler {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  width: 35%;
  padding: 15px; 
  margin-top: 5px;
  float: left;
  background-color: white; 
}

#wholesaler_text {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  color:var(--Main-Font-Color);
/*  border: 2px solid #eaeaea;*/
  width: 98%;
  margin-top: 30px;
  margin-left: 10px;
  float: left;
  background-color: white; 
}


#retailer {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
/*  border: 1px solid#eaeaea;*/
  width: 35%;
  padding: 15px; 
  margin-top: 5px;
  float: right;
  background-color: white; 
}

#retailer_text {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  color:var(--Main-Font-Color);
/*  border: 2px solid #eaeaea;*/
  width: 98%;
  margin-top: 30px;
  margin-left: 10px;
  float: left;
  background-color: white; 
}

#retailer_bott {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;  
  font-weight: normal;
  color:var(--Main-Font-Color);  
/*  border: 2px solid #eaeaea;*/
  width: 90%;
  margin-top: 0px;
  margin-left: 10px;
  float: left;
}

/*
====================================================
    Allgemeiner Bereich
====================================================
*/

/*-- DDDDDDDDDDDDDDDDDDemo Snipplets Beginn   bDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDd-->*/

/* Grundlegendes Styling für das Dropdown */

/*myhompage 2*/


.image-container {
    width: 100%;       /* Beispiel: Prozentangaben */
    display: block;
    box-sizing: border-box;
    height: 98vh;
    overflow: hidden;
    /*overflow-y: auto;*/
    overflow-x: hidden;
    position: relative;
    border: 0px solid green;
    border-radius: 5px; /* Neue Zeile für runde Ecken */
    display: flow-root;   /* verhindert Margin-Collapsing */
    z-index: 1;
}

#animatedImage {
    position: absolute;
    /*width: 140%;*/      /* Bild ist größer als der Container */
    height: 135vh;
    animation: moveImage 10s linear infinite alternate;
}

.overlay-text {
    position: absolute;
    bottom: 2%;
    right: 3%;
    left: 3%;
    z-index: 10;         
    color: white;       
    font-size: 1.5em;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5); 
    padding: 20px;                        
    border-radius: 15px;       
    display: flex;     
    gap: 20px;       
    align-items: flex-end;
}

.overlay-text img {
  width: auto;   /* Bildgröße */
  height: 25vh;   /* Verhältnis bleibt */
  /* border-radius: 5px;  optional: abgerundet */
}

.overlay-text2 {
    position: absolute;
    top: 1%;
    left: 2%;
    z-index: 10;     
    color: white;   
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, 0); 
    padding: 20px;                       
    border-radius: 15px;                 
}

.overlay-text2 a {
    color: white !important;
    font-size: 1.5em !important;
    text-decoration: none !important;
}

.overlay-text2 a:hover {
    text-decoration: underline ;
}
.overlay-text3 {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 45%;
    height: 6%;
    overflow: auto;
    z-index: 20;     
    color: white; 
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.4); 
    margin-left: 60px;
    padding-left: 30px;
    padding-right: 20px;                                              
    padding-top: 20px;                        
    border-radius: 15px;                 
}

.overlay-text3 a {
    color: white !important;     
    font-size: 1.0em !important;
    text-decoration: none !important;
}

.overlay-text3 a:hover {
    text-decoration: underline ;
}

.overlay-text4 {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 35%;
    height: 55%;
    overflow: auto;
    z-index: 20;     
    color: white !important;   
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.4);  
    padding-left: 20px;     
    padding-top: 18px;                       
                  
    border-radius: 15px;                 
}

.overlay-text4 a {
    color: white !important;
    font-size: 1em !important;
    text-decoration: none !important;
}

.overlay-text4 a:hover {
    text-decoration: underline ;
}

.overlay-text5 {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 35%;
    height: 25%;
    overflow: auto;
    z-index: 20;     
    color: white;   
    font-size: 1em;
    background-color: rgba(0, 0, 0, 0.4); 
    padding-left: 20px;                       
    padding-top: 15px;                        
    border-radius: 15px;                 
}

.overlay-text5 a {
    color: white !important;
    font-size: 1em !important;
    text-decoration: none !important;
}

.overlay-text5 a:hover {
    text-decoration: underline ;
}

.overlay-text6 {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 45%;
    height: 70%;
    overflow: auto;
    z-index: 20;     
    color: white;   
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.4); 
    margin-left: 10px;
    padding-left: 20px;     
    padding-right: 30px;     
    padding-top: 20px;                       
    border-radius: 15px;         
}

.overlay-text6 a {
    color: white !important;
    font-size: 1em !important;
    text-decoration: none !important;
}

.overlay-text6 a:hover {
    text-decoration: underline ;
}

.inner-text6 {
    position: relative;
    left: 30px;   /* nach rechts verschieben */
    top: 20px;    /* nach unten verschieben */
    padding-right: 20px;

}

.top-right-links {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 20;
    color: white !important;
    background-color: rgba(0, 0, 0, 0.0);
    padding: 5px;
    border-radius: 10px;
}

.top-right-links a {
    color: white !important;
    text-decoration: none;
    margin-left: 10px;
    font-size: 1em !important;
}
/*
.scoreForm {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 10px;
}
*/
.scoreForm {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;                     /* breiter: 70% der Bildbreite */
    max-width: 900px;               /* auf großen Monitoren nicht zu breit */
    box-sizing: border-box;         /* Padding wird in die Breite eingerechnet */
    max-height: calc(100% - 40px);  /* nie höher als das Bild (oben + unten 20px Abstand) */
    overflow-y: auto;               /* zu lange Tabelle scrollt innerhalb der Box */
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.scoreForm table {
    width: 100%;                    /* Tabelle nutzt die neue Breite aus */
}

.scoreForm input {
    padding: 5px;
    margin-left: 5px;
}

.startForm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
}

.startForm input {
    padding: 5px;
    margin-left: 5px;
}

.startForm button {
    padding: 5px 10px;
    margin-left: 5px;
}

.startForm select {
    padding: 5px;
    margin-left: 5px;
    margin-right: 10px;
}

.startFormlabel {
    color: black;
    font-weight: bold;
    margin-right: 5px;
}

.startForm1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 10px;
    border-radius: 10px;
    /* font-weight: bold;*/
    color: white;
}

.startForm1 input {
    padding: 5px;
    margin-left: 5px;
}

.startForm1 button {
    padding: 5px 10px;
    margin-left: 5px;
}

.startForm1 select {
    padding: 5px;
    margin-left: 5px;
    margin-right: 10px;
}

#content .startForm1-links a {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 15px;
    font-size: 11px;
   /* font-weight: bold;*/
    color: white;
}

.input-field {
    border-radius: 10px;
    padding: 10px;
    border: 0px solid #aaa;
    font-size: 14px;
}
.overlay-text3 a.changed {
  color: red !important;
  font-weight: bold;
}

.beschreib {
  display: flex;
  background: white;
  width: 100%; 
}


/*
.container {
  display: flex;
  gap: 0px; 
}
*/
.box {
  overflow-y: auto;
  flex: 2; 
  width: 47vw; /* Sicherstellen, dass sie unter 50% bleiben */
  height: 40vh; 
  font-size: 20px;  
  /*background: #15580e;*/ 
  background: white;
  color: black;
  padding: 20px;
  text-align: left;
  border-radius: 5px; /* Neue Zeile für runde Ecken */
 border: 0px solid#eaeaea;

}

.boxTM {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;  
  font-weight: normal;
  flex: 1; 
  width: 47vw; 
  height: 40vh; 
  background: white;
  /*background-image: url("../pic/lkwFass.gif");*/
  color: black;
  text-align: center;
  border-radius: 5px; /* Neue Zeile für runde Ecken */
  display: flex;
  padding: 20px;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
 border: 0px solid#eaeaea;
}

.boxgold {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;     
  font-weight: normal;
  width: 100%; 
  max-height: 50%; 
  background: rgb(156, 69, 26);
  color: white !important;
  text-align: left;
  border-radius: 5px;
  padding: 20px;
  border: 0px solid #eaeaea;
}

.boxgold a {
  color:white;
  text-decoration: none;
}

.boxgold, 
.boxgold td, 
.boxgold th {
  color: white !important;
}

/* ============================================================
   MOBILE / RESPONSIVE ANPASSUNGEN (NEU – v2)
   Nur zusätzliche Overrides für schmale Bildschirme.
   Bestehende Desktop-Regeln oben bleiben unverändert.

   Wichtig: .overlay-text2 / .overlay-text / .startForm bleiben
   ABSOLUTE positioniert (wie im Original) und werden nur neu
   platziert/skaliert. Würde man einzelne davon auf "static"
   umstellen, während die anderen absolute bleiben, landen sie
   im Stapel HINTER den weiterhin absoluten Geschwistern -
   genau das Problem im Screenshot.
   ============================================================ */

@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) {   
/*@media (max-width: 1000px) {*/
#content {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--Main-Font-Color);
  text-align: justify;
  width: 100%; 
  border: 0px solid var(--Main-BG-Border);
/*  background-color: var(--Main-BG-Color);
   background-image: url("../pic/overCloud.jpg");*/
  float: left;
  padding-right: 0px;
  margin-right: 50px;
  margin-top: 0px;
  z-index: 50;
}
  .content a {
  font-size: 12px;
  font-style: normal;
  color: var(--Link-Font-Color);
  text-align: left;
  text-decoration: none;
  }

  #adescription {
    padding-right: 20px;
    margin-top: 140px;
}


  .startForm1 {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 82%;
    max-width: 340px;
    padding: 14px;
    box-sizing: border-box;
    font-size: 0.8em;
    background-color: rgba(255, 255, 255, 0.32);
    border-radius: 5px;
    z-index: 10;
  }
  .startForm1 a {
    font-size: 1em; /* Passe die Schriftgröße nach deinen Wünschen an */
  }
  .startForm1 table {
    width: 100%;
    border-collapse: collapse;
    
  }
  .startForm1 table td {
    display: block;
    width: 100%;
    padding: 0;
  }
  .startForm1 input[type="text"],
  .startForm1 input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    font-size: 1em;
  }
  .startForm1 input[type="submit"] {
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
    font-size: 1em;
  }

  .startForm1-links {
    margin-top: 10px; /* Passe den Abstand nach oben an */
    font-size: 1em;   
  }
  
  .startForm1-links a {
    display: block;
    margin-bottom: 5px; /* Passe den Abstand zwischen den Links an */
    font-size: 1em; /* Passe die Schriftgröße der Links an */
  }
   
  

  /* Kopfbereich */
  #textHeaderLeft {
    padding-left: 4%;
    font-size: 22px;
  }
  #textHeaderRight {
    left: auto;
    right: 4%;
    font-size: 12px;
  }

  /* Hero-Bereich: Bild UND Beschreibungstext bleiben bewusst EINE
     Einheit (Klick-Funktionalität: Bild + zugehöriger Text gehören
     zusammen) - der Text liegt transparent ÜBER dem Bild. Die Höhe
     des Bildes richtet sich automatisch nach der Textlänge (kein
     Raten mehr nötig, egal ob 2 oder 6 Zeilen). Die Auswahlbox
     kommt separat DANACH, zentriert. */
  
    .image-container {
    position: relative;
    min-height: 320px;
    height: auto; 
    overflow: visible; /* damit die Auswahlbox darunter nicht abgeschnitten wird */
    margin-bottom: 0px; /* reserviert Platz für die Auswahlbox, die per top:100% darunter "herausragt" */
  }
  
  
  #animatedImage {
    position: absolute;
    inset: 0;
    width: 100%;
    /*height: 100%;  füllt exakt die Höhe, die der Text (s.u.) vorgibt */
    height: 320px; 
    /*object-fit: cover;*/
    z-index: 1;
    border-radius: 12px;
  }

  /* Logo + Highscore-Link oben links: kleines Badge über dem Bild */
  .overlay-text2 {
    top: 5px;
    left: 8px;
    right: auto;
    font-size: 0.8em;
    padding: 4px 10px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    z-index: 10;
  }
  .overlay-text2 a {
    font-size: 1em !important;
  }
  /* "35160 points by ..." kommt mit inline style="font-size:16px" aus
     myhompage2.php - inline Styles schlagen normales CSS, daher hier
     !important nötig, um es auf Mobile anzupassen (ohne PHP anzufassen) */
  .overlay-text2 div,
  .overlay-text2 b {
    font-size: 0.85em !important;
  }

  /* Lieferketten-Beschreibungstext: WIEDER mit dem Bild gekoppelt
     (transparent darüber), aber jetzt im normalen Fluss -> bestimmt
     die Höhe des Bildbereichs selbst, statt geraten zu werden.
     pointer-events wieder aktiviert, damit der Klick auf das Bild
     (nächstes Kettenglied) weiterhin funktioniert. */
.overlay-text {
    position: absolute;
    z-index: 2;
    left: 4%;
    right: 4%;
    bottom: 12px;
    max-height: 75%;
    overflow-y: auto;
    /* pointer-events bewusst NICHT gesetzt (bleibt beim geerbten "none"
       aus der Desktop-CSS) - dadurch "durchdringt" ein Klick auf den
       Text automatisch zum Bild darunter, das den Klick-Handler für
       den Wechsel zur nächsten Lieferketten-Stufe hat. Exakt das
       gleiche Verhalten wie am Desktop. */
    display: block; /* statt flex: Text soll um das Icon FLIESSEN */
    padding: 12px;
    font-size: 0.85em;
    /* an der längsten Beschreibung orientiert (Retail Branch Manager),
       damit die Box beim Durchklicken nicht in der Höhe springt */
    box-sizing: border-box;
  }
  .overlay-text::after {
    content: "";
    display: table;
    clear: both; /* Clearfix: Box umschließt auch das gefloatete Icon */
  }
  .overlay-text > div:first-child {
    float: left;
    margin: 0 10px 6px 0;
  }
  .overlay-text img {
    height: 9vh;
    width: auto;
    display: block;
  }

  /* Spielansicht: nur der Container, der die Spiel-Boxen enthält */
  .image-container:has(.overlay-text5) {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 330px; /* Boxen beginnen unterhalb des 320px-Bildes */
  }

 .overlay-text5 {
    position: absolute;
    top: 320px;                  /* Unterkante des Bildes (Bildhöhe 320px) */
    transform: translateY(-100%); /* Box nach oben über die Unterkante schieben */
    margin-top: -6px;           /* kleiner Abstand zum unteren Bildrand */
    left: 2%;
    right: 1%;
    width: auto;
    height: auto;
    max-height: 260px;           /* Sicherheitsnetz: ragt oben nie in die Links */
    overflow-y: auto;            /* falls doch zu lang: intern scrollen */
    z-index: 5;
    padding-bottom: 15px;
    background-color: rgba(156, 69, 26, 0.7);
  }

  .overlay-text3,
  .overlay-text4,
  .overlay-text6 {
    position: relative; /* nötig, damit sie ÜBER dem Bild gezeichnet werden */
    z-index: 2;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 0;          /* entfernt u.a. margin-left: 60px aus der Desktop-Regel */
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 10px;
    background-color: rgba(156, 69, 26, 0.9)
  }

  .overlay-text4 { order: 2; }
  .overlay-text3 { order: 3; }
  .overlay-text6 { order: 4; }

  .overlay-text6 .inner-text6 {
    position: static;
    left: auto;
    top: auto;
    padding-right: 0;
  }  

  .overlay-text3 {
    order: 3;   /* falls du diese Zeile gelöscht hattest: wieder einfügen */
    border-radius: 10px 10px 0 0;              /* unten eckig */
    background-color: rgba(156, 69, 26, 0.9);  /* gleiche Farbe wie Box 6 */
  }
  .overlay-text6 {
    margin-top: -12px;                         /* hebt den gap auf */
    border-radius: 0 0 10px 10px;              /* oben eckig */
  }
  .overlay-text3 a {
    text-decoration: underline !important;
  }


.scoreForm {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-top: 250px ;
    margin-left: 0% ;
    width: 100%;
    max-width: none;
}
  .scoreForm table {
    width: 100%;
    font-size: 12px;
  }
  .scoreForm td {
    padding: 5px;
    word-break: break-word;
  }
  .scoreForm select {
    font-size: 8px;
    padding: 5px;
  }


   #chattext {
    width: 100% !important;  /* überschreibt das inline 39vw nur auf dem Handy */
    box-sizing: border-box;  /* Rahmen wird eingerechnet, ragt nicht rechts raus */
  }
  
  /* Spielauswahl-Formular: separat NACH dem Bild+Text-Block, egal
     wie hoch dieser gerade ist ("top: 100%" folgt der automatischen
     Höhe von .image-container), zentriert und komplett auf dem
     Screen (max-width verhindert das Abschneiden am Rand) */

   
  .startForm {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    margin-top: 14px;
    width: 100%;
    max-width: 1000px;
    padding: 14px;
    box-sizing: border-box;
    z-index: 10;
    background-color: rgba(156, 62, 19, 0.85);
    line-height: 0.5;
  }
  
  .startForm label {
    font-size: 0.95em;
  }
  /* Absicherung: falls $Startseite['LabelForm'] eine eingebettete
     Überschrift enthält (Ursache der großen "Beergame"-Zeile) -
     hier zusätzlich sehr breit abgesichert, nicht nur h1-h3 */
  .startForm label,
  .startForm label * {
    font-size: 1em !important; 
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    color: white; 
  }
  .startForm select,
  .startForm button {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
    box-sizing: border-box;
    font-size: 0.9em;
  }

  /* LKW-Bild + Beschreibung (aktuell von dir auskommentiert,
     Regel bleibt für später vorbereitet): nebeneinander -> untereinander */
  .container {
     position: relative;
     z-index: 200;
     margin-top: 20px;
  }
  .container a {
    color: var(--Main-Font-Color);
    font-size: 1em;
  }
  .box,
  .boxTM {
    width: 100%;
    height: auto;
    min-height: 25vh;
  }

 body {
    display: flex;
    flex-direction: column;
    min-height: 97vh;
    /*margin: 0;*/
    padding: 2px;
    box-sizing: border-box; /* wichtig: sonst wird 100vh + Padding zu hoch -> neuer Scroll-Rest */
    
  }

 /* .container:last-of-type {
    margin-top: auto;
  }*/
  
  /* Spiel-Interface (Bestellungen/Chat-Spalten) */
  #showleft,
  #showleftleast {
    width: 92vw;
  }
}

@media (max-width: 480px) {
  .overlay-text {
    font-size: 0.82em;
  }
  .startForm {
    padding: 12px;
    width: 100%
  }
  
}