/* ==========================================================================
   pinlio – WordPress-Brücke
   Verbindet die Klassen aus dem Claude-Design-Export mit dem Markup,
   das Gutenberg-Core-Blöcke erzeugen. styles.css bleibt unverändert.
   ========================================================================== */

/* Seitengerüst */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.site-header.wp-block-template-part { margin: 0; }

/* Buttons: core/button setzt die Klasse auf den Wrapper, der Link liegt innen.
   Der Wrapper ist der sichtbare Button, der Link füllt ihn komplett aus. */
.wp-block-buttons.btn-row { gap: var(--space-m); }
.wp-block-button.btn { position: relative; }
.wp-block-button.btn > .wp-block-button__link {
  all: unset;
  cursor: pointer;
  color: inherit;
  white-space: nowrap;
}
.wp-block-button.btn > .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.wp-block-button.btn:has(.wp-block-button__link:focus-visible) {
  outline: 3px solid var(--color-honey);
  outline-offset: 3px;
}

/* Listen: Core setzt Einrückung zurück, Export-Klassen steuern das Layout */
ul.wp-block-list, ol.wp-block-list { padding: 0; margin: 0; }

/* Überschriften und Absätze ohne Core-Abstände */
.wp-block-heading { margin: 0; }

/* Illustrationen (gesperrte HTML-Bausteine) nicht vom Flow-Layout verschieben */
.wp-block-html { margin: 0; }

/* Icons ohne leere Inline-Elemente (Gutenberg entfernt leere <span>).
   Klasse "with-icon" + Icon-Klasse "i-{name}" am Element:
   - Inline-Element (z. B. Chip im Absatz): Icon vor dem Text
   - Liste (core/list): Icon vor jedem Listenpunkt
   Farbe über --icon-color, Standard currentColor. */
.with-icon:not(ul):not(ol)::before,
ul.with-icon > li::before,
ol.with-icon > li::before {
  content: "";
  display: inline-block; flex: none;
  width: var(--icon-size, 1.25em); height: var(--icon-size, 1.25em);
  background: var(--icon-color, currentColor);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.trust-row { --icon-color: var(--color-petrol); }

/* Icon-Liste: Einträge als Gruppen (Icon-Block + Text) */
.icon-list > .icon-list__item { display: flex; align-items: center; gap: var(--space-m); font-size: var(--fs-m); line-height: 1.4; }

/* Häkchen-Liste (Pakete): Kreis per ::before, Häkchen per ::after */
.check-list.with-check > li { position: relative; }
.check-list.with-check > li::before {
  content: ""; flex: none; width: 26px; height: 26px;
  border-radius: var(--radius-round); background: var(--check-bg, var(--color-sand));
}
.check-list.with-check > li::after {
  content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px;
  background: var(--check-fg, var(--color-petrol));
  -webkit-mask: url("icons/check.svg") center / 16px no-repeat;
  mask: url("icons/check.svg") center / 16px no-repeat;
}
.check-list--honey { --check-bg: var(--color-honey); }
.check-list--dark { --check-bg: var(--color-petrol); --check-fg: var(--color-honey); }

/* Paketkarte: Button unten, volle Breite */
.pkg-card > .wp-block-buttons { margin-top: auto; }
.pkg-card .wp-block-button.btn { flex: 1; }
.wp-block-button.btn--block { flex: 1; width: 100%; }

/* Bilder: Klassen sitzen auf <figure>, das Bild füllt es aus */
.wp-block-image.photo { margin: 0; overflow: hidden; }
.wp-block-image.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Zitat ohne Core-Rahmen */
.wp-block-quote.quote { margin: 0; padding: 0; border: 0; }
.wp-block-quote.quote p { margin: 0; font: inherit; }

/* FAQ: core/details */
.wp-block-details.faq-item > summary { list-style: none; }

/* Chip-Reihe als Absatz */
p.chip-row { display: flex; }
/* Alle Bilder aus dem Konverter: Klassen auf <figure>, Bild füllt es */
.wp-block-image { margin: 0; }
.wp-block-image[class*="photo"], .wp-block-image.card__media, .wp-block-image[class*="avatar"] { overflow: hidden; }
.wp-block-image[class*="photo"] > img, .wp-block-image.card__media > img, .wp-block-image[class*="avatar"] > img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
/* ---- Umstellung: alle Inhalte im Editor bearbeitbar ---- */

/* JS-Zustände als Klassen (siehe functions.php): versteckte Panels im Frontend sofort verbergen */
body:not(.editor-styles-wrapper) .attr-hidden { display: none; }

/* Listen mit Eintrags-Klassen als Gruppen (.is-list / .is-li), Regeln 1:1 aus styles.css */
.trust-row .is-li { display: flex; align-items: center; gap: var(--space-xs); }
.check-list .is-li { display: flex; align-items: flex-start; gap: var(--space-s); line-height: 1.4; }
.icon-list .is-li { display: flex; align-items: center; gap: var(--space-m); font-size: var(--fs-m); line-height: 1.4; }
.num-list .is-li { display: flex; gap: 18px; align-items: flex-start; }
.task-list .is-li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: 1px solid var(--color-line); }
.report__rows .is-li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); padding: var(--space-m) 0; border-bottom: 1px solid var(--color-petrol-line); font-size: var(--fs-m); }
.report__rows .is-li:last-child { border-bottom: 0; }
.report-page__rows .is-li { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-s) 0; border-bottom: 1px solid var(--color-line); }
.factor-visual .is-li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-s); font-weight: var(--fw-semibold); }
.factor-visual .is-li .icon { color: var(--color-success); }
.legend .is-li { display: flex; align-items: center; gap: 10px; }
.summary-list .is-li { display: flex; justify-content: space-between; gap: var(--space-m); padding: var(--space-m) 0; border-bottom: 1px solid var(--color-line); }
.summary-list .is-li:last-child { border-bottom: 0; }

