/* Letzte Aenderung: 25.09.25 10:01 */

/* Allgemeines: */ /*----------------------------------------------*/
*, *::before, *::after {
   box-sizing: border-box;
   }
.wrapper {
   width: 100%;
   max-width: 40rem;
   min-width: 25rem;
   margin: 0 auto;   /* Zentrieren auf Webseite */
   }
.blass { /* bei BODY: damit der Hintergrund nicht blendet */
   background-color: #f1f1f1;
   }
.relativ {   /* bei body, blass, QRc, Siegel, impressum ??? */
   position: relative;
   }
.times {  /* Standard-Font */
   font-family: "Times New Roman", Times, serif;
   }
.helvetica {  /* Alternativ-Font */
   font-family: Arial, Helvetica, sans-serif;
   }
.versal {      /* Durchnummerierung */
   font-size: 2rem;
   font-weight: bold;
   }
.aus {
   display: none;
   }
 /* warten_de und warten_en werden nur in ***.js angesprochen. */
.mittig { /* drehendes Wartesymbol */
   position: fixed;
   z-index: 9999;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   }

/* %page; */

/* Elemente: */ /*-------------------------------------------------*/
h3 {
   text-align: center;
}
iframe {
   width: 100%;
   max-width: 40rem;
   height: 800px;
   border: none;
   box-shadow: 0 0 10px rgb(0 0 0 / 20%);
   }
li {
   margin-left: 2rem;
   }
ul.haken {
   list-style-type: none;
   }

/* %page; */

/* FLEX-Definitionen: */ /*----------------------------------------*/
.flex-vertikal {
   display: flex;
   flex-direction: column;
   width: 40rem;
   align-items: center;
   justify-content: space-between;
   }
.flex-titel {         /* Siegel, Titel, Sprache/Siezen */
   display: flex;
   flex-direction: row;
   max-width: 40rem;
      min-width: 20rem;
   align-items: center;
      margin: 0 auto;
   justify-content: space-between;
      border: 0  solid grey; /* zur visuellen Kontrolle */
   }
.flex-horizontal { /* zwei Knöpfe nebeneinander, Betameldung, */
                /* Einstellungen sowie Impressum und Siegelhinweis */
      display: flex;
      flex-direction: row; /* Standard: Bild rechts neben Text */
      align-items: center;
      max-width: 40rem;
      min-width: 20rem;
      margin: 0 auto;
   justify-content: space-between;
      border: 0   solid grey; /* zur visuellen Kontrolle */
    }
.matrix {
   display: grid;
   grid-template-columns: 14rem 4rem 2rem;
   }

/* %page; */

 /******************************************************************/
 /**************** jetzt linear durch .html ************************/
 /******************************************************************/
.popup {        /* für Hinweise */
   z-index: 100;
   color: black;
   position: absolute;
   top: 0%;
   left: 50%;
   transform: translate(-50%, 0%);
   width: 90%;
   max-width: 40rem;
   text-align: left;
   background-color: white;
   padding: 10px;
   display: none;
   }

/* %page; */

/* Kopfmeldung und QRc-Bild: */ /*---------------------------------*/
#titel {
      flex: 1;             /* nimmt verbleibenden Platz ein */
      min-width: 20rem;    /* nie kleiner als 20rem */
      font-size: 2.5rem;
      color: #3b8fa8;
      border: 0 solid red;
      padding: 0.5rem;
      font-weight: bold;
   text-align: center;
    }
#kopftext {
      flex: 1;             /* nimmt verbleibenden Platz ein */
      min-width: 20rem;    /* nie kleiner als 20rem */
      font-size: 1.4rem;
      color: #3b8fa8;
      border: 0 solid red;
      padding: 0.5rem;
      font-weight: bold;
    }
.kopfmeldung {
      flex: 1;             /* nimmt verbleibenden Platz ein */
      min-width: 20rem;    /* nie kleiner als 20rem */
      border: 0 solid red;
      padding: 0.5rem;
      font-weight: bold;
    }
.qrcolor {      /* fuer das QRc-Bild */
   width: 10rem;
   z-index: 4;
   cursor: pointer;
   }
.schwebekasten { /* fuer Farbkasten-Text (QRc) */
   z-index: 5;
   width: 15rem;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: absolute;
   top: 8.5rem;
   right: 1rem;
   }
.rot {
   font-weight: bold;
  color: red;
}
.gruen {
   font-weight: bold;
   color: green;
}
#farbkasten {    /* fuer das QRc-Bild */
      z-index: 4;
      flex: 0 0 auto;
      width: 10rem;
      padding: 0.5rem;
      margin: 0 auto;
    }
/* %page; */

/* Siegel, Titel und Sprach- und Siezen-Knopf: */ /*---------------*/
.siegel {   /* Siegel mit Schwebetext */
   width: 10rem;
   position: relative;
   z-index: 3;
   cursor: pointer;
   }
.schwebesiegel { /* Text für Siegel */
   width: 25rem;
   z-index: 2;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: absolute;
   top: 6rem;
   left: 4rem;
   }
.listimage { /* für die Spiegel-Haken im Siegeltext (texte.js) */
   float:left;
   width:1.5rem;
   }
#sprache-knopf {
   font-size: 1.4rem;
   width: 10rem;
   color: #3b8fa8;
   background-color: #aaebff;
   margin: 1rem;
   padding: 0.1rem;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   }
#siezen-knopf {
   font-size: 1.4rem;
   width: 10rem;
   color: #3b8fa8;
   background-color: #aaebff;
   margin: 1rem;
   padding: 0.1rem;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   }

