/*
Theme Name: Radiate Child
Template: radiate
Version: 1.0.1
Text Domain: radiate-child
*/
/* === Google Fonts importieren === */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600&family=Quattrocento+Sans:wght@400;700&display=swap');

/* === Variablen === */
:root {
  --font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Quattrocento Sans", Georgia, "Times New Roman", serif;
}

/* === Grundschrift === */
html { font-size: 100%; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Überschriften === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  margin: 1.2em 0 .4em;
}

/* === Fließtext & UI === */
p, li, figcaption, small,
button, input, select, textarea {
  font-family: var(--font-body);
}

a {
  color: #006699;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* === Zitate === */
blockquote, .wp-block-quote {
  font-family: var(--font-head);
  font-style: italic;
}

/* === Tabellen === */
.wp-block-table td,
.wp-block-table th {
  font-family: var(--font-body);
}

#featured_pages p, p, td, a, li {
    font-size: 1.1rem;
}
.widget-title {
    font-size: 1.4rem;
}

/* ============================
   Parallax deaktivieren
   ============================ */
#parallax-bg,
#parallax-bg[style] {
  background: none !important;
  background-image: none !important;
  background-attachment: scroll !important;
  transform: none !important;
}

.menu-primary-container a {
font-size: 18px;	
}

.header-search-icon:before {
  font-size: 22px;
    margin-right: 30px;
}



/* Share-Links */
.sd-title{ margin:0 0 .5rem; font-size:.95rem; font-weight:600; }
.sd-links{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
.sd-links .sd-button{ display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .6rem; border:1px solid #ddd; border-radius:6px; text-decoration:none; }
.sd-links .sd-button:hover{ border-color:#ccc; text-decoration:none; }

/* Like vor Opt-in */
.sd-like .sd-consent-button{ appearance:none; background:#f6f7f9; border:1px solid #ddd;
  padding:.4rem .6rem; border-radius:6px; cursor:pointer; font:inherit; }
.sd-like .sd-consent-button:hover{ background:#eef0f3; }
.sd-like .sd-consent-hint{ margin-left:.5rem; font-size:.9em; color:#666; }
.sd-like--active .sd-consent-button, .sd-like--active .sd-consent-hint{ display:none; }


.site-description {
 /* margin-top: 20px;*/
 /* line-height: 1.3;*/
 /* font-size: 0.95em;*/
}

/* Titel–Subtitel Abstand präzise steuern */
:root{
  --title-subtitle-gap: .1rem; /* hier feintunen */
}

/* Stack & Reset */
.site-branding,
#header-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0; /* falls irgendwo global ein gap gesetzt wurde */
  margin: 0;
  padding: 0;
}

/* Überschriften-/Paragraph-Margins neutralisieren */
.site-branding h1.site-title,
.site-branding h2.site-title,
.site-branding h3.site-title {
  margin: 0 !important;        /* überschreibt Theme-Defaults */
  line-height: 1.15;
  display: block;
}

.site-branding p.site-description {
  margin: var(--title-subtitle-gap) 0 0 !important; /* nur der gewünschte Abstand */
  line-height: 1.4;
}

/* Sicherstellen, dass kein zusätzlicher Abstand von Anker/Block kommt */
.site-branding .site-title a {
  display: inline-block;
  margin: 0;
  line-height: inherit;
  font-size: 36px !important;
}

/* Optional: auf kleinen Screens noch kompakter */
@media (max-width: 782px){
  :root{ --title-subtitle-gap: .15rem; }
}


/* === Header-Layout fixen: Title & Search vertikal zentrieren, Nav darunter === */
.inner-wrap {
  /*display: grid;
  grid-template-columns: 1fr auto;  
  align-items: center;               
  gap: 16px;   */                      
}

/* Spaltenzuordnung */
.site-branding { grid-column: 1; }
.header-search-icon,
.search-form   { grid-column: 2; }
#site-navigation { grid-column: 1 / -1; } /* Nav nimmt ganze Breite in der nächsten Zeile */

/* Typo-/Spacing-Feinschliff für saubere Ausrichtung */
.site-branding .site-title {
  margin: 0;                /* kein zusätzlicher Versatz */
  line-height: 1.2;         /* kompakter */
}
/*.site-branding .site-description {
  margin: .25rem 0 0;
}*/

/* Icon/Form sicher mittig ausrichten */
.header-search-icon,
.search-form {
  display: flex;
  align-items: center;       /* vertikal mittig innerhalb ihrer Zelle */
}

/* Falls das Icon ein SVG/Genericon ist: Block-Level verhindert „Hochspringen“ */
.header-search-icon svg,
.header-search-icon .genericon {
  display: block;
}

/* Titel oben, Subtitel darunter (stacken) */
/*.site-branding,*/
#header-text{
  display: flex;
  flex-direction: column;   /* übereinander statt nebeneinander */
  align-items: flex-start;
}

/* Sicherheit: beide Elemente block-level & sauberer Abstand */
.site-branding .site-title,
.site-branding .site-description{
  display: block;
  margin: 0;
}
.site-branding .site-description{
  margin-top: .25rem;       /* kleiner Abstand unter dem Titel */
  line-height: 1.4;
}

/* Falls irgendwo white-space stört */
.site-branding{ min-width: 0; }

.main-navigation a {
    font-family: "Quattrocento Sans", sans-serif	
}
/* Optional: kleine Breiten -> Form verstecken, nur Icon zeigen (falls so gedacht) */
@media (max-width: 782px) {
  .search-form { display: none; }
}

/* ============================
   Menü-Spacing
   ============================ */
.site-header .main-navigation {
  clear: both;
  margin-top: 22px;
}

#primary {
  width: 100% !important;
  float: none !important;
}

#secondary,
.widget-area {
  display: none !important;
}

/* Menü rechts ausrichten (Desktop) */
@media (min-width: 783px){
  #site-navigation{
    display: flex;              /* Nav wird Flex-Container */
    justify-content: flex-end;  /* Inhalt (ul) nach rechts */
  }
  #site-navigation .menu-primary-container{
    margin-left: auto;          /* schiebt den Container ganz rechts */
  }
}

