/*
Theme Name: Elektriker Theme
Theme URI: https://example.com/elektriker-theme
Author: [NAME DES ELEKTROBETRIEBS]
Author URI: https://example.com
Description: Modernes, vertrauenswürdiges Block-Theme (Full Site Editing) für einen Elektrofachbetrieb. Farbsystem Schwarz/Anthrazit mit blauem Akzent (#007cba). Alle Inhalte sind im Gutenberg-Editor bearbeitbar. Patterns für Hero, Leistungen, FAQ, Kontakt u. v. m.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elektriker-theme
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, editor-style, threaded-comments, translation-ready, business
*/

/* =====================================================================
   Ergänzendes CSS – bewusst minimal.
   Das Designsystem (Farben, Typografie, Abstände, Buttons) liegt in theme.json.
   Hier nur, was Core-Blöcke/theme.json nicht abbilden: dezente technische
   Flächen, Bildplatzhalter, Icon-Badges, Karten-Hover, FAQ-Feinschliff.
   Wird im Frontend UND im Editor geladen (siehe functions.php).
   ===================================================================== */

/* Dezentes technisches Raster auf dunklen Sektionen */
.is-style-section-dark { position: relative; overflow: hidden; }
.is-style-section-dark > * { position: relative; z-index: 1; }
.is-style-section-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}
.is-style-section-dark,
.is-style-section-dark :where(h1,h2,h3,h4,p,li) { color: var(--wp--preset--color--on-dark); }
.is-style-section-dark :where(h1,h2,h3,h4) { color: #fff; }

/* Hero-Verlauf (zusätzlich zum optionalen Gradient-Hintergrund) */
.is-style-hero-accent {
  position: relative; overflow: hidden;
  color: var(--wp--preset--color--on-dark);
}
/* Überschriften auf dunklem Grund hell halten (überschreibt theme.json heading-Farbe) */
.is-style-hero-accent :where(h1, h2, h3, h4),
.is-style-section-dark :where(h1, h2, h3, h4) { color: #fff; }
.is-style-hero-accent :where(p, li) { color: var(--wp--preset--color--on-dark); }
.is-style-hero-accent::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 60% at 78% 12%, rgba(0,124,186,.30), transparent 60%),
    radial-gradient(50% 50% at 8% 92%, rgba(0,124,186,.12), transparent 60%);
}
.is-style-hero-accent > * { position: relative; z-index: 1; }

/* Karten-Hover für Gruppen mit Klasse .karte */
.karte { height: 100%; transition: transform .18s ease, box-shadow .18s ease; }
.karte.has-link:hover,
.karte a:hover ~ .karte { transform: translateY(-3px); }
.karte:hover { box-shadow: 0 8px 30px rgba(13,15,18,.12); }

/* Icon-Badge (kleine quadratische Akzentfläche, z. B. vor Karten-Titeln) */
.icon-badge {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 10px; background: var(--wp--preset--color--accent-soft);
  color: var(--wp--preset--color--accent-strong); font-size: 1.4rem; line-height: 1;
}

/* Eyebrow-Label */
.eyebrow {
  display: inline-block; font-size: .9rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wp--preset--color--accent);
}
.is-style-section-dark .eyebrow { color: #4db4e0; }

/* Bildplatzhalter (dekorativ, bis Originalbilder vorliegen) */
.media-ph {
  display: grid; place-items: center; text-align: center; min-height: 240px;
  border: 1px dashed var(--wp--preset--color--accent);
  border-radius: 12px; padding: 2rem; font-weight: 600;
  color: var(--wp--preset--color--accent-strong);
  background:
    repeating-linear-gradient(135deg, rgba(0,124,186,.06) 0 12px, transparent 12px 24px),
    var(--wp--preset--color--accent-soft);
}

/* Schritt-Nummer (Ablauf) */
.step-num {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--wp--preset--color--accent); color: #fff; font-weight: 800;
}

/* Hinweis-Box (z. B. „Beispielprojekt …“) */
.hinweis {
  font-size: .9rem; font-style: italic; color: #7a5b12;
  background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px;
  padding: .5rem .75rem;
}

/* FAQ: core/details ansprechend gestalten */
.faq-details {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px; padding: 1.25rem 1.5rem;
}
.faq-details summary { cursor: pointer; font-weight: 700; }

/* Formular-Platzhalter-Bereich */
.formular-platzhalter {
  border: 1px dashed var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  border-radius: 16px; padding: 2rem;
}

