@charset "UTF-8";
/*******************************************************************
gutschrift-Layout.css  für  gutschrift-Dortmund.de

zuletzt geändert: 2025-08-12
*******************************************************************/
@media all {
html { scroll-behavior:smooth;

       --grauerHintergrund:#F3F3F3; /* helles Grau */
       --graueSchrift:     #2F2F2F; /* dunkles Grau */
       --HinweisSchrift:   #AFAFAF; /* blasses Grau */
       --LogoFarbe:        #F78022; /* Orange */

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

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

       font-size: 16px;
     }

body { min-width:8rem;
       background-color:var(--grauerHintergrund);
       color:var(--graueSchrift);
       font-family:var(--sans_Serif_Font);
       font-style:normal;
       font-size:100%;
       padding:0.5rem;
       margin:0.5rem;
       border:none;
       vertical-align:top;
     }
#Spielfeld    {background-color:white;border-radius:0px 20px;margin:1em var(--Rand_r) 2rem var(--Rand_l);padding-top:1rem}
#Spielfeld p a       {color:var(--graueSchrift);text-decoration:none}
#Spielfeld p a:hover {color:var(--LogoFarbe)}

/******************************************************************/
#Kopf            {display:grid;grid-template-columns:1fr 2fr;max-width:100%;margin:0 10% 0 10%;gap:10px;padding:10px;font-weight:normal;hyphens:none}

#KopfLogo        {grid-area:1/1/2/1;max-width:100%;margin:0}
#KopfLogo #KopfLogoBild    {margin:1em 0% 2rem 0%}
#KopfLogo #KopfLogoBild img{max-width:80%}
#KopfLogo #KopfLogoText    {margin:-2.75rem 0% 0rem 10%;font-size:100%;font-weight:bold;hyphens:none}

#KopfMenue       {grid-area:1/2/1/2;max-width:100%;margin:1rem 0% 0rem 0%}
#KopfMenue ul    {list-style:none;margin-left:0}
#KopfMenue ul li {display:inline-block;padding:0 0.5rem;font-variant:small-caps;font-size:14pt}
#KopfMenue ul li ul {display:none;
                 position:absolute;
                 z-index:999;
                 padding:0.25rem 0rem 0rem 0rem;
                 margin-top:0rem;
                 margin-left:-0.5rem;
               }
#KopfMenue ul li a                {color:var(--graueSchrift);text-decoration:none}
#KopfMenue ul li a:hover          {color:var(--LogoFarbe)}
#KopfMenue ul li:hover            {color:var(--LogoFarbe)}
#KopfMenue ul li       span       {color:white}
#KopfMenue ul li:hover span       {color:var(--LogoFarbe)}
#KopfMenue ul li:hover ul         {color:var(--graueSchrift);display:flex;flex-direction:column}
#KopfMenue ul li a.aktuell        {color:var(--LogoFarbe);display:block}
#KopfMenue ul li ul li a.aktuell  {color:var(--LogoFarbe);display:block}
#KopfMenue ul li ul               {border-bottom:3px solid var(--LogoFarbe)}
#KopfMenue ul li ul li            {border-left:3px solid var(--LogoFarbe);background-color:white;display:block;padding-top:0.25rem}
#KopfMenue ul li ul li a:hover    {color:var(--LogoFarbe);text-decoration:none}

#KopfMenue ul li.MenueTitel       {border-left:3px solid white}
#KopfMenue ul li.MenueTitel:hover {color:var(--graueSchrift)}
#KopfMenue ul li ul:hover         {display:flex;flex-direction:column}

#KopfInfo        {grid-area:2/2/2/2;max-width:100%;margin:-3rem 0% 0rem 3rem}
#KopfInfo p      {xcolor:red}

/******************************************************************/
#Inhalt     {display:grid;grid-template-columns:auto auto;gap:10px;padding:10px;font-weight:normal;hyphens:none}
#Inhalt h3  {hyphens:auto}
#Inhalt p a {white-space:nowrap}

