/* Seniorengemeinschaft Ehrenbürg — App-Styles
 * Ergänzt theme.json. Tokens werden via var(--wp--preset--*) angesprochen.
 */

:root {
  --sge-radius: 1.25rem;
  --sge-radius-sm: 0.625rem;
  --sge-shadow: 0 1px 2px rgba(27, 24, 20, 0.06), 0 8px 24px rgba(27, 24, 20, 0.06);
  --sge-focus-ring: 3px solid var(--wp--preset--color--dunkelrot);
}

/* ---------- Layout-Wrapper ---------- */
.sge-wrap {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}
.sge-wrap--narrow { max-width: 760px; margin-inline: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body { font-feature-settings: "kern"; }

/* ---------- Skip-Link ---------- */
.sge-skip-link {
  display: none;
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 9999;
  background: var(--wp--preset--color--anthrazit);
  color: var(--wp--preset--color--weiss);
  padding: 0.75rem 1.25rem;
  border-radius: var(--sge-radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top 150ms ease;
}
.sge-skip-link:focus { top: 1rem; outline: var(--sge-focus-ring); }

/* ---------- Fokus ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--sge-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Header ----------
   Trick: die weiße Header-Fläche liegt auf der äußeren WP-Hülle
   (.wp-block-template-part) — die ist viewport-breit. Die innere .sge-header
   bleibt auf 1200 px begrenzt und enthält die Flex-Items (Logo, Phone, Nav, Toggle). */
header.wp-block-template-part {
  background: var(--wp--preset--color--weiss);
  border-bottom: 1px solid rgba(27, 24, 20, 0.08);
  display: block;
  width: 100%;
}
.sge-header {
  background: transparent;
  border-bottom: none;
  width: 100%;
}
/* Positions-Anker: die WP-Template-Part-Hülle ist viewport-breit, das sge-header
   auf 1200 px begrenzt — wir ankern das Mobile-Drop-Panel an die äußere Hülle,
   damit es links/rechts an den Viewport-Rand reicht. */
header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part {
  position: relative !important;
  display: block;
  width: 100%;
}
header.sge-header,
.sge-header.wp-block-group { position: static !important; }

/* Flex direkt am sge-header (egal ob WP eine __inner-Wrapper-Group ausgibt oder nicht).
   Greift auf das tatsächlich gerenderte Markup: <header class="sge-header"> mit
   Brand, optional <p>(phone), Nav und Button als direkten Kindern. */
header.sge-header,
.sge-header.wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1rem 1.5rem !important;
  width: min(100% - 2rem, 1200px) !important;
  margin-inline: auto !important;
  padding: 0.85rem 0 !important;
  min-height: 88px;
  /* WP setzt is-layout-flow → flow-Layout-Padding kommt von WP, das überschreiben wir */
}
.sge-header > * { align-self: center !important; margin: 0 !important; flex-shrink: 0; }

/* WordPress wickelt das Shortcode-Output in <p>; den auch als Flex-Item behandeln */
.sge-header > p { padding: 0 !important; }
.sge-header > p > .sge-header__phone { display: inline-flex; }

/* Desktop-Reihenfolge: Brand (1) | Nav (2, fluid) | Phone (3) | Toggle (4, hidden) */
.sge-header > .sge-header__brand                              { order: 1 !important; }
.sge-header > .wp-block-navigation,
.sge-header > nav.wp-block-navigation                         { order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; }
.sge-header > .sge-header__phone,
.sge-header > p:has(.sge-header__phone)                       { order: 3 !important; flex-shrink: 0 !important; margin-left: auto !important; }
.sge-header > .sge-nav-toggle                                 { order: 4 !important; }
.sge-header__inner .wp-block-navigation ul {
  gap: 0.25rem 1.25rem;
  align-items: center;
  margin: 0;
}
.sge-header__inner .wp-block-navigation li { display: flex; align-items: center; }
.sge-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--wp--preset--color--anthrazit);
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0;
  line-height: 0;
}
.sge-header__brand .wp-block-site-logo,
.sge-header__brand .sge-header__logoblock,
.sge-header__brand .custom-logo-link {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}
.sge-header__brand img { display: block; margin: 0; }
.sge-header__logoblock img,
.wp-block-site-logo img {
  height: 72px;
  width: auto;
  display: block;
  max-width: none;
  margin: 0;
  border-radius: 0;
}
@media (max-width: 600px) {
  .sge-header__logoblock img,
  .wp-block-site-logo img { height: 56px; }
}
/* Brand-Schriftzug ausblenden, weil das Logo den Namen bereits enthält.
   Sichtbar machen: dem <span class="sge-header__title"> die Klasse "is-visible" geben. */