@media (max-width: 782px) {
  .site-header .main-navigation { margin-top: 14px; }
}

/* ============================
   Header fixieren
   ============================ */
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;          /* Hintergrund, damit nichts durchscheint */
  margin-bottom: 0 !important;
}

/* Admin-Bar berücksichtigen */
body.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar #masthead { top: 46px; }
}

/* ============================
   Hero-Bild
   ============================ */
#child-hero {
  display: block;
  margin-top: 158px !important;  /* Höhe des Headers, anpassen (z. B. 120px) */
  position: relative;
  z-index: 1;
}

/* Header-Bild auf Content-Breite begrenzen (zentriert) */
#child-hero { margin: 0; }
#child-hero .header-image-container {
/*  max-width: 1218px;   */   /* deine Content-Breite */
 /* width: 100%;*/
  margin: 0 auto;         /* zentrieren */
  padding-left: 20px;     /* gleichen Innenabstand wie Content */
  padding-right: 20px;
}
#child-hero .header-image-container img {
  display: block;
  width: auto !important;     /* NICHT auf volle Viewport-Breite ziehen */
 /* max-width: 100% !important;*/ /* höchstens Containerbreite */
  height: auto;
  margin: 0 auto;
}

/* Content „boxed“ lassen */
#content .inner-wrap,
.site-content .inner-wrap,
.entry-content {
  max-width: 1218px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Footer weiter volle Breite */
#colophon,
#colophon .inner-wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* === Nav: kein zusätzlicher Top-Abstand === */
#site-navigation{
  margin-top: 20 !important;
}

/* Falls der Abstand durch den Grid-Raster kommen soll: */
.inner-wrap{
  row-gap: 12px; /* oder 0–16px nach Geschmack; steuert Abstand zwischen Header-Zeile und Nav */
}

/* Der leere <p class="menu-toggle"> kann ebenfalls vertikalen Platz verursachen */
#site-navigation .menu-toggle{
  margin: 0;
  line-height: 0;
}
@media (min-width: 783px){
  #site-navigation .menu-toggle{ display: none; } /* Desktop: Toggle ausblenden */
}

/* ============================
   Inhalt direkt darunter
   ============================ */
.site-content {
  margin-top: 0 !important;
}

/* ---------------------------
   Footer volle Breite
---------------------------- */
#colophon,
#colophon .inner-wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------
   Content auf 1218px beschränken