#Inhalt_links    {grid-area:1/1/1/1;max-width:98%;margin:0 2% 0 16%}
#Inhalt_links h1 {font-size:300%;color:var(--LogoFarbe);font-weight:150;margin-bottom:0;margin-top:-0.5rem;hyphens:none}
#Inhalt_links h2 {font-size:200%;color:#111111;font-weight:150;margin-bottom:0;hyphens:none}
#Inhalt_links h3 {font-size:150%;color:#222222;font-weight:150;margin-bottom:0;hyphens:auto}
#Inhalt_links p  {font-size:12pt;hyphens:auto}
#Inhalt_links p,
#Inhalt_links li {color:#444444}

#Inhalt_links p a:hover  {color:var(--LogoFarbe)}

#Inhalt_rechts   {grid-area:1/2/1/2;max-width:95%;margin-left:1%}
#Inhalt_rechts p {margin-left:0rem;hyphens:none}
#FragenBox       {margin:3rem 1rem 0rem 2rem}
#FragenBox     p {text-align:center;padding:1rem;font-size:large;border:4px solid var(--LogoFarbe);border-radius:0px 16px;margin-top:0em}

.Font_size_6  {font-size:6pt}
.Font_size_12 {font-size:0.75rem}
.Font_size_14 {font-size:14pt}
.Font_size_16 {font-size:1rem}
.Font_size_20 {font-size:1.25rem}
.Font_size_24 {font-size:1.5rem}
.Font_size_36 {font-size:2.25rem}

.zentriert    {text-align:center}

#Inhalt_links p.LogoFarbe,
#Inhalt_links h3.LogoFarbe  {color:var(--LogoFarbe)}
.kursiv       {font-style:italic}
.normal       {font-style:normal}
.fett         {font-weight:bold}
.Kapitaelchen {font-variant:small-caps}

#Inhalt_links ul li {hyphens:auto}

#Inhalt_links div.Kasten_LogoFarbe   {padding:0 10% 0 10%}
#Inhalt_links div.Kasten_LogoFarbe p {padding:5px 10px 5px 10px;background-color:var(--LogoFarbe);color:white;border-radius:0rem 1rem;font-size:x-large;hyphens:none}
#Inhalt_links h2 a.Mehr_LogoFarbe,
#Inhalt_links li a.Mehr_LogoFarbe,
#Inhalt_links p  a.Mehr_LogoFarbe    {                          background-color:var(--LogoFarbe);color:white;border-radius:0em 0.67em;font-weight:700;margin-top:-0.25rem;white-space:nowrap;text-decoration:none}
#Inhalt_links h2 a.Mehr_LogoFarbe:hover,
#Inhalt_links li a.Mehr_LogoFarbe:hover,
#Inhalt_links p  a.Mehr_LogoFarbe:hover {color:var(--graueSchrift)}

#Inhalt_links ol li,
#Inhalt_links ul li {margin-top:0.5rem}
#Inhalt_links ol li::marker,
#Inhalt_links ul li::marker {color:var(--LogoFarbe)}

#Inhalt_links p.Hinweis   {margin-left:2.75rem;font-variant:small-caps;font-size:large;color:var(--HinweisSchrift)}
#Inhalt_links p.Literatur {margin:0.5rem 0 0.25rem 0;hyphens:none}
#Inhalt_links p.keine_Worttrennung {hyphens:none}

#Inhalt_links   p.RaumFotos img {margin:0rem 0rem 0rem 0rem;border:10px solid white;border-radius:0rem 1.5rem;max-width:30%;float:left}
#Inhalt_links img.Foto_l        {margin:0rem 2rem 0rem 0rem;border: 6px solid white;border-radius:0rem 1.5rem;float:left}
#Inhalt_links img.Foto_r        {margin:0rem 0rem 0rem 2rem;border: 6px solid white;border-radius:0rem 1.5rem;float:right}
#Inhalt_links img.Foto_20       {max-width:20%}
#Inhalt_links img.Foto_30       {max-width:30%}
#Inhalt_links img.Foto_33       {max-width:33%}

#Inhalt_links.Inhalt_1Sp        {margin:0 10% 0 10%}

/******************************************************************/
#Fuss         { width:var(--nettoBreite);
                margin:0rem var(--Rand_r) 0rem var(--Rand_l);
                text-align:left;
                vertical-align:top;
              }