.sge-header__title { display: none; }
.sge-header__title.is-visible {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.sge-header__title strong {
  font-family: var(--wp--preset--font-family--spectral);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--anthrazit);
}
.sge-header__title small {
  font-family: var(--wp--preset--font-family--spectral);
  font-size: 0.875rem;
  color: var(--wp--preset--color--schiefer);
  font-weight: 500;
}
.sge-header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--primaerrot);
  color: var(--wp--preset--color--weiss) !important;
  padding: 0 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  white-space: nowrap;
  height: 52px;
  line-height: 1;
  margin: 0;
  box-sizing: border-box;
  vertical-align: middle;
}
.sge-header__phone:hover,
.sge-header__phone:focus { background: var(--wp--preset--color--dunkelrot); }
.sge-header__phone-number { line-height: 1; }
.sge-icon-phone {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex-shrink: 0;
}
.sge-header__phone .sge-icon-phone { width: 1.3em; height: 1.3em; }

/* ---------- Navigation ---------- */
.sge-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.sge-nav a,
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--anthrazit);
  text-decoration: none;
  font-weight: 500;
  padding: 0.25rem 0.1rem 0.4rem;
  border-bottom: 2px solid transparent;
  display: inline-block;
  line-height: 1.3;
}
.sge-nav .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation-item {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.sge-nav a:hover,
.sge-nav a:focus,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--primaerrot);
  border-bottom-color: var(--wp--preset--color--primaerrot);
}
.sge-nav a[aria-current="page"],
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
  color: var(--wp--preset--color--primaerrot);
  border-bottom-color: var(--wp--preset--color--primaerrot);
}

/* ---------- Hero ----------
   .sge-hero ist jetzt eine wp:columns-Instanz (flex). Wir liefern nur
   Hero-spezifische Spacings; die 2-Spalten-Logik kommt vom Block selbst. */
.sge-section--hero { padding: 3rem 0 4rem !important; }
.wp-block-columns.sge-hero {
  gap: 2.5rem !important;
  align-items: center;
}
.wp-block-columns.sge-hero .wp-block-column { min-width: 0; }
.sge-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--primaerrot);
  margin-bottom: 0.75rem;
}
.sge-hero__title { margin: 0 0 1rem; }
.sge-hero__lead { font-size: 1.1875rem; color: var(--wp--preset--color--anthrazit); margin-bottom: 1.75rem; }
.sge-hero__ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; }
.sge-hero__image {
  background: var(--wp--preset--color--warmweiss);
  border-radius: var(--sge-radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sge-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Variante: natürliche Bildproportionen, kein Zuschnitt */
.sge-hero__image--natural,
.sge-hero__image.is-style-natural {
  aspect-ratio: auto;
  background: transparent;
  display: block;
}
.sge-hero__image--natural img,
.sge-hero__image.is-style-natural img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.sge-hero__image--placeholder { background: transparent; }
.sge-hero__image--placeholder img {
  width: auto !important;
  height: auto !important;
  max-width: 90%;
  max-height: 90%;
  opacity: 1;
}

/* ---------- Buttons ---------- */
.sge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--primaerrot);
  color: var(--wp--preset--color--weiss);
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--wp--preset--color--primaerrot);
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.sge-btn:hover, .sge-btn:focus { background: var(--wp--preset--color--dunkelrot); border-color: var(--wp--preset--color--dunkelrot); color: var(--wp--preset--color--weiss); }
.sge-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--anthrazit);
  border-color: var(--wp--preset--color--anthrazit);
}
.sge-btn--ghost:hover, .sge-btn--ghost:focus {
  background: var(--wp--preset--color--salbei);
  border-color: var(--wp--preset--color--salbei);
  color: var(--wp--preset--color--weiss);
}

/* ---------- Karten / Grid ----------
   Greift auch auf wp:group mit className "sge-grid sge-grid--2" — daher
   !important damit WP's is-layout-flow das display nicht überschreibt. */
.sge-grid,
.wp-block-group.sge-grid {
  display: grid !important;
  gap: 1.5rem;
  align-items: stretch;
}
/* WP's is-layout-flow gibt allen Geschwistern ab dem 2. einen margin-block-start;
   in einem Grid pusht der Margin den Karteninhalt INNERHALB der Zelle nach unten,
   was Karten 2, 3, 4… optisch versetzt. Margin auf direkten Grid-Kindern nullen. */
.sge-grid > *,
.wp-block-group.sge-grid > * {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  align-self: stretch;
}
.sge-grid--2,
.wp-block-group.sge-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .sge-grid--2,
  .wp-block-group.sge-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.sge-grid--4,
.wp-block-group.sge-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .sge-grid--4,
  .wp-block-group.sge-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .sge-grid--4,
  .wp-block-group.sge-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.sge-card,
.wp-block-group.sge-card {
  background: var(--wp--preset--color--weiss);
  border-radius: var(--sge-radius);
  padding: 1.25rem;
  border: 1px solid rgba(27, 24, 20, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%; /* stretcht in Grid-Zelle bis zur Reihen-Höhe */
}
/* Listen in Karten ohne übermäßige Einrückung */
.sge-card ul, .sge-card ol { margin: 0; padding-left: 1.25rem; }
.sge-card li { margin-bottom: 0.25rem; }
.sge-card__icon {
  width: 96px; height: 96px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--wp--preset--color--primaerrot);
  flex-shrink: 0;
}
.sge-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sge-card__icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.sge-card__title { font-family: var(--wp--preset--font-family--spectral); font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; }
.sge-card__text { color: var(--wp--preset--color--schiefer); margin: 0; }

