/* Letzte Aenderung: 14.08.25 21:55 */

/* Allgemeines: */ /*----------------------------------------------*/
*, *::before, *::after {
   box-sizing: border-box;
   }
body {
/*   display: flex; */
/*   justify-content: center; */
   }
.wrapper {
   width: 100%;
   max-width: 40rem;
   min-width: 25rem;
   margin: 0 auto;
   }
.blass { /* damit der Hintergrund nicht blendet */
   background-color: #f1f1f1;
   }
.relativ {   /* bei blass, QRc, Siegel, impressum ??? */
   position: relative;
   z-index: 2; /****************************************************/
   }
.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;
   }
.schwebehinweis-rechts-oben {  /* Hinweise QR-Code */
   width: 30rem;
   z-index: 3;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: fixed;
   top: 0;
   right: 0;
   }
.schwebehinweis-rechts-unten { /* Hinweise Treatstock */
   width: 30rem;
   z-index: 3;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: fixed;
   bottom: 0;
   right: 0;
   }
 /* 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 {
   flex: 1;
}
.flex-vertikal {   /* Sprache und Siezen übereinander */
   display: flex;
   flex-direction: column;
   width: 15rem;
   align-items: center;
   justify-content: space-between;
   }
.flex-horizontal-umgekehrt { /* auf Händi Foto oben, sonst rechts */
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      max-width: 40rem;
      margin: 0 auto;
      border: 0   solid grey;
   }
.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 */
    }
.flex-zeile {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      width: 100%;
      min-width: 20rem;
      border: 0   solid grey;
 }
.matrix {
   display: grid;
   grid-template-columns: 11rem 4rem 2rem;
   }

/* %page; */

 /******************************************************************/
 /**************** jetzt linear durch .html ************************/
 /******************************************************************/

/* Edge-Knopf und -Hinweis: */ /*----------------------------------*/
.zentralknopf { /* fuer edge-knopf */
/* z-index: 2; */
   color: black;
   width: 100%;
   min-width: 20rem;
   background-color: #aaebff;
   margin: 0 auto;
   padding: 1rem;
   text-align: center;
   font-weight: bold;
   cursor: pointer;
   }
.popup {        /* für edge-hinweise */
   z-index: 100;
   color: black;
   position: fixed;
   top: 0%;
   left: 50%;
   transform: translate(-50%, 0%);
   width: 75%;
   max-width: 30rem;
   text-align: left;
   background-color: white;
   padding: 10px;
   display: none;
   }

/* %page; */

/* Kopfmeldung und QRc-Bild: */ /*---------------------------------*/
.kopfmeldung {   /* roter Meldekasten oben */
      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: 2;
   cursor: pointer;
   }
.schwebekasten { /* fuer Farbkasten (QRc) */
   z-index: 1;
   width: 20rem;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: absolute;
   top: 8.5rem;
   right: 1rem;
   }
.rot {
  color: red;
}
#farbkasten {    /* fuer das Bild */
      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: 2;
   cursor: pointer;
   }
.schwebesiegel { /* Text für Siegel */
   width: 25rem;
   z-index: 1;
   background-color: white;
   margin: 1rem;
   padding: 1rem;
   position: absolute;
   top: 6rem;
   left: 4rem;
   }
.listimage { /* für die Spiegel-Haken im Siegeltext */
   float:left;
   width:1.5rem;
   }
.titel {   /* QR-Puzzle.com */
   color: #3b8fa8;
   width: 30rem;
   font-size: 2.5rem;
   text-align: center;
   }
#sprache-knopf {
   font-size: 1.5rem;
   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.5rem;
   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;
   }
.links {         /* Beschreibungen links */
      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: */ /*-------------*/
    .langknopf {
      flex: 1 1 0;        /* nimmt immer Restbreite ein */
      min-width: 0;       /* erlaubt Schrumpfen */
      background: #aaebff;
      margin: 1rem 0;     /* nur vertikales margin */
      padding: 1rem;
      text-align: center;
      font-weight: bold;
      border: 0   solid red;
      word-wrap: break-word;
    }
 /*  max-width: 40rem; */
.fehlermeldung {
   width: 38rem;
   border-width: 0.5rem;
   border-color: red;
   border-style: solid;
   padding: 0.5rem;
   font-weight: bold;
   }

/* %page; */

/* Bestellung: */ /*-----------------------------------------------*/




/* %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; */

 @media (width <= 680px) {
      .flex-horizontal {
        flex-direction: column-reverse;
        align-items: center;
        min-width: 20rem;
      }
      .flex-horizontal-umgekehrt {
        flex-direction: column;
        align-items: stretch;
      }
      .foto {
        align-self: center;
        max-width: 80%;
        height: auto;
      }
      .beschreibungsblock {
        width: 100%;
        max-width: none;
      }
      .links {
        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;
    flex-direction: column;
    align-items: center; /* zentriert Inhalt in sich */
  }

      #farbkasten {
        width: 10rem;
        margin: 0;
        flex: none;
      }
    }