/* ============================================================
   iframe-style.css
   Styling für iFrames im Stil der HTSV content-left Sektion
   Quelle: https://www.htsv.org/jugend/kindeswohl/
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties (Farbpalette & Basis-Design)
   ---------------------------------------------------------- */
:root {
  --color-primary:      #005a8e;   /* HTSV-Blau (Navigation, Links) */
  --color-primary-dark: #003f66;   /* Dunkleres Blau für Hover */
  --color-accent:       #0080c0;   /* Hellblau für Akzente */
  --color-text:         #454242;   /* Standard-Textfarbe */
  --color-text-muted:   #666666;   /* Gedämpfter Text (Labels etc.) */
  --color-border:       #cccccc;   /* Rahmen / Trennlinien */
  --color-border-light: #e0e0e0;   /* Sehr heller Rahmen */
  --color-bg:           #ffffff;   /* Hintergrund Inhalt */
  --color-bg-sidebar:   #f4f4f4;   /* Hintergrund Sidebar */
  --color-bg-subtle:    #f9f9f9;   /* Dezent heller Hintergrund */

  --font-family-base:   'Open Sans',Helvetica,Arial,sans-serif;
  --font-size-base:     14px;
  --font-size-sm:       12px;
  --font-size-lg:       18px;
  --line-height-base:   1.6;

  --border-radius:      4px;
  --box-shadow-subtle:  0 1px 3px rgba(0, 0, 0, 0.10);
  --box-shadow-medium:  0 2px 6px rgba(0, 0, 0, 0.15);

  --spacing-no:         0px;
  --spacing-xs:         4px;
  --spacing-sm:         8px;
  --spacing-md:         16px;
  --spacing-lg:         24px;
  --spacing-xl:         32px;
}


/* ----------------------------------------------------------
   Layout: content-left Bereich (zweispaltig)
   ---------------------------------------------------------- */