---------------------------- */
.site-content .inner-wrap,
#content .inner-wrap,
.entry-content {
  max-width: 1218px;
  margin: 0 auto;      /* zentrieren */
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------------------------
   Sidebar global ausblenden
---------------------------- */
#secondary,
.widget-area {
  display: none !important;
}

/* ---------------------------
   Header-Bild (Hero) bleibt wie bisher,
   volle Breite oder eigene Höhe separat regeln
---------------------------- */
.header-image-container,
.header-image-container img {
  width: 100% !important;
  height: auto;
  display: block;
}

/* Footer-Hintergrund über volle Breite */
.site-footer {
    width: 100%;
    background: #222;   /* Beispiel-Hintergrund */
    color: #fff;
    clear: both;
}

/* Footer-Inhalt zentrieren und auf max. Breite beschränken */
.site-footer .footer-widgets-wrapper,
.site-footer .site-info {
    max-width: 1218px;
    margin: 0 auto;
    padding: 20px;
}

#scroll-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: none; /* Standard: unsichtbar */
  z-index: 999;
  background: transparent;
  border: none;
  cursor: pointer;
}
#scroll-to-top img {
  width: 40px;   /* Größe anpassen */
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
#scroll-to-top:hover img {
  opacity: 1;
}

#scroll-to-top{
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: none;           /* per JS sichtbar ab Scroll */
  z-index: 9999;
  color: #79aebe;          /* Iconfarbe (wie dein Screenshot) */
  background: transparent;
  line-height: 0;
  text-decoration: none;
}
#scroll-to-top svg{
  display: block;
  opacity: .8;
  transition: opacity .2s ease, transform .2s ease;
}
#scroll-to-top:hover svg{
  opacity: 1;
  transform: translateY(-2px);
}

/* optional: runde Fläche dahinter */
#scroll-to-top::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  opacity: 0;
  transition: opacity .2s;
}
#scroll-to-top:hover::after{ opacity: 1; }

/* Smooth scroll, respektiert Reduced Motion */
html:where(:not(.reduce-motion)) { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .reduce-motion { scroll-behavior:auto; }
}



/* ============================
   Mobile Optimierungen
   ============================ */
@media (max-width: 600px) {
  .child-hero__bg {
    height: calc(var(--hero-h, 420px) * .75);
  }
}

/* ============================
   HEADER TYPO (bereinigt)
   – sehr enger Abstand Titel/Subtitel
   ============================ */

/* Feintuning-Wert: ggf. z.B. auf 0.06rem reduzieren/erhöhen */
:root { --title-subtitle-gap: 0.08rem; }

/* Branding stapeln und Resets */
.site-branding,
#header-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;                 /* garantiert kein ungewolltes gap */
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Titel: Margins neutralisieren + kompakte Zeilenhöhe */
.site-branding h1.site-title,
.site-branding h2.site-title,
.site-branding h3.site-title{
  margin: 0 !important;  /* überschreibt Theme- und Global-Heading-Margins */
  line-height: 1.10;     /* kompakt für geringere optische Lücke */
  display: block;
}

/* Link im Titel soll nichts am Abstand ändern */
.site-branding .site-title a {
  display: inline-block;
  margin: 0;
  line-height: inherit;
  text-decoration: none;
}

/* Subtitel: exakter Abstand nur nach oben, sonst 0 */
.site-branding p.site-description{
  margin: var(--title-subtitle-gap) 0 0 !important;
  line-height: 1.25;      /* ebenfalls kompakt */
  font-size: 14px; /*0.65em;*/
}

/* ===== Titel ↔ Subtitel: maximal enger Abstand (hard override) ===== */
#masthead #header-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#masthead #header-text .site-title{
  /* alle möglichen Heading-Margins neutralisieren */
  margin: 0 !important;
  margin-block: 0 !important;
  line-height: 1.05 !important;   /* sehr kompakt */
  display: block;
  padding: 0 !important;
}

#masthead #header-text .site-description{
  /* nur ein minimaler positiver Abstand – bei Bedarf weiter runter */
  margin: 0 0 0 !important;  /* ← zum Feintunen: 0.02rem / 0 */
  margin-block: 0 !important;
  line-height: 0.5 !important;    /* kompakter Fließtext */
  padding: 0 !important;
}

/* Fallback, falls ein globaler Heading-Block dazwischenfunkt */
#masthead .site-branding h1.site-title,
#masthead .site-branding h2.site-title,
#masthead .site-branding h3.site-title{ margin:0 !important; }

/* Letzter Ausweg: wenn’s optisch immer noch zu weit wirkt, 1–2px "ziehen" */
#masthead #header-text .site-description.tighten-1px{ margin-top: -1px !important; }
#masthead #header-text .site-description.tighten-2px{ margin-top: -2px !important; }

