/* ============================================================
   useit.ch — Anpassung des Design Systems an WordPress

   useit-styles.css bleibt unverändert die Quelle der Gestaltung.
   Hier steht nur, was WordPress zusätzlich braucht:
   Seitengerüst, Core-Blöcke (Buttons, Listen, Tabellen, Bilder)
   und die Hüllen der eigenen Bausteine aus dem Plugin «useit Blöcke».
   ============================================================ */

/* ===== Seitengerüst ===== */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }
.useit-main .wp-block-post-content > .alignfull { margin-block: 0; }
.useit-main .wp-block-post-content > :not(.alignfull):first-child { margin-top: var(--sp-9); }
.useit-main .wp-block-post-content > :not(.alignfull):last-child { margin-bottom: var(--sp-9); }

/* Kopfzeile klebt: Die Hülle des Vorlagenteils übernimmt das «sticky» des
   Headers, sonst klebt er nur innerhalb der eigenen Hülle. 40px = Topbar. */
.useit-header-part { position: sticky; top: -40px; z-index: 100; }
.useit-header-part .sg-header { position: relative; top: auto; }
.admin-bar .useit-header-part { top: -8px; }
@media (max-width: 782px) { .admin-bar .useit-header-part { top: 6px; } }
@media (max-width: 600px) { .admin-bar .useit-header-part { top: -40px; } }

.screen-reader-text:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Vorlagen aus Core-Blöcken (Beitrag, Projekt, Archiv): gleicher Rand wie das Raster */
.useit-main > .wp-block-post-terms { padding-left: 32px; padding-right: 32px; }
/* Abschnitte aus Core-Blöcken (Seitentitel, Suche, Beitrag): Inhalt an der Rasterkante */
.wp-block-group.sg-section {
  padding-left: max(32px, calc((100% - 1400px) / 2 + 32px));
  padding-right: max(32px, calc((100% - 1400px) / 2 + 32px));
}
.wp-block-group.sg-section.is-layout-constrained > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
/* Fliesstext direkt im Inhalt (Impressum, neue Seiten, Projekte): Lesebreite 720px,
   mittig auf der Seite (Entscheid 10/2026). Gilt auch im Editor. */
