@charset "UTF-8";
/*******************************************************************
ILSA-Layout.css  für ILSA Lernentwicklung

zuletzt geändert: 2025-06-04
*******************************************************************/
@import url('Fonts/OpenSans.css');
@import url('Fonts/Consolas.css');

@media all {
html { scroll-behavior: smooth; 

       --Kopf_BGC:       #E7E7E7;
       --Kopf_COL:       #5F5F5F;
       --Menue_BGC:      #FFA500; /* orange */
       --Menue_aktu_BGC: #FFFF00; /* yellow */
       --Menue_hover_BGC:#FFFFFF;
       --Menue_COL:      #000099;
       --Inhalt_BGC:     #F3F3F3;
       --Inhalt_COL:     #303192;
       --Inhalt_Box_BGC: #FFFFFF;
       --Inhalt_TXT_COL: #1F1F1F;
       --Box_BGC:        #EFEFEF;
       --Knopf_BGC:      #FFA500; /* orange */
       --Knopf_COL:      #000099;
       --Knopf_SEL_BGC:  #FFFFFF;

       --Druck_BGC:      #FFFFFF;
       --Druck_COL:      #000000;
       --Rahmen_COL:     #DDDDDD;

       --rot_COL:        #FF0000;
       --dunkelrot_COL:  #BF0000;
       --dunkelgrau_COL: #4F4F4F;
       --schwarz_COL:    #000000;
       --gelb_COL:       #FFFF00;

       --nettoBreite:    80%;
       --Rand_l:         10%;
       --Rand_r:         10%;

       --nettoBreiteS:   100%;
       --Rand_lS:        0%;
       --Rand_rS:        0%;

       --sans_Serif_Font: "Arial Narrow", Arial, "Open Sans", sans-serif !important;
       --Mono_Font:  "Courier New", Consolas, Monaco, Courier, monospace !important;
     }

body { min-width: 8em;
       background-color: var(--Inhalt_BGC);
       color: var(--schwarz_COL); 
       font-family: var(--sans_Serif_Font);
       font-style: normal; 
       font-size:100%;
       padding: 0.5em;
       margin: 0.5em;
       border: none;
       vertical-align:top;
     }

a:link,
a:active,
a:visited      { color: var(--schwarz_COL); text-decoration: none; }

a:focus,
a:hover        { color:var(--dunkelrot_COL); text-decoration: none; }

table          { width: 100%; border: none; }
td             { padding: 0; vertical-align:top; }
img            { border: none; }

/******************************************************************/
#Kopf          { width: var(--nettoBreite);
                 margin: -1em auto 0 auto;
                 padding: 0;
                 text-align: left;
                 border: none;
                 font-size: small;
                 font-weight: 300;
                 color: var(--Kopf_COL);
               }

.KopfBoxL div  {margin:-1.5em 2em 0em 0em;float:left}
.KopfBoxL h2   {margin:-1em 0em -0.5em 0em;float:left}
.KopfBoxR1 ul,
.KopfBoxR2 ul  {margin:1em 0 0 0;float:right;font-size:110%}








#Kopf p        { margin: 0.25em 0 0 0; font-weight: bold; }
#Kopf td       { vertical-align: top; 
                 line-height: 125%; 
                 padding: 5px 2% 0 2%;
               }
/******************************************************************/
.SprungKnopf  { background-color: var(--Knopf_BGC);
                color: var(--Knopf_COL);
                text-align: center; 
                border: 2px solid var(--Knopf_COL);
                border-radius: 6px;
                padding: 8px 6px 2px 6px;
                font-family: var(--Mono_Font);
                font-size: large;
              }
a.SprungKnopf { padding:0; }
.SprungKnopf:focus,
.SprungKnopf:hover { background-color: var(--Knopf_SEL_BGC); color: var(--Knopf_COL); text-decoration: none; }

/******************************************************************/
#Inhalt       { background-color: var(--Inhalt_Box_BGC);
                border-color: var(--Rahmen_COL);
                width: var(--nettoBreite);
                margin-left:  var(--Rand_l);
                margin-right: var(--Rand_r);
                height: auto;
                padding: 0px 0px 10px 0px;
                border-radius: 12px;
                font-size: small;
              }
#Inhalt div   { background-color: var(--Inhalt_Box_BGC);
                width: 100%;
                padding: 1px 0px 10px 0px;
                font-size: small;
              }
#Inhalt div p { margin: 0 0 0 1%; }
#Inhalt h1    { background-color: var(--Menue_aktu_BGC);
                color: var(--Inhalt_COL);
                border-style: solid;
                border-width: 2px 2px 0px 2px;
                border-color: var(--Inhalt_COL);
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                margin: -2px 0 0 0;
                padding: 2px 10px 4px 20px;
                font-size: 140%; 
                font-weight: 700;
                text-align: left;
              }