/* ---------- Sections ---------- */
.sge-section {
  padding: 4rem 0 1rem;
  width: 100%;
}
.sge-section--warm { background: var(--wp--preset--color--warmweiss); }
/* Direkt nach einer anderen Section ohne großen Abstand */
.sge-section--tight-top {
  padding-top: 0.5rem !important;
}
.sge-section > * {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}
.sge-section__title { text-align: center; margin: 0 0 1rem; }
.sge-section__lead { text-align: center; max-width: 60ch; margin: 0 auto 2.5rem; color: var(--wp--preset--color--schiefer); }

/* Mehr Platz vor H2-Überschriften auf Inhaltsseiten — außer der allerersten,
   die direkt unter H1 / Eyebrow steht. Überschreibt auch alte Inline-Styles
   margin-top:3rem aus den Patterns. */
.sge-section h2:not(:first-of-type) { margin-top: 4.5rem !important; }
.sge-section h2 + * { margin-top: 1.25rem; }

/* ---------- Termine ---------- */
.sge-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--wp--preset--color--weiss);
  border-radius: var(--sge-radius);
  border: 1px solid rgba(27, 24, 20, 0.08);
  align-items: center;
  overflow: hidden;
    /* damit das full-bleed Datum die Card-Rundungen mitmacht */
}
/* Mit Beitragsbild: Bild | Datum | Inhalt | CTA */
.sge-event--with-image {
  grid-template-columns: 120px auto 1fr auto;
}

.sge-event__image {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: var(--sge-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.sge-event__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 720px) {
  .sge-event--with-image {
    grid-template-columns: 100px 1fr;
  }

  .sge-event--with-image .sge-event__date {
    grid-column: 1;
    grid-row: 2;
  }

  .sge-event--with-image .sge-event__image {
    width: 100px;
    height: 100px;
  }
}
.sge-event__date {
  background: var(--wp--preset--color--primaerrot);
  color: var(--wp--preset--color--weiss);
  /* Desktop: full-bleed nach oben, unten und links — Card hat overflow:hidden,
         also werden die linken Card-Rundungen automatisch auf die Badge angewendet,
         rechts kantig (gewünscht). Negative Margins ziehen die Box über das
         Card-Padding hinaus bis zum Border-Rand. */
    margin: -1.25rem 0 -1.25rem -1.25rem;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.5rem;
  text-align: center;
  font-weight: 700;
  min-width: 90px;
  border-radius: 0;
}
.sge-event__date small { display: block; font-size: 0.8125rem; font-weight: 500; opacity: 0.9; }
.sge-event__title { margin: 0 0 0.25rem; font-size: 1.125rem; }
.sge-event__meta { color: var(--wp--preset--color--schiefer); font-size: 0.9375rem; margin: 0; }
.sge-event__transport {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--salbei);
  color: var(--wp--preset--color--weiss);
  font-size: 0.8125rem;
  font-weight: 600;
}
/* Details-/Rückblick-CTA: Plus-Zeichen + Text auf Desktop, kompakter auf Mobile */
.sge-event__cta {
  gap: 0.4rem;
  align-items: center;
}

/* ---------- Reparatur-Regeln für wpautop-Artefakte ----------
   Wenn die Termin-HTML statisch in einer Page gespeichert ist, wickelt
   WordPress' wpautop den Button und transport-Hinweis in <p> ein.
   Die default-Margins der <p> würden den Button nach unten schieben. */
.sge-event > p { margin: 0 !important; padding: 0; }
.sge-event > p:has(> .sge-event__cta) {
  text-align: right;
  justify-self: end;
}
.sge-event__cta > br,
.sge-event__cta br { display: none !important; }