.wp-block-post-content.is-layout-constrained > :not(.alignfull):not(.alignwide) {
  max-width: min(720px, 100% - 64px);
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Seitentitel aus der Vorlage (nur auf Seiten ohne Seitenkopf-Block, siehe functions.php) */
.useit-page-title { padding-bottom: var(--sp-6); border-top: 0; }
.useit-page-title h1 { margin: 0; }
.useit-page-title + .wp-block-post-content > :not(.alignfull):first-child { margin-top: 0; }
/* Zwischentitel im Fliesstext: mehr Luft davor als zwischen Absätzen */
.wp-block-post-content > :where(h2, h3, h4):not(:first-child) { margin-top: var(--sp-7); }
.wp-block-post-content > :where(h2, h3, h4) + * { margin-top: var(--sp-4); }
.wp-block-group.sg-section.page-hero > * + * { margin-top: var(--sp-5); }
.useit-main > .wp-block-post-terms { max-width: var(--max-w-text); margin: var(--sp-7) auto var(--sp-9); }
@media (max-width: 640px) {
  .wp-block-group.sg-section,
  .useit-main > .wp-block-post-terms { padding-left: 20px; padding-right: 20px; }
  .wp-block-post-content.is-layout-constrained > :not(.alignfull):not(.alignwide) {
    max-width: calc(100% - 40px);
    margin-left: 20px !important;
  }
}

/* Verschachtelte Raster (im Original per style="padding:0") */
.grid4 .grid4 { padding-left: 0; padding-right: 0; max-width: none; }

/* Ränder der Absätze in den Bausteinen kontrollieren die Bausteine selbst */
.sg-section p, .sg-section h1, .sg-section h2, .sg-section h3, .sg-section h4 { margin-top: 0; }

/* ===== Abschnitt ===== */
.useit-section-head { margin-bottom: var(--sp-7); }
.useit-section-content > * { margin-top: 0; margin-bottom: 0; }
.useit-section-content > * + * { margin-top: var(--sp-7); }
.useit-section-content > p,
.useit-section-content > ul:not([class*="useit"]),
.useit-section-content > ol:not([class*="useit"]) { max-width: var(--max-w-text); }
.sg-section.dark .card { color: var(--c-ink); }
.sg-section.dark .useit-icon-box { border-color: #3A3A37; }
.sg-section.dark .text-sec,
.sg-section.dark .prose-p,
.sg-section.dark .lead-text { color: #9A9690; }
.sg-section.dark .stat-big { color: #F0EDE7; }
.sg-section.dark .stat-label { color: #9A9690; }
.sg-section.dark .tabs-bar { border-color: #2A2A28; }
.sg-section.dark .tab-btn { color: #9A9690; }
.sg-section.dark .tab-btn:hover, .sg-section.dark .tab-btn.active { color: #F0EDE7; }
.sg-section.dark .tabs-underline .tab-btn.active { border-bottom-color: var(--c-accent); }
.sg-section.dark .acc-item, .sg-section.dark .acc-block { border-color: #2A2A28; }
.sg-section.dark .acc-btn { color: #F0EDE7; }
.sg-section.dark .list-big-num li { border-color: #2A2A28; }
.sg-section.dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,0.45); }

/* ===== Seitenkopf ===== */
.page-hero { padding-top: var(--sp-10); }
.page-hero-eyebrow { margin-bottom: var(--sp-5); }
.page-hero-title { margin: 0 0 var(--sp-5); }
.page-hero .lead-text { margin: 0; }
.page-hero-title em,
.sg-section-title em,
.text-h2 em,
.useit-cta-title em { color: var(--c-accent); font-style: italic; }
.page-hero-actions .wp-block-buttons { justify-content: flex-end; margin: 0; }
@media (max-width: 1180px) {
  .page-hero-actions .wp-block-buttons { justify-content: flex-start; }
}

/* ===== Buttons (Core-Block «Buttons») — wie .btn des Design Systems ===== */
.wp-block-buttons { gap: var(--sp-3); }
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2;
  padding: 12px 24px; border-radius: 0; border: 1px solid transparent;
  background: var(--c-ink); color: #fff; text-decoration: none; white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.wp-block-button .wp-block-button__link::after {
  content: ''; width: 16px; height: 16px; flex-shrink: 0; background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.wp-block-button .wp-block-button__link:hover { background: var(--c-accent); color: #fff; transform: translateY(-1px); }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--c-ink); border-color: var(--c-border-strong); padding: 12px 24px;
}
.wp-block-button.is-style-outline .wp-block-button__link::after { content: none; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.wp-block-button.is-style-textlink .wp-block-button__link {
  background: none; color: var(--c-ink); padding: 6px 0; border: 0; font-weight: 500; font-size: 15px; gap: 6px;
}
.wp-block-button.is-style-textlink .wp-block-button__link:hover { color: var(--c-accent); background: none; transform: none; }
.wp-block-buttons:has(.is-style-textlink) { flex-direction: column; align-items: flex-start; gap: 0; }

/* Buttons auf dunkler und farbiger Fläche */
.useit-cta .wp-block-button__link { padding: 16px 32px; font-size: 15px; }
.card-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--c-accent); }
.card-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--c-accent-dark); }
.card-dark .wp-block-button.is-style-outline .wp-block-button__link,
.card-accent .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,0.45); }
.card-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.card-accent .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--c-ink); }
.card-accent .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--c-accent); }
.card-accent .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--c-ink); color: #fff; }

