/* DJ Nutsgroove – WordPress-/CrocoBuilder-Anpassungen zur Mockup-Gestaltung (von Hand, nicht generiert). Kein !important. */

/* ── CrocoBuilder-Hüllen: reine Wrapper, layout-neutral (Grid-/Kind-Selektoren wie im Mockup) ── */
.cb-component-el, .ng-chrome, .crocoblocks-document { display: contents; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main.crocoblocks-fullwidth { display: block; }

/* Bento-Karte: erste Infokarte im Raster (im Mockup .icards .icard:first-child) – mit Komponenten-Hülle zählt die Hülle */
@media (min-width: 900px) {
  .icards > .cb-component-el:not(:first-child) > .icard { grid-column: auto; display: block; background: var(--color-card); border-color: var(--color-line); }
  .icards > .cb-component-el:not(:first-child) > .icard .ic { width: 46px; height: 46px; margin-bottom: 14px; }
  .icards > .cb-component-el:not(:first-child) > .icard b, .icards > .cb-component-el:not(:first-child) > .icard p { color: inherit; }
}

/* Sichtbarer Tastaturfokus (Design-Floor) */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Formulare: Honigtopf unsichtbar, Statusmeldungen, versteckte JetFormBuilder-Formulare */
.ng-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kform .form-status { margin: 0 0 12px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.kform .form-status:empty { display: none; }
.kform .form-status.is-error, .call-err { color: #b0005f; }
.call-err { margin: 10px 0 0; font-size: var(--text-xs); color: #ff8fd0; }
.ng-jfb-proxy { display: none; }

/* Design-Floor: Zitatkarte im dunklen Abschnitt (Über mich) – im Mockup erbte der Text Weiß auf weißer Karte (unlesbar) */
.quote { color: var(--color-text); }

/* Rückruf-Popup: Datenschutz-Hinweis unter dem Knopf (Ergänzung zum Mockup, Art. 13 DSGVO) */
.call-privacy { margin: 4px 0 0; font-size: var(--text-2xs); line-height: 1.5; color: #fff; text-align: center; }
.call-privacy a { color: var(--color-accent); }

/* Anruf-Knopf (Handy): Telefonsymbol als Maske – das Text-Element des Kopfs entfernt <svg> beim Speichern */
.ng-fab::before { content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.25 1.02z'/%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'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat; }