.sge-event__cta-plus {
  color: var(--wp--preset--color--primaerrot);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1;
  display: inline-block;
}
@media (max-width: 600px) {
  .sge-event {
      grid-template-columns: 1fr;
      padding: 0 1rem 1rem;
      /* Top-Padding 0 — Datum-Badge füllt den oberen Rand */
    }
  
    /* Datum auf Mobile: oben full-bleed (top, left, right), nur die unteren
         Ecken bleiben kantig — wird von overflow:hidden + Card-Radius geklippt */
    .sge-event__date {
      margin: 0 -1rem 1rem;
      padding: 0.85rem 1rem;
      min-width: 0;
      text-align: left;
      align-self: auto;
      display: block;
    }
  
    .sge-event__date small {
      display: inline;
      margin-left: 0.5rem;
    }
  
    /* Details-/Rückblick-Button: kompakt, rechtsbündig */
    .sge-event__cta,
    a.sge-event__cta,
    .sge-btn.sge-event__cta {
      justify-self: end !important;
      align-self: end !important;
      margin-left: auto !important;
      width: auto !important;
      height: 40px !important;
      min-height: 40px !important;
      padding: 0 0.75rem !important;
      font-size: 0.85rem !important;
      line-height: 1 !important;
      gap: 0.3rem !important;
      display: inline-flex !important;
      position: relative;
    }
    /* (wpautop-fixes weiter unten globaler) */

  /* Erzwinge Single-Column-Grid auf jedem .sge-event auf Mobile, damit
     justify-self: end zuverlässig greift */
  article.sge-event,
  .sge-event {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  
    .sge-event__cta-plus {
      font-size: 1.4em;
    }
  
    /* Sehr schmale Bildschirme: Text ausblenden, nur Plus-Zeichen zeigen.
         "Details"/"Rückblick" bleibt aria-label am Link für Screenreader. */
    /*@media (max-width: 380px) {
        .sge-event__cta-text {
          position: absolute !important;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border: 0;
        }
    
        .sge-event>.sge-event__cta {
          width: 30px;
          padding: 0;
          justify-content: center;
        }
      }*/
}

/* Spezifisches Padding für Termin-Detailseite: Eyebrow nah am Header,
   großzügiger Abstand zum darunter folgenden Kontaktbalken. */
.sge-section--event {
  padding: 2rem 0 4rem !important;
}

.sge-section--event .sge-eyebrow {
  margin-bottom: 0.5rem;
}

/* Beitragsbild auf der Termin-Detailseite */
.sge-event-hero {
  margin: 1.5rem 0 2rem !important;
  border-radius: var(--sge-radius);
  overflow: hidden;
}

.sge-event-hero img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
}
/* ---------- Kontaktblock ----------
   Reines Weiß als Card-Look mit rotem Akzentstrich oben — keine düstere
   Trauerfloor-Anmutung, sondern hell, einladend und klar abgegrenzt vom
   warmweißen Body. */
.sge-contact-bar {
  background: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--anthrazit);
  padding: 3.5rem 0;
  /* Mobile: full-bleed, kein horizontaler Margin */
    width: 100%;
    margin: 6rem 0;
  border-top: 4px solid var(--wp--preset--color--primaerrot);
  border-bottom: 1px solid rgba(27, 24, 20, 0.08);
  box-sizing: border-box;
  }
  
  /* Desktop: zentrierte Card mit komplettem roten Rahmen, gleiche Content-Breite
             wie Sections (1200 px max minus Gutter), 6 rem Abstand oben + unten */
  @media (min-width: 720px) {
    .sge-contact-bar {
      width: min(100% - 2rem, 1200px) !important;
      margin: 6rem auto !important;
      border: 1px solid var(--wp--preset--color--primaerrot) !important;
      /*border-radius: var(--sge-radius);*/
      padding: 3rem 2rem;
      box-sizing: border-box;
    }
}
.sge-contact-bar > * {
  width: min(100% - 2rem, 1200px);
  margin-inline: 1.25rem auto;
}
.sge-contact-bar a {
  color: var(--wp--preset--color--anthrazit);
}
.sge-contact-bar a:hover,
.sge-contact-bar a:focus { color: var(--wp--preset--color--primaerrot); }

.sge-contact-bar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--wp--preset--font-family--spectral);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--primaerrot) !important;
  margin: 0.5rem 0 1rem;
}
.sge-contact-bar__phone:hover,
.sge-contact-bar__phone:focus {
  color: var(--wp--preset--color--dunkelrot) !important;
}
/* Variante in der Kontakt-Karte (eigenständig auf weißer Card) */
.sge-contact-bar__phone--card {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

/* ---------- Footer ---------- */
.sge-footer {
  background: var(--wp--preset--color--warmweiss);
  color: var(--wp--preset--color--anthrazit);
  padding: 3.5rem 0 1.5rem;
  width: 100%;
  border-top: 4px solid var(--wp--preset--color--primaerrot);
  margin: 0 !important;
}
/* Auch der äußere WP-Template-Part-Wrapper darf keinen Top-Margin haben */
footer.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
  margin: 0 !important;
}
.sge-footer > * {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}
.sge-footer a { color: var(--wp--preset--color--anthrazit); text-decoration: underline; text-underline-offset: 3px; }
.sge-footer a:hover, .sge-footer a:focus { color: var(--wp--preset--color--primaerrot); }
.sge-footer h3 {
  font-family: var(--wp--preset--font-family--spectral);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--anthrazit);
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(27, 24, 20, 0.12);
  min-height: 2.25rem;
}
.sge-footer p { margin: 0 0 0.75rem; }