/* Tabellen (core/table): Core-Rahmen neutralisieren, Klassen sitzen auf <figure> */
.wp-block-table.compare-table, .wp-block-table.versus-table { margin: 0; overflow-x: auto; }
.wp-block-table.compare-table table, .wp-block-table.versus-table table { width: 100%; border-collapse: collapse; }
.wp-block-table.versus-table table { min-width: 620px; }
.wp-block-table.compare-table thead, .wp-block-table.versus-table thead { border-bottom: 0; }
.wp-block-table.compare-table :is(th, td), .wp-block-table.versus-table :is(th, td) { border-top: 0; border-left: 0; border-right: 0; }
.wp-block-table.compare-table :is(th, td) { padding: 14px 8px; }
.wp-block-table.versus-table :is(th, td) { padding: 20px 8px; }
/* Hervorgehobene sorglos-Spalte (vorher Klasse is-featured je Zelle) */
.compare-table tr:not(:has(> th[colspan])) > :nth-child(3) { background: var(--color-linen); }
/* Zwischenüberschriften (vorher tr.compare-table__group) */
.compare-table tr:has(> th[colspan]) th { padding-top: 26px; border-bottom: 0; text-align: left; font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-slate); }
.versus-table .with-icon::before { vertical-align: -3px; margin-right: var(--space-xs); }

/* Karten, die komplett verlinkt sind: Link im Titel deckt die ganze Karte ab */
.is-card-link { position: relative; cursor: pointer; }
.is-card-link a { color: inherit; text-decoration: none; }
.is-card-link a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.is-card-link:focus-within { outline: 3px solid var(--color-honey); outline-offset: 3px; }
/* ---- Mobile-Korrekturen (Fehler bereits im Claude-Design-Export) ---- */

/* Mobile-Menü: backdrop-filter am Header macht ihn zum Bezugsrahmen für position:fixed,
   dadurch war das Menü nur 1px hoch. Bei offenem Menü Filter aus, Hintergrund deckend. */
.menu-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-linen); }
/* Aktiver Menüpunkt: Punkt links neben dem Text statt Text nach rechts zu schieben */
.mobile-menu__links a[aria-current="page"] { position: relative; }
.mobile-menu__links a[aria-current="page"]::before { position: absolute; left: -14px; top: 50%; margin: 0; transform: translateY(-50%); }

/* Paket-Raster: zentriertes Flex-Kind schrumpfte nicht auf Bildschirmbreite */
.pkg-grid { width: 100%; }

/* Hero-Grafiken: großer Pin immer hinter dem Inhalt */
.hero__visual { isolation: isolate; }
.hero__mark { z-index: -1; }

/* Startseite mobil: Hero-Buttons ausblenden, die CTA-Leiste unten übernimmt */
@media (max-width: 767px) { .home .section-hero .btn-row { display: none; } }
/* Buttons und Menü-Button: gleichmäßiger Radius 6px (keine Sprechblasen-Ecke) */
:root { --radius-btn: 6px; }
.btn, .btn--s, .sticky-cta .btn, .wp-block-button.btn, .menu-toggle { border-radius: var(--radius-btn); }
/* Mobil: Headlines und Menüpunkte einen Ticken kleiner */
@media (max-width: 767px) {
  :root { --fs-h1: 33px; --fs-h2: 29px; --fs-2xl: 24px; --fs-display: 56px; }
  .pkg-card__name { font-size: 38px; }
  .price__amount { font-size: 52px; }
  .quote { font-size: 24px; }
  .mobile-menu__links a { font-size: 21px; padding: 14px 4px; --icon-size: 18px; }
}
/* Mobil: Buttons kompakter, wie der Header-Button (15px), Tippfläche mind. 48px */
@media (max-width: 767px) {
  .btn, .sticky-cta .btn { font-size: var(--fs-s); padding: 13px 20px; min-height: 48px; --icon-size: 18px; }
}
/* Mobil: optische Zentrierung der Button-Beschriftung.
   Kleinbuchstaben saßen rechnerisch ~1px unter der Mitte (Schriftmetrik Schibsted Grotesk),
   daher 1px mehr Luft unten als oben. Höhe bleibt 48px. */
@media (max-width: 767px) {
  .btn, .sticky-cta .btn { padding-top: 12px; padding-bottom: 14px; }
}
/* Desktop: gleiche optische Zentrierung (Kleinbuchstaben saßen ~1,2px zu tief) */
.btn { padding-top: 17px; padding-bottom: 19px; }
.btn--s { padding-top: 12px; padding-bottom: 14px; }
@media (max-width: 767px) {
  .btn, .sticky-cta .btn { padding-top: 12px; padding-bottom: 14px; }
}
/* WordPress setzt .wp-block-buttons > .wp-block-button auf inline-block (stärker als .btn).
   Dadurch saß die Schrift oben und war in Paketkarten linksbündig. Flex-Zentrierung wiederherstellen. */
.wp-block-buttons > .wp-block-button.btn { display: inline-flex; align-items: center; justify-content: center; }