#Inhalt h2    { color: var(--Inhalt_TXT_COL);
                margin: 5px 1% 0px 1%;
                padding: 20px 10px 2px 10px;
                font-size: 120%;
                font-weight: 700;
                text-align: left;
              }
#Inhalt h2.Sprung_zurueck { margin:-0.5em 0% 1em 1% }
#Inhalt h3    { color: var(--Inhalt_TXT_COL);
                margin: 5px 1% 0px 1%;
                padding: 10px 10px 2px 10px;
                font-size: medium;
                font-weight: 700;
              }
#Inhalt h4    { color: var(--Inhalt_TXT_COL);
                margin: 5px 1% 0px 1%;
                padding: 10px 10px 2px 10px;
                font-size: 110%;
                font-weight: 600;
              }
#Inhalt h5    { color: var(--Inhalt_TXT_COL);
                margin: 5px 1% 0px 1%;
                padding: 10px 10px 2px 10px;
                font-size: 80%;
                font-weight: 600;
              }
#Inhalt p, 
#Inhalt li    { font-size: medium; }
#Inhalt p     { margin: 0.25em 1% 0px 1%;
                padding: 3px 10px 10px 10px;
              }
#Inhalt li    { margin: 0.15em 1% 0px 1em; }
#Inhalt ul    { margin-top: 0.5em;
                padding: 2px 10px 2px 30px;
                font-size: small;
              }
#Inhalt table { padding: 10px 10px 2px 10px; }
#Inhalt td    { vertical-align: top;  }

#Inhalt p.Runt{ background-color: var(--Inhalt_Box_BGC);
                border-style: solid;
                border-width: 0px 2px 2px 2px;
                border-color: var(--Inhalt_COL);
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                margin:-0.6em 0 -0.6em 0;
                padding: 4px 10px 2px 20px;
                font-size: 140%; 
                font-weight: normal;
              }

/******************************************************************/
/*  diverse Sonderfälle  */
#Inhalt .Webinar_Block  {clear:both}

#Inhalt p.Hinweis { font-weight: normal; font-size: small;  margin-left: 1em; margin-top: 0.5em; }
#Inhalt p.Einzug  { font-weight: normal; font-size: medium; margin-left: 1em; margin-top: 0.5em; }
/*  Material_Block entfällt künftig  */
#Inhalt div.Material_Block {clear:both}
.Ergebnisse   { background-color: var(--Inhalt_Erg_BGC); table-layout:fixed; }

/******************************************************************/
#Fuss         { clear:both;
                width: var(--nettoBreite);
                margin: 0em var(--Rand_r) 0em var(--Rand_l);
                text-align: left;
                border-width: 0px;
                vertical-align: top;
                color: var(--Inhalt_COL); 
              }

#Fuss p       { margin: 0.33em 0em 1em 2em; font-size: 0.75em; text-indent:-2em;}
#Fuss a       { color:var(--Inhalt_COL); }
#Fuss a:hover { color:var(--dunkelrot_COL)}
#Fuss p.Hinweis { font-size: x-small; font-weight: normal; }

#Fuss p       {hyphens:auto}

.BildBox_rechts{float: right; max-width: 300px; padding: 0px 1% 0px 25px; text-align: left; font-size: x-small; margin-right:1em}
.BildBox_links {float: left;  max-width: 300px; padding: 0px 25px 0px 2%; text-align: left; font-size: x-small; margin-left: 1em}
.BildBox_links  p.Bildunterschrift { margin-top:-1em; color:red}
.BildBox_rechts p.Bildunterschrift { margin-top:-1em; color:red}

p.BildGROSS   { text-align: center; }
img.BildGROSS { max-width: 98%; height: auto; padding: 10px 0px 10px 0px; display: block;  margin: 0 auto; }

div.InhaltTab  {display:table;border:2pt;border-style:dotted;color:green}
div.InhaltZeile{display:table-row}
/* Wird InfoIcon noch gebraucht ??? */
div.InhaltIcon {display:list-item;vertical-align:top;list-style-image:url(Bilder/Graf2502_202x244_InfoIcon.png);margin-left:1em; }
div.InhaltText {display:table-cell;vertical-align:top;width:20em;xfloat:right;}
div.InhaltText p.KonzeptListenElement1{font-weight:bold;font-height:0.5em;margin-left:5em;color:red}
div.InhaltText p.KonzeptListenElement2{margin:0.5em 0 0 15em;color:blue}
div.InhaltTextBlock {margin-top:-1em;margin-bottom:1em}