.sge-footer__cols {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
  align-items: start;
}
.sge-footer__cols > * {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  align-self: start;
}
.sge-footer__cols > * > :first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
@media (min-width: 640px) {
  .sge-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
@media (min-width: 880px) {
  .sge-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

.sge-footer ul,
.sge-footer ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sge-footer ul li,
.sge-footer ol li {
  margin: 0 0 0.5rem 0;
  padding: 0;
}

.sge-footer__legal {
  border-top: 1px solid rgba(27, 24, 20, 0.12);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--wp--preset--color--schiefer);
  line-height: 1.5;
}
.sge-footer__legal > * { margin: 0 !important; }
.sge-footer__legal p { margin: 0 !important; padding: 0; }
.sge-footer__legal a {
  color: var(--wp--preset--color--schiefer);
  padding: 0;
  display: inline-block;
  line-height: 1.5;
}

/* ---------- FAQ-Akkordeon (wp:details mit .sge-faq-card) ----------
   Liegt direkt in .sge-section, bekommt die 1200-px-Breite über `.sge-section > *`
   und damit dieselbe Begrenzung wie H2 / Absätze. Kein flex/height wie .sge-card,
   damit das native <details>-Verhalten nicht stört. */
.sge-faq-card,
details.sge-faq-card,
.wp-block-details.sge-faq-card {
  background: var(--wp--preset--color--weiss);
  border: 1px solid rgba(27, 24, 20, 0.08);
  border-radius: var(--sge-radius-sm);
  padding: 1rem 1.5rem;
  margin-top: 0.75rem !important;
  margin-bottom: 0 !important;
  /* margin-inline: auto bleibt erhalten — kommt aus .sge-section > * */
}
.sge-faq-card[open] { border-color: rgba(27, 24, 20, 0.18); }
.sge-faq-card summary {
  cursor: pointer;
  font-size: 1.0625rem;
  padding: 0.25rem 0;
  padding-right: 2rem;
  position: relative;
  outline: none;
  /* Standard-Dreieck links beibehalten */
}
.sge-faq-card summary::marker { color: var(--wp--preset--color--primaerrot); }
.sge-faq-card summary::-webkit-details-marker { color: var(--wp--preset--color--primaerrot); }
.sge-faq-card summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wp--preset--color--primaerrot);
  line-height: 1;
  transition: transform 200ms ease;
}
.sge-faq-card[open] summary::after { content: "−"; }
.sge-faq-card summary:hover { color: var(--wp--preset--color--primaerrot); }
.sge-faq-card summary:focus-visible { outline: 2px solid var(--wp--preset--color--primaerrot); outline-offset: 4px; border-radius: 4px; }
.sge-faq-card > p,
.sge-faq-card .wp-block-paragraph {
  margin: 0.75rem 0 0.25rem;
  color: var(--wp--preset--color--anthrazit);
}

/* Buttons-Reihe in Inhaltspatterns (mehrere CTAs nebeneinander) */
.sge-buttons-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* Variante: Button nach Card-Grid — braucht mehr Abstand,
   damit er nicht über die Karten hineinragt */
.sge-buttons-row--after-grid {
  margin-top: 2.5rem !important;
  clear: both;
}

/* ---------- Beitrags-Tabelle ---------- */
/* Keine eigene Breite — die Tabelle erbt von .sge-section > * automatisch
   die 1200-px-Content-Breite und liegt damit auf gleicher Linie wie H2 & Absätze. */
.sge-pricing {
  border-collapse: collapse;
  background: var(--wp--preset--color--weiss);
  border: 1px solid rgba(27, 24, 20, 0.08);
  border-radius: var(--sge-radius);
  overflow: hidden;
  margin-block: 1.25rem;
}
.sge-pricing th, .sge-pricing td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgba(27, 24, 20, 0.08);
}
.sge-pricing tr:last-child th,
.sge-pricing tr:last-child td { border-bottom: 0; }
.sge-pricing th { background: var(--wp--preset--color--warmweiss); font-weight: 600; }
.sge-pricing td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
@media (max-width: 540px) {
  .sge-pricing th, .sge-pricing td { padding: 0.7rem 0.85rem; font-size: 0.95rem; }
}

/* ---------- Kontaktformular (Contact Form 7) ---------- */
.wpcf7-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  max-width: 720px;
}
.wpcf7-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.wpcf7-form label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--wp--preset--color--anthrazit);
  line-height: 1.4;
  text-indent: 1.0rem;
    /* nur der Beschriftungstext eingerückt, Inputs bleiben unberührt */
  }
  
  /* Sicherheitsnetz: falls ein Input im Label-Wrap doch noch eingerückt würde */
  .wpcf7-form label>input,
  .wpcf7-form label>select,
  .wpcf7-form label>textarea,
  .wpcf7-form label>.wpcf7-form-control-wrap {
    text-indent: 0;
}
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.45;
  padding: 0.85rem 1rem;
  background: var(--wp--preset--color--weiss);
  color: var(--wp--preset--color--anthrazit);
  border: 1.5px solid rgba(27, 24, 20, 0.18);
  border-radius: var(--sge-radius-sm);
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input:hover,
.wpcf7-form select:hover,
.wpcf7-form textarea:hover {
  border-color: rgba(27, 24, 20, 0.35);
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  border-color: var(--wp--preset--color--primaerrot);
  box-shadow: 0 0 0 3px rgba(178, 58, 63, 0.15);
  outline: none;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form ::placeholder { color: var(--wp--preset--color--schiefer); opacity: 0.7; }

/* Pflichtfeld-Sternchen */
.wpcf7-form label .wpcf7-required,
.wpcf7-form .wpcf7-required-mark { color: var(--wp--preset--color--primaerrot); }

/* Checkbox + Radio (Datenschutz-Akzeptanz etc.) */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio { display: block; }
.wpcf7-form .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
  flex-shrink: 0;
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--wp--preset--color--primaerrot);
  cursor: pointer;
}
.wpcf7-form .wpcf7-list-item-label { font-size: 0.95rem; color: var(--wp--preset--color--anthrazit); cursor: pointer; }

