/* =======================
   Gutenberg Block Styles
   ======================= */

/* Grundabstände zwischen Blöcken */
.wp-block { margin-block: 0 1rem; }
.wp-block + .wp-block { margin-top: 1rem; }
@media (min-width:1024px){ .wp-block + .wp-block { margin-top: 1.25rem; } }

/* ---------- Alignments ---------- */
.alignwide{ width: var(--wrap); margin-inline:auto; }
.alignfull{
  width:100vw; max-width:100vw; margin-left:50%; transform:translateX(-50%);
}
.alignleft{ float:left; margin: .25rem 1rem .75rem 0; }
.alignright{ float:right; margin: .25rem 0 .75rem 1rem; }
.aligncenter{ margin-inline:auto; text-align:center; }
@media (max-width:639px){
  .alignleft,.alignright{ float:none; margin: .5rem 0; }
}

/* ---------- Image / Figure ---------- */
.wp-block-image{ margin:0; }
.wp-block-image img{ display:block; width:100%; height:auto; border-radius:.25rem; }
.wp-block-image .alignleft img, .wp-block-image .alignright img{ width:auto; max-width:100%; }
figure.wp-block-image{ margin:0; }
.wp-element-caption, .wp-block-image figcaption{
  color:var(--muted); font-size:.92rem; margin-top:.35rem; text-align:left;
}