/* %page; */

/* Beschreibungen und Foto: */ /*----------------------------------*/
.foto {          /* Foto rechts */
      max-width: 15rem;
      height: auto;
      border: 0  solid blue;
   }
.seitlich {         /* Beschreibungen */
      display: block;
      width: 100%;
      padding: 1rem;         /* neu: Innenabstand statt margin */
      margin: 0;             /* entfernt Außenabstand */
      word-wrap: break-word;
      border: 0   solid red;
   }
.beschreibungsblock {
      flex: 1;
      width: 100%;
      border: 0   solid green;
  }

/* %page; */

/* Eingabe des Textes: */ /*---------------------------------------*/
.absatz {    /* Text über die ganze Breite */
   max-width: 38rem;
   min-width: 20rem;
   margin: 1rem;
   }
.eingabeflaeche {   /* textarea */
      width: 100%;       /* fügt flexible Standardbreite hinzu */
   max-width: 38rem;
   min-width: 20rem;
   margin: 1rem;
   font-size: 2rem;
   }

/* %page; */

/* Anzeigeknopf und Hinweise QR-Code: */ /*------------------------*/
.knopf {      /* alle Standard-Knöpfe */
   z-index: 2;
   color: black;
   width: 12rem;
   background-color: #aaebff;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   }
.unknopf { /* graue Schrift */
   color: gray;
   width: 12rem;
   background-color: #aaebff;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
   }
#blassbild {     /* <image> */
   width: 95%;
   margin: 1rem;
   }

/* %page; */

/* Einstellungen: */ /*--------------------------------------------*/
.masze {
   font-size: 1.5rem;
   height: 1.5rem;
   margin: 0;
   }
.eingabefeld {
   margin: 0;
   height: 1.5rem;
   font-size: 1.5rem;
   }
#klotz {            /* verstellbare Klötze */
   width: 50%;
   align-self: flex-start;
   }
.block {  /* zum Auffüllen bei den Einstellungen */
   width: 29rem;
   margin: 1rem;
   }

/* %page; */

/* Senden mit Location und Hinweisen Treatstock: */ /*-------------*/
.fehlermeldung {
   width: 38rem;
   border-width: 0.5rem;
   border-color: red;
   border-style: solid;
   padding: 0.5rem;
   font-weight: bold;
   }

/* %page; */

/* Impressum: */ /*------------------------------------------------*/
.schalt {   /* Impressum-Knopf */
   color: black;
   width: 7rem;
   z-index: 2;
   background-color: #aaebff;
   margin: 1rem;
   padding: 1rem;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   }
.schwebeimpressum { /* Impressum-Text */
   width: 12rem;
   z-index: 1;
   background-color: white;
   margin: 1rem;
   padding-left: 1rem;
   position: absolute;
   top: -3rem;
   left: 6.5rem;
   }
.impressum-rechts { /* Hinweis auf Siegel */
   width: 30%;
   margin: 1rem;
   font-style: italic;
   }
.copy { /* copyright-Symbol */
   font-size: 1rem;
   }

/* %page; */

#burger-knopf {
   color: #3b8fa8;
   font-size: 3rem;
   cursor: pointer;
   }
.oben {  /* fuer Burger-Menue */
   z-index: 50;
   }
#burger-menue {
   z-index: 50;
   width: 15em;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: absolute;
   top: 4rem;
   right: 0;
   }
#li-qrcode:hover {
   background-color: #aaebff;
   cursor: pointer;
   }
#li-qrccode:hover {
   background-color: #aaebff;
   cursor: pointer;
   }
#li-treatstock:hover {
   background-color: #aaebff;
   cursor: pointer;
   }
#li-location:hover {
   background-color: #aaebff;
   cursor: pointer;
   }
#schluck { /* Verschluckbare Kleinteile */
   text-align: right;
   }

/* %page; */

 @media (width <= 680px) {

      .flex-horizontal {
        flex-direction: column-reverse;
        align-items: center;
        min-width: 20rem;
      }
     .flex-vertikal {
        width: auto;
        display: flex;
        flex-direction: column;
        min-width: 20rem;
        align-items: center;
        justify-content: space-between;
        }
      .foto {
        align-self: center;
        max-width: 80%;
        height: auto;
      }
      .beschreibungsblock {
        width: 100%;
        max-width: none;
      }
      .seitlich {
        display: block;
        width: 100%;
        max-width: none;
        padding: 1rem;       /* Innenabstand bleibt */
        margin: 0;           /* kein Außenabstand */
        word-wrap: break-word;
        border: 0 solid red;
      }
      .flex-titel {
        flex-direction: column;
        align-items: center;
        min-width: 20rem;
        max-width: 680px;
      }
       .qrcolor {
        display: flex;
        z-index: 4;
        flex-direction: column;
        align-items: center; /* zentriert Inhalt in sich */
      }
      #farbkasten {
        width: 10rem;
        margin: 0;
        flex: none;
      }

    }    /* Ende @media width */

 @media print {
   /* keine extra Ränder vom Drucker */
   @page { margin: 0; }
   html, body { margin: 0; padding: 0; height: 100%; }

   body.printing > * { display: none !important; }
   body.printing > #__print__ {
     display: flex !important;
     align-items: center;
     justify-content: center;
     height: 100vh;              /* statt min-height */
     /* oder: height: calc(100vh - 1px); wenn dein Browser trotzdem 2 Seiten macht */
   }
   body.printing > #__print__ svg {
     width: 160mm; height: 160mm;
     break-after: avoid; /* keine Umbrüche erzwingen */
   }
 }