/*
css_main.css
_______________________
07.05.2024 verwendete Farben
bgcolor=#E8F5FB hellblau
fbtext=#1c64b2  dunkelblau
spruebaer1=#60CABD hellblau wie lernen1
   werbeteil5k dunkeler #05B6A0 damit besser lesbar
spruebaer2=#F6737B rot wie lernen2
spruebaer3=#56918F blaugruen wie lernen3
#719291 dunkler als spruebaer3 für footeri links
#CDE1E0 heller als spruebaer3 für footeri

#1D710D dunkelgrün wenn alternativfarbe


.farbenfussball{color:#9ec31d;background-color:#e6f0c6;} grün und hellgrün
.farbenfussballa{color:#1c64b2;}schrift blau
.farbenfussballb{color:#799B02;} schrift grün

1920*1080 mein Bildschirm,
1024*768 mein Tablet

smartphone hochformat bis 480
smartphone quer und tablet hoch 481-768



<!-- 12.06.2024 spruebaer3bg für jobs
<!-- 13.06.2024 .hundelogo gleich visible
                .fehlermeldung anders
<!-- 17.06.2024 fussball grün dunkler
<!-- 21.06.2024 im Hund Einloggen oder Anmelden
<!-- 24.06.2024 im Hund alles in Einloggen mit width und center, mal probieren
<!-- 09.07.2024 ueblocki für interne Überschrift blau auf weiß
<!-- 10.07.2024 footeri
<!-- 21.07.2024 bodyc mit blau, versuche
                idritteln1,2,318:29:23 für interne programme
<!-- 22.05.2025 Änderungen Persisch und Arabisch (sprachear mit gx
<!-- 26.05.2025 tastaturi auch bei tablet nicht
                spieltd500 für spiel 25
<!-- 31.05.2025 rotli link nach fehlermeldung abfragen_schreiben,
<!-- 02.06.2025 sprachearg5 war noch falsch rtl (weggen fehlendem bem-kz)
<!-- 03.06.2025 saetzequizok
<!-- 04.06.2025 leerraum vor OK bei toenequiz
<!-- 11.06.2025 sprukrot1 für abfragen_ue1 mit 1.5
                caside1 mit 1.5
<!-- 13.06.2025 .graukleinw mit center (für abfragen)
                .uka1 mit .8 em für abfragen_auswaehlen4 fussnoten
<!-- 15.06.2025 .mmm3a ohne gap für Header2
                .dicenter100 für Header2 in Mitte
                .imghundelogo
<!-- 16.06.2025 .img580f mit float:left;padding-right:.5em; in TexteAnpassen für index
                .img200f  .img100f .img40f
                .mobile-menu1 li:hover mit color
<!-- 17.06.2025 .hidden für <h1> bei abfragen
                .kopf2 mit text-align:center;width:100%;
<!-- 18.06.2025 aside
                .dicenter100 mit padding-top
                .caside2 mit padding-top 3em statt br
<!-- 19.06.2025 .bem4 für Aufgaben in abfragen
                .ulkapitel mit padding-top (statt br in abfragen_ue1
                .werbeteil5k mit padding-bottom (statt br in abfragen_ue1
                .caside1 mit padding-bottom
<!-- 23.06.2025 .ulkapitel mit list-style:none; für Links in abfragen
                .ulkapitel li::before wieder; für Links in abfragen
<!-- 24.06.2025 .imghundelogo height bei tablet war falsch geschrieben!
                .img1aa mit 50 bei smartph
<!-- 26.06.2025 testen user_erfassen class für select nicht gut bei smartphones
                .iv1 für select bei user_erfassen kleiner für smartpones
<!-- 27.06.2025 arg3 arg3a mit 1.65em stat 1.5em (bei Spiel 43 zu klein!)
<!-- 30.06.2025 .klein u.a. ohne arial als bem. weiß nicht, warum er nicht verdana nimmt??
                .klein u.a. immer .8em statt 12px daher kommen die verschiedenen schriften
                denn 12px ist kleiner als .8em
                .spruc mit arial für mmm


css_main.css
___________________
*/





