/********************************************************
/* Definition der Stilattribute für die Webseite des    *
/* Internetprotals im PNinBBNetz Baden-Baden            *
/* Version vom 12.10.2026 13:50 Uhr                     *
/* File: WSE1Style.css                                  *
/********************************************************/

html, body 
 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: serif;
  background-color: #DCF0FF;
  line-height: 1.0;
  color: black;
  min-height: 100vh;
  overflow-y: auto;                    /* Erlaubt Ausweich-Scrollen auf sehr kleinen Bildschirmen */
}

/* Container für die Ticker-Meldung (im Vordergrund) */
.marquee-container
 {
  position: relative;
  z-index: 9999 !important;
  background-color: #DCF0FF !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  height: 30px;
  line-height: 30px;
  overflow: hidden;
}

/* Haupt-iFrame (maximale Nutzung des verbleibenden Raums) */
iframe.haupt-iframe
 {
  position: relative;
  z-index: 1 !important;
  width: 100%;
  height: calc(100vh - 165px);         /* Gesamthöhe minus Ticker (30px) minus untere iFrames (~50px) minus Abstände */
  min-height: 600px;                   /* Mindesthöhe für sehr kleine Fenster (löst bei Bedarf Scrollbalken aus) */
  border: none;
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
 }

/* Untere 4 iFrames: Kompakt & flach */
iframe.bodentext-iframe
 {
  width: 100%;
  height: 120px;                       /* hier erhöhen (z. B. 60px, 80px, 100px etc.) */
  min-height: 35px;
  border: none;
  display: block;
  box-sizing: border-box;
  padding: 4px;                        /* Padding leicht reduziert */
 }

/********************************************************
 * Diashow-Hintergrund & Textbox (StartSeiteOn.php)     *
 ********************************************************/
/* Container für die Bilder */
.fadein
 {
  position: relative;
  width: 100%;
 }

/* Die Park-Bilder liegen absolut im Hintergrund */
.fadein img
 {
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 1;                          /* Hintergrundebene */
 }

/* Die Textbox wird ABSOLUT genau über die Bilder gelegt */
div.textbox, div.speztextbox
 {
  position: absolute;                  /* damit sie über den Bildern schwebt! */
  top: 10px;
  left: 10px;
  z-index: 10;                         /* schiebt die Box sicher vor die Bilder */
  background-color: #DCF0FF;           /* originale Hintergrundfarbe aus dem body (#DCF0FF) */
  padding: 15px;
  border-radius: 5px;                  /* Optionale saubere Ecken */
 }

/* Wenn Hintergrund BILD "EIN" ist -> Transparenz & Hover aktivieren */
/* Eingabefläche im Ruhezustand schwach (Bild stark sichtbar) */
div.textbox
 {
  opacity: 0.4;                        /* 40% Deckkraft -> Bild scheint stark durch */
  transition: opacity 0.3s ease;       /* Macht den Übergang beim Hovern weich */
 }

/* erst wenn der Cursoir darüberfährt, Eingabefläche stark/deckend für gute Lesbarkeit */
div.textbox:hover
 {
  opacity: 0.95;                       /* 95% Deckkraft -> Formular klar lesbar */
 }

/* Wenn Hintergrund Bild "AUS" ist -> 100% deckend */
div.speztextbox
 {
  opacity: 1.0;
 }

h1.spezial
 {
  color : red;
  border: solid red
 }
h2.spezial
 {
  color : blue;
  padding: 6px !important;
 }
h3.spezial
 {
  color : blue;
  font-size : 100%;
  font-style : italic;
  padding: 6px !important;
 }
p.spezial
 {
  color : blue;
  border: solid red;
 }
hr.spezial
 {
  color: gray;
 }

a, a:link, a:visited, a:active, A:hover
 {
  color: green;
  font-family: "Times Roman",serif;
  text-decoration: none;
/*  font-size: 14px; */
  font-style: italic
 }