/* ================== Branding-Layout: Logo | (Titel + Untertitel) ================== */

/* Desktop & Tablet: nebeneinander */
@media (min-width: 900px){
  #masthead .site-branding{
    display: grid !important;
    grid-template-columns: auto 1fr !important; /* Logo | Textblock */
    align-items: center !important;
    column-gap: clamp(16px, 3vw, 36px) !important;
  }

  /* Elemente sauber in die zweite Spalte setzen */
  #masthead .site-logo{ grid-column: 1 !important; margin: 0 !important; }
  #masthead .site-title,
  #masthead .site-description{
    grid-column: 2 !important;
    margin: 0 !important;
  }

  /* Typo-Feintuning (optional) */
  #masthead .site-title{ line-height: 1.1 !important; }
  #masthead .site-description{ line-height: 1.25 !important; opacity: .95; }
  #masthead .site-title a{ text-decoration: none !important; }
}

/* Mobile: untereinander zentriert */
@media (max-width: 899px){
  #masthead .site-branding{
    display: block !important;
    text-align: center !important;
  }
  #masthead .site-logo{ margin: 0 auto 10px !important; }
  #masthead .site-title,
  #masthead .site-description{ text-align: center !important; margin: 0 !important; }
}

@media (min-width: 900px) {
    #masthead .site-logo {
        grid-column: 1 !important;
        margin: 0 !important;
        max-width: 90px;
    }
}
@media (max-width: 899px) {
    #masthead .site-logo {
        grid-column: 1 !important;
        margin: 0 !important;
        max-width: 90px;
			display: inline-block
    }
}



/* =========================================================
   Bilder & Layout-Kosmetik
   ========================================================= */
.wp-block-image img { border-radius:20px; }
.wp-block-columns .wp-block-column:last-child,
.wp-block-group .wp-block-group__inner-container > *:last-child,
.wp-block-columns .wp-block-column > *:last-child{ margin-bottom:0; border-radius:20px !important; }


/* Mobile: Social-Icons enger, aber einzeilig */
@media (max-width: 390px){
  .header-grid .cell--social .wp-block-social-links{
    gap: 10px !important;
    flex-wrap: nowrap !important;   /* nicht umbrechen */
  }
  .header-grid .cell--social .wp-block-social-links .wp-social-link a{
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
  }
}


/* ===== Footer-Socials: immer mittig & pixelgenau ===== */
:root{
  --footer-icon: 48px;   /* Icon-Button-Durchmesser */
  --footer-gap: 12px;    /* Abstand zwischen Buttons */
}

footer .wp-block-social-links,
.site-footer .wp-block-social-links,
#colophon .wp-block-social-links{
  list-style: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: var(--footer-gap) !important;
  flex-wrap: wrap !important;     /* darf umbrechen, bleibt zentriert */
  padding: 0 !important;
  margin: 0 auto !important;
}

footer .wp-block-social-links .wp-social-link,
.site-footer .wp-block-social-links .wp-social-link,
#colophon .wp-block-social-links .wp-social-link{
  margin: 0 !important;           /* WP-Default-Margins entfernen */
}

footer .wp-block-social-links .wp-social-link a,
.site-footer .wp-block-social-links .wp-social-link a,
#colophon .wp-block-social-links .wp-social-link a{
  box-sizing: border-box !important;
  width: var(--footer-icon) !important;
  height: var(--footer-icon) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;      /* verhindert vertikales „Wippen“ */
  background: #9e812e !important; /* dein Gold */
  color: #fff !important;
  text-decoration: none !important;
}

/* ganz wichtig für iOS/Safari: keine Baseline */
footer .wp-block-social-links .wp-social-link a svg{
  width: 55% !important;
  height: 55% !important;
  display: block !important;      /* Baseline weg → perfekte Zentrierung */
}

/* Optional: sehr kleine Geräte – leicht verkleinern */
@media (max-width: 360px){
  :root{ --footer-icon: 44px; --footer-gap: 10px; }
}
@media (max-width: 330px){
  :root{ --footer-icon: 40px; --footer-gap: 8px; }
}



.wp-block-jetpack-contact-form .wp-block-jetpack-button .wp-block-button__link {
    min-height: var(--jetpack--contact-form--input-height, auto);
    padding: var(--jetpack--contact-form--input-padding);
    border-radius: 20px !important;
}

.main-navigation #toggle-menu {
    display: none;
}

#page .entry-header, #page .page-header, #page .entry-footer, #page .a8c-posts-list {
    text-align: center;
    display: none;
}


.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background), .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
    border-radius: 20px !important;
}

/* ===== Footer-Socials – iOS stabilisieren ===== */
footer .wp-block-social-links,
.site-footer .wp-block-social-links,
#colophon .wp-block-social-links{
  min-width: 0 !important;                 /* Safari: keine Mindestbreite erzwingen */
}

/* Fixe Kachelbreite je Icon → kein Wrap durch Rundungen */
footer .wp-block-social-links .wp-social-link,
.site-footer .wp-block-social-links .wp-social-link,
#colophon .wp-block-social-links .wp-social-link{
  flex: 0 0 var(--footer-icon) !important; /* Basis = feste Kachelbreite */
  width: var(--footer-icon) !important;
  height: var(--footer-icon) !important;
  line-height: 0 !important;               /* Baseline-Effekte killen */
  margin: 0 !important;
}

footer .wp-block-social-links .wp-social-link a,
.site-footer .wp-block-social-links .wp-social-link a,
#colophon .wp-block-social-links .wp-social-link a{
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* iOS: SVG ohne Baseline */
footer .wp-block-social-links .wp-social-link a svg{
  display: block !important;
}

/* ===== iPhone-13-mini & ähnliche (≤380px): etwas kleiner + kein Umbruch ===== */
@media (max-width: 380px){
  :root{ --footer-icon: 44px; --footer-gap: 10px; }  /* falls du --footer-gap nutzt */
  footer .wp-block-social-links,
  .site-footer .wp-block-social-links,
  #colophon .wp-block-social-links{
    flex-wrap: nowrap !important;                    /* zwingend eine Reihe */
  }
}