/* ===== Listen (Core-Block «Liste», Blockstile) ===== */
.wp-block-list.is-style-check,
.wp-block-list.is-style-pfeil,
.wp-block-list.is-style-punkt { list-style: none; padding: 0; margin: 0; }
.wp-block-list.is-style-check li,
.wp-block-list.is-style-pfeil li,
.wp-block-list.is-style-punkt li { position: relative; padding: 6px 0 6px 24px; font-size: 15px; line-height: 1.55; }
.wp-block-list.is-style-check li::before { content: '✓'; position: absolute; left: 0; color: var(--c-success); font-weight: 700; }
.wp-block-list.is-style-pfeil li::before { content: '→'; position: absolute; left: 0; color: var(--c-accent); }
.wp-block-list.is-style-punkt li::before { content: '•'; position: absolute; left: 4px; color: var(--c-accent); font-weight: 700; }
.wp-block-list.is-style-nummer { list-style: none; padding: 0; margin: 0; counter-reset: item; }
.wp-block-list.is-style-nummer li {
  padding: 12px 0; border-top: 1px solid var(--c-border); font-size: 15px;
  display: grid; grid-template-columns: 32px 1fr; gap: 12px; counter-increment: item;
}
.wp-block-list.is-style-nummer li:last-child { border-bottom: 1px solid var(--c-border); }
.wp-block-list.is-style-nummer li::before { content: counter(item, decimal-leading-zero); font-size: 12px; color: var(--c-accent); padding-top: 2px; }

/* Liste mit Linien (wie .list-clean) */
.wp-block-list.is-style-linien { list-style: none; padding: 0; margin: 0; }
.wp-block-list.is-style-linien li { padding: 12px 0; border-top: 1px solid var(--c-border); font-size: 15px; }
.wp-block-list.is-style-linien li:last-child { border-bottom: 1px solid var(--c-border); }

/* ===== Absätze (Blockstile) ===== */
p.is-style-eyebrow { font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--c-accent); }
p.is-style-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--c-text-sec); }

/* ===== Tabelle (Core-Block «Tabelle») — wie .tbl ===== */
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wp-block-table thead { border-bottom: 0; }
.wp-block-table th {
  text-align: left; padding: 14px 16px; border: 0; border-bottom: 2px solid var(--c-ink);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-sec); font-weight: 700;
}
.wp-block-table td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--c-border); }
.wp-block-table tr:hover td { background: var(--c-surface); }
.wp-block-table.is-style-zebra tbody tr:nth-child(even) td,
.wp-block-table.is-style-stripes tbody tr:nth-child(even) td { background: var(--c-surface); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
.wp-block-table.is-style-stripes { border-bottom: 0; }
.sg-section.surface .wp-block-table tr:hover td,
.sg-section.surface .wp-block-table.is-style-zebra tbody tr:nth-child(even) td { background: var(--c-surface-2); }
.wp-block-table figcaption { font-size: 12px; color: var(--c-text-ter); margin-top: 8px; }

/* ===== Bilder (Core-Block «Bild», Blockstile) ===== */
.wp-block-image { margin: 0; }
.wp-block-image img { border-radius: 0; }
.wp-block-image.is-style-bleed { max-width: var(--max-w-bleed); margin-inline: auto !important; }
.wp-block-image.is-style-bleed img { width: 100%; aspect-ratio: 21 / 9; max-height: 640px; object-fit: cover; }
.wp-block-image.is-style-karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wp-block-image figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-ter); margin-top: 8px; }

/* Zitat (Core-Block) */
.wp-block-quote { border-left: 2px solid var(--c-accent); padding-left: 24px; margin: 0; }
.wp-block-quote p { font-size: clamp(20px, 2.5vw, 28px); line-height: 1.4; font-style: italic; color: var(--c-ink); }
.wp-block-quote cite { font-size: 12px; font-style: normal; color: var(--c-text-ter); }
.wp-block-quote.is-style-gross { border: 0; padding: 0; }
.wp-block-quote.is-style-gross p { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; font-style: normal; letter-spacing: -0.02em; }
.wp-block-separator,
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; border: 0; border-top: 1px solid var(--c-border); opacity: 1; }

