/*
  Präsentations-Template BdB Passau
  - schmaler animierter Header (Blau/Hellblau/Weiss)
  - fixe Content-Sektionen: 100%, 50/50, 100%, 65/35
*/

:root{
  --bdb-blue-0: #ffffff;
  --bdb-blue-1: #eaf6ff;
  --bdb-blue-2: #d6efff;
  --bdb-blue-3: #bfe6ff;
  --bdb-blue-4: #8fd4ff;
  --bdb-blue-5: #2b8fd6;
  --bdb-text:   #1b2a35;
  --bdb-muted:  #3a5566;
  --bdb-line:   rgba(27,42,53,.18);
}

body{
  font: normal 1em 'Helvetica', Arial, sans-serif;
  margin: 0;
  color: var(--bdb-text);
  background: #ffffff;
}

a {color: #0084C3; text-decoration: none; line-height: inherit; font-weight: bold; }
a:hover {color: #333; text-decoration: underline; }
a:focus {color: #333; outline: none; }

/* Wrapper */
.bdb-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ---------------------------
   HEADER (schmal + lebendig)
---------------------------- */

.bdb-header{
  margin: 0;
}

/* Topbar mit animiertem Verlauf + digitalem Pattern */
.bdb-topbar{
  position: relative;
  padding: 6px 0;          /* schmaler! */
  overflow: hidden;
}

/* Verlauf (lebt) */
.bdb-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    var(--bdb-blue-1),
    var(--bdb-blue-2),
    var(--bdb-blue-3),
    var(--bdb-blue-1)
  );
  background-size: 400% 400%;
  animation: bdbGradient 18s ease-in-out infinite;
}

/* Digital-Pattern (lebt) – nur Blau/Hellblau/Weiß */
.bdb-topbar::after{
  content:"";
  position:absolute;
  inset:-60px;
  opacity: .35;
  background-repeat: repeat;
  background-size: 520px 220px;
  /* SVG-Pattern: Linien + Nodes (hellblau), transparenter Hintergrund */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Cg fill='none' stroke='%238fd4ff' stroke-width='1'%3E%3Cpath d='M20 40 H150 M150 40 V120 M150 120 H260 M260 120 V70 M260 70 H360 M360 70 V160 M360 160 H500'/%3E%3Cpath d='M60 180 H200 M200 180 V90 M200 90 H310 M310 90 V30 M310 30 H470'/%3E%3C/g%3E%3Cg fill='%23bfe6ff'%3E%3Ccircle cx='20' cy='40' r='3'/%3E%3Ccircle cx='150' cy='40' r='3'/%3E%3Ccircle cx='150' cy='120' r='3'/%3E%3Ccircle cx='260' cy='120' r='3'/%3E%3Ccircle cx='260' cy='70' r='3'/%3E%3Ccircle cx='360' cy='70' r='3'/%3E%3Ccircle cx='360' cy='160' r='3'/%3E%3Ccircle cx='500' cy='160' r='3'/%3E%3Ccircle cx='60' cy='180' r='3'/%3E%3Ccircle cx='200' cy='180' r='3'/%3E%3Ccircle cx='200' cy='90' r='3'/%3E%3Ccircle cx='310' cy='90' r='3'/%3E%3Ccircle cx='310' cy='30' r='3'/%3E%3Ccircle cx='470' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E");
  animation: bdbPattern 26s linear infinite;
  mix-blend-mode: multiply;
}

/* Inhalt über dem animierten Hintergrund */
.bdb-topbar > .bdb-wrap,
.bdb-topbar .bdb-wrap{
  position: relative;
  z-index: 1;
}

@keyframes bdbGradient{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bdbPattern{
  0%   { background-position: 0px 0px; }
  100% { background-position: 520px 220px; }
}

/* ganz dezente Trennlinie unter der Topbar */
.bdb-topbar-sep{
  height: 6px;
  background: linear-gradient(to bottom,
    rgba(27,42,53,.30),
    rgba(27,42,53,.08)
  );
}

/* Brand-Zeile */
.bdb-brandrow{
  display: flex;
  align-items: center;
  gap: 14px;
}

.bdb-brand-left{
  flex: 0 0 auto;
}

.bdb-brand-center{
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.15;
}

.bdb-brand-right{
  flex: 0 0 10px; /* Platzhalter, damit Center wirklich optisch mittig bleibt */
}

.bdb-logo{
  height: 46px;   /* kleiner -> Header wird schmal */
  width: auto;
  display: block;
}

.bdb-title{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.bdb-subtitle{
  font-size: .92rem;
  color: var(--bdb-muted);
}

/* mobile: Titel etwas kleiner, Logos nicht riesig */
@media screen and (max-width: 36.5em){
  .bdb-logo{ height: 40px; }
  .bdb-title{ font-size: 1.0rem; }
  .bdb-subtitle{ font-size: .88rem; }
}

/* ---------------------------
   CONTENT
---------------------------- */

.second-content{
  background: #ffffff;
  padding: 26px 0;
}

/* Sektionen untereinander, ohne „Verschieben“ */
.content-section{
  margin: 0 0 22px 0;
}
.content-section:last-child{
  margin-bottom: 0;
}

/* kleiner Abstand zwischen Grid-Spalten */
.bdb-row-gap{
  margin-left: -10px;
  margin-right: -10px;
}
.bdb-row-gap > [class*="fg"]{
  padding-left: 10px;
  padding-right: 10px;
}

/* 65:35 als Flex (echter 65/35 statt 66/33) */
.bdb-6535{
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.bdb-6535-main{
  flex: 0 1 75%;
  min-width: 0;
}

.bdb-6535-side{
  flex: 0 1 25%;
  min-width: 0;
}

/* 65:35 auf mobil untereinander */
@media screen and (max-width: 48em){
  .bdb-6535{
    flex-direction: column;
  }
  .bdb-6535-main,
  .bdb-6535-side{
    flex-basis: auto;
  }
}

/* Fitgrid defaults */
.fg1,.fg2,.fg3,.fg4,.fg5,.fg6,.fg7,.fg8,.fg9,.fg10,.fg11,.fg12 {
  background: transparent;
  color: #333;
}
.fg-no-gutter > [class*="fg"] {
  height: auto;
  background: none;
}

/* === HARD FIX 75/25 (auch bei WBCE Wrapper + iframe width=100%) === */
.content-section.content-7525 > .bdb-7525{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 22px !important;
}

/* WICHTIG: Flex-Items müssen schrumpfen dürfen */
.content-section.content-7525 > .bdb-7525 > .bdb-7525-main,
.content-section.content-7525 > .bdb-7525 > .bdb-7525-side{
  min-width: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Hauptbereich: darf schrumpfen */
.content-section.content-7525 > .bdb-7525 > .bdb-7525-main{
  flex: 1 1 75% !important;
  width: auto !important;
}

/* Seitenspalte: feste 25% */
.content-section.content-7525 > .bdb-7525 > .bdb-7525-side{
  flex: 0 0 25% !important;
  width: auto !important;
}

/* iframe in Main: bleibt innerhalb der Spalte */
.content-section.content-7525 > .bdb-7525 > .bdb-7525-main iframe{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobil: wieder untereinander */
@media screen and (max-width: 48em){
  .content-section.content-7525 > .bdb-7525{
    flex-direction: column !important;
  }
}