/* === Row-Gap behalten, aber oben keinen Abstand === */
.site-header .inner-wrap{
  /* falls früher irgendwo 'gap: 16px;' gesetzt wurde, explizit trennen: */
  column-gap: 16px;
  row-gap: 12px;
  padding-top: 0 !important;   /* kein Innenabstand oben */
/*  margin-top: -5px;*/
}

/* erste Zeile im Grid: keinerlei Top-Margins zulassen */
.site-header .inner-wrap > *:first-child { margin-top: 2px !important; }
.site-header .site-branding { margin-top: 0 !important; }
.site-header .site-title   { margin-top: 0 !important; }

#masthead { padding-top: 0 !important; }
.site-description {margin-top: -5px; font-family: "Quattrocento Sans", sans-serif; font-weight: 300 !important;line-height: 14px !important; color: #444 !important;);
}

/* Menü-Linie/Separator entfernen (alle Quellen) */
.site-header .main-navigation,
#site-navigation{
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* UL / LI / Links: keine Ränder */
#site-navigation .menu-primary-container,
#menu-primary,
#menu-primary > li,
#menu-primary a{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Submenüs ebenfalls */
#menu-primary .sub-menu,
#menu-primary .sub-menu li,
#menu-primary .sub-menu a{
  border: 0 !important;
  box-shadow: none !important;
}

/* Separatoren via Pseudo-Elemente abstellen */
#site-navigation::before,
#site-navigation::after,
#menu-primary > li::before,
#menu-primary > li::after,
#menu-primary a::before,
#menu-primary a::after{
  content: none !important;
}

.header-wrap {
   border-bottom: none;
}

.header-search-icon {
    border-left: none !important; /*1px solid #E1E4E6; */
}

.wp-block-file *+.wp-block-file__button {
    padding: 5px 10px;
}

.site-content .inner-wrap, #content .inner-wrap, .entry-content {
    padding-left: 0;
    padding-right: 0;
}

#menu-primary .sub-menu, #menu-primary .sub-menu li, #menu-primary .sub-menu a {
    font-size: 14px;
}

@media screen and (max-width: 768px) {
    .site-branding {
        max-width: 80% !important;
    }
	.header-search-icon:before {
    margin-right: 5px;
    }
	#site-navigation .menu-toggle {
    margin-top: -60px;
    }
	#content {
    padding-top: 0;
    }
	.header-wrap {
    padding-top: 10px;
    }
	.hentry {
    padding: 0 15px;
    }
	#child-hero .header-image-container {
    padding-left: 0;
    padding-right: 0;
    }
	#child-hero {
    margin-top: 80px !important;
    }
	#masthead #header-text .site-description {
    line-height: 1.2 !important;
    }
	.header-search-icon {
    padding: 24px 10px 10px 10px;
    }
	.entry-title {
     line-height: 1.5;
     margin-top: 0px;
     padding-top: 30px;
     font-size: 30px;
    }
}

/* Share-Pills */
#jp-post-flair .sd-title{ margin:0 0 .5rem; font-size:.95rem; font-weight:600; color:#444; }
#jp-post-flair .sd-links{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
#jp-post-flair .sd-links .sd-button{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .62rem; border:1px solid #d0d7de; border-radius:8px;
  background:#f7f8fa; color:#111; text-decoration:none; font-weight:600; line-height:1;
}
#jp-post-flair .sd-links .sd-button:hover{ border-color:#c3c9d1; background:#f2f4f7; }

/* Like-Opt-in-Link wie Button */
.sd-consent-button{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .62rem; border:1px solid #d0d7de; border-radius:8px;
  background:#f7f8fa; color:#111; text-decoration:none; font-weight:600;
}
.sd-consent-button::before{ content:"☆"; }
.sd-consent-hint{ color:#666; font-size:.95em; }

/* Falls das Jetpack-iFrame transparent ist: sichtbar rahmen */
/*iframe.jetpack-likes-widget{
  display:inline-block !important;
  height:55px !important; width:auto !important; max-width:320px;
  border:1px solid #d0d7de !important; border-radius:8px !important; background:#f7f8fa !important;
}*/

/* Jetpack Like: Überschrift "Like this:" ausblenden */
#jp-post-flair .sd-like .sd-title {
  display: none !important;
}

/* Feine Trennlinie am Like-Block entfernen */
#jp-post-flair .sd-like.sd-block {
  border: 0 !important;
  padding-top: 0 !important;
  margin-top: .5rem; /* optionaler Abstand */
}