/* Links im Fliesstext: Unterstreichung etwas abgesetzt (Farbe/Unterstreichung in theme.json) */
.wp-block-paragraph a, .wp-block-list a, .wp-block-quote a, .wp-block-table a, .wp-block-details a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Pullquote wie .pull-quote des Design Systems: gross, leicht, linksbündig, ohne Rahmen */
.wp-block-pullquote { border: 0; padding: 0; text-align: left; }
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p { letter-spacing: -0.02em; color: var(--c-ink); }
.wp-block-pullquote p em { color: var(--c-accent); }
.wp-block-pullquote cite { display: block; margin-top: var(--sp-4); font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--c-accent); }

/* Details: Zusammenfassung als klickbare Zeile */
.wp-block-details summary { font-weight: 500; cursor: pointer; }
.wp-block-details[open] summary { margin-bottom: var(--sp-3); }

/* ===== Icon Content ===== */
.useit-icon-grid { row-gap: var(--sp-7); }
.useit-icon-box {
  width: 48px; height: 48px; border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4);
}
.useit-icon-item h3 { margin: 0 0 var(--sp-2); }
.useit-icon-item p { margin: 0; }
.useit-icon-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.useit-icon-head h3 { margin: 0; }
.useit-icon-plain { display: inline-flex; color: var(--c-accent); }

/* ===== Prozess ===== */
.useit-step h3 { margin: 0 0 var(--sp-1); }
.useit-step p { margin: 0; }
.useit-process-h { counter-reset: schritt; }
.useit-process-h .useit-step { counter-increment: schritt; }
.useit-process-h .useit-step::before {
  content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: var(--sp-3);
  font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--c-accent);
}