/* ---------- Gallery ---------- */
.wp-block-gallery{ gap:.5rem; }
.wp-block-gallery.has-nested-images figure{ margin:0; }
.wp-block-gallery img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:.2rem; }
.wp-block-gallery.is-style-square-crop img{ aspect-ratio:1/1; }
.wp-block-gallery.is-style-rectangular img{ aspect-ratio:16/9; }
.wp-block-gallery figcaption{ color:#fff; background:rgba(0,0,0,.55); padding:.4rem .6rem; border-radius:.2rem; }

/* ---------- Embed / oEmbed / iframes ---------- */
.wp-block-embed, .wp-block-video{ margin: .5rem 0; }
.wp-block-embed__wrapper{ position:relative; }
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object,
.wp-block-video video{
  width:100%; height:auto; display:block;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-embed.provider-youtube .wp-block-embed__wrapper,
.wp-block-embed.provider-vimeo .wp-block-embed__wrapper{
  aspect-ratio:16/9;
}
.wp-block-embed figcaption{ color:var(--muted); font-size:.92rem; margin-top:.35rem; }

/* ---------- Cover ---------- */
.wp-block-cover{ border-radius:.25rem; overflow:hidden; }
.wp-block-cover__inner-container{ width:min(48rem, 100% - 2rem); }
.wp-block-cover.has-background-dim::before{ opacity:.35; }
.wp-block-cover .wp-block-heading,
.wp-block-cover p{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.wp-block-cover{ min-height: 38vh; }

/* ---------- Media & Text ---------- */
.wp-block-media-text{ gap:1rem; }
.wp-block-media-text .wp-block-media-text__content{ padding:0; }
.wp-block-media-text__media img{ width:100%; height:auto; display:block; border-radius:.25rem; }
@media (min-width:1024px){
  .wp-block-media-text{ align-items:start; }
}

/* ---------- Columns ---------- */
.wp-block-columns{ gap:1rem; }
@media (min-width:1024px){ .wp-block-columns{ gap:1.25rem; } }
.wp-block-column > .wp-block{ margin-top:.85rem; }

/* ---------- Quote / Pullquote ---------- */
.wp-block-quote{
  border-left:3px solid var(--text);
  margin: .5rem 0; padding: .25rem 0 .25rem 1rem;
  font-size:clamp(1rem,.96rem + .25vw,1.125rem);
}
.wp-block-quote cite, .wp-block-quote footer{ color:var(--muted); font-size:.92rem; }
.wp-block-pullquote{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:1.25rem 0; padding:1rem 0; text-align:center;
}
.wp-block-pullquote blockquote{ border:0; padding:0; margin:0; }
.wp-block-pullquote p{ font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem); line-height:1.25; }
.wp-block-pullquote cite{ display:block; margin-top:.5rem; color:var(--muted); }

/* ---------- Lists ---------- */
.wp-block-list{ padding-left:1.25rem; }
.wp-block-list li{ margin:.25rem 0; }
.wp-block-list.is-style-checklist li{ list-style: "✓  "; }

/* ---------- Buttons ---------- */
.wp-block-buttons{ display:flex; gap:.6rem; flex-wrap:wrap; }
.wp-block-button .wp-block-button__link{
  display:inline-block; padding:.55rem .9rem; border-radius:.35rem;
  background:var(--accent); color:#fff; text-decoration:none; border:1px solid var(--accent);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.wp-block-button .wp-block-button__link:hover{ opacity:.9; text-decoration:none; }

/* ---------- Table ---------- */
.wp-block-table{ overflow:auto; }
.wp-block-table table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.wp-block-table td, .wp-block-table th{
  border:1px solid var(--line); padding:.5rem .6rem; text-align:left;
}
.wp-block-table th{ background:#f7f7f7; font-weight:600; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd){ background:#fafafa; }

/* ---------- Code / Preformatted ---------- */
.wp-block-code, .wp-block-preformatted{
  background:#f7f7f9; border:1px solid #eee; border-radius:.25rem;
  padding:.8rem 1rem; overflow:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94rem; line-height:1.5;
}

/* ---------- Separator ---------- */
.wp-block-separator{ border:0; border-top:1px solid var(--line); margin:1rem 0; height:0; }
.wp-block-separator.is-style-wide{ width:var(--wrap); margin-inline:auto; }
.wp-block-separator.is-style-dots::before{ content:"···"; letter-spacing:.6em; color:var(--muted); display:block; text-align:center; }

/* ---------- File Block ---------- */
.wp-block-file{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.wp-block-file__button{
  padding:.45rem .8rem; border-radius:.35rem; background:var(--accent);
  color:#fff; text-decoration:none; border:1px solid var(--accent);
}
.wp-block-file a:not(.wp-block-file__button){ text-decoration:underline; }

/* ---------- Audio / Video ---------- */
.wp-block-audio audio, .wp-block-video video{ width:100%; height:auto; display:block; }

/* ---------- Group / Stack / Row ---------- */
.wp-block-group{ padding:0; }
.wp-block-group.has-background{ padding:1rem; border:1px solid var(--line); border-radius:.25rem; }
.wp-block-group > .wp-block-heading:first-child{ margin-top:0; }

/* ---------- Headings in Content ---------- */
.wp-block-post-content h2{ margin-top:1rem; }
.wp-block-post-content h3{ margin-top:.85rem; }

/* ---------- Dark Mode freundlich ---------- */
@media (prefers-color-scheme: dark){
  .wp-block-table th{ background:#151515; }
  .wp-block-code, .wp-block-preformatted{ background:#0e0e0f; border-color:#1c1c1c; }
  .wp-block-pullquote{ border-color:#222; }
  .wp-block-gallery figcaption{ background:rgba(0,0,0,.55); }
}

/* ==== Article media: side floats (Zeitungsstil) ==== */
.tb-article__content{ /* Lesbarkeit */
  --side-media-max: clamp(220px, 30vw, 360px); /* Zielbreite Bild am Rand */
  --side-gap: 1.25rem;
  hyphens:auto;
}
.tb-article__content p,
.tb-article__content li{ overflow-wrap:anywhere; }

/* Standard-Figure */
.tb-article__content figure{ margin:0; }
.tb-article__content figure img{
  display:block; width:100%; height:auto; border-radius:.25rem;
}
.tb-article__content figcaption,
.tb-article__content .wp-element-caption{
  color:var(--muted); font-size:.92rem; line-height:1.35;
  margin-top:.35rem;
}

/* Bild LINKS: Text rechts fließt sauber */
.tb-article__content .wp-block-image.alignleft,
.tb-article__content figure.alignleft{
  float:left;
  width:var(--side-media-max);
  margin: .2rem var(--side-gap) .75rem 0;
}

/* Bild RECHTS: Text links fließt sauber */
.tb-article__content .wp-block-image.alignright,
.tb-article__content figure.alignright{
  float:right;
  width:var(--side-media-max);
  margin: .2rem 0 .75rem var(--side-gap);
}

/* Captions bekommen die gleiche Breite wie das Bild (keine „ausladenden“ Zeilen) */
.tb-article__content .wp-block-image.alignleft figcaption,
.tb-article__content .wp-block-image.alignright figcaption,
.tb-article__content figure.alignleft figcaption,
.tb-article__content figure.alignright figcaption{
  max-width:100%;
  text-align:left;
}

/* Überschriften brechen Floats (sonst kleben sie daneben) */
.tb-article__content h2,
.tb-article__content h3,
.tb-article__content h4{ clear:both; margin-top:1.2rem; }

/* Tabellen/Embeds brechen Floats ebenfalls, damit nichts gequetscht wird */
.tb-article__content .wp-block-table,
.tb-article__content .wp-block-embed,
.tb-article__content .wp-block-video,
.tb-article__content .wp-block-gallery,
.tb-article__content .wp-block-cover,
.tb-article__content .wp-block-columns{ clear:both; }

/* Mobile/Tablet: Floats einklappen -> Medien volle Breite über Text */
@media (max-width: 899px){
  .tb-article__content .wp-block-image.alignleft,
  .tb-article__content .wp-block-image.alignright,
  .tb-article__content figure.alignleft,
  .tb-article__content figure.alignright{
    float:none; width:100%;
    margin: .5rem 0 .9rem 0;
  }
  .tb-article__content figcaption,
  .tb-article__content .wp-element-caption{ text-align:left; }
}

/* Feintuning: Zitate/Listen neben Floats nicht zu schmal werden lassen */
@media (min-width:900px){
  .tb-article__content blockquote{ margin-left:0; margin-right:0; }
}

/* Optional: leichtes Trennen zum Folgeabsatz nach einem Float */
.tb-article__content .wp-block-image.alignleft + p,
.tb-article__content .wp-block-image.alignright + p,
.tb-article__content figure.alignleft + p,
.tb-article__content figure.alignright + p{
  margin-top:.1rem;
}


/* ==== Floats für Gutenberg-Bilder inkl. Lightbox-Container ==== */
.tb-article__content{ --side-gap:1.25rem; --side-max: clamp(220px, 30vw, 360px); }

/* gemeinsame Basen */
.tb-article__content :where(.wp-block-image, .wp-lightbox-container) img{
  display:block; width:100%; height:auto; border-radius:.25rem;
}
.tb-article__content :where(.wp-block-image, .wp-lightbox-container) figcaption,
.tb-article__content :where(.wp-block-image, .wp-lightbox-container) .wp-element-caption{
  color:var(--muted); font-size:.92rem; margin-top:.35rem; text-align:left;
}

/* Desktop: Float + Abstand – LEFT = rechts Abstand, RIGHT = links Abstand */
@media (min-width: 900px){
  /* LEFT */
  .tb-article__content :where(.wp-block-image.alignleft, .wp-lightbox-container.alignleft){
    float:left;
    width:auto; max-width:var(--side-max);
    margin: .2rem var(--side-gap) .75rem 0;
  }
  /* RIGHT */
  .tb-article__content :where(.wp-block-image.alignright, .wp-lightbox-container.alignright){
    float:right;
    width:auto; max-width:var(--side-max);
    margin: .2rem 0 .75rem var(--side-gap);
  }
  /* Falls der alignleft/alignright am inneren Anchor sitzt */
  .tb-article__content .wp-block-image :where(.wp-lightbox-container.alignleft, .wp-lightbox-container.alignright){
    display:block;
  }
  /* Überschriften und breite Blöcke sollen Floats brechen */
  .tb-article__content h2,
  .tb-article__content h3,
  .tb-article__content h4,
  .tb-article__content .wp-block-gallery,
  .tb-article__content .wp-block-embed,
  .tb-article__content .wp-block-video,
  .tb-article__content .wp-block-columns,
  .tb-article__content .wp-block-cover{ clear:both; }
}

/* Mobile/Tablet: Floats einklappen */
@media (max-width: 899px){
  .tb-article__content :where(.wp-block-image.alignleft, .wp-block-image.alignright,
                               .wp-lightbox-container.alignleft, .wp-lightbox-container.alignright){
    float:none; max-width:100%;
    margin: .5rem 0 .9rem 0;
  }
}

/* ===== Lightbox-Bilder seitlich (wp-lightbox-container) ===== */
.tb-article__content{ --side-gap:1.25rem; --side-max: clamp(220px, 30vw, 360px); }

/* Basis: Bild + Caption im Lightbox-Container */
.tb-article__content .wp-lightbox-container img{
  display:block; width:100%; height:auto; border-radius:.25rem;
}
.tb-article__content .wp-lightbox-container figcaption,
.tb-article__content .wp-lightbox-container .wp-element-caption{
  color:var(--muted); font-size:.92rem; margin-top:.35rem; text-align:left;
}

/* Desktop: float + Abstand – LEFT = rechts Abstand, RIGHT = links Abstand */
@media (min-width:900px){
  .tb-article__content .wp-lightbox-container.alignleft{
    float:left; max-width:var(--side-max);
    margin: .2rem var(--side-gap) .75rem 0;
  }
  .tb-article__content .wp-lightbox-container.alignright{
    float:right; max-width:var(--side-max);
    margin: .2rem 0 .75rem var(--side-gap);
  }
  /* Falls Gutenberg die Align-Klasse am übergeordneten .wp-block-image setzt,
     der Lightbox-Container aber innen sitzt → trotzdem floaten */
  .tb-article__content .wp-block-image.alignleft > .wp-lightbox-container{ 
    float:left; max-width:var(--side-max);
    margin: .2rem var(--side-gap) .75rem 0;
  }
  .tb-article__content .wp-block-image.alignright > .wp-lightbox-container{ 
    float:right; max-width:var(--side-max);
    margin: .2rem 0 .75rem var(--side-gap);
  }
  /* Breite Blöcke brechen Floats sauber */
  .tb-article__content h2,
  .tb-article__content h3,
  .tb-article__content h4,
  .tb-article__content .wp-block-gallery,
  .tb-article__content .wp-block-embed,
  .tb-article__content .wp-block-video,
  .tb-article__content .wp-block-columns,
  .tb-article__content .wp-block-cover,
  .tb-article__content .wp-block-table{ clear:both; }
}

/* Mobile/Tablet: kein Float, volle Breite */
@media (max-width:899px){
  .tb-article__content .wp-lightbox-container.alignleft,
  .tb-article__content .wp-lightbox-container.alignright,
  .tb-article__content .wp-block-image.alignleft > .wp-lightbox-container,
  .tb-article__content .wp-block-image.alignright > .wp-lightbox-container{
    float:none; max-width:100%;
    margin: .5rem 0 .9rem 0;
  }
}