/* Footer-Trenner auf dunklem Grund sichtbar */
.site-footer .wp-block-separator { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.15); }

/* Liste ohne Aufzählungszeichen (Footer-Navigation) */
.wp-block-list.is-style-no-bullets { list-style: none; padding-left: 0; margin: 0; }
.wp-block-list.is-style-no-bullets li { margin: 0 0 .4rem; }

/* Tag/Pill */
.pill {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wp--preset--color--accent-strong);
  background: var(--wp--preset--color--accent-soft); padding: .2rem .55rem; border-radius: 999px;
}

/* Sichtbarer Fokus überall */
:where(a, button, input, select, textarea, summary, .wp-block-navigation-item__content):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px;
}

/* Telefon-Button im Header soll nicht umbrechen */
.header-phone a { white-space: nowrap; font-weight: 700; }

/* =====================================================================
   UI/UX 1.1 – Header-Redesign, Navigation, Mikrointeraktionen, Scroll-Reveal
   ===================================================================== */

html { scroll-behavior: smooth; }

/* ---------- Sticky, lebendiger Header ---------- */
.wp-site-blocks > header,
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }

.site-header {
  position: relative;
  -webkit-backdrop-filter: saturate(150%) blur(8px);
          backdrop-filter: saturate(150%) blur(8px);
  transition: padding .28s ease, box-shadow .28s ease, background-color .28s ease;
}
/* feine Akzentlinie am oberen Rand */
.site-header::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, #2aa6e6 45%, rgba(0,124,186,0) 100%);
}
/* kompakterer Zustand beim Scrollen */
.site-header.is-scrolled {
  padding-top: .25rem !important; padding-bottom: .25rem !important;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 28px rgba(13,15,18,.12);
}

/* Logo & Titel mit freundlicher Mikrointeraktion */
.wp-block-site-logo img { border-radius: 9px; transition: transform .3s ease; }
.site-header:hover .wp-block-site-logo img { transform: rotate(-3deg) scale(1.05); }
.wp-block-site-title a { text-decoration: none; font-weight: 800; transition: color .2s ease; }
.wp-block-site-title a:hover { color: var(--wp--preset--color--accent); }

/* ---------- Navigation: animierte Unterstreichung ---------- */
.wp-block-navigation { font-weight: 600; }
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative; padding: .5rem .25rem; transition: color .2s ease;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; margin-inline: auto;
  width: 0; height: 2px; border-radius: 2px; background: var(--wp--preset--color--accent);
  transition: width .25s cubic-bezier(.2,.7,.2,1);
}
.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  width: 100%;
}
.wp-block-navigation a:hover { color: var(--wp--preset--color--accent-strong); }

/* Untermenü als weiche Karte */
.wp-block-navigation .wp-block-navigation__submenu-container {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(13,15,18,.14);
  padding: .4rem; margin-top: .5rem; background: var(--wp--preset--color--surface);
  overflow: hidden;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: 8px; padding: .55rem .8rem;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-strong);
}

/* Kontakt-Button & Telefon im Header */
.header-phone a { color: var(--wp--preset--color--ink); transition: color .2s ease; }
.header-phone a:hover { color: var(--wp--preset--color--accent); }
.header-actions .wp-block-button__link:hover {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,124,186,.36);
}

/* Mobile Overlay-Navigation freundlicher */
.wp-block-navigation__responsive-container.is-menu-open { padding-top: 2.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.2rem; padding: .7rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { bottom: .3rem; }

/* ---------- Buttons: freundliche Mikrointeraktion ---------- */
.wp-block-button__link {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---------- Karten: sanftes Anheben ---------- */
.karte, .is-style-karte { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.karte:hover, .is-style-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(13,15,18,.13);
  border-color: var(--wp--preset--color--accent) !important;
}

/* ---------- Scroll-Reveal (nur wenn JS aktiv & Bewegung erlaubt) ---------- */
html.reveal-ready .reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.reveal-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header:hover .wp-block-site-logo img { transform: none; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 80vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 999999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    padding: 80px 30px 30px !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    transform: translateX(0) !important;
  }

  .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 26px !important;
    font-weight: 700 !important;
  }

  .wp-block-navigation__responsive-container-close {
    top: 24px !important;
    right: 24px !important;
  }
}
/* Hamburger-Menü Icon größer machen */
.wp-block-navigation__responsive-container-open svg {
    width: 42px !important;
    height: 42px !important;
}

/* Klickfläche vergrößern */
.wp-block-navigation__responsive-container-open {
    padding: 8px !important;
}