/* Submit-Button — passt zur sge-btn-Optik */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--color--primaerrot);
  color: var(--wp--preset--color--weiss);
  border: 2px solid var(--wp--preset--color--primaerrot);
  border-radius: 9999px;
  padding: 0.85rem 2rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1;
  cursor: pointer;
  min-height: 52px;
  margin-top: 0.5rem;
  width: auto;
  align-self: start;
  transition: background-color 150ms ease, border-color 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus,
.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus {
  background: var(--wp--preset--color--dunkelrot);
  border-color: var(--wp--preset--color--dunkelrot);
}

/* Statusmeldungen (success / error) */
.wpcf7-response-output {
  border-radius: var(--sge-radius-sm);
  border: 1px solid rgba(27, 24, 20, 0.12) !important;
  padding: 1rem 1.25rem !important;
  margin: 1.25rem 0 0 !important;
  font-size: 0.95rem;
  line-height: 1.5;
}
.wpcf7 form.sent .wpcf7-response-output {
  background: rgba(111, 127, 95, 0.12);
  border-color: var(--wp--preset--color--salbei) !important;
  color: var(--wp--preset--color--anthrazit);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  background: rgba(178, 58, 63, 0.08);
  border-color: var(--wp--preset--color--primaerrot) !important;
  color: var(--wp--preset--color--dunkelrot);
}

.wpcf7-not-valid-tip {
  color: var(--wp--preset--color--primaerrot);
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.3rem;
  display: block;
}
.wpcf7-form .wpcf7-not-valid {
  border-color: var(--wp--preset--color--primaerrot) !important;
  background: rgba(178, 58, 63, 0.04);
}

/* Zwei-Spalter bei breitem Viewport — Name und Telefon nebeneinander,
   E-Mail / Nachricht / Datenschutz / Submit über volle Breite. */
@media (min-width: 720px) {
  .wpcf7-form.sge-form-2col { grid-template-columns: 1fr 1fr; }
  .wpcf7-form.sge-form-2col .sge-form-full,
  .wpcf7-form.sge-form-2col p:has(textarea),
  .wpcf7-form.sge-form-2col p:has(input[type="email"]),
  .wpcf7-form.sge-form-2col p:has(input[type="url"]),
  .wpcf7-form.sge-form-2col p:has([type="submit"]),
  .wpcf7-form.sge-form-2col p:has(.wpcf7-acceptance),
  .wpcf7-form.sge-form-2col p:has(.wpcf7-checkbox) { grid-column: 1 / -1; }
}

/* ---------- Bilder & Captions ---------- */
.wp-block-image figcaption,
.wp-element-caption,
figure.wp-block-image > figcaption {
  text-align: left !important;
  color: var(--wp--preset--color--schiefer);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 0.75rem;
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.sge-eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--primaerrot); }

/* ---------- Mobile-Nav-Toggle ---------- */
.sge-nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--wp--preset--color--anthrazit);
  border-radius: 9999px;
  padding: 0 1.25rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  height: 52px;
  line-height: 1;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  white-space: nowrap;
  color: var(--wp--preset--color--anthrazit);
  box-sizing: border-box;
  vertical-align: middle;
}
.sge-nav-toggle__label {
  font-size: inherit;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 14px;
}
.sge-nav-toggle:hover,
.sge-nav-toggle:focus {
  background: var(--wp--preset--color--anthrazit);
  color: var(--wp--preset--color--weiss);
}
/* Hamburger-Icon: drei Bars, animiert zu X im offenen Zustand.
   Alle Bars werden über `top` positioniert — sonst rendert der unterste
   Strich (mit `bottom: 0`) auf manchen Bildschirmen einen Sub-Pixel dicker. */
.sge-nav-toggle__bars {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
}
.sge-nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: 50% 50%;
  transition:
    top 280ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1) 80ms,
    opacity 180ms ease;
}
.sge-nav-toggle__bars span:nth-child(1) { top: 0; }
.sge-nav-toggle__bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.sge-nav-toggle__bars span:nth-child(3) { top: calc(100% - 2px); }