#Fuss hr      {color:#7F7F7F;width:80%;margin:0 var(--Rand_r) 0 0}

#Kontakt      {display:grid;grid-template-columns:auto auto;gap:10px;padding:10px}
#Kontakt_l    {grid-area:1/1/1/1}
#Kontakt_r    {grid-area:1/2/1/2;margin-top:3.25rem}
#Kontakt_r p a       {color:var(--graueSchrift);text-decoration:none}
#Kontakt_r p a:hover {color:var(--LogoFarbe)}

#Fussbalken        {margin-top:-0.5rem;background-color:var(--LogoFarbe);font-size:200%;border-radius:0rem 1.5rem}
#Fusszeile_links   {font-size:10pt;margin-top:-2em;padding-bottom:0.125rem;white-space:nowrap}
#Fusszeile_Mitte   {font-size:10pt;margin-top:-2.25em;padding-bottom:0.125rem;text-align:center}
#Fusszeile_rechts  {font-size:10pt;margin-top:-2.25em;padding-bottom:0.125rem;text-align:right}

/******************************************************************/
.URL          {font-family:var(--Mono_Font);font-size:110%;font-weight:bold;white-space:nowrap}

.SP           {font-size:medium;white-space:nowrap}

.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}

.unteilbar    { white-space:nowrap}
.indent       { margin-left:3rem}

.fett         {font-weight:700}
.grossfett    {font-weight:bold;font-size:large}
.LogoFarbe    {color:var(--LogoFarbe)}
.rot          {color:#FF0000}

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

/******************************************************************/
/*  Sonderfälle  */

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

} /* Ende von  @media all */

/******************************************************************/
@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, #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, #Fuss {width:var(--nettoBreite);margin:0 var(--Rand_r) 0 var(--Rand_l)}
#Kopf {margin-top:-1em}
}

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

/******************************************************************/
@media only screen and (max-width:840px)
{
body {padding:0;margin:0}
html {--Rand_l:1%;--Rand_r:1%}

#Spielfeld                {margin:1rem var(--Rand_r) 2rem var(--Rand_l)}

#Kopf            {grid-template-columns:1fr}
#KopfLogo                 {margin-left:0rem;text-align:center}
#KopfLogo  #KopfLogoBild  {margin-left:-2rem}
#KopfLogo  #KopfLogoText  {margin-left:1rem;margin-top:-3rem}
#KopfMenue       {grid-area:2/1/2/2;max-width:110%;margin:0rem 0rem 0rem -3rem}
#KopfInfo        {grid-area:3/1/3/2;max-width:100%;margin:-1rem 0rem 0rem 0rem}

#Inhalt        {grid-template-columns:auto;gap:0.5rem 0rem;padding:0.5rem 0rem}
#Inhalt        {margin:0 2% 0 2%}
#Inhalt #Inhalt_links  {grid-area:1/1/1/1;max-width:98%;margin:0%;xmargin-right:1%}
#Inhalt #Inhalt_rechts {grid-area:2/1/2/1;max-width:90%;margin:1%}

#Fuss   hr {width:96%}
#Kontakt   {grid-template-columns:auto}
#Kontakt_l {grid-area:1/1/1/1}
#Kontakt_r {grid-area:2/1/2/1;margin-top:-1rem}
}

@media only screen and (max-width:600px)
{
#Fusszeile_Mitte  {margin-top:-1rem;text-align:left}
#Fusszeile_rechts {margin-top:-2rem}
}

/******************************************************************/
@media print
{ 
body          {padding:0;margin:0;background-color:white}
html          {--Rand_l:1%;--Rand_r:1%}
#Spielfeld    {margin:1rem var(--Rand_r) 2rem var(--Rand_l)}
#Kopf         {margin-left:2%;width:96%;padding:0}
#Inhalt       {margin:0;font-weight:normal}
#Fuss         {margin-left:2%;width:96%;padding:0}
#KopfMenue,
.nur_Monitor  {display:none;visibility:collapse}
}
/*******************************************************************
gutschrift-Layout.css  Ende
*******************************************************************/