.farbenfussball{color:#9ec31d;background-color:#e6f0c6;}/* grün und hellgrün*/
.farbenfussballa{color:#1c64b2;}/*schrift blau */
.farbenfussballb{color:#799B02;}/*schrift grün */



.bodya {width:80%;margin:0 auto;  display: grid;
      font-family:Railway, sans-serif;font-size:1em;
      background-color:#E8F5FB;

    grid-gap: 2em;
    grid-template-areas:

        "header header header"
        "aside main main"
        "footer footer footer"
        ;}


.bodyf{/*28.03.2025 für abfragen und abfragen_ue1 damit kraenzchen über die ganze breite geht*/
  width:100%;text-align:center;

}
@media(min-width:769px){/*28.03.2025*/
  .bodyf{
    background: url(zutaten/hunde2/hundE8F5FAi.jpg);
  }
}
.bodyf1{/*28.03.2025 darunter erst die width einschraenken*/
  width:80%;margin:0 auto;display:grid;
  justify-content:center;
  grid-gap: 2em;
  grid-template-areas:
    "header header header"
    "aside main main"
    "footer footer footer"
}
.bodyf2{/*28.03.2025 ohne aside bei abfragen darunter erst die width einschraenken*/
  width:60%;margin:0 auto;display:grid;/*28.03.2025 hier nur 60%*/
  max-width:800px;/*28.03.2025*/
  justify-content:center;
  grid-gap: 2em;
  grid-template-areas:
        "header"
        "main"
        "footer";
}
/*28.03.2025 vom größtem zum kleinsten Viewport aufführen*/
@media (max-width:1300px){/*27.08.2024*/
  .bodyf2{
    width:80%;grid-gap:1em;
  }
}
@media (max-width:768px){/*27.08.2024*/
  .bodyf1{
    width:90%;grid-gap:1em;
    grid-template-areas:
        "header"
        "main"
        "footer";
  }
}
@media (max-width:480px){/*27.08.2024*/
  .bodyf1, .bodyf2{
    width:100%;grid-gap: 1em;
    grid-template-areas:
        "header"
        "main"
        "footer";
  }
}




.bodyb {width:60%;margin:0 auto;  display: grid;
      font-family:Railway, sans-serif;font-size:1em;
      background-color:#E8F5FB;

    grid-gap: 2em;
    grid-template-areas:

        "header"
        "main"
        "footer"
        ;}
.bodyc {width:70%;margin:0 auto;  display: grid;
      font-family:verdana;font-size:1em;
      background-color:#1c64b2;/* versuch mit dunkelblau*/

    grid-gap: 2em;
    grid-template-areas:

        "header"
        "main"
        "footer"
        ;}


@media (max-width:480px){/*27.08.2024*/
  .bodyc{
    grid-gap: .5em;
  }
}

.bodyd{width:80%;/* bei lektion_erfassen1*/
      margin:0 auto;  display: grid;
      font-family:verdana;font-size:1em;
      background-color:#1c64b2; /*versuch mit dunkelblau*/

    grid-gap: .5em;
    grid-template-areas:

        "header"
        "main"
        "footer"
        ;}




@media (max-width:768px){
  .bodya, .bodyb, .bodyc, .bodyd{
    width:100%;
    /*grid-gap: 1em;*/
    grid-template-areas:
        "header"
        /*"aside"*/
        "main"
        "footer";
  }
}


@media (min-width:769px) and (max-width:1399px){
  .bodya{
    width:90%;
    grid-gap: 1em;
    background: url(zutaten/hunde2/hundE8F5FAi.jpg);
  }
  .bodyb{
    width:90%;
    max-width:900px;
    background: url(zutaten/hunde2/hundE8F5FAi.jpg);
  }
  .bodyc, .bodyd{
    width:90%;
    max-width:900px;
    /*background: url(zutaten/hunde2/hundE8F5FAi.jpg);*/
  }
}

@media (min-width:1400px){
  .body{
    width:80%;
    background: url(zutaten/hunde2/hundE8F5FAi.jpg);
  }
  .bodyb{
    width:80%;
    max-width:900px;
    background: url(zutaten/hunde2/hundE8F5FAi.jpg);
  }
  .bodyc{
    width:80%;
    max-width:900px;
    /*background: url(zutaten/hunde2/hundE8F5FAi.jpg);*/
  }
}


.logo {
  /*width:25em;*/
  text-align:center;
  margin:0 auto;
  /*position:fixed;*/
  /*top:20;*/

}

/* mache ich nicht mehr  wenn neben logo text kommt zb bei fußball
.logotfussball{
  text-shadow: 3px 3px 4px #777;
  color:#9ec31d;
  ::before{
    content: "\A \A \A \A ";
    white-space: pre;
  }
}

*/


/*29.08.2024 bodye bei Spiel 49 Versuch*/
.bodye{width:100%;margin:0 auto;  display: grid;
      font-family:arial;/*04.11.2024 meistens besser als verdana;*/
      font-size:1em;
      /* 15.01.2025 background-color:#ffffff;für Spiel 49 erst mal weiß, wenn nicht weiß, bg über style*/
      background-color:#D2E4E4; /* 15.01.2025 wie main hellblau versuch für ldprogramme*/

    grid-gap: .5em;/* statt 2em*/
    grid-template-areas:

        "header"
        "main"
        "footer"
        ;}

/*19.03.2025 für starten und starten1 mit hundebg*/
.bodyf{width:100%;margin:0 auto;  display: grid;
      font-family:arial;/*04.11.2024 meistens besser als verdana;*/
      font-size:1em;
      /* 15.01.2025 background-color:#ffffff;für Spiel 49 erst mal weiß, wenn nicht weiß, bg über style*/


    grid-gap: .5em;/* statt 2em*/
    grid-template-areas:

        "header"
        "main"
        "footer"
        ;}

.pun1{/* statistik Punkte bei Spielen erst bei 49*/
  font-family:arial;font-size:24px;background-color:#ffffff;
  /* ueber style color:$b5anfang;*/
  line-height:.4;/*war 4*/
  letter-spacing:2px;cursor:pointer;
  border-collapse:collapse;width:40px;
  height:40px;/* versuch*/
  text-align:center;
}
.spielueb{/*überschrift bei den spielen*/
  font-family:arial;font-size:2em;/* color über style*/
}
.spielauswahl{/*12.02.2025 bei abfragen_auswaehlen4*/
  display:inline-flex;
  gap:1em;flex-wrap:wrap;
  align-items:stretch;
  /*justify-content:space-between; 12.02.2025 versuch unregelmäßige Lücken*/
}
.spiel31bu{/*01.05.2025*/
  width:60px;height:60px;
}
.spiel31bravokasten{}/*01.05.2025 display:none bei smartphone*/
.spiel50zeitanzeige{/*29.04.2025 farben in abfragen50*/
  font-family:arial;font-size:1.3em;
  background-color:#ffffff;
  padding:2px;letter-spacing:3px;
}
.spiel50bu{/*29.04.2025 für buchstaben MARATHON farben in abfragen50*/
  width:40px;height:40px;
  text-align:center;color:#ffffff;font-size:1.2em;
}
.spiel50ueb2{/*29.04.2025*/
  color:#ffffff;font-size:1em;font-weight:bold;
}
.spiel50table{/*29.04.2025*/
  background-color:#ffffff;
  padding-top:.6em;padding-bottom:.6em;padding-left:1.2em;padding-right:1.2em;
}
.spiel31wi{/*01.05.2025*/
  width:800px;
}
.spiel38wi, .spiel39wi{/*02.05.2025*/
  width:500px;
}
.spiel38lautsprecher{/*02.05.2025*/
  width:40px;height:40px;
}
.spiel5bi{//08.05.2025
  height:100px;
}
.spiel5kamf0, .spiel5kamf1{/*08.05.2025*/
  margin:3px;border-width:3px;border-style:solid;width:210px;
}
.saetzequizok{/*03.06.2025 okhaken 20 bei mobil 14*/
  width:20px;height:20px;
}

@media (max-width:480px){
  .spiel50zeitanzeige{/*29.04.2025 farben in abfragen50*/
    letter-spacing:2px;
  }
  .spiel50bu{/*29.04.2025 für buchstaben MARATHON farben in abfragen50*/
    width:30px;height:30px;
  }
  .spiel31bu{/*01.05.2025*/
    width:40px;height:40px;
  }
  .spiel31bravokasten{/*01.05.2025*/
    display:none;
  }
  .spiel31wi, .spiel38wi, .spiel39wi{/* 02.05.2025 01.05.2025*/
    width:100%;
  }
  .spiel5bi{/*08.05.2025*/
    height:50px;
  }
  .spiel5kamf0, .spiel5kamf1{/*08.05.2025*/
    width:180px;
  }
  .saetzequizok{/*03.06.2025*/
    width:14px;height:14px;
  }

}

.endeblockueb{
  font-family:arial;font-size:2em;/* color über style*/
}
.kastenueb{/* überschrift bei den Statistik, Optionen, Spielregel*/
  font-family:arial;font-size:2em;/* color über style*/
  text-align:center;
  vertical-align:top;
}
.sta{/* statistik bei den spielen farben über pgm*/
  font-family:verdana;font-size:.8em;
}
.opt{
  font-family:arial;font-size:.8em;/*13.09.2024*/
}
a.stali{/* versuch farben über pgm */
  font-family:verdana;font-size:.8em;text-decoration:none;line-height:1.5;padding:.5em;
}
a.staligrau{/* 05.05.2025 für links unter kopf bei index */
  font-family:verdana;font-size:.8em;text-decoration:none;line-height:1.5;padding:.5em;
  color:#a0a0a0;
}
a.staligrau:link, a.staligrau:visited{/*05.05.2025*/
  color:#a0a0a0;
}
a.staligrau:hover{/*05.05.2025*/
  background-color:#a0a0a0;
  color:#ffffff;
}
.stagrau{/*08.05.2025 für text unter kopf bei index*/
  font-family:verdana;font-size:.8em;text-decoration:none;line-height:1.5;padding:.5em;
  color:#a0a0a0;
}
.warum{/*15.11.2024 color über funcSpiele */
  font-size:12px;font-family:courier;background-color:#ffffff;
}
a.endeblockli{/* 04.09.2024 farben über pgm */
  font-family:verdana;font-size:.8em;text-decoration:none;line-height:1.5;padding:.5em;
}
.endeblockte{/*15.11.2024 farben über pgm für spiel 46ff*/
  font-family:verdana;font-size:.8em;
}
.spielregel{
  font-family:verdana;font-size:1em;padding:1em;line-height:1.5;
}
.spielkasten{/*30.08.2024 stat, opt, spielregel*/
  position:absolute;left:0px;top:0px;
  overflow-y:auto;overflow-x:hidden;
  display:flex;
 /* width:500px; wird verändert! mal probieren ohne: was macht er dann?*/
  /*text-align:center;*/
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
  visibility:hidden;
  color:#000000;
  background-color:#ffffff;
  border-style:solid;border-width:2px;
  border-radius:20px;/*02.11.2024  versuch 20, jetzt 5 jetzt 10*/
  border-color:#000000;
  padding:1em;/*11.10.2024*/
  /*width:100%;´11.10.2024 macht keinen unterschied*/
  /*padding:.5em;*/
  /* alle farben werden über style geändert */
}
.spielkasten2f{/*25.11.2024 endeblock bei 2farbig spiel46ff*/
  position:absolute;left:0px;top:0px;
  overflow-y:hidden;/*25.11.2024 macht manchmal scrollbalken wegen 1px auto;*/
  overflow-x:hidden;
  display:flex;
 /* width:500px; wird verändert! mal probieren ohne: was macht er dann?*/
  /*text-align:center;*/
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
  visibility:hidden;
  color:#000000;
  background-color:transparent;/* 25.11.2024 versuch */
  border-style:solid;border-width:2px;
  border-radius:20px;/*02.11.2024  versuch 20, jetzt 5 jetzt 10*/
  border-color:transparent;/* 25.11.2024 versuch */
  padding:1em;/*11.10.2024*/
  /*width:100%;´11.10.2024 macht keinen unterschied*/
  /*padding:.5em;*/
  /* alle farben werden über style geändert */
}


.spielkastentable{/*07.09.2024*/
  text-align:left;/* nur soviel wie man braucht zb bei spiel 17 mit bilderrahmen /*
  /*width:100%;height:100%;*/
  line-height:1.5;
}
.spielkastentable1{/*11.09.2024 für opt und stat*/
  text-align:left;/*width:100%;height:100%;*/
  line-height:2.5;
}
.spielkastentable2{/*11.10.2024 für spielregel*/
  text-align:left;/*nur soviel wie man braucht zb bei spiel 17 mit bilderrahmen */
  width:100%;height:100%;
  line-height:1.5;
  display:block;
  overflow-y:auto;overflow-x:hidden;
}
.spielkastentable3{/*31.10.2024 für Endeblock*/
  text-align:center;/*width:100%;height:100%;*/
  line-height:2.5;
}
.spielekopf{/*06.09.2024*/
  /*display:inline; 19.02.2025 sonst hat vertical-align keine funktion */
  /*vertical-align:bottom;19.02.2025 wegen 2-zeilig bei quiz vorher  middle;*/
  border-spacing:1em 0;

}
.klein, .kleinhell{/* 04.09.2024 für wörter abfragen_schreiben*/
  font-size:.8em;

  padding:0 0 0 0;
  line-height:1;/*01.04.2025*/
}
.kleingrau{/* 19.01.2025 */
  font-size:.8em;

  padding:0 0 0 0;
  color:#a0a0a0;
  line-height:1;/*01.04.2025*/
}
.kleinschwarz{/* 23.01.2025 */
  font-size:.8em;

  padding:0 0 0 0;
  color:#000000;
  line-height:1;/*01.04.2025*/
}
.kleinrot{/* 19.01.2025 */
  font-size:.8em;

  padding:0 0 0 0;
  color:#ff0000;
  line-height:1;/*01.04.2025*/
}
.kleinbold{/* 18.01.2025 bei MergeMarkieren*/
  font-size:.9em;

  font-weight:bold;
  padding:0 0 0 0;
  line-height:1;/*01.04.2025*/
}
.klein1{/* bei lexikon Auswahl*/
  font-size:.8em;

  line-height:1.5;/*01.04.2025*/
  padding:0.3em 0.3em 0.3em 0.3em;
}
.rot{/*21.02.2025 wichtige meldungen in dick und rot zb "nicht geladen"*/
  font-size:1em;font-weight:bold;color:red;
  line-height:1;/*01.04.2025*/
}
a.rotli{/* 31.05.2025 für links bei fehlermeldung zb abfragen_schreiben */
  font-size:1em;font-weight:bold;line-height:1;text-decoration:none;
  color:red;
}
a.rotli:link, a.rotli:visited{/*31.05.2025*/
  color:red;
}
a.rotli:hover{/*31.05.2025*/
  background-color:red;
  color:#ffffff;
}

.testu{/*14.03.2025 bei dertest*/
  font-family:arial;font-size:1em;font-weight:bold;color:#000000;
}
.testug{/*14.03.2025 bei dertest*/
  font-family:arial;font-size:1.5em;font-weight:bold;color:#000000;
}
.pele20{/* bei aufgabedestages 26.02.2025*/
  padding-left:20px;
}
.pele10{/* bei aufgabedestages 26.02.2025*/
  padding-left:10px;
}
@media (max-width:480px){
  .pele10, .pele20{
    padding-left:0px;
  }
}
/* 31.01.2025 für SmileyKa doch nicht, geht mit ukaligrau
a.smileyli:link{
  font-size:12px;
  padding:0 0 0 0;
  color:#a0a0a0;
  text-decoration:none;
}
a.smileyli:visited{
  font-size:12px;
  padding:0 0 0 0;
  color:#a0a0a0;
  text-decoration:none;
}
a.smileyli:hover{
  font-size:12px;
  padding:0 0 0 0;
  background-color:#a0a0a0;
  color:#f8f8f8;
  text-decoration:none;
}
*/
.mark{/*03.02.2025 für Abkürzung des Textes Markieren, Wegwerfen zb bei lektion_erfassen2*/
  overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:clip;
}

.mark1{/*27.02.2025 text unter bilder schnellauswahl bei starten2 versuch*/
  overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:clip;width:104px;
}
@media (max-width:480px){
  .mark{
    width:30px;
  }
  .mark1{/*27.02.2025*/
    width:62px;
  }
}


.aufgabenr{/*04.09.2024 für spiel49 farbe kommt dazu*/
  font-family:arial;font-size:1em;
  font-weight:bold;text-align:center;
}
.aufgabenr1{/* 20.02.2025 ganz groß für woerterquiz*/
  font-family:arial; font-size:4em;
  padding-left:.5em;padding-right:.5em;
}
@media(max-width:480px){
  .aufgabenr1{font-size:2em;padding-left:.2em;padding-right:.2em;}/*20.02.2025*/
}

.clear{/*25.04.2025 beendet float:left bei Texte mit Bildern funcTexte*/
  clear:left;padding-bottom:1em;
}
.img150{/* 05.09.2024 height150  spiel49  12.02.2025 versuch für Spiel bei abfragen_auswaehlen4*/
  height:150px;
}
.img200, .img200f{/* 12.03.2025 woerter_uebersicht_w bild im kopf*/
  height:200px;
}

.img120{/*25.02.2025 bei aufgaben_starten2*/
  width:120px;
}
.img100, .img100a, .img100f, .img100h, .img100c, .img100wh1{/* für OK-Haken, 12.02.2025 für bilder für spielauswahl 14.02.2025 für bild bei lernen img100h toenequiz*/
  height:100px;
}
.img135{/*27.02.2025 starten2*/
  height:100px;border:2px ridge #a0a0a0;
}

.img100w{/*zb spiel27*/
  width:100px;
}
.img100wh{/* spielauswahl bei spiel 24*/
  width:100px;height:100px;
}
.img100wh{/* spielauswahl bei spiel 24*/
  width:100px;height:100px;
}
.img100b{/*27.02.2025  bei starten2 schnellauswahl mit border*/
  height:100px;border:2px ridge #a0a0a0;width:100px;
}

.img80, .img80b{/* für kleinen OK-Haken 80b für smiley bei lernen */
  height:80px;
}
.img80a{/* erfolgsstatistik erfolg.php und abfragen_schreiben*/
  width:80px;height:80px;
}
.img80c{/* 21.03.2025 für abfragen37 grün*/
  width:80px;
}

.img70{/*12.02.2025 für bilder für spielauswahl wenn 2*/
  height:70px;
}
.img50{/*23.01.2025 für kleines sakabild in liste */
  width:50px;
}
.img50b{/*23.03.2025 fragezeichen spiel16*/
  height:50px;
}

.img40, .img40f{/*21.01.2025 für icons erstmalig in woerter_anhoeren für tonloopfenster*/
  width:40px;height:40px;
}
.img40h{/*23.02.2025 für geschichte.*/
  height:40px;
}
.img30, .img30a{/*02.03.2025 30a für suchmaske ohne Änderung 26.02.2025 smiley für aufgabedestages */
  height:30px;
}

.img25{/*30.01.2025 verschiedengroße Icons in 20*20 weißes Feld bringen*/
  display:flex;
  width:25px;height:25px;background-color:#ffffff;
  border:1px solid #a0a0a0;
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
}
.img25a{/*07.02.2025 für optionen bei lexikon ohne rahmen und bg*/
  /*display:flex; 12.02.2025 mal ohne */
  width:25px;height:25px;
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
}
.img2115, .tastaturi, .sozgraui{/*07.05.2025 tastaturi,sozgraui 03.02.2025 für sozgraui und tastaturi*/
  width:21px;height:15px;
  padding:.1em;/*07.05.2025*/
}
.img580, .img580f{/*woerter_uebersicht_w großes Bild 11.03.2025*/
  width:580px;
  border:1px solid #a0a0a0;
  margin-top:1em;/*12.03.2025*/
}
.img580f, .img200f, .img100f, .img40f{/*16.06.2025`*/
  float:left;padding-right:.5em;
}
.leerraum{/*04.06.2025 toenequiz vor OK*/
  width:20px;
}
.statusbalken{/*30.01.2025 lektionen_starten2*/
  display:flex;wrap:nowrap;width:100px;border:1px solid #a0a0a0;
}

a.ansehen4:link{/*23.01.2025 sage-starten2 überschrift gruppe*/
  font-family:arial;font-size:1.5em;color:#7CBD3B;/* in grün wie icon*/
}
a.ansehen4:visited{/*23.01.2025 sage-starten2 überschrift gruppe*/
  font-family:arial;font-size:1.5em;color:#7CBD3B;
}
a.ansehen4:hover{/*23.01.2025 sage-starten2 überschrift gruppe*/
  font-family:arial;font-size:1.5em;color:#7CBD3B;background-color:#ffffff;
}
.ansehen4a{/* überschrift gruppe td*/
  padding:20px;background-color:#E0F0D0;
}
.spielicons{/*12.02.2025 schwiereigkeitsgrad aufgabenart usw*/
  width:100%;line-height:1;
}

@media (max-width:720px){

  .spielicons{display:none;}/*12.02.2025*/
}
@media(min-width:481px){
  .nichtbeimobil{}
  .nurbeimobil{display:none;}
}
@media(max-width:768px){/*26.05.2025 auch bei tablet nicht*/
  .tastaturi{display:none;}/*26.05.2025 auch bei tablet nicht*/
}
@media(max-width:480px){
  .nichtbeimobil{display:none;}/*16.02.2025 zb bei abfragen_schreiben li und re*/
  .tastaturi{display:none;}/*07.05.2025 für lexikon und alle Programm mit tastatur erst mal so*/
  .nurbeimobil{}
}
@media(max-width:480px){
  .img120{
    width:60px;
  }
  .img40, .img40f{
    width:30px;height:30px;/*30.03.2025 nmit 30 statt 20*/
  }
  .img30{/*26.02.2025*/
    height:15px;
  }
  .img50b{/*23.03.2025*/
    height:25px;
  }
  .img80c{/*21.03.2025*/
    width:60px;
  }
  .statusbalken{display:none;}/*30.01.2025*/
  .imdezember{display:none;}/*17.02.2025 monatsspiel abfragen_schreiben*/
  .nichtbeimobil{display:none;}/*16.02.2025 zb bei abfragen_schreiben li und re*/
  .nurbeimobil{}
  .img80a{/*13.02.2025 erfolg*/
    width:60px;height:60px;
  }
  .img80b{/*14.02.2025 lernen für smileys*/
    height:40px;
  }
  .img100a{/*14.02.2025 lernen für bilder*/
    /*height:50px;*/
    display:none;
  }
  .img100b{/*27.02.2025  bei starten2 schnellauswahl mit border*/
    width:60px;height:60px;border:1px solid #a0a0a0;
  }
  .img100c{/*27.02.2025 avatar*/
    height:50px;/*16.05.2025 geändert von 60 auf 50 bei avatar_aendern*/
  }
  .img135{height:60px;border:1px solid #a0a0a0;}
  .img580, .img580f{width:300px;}/*11.03.2025*/

  .img100wh1{/*spiel1 bei smartphone auch breite begrenzen*/
    width:80px;height:80px;
  }
  .leerraum{/*04.06.2025*/
    width:2px;
  }
}
@media(max-width:480px){
  .nurbeimobil{display:inline-flex;}/* bei abfragen_schreiben link zu halloffame*/
}

.spieltable{/*16.09.2024 mal für Spiel1*/
  margin-left: auto;
  margin-right: auto;
  display: table;
  border-spacing:.5em;
  text-align:center;
  width:100%;
  margin:0 auto;
}
.spieltable1{/*16.09.2024 mal für Spiel1 ohne width*/
  margin-left: auto;
  margin-right: auto;
  display: table;
  border-spacing:.5em;
  text-align:center;
}
@media (max-width:480px){
  .spieltable1{
     border-spacing:.1em;/*22.03.2025*/
  }
}
.spieltr {display: table-row; }/* wie <tr></tr>*/
.spieltd {display: table-cell; text-align:center;}/* wie <td></td>*/

.spieltd200{display: table-cell;height:200px;}
.spieltd500{display: table-cell;height:500px;}/* 26.05.2025 bei spiel 25*/
.einspiel{max-width:23%;width:23%;line-height:1;}/*für abfragen_auswaehlen4 12.02.2025 */

@media(max-width:850px){
  .einspiel{
    width:45%;max-width:45%;/* versuch 12.02.2025*/
  }
  .img70{/*12.02.2025 wenn 2 bilder bei spielauswahl*/
    height:50px;
  }
  .img100, .img100f{
    height:80px;
  }
  .img100wh{/* spielauswahl bei spiel 24*/
    width:80px;height:80px;
  }
  .img200, .img200f{/*12.03.2025*/
    height:150px;
  }
}
@media(max-width:1100px) and (min-width:851px){
  .einspiel{
    width:30%;max-width:30%;/* versuch 12.02.2025*/
  }


}

@media (max-width:480px){
  .img150, .img100, .img100f, .img200, .img200f{
    height:80px;
  }
  .img70{/*28.04.2025 wenn 2 bilder bei spielauswahl*/
    height:40px;
  }
  .spielekopf{
    border-spacing:.25em 0;/*24.06.2025 war .5*/
  }
  .spielueb{
    font-size:1.2em;
    line-height:1.2;
  }
  .img100w{
    width:66px;
  }
  .img100h{
    height:66px;
  }

}
/*21.01.2025 bei woerter_anhoeren  */
.woerteranhoerenfenster{
  width:600px;height:450px;
}
@media (max-width:600px){
  .woerteranhoerenfenster{
    width:100%;height:100%;
  }
}

/* 17.05.2024  mal probieren*/
.fehler{color:red;}
.fehlermeldung{/*21.05.2024*/
  /*background-color:red;*/
  /*padding:1em;*/
  margin:1em;/*13.06.2024 */
  /*width:100%;*/
}
.fehlermeldungi{/*21.05.2024*/
  background-color:white;
  font-family:verdana;
  font-size:1em;
  color:red;padding:1em;/*width-max:500px; war width:500px;*/
  border: 10px solid red;
}
.noc{user-select: none;}/* nicht kopieren bei tonlink*/
.icon12{width:12px;height:12px;}/* icon Fragezeichen */
.tf{font-family:verdana;font-size:1em;background-color:red;color:white;line-height:1.2;padding:.5em;}/*28.05.2024*/
.tfue{font-family:verdana;font-size:1em;color:red;line-height:1.2;padding:.5em;}
.diflex{display:flex;}/*28.05.2024*/

.diflex1{display:flex;background-color:white;padding:.5em;align-items:center;}/* 04.06.2024 für Hinweis Basisversion bild und text für Punktekontostand?*/
.diflex2{display:flex;gap:1em;align-items:baseline;}
.diflex3{display:flex;padding:1em 0 1em 0;justify-content:center;}/* für zusätzliches textareabild in abfragen*/
.diflex4{display:flex;gap:.5em;flex-wrap:nowrap;align-items:baseline;}/*11.08.2024 icon u Fragezeichen*/
.diflex5{display:flex;gap:1em;align-items:baseline;flex-wrap:wrap;border-top:20px solid #ffffff;border-bottom:20px solid #ffffff; }/*11.08.2024 alle icon u Fragezeichen*/
.diflex6{display:flex;gap:1em;align-items:baseline;flex-wrap:nowrap;}/*07.02.2025 optionen bei lexikon*/
.diflex7{display:flex;gap:1em;flex-wrap:wrap;}/*10.03.2025 bei woerter_uebersicht_w*/
.diflex100{display:flex;width:100%;}
.diflexa{/* block für auswahl */
  display:flex;padding:1em 1em 1em 2em;
  font-weight:normal;background-color:#E6EDED;flex-wrap:wrap;gap:1em;
}
.diblocka{/* block für meine neuesten*/
  display:block;padding:1em 1em 1em 2em;
  font-weight:normal;background-color:#E6EDED;
  line-height:1.5;
}

.diflexb{/* block für buttons ok */
  display:flex;padding:1em 1em 1em 1em;
  font-weight:normal;
  background-color:white;/*#E6EDED;*/
  flex-wrap:wrap;gap:1em;height:4em;
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
}
.diflexc{/* zurück oder weiter */
  display:flex;padding:1em 0 1em 0;
  flex-wrap:wrap;gap:1em;

}
.diflexc1{/* zurück oder weiter für lektion_erfassen1 in main*/
  display:flex;padding:1em 0 1em 0;
  flex-wrap:nowrap;gap:2em;
  width:100%;
}
@media (max-width:768px){
  .diflexc1{
    gap:1em;
    padding:.5em 0 .5em 0;
  }
}
.diflexd{/* fenster schließen*/
  display:flex;padding:1em 0 1em 0;
  flex-wrap:wrap;gap:1em;
  align-items:center;/* vertikal mittig*/
  justify-content:center;/* horizontal mittig*/
}
.diflexe{/* sternerklärung */
  display:flex;padding:1em 0 1em 0;
  flex-wrap:nowrap;gap:1em;
}


.diflexf{/* für Suchmaske mit LMS e mit bg grau */
  display:flex;
  margin:1em;/* lässt platz darunter*/
  justify-content:right;
  line-height:1;/*02.03.2025 damit klein Platz am unteren Rand der suchleiste*/
}
.diflexf1{/* der block*/
  display:flex;
  border:1px solid #a0a0a0;
  background-color:#a0a0a0;/*wegen trennlinine 02.03.2025 */
  column-gap:1px;flex-wrap:nowrap;/* 02.03.2025 mit column*/
}
.diflexf2{/* die einzelnen felder */
  background-color:#e0e0e0;
}
.diflexg{/* Überschrift komplett*/
  display:flex;

  margin:1em;
}
.diflexg1{/* linker teil überschrift */
  display:flex;
  flex-grow:1;

}
.diflexg2{/* Überschrift rechtsbündiger Teil*/
  display:flex;
  flex-wrap:nowrap;gap:1em;
  align-items:center;/* vertikal mittig*/
  justify-content:right;/* horizontal mittig*/
  padding:.5em 1em .5em .5em;

}







.diflexsp{flex-basis:100%;}
.diblock{display:block;}
.diblock1{display:block;text-align:left;padding-left:1em;}/*29.05.2024 für abfragen */
.diblockleft{display:block;text-align:left;}/* in fff ende */
.diblock2{display:block;padding:1em 0 1em 0;}/* für woelernen */
.diblock3{display:block;text-align:left;width:fit-content;max-width:600px;}/* 19.06.2025 bemarea in abfragen */

.dipadd{padding:2em;}
.dipaddou{padding:2em 0 2em 0}/*top right bottom left*/
.dipaddou1{padding:1em 0 1em 0}/*top right bottom left*/
.dicenter{text-align:center;}
.diblockright{text-align:right;}
.dicenter100{display:flex;justify-content:center;width:100%;padding: 1em 0 1em 0;}/*19.06.2025 Aufgaben in abfragen 18.06.2025 padding-top 15.06.2025 Header2 in Mitte*/

.divu{}/* 08.08.2024 bei smartphone mit Leerzeile Links am Ende vor </main>*/
@media (max-width:480px){/* 08.08.2024 */
  .divu::before, .divu::after{
    content: "\A ";
    white-space: pre;
  }
}

.divfenster{/*25.03.2025 bei woerter_anhoeren*/
  width:600px;height:500px;
}
@media (max-width:480px){
  .divfenster{/*25.03.2025 bei woerter_anhoeren*/
    width:80%;
  }
}


.lektion{/* lektionen_starten2*/
  display:flex;gap:1em;
  align-items:center;/* vertikal mittig*/
  /*justify-content: space-around;*/
  /*background-color:#f0f0f0;*/
  /*padding:1em 0 1em 0;*/
  margin:1em;

}
.lektion1{/* für lektionnr text usw bei smartphones untereinander*/
  display:flex;gap:1em;
  align-items:center;/* vertikal mittig*/
  margin-top:1em;/* zwischenraum*/
  margin-bottom:1em;
  justify-content: space-around;


}
.lektion2{/* für icons und status und checkbox immer flex ohne wrap*/
  display:flex;gap:1em;
  align-items:center;/* vertikal mittig*/
  /*justify-content: space-around;14.08.2024 mal weglassen*/

}


@media (max-width:480px){
  .lektion{/* versuch alles untereinander, icons und checkbox beieinander*/
    padding: 0 0 0 .2em;
    display:block;
    margin:.2em;
  }
  .lektion1{
    display:block;
  }
}


@media (max-width:480px){
  .diblock1{padding-left:.5em;}
}


/*für Kopf4 externe Programme*/
.dikraenzchen{display:block;background-color:#F9C9CC;padding:.5em;text-align:left;}/*#E8F5FB*/

/*für Kopf2i interne Programme*/

.divkraenzchen{
  width:100%;padding:1em;
  justify-content:center;/*01.04.2025 mit center*/
  background-color:#ffffff;
  /*z-index:10000;28.03.2025 mal wegmachen*/
  border-bottom:1px solid red;display:flex;/*27.03.2025 mit display flex 20.03.2025 mit width100% 05.01.2025 bgcolor zindex 23.08.2024 interne programme*/
}
.kraenzchen{
  font-family:verdana;font-size:1em;color:#ff0000;
  /*vertical-align:bottom;*/
  /*width:100%; nein! versuch 04.01.2025*/
  text-align:left;/*31.03.2025 auch hier*/
}
@media(max-width:480px){
  .divkraenzchen{width:95%;}/*20.03.2025*/
}

.kraenzchenbild{/*05.06.2024*/
  float:left;margin-right:1em;
  width:30px;height:30px;/*auch*/
  text-align:left;/* versuch*/
}
a.kraenzchenli:link{font-family:verdana;font-size:1em;text-decoration:none;color:#ff0000;}
a.kraenzchenli:visited{font-family:verdana;font-size:1em;text-decoration:none;color:#ff0000;}
a.kraenzchenli:hover{font-family:verdana;font-size:1em;text-decoration:none;background-color:#E90606;color:#ffffff;}/*20.03.2025 dunkleres Rot damit unterschied besser ist*/

.bittewarten{display:none;}/* 25.07.2024 */
.bittewarten.active{display:block;}

/* für meldungen mit katze: nutzung,nachricht 23.07.2024 */
a.linkkatze:link {font-weight:normal; text-decoration:none; color:#1c64b2;font-size:.8em;}
a.linkkatze:visited {font-weight:normal; text-decoration:none; color:#1c64b2;font-size:.8em;}
a.linkkatze:hover {font-weight:normal; text-decoration:none; background-color:#1c64b2;color:#E8F5FB;font-size:.8em;}

/* 23.07.2024 */
.ukatze, .u, .ui{/*12.02.2025 ui versuch in abfragen_auswaehlen4*/
  font-size:1em;font-weight:bold;color:#1c64b2;
  font-family:arial;/*15.08.2024*/
}
@media (max-width:480px){/*12.02.2025 ????? */
  .ui, .u{font-size:.8em;}
}

.ug{/* für aufgabe bei dertest*/
  font-size:2em;font-weight:bold;color:#1c64b2;
  font-family:arial;
}
.gri{
  background-color:#ffffff;color:#1c64b2;text-align:center;
  font-weight:bold;display:block;
}
.ukkatze{font-size:.8em;color:#1c64b2;}
.kastenkatze{
  position:absolute;left:0px;top:0px;
  width:300px;
  border-style:solid;border-width:1px;border-color:#1c64b2;
  visibility:hidden;
  background-color:#ffffff;
  z-index:10;/* über izindex weiterzaehlen, auch menu_zindex beachten falls gesetzt*/
  padding-bottom:1em;padding-left:1em;
  font-family:arial;/*19.03.2025 wegen ukali*/
}
.uk{font-size:.8em;color:#1c64b2;}
.uka{font-size:.8em;color:#1c64b2;font-family:arial;}/*13.08.2024 in arial für schmale überschriften und texte*/
.uka1{font-size:.8em;color:#1c64b2;}/*13.06.2025 abfragen_auswaehlen4*/
.ukamohi{font-size:.8em;color:#1c64b2;font-family:arial;}/*bei mobil hidden*/
/*30.01.2025 ohne font-family*/
a.ukali:link{text-decoration:none;color:#1c64b2;font-size:.8em;}
a.ukali:visited{text-decoration:none;color:#1c64b2;font-size:.8em;}
a.ukali:hover{text-decoration:none;background-color:#1c64b2;color:#ffffff;font-size:.8em;}

/*30.01.2025 rot  bei lektion_erfassen1 frage nach wirklich löschen*/
a.ukalirot:link{text-decoration:none;color:#ff0000;font-size:.8em;}
a.ukalirot:visited{text-decoration:none;color:#ff0000;font-size:.8em;}
a.ukalirot:hover{text-decoration:none;background-color:#ff0000;color:#ffffff;font-size:.8em;}


a.ukalimohi:link{font-family:arial;text-decoration:none;color:#1c64b2;font-size:.8em;}
a.ukalimohi:visited{font-family:arial;text-decoration:none;color:#1c64b2;font-size:.8em;}
a.ukalimohi:hover{font-family:arial;text-decoration:none;background-color:#1c64b2;color:#ffffff;font-size:.8em;}
/* ukligrau für einfügen wenn noch nichts markiert ist */
/* auch ohne font-family 31.01.2025 */
a.ukaligrau:link{text-decoration:none;color:#a0a0a0;font-size:.8em;}
a.ukaligrau:visited{text-decoration:none;color:#a0a0a0;font-size:.8em;}
a.ukaligrau:hover{text-decoration:none;background-color:#a0a0a0;color:#ffffff;font-size:.8em;}

.uks{font-family:verdana;font-size:.8em;color:#1c64b2;padding:.5em 0 .5em .2em}/* 11.08.2024 für selectbox*/
.ukgrau{font-size:.8em;color:#a0a0a0;}/* für Suche */
.zuletzt{font-size:.8em;color:#a0a0a0;}
.suche{
  font-family:arial;font-size:1em;background-color:#e8e8e8;color:#a0a0a0;
  width:10em;/*07.04.2025 mit 10 em 02.03.2025 versuch mit 5 em */
}
.tx{font-size:1em;color:#1c64b2;}/* einfach gleich machen */
/* pfeile weiter/zurück zb */
.srcgross{display:block;}
.srcklein{display:none;}
@media (max-width:768px){
  .srcgross{display:none;}
  .srcklein{display:block;}
  .tx{font-size:.8em;color:red;}/* red nur test */
}

.zurueck{
  border:2px solid #FF66CC;/*rosa für zurückkasten*/
  background-color:#F6E3F0;/*noch helleres rosa*/
  display:flex;
  padding:1em;gap:.5em;
  align-items:center;
   padding:.5em;/*21.03.2025*/
}
.zurueck1{
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:left;/*horizontal*/
  /*flex-grow:1;*/
  width:50%;
  /*background-color:#ffff00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;/*17.01.2025*/
   padding:.5em;/*21.03.2025*/

}
.zurueck2{/* 04.02.2025 wenn kein Weiter*/
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:left;/*horizontal*/
  /*flex-grow:1;*/
  width:80%;
  /*background-color:#ffff00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;/*17.01.2025*/
   padding:.5em;/*21.03.2025*/
}

.zurueck2b{/* 09.04.2025 bei aliens spiele ohne border und padding*/
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:center;/*horizontal*/
  /*flex-grow:1;*/
  width:80%;
  /*background-color:#ffff00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  /*border:1px solid #56918F;*/
  gap:0.5em;/*17.01.2025*/
   /*padding:.5em;21.03.2025*/
}


.zurueck2a{/* 16.02.2025 wenn 100% zb bei abfragen_schreiben*/
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:left;/*horizontal*/
  /*flex-grow:1;*/
  width:100%;
  /*background-color:#ffff00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;/*17.01.2025*/
   padding:.5em;/*21.03.2025*/

}

.zurueck1a{/* 31.01.2025 nur Platz reservieren!*/
  width:50%;
}

.weiter{
  border:2px solid #99FF99;/*hellgrün für weiterkasten*/
  background-color:#DAF8DA;/*noch helleres grün*/
  display:flex;
  padding:1em;gap:.5em;
  align-items:center;
   padding:.5em;/*21.03.2025*/

}
.weiter1{
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:right;/*horizontal*/
  /*flex-grow:1;*/
  width:50%;
  /*background-color:#ffaa00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;/*17.01.2025*/
  padding:.5em;/*21.03.2025*/

}
.weiter2{/* 04.02.2025 wenn kein Zurück*/
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:right;/*horizontal*/
  /*flex-grow:1;*/
  width:80%;
  /*background-color:#ffaa00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;/*17.01.2025*/
  padding:.5em;/*21.03.2025*/

}
.weiter1:hover, .weiter2:hover, .zurueck1:hover, .zurueck2:hover, .schliessen1:hover, .zurueck2a:hover, .zurueck2b:hover{/*04.02.2025 alles gleich*/
  background-color:#E1F6F5;/*17.01.2025 versuch heller bei hover*/
}
.weiter1a{/* 31.01.2025 nur Platz reservieren!*/
  width:50%;
}

.schliessen1{/* 29.01.2025 für fenster schließen*/
  display:flex;
  align-items:center;/*vertikal*/
  justify-content:center;/*horizontal*/
  width:80%;/*versuch 01.02.2025 */
  /*background-color:#ffaa00;*/
  background-color:#BDD8D7;/* 17.01.2025 versuch wie footeri2*/
  border:1px solid #56918F;
  gap:0.5em;
  padding:.5em;/*21.03.2025*/
}


/*mmm für MergeMarkieren5 , für Textfeld in schautafel_erfassen, für woerter_anhoeren*/
.mmm{
  display:flex;flex-wrap: wrap;
  column-gap:1em;/*19.01.2025*/
  /* nein justify-content:space-between; 19.01.2025*/

}
.mmm1{/*24.01.2025 mit gap auch nach zeilen bei woerter_anhoeren*/
  display:flex;flex-wrap: wrap;
  gap:1em;/*19.01.2025*/
  /* nein justify-content:space-between; 19.01.2025*/
  align-items:stretch;/*10.02.2025 macht die Zeilen gleich hoch*/
  /*justify-content:space-between; ohne Änderung? versuch 10.02.2025 endet am linken und rechten Rand, hat aber zu viele Leerstellen bei der letzten Zeile deswegen lieber nicht*/
  /*justify-content:stretch; 10.02.2025 ob das geht? nein, macht er nicht*/
  /*besser ohne? fängt dann immer links an justify-content:center;02.03.2025*/

}
.mmm2{/*27.02.2025 versuch bei starten2*/
  display:flex;flex-wrap: wrap;
  gap:1em;
  justify-content:center;/*space-between; */
}
.mmm3{/*10.03.2025 bei woerter_uebersicht_w*/
  display:flex;flex-wrap: wrap;
  gap:1em;
  justify-content:left;/*space-between; */
}
.mmm3a{/*15.06.2025 bei Header2 ohne gap*/
  display:flex;flex-wrap: wrap;
}
.mmm4{/*11.03.2025 bei woerter_uebersicht_w*/
  display:inline-block;flex-wrap: wrap;
  gap:1em;
  justify-content:left;
}
.mmm5{/*18.03.2025 versuch für Kraenzchen*/
  display:inline-flex;/*19.03.2025 versuch, vorher inline-flex;, bei nur flex macht er alles in eine Zeile?*/
  flex-wrap: wrap;
  gap:1em;
  justify-content:center;/*space-between; */
  align-items:baseline;
  /*border-bottom:1px solid red;18.03.2025 versuch bei divkraenzchen über gesamte Breite*/
}
.mmm6{/*02.05.2025 bei spiel38*/
  display:flex;flex-wrap: wrap;
  gap:1em;
}
@media (max-width:480px){
  .mmm5{/*20.03.2025*/
    justify-content:left;
    gap:.5em;
  }
}


.basis{font-family:verdana;font-size:1em;color:#ff0000;line-height:1.5;}
.graukleinw{font-family:verdana;font-size:.8em;color:#a0a0a0;line-height:1.2;text-align:center;}
.bem{font-family:courier;font-size:.8em;color:#000000;}
.bem1{font-family:courier;font-size:.8em;color:#000000;padding:1em;}
.bem2{font-family:courier;font-size:1em;background-color:#fefefe;padding:.5em;width:90%;height:2em;}/* 04.02.2025 für textarea bem zb*/

.bem3{padding:1em;max-width:620px;text-align:left;}/*12.03.2025 620 statt 580 //10.03.2025 für areatext in woerter_uebersicht_w*/
.bem4{font-family:courier;font-size:1em;color:#1c64b2;}/*19.06.2025 für Aufgaben in abfragen*/
.komm{font-size:.8em;color:#a0a0a0;}/*25.02.2025 für aufgaben_starten2*/
.seiteakt{border:1px solid #1c64b2;font-size:.8em;color:#1c64b2;}
/* ukl link mit klasse uk */
a.ukl:link{font-family:verdana;font-size:.8em;text-decoration:none;color:#1c64b2;cursor:pointer;}
a.ukl:visited{font-family:verdana;font-size:.8em;text-decoration:none;color:#1c64b2;}
a.ukl:hover{font-family:verdana;font-size:.8em;text-decoration:none;color:#1c64b2;}
/* zw link bei zurueck/weiter */
a.zw:link{font-family:verdana;font-size:.8em;text-decoration:none;color:#202020;cursor:pointer;}
a.zw:visited{font-family:verdana;font-size:.8em;text-decoration:none;color:#202020;}
a.zw:hover{font-family:verdana;font-size:.8em;text-decoration:none;color:#202020;background-color:transparent;}/*17.01.2025 bg transparent*/
/* link in spruk ohne änderung zb für *verweise*/
a.sprukl:link{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;cursor:pointer;}
a.sprukl:visited{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}
a.sprukl:hover{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}

/* link in spruk mit  änderung f verschiedene links, kleiner bei smartph  27.08.2024 */
a.sprukl2:link{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}
a.sprukl2:visited{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}
a.sprukl2:hover{font-family:verdana;font-size:1em;text-decoration:none;background-color:#1c64b2;color:#ffffff;}


@media (max-width:480px){
  a.sprukl2:link, a.sprukl2:visited, a.sprukl2:hover{
    font-size:.8em;
  }
}



.woetabelle{
  display:flex;
  justify-content:center;/*macht die ganze Tabelle in die Mitte */

}
.woetabelle1{
  min-width:300px;font-family:arial;align-items:center;
  display:flex;width:100%;padding-top:.5em;/*09.04.2025 padding-top versuch*/
/*27.03.2025 width:100%;21.03.2025 mit arial middle center//20.03.2025 immer 100% machen 08.06.2024 versuch*/
}
.left{text-align:left;}/*09.04.2025 für überschrift sprache bei abfragen*/
/*.woeblock{display:block;justify-content:center;}*/
@media (max-width:480px){/*20.03.2025*/
  .woetabelle1{width:100%;}
}

.hidden{visibility:hidden;}/*17.06.2025 für <h1> bei abfragen*/

.mainblock{/* mohi auch*/
  display:block;
}
.mohi{
  /*display:inline;versuch ohne*/
}

.mainblockmo{
  display:flex;/* war block */
  justify-content:center;

}

.mainblockmo1{
  display:block;
  text-align:left;
}


.woetabelleleft{display:flex;justify-content:left;}



@media (max-width:480px){/*01.03.2025 wieder 480 //01.06.2024 war 480*/
  .mohi{display:none;}
  .ukamohi{display:none;}
  .ukalimohi{display:none;}
  .spalte{display:none;}/* 17.01.2025 versuch, ganze spalte nicht zeigen*/
}






.woelernen{height:100px;cursor:pointer;display:flex;
                 font-family:verdana;font-size:1.5em;
                 color:#1c64b2;background-color:#E6EDED;
                 align-items:center;/* vertikal mittig*/
                 justify-content:center;/* horizontal mittig*/
                 padding:0 1em 0 1em;
}
.woelernen:hover{
  background-color:#1c64b2;color:#E6EDED;
  .spielentext::after{content:" Ja, das will ich!";}
}

@media (max-width:480px){/*01.06.2024*/
  .woelernen{
    font-size:1em;
    padding:0 .5em 0 .5em;
    height:75px;
  }
}

/* mal probieren für kontakt_extern*/
buttonX[type=submit] {
   font-size: 1.3em; padding: 5px 12px;
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: teal;
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 20px;
   background-color:red;
}
.buttonok{
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%); /*gainsboro #DCDCDC graue farbe, schattiert von hell nach dunkel*/
   border-radius: 20px;
   width:150px;height:30px;
   text-align:center;
   cursor:pointer;
}
@media(max-width:480px){/*25.07.2024*/
  .buttonok, buttonokbunt{
    width:50px;height:30px;
  }
}
.buttonok:hover{
  background-image: linear-gradient(to top, #bbbbbb 0%, white 90%); /*12.06.2024 bisschen dunkler werden*/
}
/* alles wie bei outline, für Eingaben  */
/*input:focus{outline:none;background-color:#eeeeee;}*/
input:focus{outline:none;background-color:#EBF6DC;}/* versuch mit hellgrün*/
select{outline:none;background-color:white;}
select:focus{outline:none;background-color:#EBF6DC;}/* 10.08.2024 */
input[type=checkbox]:hover{background-color:#EBF6DC;}/* 11.08.2024  so geht's! */

textarea:focus{outline:none;background-color:#EBF6DC;}/*war #eeeeee, aber warum nicht überall hellgrün? 27.01.2025 sonst mal grau, mal grün!!  sonst evtl andere class machen*/

/* hellgrau und dunkler grau wie bei button */
/* nur für kontakt_extern*/
.xi{font-family:arial;font-size:1em;background-color:#fefefe;padding:.5em;width:90%;}/*11.06.2024*/
.xi0{font-family:arial;font-size:1em;background-color:#fefefe;padding:.5em;}/* 24.07.2024 */
.xi1{font-family:courier;font-size:1em;background-color:#fefefe;padding:.5em;width:90%;height:5em;}/*11.06.2024*/
.xi2{font-family:verdana;font-size:1em;background-color:#fefefe;padding:.5em;width:90%;height:2em;}/* 01.02.2025 für textarea lektionstext zb*/

.i{font-family:arial;font-size:1em;padding:.5em;}/*17.03.2025*/
.iv, .iv1{font-family:verdana;font-size:1em;padding:.8em;width:80%;}/*18.03.2025 für user_efassen*/
@media(max-width:480px){/*26.06.2025*/
  .iv1{font-family:verdana;font-size:.8em;padding:.2em;width:90%;}
}

header {grid-area:header; text-align:center;margin:0 auto;width:100%;vertical-align:top;
/*background-color:#ffaa00;/*#E8F5FB;*/
/*opacity:0.9;filter: alpha(opacity=90);*/
/*display:flex;*/
}
/*header1 { background-color:#F6bbbb; grid-area:header1; justify-items:center; width:100%;vertical-align:top;}*/
/* grün aside1 {background-color:#D8F229;grid-area:aside;line-height:1.2;*/

aside{background-color:#D1EAD2;grid-area:aside;line-height:1.2;/*18.06.2025 aside helleres grün*/
  padding-left:1em;
  padding-right:1em;/*18.06.2025*/
  text-align:left;/*28.03.2025 versuch */
}

.aside2{/*18.06.2025*/
  padding-left:0;margin-left:0;
}


@media (max-width:768px){/*05.06.2024 war 480*/
  .description{
    display:none;
  }
}

/* grün main { background-color:#E9F696;  grid-area:main; padding:1em;*/

/*main { background-color:#C9E4E4;  grid-area:main; padding:1em; /*blau*/

main{grid-area:main; padding:1em;background-color:#D2E4E4; /* .main hellblau*/
  /* nein, ist in class=main4 text-align:left;/*28.03.2025 versuch*/
  /*opacity:0.9;filter: alpha(opacity=90);*/
  /*z-index:-1;17.05.2024'/
  /*scroll-top:100px;versuch 14.05.2024*/
  /*width:100%;*/
/*z-index:0; 30.04.2024  filter: alpha(opacity=90); */
} /*ganz hellgrün */


.main1{/* 14.08.2024*/
  grid-area:main;padding:1em;
  display:table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.main2{background-color:#D2E4E4;display:table-cell;text-align:center;}/* 14.08.2024*/
.main3{grid-area:main;text-align:center;padding:0;}/* 20.09.2024 versuch ohne bgcolor für Spiel 5*/
.main4{grid-area:main; padding:1em;background-color:#D2E4E4;
  text-align:left;/*28.03.2025 für abfragen_ue1*/
}
.main5{background-color:transparent;grid-area:main;text-align:center;padding:0;}/*28.03.2025 für user_erfassen*/
/*14.01.2025 für langdogprogramme mit bodye mit 100%*/
.mainx{width:70%;margin:0 auto;
      font-family:verdana;font-size:1em;
      /*background-color:#1c64b2; versuch mit dunkelblau*/

}
@media(max-width:850px){
  .mainx{width:100%;};
}

@media(min-width:851px) and (max-width:1399px){
  .mainx{width:90%;}
}
.table{ /* 15.01.2025 table simulieren*/
   margin-left: auto;
   margin-right: auto;
   display: table;
   line-height:1.5;/*15.01.2025*/
   padding:2px;/*15.01.2025*/
}
.table-row {display: table-row; }/* 15.01.2025 table simulieren*/
.table-cell {display: table-cell;}/* 15.01.2025 table simulieren*/

.table-cell1 {display: table-cell;text-align:center;}/* 28.03.2025 table simulieren für abfragen*/
.table1{/* test in schautafel_eingeben*/
  width:100%;border:1em solid #ffffff;/* nur test */
  background-color:#ffffff;
  /*display:block;16.01.2025 für schautafel_start versuch macht keinen unterschied*/
}
.table2{/*27.02.2025 für links in starten2 etwas eingerückt*/
  padding-left:60px;text-align:left;
}
.table3{/*16.03.2025 für Vorschlag in starten2*/
  height:110px;text-align:center;width:100%;
}
.table4{/*28.04.2025 für starten1 mit width:100% bei smartphone */
  width:80%;/* 05.05.2025 mal so bei pc*/
}
.table5{/*28.04.2025 woerter_uebersicht ohne bei smartph*/
  padding-left:10px;
}
.table6{/*30.04.2025 spiel19 width500px oder 100%*/
  width:500px;
}
.table32{/*11.05.2025 Spiel32 300px oder 100%*/
  width:300px;
}

.td2{/*27.02.2025 für starten2 überschriften auswahlmöglichkeiten*/
  padding-left:30px;text-align:left;width:100%;
}
.td3{/*27.02.2025 avatar PunkteKontostandU*/
  padding-left:10px;padding-right:10px;text-align:center;
}
.td4{/*02.03.2025 vor Icons40*/
  padding-top:20px;padding-bottom:20px;text-align:center;
}
.td5{/*02.03.2025 letztes und nächstes kapitel bei woerter_uebersicht wenn text*/
  width:200px;height:200px;
  text-align:left;
  border:1px solid #a0a0a0;
}
.td5a{/*14.03.2025 letztes und nächstes kapitel bei woerter_uebersicht wenn text*/
  height:150px;
  text-align:left;
  border:1px solid #a0a0a0;
}
.td6{/*04.03.2025 letztes und nächstes Kapitel*/
  padding-left:15px;padding-right:15px;text-align:center;vertical-align:top;
}
.td7{/*04.03.2025 überschriften gruppe*/
  padding-top:20px;padding-bottom:20px;padding-left:10px;
}
.tdok2, .tdh100{/*28.04.2025 bei OK2 height:100px;bei smartphone padding-top und bottom */
  height:100px;
}
.tdsoz{/*06.05.2025 sonderzeichenkasten*/
  max-width:300px;
}
.bui{/*10.03.2025 button bei ok2*/
  width:150px;height:30px;
}
.bui1{/*10.03.2025 button bei ok2 wenn kein reset*/
  width:150px;height:30px;
}

.weiter4m{/*04.03.2025 für Pfeil nach unten bei woerter_uebersicht*/
  border-top:10px;
  border-botton:10px;
  border-left:16px;
  border-right:16px;
  border-color:white;
  border-style:solid;
}
@media(max-width:480px){
  .table2{padding-left:10px;}
  .table3{height:70px;}/*16.03.2025*/
  .table4, .table6{width:100%;}/*30.04.2025,28.04.2025*/
  .table5{padding-left:unset;}/*28.04.2025 woerter_uebersicht*/
  .table32{width:100%;}/*11.05.2025 Spiel32 300px oder 100%*/

  .td2{padding-left:10px;}
  .td3{padding-left:2px;padding-right:2px;}
  .td4{padding-top:5px;padding-bottom:5px;}
  .td5{width:150px;height:150px;}
  .td5a{width:120px;height:120px;}/*bei woerter_uebersicht letztes und nächstes*/
  .td6{padding-left:2px;padding-right:2px;}
  .td7{padding-top:10px;padding-bottom:10px;padding-left:5px;}
  .tdok2{padding-top:10px;padding-bottom:10px;height:unset;}/*28.04.2025*/
  .tdh100{padding-top:15px;padding-bottom:15px;height:unset;}/*30.04.2025*/
  .tdsoz{max-width:200px;}/*06.05.2025 sonderzeichenkasten*/
  .weiter4m{
    border-top:2px;
    border-botton:2px;
    border-left:2px;
    border-right:2px;
  }
  .bui{/*10.03.2025*/
    width:50px;height:30px;
  }

}
@media(max-width:768px){/*17.01.2025*/
  .table1{
    border:0;
  }
}

.avatar1{/*27.02.2025 PunkteKontostandU*/
  font-family:Cambria;font-size:1.5em;text-align:center;
}
.avatar2{/*27.02.2025 PunkteKontostandU text sterne und punkte*/
  font-family:Cambria;font-size:2em;text-align:center;letter-spacing:10px;
}
.avatar3{/*27.02.2025 PunkteKontostandU*/
  font-family:Cambria;font-size:2em;text-align:center;
}
.avatarstern{
  width:24px;height:24px;
}
.avatarli{
  font-family:verdana;font-size:.8em;cursor:pointer;padding:.5em;
}
@media(max-width:480px){
  .avatar1{font-size:1.4em;line-height:1.2;}
  .avatar2{font-size:1.4em;letter-spacing:5px;}
  .avatar3{font-size:1.4em;}
  .avatarstern{width:16px;height:16px;}
  .avatarli{font-size:.8em;padding:.2em;
    overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:clip;width:100px;
  }
}


.spruk{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;}
.spruc{font-family:arial;font-size:1em;color:#1c64b2;}/*30.06.2025 mit arial wie c*/
.sprugm{font-family:verdana;font-size:1.2em;color:#1c64b2;line-height:1.5;}
.sprur{font-family:verdana;font-size:2em;color:#1c64b2;line-height:1.5;}
.spruk1{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1;}
.sprukbold{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;font-weight:bold;}

.sprachenabc2{font-size:1em;color:#1c64b2;font-family:verdana;}/* in sprache3*/
.sprukabfr{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;}
.sprukabfr1{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;}/* display none bei smartph*/

.trabfr1{/*20.03.2025  alternativ wechseld Zeile mit wörtern für abfragen*/
  background-color:#EcEfEf;/*27.03.2025 heller ! #E6EDED;*/
}
.trabfr2{/* 20.03.2025 alternativ wechseld Zeile mit wörtern für abfragen*/
  background-color:#EfEfEf;/*27.03.2025 bisschen heller*/
}
.trspiel16{/*23.03.2025 eine Zeile spiel16*/
  height:120px;
  padding-top:10px;
}
.tdspiel16{/*23.03.2025 erste spalte spiel16*/
  /*width:400px;test */
  border-style:solid;border-width:2px;
}
.tdspiel49{/*23.03.2025*/
  border-width:3px;border-style:dotted;
  vertical-align:top;
  text-align:center;
}
.table49{/*01.04.2025 damit nicht so viel platz am rand verloren geht*/
  border-collapse:collapse;
}
.table37{/*09.04.2025 width verschieden smartphone 100% sonst 600px*/
  width:600px;
}

.divspiel9{/*23.03.2025*/
  border-width:3px;border-style:solid;
  background-color:#ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media(max-width:480px){
  .trspiel16{/*23.03.2025 eine Zeile spiel16*/
    height:60px;
    padding-top:5px;
  }
  .tdspiel16{
    /*width:150px;*/
  }
  .tdspiel49{
    border-width:2px;/*01.04.2025 mit 1px doch mit 2px*/
  }
  .divspiel9{
    border-width:1px;
  }
  .table37{/*09.04.2025*/
    width:100%;/*12.05.2025*/
  }
}

.sprukrot{font-family:verdana;font-size:1em;color:#F6737B;line-height:1.5;}/* nur für extern*/
.sprukroti{font-family:verdana;font-size:1em;color:#ff0000;line-height:1.5;}/*intern fehlerme*/
.sprukrot1{font-family:verdana;font-size:1.5em;color:#F6737B;line-height:1.5;}/*abfragen_ue1*/
/* fehlermeldung ist link zurück zur aktuellen Auswahl*/
a.sprukrotili:link{font-family:verdana;font-size:1em;color:#ff0000;line-height:1.5;text-decoration:none;}
a.sprukrotili:visited{font-family:verdana;font-size:1em;color:#ff0000;line-height:1.5;text-decoration:none;}
a.sprukrotili:hover{font-family:verdana;font-size:1em;background-color:#ff0000;color:#ffffff;line-height:1.5;text-decoration:none;}
.sprukrotibold{font-family:verdana;font-size:1em;color:#ff0000;line-height:1.5;font-weight:bold;}/*intern fehlerme*/
.spruklilabold{font-family:verdana;font-size:1em;color:#A52FE7;line-height:1.5;font-weight:bold;}/* bei lektion sperre in lila*/

.sprukbittewarten{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;visibility:hidden;font-weight:bold;}
.sprukd{font-family:verdana;font-size:1em;color:#1c64b2;line-height:1.5;padding-top:1em;padding-bottom:1em;}/* 26.05.2024 für description mit padding*/

.spruka{font-family:verdana;font-size:1em;color:#1D710D;line-height:1.5;}/* alternativfarbe dugrün*/
.sprukkleiner{font-family:verdana;font-size:.8em;color:#1c64b2;line-height:1;}


.sprug3{font-family:verdana;font-size:1.5em;color:#1c64b2;line-height:1.5;}/* 18.03.2025 user_erfassen */
.sprug1, .sprug1a{font-family:verdana;font-size:1.5em;color:#1c64b2;line-height:1.5;}/*01.04.2025 sprug1a für user_erfassen mit änderung der farbe*/
a.sprug1li:link, a.sprug1li:visited{/*05.03.2025 für sagelinks in woerter_uebersicht*/
  font-family:verdana;font-size:1.5em;color:#1c64b2;line-height:1.5;text-decoration:none;
}
a.sprug1li:hover{
  font-family:verdana;font-size:1.5em;background-color:#1c64b2;color:#ffffff;
  line-height:1.5;text-decoration:none;
}

.sprug2{font-family:verdana;font-size:1.2em;color:#1c64b2;line-height:1.2;}/* kopf abfragen */
.sprug2abfr{font-family:verdana;font-size:1.2em;color:#1c64b2;line-height:1.2;}
.spruebaer{font-family:verdana;font-size:1.5em;color:#1c64b2;line-height:1.3;}/*war 20pt*/
.spruebaer1{font-family:verdana;font-size:1.5em;color:#05B6A0;line-height:1.3;
  padding-top:1em;}/*19.06.2025 padding-top war #60CABD 05.06.2024*/
.spruebaer2{font-family:verdana;font-size:1.5em;color:#F6737B;line-height:1.3;}
.spruebaer3{font-family:verdana;font-size:1.5em;color:#56918F;line-height:1.3;}

.spruebaer3bg{font-family:verdana;font-size:1.5em;color:#56918F;line-height:1.3;background-color:#BDDCDB}/* mit farblich passendem hellen bg für [ueb1]-Überschriften bei jobs*/
.sprufussball{font-family:verdana;font-size:1.5em;line-height:1.5;padding:1.5em 0 .5em 0;;color:#1c64b2;}



@media(max-width:480px){
  .sprug1, .sprug1a, .sprug3, .spru, .spruebaer1, .spruebaer2, .spruebaer3,  .sprufussball, .sprur{
    font-size:1.2em;
    line-height:1.2;
    /*background-color:#ff0000;04.06.2024 nur test*/
  }
  .sprukabfr, .spruk, .spruk1, .sprachenabc2, .kraenzchen, .basis{
    font-size:.8em;/* versuch überall spruk kleiner 02.06.2024*/
  }
  .sprukabfr1{display:none;}
  .sprug2abfr{font-size:1em;}


}
@media(max-width:768px){/*05.06.2024*/
  .sprug1, .sprug1a, .sprug3, .spru, .spruebaer1, .spruebaer2, .spruebaer3, , .sprufussball{
    font-size:1.3em;
    line-height:1.3;
    /*background-color:#ff0000;04.06.2024 nur test*/
  }
  .sprukabfr, .spruk, .sprachenabc2, .kraenzchen, .basis {font-size:.8em;}/* versuch überall spruk kleiner 02.06.2024*/
  .sprukabfr1{display:none;}
  .sprug2abfr{font-size:1em;}

  main{padding:.5em;}/*11.07.2024*/
}
@media(max-width:480px){/*28.04.2025*/
  main{padding:0.2em;}/*28.04.2025*/
}



/* für abfragen_ue1 auch in blau*/
a.frei:link{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}
a.frei:visited{font-family:verdana;font-size:1em;text-decoration:none;color:#1c64b2;}
a.frei:hover{font-family:verdana;font-size:1em;text-decoration:none;background-color:#1c64b2;color:white;}


/* liko für verteiler intern bei lektionen_start zb*/
a.liko:link{font-weight:bold;font-family:arial;font-size:1em;text-decoration:none;color:#1c64b2;padding:.5em;line-height:2;}
a.liko:visited{font-weight:bold;font-family:arial;font-size:1em;text-decoration:none;color:#1c64b2;padding:.5em;line-height:2;}
a.liko:hover{font-weight:bold;font-family:arial;font-size:1em;text-decoration:none;background-color:#0F529B;color:#E8F5FB;padding:.5em;line-height:2;}/* dunkerblau auf hellblau*/

/* likoklein für verteiler intern bei lektionen_start zb in klein*/
a.likoklein:link{font-family:arial;font-size:.8em;text-decoration:none;color:#1c64b2;padding:.5em;}
a.likoklein:visited{font-family:arial;font-size:.8em;text-decoration:none;color:#1c64b2;padding:.5em;}
a.likoklein:hover{font-family:arial;font-size:.8em;text-decoration:none;background-color:#0F529B;color:#E8F5FB;padding:.5em;}/* dunkerblau auf hellblau*/


/* liza für verteiler intern bei fuesse_start zb*/
a.liza:link{font-family:verdana;font-size:.8em;text-decoration:none;color:#1c64b2;padding:.5em;line-height:2;}
a.liza:visited{font-family:verdana;font-size:.8em;text-decoration:none;color:#1c64b2;padding:.5em;line-height:2;}
a.liza:hover{font-family:verdana;font-size:.8em;text-decoration:none;background-color:#0F529B;color:#E8F5FB;padding:.5em;line-height:2;}/* dunkerblau auf hellblau*/
.nichtfrei{font-family:verdana;font-size:1em;color:#a0a0a0;}

@media(max-width:480px){
  a.liko:link, a.liko:visited, a.liko:hover,
  .nichtliza, a.liza:link, a.liza:visited, a.liza:hover{

    line-height:1.2;
    padding:.2em;
  }
}
@media(max-width:768px){
  .nichtfrei, a.frei:link, a.frei:visited, a.frei:hover,
  a.kraenzchenli:link, a.kraenzchenli:visited, a.kraenzchenli:hover{
    /*18.03.2025font-size:.8em;*/
  }
}


.sakabild{width:50px;float:left;margin-right:1em;
        border-color:#a0a0a0;border-style:solid;border-width:1px;
}
.kopfbild{width:200px;float:left;margin-right:1em;
  border-color:#a0a0a0;border-style:solid;border-width:1px;
}


.kopfbildgross{width:500px;float:left;margin-right:1em;
  border-color:#a0a0a0;border-style:solid;border-width:1px;
}
.wortbild{width:100px;border-color:#a0a0a0;border-style:solid;border-width:1px;}

.bildwk{width:120px;border:1px solid #a0a0a0;}/* woerterkopf schautafel und saka kopf 18.01.2025 */


@media(max-width:768px){
  .kopfbild{width:100px;}
  .kopfbildgross{width:100%;}
  .wortbild{width:50px;}
  .bildwk{width:80px;}/*18.01.2025*/
}

.bildgeschichte{width:200px;float:left;margin-right:1em;
  margin:0 1.5em 1em 0;
  box-shadow:.6em .6em .6em grey;
}
.bildgeschichtew{width:200px;box-shadow:.6em .6em .6em grey;}
.bildgeschichteh{height:200px;box-shadow:.6em .6em .6em grey;}



@media (max-width:480px){
  .bildgeschichte, .bildgeschichtew{width:100px;}
  .bildgeschichteh{height:100px;}
}

.platz0{/*23.02.2025 ohne bgbild rätselnr gelöste Rätsel; color u border über PlatzDrucken*/
  font-size:60px;font-weight:bold;font-family:arial rounded MT bold;height:70px;
}
.platz1{/*23.02.2025 mit bgbild rätselnr gelöste Rätsel*/
  text-align:center;vertical-align:middle;height:70px;
}
.platz1z{/*23.02.2025 für ziffernbild*/
  width:31px;height:42px;padding-left:5px;padding-right:5px;
}
@media (max-width:480px){
  .platz0{/*23.02.2025 ohne bgbild rätselnr gelöste Rätsel; color u border über PlatzDrucken*/
    font-size:30px;font-weight:bold;font-family:arial rounded MT bold;height:35px;
  }
  .platz1{/*23.02.2025 mit bgbild rätselnr gelöste Rätsel*/
    text-align:center;vertical-align:middle;height:35px;
  }
  .platz1z{/*23.02.2025 für ziffernbild*/
    width:15px;height:21px;padding-left:2px;padding-right:2px;
  }
}


.ulkapitel{margin:0;padding:0;padding-top:1em;display:block;list-style:none;}/* 23.06.2025 list_style:none; 19.06.2025 mit padding-top statt br list-style:none;*/
.ulkapitelli{
  margin:0;
  padding:0;
  display: flow-root;
}

.ulkapitel li::before{/* 23.06.2025 doch auch für links unten in abfragen */
    content: "\A ";
    white-space: pre;
}

.ulkapitelli::before{
    content: "\A ";
    white-space: pre;
}

.xulkapitel::after{/*15.06.2025 mal weglassen 04.06.2024 mal probieren */
    content: "\A ";
    white-space: pre;
}
.dreieckD2E4E4{background-color:#D2E4E4;}/* auf hellblau*/
.dreieckhellblau{background-color:#D2E4E4;}/* auf hellblauem main bg*/
.dreieckrosa{background-color:#F9C9CC;}/* auf rosa */
.dreieckblau{background-color:#1c64b2;}/* blaues dreieck auf weiß mit "bunt"*/


.lsfussball{background-color:#9ec31d;}
.ls{background-color:#1c64b2;}/* lautsprecher bunt*/



@media (min-width:481px){
  .footer {text-align:center;/*display:block;*/
    /*background: url(zutaten/hunde2/hundE8F5FAi.jpg);*/

    background-color:#E8F5FB;
    opacity:0.8;filter: alpha(opacity=80);
    grid-area:footer;margin:0 auto;width:100%;
    /*z-index:-1;*/
  }

}



@media(max-width:480px){
  .footer{
     background: url(zutaten/hunde2/hundE8F5FAi.jpg);
     grid-area:footer;margin:0 auto;width:100%;
  }
  .footer1{
    background-color:#E8F5FB;
    opacity:0.8;filter: alpha(opacity=80);
  }
}
.footeri{/* 14.08.2024*/

  display:table;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


.footeri2{/* rahmen für "So könnte es auch weitergehen usw*/
  background-color:#BDD8D7;/* 17.01.2025 bisschen dunkler als vorher #CDE1E0;*/
  padding:1em;
  /*21.03.2025display:table-cell;text-align:center;*/
  border:1px solid #56918F;
  width:90%;max-width:600px;/*21.03.2025*/
}
.text{/*10.07.2024*/
  color:#202020;font-family:verdana;font-size:.8em;padding-left:.4em;
}
/* für footer links zu programmen, die man schon gemacht hat*/
a.blu2i:link{text-decoration:none;color:#56918F;padding:.5em;line-height:2;}
a.blu2i:visited{text-decoration:none;color:#56918F;padding:.5em;line-height:2;}
a.blu2i:hover{text-decoration:none;background-color:#56918F;color:#E6EFEF;padding:.5em;line-height:2;}/* dunkerblau auf hellblau*/

.faceb{width:20px;height:20px;}/*10.07.2024 für bild*/
.facet{/* 10.07.2024 für text Besuche...*/
  color:#3B579D;font-size:.8em;font-family:verdana;
}
/* faceli erst mal noch nicht
    $fbcol="#3B579D";//facebookblau 15.12.2018
    $fbcolhell=GanzHell($fbcol,$tp);
    $fbcoldunkel=FarbeZiemlichDunkel($fbcol,400,$tp);
    echo".facebook {font-family:arial;font-size:10px;color:$fbcol;}$zz";//text für facebooklinks 14.04.2015; 17.06.2015 background-color:#ffffff nützt nichts bei "du empfielst das probieren mit bg weiß (bei index sieht man nichts!)
    if(!$tp[253]){
      $x="font-family:arial;font-size:10px;text-decoration:none;";
      echo"a.facebookli:link{".$x."color:$fbcol;}$zz";
      echo"a.facebookli:visited{".$x."color:$fbcol;}$zz";
      echo"a.facebookli:hover{".$x."color:$fbcolhell;background-color:$fbcoldunkel;}$zz";
*/

.ulsprachenabc{list-style:none;margin:0;padding:0;}/* kein punkt */
.ulsprachenabc li{
  margin:0;
  padding:0;
}

.ulsprachenabc li::after{/*19.05.2024 5 zeilenumbrüche*/
    content: "\A \A \A \A ";/*\A \A \A";*/
    white-space: pre;
}
@media(max-width:480px){/*19.05.2024 weniger bei smartphone*/
  .ulsprachenabc li::after{
      content: "\A \A \A ";/*\A \A";*/
      white-space: pre;
  }
}


.footertabelle0{
  display:flex;align-items: center;justify-content:center;/* so bekomme ich den fuß mit center hin!*/
  /*background-color:#ffff00; test */
}
/*
@media(max-width:480px){
  .footertabelle0{
    opacity:0.6;filter: alpha(opacity=60);
    background: url(zutaten/hunde2/hundE7E2CE.jpg);für test anderws
  }
}
*/

.footertabelle{

  /*background-color:#ffffaa; test */
  width:max-content;
  /* test background-color:#ffff00;*/
  display:grid;
  gap:1em;
  grid-template-columns: max-content;
  /*grid-template-columns:150px;*/
  /*align-items: center;*/
  grid-template-areas:
    "werbe werbe werbe werbe"
    " f11 f12 f13 f14 "/* home usw */
    " beiall beiall beiall beiall "
    " f21 f22 f23 f24 ";/* sprachen*/
}
@media (max-width:768px){/*war 480 05.06.2024 */
  .footertabelle{
  grid-template-areas:
    "werbe werbe"
    " f11 f12 "
    " f13 f14 "/* home usw */
    " beiall beiall "
    " f21 f22 "
    " f23 f24 ";/* sprachen*/
  }
}

.werbe{grid-area:werbe;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.f11{grid-area:f11;text-align:left;}
.f12{grid-area:f12;text-align:left;}
.f13{grid-area:f13;text-align:left;}
.f14{grid-area:f14;text-align:left;}
.beiall{grid-area:beiall;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.f21{grid-area:f21;text-align:left;}
.f22{grid-area:f22;text-align:left;}
.f23{grid-area:f23;text-align:left;}
.f24{grid-area:f24;text-align:left;}
.leer{}
@media(min-width:1024px){/* 24.06.2024 auch bei tablet mit leer*/
  .leer{display:none;}
}


@media(max-width:768px){/*war 480 05.06.2024 */
  .beiall, .werbe{
    max-width:350px;
  }


  /* versuch so Leerzeile bei untenlinks  geht so nicht
  .f21:nth-child(1)::after{
      content: "\A lalalalal";
      white-space: pre;
  }
  */
}

.ganzunten{/*21.07.2024 versuch, dass unten noch ein bisschen leer ist*/
  height:200px;
}
.nz50{/*12.08.2024 abstand*/
  height:50px;
}



/* link unten für grin f11-f24*/
a.lu1:link{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#1c64b2;}
a.lu1:visited{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#1c64b2;}
a.lu1:hover{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#c0c0c0;background-color:#125aa8;}
/* weihnachten $fweihnachten="#bd4043";Farbe ist rot */
a.lu2:link{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#bd4043;}
a.lu2:visited{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#bd4043;}
a.lu2:hover{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#c0c0c0;background-color:#bd4043;}
/* fussball $ffussball="#85A809";Farbe ist grün */
a.lu3:link{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#85A809;}
a.lu3:visited{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#85A809;}
a.lu3:hover{font-family:verdana;font-size:14px;text-decoration:none;
      padding-left:20px;padding-right:20px;color:#c0c0c0;background-color:#6D8A06;}

/* 07.06.2024 eine leerzeile mehr bei Links unten      geht so nicht
@media{max-width:768px){
  a.lu1:link, a.lu1:visited, a.lu1.hover,
  a.lu2:link, a.lu2:visited, a.lu2.hover,
  a.lu3:link, a.lu3:visited, a.lu3.hover{
    ::after{
      content: "\A ";
      white-space: pre;
    }
  }
}
*/

.klu {font-family:verdana;font-size:14px;text-decoration:none;padding-left:20px;padding-right:20px; color:#1c64b2;}
.klua{font-family:verdana;font-size:14px;text-decoration:none;padding-left:20px;padding-right:20px; color:#1c64b2;font-weight:bold;}
.klua3{font-family:verdana;font-size:14px;text-decoration:none;padding-left:20px;padding-right:20px; color:#85A809;font-weight:bold;}/* bei fussball aktuell*/
.lu2bild{padding-left:20px;vertical-align:top}
.klub{font-family:verdana;font-size:14px;text-decoration:none;padding-left:20px;padding-right:20px; color:#1D710D;}


/*
werbespruch{grid-area:werbespruch;background-color:#ffff00;color:#00ff00;padding-top:3em;}
links1{grid-area:links1;background-color:#a0a0a0;padding-top:3em;}
links2{grid-area:links2;background-color:#c0c0c0;padding-top:3em;}
*/

/*$baerenfarben=array("#60CABD","#F6737B","#56918F");//13.04.2021 erster bär dunkler*/
/* blau standard ist #60CABD wie hund */
/*21.05.2024*/
h1, h2, h3, h4{/* sonst h1 zu groß!*/
  color:#1c64b2;vertical-align:top;font-family:verdana;font-size:1em;font-weight:normal;
}
.rtl{direction:rtl;}/* für ar fa he */
.bgblau{background-color:#E8F5FB;padding:.5em;}/*display:block;justify-content:center;width:max-content;align:center;text-align:center;*/

.werbeteil1{color:#1c64b2;vertical-align:top;font-family:verdana;font-size:2em; }/* wie hund */
/*.werbeteil1g{color:#1c64b2;vertical-align:top;font-family:verdana;font-size:2.5em; }*/


/*text-shadow: 1px 2px 4px #333;*/
/* nicht
.werbeteil5o{color:#60CABD; vertical-align:top;font-family:verdana;font-size:2em;}
.werbeteil6o{color:#F6737B; vertical-align:top;font-family:verdana;font-size:2em;}
.werbeteil7o{color:#56918F; vertical-align:top;font-family:verdana;font-size:2em;}
*/


.werbeteil5{color:#60CABD;vertical-align:top;font-family:verdana;font-size:1.5em;}
.werbeteil5a{color:#60CABD;font-family:verdana;font-size:1.5em;}/* anmeldenimhund*/
.werbeteil6{color:#F6737B;vertical-align:top;font-family:verdana;font-size:1.5em;}
.werbeteil7{color:#56918F;vertical-align:top;font-family:verdana;font-size:1.5em;}
.werbeteil7a{color:#56918F;font-family:verdana;font-size:1.5em;}/* anmeldenimhund vertical-align:baseline;*/
.werbeteil7ae{color:#56918F;font-family:verdana;font-size:1.5em;}/*schon eingeloggt*/

.werbeteil7ar{color:#56918F;vertical-align:top;font-family:verdana;font-size:2em;}
.werbeteil7he{color:#56918F;vertical-align:top;font-family:arial;font-size:2em;}
.werbeteilfussball{color:#9ec31d;vertical-align:top;font-family:verdana;font-size:2em;}
/*.farbenfussball{color:#9ec31d;background-color:#e6f0c6;}*/
/* für werbespruch  unten*/
.werbeteil5u{color:#05B6A0;vertical-align:top;font-family:verdana;font-size:14px;text-transform: uppercase;}
.werbeteil6u{color:#F6737B;vertical-align:top;font-family:verdana;font-size:14px;text-transform: uppercase;}
.werbeteil7u{color:#56918F;vertical-align:top;font-family:verdana;font-size:14px;text-transform: uppercase;}

/*17.05.2024 zahlen nicht als bild, sondern als Text*/
.werbeteil5z{color:#05B6A0;vertical-align:top;font-family:arial;
   font-size:6em;margin-right:.5em;margin-left:.2em;
}
.werbeteil6z{color:#F6737B;vertical-align:top;font-family:arial;
   font-size:6em;margin-right:.5em;margin-left:.2em;
}
.werbeteil7z{color:#56918F;vertical-align:top;font-family:arial;
   font-size:6em;margin-right:.5em;margin-left:.2em;
}


.werbeteil1k{color:#1c64b2;vertical-align:top;font-family:verdana;font-size:1em;line-height:1.5;}
/*.werbeteil5k{color:#13BDA8;vertical-align:top;font-family:verdana;font-size:1em;line-height:1.5;}*/
.werbeteil5k{color:#05B6A0;vertical-align:top;font-family:verdana;font-size:1em;line-height:1.5;padding-bottom:1em;}
.werbeteil5ka{color:#1c64b2;vertical-align:top;font-family:verdana;font-size:1em;
  line-height:1.5;}/* background-color:#E9F2AD;*/
.werbeteil6k{color:#F6737B;vertical-align:top;font-family:verdana;font-size:1em;line-height:1.5;}
.werbeteil6k1{color:#F6737B;font-family:verdana;font-size:.8em;line-height:.8;}/*vertical-align:baseline;*/
.werbeteil6k1e{color:#F6737B;font-family:verdana;font-size:.8em;line-height:.8;}
.werbeteil7k{color:#56918F;vertical-align:top;font-family:verdana;font-size:1em;line-height:1.5;}


@media(max-width:1110px){/* 24.06.2024 für anmelden im Hund */
  .werbeteil5a, .werbeteil7a{
    font-size:1.2em;
  }


}
@media(max-width:1270px){/* 24.06.2024 für anmelden im Hund */

  .werbeteil7ae, .werbeteil6k1e{
    display:none;

  }

}

.sprachenabc1{font-size:1.5em;color:#1c64b2;font-family:verdana;}/* willst du .. in fremdspr*/
.sprachenabc1ar{font-size:2em;color:#1c64b2;font-family:verdana;}/* willst du .. in ar,fa*/
.sprachenabc1he{font-size:1.5em;color:#1c64b2;font-family:arial;}/* willst du .. in he*/
.sprachenabc1de{font-size:1.5em;color:#1c64b2;font-family:verdana;}/* willst du ... lernen*/

.sprachenabc3{font-size:.8em;color:#1c64b2;font-family:verdana;}/* das heißt */

.sprache{font-size:1em;color:black;font-family:arial;background-color:#E6EDED;padding:0 .5em 0 0.5em;}
/* kein bg hier bei sprache damit ganze Zeile geändert werden kann*/
/*background-color:#E6EDED;*/
.sprache1{
  font-size:1em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:left;
}
.sprache1gross{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:left;font-weight:bold;
}
.sprachehegross{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;font-weight:bold;
}
.sprachezhgross{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;
}

.spracheargross{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;
}

/*22.02.2025 g1=gross,g2=mittel,g3=klein zb für geschichte_zeigen*/
.sprache1g1{
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:left;
}
.spracheheg1{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;direction:rtl;
}
.sprachezhg1{/*14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;
}

.sprachearg1, .sprachearg2, .sprachearg2a{/*22.05.2025 g2 wie g1 14.02.2025 zb für abfragen_lernen*/
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;direction:rtl;
}


.sprache1g2, .sprache1g2a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.5em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:left;
}
.spracheheg2, .spracheheg2a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.5em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;direction:rtl;
}
.sprachezhg2, .sprachezhg2a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.5em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;
}


.sprache1g3, .sprache1g3a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.2em;color:black;font-family:arial;
  text-align:left;
}
.spracheheg3, .spracheheg3a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.3em;color:black;font-family:arial;/* mit 1.3*/
  text-align:right;direction:rtl;
}
.sprachezhg3, .sprachezhg3a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.2em;color:black;font-family:arial;

}

.sprachearg3, .sprachearg3a{/*14.02.2025 zb für abfragen_lernen*/
  font-size:1.65em;color:black;font-family:arial;/*27.06.2025 mit 1.65em statt 1.5 22.05.2025 mit 1.5 statt 1.2*/
  text-align:right;direction:rtl;
}

.sprache1g5{/*26.03.2025 ganz kleine unterschrift unter blöcke bei spiel1 22.05.2025 und spiel9*/
  font-size:.8em;color:black;font-family:arial;
  text-align:left;
}
.spracheheg5{/*26.03.2025*/
  font-size:.8em;color:black;font-family:arial;
  text-align:right;direction:rtl;
}

.sprachearg5{/*26.03.2025*/
  font-size:1em;color:black;font-family:arial;/*22.05.2025 hier 1em statt .8*/
  text-align:right;direction:rtl;
}

@media(max-width:480px){/*14.02.2025*/
  .sprache1gross{font-size:1em;font-weight:normal;}
  .sprachehegross{font-size:1.2em;font-weight:normal;}
  .spracheargross{font-size:1.2em;font-weight:normal;}
  .sprache1g1, .sprachearg1, .spracheheg1{font-size:1.35em;}
  .sprache1g2, .sprachearg2, .spracheheg2{font-size:1.2em;}
  .sprache1g2a, .sprachearg2a, .spracheheg2a{font-size:1em;}/**01.04.2025 bei abfr49*/
  .sprache1g3, .sprachearg3, .spracheheg3{font-size:1em;}
  .sprache1g3a, .sprachearg3a, .spracheheg3a{font-size:.8em;}/* 29.03.2025*/
}



.sprache1i{/*02.02.2025 für eingabe*/
  font-size:1em;color:black;font-family:arial;padding:.5em .5em .5em 0.5em;
  line-height:1.5;text-align:left;
  width:80%;height:2em;/*02.02.2025 versuch*/
  /*min-width:150px;03.02.2025*/
}

.sprachehe{
  font-size:1.5em;color:black;font-family:arial;direction:rtl;padding:.2em .2em .2em .2em;
  line-height:1.2;text-align:right;
}

.sprachehei{/*07.02.2025 für eingabe fast wie sprache1i */
  font-size:1em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  line-height:1.5;text-align:right;
  width:80%;height:2em;
}

.spracheari{/*07.02.2025 für eingabe fast wie sprache1i */
  font-size:2em;color:black;font-family:arial;padding:.5em .5em .5em .5em;
  text-align:right;
  width:80%;height:2em;
}

.sprache1f{font-size:1em;color:black;font-family:arial;background-color:#e6f0c6;padding:.5em .5em .5em 0.5em;line-height:1.5;}/* fussball mit hell grünem bg */
.sprachear{font-size:2em;color:black;font-family:arial;direction:rtl;padding:.5em .5em .5em .5em;text-align:right;}

.sprachearf{font-size:2em;color:black;font-family:arial;direction:rtl;background-color:#e6f0c6;padding:0 .5em 0 0.5em;}/* fussball mit hell grünem bg */


.sprachezh{font-size:1.5em;color:black;font-family:arial;padding:0 .5em 0 0.5em;}


/*04.09.2024 mit a ohne lineheight und padding */
.sprache1a{font-size:1em;color:black;font-family:arial;text-align:left;}
.spracheara{font-size:2em;color:black;font-family:arial;direction:rtl;text-align:right;}
.sprachehea{font-size:1.5em;color:black;font-family:arial;direction:rtl;text-align:right;}
.sprachezha{font-size:1.5em;color:black;font-family:arial;text-align:left;}



/* wenn untereinander mit mo mit border-bottom*/
.sprache1mo{font-size:1em;color:black;font-family:arial;background-color:#E6EDED;padding:.2em .2em .2em 0.2em;line-height:1.5;border-bottom: .1em solid #D2E4E4;}/* fussball mit hell grauem bg */
.sprachearmo{font-size:2em;color:black;font-family:arial;direction:rtl;background-color:#E6EDED;padding:0 .2em 0 0.2em;border-bottom: .1em solid #D2E4E4;}
.sprachehemo{font-size:1.5em;color:black;font-family:arial;direction:rtl;background-color:#E6EDED;padding:.2em .2em .2em .2em;border-bottom: .1em solid #D2E4E4;}

/* wenn untereinander lernsprache etwas eingerückt und etwas heller war EaEfEf 09.06.2024 jetzt EcEfEf*/
.sprache1mox{font-size:1em;color:black;font-family:arial;background-color:#EcEfEf;padding:.2em .2em .2em 1em;line-height:1.5;border-bottom: .5em solid #D2E4E4;}/* fussball mit hell grauem bg */
.sprachearmox{font-size:2em;color:black;font-family:arial;direction:rtl;background-color:#EcEfEf;padding:0 .2em 0 0.2em;border-bottom: .5em solid #D2E4E4;}
.sprachehemox{font-size:1.5em;color:black;font-family:arial;direction:rtl;background-color:#EcEfEf;padding:.2em .2em .2em 1em;border-bottom: .5em solid #D2E4E4;}


@media(max-width:480px){/* ar kleiner  wenn handy*/
  .sprachear, .sprachearmo, .sprachearmox,  .sprachehemo, .sprachehemox{
    font-size:1.3em;
  }
  .sprache1{/*01.03.2025*/
    font-size:.8em;
  }
  .sprachehe{/*01.03.2025*/
    font-size:1em;
  }
}

@media(max-width:768px){/* ar kleiner  wenn tablet hoch*/
  .sprachear, .sprachearmo, .sprachearmox{
    font-size:1.6em;
  }
}


/*
@media {max-width:769px){
  .sprache1mo, .sprachearmo, .sprachehemo,
  .sprache1mox, .sprachearmox, .sprachehemox{
    display:none;
  }
}
*/

.bem0{font-family:arial;font-size:1.3em;color:#1c64b2;font-weight:bold;}/*normale sprache*/
.bemar{font-family:arial;font-size:2em;color:#1c64b2;}


.graugross{font-family:verdana;font-size:1em;color:#a0a0a0;padding:0 .5em 0 0.5em;text-align:center;align-items:center;}/*21.03.2025 align-items*/
@media (max-width:480px){/*20.03.2025*/
  .graugross{font-family:verdana;font-size:.8em;color:#a0a0a0;padding:0 .2em 0 0.2em;}
}

.img1{margin-right:20px;margin-top:5px;float:left;}/* aus styledef standard*/


.imglaender{margin-right:2em;margin-top:.5em;float:left;width:152px;height:102px;cursor:pointer;}
.imgmenu{margin-right:2em;margin-top:.5em;float:left;height:100px;}/*15.03.2025 nur mit height*/



@media (max-width:768px){
  .imglaender{
    width:100px;height:66px;
    margin-right:1em;margin-top:.2em;float:left;
  }
  .imgmenu{
    height:66px;
    margin-right:1em;margin-top:.2em;float:left;
  }
}




/*.img1a{margin-right:2em;margin-top:.5em;margin-bottom:1.5em;float:left;} für sprachenabc bild */
.img1a{margin-right:2em;margin-top:.5em;float:left;width:100px;height:100px;}/* für bilder 100*100*/
.img1aa{width:100px;height:100px;}/* für bilder 100*100*/
.img1b{
  /* raus 04.01.2025 margin-right:1em;float:left;*/
  width:30px;height:30px;/* für kraenzchenbild und basisversion */
}

@media (max-width:480px){
  .img1a{
    width:66px;height:66px;
    margin-right:1em;margin-top:.2em;float:left;
  }
  .img1aa{width:50px;height:50px;}/*24.06.2025 mit 50 statt 66 spielbild überschrift spiel 37 zb*/
  .img1b{
    margin-right:.2em;
  }
}

.img2a{margin-right:2em;margin-top:.5em;float:left;width:184px;height:100px;}/* für bilder 184*100*/

@media (max-width:480px){
  .img2a{
    width:122px;height:66px;
    margin-right:1em;margin-top:.2em;float:left;
  }
}


.img3a{margin-right:2em;margin-top:.5em;float:left;width:135px;height:100px;}/* für bilder 135*100*/

@media (max-width:480px){
  .img3a{
    width:90px;height:66px;
    margin-right:1em;margin-top:.2em;float:left;
  }
}

.imgkopflink{width:46px;height:40px;}/*11.07.2024 für Kopflinks padding-right:2px;*/
.imgkopflink2{width:26px;height:38px;}/*15.03.2025 für 2. Sprache */
.imgkopflinkv{width:46px;height:40px;padding-right:5px;}


.anmelden1{padding:.5em;cursor:pointer;text-align:center;font-family:verdana;
                  color:#F0F7C1;background-color:#56918F;
                  font-family:verdana;font-size:2em;}
.anmelden1:hover{background-color:#60CABD;color:#416C6B;} /* geht das? */
.tabanm{width:90%;}/*18.03.2025*/

.dertest{
  background-color:#1c64b2;
  border: 1px solid #a0a0a0;/* braucht man das überhaupt?*/
  padding:1.5em;
}
.dertesttable{/*14.03.2025*/
  border: 2px solid #000000;
  padding:20px 50px 50px 50px;

}
.imgdertest{
  width:100px;height:100px;
}
.imgdertestende{
  width:446px;height:396px;
}
.imgdertestende1{/* für Aufgabe verbuchen*/
  height:98px;
  background-image:url(zutaten/dertest/weiter.jpg);
  color:#000000;
  cursor:pointer;
  padding-left:100px;
}
@media (max-width:480px){
  .dertest{
    padding:.2em;
  }
  .dertesttable{
    width:90%;/*14.03.2025*/
    padding:2px 5px 5px 5px;/*28.04.2025*/
  }
  .imgdertest{
    width:80px;height:80px;
  }
  .imgdertestende{
    /*width:300px;height:260px;*/
    width:100%;/* mal probieren 27.08.2024 */
  }
}


/*
@media (min-width:481px) and (max-width:1399px){
  .werbeteil1, .werbeteil5, .werbeteil6, .werbeteil7, .anmelden1, .sprachenabc1, .sprachenabc1de,  .werbeteil7he, .werbeteilfussball{
    font-size:1.3em;

  }

  .werbeteil5z, .werbeteil6z, .werbeteil7z{
    font-size:4em;

  }
}
*/

/*
@media (max-width:1400px){


  .werbeteil1, .werbeteil5, .werbeteil6, .werbeteil7, .anmelden1, .sprachenabc1, .sprachenabc1de, .werbeteil7he, .werbeteilfussball{
    font-size:1.5em;

  }

  .werbeteil5z, .werbeteil6z, .werbeteil7z{
    font-size:4em;

  }

}
*/

@media (max-width:480px){/*09.05.2024 nur TEst!*/
   /*img.img1a, img.img1{width:50%;height:auto;}*/

  .werbeteil1, .werbeteil5, .werbeteil6, .werbeteil7, .anmelden1, .sprachenabc1, .sprachenabc1de, .werbeteilfussball{
    font-size:1.2em;
    /*background-color:#ffaaaa;*/
  }
  .werbeteil7ar, .werbeteil7he, .bemar{
    font-size:1.6em;
  }
  .sprachenabc1ar{
    font-size:1.3em;
  }
  .werbeteil5z, .werbeteil6z, .werbeteil7z{/*04.06.2024*/
    font-size:2em;
    /*background-color:#ffaa00;*/
  }
  .werbeteil1k, werbeteil5k, werbeteil6k, werbeteil7k{ font-size:0.8em;padding:0;margin:0;}
}



@media (max-width:768px){/*05.06.2024 wie bei handy*/
   /*img.img1a, img.img1{width:50%;height:auto;}*/

  .werbeteil1, .werbeteil5, .werbeteil6, .werbeteil7, .anmelden1, .sprachenabc1, .sprachenabc1de, .werbeteil7he, .werbeteilfussball{
    font-size:1.2em;
    /*background-color:#ffaaaa;*/
  }
  .werbeteil7ar, .werbeteil7he, .bemar{
    font-size:1.6em;
  }
  .sprachenabc1ar{
    font-size:1.6em;
  }
  .werbeteil5z, .werbeteil6z, .werbeteil7z{/*04.06.2024*/
    font-size:2em;
    /*background-color:#ffaa00;*/
  }
  .werbeteil1k, werbeteil5k, werbeteil6k, werbeteil7k{ font-size:0.8em;padding:0;margin:0;}
}









.ueblock{
  align-items:center;/*17.05.2024*/
  background-color:white;
  padding:1em;/* war 2 */
  display:flex; /*macht block so groß wie ich es brauche*/

}
.uebi{/*09.07.2024 überschriftstext*/
  /*24.01.2025 padding:1em; war 2 */
  display:flex;
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:2em;
  background-color:#ffffff;/*15.01.2025 bei test schautafel_eingeben*/
  justify-content:center;/*15.01.2025*/
}

.uebia{/*01.03.2025  überschriftstext für kosten mit padding*/
  padding:1em;
  display:flex;
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:2em;
  background-color:#ffffff;/*15.01.2025 bei test schautafel_eingeben*/
  justify-content:center;/*15.01.2025*/

}

a.uebili:link{text-decoration:none;color:#1c64b2;font-size:1.5em;padding:.2em;line-height:1.5;}
a.uebili:visited{text-decoration:none;color:#1c64b2;font-size:1.5em;padding:.2em;line-height:1.5;}
a.uebili:hover{text-decoration:none;color:#1c64b2;font-size:1.5em;padding:.2em;background-color:#b0e6fa;line-height:1.5;}

/* 16.03.2025 für Vorschlag bei starten2*/
a.uebili2:link{text-decoration:none;color:#1c64b2;font-size:1.5em;padding:.2em;line-height:1.5;}
a.uebili2:visited{text-decoration:none;color:#1c64b2;font-size:1.5em;padding:.2em;line-height:1.5;}
a.uebili2:hover{text-decoration:none;color:#b0e6fa;;font-size:1.5em;padding:.2em;background-color:#1c64b2;line-height:1.5;}

.uebi4{/*24.01.2025 wie uebi aber unterstrichen
  /*24.01.2025 padding:1em; war 2 */
  display:flex;
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:2em;
  background-color:#ffffff;/*15.01.2025 bei test schautafel_eingeben*/
  justify-content:center;/*15.01.2025*/
  border-bottom:2px solid #1c64b2;
}
.uebi3{/*16.01.2025  überschriftstext wie uebi nur farbe und größe*/
  padding:1em;/* war 2 */
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:2em;
  border-top:10px solid #ffffff;/*19.01.2025*/
  border-bottom:10px solid #ffffff;/*19.01.2025*/
}
.uebi1{/*23.07.2024 überschrift 1 kleiner zb auswahl usw*/
  padding:.5em .5em .5em 1em;/* war 2 */
  display:flex;
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:1em;
  /*font-weight:bold;*/
}
.uebi2{/*09.08.2024 überschrift 2 ohne padding */
  display:flex;
  color:#1c64b2;/*blau*/
  font-family:verdana;
  font-size:1.2em;
  line-height:1.5;/*10.03.2025*/

}


/*06.03.2025 für Überschrift und Link zu sage bei woerter_uebersicht_w*/
a.uebi2li:link{font-family:verdana;text-decoration:none;color:#1c64b2;font-size:1.2em;
line-height:1.5;}
a.uebi2li:visited{font-family:verdana;text-decoration:none;color:#1c64b2;font-size:1.2em;line-height:1.5;}
a.uebi2li:hover{font-family:verdana;text-decoration:none;background-color:#1c64b2;color:#ffffff;font-size:1.2em;line-height:1.5;}

.uebi2a{/*02.02.2025 für info_zeigen [UEB}*/
  display:flex;
  color:#1c64b2;/*blau*/
  /*font-family:verdana;*/
  font-size:1.5em;
  /*font-weight:bold;*/
}
.ueflexi{/*09.07.2024 überschriftsblock*/
  align-items:center;/*17.05.2024*/
  justify-content:center;
  background-color:white;
  padding:1em;/* war 1 */
  display:flex; /*macht block so groß wie ich es brauche*/
  margin:1em;/* war 1*/
}
.ueflexi1{/*22.01.2025 soll in mitte von td zb bei woerter_anhoeren*/
  /*align-items:bottom;*/
  justify-content:center;
  /*background-color:white;*/
  /*padding:1em;*/
  display:flex; /*macht block so groß wie ich es brauche*/
  margin:.5em;
}

@media(max-width:480px){
  .uebi2, a.uebi2li:link, a.uebi2li:visited, a.uebi2li:hover{font-size:.8em;}
}
.komplettweiss{/*14.08.2024*/
  background-color:#ffffff;
  align-items:center;/*17.05.2024*/
  justify-content:center;
  padding:1em;/* war 2 */
  display:block; /*macht block so groß wie ich es brauche*/
  margin:1em;
}
@media(max-width:480px){/*15.08.2024*/
  .komplettweiss{
    padding:.2em;/* war 2 */
    display:block; /*macht block so groß wie ich es brauche*/
    margin:.2em;
  }
}
.ueblocki2{/*09.07.2024 überschriftsblock2, bei lektion_erfassen1*/
  background-color:#ffffff;
  padding:1em;/* war 2 */
  margin:0 auto;*/
  text-align:center;
  display:table;
  margin-left:auto;
  margin-right:auto;
}
.uebblocki22{/*14.08.2024 2. teil*/
  display:table-cell;
}

.vblocki{/*09.07.2024 für verteilerlinks bei menu-programmen*/
  align-items:center;/*17.05.2024*/
  background-color:white;
  padding:1em;/* war 2 */
  display:block; /*macht block so groß wie ich es brauche*/
  margin:1em;
  width:100%;/* 11.07.2024 */
}
@media (max-width:480px){/*11.07.2024*/
  .ueflexi, .vblocki{
    padding:.2em;
    margin:.2em;
  }
  .uebi{
    font-size:1.4em;
  }
  .uebia{
    font-size:1.4em;padding:.5em;
  }
  a.uebili:link, a.uebili:visited, a.uebili:hover{/*27.02.2025*/
    font-size:1.2em;padding:.2em;
  }
  a.uebili2:link, a.uebili2:visited, a.uebili2:hover{/*16.03.2025*/
    font-size:1.2em;padding:.2em;
  }
}





.ueblockabfr{/*01.06.2024*/
  align-items:center;/* 05.06.2024 top sei keine gültige Eigenschaft*/
  background-color:white;
  padding:1em;/* war 2 */
  display:flex; /*macht block so groß wie ich es brauche*/
  /*background-color:#ffff00;test*/
}
@media (max-width:480px){
  .ueblockabfr, .ueblock{
    padding:.5em;
  }
}
@media (max-width:900px){/*12.07.2024*/
   ueblocki{
    padding:.5em;
  }
}

.ueblockblock{
  align-items:center;/*17.05.2024*/
  background-color:white;
  padding:1em;/* war 2 */
  display:block; /*macht block so groß wie ich es brauche*/
  /*background-color:#ffff00;test*/
}
.ueblockanmelden{
  align-items:center;
  background-color:white;padding:1em;
  display:flex;/* macht block so groß wie ich es brauche*/
  cursor:pointer;/* bei click auf üb gehts auch gleich zu anmelden*/

}
.ueblockfussball{
  align-items:center;/*17.05.2024*/
  background-color:#e6f0c6;/*hellgruen*/
  padding:1em;/* war 2 */
  display:flex; /*macht block so groß wie ich es brauche*/
}
.ueblocksprachen{
  align-items:center;
  background-color:white;
  padding:1em;
  /*display:block;*/
  display:flex;
}


/* für lautsprecher */
a.libi:link{text-decoration:none;}
a.libi:visited{text-decoration:none; }
a.libi:hover{text-decoration:none;background-color:transparent;}

/*29.03.2025 sozei und taste für tastatur fb bei hover im Pgm machen*/
a.sozei:link, a.sozei:visited, a.sozei:hover{
  font-family:arial;font-size:1em;color:#a0a0a0;
  padding:.6em;line-height:1.3;/*06.05.2025 etwas kleiner , vorher 1em,2*/
  text-decoration:none;
}
.taste{/* hover über pgm*/
  text-align:center;vertical-align:middle;visibility:hidden;
  border-radius:3px;cursor:pointer;font-size:1.4em;
  font-family:arial;background-color:#f6f6f6;
}




.dritteln1, .idritteln1{
  width:62px;
  display:flex;vertical-align:top;
  justify-content: right;/*justify-content:left;*/
  align-items:baseline;
  flex:1 1 20%;
  /*background-color:yellow;*/
}

.dritteln1a{
  display:flex;
  column-gap:15px;justify-content:right;
  /*background-color:red;*/
}
.dritteln2, .idritteln2{
  width:186px;
  display:flex;align-items:center;justify-content:center;vertical-align:top;
  /*background-color:#ffff66;*/
  flex:1 1 60%;
  /*background-color:red;*/
}
.dritteln3, .idritteln3{
  /*width:62px;  04.06.2024 versuch username neben useravatar*/
  display:flex;
  /*justify-content:left;/*horizontal  11.07.2024 war right wegen avatar!*/
  /* 08.08.2024 align-items:baseline; bottom vertikal 05.06.2024 ??*/
  /*background-color:yellow;*/
  flex:1 1 20%;

}
.dritteln3a{
  display:flex;
  column-gap:15px;justify-content:left;
  /*background-color:blue;*/
}
@media (max-width:900px){
  .dritteln1a, .dritteln3a{
    column-gap:5px;
  }
}
.dritteln3b{
  display:flex;
  justify-content:right;
  /*background-color:green;*/
  width:100%;
}

@media (min-width:481px){/* nur für interne programme!*/
  .idritteln1, .idritteln3{
    flex:1 1 40%;
  }
  .idritteln2{
    flex:1 1 20%;
  }
}



.dreidrittel{
  width:100%;
  display:flex;
  /*background: url(zutaten/hunde2/hundE8F5FAi.jpg);*/
  /*opacity:0.9;filter: alpha(opacity=90);*/
  /*background-color:#56918F;padding:20px*/
  z-index:9996;
  background-color:#ffffff;
  position:fixed;
  left:0;
  top:0;
  border-bottom:1px solid #E8F5FB;

}
.dreidrittelu{
  width:100%;display:flex;
  /*background: url(zutaten/hunde2/hundE8F5FAi.jpg);*/


}
.avatari{
  vertical-align:top;/*float:left;*/
  /* position:fixed;scrolled nicht mit */


  /*width:52px;*/

  text-align:right;
  height:40px;
  margin:2px;
  visibility:hidden;/*  erst nach load per js visible machen */

}
.avatari0{
  /*width:78px; //04.06.2024 nicht da! */
  cursor: pointer;
  margin-right:2px;/*04.06.2024 rechts ein bisschen platz*/

  text-align:right;
  /*position:fixed;15.06.2025 bloß mal probieren */
  /*top:10;*/

}

/* 11.07.2024 wie avatari und avatari0 nur auf der linken seite*/

.koliv{/* verteilerlinks*/
  cursor: pointer;
  /*margin-left:2px;/*04.06.2024 rechts ein bisschen platz*/
  text-align:left;
}

@media (max-width:768px){
  .koliv{
    display:none;
  }
}

.kolir{/* rechts für user-icon*/
  cursor: pointer;
  /*margin-left:2px;/*04.06.2024 rechts ein bisschen platz*/
  text-align:right;
  padding-right:10px;
  visibility:hidden;/* erst bei onload visible machen */

}


.kopf2{
  display:block;
  text-align:center;width:100%;/*17.06.2025*/
}
.unten2{
  display:block;
  text-align:center;
}
.hundelogo{/*13.05.2024*/
  width:100%;
  display:flex;align-items:center;justify-content:center;vertical-align:top;
  /*visibility:hidden; gleich visible lassen, sonst dauert das manchmal zu lange! 05.06.2024 erst bei resize-ueberwachung visible*/
}
.imghundelogo{/*15.06.2025*/
  width:721px;height:466px;
}
@media(max-width:480px){/*15.06.2025*/
  .imghundelogo{width:200px;height:129px;}
}
@media(max-width:768px){/*15.06.2025*/
  .imghundelogo{width:300px;height:194px;}
}



.vorhundelogo{
  width:100%;height:60px;
  background-color:#ffffff;
}
.einloggen{/*21.06.2024*/
  position:absolute;left:0;top:0;visibility:hidden;cursor:pointer;text-align:center;/* 24.06.2024 mit width in js pos verändert sich mit js */

}
.anmelden{/*21.06.2024*/
  position:absolute;left:0;top:0;visibility:hidden;cursor:pointer;/* pos verändert sich mit js */
}

/* war nur beim Lernen
figure {
  text-align: center;
  width:40px;
}
figcaption {
   display: inline-block;
   text-align: left;
}
*/
.blmini{color:#a0a0a0;font-size:.8em;font-family:verdana;}/*username*/

/* ist nur test*/
.testclick{
  border: 10px solid red;
}
.testclick.active{
  border: 10px solid green;
}



a.angemeldet::before{
  content: url(zutaten/dreieckschwarz.png);
}
a.angemeldet:link{font-family:verdana;font-size:10px;color:#1c64b2;}
a.angemeldet:visited{font-family:verdana;font-size:10px;color:#1c64b2;}
a.angemeldet:hover{font-family:verdana;font-size:10px;background-color:#2F57AE;color:#F0F7C1;}


.mobile-menu1 ul {
  margin: 0;
  padding: 0;
}



.mobile-menu1 li {
  font-size: 1em;
  line-height: 1.5em;
  font-weight:normal;
  font-family:verdana;
  margin: 0;
  overflow: hidden;
  padding: .5em;
  position: relative;
  text-align: left;
  padding-left:1.5em;

}


.mobile-menu1 li:first-child {
  margin-top: 10px;
}

.mobile-menu1 li:hover {
  background: #CCCCCC;
  cursor:pointer;
  color:#000000;/*16.06.2025*/
}


.mobile-menu1 li a {
  text-decoration: none;
  color: black;
}


  /*---------------------
  Mobiles Menu - Slide IN
  ----------------------*/

.mobile-menu1, .mobile-menur {
  /*top: 100px; war top0*/
  /*max-width: 300px;*/
  visibility:hidden;
  /*kein unterschied display:flex;16.05.2024 vielleicht so gleich richtig groß!*/
  /*display:inline;*/
  white-space: nowrap;/* verhindert zeilenumbruch */
  /*left: -100%;*/
  /*left:100%;*/
  margin-left:300px;/*16.05.2024 verschwindet von hier nach rechts
  /*right:-100%; 16.05.2024 */
  /*width: 100%; 01.05.2024*/
  background: #EBEBEB;

  color: black;
  /*height: 100%;*/
  position: fixed;/*30.04.2024fixed;*/
  /*left:0px;top:0px; wird über js gemacht*/
  z-index:10001;/*28.03.2025 war 9996 will aber über kraenzchen mit 10000*/
  overflow-y: auto;
  overflow-x: hidden;
  /*
  -webkit-transform: translate3d(0, 0, 205px);
  -moz-transform: translate3d(0, 0, 205px);
  transform: translate3d(0, 0, 205px);
  */

  /*geht wieder weg in dieser Zeit*/
  -webkit-transition: all 500ms ;
  -moz-transition: all 500ms ;
  transition: all 500ms ;


}

.mobile-menu1.active, .mobile-menur.active{
  /*left: 0; geht von left -100% nach left 0*/
  /*left:1500px;*/
  /*right:0%; 16.05.2024'/
  /* würde gehen, aber avatar geht dann nach links position:relative; 30.04.2024 bloß mal probieren, ob rechts von head gerechnet wird*/
  /*right:0;*/
  visibility:visible;
  margin-left:0px;/*16.05.2024*/
   /*background:#ffff00; nur test */
  /*
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  */

  /* kommt in dieser Zeit*/
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;

}





/*
.dritteln1::after {
  /*src: url(logos/logo1.jpg);
  content:'AFTER-Dritteln1';
  color:red;
}
.dritteln1::before {
  /*content: url(logos/logo1.jpg);/* das geht tatsächlich auch!

  content:'BEFORE von grün zu blau bei hover';
  color:green;

}
*/

/* nur test transition zu schwarz
.dritteln1:hover{

  color:white;
  background-color:black;
  transition-property:background-color,color;
  transition-duration:2s;
}
*/

/*
.transitiontest{
transition-property:background-color;
transition-duration:2s;
}

.dritteln1:hover {
  content: url(bilder/en1-z.jpg);/* das geht tatsächlich auch!
   das geht content:'BEFORE-Dritteln1';
  color:blue;
  transition: all 500ms ease-in-out;
}

.dritteln1::before:hover {
  /*content: url(bilder/en1-z.jpg);/* das geht tatsächlich auch!
  /* das geht content:'BEFORE-Dritteln1'; */
  /*color:blue;
  transition: all 500ms ease-in-out;
}
*/



/* so geht das

.kreis {
  background-color: blue;

  transition-property: background-color,height;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  transition-delay: 1s;
  transition: background-color height 2s ease-out 1s; sollte dasselbe bewirken, geht aber nicht!


  width: 200px;
  height: 100px;
  border-radius: 100%;

}
.kreis:hover {
  background-color: orange;
  height:200px;

}
*/

/*
.kreis {
  background-color: blue;

  transition-property: background-color,height;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 1s;


  width: 200px;
  height: 100px;
  border-radius: 100%;

}
.kreis:hover {
  background-color: orange;
  height:200px;

}
*/


.indexinfod{width:100%;background-color:black;padding:2px;text-align:center;margin:0 auto;}

/*------------
.indexinfo{vertical-align:top;background-color:#ffaa00;list-style:none;text-alígn:left;width:300px;}
-------------*/
.indexinfo{list-style:none;}

/* für uebersicht */
.ulaside{list-style:none;font-family:verdana;font-size:1em;margin-left:0;padding-left:0;}
.caside1{font-family:verdana;font-size:1.5em;color:#F0F7C1;padding-bottom:1em;}/*19.06.2025 padding-bottom 11.06.2025 mit 1.5*/
.caside2{background-color:#2F57AE;padding-top:1em;padding-bottom:1em;margin-left:0;padding-left:0;}/*18.06.2025 top 3em*/
.caside3{padding-top:1em;padding-bottom:1em;color:#2F57AE;}

@media (min-width:769px) and (max-width:1069px){/*05.06.2024 sonst zu lange übersicht!*/
  .ulaside{font-size:.8em;}
  .caside2, .caside3{padding-top:.5em;padding-bottom:.5em;}
}

.caside3::before{
  content: url(zutaten/dreieckschwarz.png);
}
/* wenn als link
a.caside::before{
  content: url(zutaten/dreieckschwarz.png);
}

a.caside:link{font-family:verdana;font-size:1em;color:#2F57AE;}
a.caside:visited{font-family:verdana;font-size:1em;color:#2F57AE;}
a.caside:hover{font-family:verdana;font-size:1em;background-color:#2F57AE;color:#F0F7C1;}
*/


.caside3:hover {
  /*background: #CCCCCC;*/


  color:#F0F7C1;/*06.05.2024*/
  background-color:#2F57AE;
  cursor:pointer;

}

.festkleben {
    position: sticky;/*  16.05.2024 war fixed*/
    top: 70px;
    /*height:100%;11.05.2024 mal ohne probieren?*/
    /*width:100%;11.05.2024 mal ohne probieren?*/
    /*opacity: 0.7;*/
}



.rwdanmelden{text-align:right;padding:1em;vertical-align:top;}
a.rwdanmelden {font-weight:normal;vertical-align:middle;text-decoration:none;}
a.rwdanmelden:link, a.rwdanmelden:visited {color: blue;}
a.rwdanmelden:hover, a.rwdanmelden:active {color: lightgreen;background-color:darkgreen;}
.rwdwillstdu{color:blue;font-size:36px;background-color:white;}
.so{color:#ffff00;background-color:#000000;font-weight:bold;}

p {color:black;}
/*
a {font-weight:normal;vertical-align:middle;text-decoration:none;}

a:link, a:visited {color: blue;}
a:hover, a:active {color: lightgreen;background-color:darkgreen;}
*/






/*HAMBURGER MENU
----------------------*/

.hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 20px;
  padding-left: 15px;
  width: 50px;/*war 100px;*/
  height: 43px;
  cursor: pointer;
  z-index: 9998;
  /*background:#D1EAD2;*/
  /*background:#ffff00;test*/
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.bar,
.bar:after,
.bar:before {
  width: 20px;/*war 30*/
  height: 2px;
}

.bar {
  position: relative;
  transform: translateY(10px);
  background: #2F57AE;
  transition: all 0ms 300ms;
}

.bar.animate {
  background: rgba(255, 255, 255, 0);
}

.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background: #2F57AE;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background: #2F57AE;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

/*---------------------
Mobiles Menu
----------------------*/
  /*---------------------
  Mobiles Menu - Design
  ----------------------*/

.mobile-menu ul {
  margin: 0;
  padding: 0;
}

.mobile-menuv ul {/* mit v für verteiler wenn intern*/
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0;
  overflow: hidden;
  padding: 0.5em;
  position: relative;
  text-align: left;

  padding-left:1em;
  color:#2F57AE;
  font-family:verdana;

}

.mobile-menu li:first-child {
  margin-top: 30px;
  font-family:verdana;background-color:#2F57AE;color:#F0F7C1;
}

.mobile-menu li:first-child:hover {
  margin-top: 30px;
  font-family:verdana;background-color:#2F57AE;color:#F0F7C1;cursor:default;
}

.mobile-menu li:hover {
  /*background: #CCCCCC;*/


  color:#F0F7C1;/*06.05.2024*/
  background-color:#2F57AE;
  cursor:pointer;

}
/* in funcBodyLinks in avatarfarbe  mit v für intern *

.mobile-menuv li {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0;
  overflow: hidden;
  padding: 0.5em;
  position: relative;
  text-align: left;

  padding-left:1em;
  color:#2F57AE;
  font-family:verdana;

}


.mobile-menuv li:first-child {
  margin-top: 30px;
  font-family:verdana;background-color:#2F57AE;color:#F0F7C1;
}

.mobile-menuv li:first-child:hover {
  margin-top: 30px;
  font-family:verdana;background-color:#2F57AE;color:#F0F7C1;cursor:default;
}

.mobile-menuv li:hover {
  color:#F0F7C1
  background-color:#2F57AE;
  cursor:pointer;
}


.mobile-menuv li:first-child {
      margin-top: 10px;
      font-family:verdana;background-color:$weiss;color:$avatarcol;
}
*/
.mobile-menuv li:first-child:hover {
      cursor:default;
}


/* braucht man nicht glaube ich
.XXmobile-menu li a {
  text-decoration: none;
  font-family:verdana;
  color:#2F57AE;
}
.XXmobile-menu li a:hover {
  text-decoration: none;
  font-family:verdana;
  background-color:#2F57AE;color:#F0F7C1;
}
*/


  /*---------------------
  Mobiles Menu - Slide IN
  ----------------------*/

.mobile-menu, .mobile-menur{
  top: 60px;/* war top0*/
  /*max-width:300px; 06.05.2024 war 250*/

  left: -100%;
  width: 100%;
  background: #D1EAD2;

  /* background:#ffffaa; test */

  height: 100%;
  position: fixed;
  z-index: 9997;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 205px);
  -moz-transform: translate3d(0, 0, 205px);
  transform: translate3d(0, 0, 205px);
  -webkit-transition: all 500ms ;/* bei allen: war 500 und  ease-in-out  geht langsam zurück! */
  -moz-transition: all 500ms ;
  transition: all 500ms ;

}

.mobile-menu.active {
  left: 0;/* geht von left -100% nach left 0*/
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 500ms ease-in-out;/* bei allen: war 500 und  ease-in-out  kommt langsam! */
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

/* mit v für intern*/

.mobile-menuv {
  top: 60px;/* war top0*/
  /*max-width:300px; 06.05.2024 war 250*/
  left: -100%;
  width: 100%;
  background:#ffffff;

  /* background:#ffffaa; test */

  height: 100%;
  position: fixed;
  z-index: 9997;
  overflow-y: auto;
  -webkit-transform: translate3d(0, 0, 205px);
  -moz-transform: translate3d(0, 0, 205px);
  transform: translate3d(0, 0, 205px);
  -webkit-transition: all 500ms ;/* bei allen: war 500 und  ease-in-out  geht langsam zurück! */
  -moz-transition: all 500ms ;
  transition: all 500ms ;

}

.mobile-menuv.active {
  left: 0;/* geht von left -100% nach left 0*/
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 500ms ease-in-out;/* bei allen: war 500 und  ease-in-out  kommt langsam! */
  -moz-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

  /*---------------------
  Mobiles Menu - Dropdown Submenu
  ----------------------*/

/*
.has-children:hover{
  cursor:pointer;
  color:red;background-color:yellow;
}
*/

/* erst mal nicht zeigen
.children {
  display:none;
}
*/

/*16.07.2024 test
.children.active{
  display:block;
  background-color:red;
}

.children.passive{
  display:none;
}
*/
.mobile-menuv.children li:first-child {
  margin-top: 0px;
}
.liv{/* link menu verteiler */
  font-family:verdana;color:#ffffff;
  font-size:1em;padding:.2em
}
.liv:hover{
  color:#ffffff;cursor:pointer;
}
.liv:hover::before{
  content: "\23F5";
}
.lir{/* link menu rechts*/
  font-family:verdana;color:#ffffff;
  font-size:1em;padding:.2em
}
.lir:hover::before{
  content: "\23F5";
}

.icon-arrow {
  position: absolute;
  display: block;
  font-size: 1em;/*war 0.7em;*/
  color: #2F57AE;/* in blau wie hamburgerbild*/
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transition: .6s;
  -webkit-transition: .6s;
  -moz-transition: .6s;
}
.icon-arrow:after{
  content: "\25BC";/*U+25BC nach unten zeigendes Dreieck U+25B4 nach oben zeigendes dreieck U+23F5 nach rechts zeigendes Dreieck*/
}

/* lässt nach unten zeigendes dreieck um 180° rotieren und zeigt nach nach oben
.icon-arrow:open{
  content:"geaendert";
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transition: .6s;
  -webkit-transition: .6s;
  -moz-transition: .6s;
}
*/

/* versuch 17.07.2024 so geht es!! statt icon-arrow:open */

.icon-arrow-open{
  transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transition: .6s;
  -webkit-transition: .6s;
  -moz-transition: .6s;
}


@media (min-width:769px){

  .hamburger-menu{visibility:hidden;width:0px;}
  .mobile-menu{visibility:hidden;width:0px;}
  .mobile-menuv{visibility:hidden;width:0px;}/*15.07.2024*/
  .mobile-menur{visibility:hidden;width:0px;}/*18.07.2024 rechts unter avatar*/
}



@media (max-width:768px){
  aside{visibility:hidden;width:0px;display:none;}/*18.06.2025 aside statt aside1*/
  .hamburger-menu{visibility:visible;}
  .hamburger-menur{visibility:visible;}
}





/*https://filetime.at/checkboxen-und-radio-buttons-nur-mit-css-stylen/*/
/* das auch nicht mehr machen 12.02.2025
input[type=checkbox] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color:#fefefe;
     color: #000;
     top: 0;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;
     margin-right: 7px;
     outline: none;
     border: 1px solid #dfdbd8;
}

input[type=checkbox]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: 0;
     font-weight: 700;

     content: '\02143';
     transform: rotate(40deg);
}
*/

/* 12.02.2025 testweise weglassen dann habe ich die normale Größe mit einem Punkt drin, das passt auf bildschirm und smartphone!
input[type=radio] {
    -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #fff;
     color: #000;
     top: 0;
     height: 20px;
     width: 20px;
     border: 0;
     cursor: pointer;
     margin-right: 7px;
     outline: none;
     border-radius: 40px;
     border: 1px solid #dfdbd8;
}


@media (max-width:480px){/
  input[type=radio] {
    height: 12px;
    width: 12px;

  }
}




input[type=radio]:checked::before {
     position: absolute;
     font-size: 14px;
     left: 5px;
     top: -0;
     font-weight: 700;
     content: '\02143';
     transform: rotate(40deg);
}
*/