/* ===== Text und Bild ===== */
.useit-text-image { align-items: center; }
.useit-text-image-text .text-eyebrow { margin: 0 0 var(--sp-3); }
.useit-text-image-text h2 { margin: 0 0 var(--sp-3); }
.useit-text-image-text .prose-p { margin: 0; }
.useit-text-image-extra { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.useit-text-image-extra > * { margin: 0; }
.is-image-right .useit-text-image-text { padding-right: var(--sp-5); }
.is-image-left .useit-text-image-text { padding-left: var(--sp-5); }
.useit-text-image .card-img { aspect-ratio: 4 / 3; height: auto; }
@media (max-width: 1180px) {
  .useit-text-image .useit-text-image-text { padding: 0; }
  .useit-text-image.is-image-right .useit-text-image-media { order: -1; }
}

/* ===== Accordion ===== */
.acc-heading { margin: 0; font: inherit; letter-spacing: normal !important; }
.acc-inner p { margin: 0; }
.acc-item:not(.open) .acc-inner,
.acc-block:not(.open) .acc-inner { visibility: hidden; transition: visibility 0s 0.35s; }
.useit-accordion .acc-btn span { font-weight: 500; }

/* ===== Tabs ===== */
.useit-tabs .tab-panel { padding-top: var(--sp-6); }
.useit-tabs .tab-panel[hidden] { display: none; }
.useit-tabs .tab-panel:focus-visible { outline-offset: 8px; }
.useit-tabs .tab-panel h3 { margin: 0 0 var(--sp-3); }
.useit-tabs .tab-panel .lead-text { margin: 0; }
.useit-tab-extra > * { margin: 0; }
.useit-tab-extra > * + * { margin-top: var(--sp-4); }
.useit-tab-label { display: none; }
/* Rechte Hälfte des Reiters: zwei Spalten (Geeignet für, Referenzen) */
.useit-tab-extra:has(> .useit-tab-col) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.useit-tab-extra > .useit-tab-col { margin: 0; }
.useit-tab-col > * { margin: 0; }
.useit-tab-col > .is-style-eyebrow { margin-bottom: var(--sp-3); }
@media (max-width: 640px) { .useit-tab-extra:has(> .useit-tab-col) { grid-template-columns: 1fr; } }

/* ===== Chips ===== */
.useit-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.useit-chips.is-small .chip { font-size: 12px; padding: 4px 8px; }
.card-body .useit-chips { margin-top: var(--sp-4); }

/* ===== Statistik ===== */
.useit-stat .stat-big, .useit-stat .stat-label { margin: 0; }
.useit-stat .stat-label { margin-top: 8px; }
.useit-stats.is-align-center .useit-stat { text-align: center; }

/* ===== Cards ===== */
.useit-cards, .useit-project-grid { row-gap: var(--sp-5); }
.useit-card, .page-project { position: relative; display: flex; flex-direction: column; }
.useit-card .card-body, .page-project .card-body { flex: 1; display: flex; flex-direction: column; }
.useit-card .card-img, .page-project .card-img { aspect-ratio: 4 / 3; height: auto; }
.useit-card h3, .page-project h3 { margin: 0 0 var(--sp-2); }
.useit-card .card-body p, .page-project .card-body p { margin: 0; }
.useit-card-cat { margin: 0 0 var(--sp-2) !important; }
/* Kontrast: Grau #9A9690 erreicht auf Weiss nur 2.9:1 — in Karten das sekundäre Grau */
.card .useit-card-cat, .useit-featured .text-ter { color: var(--c-text-sec); }
.useit-card-link { margin-top: auto; padding-top: var(--sp-4); font-size: 14px; }
.useit-card:hover .useit-card-link { color: var(--c-accent); }
.useit-card-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.useit-card.card-horizontal { display: grid; }
.useit-card.card-horizontal .card-img { aspect-ratio: auto; height: 100%; }
.card-horizontal.is-image-right .card-img-wrap { order: 2; }
.card-horizontal .card-body { justify-content: center; }
.page-project[hidden] { display: none; }

/* ===== Projekt im Fokus ===== */
.useit-featured .card-body { padding: var(--sp-7); }
.useit-featured .text-eyebrow { margin: 0 0 var(--sp-3); }
.useit-featured h2 { margin: 0 0 var(--sp-3); }
.useit-featured .lead-text { margin: 0; }
.useit-featured .card-img { aspect-ratio: 4 / 3; height: 100%; }
@media (max-width: 640px) { .useit-featured .card-body { padding: var(--sp-5); } }

/* ===== Erklärvideos ===== */
.useit-video { align-items: start; }
.useit-video h3 { margin: 0 0 var(--sp-4); }
.useit-video-eyebrow { margin: 0 0 var(--sp-2); }
.useit-video .page-chapters { margin: 0; padding: 0; }
.useit-video .page-chapters li { display: block; padding: 0; }
.useit-chapter {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; width: 100%; padding: 12px 0;
  background: none; border: 0; text-align: left; font: inherit; font-size: 15px; color: inherit; cursor: pointer;
}
.useit-chapter:hover { color: var(--c-accent); }
.useit-video-note { margin: var(--sp-4) 0 0; }
.video-poster > img { width: 100%; height: 100%; object-fit: cover; }
.video-card .video-poster { display: block; }
.useit-video-cat { display: block; margin: var(--sp-4) 0 var(--sp-2); }
.useit-video-title { display: block; }
.useit-video-gallery { row-gap: var(--sp-6); }
.video-lightbox-box { position: relative; }
.video-lightbox-close {
  position: absolute; right: 0; top: -52px; width: 44px; height: 44px; border: 0;
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center;
}
.video-lightbox-close:hover { color: var(--c-accent); }

/* ===== Zitate ===== */
.useit-quote { margin: 0; }
.useit-quote blockquote { margin: 0; }
.useit-quote blockquote p { margin: 0 0 var(--sp-5); }
.useit-quote-person { display: flex; align-items: center; gap: var(--sp-3); }
.useit-quote-person > span { display: flex; flex-direction: column; }
.useit-quote-person .text-caption { color: var(--c-text-ter); }
.useit-quotes.is-slider .card-body { padding: var(--sp-8); position: relative; }
.useit-quotes.is-slider .lucide-quote { opacity: 0.6; margin-bottom: var(--sp-4); }
.useit-quotes.is-slider .useit-quote blockquote p { max-width: 700px; line-height: 1.3; font-weight: 800; }
.useit-quotes.is-slider .useit-quote-person .text-caption { color: inherit; opacity: 0.7; }
.useit-quotes.is-slider .useit-quote:not(:first-child) { display: none; }
.useit-quotes.is-slider.ist-bereit .useit-quote { display: none; }
.useit-quotes.is-slider.ist-bereit .useit-quote.is-active { display: block; }
.useit-quote-nav { position: absolute; right: var(--sp-8); bottom: var(--sp-8); display: flex; gap: var(--sp-2); }
.useit-quote-nav .btn-icon { background: rgba(255,255,255,0.2); width: 40px; height: 40px; }
.useit-quote-nav .btn-icon:hover { background: var(--c-ink); }
.useit-quotes.is-slider:not(:has(.useit-quote + .useit-quote)) .useit-quote-nav { display: none; }
.useit-quotes.is-grid .useit-quote { padding: var(--sp-5); background: var(--c-surface); }
.useit-quotes.is-grid .useit-quote blockquote p { margin-bottom: var(--sp-4); line-height: 1.6; }
.useit-quotes.is-single .useit-quote + .useit-quote { margin-top: var(--sp-8); }
@media (max-width: 640px) {
  .useit-quotes.is-slider .card-body { padding: var(--sp-5) var(--sp-5) 88px; }
  .useit-quote-nav { right: var(--sp-5); bottom: var(--sp-5); }
}

/* ===== CTA ===== */
.useit-cta-inner { text-align: center; }
.useit-cta-title { margin: 0 0 var(--sp-4); }
.useit-cta-lead { color: #9A9690; margin: 0 auto var(--sp-6); max-width: 560px; }
.card-accent .useit-cta-lead { color: rgba(255,255,255,0.85); }
.card-accent .useit-cta-title .text-accent { color: var(--c-ink); }
.useit-cta-actions .wp-block-buttons { justify-content: center; }

/* ===== Kopfzeile ===== */
.sg-logo .wp-block-site-logo,
.sg-logo .wp-block-site-logo a,
.sg-logo .custom-logo-link { display: block; width: 100%; margin: 0; }
.sg-logo img { width: 100% !important; height: auto !important; display: block; }
.sg-mega-grid { list-style: none; margin: 0; padding: 0; }
.sg-mega-grid li { margin: 0; }
.useit-mobile-sub { display: none; }
.sg-menu-btn .useit-icon-close { display: none; }
.sg-menu-btn[aria-expanded="true"] .useit-icon-open { display: none; }
.sg-menu-btn[aria-expanded="true"] .useit-icon-close { display: block; }
.sg-nav .nav-cta svg { transition: transform 0.25s ease; }
.sg-nav .nav-cta:hover svg { transform: translateX(4px); }
@media (max-width: 1180px) {
  .sg-mega-menu { display: none; }
  .sg-nav.open .sg-nav-tech .useit-mobile-sub { display: none; list-style: none; margin: 0; padding: 4px 0 12px 16px; border-bottom: 1px solid var(--c-border); }
  .sg-nav.open .sg-nav-tech.open .useit-mobile-sub { display: block; }
  .sg-nav.open .useit-mobile-sub a { font-size: 17px; font-weight: 500; letter-spacing: normal; padding: 10px 0; border: 0; display: block; }
  /* Desktop zentriert die Navigation mit translateY(-50%) — aufgeklappt muss das weg */
  .sg-nav.open { transform: none; max-height: calc(100vh - 96px); overflow-y: auto; }
}
@media (max-width: 640px) {
  .sg-nav.open { max-height: calc(100vh - 80px); }
}

/* ===== Support-Band ===== */
.sg-support-card h3 { margin: var(--sp-4) 0 var(--sp-2); }
.sg-support-card p { margin: 0 0 var(--sp-4); }
.sg-support .card { background: #fff; }

/* ===== Fusszeile ===== */
.useit-footer { padding-top: var(--sp-9); padding-bottom: var(--sp-5); }
.useit-footer .text-eyebrow { margin: 0 0 var(--sp-4); color: var(--c-accent); }
.useit-footer-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.useit-footer-list a, .useit-footer-list p, .useit-footer-list span { color: #9A9690; font-size: 14px; line-height: 1.5; margin: 0; }
.useit-footer-list a:hover { color: #F0EDE7; }
.useit-footer-icon { display: inline-flex; align-items: center; gap: 6px; }
.useit-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid #2A2A28; margin-top: var(--sp-5);
}
.useit-footer-bottom p { color: #9A9690; margin: 0; }
.useit-footer-bottom .useit-credit a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.useit-footer-legal { display: flex; gap: var(--sp-4); }
.useit-footer-legal a { color: #9A9690; }
.useit-footer-legal a:hover { color: #F0EDE7; }

/* ===== Formulare (Contact Form 7 bzw. allgemeine Felder) ===== */
.wpcf7 label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 24px; color: var(--c-ink); }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"],
.wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 textarea, .wpcf7 select,
.useit-form input[type="text"], .useit-form input[type="email"], .useit-form textarea, .useit-form select {
  width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit; font-weight: 300;
  background: #fff; border: 1px solid var(--c-border); border-radius: 0; color: var(--c-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus,
.useit-form input:focus, .useit-form textarea:focus, .useit-form select:focus {
  outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(232,93,47,0.1);
}
.wpcf7 textarea { resize: vertical; min-height: 120px; }
.wpcf7 .wpcf7-not-valid { border-color: var(--c-error); }
.wpcf7 .wpcf7-not-valid-tip { font-size: 12px; color: var(--c-error); margin-top: 4px; }
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-accent); vertical-align: middle; }
.wpcf7 input[type="submit"], .useit-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 14px; padding: 12px 24px; border: 1px solid transparent;
  border-radius: 0; background: var(--c-ink); color: #fff; cursor: pointer; transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.wpcf7 input[type="submit"]:hover, .useit-form button[type="submit"]:hover { background: var(--c-accent); transform: translateY(-1px); }
.wpcf7 .wpcf7-response-output { margin: 24px 0 0; padding: 16px 20px; border: 1px solid var(--c-border); font-size: 14px; }
.wpcf7 form.sent .wpcf7-response-output { background: var(--c-success-light); border-color: transparent; color: #1B5638; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: var(--c-error-light); border-color: transparent; color: #8B1414; }

/* ===== Responsive ===== */
/* Zwischen 640 und 1180px: Raster aus Karten zweispaltig statt untereinander */
@media (max-width: 1180px) and (min-width: 641px) {
  .useit-icon-grid > .col-1, .useit-cards > .col-1, .useit-project-grid > .col-1,
  .useit-video-gallery > .col-1, .useit-stats > .col-1, .useit-process-h > .col-1,
  .sg-support .sg-support-card, .useit-quotes.is-grid > .col-1 { grid-column: span 1; }
}
@media (max-width: 1180px) {
  .useit-indent-spacer { display: none; }
  .useit-section-head { margin-bottom: var(--sp-5); }
}
@media (max-width: 640px) {
  .page-hero { padding-top: var(--sp-8); }
  .useit-section-head { margin-bottom: var(--sp-5); }
  .useit-section-content > * + * { margin-top: var(--sp-6); }
}

/* Video ohne Adresse: Vorschaubild ohne Abspiel-Knopf (nicht klickbar) */
.is-ohne-video .video-play { display: none; }
.video-poster.is-ohne-video, .video-card.is-ohne-video { cursor: default; }

/* Projektseite (templates/single-projekt.html) */
.useit-card-stretch { color: inherit; }
.page-featured { position: relative; }
.useit-breadcrumbs { font-size: 14px; color: var(--c-text-sec); }
.useit-breadcrumbs li:not(:last-child)::after {
  content: ""; width: 14px; height: 14px; margin: 0 var(--sp-2); opacity: 1; background: var(--c-text-ter);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.useit-breadcrumbs a { color: var(--c-text-sec); transition: color 0.2s; }
.useit-breadcrumbs a:hover { color: var(--c-accent-dark); }
.useit-breadcrumbs [aria-current] { color: var(--c-ink); font-weight: 500; }
.wp-block-group.sg-section.page-hero > .useit-breadcrumbs + * { margin-top: var(--sp-8); }
.useit-projekt-spalten { gap: var(--sp-8); margin-bottom: 0; }
.useit-projekt-spalten > .wp-block-column > * { margin-top: 0; margin-bottom: 0; }
.useit-projekt-spalten > .wp-block-column > * + * { margin-top: var(--sp-5); }
.useit-projekt-spalten > .wp-block-column:empty { display: none; }
.useit-projekt-bild img { display: block; }
.wp-block-post-terms.is-style-eyebrow {
  font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
}
.wp-block-post-terms.is-style-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wp-block-post-terms.is-style-chips .wp-block-post-terms__separator { display: none; }
/* Im Editor bleiben die Links bestehen — dort gleich aussehen lassen wie die Chips */
.wp-block-post-terms.is-style-chips a {
  display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
}
.wp-block-post-terms.is-style-eyebrow a { color: inherit; }
.useit-projekt .wp-block-post-content:not(:has(> *)) { display: none; }
.useit-projekt-kopf:has(+ .wp-block-post-content > *) { padding-bottom: var(--sp-8); }
.useit-main.useit-projekt .wp-block-post-content > :not(.alignfull):first-child { margin-top: 0; }
.useit-projekt .wp-block-post-content { padding-bottom: var(--sp-8); }
/* Ohne Projektbild: Text nicht über die ganze Rasterbreite laufen lassen */
.useit-projekt-spalten:has(> .wp-block-column:empty) > .wp-block-column { max-width: 900px; }
.useit-projekt-weiter { padding-top: var(--sp-8); }
.useit-project-nav.grid4 { padding: 0; }
.useit-project-nav .card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); color: var(--c-ink); }
.useit-project-nav .card > span > span { display: block; }
.useit-project-nav .text-body-sm { margin-top: 2px; }
.useit-project-nav-next { justify-content: flex-end; text-align: right; grid-column: 3 / span 2; }
@media (max-width: 1180px) { .useit-project-nav-next { grid-column: span 2; } }
@media (max-width: 640px) { .useit-project-nav-next { grid-column: span 1; } }
/* Projektseite: Knopf «Zur Website» und Reihe «Weitere Arbeiten» */
.useit-projekt-spalten .useit-projekt-website { margin-top: var(--sp-6); }
.useit-project-strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.useit-project-strip-head h2 { margin: 0; }
.useit-project-strip-nav { display: flex; gap: var(--sp-2); }
.useit-project-strip-nav[hidden] { display: none; }
.useit-project-strip-nav .btn-icon[aria-disabled="true"] { opacity: 0.35; cursor: default; background: var(--c-ink); }
.useit-project-strip-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: thin; padding-bottom: var(--sp-3); }
.useit-project-strip-track:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.useit-project-strip-track ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.useit-project-strip-track li { flex: 0 0 calc((100% - 3 * 24px) / 4); scroll-snap-align: start; margin: 0; }
.useit-project-strip .card-body { padding: var(--sp-4) var(--sp-5); }
.useit-project-strip h3 { margin: 0; }
@media (max-width: 1180px) { .useit-project-strip-track li { flex-basis: calc((100% - 24px) / 2.3); } }
@media (max-width: 640px) { .useit-project-strip-track li { flex-basis: 80%; } }