/* conntxt Bobble v1.0
 * CSS-Variablen — passt sich dem conntxt Theme an.
 */

:root {
  --bobble-accent:  var(--cnb-accent,  var(--gold,   #C9A84C));
  --bobble-bg:      var(--cnb-bg,      var(--bg,     #ffffff));
  --bobble-surf:    var(--cnb-surf,    var(--surf2,  #fffdf5));
  --bobble-bd:      var(--cnb-bd,      var(--bd,     rgba(201,168,76,0.3)));
  --bobble-text:    var(--cnb-text,    var(--text,   #1a1a1a));
  --bobble-text2:   var(--cnb-text2,   var(--text2,  #555555));
  --bobble-radius:  var(--cnb-radius,  var(--r-corner, 14px));
  --bobble-font:    var(--cnb-font,    var(--font-ui, Arial Black, Arial, sans-serif));
  --bobble-width:   100%; /* wird per inline style überschrieben */
}

/* ── Wrapper: Layout ── */
.cn-bobble {
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* Volle Breite — block */
.cn-bobble--align-block {
  display: block;
  width: 100%;
}

/* Links — Text umfließt rechts */
.cn-bobble--align-left {
  float: left;
  width: var(--bobble-width);
  margin-right: 20px;
  margin-bottom: 12px;
}

/* Rechts — Text umfließt links */
.cn-bobble--align-right {
  float: right;
  width: var(--bobble-width);
  margin-left: 20px;
  margin-bottom: 12px;
}

/* Zentriert — alleinstehend, keine Umflüsse */
.cn-bobble--align-center {
  display: block;
  width: var(--bobble-width);
  margin-left: auto;
  margin-right: auto;
}

/* ── Toggle Button ── */
.cn-bobble__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bobble-surf);
  border: 1.5px solid var(--bobble-bd);
  border-radius: 0 var(--bobble-radius) 0 var(--bobble-radius);
  padding: 12px 18px;
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s;
  box-sizing: border-box;
}
.cn-bobble__btn:hover,
.cn-bobble__btn--open {
  background: rgba(201,168,76,.06);
  border-color: var(--bobble-accent);
}

.cn-bobble__label {
  font-family: var(--bobble-font);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bobble-accent);
  flex: 1;
  -webkit-font-smoothing: antialiased;
}
.cn-bobble__icon {
  font-size: 22px;
  color: var(--bobble-accent);
  line-height: 1;
  flex-shrink: 0;
  font-family: Arial, sans-serif;
  font-weight: 300;
}

/* ── Body ── */
.cn-bobble__body {
  border: 1.5px solid var(--bobble-accent);
  border-top: none;
  border-radius: 0 0 0 var(--bobble-radius);
  background: var(--bobble-bg);
  overflow: hidden;
}
.cn-bobble__inner {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--bobble-text2);
  line-height: 1.75;
}
.cn-bobble__inner > *:first-child { margin-top: 0; }
.cn-bobble__inner > *:last-child  { margin-bottom: 0; }

/* Responsive: float aufheben auf Mobil */
@media (max-width: 600px) {
  .cn-bobble--align-left,
  .cn-bobble--align-right {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Unterer Schließen-Button ── */
.cn-bobble__btn--bottom {
  border-top: 1px solid var(--bobble-bd);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-top: 0;
}

/* ── Header Bild ── */
.cn-bobble__header {
  width: 100%;
  overflow: hidden;
  border: 1.5px solid var(--bobble-accent);
  border-radius: 0 var(--bobble-radius) 0 0;
  border-bottom: none;
  line-height: 0;
}
.cn-bobble__header-img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  display: block;
}
/* Wenn Header da: Button-Radius oben anpassen */
.cn-bobble__header + .cn-bobble__btn {
  border-top: none;
  border-radius: 0;
}