ul.Inhalt2Sp li {display:grid;
  grid-template-columns:10em 1fr 10%;
  grid-template-rows:1em calc(0.5em+auto);
  gap:1em;
  margin-bottom:1em;
  hyphens: none;
}
ul.Inhalt2Sp li img     {grid-row:1/3;width:8em}
ul.Inhalt2Sp li h3      {margin:0 0 0 2em;text-indent:-2em}
ul.Inhalt2Sp li div     {grid-row:1/3}
ul.Inhalt2Sp li div p   {margin:-0.5em 0 0 0;line-height:110%}
ul.Inhalt2Sp li div p.Einzug  {margin:-0.5em 0 0 2em;text-indent:-2em;line-height:110%}
ul.Inhalt2Sp li div img {width:33px}

ul.Inhalt2SpinZ li {display:grid;
  grid-template-columns:5em 1fr;
  grid-template-rows:2em calc(0.5em+auto);
  grid-template-rows:1em 3em;
  gap:0em;
  margin:0em 3em 0em 0em;
}
ul.Inhalt2SpinZ li img {grid-row:1/3;width:3em}
ul.Inhalt2SpinZ li p {margin-top:-0.25em;color:gray}

div.LotsenBlock {display:grid;grid-template-columns:16em 16em 1fr;}
div.LotsenBlock div.LotsenBild img {grid-row:1/3;width:15em}
div.LotsenBlock div.LotsenText {display:grid-cell}
div.LotsenBlock div.LotsenText p.LotsenTextZeilen {font-weight:bold;color:gray}

/******************************************************************/
li        .ILSA_Logo,
p         .ILSA_Logo {color:var(--dunkelgrau_COL); font-family: var(--sans_Serif_Font); font-size: 100%; font-weight: bold; }
p a       .ILSA_Logo {color:var(--schwarz_COL)}
p a:focus .ILSA_Logo,
p a:hover .ILSA_Logo {color:var(--dunkelrot_COL)}

      p.Hinweis .ILSA_Logo {color:var(--dunkelgrau_COL)}
#Fuss p.Hinweis .ILSA_Logo {color:var(--Inhalt_COL)}

.Kennung_akut,
.Dateiliste,
.URL,
.Metadaten    { font-family: var(--Mono_Font); font-size: 110%; font-weight: bold; }

.URL          { white-space: nowrap; }
.Dateiliste,
.Kennung_akut { font-size: medium; }

/* ???????????????????? */
.readonly     { background-color: #D3D3D3; }

.Merkmal      { font-size: medium; margin-top: 1em;}
.Merkmal_akut { font-size: large; }
.SP           { font-size: medium; white-space: nowrap; }
.Bild_im_Text { margin: 1em 15px 0.5em 15px; }

.nach_oben    { text-align: right; margin:-1em 0 0 0; padding: 0;}
.mittig       { vertical-align: middle; }
.links        { text-align: left; }
.rechts       { text-align: right; }
.klein        { font-size:  80%; }
.gross        { font-size: 125%; }
.normal       { font-size: 100%; 
                font-weight: normal; 
                font-style: normal;
              }
.Logo_links   { font-size: medium; 
                font-weight: normal; 
                font-style: normal;
                padding-bottom: 1em; 
              }
.nur_drucken  { display: none; visibility: hidden; }
.unteilbar    { white-space: nowrap; }
.indent       { margin-left: 2em; text-indent: -2em; }
.Titel        { padding-bottom: 1em; }
.zum_Kontakt  { white-space: nowrap; font-weight: bold; }

/* ???????????????????? */
.Trenner,
.Trenner_intern{ background-color: var(--dunkelgrau_COL); color: var(--dunkelgrau_COL); margin-top:0.5em; }
.Trenner_intern{ margin-left:1.5em; margin-right:1.5em; }

.fett         { font-weight: 700; }
.grossfett    { font-weight: bold; font-size:large}
.rot          { color: var(--rot_COL) }
.BGCgelb      { background-color: var(--gelb_COL) }

.versteckt    { display: none;   visibility: collapse; }
.sichtbar     { display: inline; visibility: visible; }

.Dialog_Knoepfe  { text-align: center; }
.sichtbare_Liste { display: block; visibility: visible; }

/******************************************************************/
/*  diverse Sonderfälle  */
#Menuezeile   { clear: both;
                background-color: var(--Menue_BGC);
                color: var(--Menue_COL);
                font-weight: normal;
                font-size: large;
                border-radius: 12px;
                padding-top: 8px;
                padding-bottom: 0px;
                margin:0 var(--Rand_r) 0 var(--Rand_l);
                z-index: 1;
              }

#Menue_Liste  { text-align: left;
                text-indent: -2em;
                margin: -0.25em 0.5em 0.5em 3em;
                padding: 3px 12px;
                border: none;
                font-weight: bold;
                line-height:2em;
                z-index: 11;
              }