/* Offen: oben + unten → Mitte rotieren, Mittelstrich verblasst */
.sge-header.is-mobile-open .sge-nav-toggle__bars span:nth-child(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
.sge-header.is-mobile-open .sge-nav-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
.sge-header.is-mobile-open .sge-nav-toggle__bars span:nth-child(3) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}
@media (max-width: 1000px) {
  .sge-nav-toggle { display: inline-flex !important; }
  header.sge-header,
  .sge-header.wp-block-group { gap: 0.75rem !important; }

  /* Mobile-Reihenfolge: Brand (1) | Phone (2) | Toggle (3, ganz rechts) */
  .sge-header > .sge-header__brand                              { order: 1 !important; }
  .sge-header > .sge-header__phone,
  .sge-header > p:has(.sge-header__phone)                       { order: 2 !important; margin-left: 0 !important; }
  .sge-header > .sge-nav-toggle                                 { order: 3 !important; margin-left: auto !important; }

  /* Nav als animiertes Drop-Panel — komplett aus dem Flex-Layout heraus */
  .sge-header > .wp-block-navigation,
  .sge-header > nav.wp-block-navigation {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100;
    flex: none !important;
    background: var(--wp--preset--color--weiss);
    border-top: 1px solid rgba(27, 24, 20, 0.08);
    box-shadow: 0 12px 28px rgba(27, 24, 20, 0.08);
    display: grid !important;
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      grid-template-rows 320ms cubic-bezier(0.25, 1, 0.5, 1),
      opacity 240ms ease,
      transform 320ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .sge-header > .wp-block-navigation > * {
    overflow: hidden;
    min-height: 0;
  }
  .sge-header.is-mobile-open > .wp-block-navigation {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Innenabstand und Listen-Ausrichtung im offenen Zustand — zwingend links,
     überschreibt WP-Klassen .items-justified-right und .is-content-justification-right */
  .sge-header.is-mobile-open .wp-block-navigation,
  .sge-header.is-mobile-open .wp-block-navigation.is-content-justification-right,
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation__container,
  .sge-header.is-mobile-open .wp-block-navigation ul,
  .sge-header.is-mobile-open .wp-block-navigation ul.items-justified-right {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 1.25rem clamp(1rem, 4vw, 2rem) !important;
  }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item,
  .sge-header.is-mobile-open .wp-block-navigation li.wp-block-navigation-item {
    margin: 0 auto 0 0 !important;
    align-self: flex-start !important;
    width: auto;
    justify-self: flex-start !important;
  }

  /* Gestaffeltes Auftauchen der einzelnen Menüpunkte */
  .sge-header .wp-block-navigation .wp-block-navigation-item {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item {
    opacity: 1;
    transform: translateY(0);
  }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(1) { transition-delay: 80ms; }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(2) { transition-delay: 130ms; }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(3) { transition-delay: 180ms; }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(4) { transition-delay: 230ms; }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(5) { transition-delay: 280ms; }
  .sge-header.is-mobile-open .wp-block-navigation .wp-block-navigation-item:nth-child(6) { transition-delay: 330ms; }
}

/* Animation respektiert prefers-reduced-motion (greift bereits global) */

/* Auf Desktop: Mobile-CTA-Wrapper unsichtbar */
.sge-header__mobile-cta { display: none; }

/* Auf Mobile: Top-Phone aus dem Header verstecken, dafür Mobile-CTA im Drop-Panel */
@media (max-width: 1000px) {
  /* Original-Phone aus der Top-Zeile entfernen (auch falls in <p> gewickelt) */
  .sge-header > p:has(.sge-header__phone),
  .sge-header > .sge-header__phone { display: none !important; }

  /* Mobile-CTA-Block: oberhalb der Nav-Liste im Drop-Panel.
     Höhe ist visuell ~88 px (Padding + 56-px-Pille). */
  .sge-header__mobile-cta {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--wp--preset--color--weiss);
    border-top: 1px solid rgba(27, 24, 20, 0.08);
    box-shadow: 0 12px 28px rgba(27, 24, 20, 0.08);
    padding: 1.25rem clamp(1rem, 4vw, 2rem) 0.5rem;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
      opacity 240ms ease,
      transform 320ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .sge-header.is-mobile-open .sge-header__mobile-cta {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Telefon-Pille im Mobile-CTA: prominent, mit Nummer und Icon */
  .sge-header__mobile-cta .sge-header__phone {
    display: inline-flex !important;
    width: auto !important;
    height: 56px;
    padding: 0 1.75rem !important;
    gap: 0.6rem !important;
    font-size: 1.125rem;
  }
  .sge-header__mobile-cta .sge-header__phone-number {
    display: inline !important;
  }
  .sge-header__mobile-cta .sge-header__phone .sge-icon-phone {
    width: 1.3em;
    height: 1.3em;
  }

  /* Nav unter der CTA platzieren — Top-Versatz = Höhe der CTA (~88 px).
     Box-Shadow vom Nav-Panel weg, weil CTA schon einen hat (eine zusammenhängende Fläche). */
  .sge-header > .wp-block-navigation,
  .sge-header > nav.wp-block-navigation {
    top: calc(100% + 88px) !important;
    border-top: none !important;
    box-shadow: 0 12px 28px rgba(27, 24, 20, 0.08) !important;
  }
}

/* =====================================================================
   Mobile-Drop-Panel v2: Navigation + Telefon-Button in EINEM Wrapper
   (.sge-header__drop). Der Button steht unterhalb der Menü-Links.
   Diese Regeln stehen bewusst am Dateiende und überschreiben die
   älteren Panel-Regeln (Nav absolut / CTA oberhalb).
   ===================================================================== */

/* Desktop: Wrapper "unsichtbar" machen — Kinder verhalten sich wie
   direkte Flex-Items des Headers, bestehendes Desktop-Layout bleibt. */
@media (min-width: 1001px) {
  .sge-header__drop,
  .wp-block-group.sge-header__drop { display: contents; }
}

@media (max-width: 1000px) {
  /* Der Wrapper ist jetzt das Drop-Panel */
  .sge-header__drop,
  .wp-block-group.sge-header__drop {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100;
    background: var(--wp--preset--color--weiss);
    border-top: 1px solid rgba(27, 24, 20, 0.08);
    box-shadow: 0 12px 28px rgba(27, 24, 20, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 240ms ease,
      visibility 0s linear 240ms,
      transform 320ms cubic-bezier(0.25, 1, 0.5, 1);
  }
  .sge-header.is-mobile-open .sge-header__drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 240ms ease,
      visibility 0s,
      transform 320ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Nav im Panel: alle älteren Absolut-/Versteck-Regeln neutralisieren */
  .sge-header .sge-header__drop .wp-block-navigation,
  .sge-header .sge-header__drop nav.wp-block-navigation {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: inherit !important;
    transform: none !important;
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    flex: none !important;
  }

  /* Telefon-Button unterhalb der Links, linksbündig, mit Trennlinie */
  .sge-header .sge-header__drop .sge-header__mobile-cta {
    display: block !important;
    position: static !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: inherit !important;
    transform: none !important;
    background: transparent !important;
    border-top: 1px solid rgba(27, 24, 20, 0.08) !important;
    box-shadow: none !important;
    margin: 0 clamp(1rem, 4vw, 2rem);
    padding: 1rem 0 1.25rem !important;
    text-align: left !important;
  }
  .sge-header .sge-header__drop .sge-header__mobile-cta .sge-header__phone {
    display: inline-flex !important;
    width: auto !important;
    height: 52px;
    padding: 0 1.5rem !important;
    gap: 0.6rem !important;
    font-size: 1.0625rem;
  }
  .sge-header .sge-header__drop .sge-header__mobile-cta .sge-header__phone-number {
    display: inline !important;
  }
}

/* Mobile: Telefon-Pille aus der Kopfzeile ausblenden — sie erscheint nur
   im aufgeklappten Drop-Panel. (Breiter Selektor, weil der Button je nach
   Struktur in einem <p>-wpautop-Wrapper oder direkt liegen kann.) */
@media (max-width: 1000px) {
  .sge-header .sge-header__phone,
  .sge-header p:has(> .sge-header__phone) {
    display: none !important;
  }
  /* Ausnahme: der Button im Drop-Panel bleibt sichtbar
     (steht NACH der Versteck-Regel und ist spezifischer) */
  .sge-header .sge-header__drop .sge-header__mobile-cta {
    display: block !important;
  }
  .sge-header .sge-header__drop .sge-header__mobile-cta .sge-header__phone {
    display: inline-flex !important;
  }
}

/* Mobile: Hamburger-Toggle immer ganz rechts — unabhängig davon, welche
   justify-/order-Regeln am Header-Flex gerade greifen. */
@media (max-width: 1000px) {
  .sge-header .sge-nav-toggle,
  .sge-header__inner .sge-nav-toggle {
    order: 99 !important;
    margin-left: auto !important;
  }
}

/* Mobile: Kopfzeile definitiv als Flexzeile mit Randverteilung —
   Logo links, Hamburger rechts. Überschreibt alle älteren Layout-Reste. */
@media (max-width: 1000px) {
  .sge-header__inner,
  .sge-header .sge-header__inner.wp-block-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

/* Mobile: Hamburger absolut am rechten Rand der Kopfzeile verankern.
   Anker ist header.wp-block-template-part (position: relative) — dessen
   Höhe entspricht der Kopfzeile, weil das Drop-Panel absolut ist.
   Robust gegen jegliche Flex-/Order-Vererbungsprobleme. */
@media (max-width: 1000px) {
  .sge-header .sge-nav-toggle {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 50;
  }
}

/* Desktop: Logo links | Menü-Links mittig | Telefon-Button rechts.
   Die Nav streckt sich über den Mittelraum und zentriert ihre Links. */
@media (min-width: 1001px) {
  .sge-header__inner .wp-block-navigation,
  .sge-header__inner nav.wp-block-navigation {
    flex: 1 1 auto !important;
    min-width: 0;
    justify-content: center !important;
  }
  .sge-header__inner .wp-block-navigation .wp-block-navigation__container,
  .sge-header__inner .wp-block-navigation ul {
    justify-content: center !important;
  }
}

/* =====================================================================
   WordPress-Layout-Basisregeln — auf dieser Installation liefert WP
   "body .is-layout-flex" LEER aus, wodurch kein einziger Layout-Container
   tatsächlich als Flexbox/Grid rendert (justify/order/flex wirkungslos).
   Diese Basis ersetzt die fehlenden Core-Regeln. Bewusst ohne !important,
   damit spezifischere Regeln weiterhin gewinnen.
   ===================================================================== */
.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.is-layout-grid {
  display: grid;
}
.is-nowrap.is-layout-flex { flex-wrap: nowrap; }
.is-vertical.is-layout-flex { flex-direction: column; }

/* Kopfzeile über die volle Header-Breite (1200px-Content) strecken —
   sonst schrumpft sie als Flex-Kind auf Inhaltsbreite und space-between
   kann Logo | Menü | Telefon nicht bis zum Content-Rand verteilen. */
.sge-header .sge-header__inner,
.sge-header > .sge-header__inner.wp-block-group {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0;
}