body {
  font-family:   var(--font-family-base);
  font-size:     var(--font-size-base);
  line-height:   var(--line-height-base);
  color:         var(--color-text);
  background:    var(--color-bg);
  padding:       var(--spacing-no) var(--spacing-no);
  max-width:     900px;
}
.header {
  font-size:     var(--font-size-lg);
  font-weight:   bold;
  color:         var(--color-text);
  margin-bottom: var(--spacing-md);
}
.label {
  font-size:     var(--font-size-base);
  color:         var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

/* ----------------------------------------------------------
   Basis-Reset & Normalisierung für den iframe-Kontext
   ---------------------------------------------------------- */
iframe {
  /* Veraltete Attribute deaktivieren */
  border:            none;
  outline:           none;

  /* Sicheres Standardverhalten */
  display:           block;
  background:        var(--color-bg);

  /* Scrollbalken erst bei Bedarf */
  overflow:          auto;
}


/* ----------------------------------------------------------
   Standard-iframe: eingebettet, volle Breite
   ---------------------------------------------------------- */
.iframe-default {
  width:             100%;
  min-height:        300px;
  border:            1px solid var(--color-border);
  border-radius:     var(--border-radius);
  box-shadow:        var(--box-shadow-subtle);
  margin:            var(--spacing-md) 0;
}


/* ----------------------------------------------------------
   Eingebetteter iframe mit Überschrift & Umrandung
   (z. B. für externe Inhalte / Formulare)
   ---------------------------------------------------------- */
.iframe-block {
  margin:            var(--spacing-lg) 0;
  border:            1px solid var(--color-border);
  border-radius:     var(--border-radius);
  overflow:          hidden;
  box-shadow:        var(--box-shadow-subtle);
  background:        var(--color-bg);
}

.iframe-block__header {
  background:        var(--color-primary);
  color:             #ffffff;
  font-size:         var(--font-size-lg);
  font-weight:       bold;
  padding:           var(--spacing-sm) var(--spacing-md);
  margin:            0;
}

.iframe-block__frame {
  width:             100%;
  min-height:        400px;
  border:            none;
  display:           block;
}

.iframe-block__footer {
  background:        var(--color-bg-sidebar);
  border-top:        1px solid var(--color-border-light);
  font-size:         var(--font-size-sm);
  color:             var(--color-text-muted);
  padding:           var(--spacing-xs) var(--spacing-md);
}


/* ----------------------------------------------------------
   Responsiver iframe (behält Seitenverhältnis 16:9)
   ---------------------------------------------------------- */
.iframe-responsive {
  position:          relative;
  width:             100%;
  padding-top:       56.25%;   /* 16:9 */
  overflow:          hidden;
  border:            1px solid var(--color-border);
  border-radius:     var(--border-radius);
  box-shadow:        var(--box-shadow-medium);
  margin:            var(--spacing-md) 0;
  background:        var(--color-bg-subtle);
}

.iframe-responsive iframe {
  position:          absolute;
  top:               0;
  left:              0;
  width:             100%;
  height:            100%;
  border:            none;
}

/* Variante 4:3 */
.iframe-responsive--4-3 {
  padding-top:       75%;
}


/* ----------------------------------------------------------
   Sidebar-iframe (schmale Darstellung, z. B. Karte / Widget)
   ---------------------------------------------------------- */
.iframe-sidebar {
  width:             100%;
  height:            250px;
  border:            1px solid var(--color-border);
  border-radius:     var(--border-radius);
  box-shadow:        var(--box-shadow-subtle);
  background:        var(--color-bg-sidebar);
  margin:            var(--spacing-sm) 0;
}


/* ----------------------------------------------------------
   Highlight-iframe (farbiger linker Rand, ähnlich Infoboxen)
   ---------------------------------------------------------- */
.iframe-highlight {
  width:             100%;
  min-height:        300px;
  border:            1px solid var(--color-border-light);
  border-left:       4px solid var(--color-primary);
  border-radius:     var(--border-radius);
  box-shadow:        var(--box-shadow-subtle);
  padding:           0;
  margin:            var(--spacing-md) 0;
  background:        var(--color-bg-subtle);
}


/* ----------------------------------------------------------
   Laden-Overlay (optionaler Ladezustand per JS hinzufügen)
   ---------------------------------------------------------- */
.iframe-wrapper {
  position:          relative;
}

.iframe-wrapper--loading::before {
  content:           '';
  position:          absolute;
  inset:             0;
  background:        var(--color-bg-subtle);
  z-index:           10;
  display:           flex;
  align-items:       center;
  justify-content:   center;
}

.iframe-wrapper--loading::after {
  content:           'Wird geladen …';
  position:          absolute;
  top:               50%;
  left:              50%;
  transform:         translate(-50%, -50%);
  color:             var(--color-text-muted);
  font-size:         var(--font-size-sm);
  z-index:           11;
}


/* ----------------------------------------------------------
   Typografie innerhalb content-left (Referenz-Stile)
   ---------------------------------------------------------- */
.content-left h1 {
  font-size:         22px;
  font-weight:       bold;
  color:             var(--color-primary-dark);
  border-bottom:     2px solid var(--color-primary);
  padding-bottom:    var(--spacing-xs);
  margin:            0 0 var(--spacing-md);
}

.content-left h2,
.content-left h3 {
  font-size:         16px;
  font-weight:       bold;
  color:             var(--color-primary);
  margin:            var(--spacing-lg) 0 var(--spacing-sm);
}

.content-left a {
  color:             var(--color-accent);
  text-decoration:   none;
}

.content-left a:hover {
  color:             var(--color-primary-dark);
  text-decoration:   underline;
}

.content-left p {
  margin:            0 0 var(--spacing-md);
}

.content-left ul,
.content-left ol {
  margin:            0 0 var(--spacing-md) var(--spacing-lg);
  padding:           0;
}

.content-left li {
  margin-bottom:     var(--spacing-xs);
}


/* ----------------------------------------------------------
   Responsive Anpassungen
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .content-left {
    padding:         var(--spacing-md);
  }

  .iframe-block__frame {
    min-height:      260px;
  }

  .iframe-sidebar {
    height:          200px;
  }
}

@media (max-width: 480px) {
  .iframe-block__header {
    font-size:       var(--font-size-base);
  }
}