#Menue_Liste a{ color: var(--Inhalt_COL);
                text-decoration: none;
                border: solid 2px var(--Menue_COL); 
                padding: 3px 10px 3px 10px; 
                border-radius: 6px;
                z-index: 111;
              }
/* ???????????????????? */
#Menue_Liste a:hover { background-color: var(--Menue_hover_BGC); }
#Menue_Liste a span  { padding: 3px 0px 3px 0px; }

#Menue_Liste label { display:none; }

#aktueller_Menuepunkt
              { background: var(--Menue_aktu_BGC); 
                color: var(--Inhalt_COL); 
                border-style: solid;
                border-color: var(--Inhalt_COL);
                border-width: 2px 2px 0px 2px;
                border-top-left-radius: 6px; 
                border-top-right-radius: 6px; 
                padding: 3px 10px 20px 10px;
              }

input.CheckBox_Menue {display:none}
p label.ein_aus_blenden_Menue {margin-left:-1em}
span.Menue_Eintrag {display:inline}

.Pflicht {color:var(--rot_COL)}

#Arbeitskreis hr {display:none;visibility:collapse}
}

/******************************************************************/
@media screen and (prefers-reduced-motion: reduce)
{ html { scroll-behavior: auto; } }

/******************************************************************/
@media only screen and (max-width: 1600px)
{
html {--nettoBreite:90%;--Rand_l:5%;--Rand_r:5%}
#Kopf, #Inhalt, #Fuss {width:var(--nettoBreite);margin:0 var(--Rand_r) 0 var(--Rand_l)}
#Kopf {margin-top:-1em}
}

/******************************************************************/
@media only screen and (max-width: 1400px)
{
html {--nettoBreite:96%;--Rand_l:2%;--Rand_r:2%}
#Kopf, #Inhalt, #Fuss {width:var(--nettoBreite);margin:0 var(--Rand_r) 0 var(--Rand_l)}
#Kopf {margin-top:-1em}
}

/******************************************************************/
@media only screen and (max-width: 1200px)
{
#xKopf div.KopfBoxR1,
#xKopf div.KopfBoxR2 {display:none;visibility:hidden}
}

/******************************************************************/
@media only screen and (max-width: 960px)
{
body {font-family:var(--sans_Serif_Font)}
html {--nettoBreite:100%;--Rand_l:0%;--Rand_r:0%}
#Kopf, #Inhalt, #Fuss {width:var(--nettoBreite);margin:0 var(--Rand_r) 0 var(--Rand_l)}
#Kopf {margin-top:-1em}
#Kopf ul {display:none;visibility:hidden}
#Menue_Liste a {border-radius:6px}
#Menue_Liste label {display:inline}
#aktueller_Menuepunkt {padding-bottom:3px;border-radius:6px;border-width:2px}
                               label.ein_aus_blenden_Menue::before {content:"✖";font-size:130%;font-weight:bold;font-family:var(--Mono_Font)}
input.CheckBox_Menue:checked ~ label.ein_aus_blenden_Menue::before {content:"☰";font-size:120%}
                               span.Menue_Eintrag {display:inline}
input.CheckBox_Menue:checked ~ span.Menue_Eintrag {display:none}
}

/******************************************************************/
@media only screen and (max-width: 920px)
{
#Arbeitskreis hr {display:block;visibility:visible}
}
/******************************************************************/
@media only screen and (max-width: 820px)
{
body {padding:0;margin:0}
#Kopf {margin-top:0;margin-left:0.5em}
#Kopf h1 {margin-bottom:0}
.KopfBoxR1,
.KopfBoxR2 ul  {display:none;visibility:hidden}
h2.Logo_links {display:none;visibility:hidden}
#Menuezeile   {margin:0;border-radius:12px}
}

/******************************************************************/
@media print
{ 
body          { background-color: var(--Druck_BGC); }
.nur_drucken  { display: block; visibility: visible; }
.nur_Monitor  { display: none; visibility: collapse; }
.nach_oben    { display: none; visibility: collapse; }
.Trenner,
.Trenner_intern{ color: var(--Druck_COL); }
#Kopf         { width: 99%; padding: 0; }
#Menuezeile #Menue_Liste  {display:none;visibility:hidden}
#Inhalt h1    { background-color: var(--Druck_BGC); }
#Inhalt h2.Sprung_zurueck { display: none; visibility: collapse; }
#Inhalt       { margin-left: 2%; width: 96%; color: var(--Druck_COL); }
#Fuss         { margin-left: 2%; width: 96%; color: var(--Druck_COL); background-color: var(--Druck_BGC); }
#xInhalt, 
#Fuss{hyphens:auto}
}
/*******************************************************************
ILSA-Layout.css  Ende
*******************************************************************/