/*
 * blocks-bridge.css
 * Verbindet native Gutenberg-Core-Blöcke mit dem bestehenden Gellißen-Design.
 * Wird im Frontend UND im Block-Editor geladen (visuelle Bearbeitung = echtes Design).
 * Ändert NICHT das bestehende styles.css – nur Ergänzungen für Block-Markup.
 */

/* --- Inhaltsbreite & Full-Bleed-Sektionen ------------------------------- */
.entry-content { }
/* Reine Text-/Standardblöcke (z. B. Impressum) lesbar zentrieren … */
.entry-content > :where(:not(.alignfull):not(.alignwide):not(.section):not(.wp-block-cover)) {
  max-width: var(--maxw-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* … Sektionen/Cover laufen randlos über die volle Breite. */
.entry-content > .alignfull,
.entry-content > .section,
.entry-content > .wp-block-cover { max-width: none; }
.entry-content > .alignwide { max-width: var(--maxw); margin-inline: auto; }

/* Gruppen mit unseren Layout-Klassen (Section/Container) erben styles.css. */
.wp-block-group.section { display: block; }

/* --- Buttons: Core-Button auf .btn-Design bringen (Block-Stile) ---------- */
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 1.05em 1.7em; border-radius: var(--r); border: 1px solid transparent;
  line-height: 1; letter-spacing: .01em; text-decoration: none;
  transition: background .22s, color .22s, border-color .22s, transform .22s var(--ease), box-shadow .22s;
}
/* Primär (Standard) */
.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-primary .wp-block-button__link {
  background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(15,122,135,.28);
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background: var(--accent-d); color:#fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,122,135,.34);
}
/* Ghost */
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent; color: var(--accent-d); border-color: var(--accent); box-shadow:none;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--accent); color:#fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,122,135,.26);
}
/* Hell (auf dunklem Grund) */
.wp-block-button.is-style-light .wp-block-button__link {
  background:#fff; color: var(--ink); box-shadow:none;
}
.wp-block-button.is-style-light .wp-block-button__link:hover { background: var(--accent-t); color: var(--accent-d); }
/* Auf-Dunkel (CTA) */
.wp-block-button.is-style-on-ink .wp-block-button__link { background: var(--accent); color:#fff; box-shadow:none; }
.wp-block-button.is-style-on-ink .wp-block-button__link:hover { background:#fff; color: var(--ink); }

/* --- Cover als Hero / CTA-Band ----------------------------------------- */
.wp-block-cover.is-style-hero,
.wp-block-cover.is-style-cta {
  border-radius: 0; min-height: 0; padding: var(--section-y) 0;
  align-items: center;
}
.wp-block-cover.is-style-hero { min-height: clamp(420px, 60vh, 620px); }
.wp-block-cover.is-style-hero .wp-block-cover__inner-container,
.wp-block-cover.is-style-cta .wp-block-cover__inner-container {
  max-width: var(--maxw); width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
.wp-block-cover.is-style-hero .wp-block-cover__inner-container { max-width: 760px; margin-inline: 0; padding-inline: var(--gutter); }
/* Hero-Overlay: warmes Papier statt schwarz */
.wp-block-cover.is-style-hero > .wp-block-cover__background { background: linear-gradient(100deg, var(--paper) 38%, rgba(247,245,239,.55) 70%, rgba(247,245,239,.15)) !important; opacity:1 !important; }
.wp-block-cover.is-style-hero :where(h1,h2,p,.wp-block-heading) { color: var(--ink); text-shadow:none; }
/* CTA-Band: petrol-Fläche */
.wp-block-cover.is-style-cta { border-radius: var(--r-lg); padding: clamp(2.4rem,5vw,4rem); }
.wp-block-cover.is-style-cta > .wp-block-cover__background { background: linear-gradient(120deg, rgba(10,86,95,.92), rgba(15,122,135,.78)) !important; opacity:1 !important; }
.wp-block-cover.is-style-cta :where(h2,p) { color:#fff; }
.wp-block-cover.is-style-cta .kicker { color: var(--accent-t); }

/* --- Spalten-Abstände wie im Design ------------------------------------ */
.entry-content .wp-block-columns { gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }

/* --- Bilder in Rahmen --------------------------------------------------- */
.entry-content .wp-block-image img { border-radius: var(--r-lg); display:block; }
.entry-content .wp-block-image.is-style-frame img { box-shadow: var(--shadow-pop); }

/* --- Tabelle als Sprechzeiten ------------------------------------------ */
.entry-content .wp-block-table.is-style-hours table { width:100%; border-collapse: collapse; }
.entry-content .wp-block-table.is-style-hours td,
.entry-content .wp-block-table.is-style-hours th { padding:.55rem .2rem; border-bottom:1px solid var(--line); text-align:left; }
.entry-content .wp-block-table.is-style-hours tr td:last-child { text-align:right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --- FAQ: core/details als Akkordeon ----------------------------------- */
.entry-content .wp-block-details {
  border:1px solid var(--line); border-left:3px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); padding: 1rem 1.2rem; margin-bottom:.8rem;
}
.entry-content .wp-block-details[open] { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 10px 30px rgba(27,42,48,.08); }
.entry-content .wp-block-details summary { font-family: var(--font-head); font-weight:600; font-size:1.1rem; color: var(--ink); cursor:pointer; list-style:none; }
.entry-content .wp-block-details summary::-webkit-details-marker { display:none; }
.entry-content .wp-block-details[open] summary { color: var(--accent-d); }
.entry-content .wp-block-details > :not(summary) { margin-top:.7rem; color: var(--text); }

/* --- Quote-Band -------------------------------------------------------- */
.entry-content .wp-block-quote.is-style-band {
  border:0; margin:0; padding: var(--section-y) var(--gutter); text-align:left; background: var(--paper-2);
}

/* --- Editor: Papier-Hintergrund, damit das Design sichtbar ist --------- */
.editor-styles-wrapper { background: var(--paper); }
.editor-styles-wrapper .entry-content > * { } /* Layout-Regeln greifen über obige Selektoren */