/* (Optional) doppeltes "X" bei den Share-Buttons verhindern,
   falls Jetpack ein Icon via :before einspritzt */
#jp-post-flair .sd-links .share-icon::before {
  content: none !important;
}

/* Jetpack-Likes: "Like this:" überall ausblenden */
.sd-like > .sd-title,
.sd-block.sd-like > .sd-title,
.sharedaddy.sd-like > .sd-title {
  display: none !important;
}

/* Die feine Trennlinie am Like-Block entfernen */
.sd-block.sd-like,
.sharedaddy.sd-like {
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: .5rem !important; /* optionaler Abstand */
}

/* Falls Jetpack per Pseudo-Element eine Linie setzt */
.sd-block.sd-like::before,
.sd-block.sd-like::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  height: 0 !important;
}

/* Rahmen/Background an der Hülle, nicht am iFrame */
.ck-like-shell{
  display: inline-flex;
  align-items: center;           /* zentriert den iFrame vertikal */
  padding: 6px 10px 4px;         /* top > bottom -> Inhalt wirkt höher */
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f7f8fa;
  line-height: 0;
}
.ck-like-shell iframe.jetpack-likes-widget{
  height: 24px !important;       /* kompakte Höhe im Shell-Rahmen */
  width: auto !important;
  border: 0 !important;
  background: transparent !important;
}

/* "Like this:" & Linie weg (falls Jetpack sie einschiebt) */
.sd-block.sd-like > .sd-title,
.sharedaddy.sd-like > .sd-title { display: none !important; }
.sd-block.sd-like, .sharedaddy.sd-like { border: 0 !important; box-shadow: none !important; padding-top: 0 !important; }

/* Nur das iFrame im Like-Bereich zeigen */
/*#jp-post-flair .sd-like > *:not(.ck-like-shell) { display: none !important; }
#jp-post-flair .sd-like .ck-like-shell > *:not(iframe) { display: none !important; }

 Falls Jetpack/irgendein Plugin dort Links als "Like" einfügt 
#jp-post-flair .sd-like .sd-button,
#jp-post-flair .sd-like a,
#jp-post-flair .sd-like button { display: none !important; } */

/* iFrame hübsch in der Shell (falls gewünscht) */
.ck-like-shell{
  display:inline-flex; align-items:center; padding:6px 10px 4px;
  border:1px solid #d0d7de; border-radius:8px; background:#f7f8fa; line-height:0;
}
.ck-like-shell iframe.jetpack-likes-widget{
  height:24px !important; width:auto !important; border:0 !important; background:transparent !important;
}

#jp-post-flair .sd-like.sd-block {
    display: none;
}

/* Share-Pills */
#jp-post-flair .sd-title{ margin:0 0 .5rem; font-size:.95rem; font-weight:600; color:#444; }
#jp-post-flair .sd-links{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; }
#jp-post-flair .sd-links .sd-button{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .62rem; border:1px solid #d0d7de; border-radius:8px;
  background:#f7f8fa; color:#111; text-decoration:none; font-weight:600; line-height:1;
}
#jp-post-flair .sd-links .sd-button:hover{ border-color:#c3c9d1; background:#f2f4f7; }

/* Like-Placeholder (Opt-in) */
.ck-like-placeholder{ display:flex; align-items:center; gap:.6rem; }
.sd-consent-button{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .62rem; border:1px solid #d0d7de; border-radius:8px;
  background:#f7f8fa; color:#111; font-weight:600; text-decoration:none;
}
.sd-consent-button::before{ content:"☆"; }
.sd-consent-hint{ color:#666; font-size:.95em; }

/* iFrame hübsch & korrekt ausgerichtet */
.ck-like-shell{
  display:inline-flex; align-items:center; padding:6px 10px 4px;
  border:1px solid #d0d7de; border-radius:8px; background:#f7f8fa; line-height:0;
}
.ck-like-shell iframe.jetpack-likes-widget{
  height:24px !important; width:auto !important; border:0 !important; background:transparent !important;
}

/* "Like this:" & Linien von Jetpack entfernen */
.sd-block.sd-like > .sd-title { display:none !important; }
.sd-block.sd-like { border:0 !important; box-shadow:none !important; padding-top:0 !important; }
.sd-block.sd-like::before, .sd-block.sd-like::after { content:none !important; display:none !important; }