/*
Theme Name: SW Core Child
Theme URI: https://seowunderland.de
Description: GeneratePress Child Theme für Multisite Core Design System
Author: René Nebeling
Version: 1.0.0
Template: generatepress
Text Domain: sw-core-child
*/


/* verhindert den typischen alignfull overflow */
/* 1) Mini-Overflow killen (ok so) */
html, body { overflow-x: clip; }

/* 2) GeneratePress alignfull sauber ohne Rundungs-Scroll */
body.no-sidebar .entry-content .alignfull,
body.no-sidebar .entry-content .alignwide {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: auto !important;
  max-width: none !important;
}

/* 3) Falls du vorher die Transform-Methode gesetzt hast: neutralisieren */
.entry-content .alignfull {
  transform: none !important;
}

.generate-back-to-top {
  display: none!important;
}



/* =========================================================
   Page Title Bar (Full-Width) + Pill (schwarz) + keine Lücke
   Gilt überall außer Single Post
   ========================================================= */
.inside-article, .separate-containers {
  padding-top: 0px!important;
}

/* 3) Die Pill: ebenfalls schwarz (aber sichtbar durch Border/Glow) */
body:not(.single) h1.entry-title,
body:not(.single) h1.page-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;

  background: #000;
  color: rgba(255,255,255,.92);
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding: 10px 20px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 4px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);

  position: relative;
  z-index: 10;
}
.entry-title a,
.entry-title a:visited {
  color: var(--color-text);
}
.entry-title a:hover {
  color: var(--color-primary);
}

/* Mobile: Pill unter Hero-Overlay */
@media (max-width: 768px){
  body.home:not(.single) h1.entry-title,
  body.home:not(.single) h1.page-title{
    z-index: 0;
  }
}



/* 4) Orange Marker links */
body:not(.single) h1.entry-title::before,
body:not(.single) h1.page-title::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50px;
  background:var(--c-orange);
  flex:0 0 auto;

  box-shadow:0 0 0 2px rgba(255,165,0,.22);
  animation: sw-marker-breathe 2.4s ease-in-out infinite;
}

/* stärkere Aura */
@keyframes sw-marker-breathe{
  0%{
    box-shadow:0 0 0 2px rgba(255,165,0,.22);
  }

  50%{
    box-shadow:0 0 0 8px rgba(255,165,0,.10);
  }

  100%{
    box-shadow:0 0 0 2px rgba(255,165,0,.22);
  }
}


/* 6) Mobile Feinschliff */
@media (max-width: 768px){
  body:not(.single) .inside-article > header.entry-header{
    padding: 14px 0 0 !important;
  }
  body:not(.single) h1.entry-title,
  body:not(.single) h1.page-title{
    font-size: 0.6rem;
    letter-spacing: 0.07em;
    padding: 10px 14px;
  }
  .separate-containers .inside-article {
    padding-top: 0!important;
  }
  .separate-containers .site-main {
    margin: 0px!important;
  }
}



/* =========================================================
   Hero Logik Startseite
   Zielstruktur: .sw-hero > .sw-hero__video + .sw-hero__panel
   STABIL-FASSUNG: Layout und Sichtbarkeit ohne Animationskopplung
   ========================================================= */

/*
 * Zentrale Stellschrauben Desktop:
 * left   = Abstand links
 * right  = Sicherheitsabstand rechts
 * top    = Abstand vom Hero-Start bis zum Panel
 * bottom = Abstand vom Panel bis zum Hero-Ende
 * width  = maximale Panelbreite
 */
body.page:not(.blog) .entry-content > .sw-hero{
  --sw-hero-panel-left: clamp(64px, 12vw, 220px);
  --sw-hero-panel-right: clamp(32px, 6vw, 110px);
  --sw-hero-panel-top: clamp(150px, 20vh, 225px);
  --sw-hero-panel-bottom: clamp(50px, 7vh, 88px);
  --sw-hero-panel-width: 760px;

  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;

  min-height: clamp(650px, 78vh, 920px);
  padding:
    var(--sw-hero-panel-top)
    var(--sw-hero-panel-right)
    var(--sw-hero-panel-bottom)
    var(--sw-hero-panel-left);

  box-sizing: border-box;
  overflow: hidden;
}

@supports (height: 1svh){
  body.page:not(.blog) .entry-content > .sw-hero{
    --sw-hero-panel-top: clamp(150px, 20svh, 225px);
    --sw-hero-panel-bottom: clamp(50px, 7svh, 88px);
    min-height: clamp(650px, 78svh, 920px);
  }
}

/* =========================================
   Alle statischen Seiten:
   H1-Pill in den Hero ziehen
========================================= */
body.page:not(.blog) .inside-article > .entry-header,
body.page:not(.blog) .inside-article > header.entry-header{
  position: relative;
  z-index: 20;
  margin-bottom: -55px !important;
  padding-bottom: 0 !important;
}

body.page:not(.blog) .entry-title,
body.page:not(.blog) .page-title{
  margin-bottom: 0 !important;
}

body.page:not(.blog) .entry-header{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page:not(.blog) .entry-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.page:not(.blog) .sw-hero{
  margin-top: 0 !important;
}

/* Video als echter Hintergrund */
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__video{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__video video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
}

/* Lesbarkeitsverlauf */
body.page:not(.blog) .entry-content > .sw-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.10) 70%,
    rgba(0,0,0,0) 100%
  );
}

/* Panel liegt im normalen Hero-Layout und bestimmt dessen notwendige Höhe mit. */
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel{
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  align-self: start;
  justify-self: start;

  width: min(var(--sw-hero-panel-width), 100%) !important;
  max-width: 100% !important;
  min-width: 0;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: clamp(18px, 2.2vw, 26px) !important;
  box-sizing: border-box;
  overflow: hidden;

  color: rgba(255,255,255,.94) !important;
  background: rgba(0,0,0,.64) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 0 14px 14px 0;
  text-align: left;

  /* Alte Masken-/Intro-Regeln dürfen das Layout nicht mehr beeinflussen. */
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* Orange Linie + Glow */
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel::before,
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel::before{
  z-index: 4;
  width: 3px;
  background: rgba(255,175,0,.92);
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel::after{
  z-index: 3;
  width: 10px;
  background: rgba(255,165,0,.18);
  filter: blur(3px);
}

/* Hero-Inhalte bleiben sichtbar, auch wenn Reveal- oder Intro-Skripte Klassen setzen. */
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel > *,
html.sw-reveal-on body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .sw-auto-reveal,
html.sw-reveal-on body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .sw-auto-reveal.is-visible{
  position: relative;
  z-index: 5;
  max-width: 100%;
  box-sizing: border-box;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel > :first-child{
  margin-top: 0 !important;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel > .wp-block-spacer:last-child{
  display: none !important;
}

/* Typografie nur innerhalb des Panels */
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel h2{
  margin: 0 0 .72em !important;
  color: var(--color-primary, #ffac0b) !important;
  font-size: clamp(1.45rem, 1.15rem + .75vw, 2rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel p,
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel li{
  color: rgba(255,255,255,.94) !important;
  font-size: clamp(.98rem, .91rem + .22vw, 1.1rem) !important;
  line-height: 1.48 !important;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel p{
  margin: 0 0 .9em !important;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel ul,
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel ol{
  margin: .7em 0 1.15em !important;
  padding-left: 1.45em !important;
  text-align: left;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel li + li{
  margin-top: .22em;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel > div:not(.wp-block-spacer){
  width: 100%;
}

body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .swbt-cat-btn,
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .button,
body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .gb-button{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(300px, 100%) !important;
  min-height: 46px;
  margin: 0 auto !important;
  padding: .72em 1.15em !important;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(.96rem, .9rem + .2vw, 1.05rem) !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1199px){
  body.page:not(.blog) .entry-content > .sw-hero{
    --sw-hero-panel-left: clamp(28px, 6vw, 72px);
    --sw-hero-panel-right: clamp(28px, 5vw, 64px);
    --sw-hero-panel-top: clamp(110px, 16vh, 165px);
    --sw-hero-panel-bottom: clamp(36px, 5vh, 60px);
    --sw-hero-panel-width: 700px;
    min-height: clamp(620px, 78vh, 850px);
  }

  @supports (height: 1svh){
    body.page:not(.blog) .entry-content > .sw-hero{
      --sw-hero-panel-top: clamp(110px, 16svh, 165px);
      --sw-hero-panel-bottom: clamp(36px, 5svh, 60px);
      min-height: clamp(620px, 78svh, 850px);
    }
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__video video{
    object-position: 75% center;
  }
}

/* Smartphone Hochformat und kleine Tablets */
@media (max-width: 768px){
  body.page:not(.blog) .entry-content > .sw-hero{
    --sw-hero-panel-left: 0px;
    --sw-hero-panel-right: 0px;
    --sw-hero-panel-top: 65px;
    --sw-hero-panel-bottom: max(10px, env(safe-area-inset-bottom));
    --sw-hero-panel-width: 100%;
    min-height: 0;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__video video{
    object-position: 75% center;
  }

  body.page:not(.blog) .entry-content > .sw-hero::before{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.28) 58%,
      rgba(0,0,0,0) 100%
    );
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel{
    width: calc(100% - 28px) !important;
  max-width: calc(100% - 28px) !important;
  margin-left: 14px !important;
  margin-right: 14px !important;
  padding: clamp(18px, 5vw, 24px) !important;
}

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel h2{
    font-size: clamp(1.35rem, 6vw, 1.78rem) !important;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel p,
  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel li{
    font-size: clamp(.96rem, 4vw, 1.05rem) !important;
    line-height: 1.45 !important;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .swbt-cat-btn,
  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .button,
  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel .gb-button{
    width: 100% !important;
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
  }
}

/* Sehr kleine Smartphones */
@media (max-width: 380px){
  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel{
    padding: 17px 15px 18px 19px !important;
  }
}

/* Smartphone Querformat */
@media (max-width: 980px) and (max-height: 600px) and (orientation: landscape){
  body.page:not(.blog) .entry-content > .sw-hero{
    --sw-hero-panel-left: 12px;
    --sw-hero-panel-right: 12px;
    --sw-hero-panel-top: 65px;
    --sw-hero-panel-bottom: max(12px, env(safe-area-inset-bottom));
    --sw-hero-panel-width: 720px;
    min-height: 0;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel{
    width: min(720px, 100%) !important;
    padding: 17px 21px !important;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel h2{
    font-size: clamp(1.22rem, 3vw, 1.55rem) !important;
  }

  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel p,
  body.page:not(.blog) .entry-content > .sw-hero > .sw-hero__panel li{
    font-size: clamp(.9rem, 1.8vw, 1rem) !important;
    line-height: 1.4 !important;
  }
}

/* Intentfunnel Abstände */
.intentfunnel-trigger-button {
bottom: 84px!important;
right: 14px !important;
}
.intentfunnel-trigger-circle{
bottom: 90px !important;
right: 14px !important;
}

.generate-back-to-top {
    bottom: 28px !important;
    right: 19px !important;

}


/* Mobile Spalten: 4 Spalten -> 2 Spalten */

@media (max-width: 768px){

.sw-4to2{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.sw-4to2 > .wp-block-column{
flex:0 0 calc(50% - 10px);
max-width:calc(50% - 10px);
}

}


/* =========================================
   FAQ Feinschliff
   nur Farben, Abstände, Pfeil
   keine Layout-/Grid-Eingriffe
========================================= */

.sw-faq-block__item {
	padding: 0;
	border-bottom: 1px solid var(--color-border);
}

.sw-faq-block__item summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
	font-family: var(--font-body);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-heading);
	font-weight: var(--fw-medium);
	color: var(--color-heading);
	transition: color 160ms ease;
}

.sw-faq-block__item summary::-webkit-details-marker {
	display: none;
}

.sw-faq-block__item summary::marker {
	content: "";
}

.sw-faq-block__item summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--sp-2);
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--color-muted);
	border-bottom: 2px solid var(--color-muted);
	transform: translateY(-65%) rotate(45deg);
	transform-origin: center;
	transition: transform 160ms ease, border-color 160ms ease;
}

.sw-faq-block__item[open] summary::after {
	transform: translateY(-40%) rotate(225deg);
	border-color: var(--color-primary);
}

.sw-faq-block__item summary:hover,
.sw-faq-block__item summary:focus-visible {
	color: var(--color-text);
}

.sw-faq-block__item summary:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-1);
}

.sw-faq-block__answer {
	padding: 0 0 var(--sp-4) 0;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.sw-faq-block__answer > *:first-child {
	margin-top: 0;
}

.sw-faq-block__answer > *:last-child {
	margin-bottom: 0;
}

.sw-faq-block__answer p {
	margin: 0 0 var(--sp-4);
}

.sw-faq-block__answer p:empty {
	display: none;
}

/* =========================================
   Kategorien und Suche Anpassungen
========================================= */
.swbt-cats-select-wrap {
  margin: 1rem auto!important;
  width: calc(100% - 10px);
  max-width: 900px; /* optional */
}
.swbt-cats-select {
  background: transparent!important;
  border: 1px solid var(--color-border)!important;
  border-radius: var(--radius-2)!important;
}

.swbt-cats-buttons {
max-width: 1260px !important;

}

.swbt-search{
  margin: 1rem auto !important;
  width: calc(100% - 20px);
  max-width: 900px; /* optional */
}

/* Mehr laden Button */
.masonry-load-more .button {
    margin: auto !important;
    display: block;
    max-width: 300px;
    text-align: center;
}

.taxonomy-description p:last-child {
margin-left: 10px;
color: var(--color-muted);
}

/* =========================================
   TOC Anpassungen
========================================= */
/* TOC Desktop */
#swbt-toc-desktop {
background: transparent;
border: 0;
border-bottom: 6px solid var(--color-primary);
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
border-radius: 0!important;
}

/* TOC Mobil */
@media (max-width: 1060px) {
#swbt-toc-bubble{

    position: fixed !important;
    bottom: 88px !important;
    left: 24px !important;
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,172,11,0.55)!important;
    border: none !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-align: center !important;
    z-index: 10001 !important;
    box-shadow: 0 4px 16px rgba(255,172,11,0.35) !important;
    cursor: pointer !important;
    user-select: none !important;
    overflow: visible !important;
    aspect-ratio: 1 / 1 !important;
    transition: background .18s ease, transform .18s ease !important;
}

#swbt-toc-bubble:hover{
    transform: scale(1.08) !important;
    background: rgba(255,172,11,0.65)!important;
}

#swbt-toc-bubble::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: rgba(255,172,11,0.35) !important;
    animation: swbt-toc-pulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

@keyframes swbt-toc-pulse{
    0%   { transform: scale(1); opacity: .7; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}}

@media (max-width: 480px){
    #swbt-toc-bubble{
        bottom: 88px !important;
        left: 16px !important;
    }
}

#swbt-toc-canvas {
width: 100vw!important;
max-width: 100vw!important;
}

/* ==========================================
   Single Post Hero
   Bild + Header überlagern
   Desktop und Mobil konsistent
   ========================================== */

.single-post .inside-article {
	--hero-gap-x: 24px;
	--hero-gap-y: 50px;
	--hero-overlay-max: 760px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"hero"
		"toc"
		"content"
		"footer";
	grid-auto-flow: row;
	overflow-x: clip;
}

/* Wichtig: direkte Grid-Items dürfen nicht rechts ausbrechen */
.single-post .inside-article > * {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Bild + Header teilen sich dieselbe Hero-Fläche */
.single-post .inside-article > .entry-header,
.single-post .inside-article > .featured-image {
	grid-area: hero;
}

/* Bild */
.single-post .inside-article > .featured-image {
	position: relative;
	z-index: 1;
	margin: 0 !important;
	width: 100%;
	max-width: 100%;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.single-post .inside-article > .featured-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 12px 12px 0 0;
}

/* Overlay unten links im Bildbereich */
.single-post .inside-article > .entry-header {
	position: relative;
	z-index: 3;
	align-self: end;
	justify-self: start;

	width: min(
		var(--hero-overlay-max),
		calc(100% - var(--hero-gap-x))
	);
	max-width: calc(100% - var(--hero-gap-x));
	margin: 0 0 var(--hero-gap-y) 0;
	padding: 14px 18px 12px;

	background: rgba(255, 255, 255, 0.65);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border-radius: 0 12px 12px 0;
	overflow: hidden;
}

/* Titel */
.single-post .entry-title {
	margin: 0 0 8px 0;
	padding: 0;
	display: block;
	background: transparent;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Meta */
.single-post .entry-meta {
	margin: 0;
	padding: 0;
	background: transparent;
	overflow-wrap: anywhere;
}

.single-post .entry-meta,
.single-post .entry-meta a {
	color: #2f2f2f;
}

/* TOC Desktop */
.single-post .inside-article > .ez-toc-container,
.single-post .inside-article > .toc_container,
.single-post .inside-article > [id^="ez-toc-container"] {
	grid-area: toc;
	margin-top: 0 !important;
}

/* Content */
.single-post .inside-article > .entry-content {
	grid-area: content;
	margin-top: 0;
	padding-top: 0;
	min-width: 0;
}

.single-post .inside-article > .entry-content > *:first-child {
	margin-top: 20px !important;
}

/* Footer */
.single-post .inside-article > footer,
.single-post .inside-article > .entry-footer,
.single-post .inside-article > .postmeta,
.single-post .inside-article > .post-meta {
	grid-area: footer;
	min-width: 0;
}

/* ==========================================
   Tablet / Mobil
   gleiche Logik, aber kompakter
   ========================================== */
@media (max-width: 768px) {
	.single-post .inside-article {
		--hero-gap-x: 14px;
		--hero-gap-y: 10px;
		--hero-overlay-max: 92%;
		grid-template-areas:
			"hero"
			"content"
			"footer";
	}

	.single-post .inside-article > .entry-header {
		padding: 10px 12px 9px;
	}

	.single-post .entry-title {
		margin: 0 0 4px 0;
		font-size: clamp(17px, 4.8vw, 24px);
		line-height: 1.08;
	}

	.single-post .entry-meta {
		font-size: clamp(11px, 2.6vw, 13px);
		line-height: 1.25;
	}
}

/* Kleine Geräte */
@media (max-width: 480px) {
	.single-post .inside-article {
		--hero-gap-x: 10px;
		--hero-gap-y: 8px;
	}

	.single-post .inside-article > .entry-header {
		padding: 8px 10px 7px;
		border-radius: 0 10px 10px 0;
	}

	.single-post .entry-title {
		font-size: clamp(15px, 5vw, 20px);
		line-height: 1.06;
	}

	.single-post .entry-meta {
		font-size: clamp(10px, 2.8vw, 12px);
		line-height: 1.2;
	}
}

/* =========================================
   Mobile Layer Contract
   Menü immer über TOC + Intentfunnel
========================================= */
@media (max-width: 1179px){
  .swsh__offcanvas,
  .swsh__offcanvas-inner{
    z-index: 110000 !important;
  }

  #swbt-toc-bubble{
    z-index: 10001 !important;
  }

  #swbt-toc-backdrop{
    z-index: 10001 !important;
  }

  #intentfunnel-mount,
  .intentfunnel-trigger-button,
  .intentfunnel-trigger-circle,
  .intentfunnel-widget{
    z-index: 10002 !important;
  }

  #swbt-toc-canvas{
    z-index: 10003 !important;
  }
}

@media (max-width: 980px){
.intentfunnel-widget {
bottom: 50px !important;
}}

/* =========================================
   Header offen: Floating-UI aus dem Weg
========================================= */
@media (max-width: 1179px){
  html.swsh--offcanvas #swbt-toc-bubble,
  html.swsh--offcanvas #swbt-toc-backdrop,
  html.swsh--offcanvas #swbt-toc-canvas,
  html.swsh--offcanvas #intentfunnel-mount,
  html.swsh--offcanvas .intentfunnel-trigger-button,
  html.swsh--offcanvas .intentfunnel-trigger-circle,
  html.swsh--offcanvas .intentfunnel-widget,
  html.swsh--offcanvas .generate-back-to-top{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* =========================================
   Button Styles Global und Kategorien, Kontakt, Popup
========================================= */
.swbt-cat-btn,
.button,
.swc-btn,
.sw-popup-btn {
color: #ffffff !important;
border: 2px #ffffff solid !important;
background: var(--color-primary) !important;
box-shadow: var(--btn-shadow)!important;
}

.swbt-cat-btn:hover,
.button:hover,
.swc-btn:hover,
.sw-popup-btn:hover {
color: var(--color-primary) !important;
border: 2px solid  var(--color-primary) !important;
background: #ffffff !important;
}
/* =========================================
  Kontaktformular Zentrieren
========================================= */
.swc-wrap .swc-card {
  margin:auto;
}


/* =========================================
   Blog / Archive Header
========================================= */

/* Blogtitel aus dem Archiv-Grid rausziehen */
body.blog .sw-blog-page-header,
body.archive .sw-blog-page-header {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 30px !important;
}

body.blog .sw-blog-after-archive-title,
body.archive .sw-blog-after-archive-title {
  width: 90%;
  text-align: center;
  margin: 0px auto 40px auto;
}

body.blog .sw-blog-after-archive-title > *,
body.archive .sw-blog-after-archive-title > * {
  margin-left: auto;
  margin-right: auto;
}

/* Falls Shortcodes Wrapper mit voller Breite ausgeben */
body.blog .sw-blog-after-archive-title .wp-block-shortcode,
body.blog .sw-blog-after-archive-title .shortcode,
body.blog .sw-blog-after-archive-title form,
body.archive .sw-blog-after-archive-title .wp-block-shortcode,
body.archive .sw-blog-after-archive-title .shortcode,
body.archive .sw-blog-after-archive-title form {
  margin-left: auto;
  margin-right: auto;
}

/* Description nur in Archiven */
.taxonomy-description p:last-child {
  margin-top: 15px;
}

/* Seitenleiste Blog */
.widget-area .widget {
padding: 0 40px !important;
margin-top: 20px;
}

.wp-block-latest-posts__post-date {
  margin-bottom: 40px !important;
}

.wp-block-latest-posts__featured-image img {
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 3px solid var(--c-orange)!important;
}
/* =========================================
   Blog / Archive Container Spacing
========================================= */

body.blog.separate-containers .page-header,
body.blog.separate-containers .paging-navigation,
body.archive.separate-containers .page-header,
body.archive.separate-containers .paging-navigation {
  padding: 0 30px !important;
}


/* =========================================
   Blog / Archive Cards
========================================= */

.generate-columns .inside-article,
.single-post .inside-article {
  padding: 30px 40px 20px 40px !important;
  background: var(--color-surface);
  border-bottom: 6px solid var(--color-primary);
  border-radius: 12px 12px 0 0!important;
  box-shadow: var(--shadow-1);
  margin: 0 10px !important;
}

/* Archivkarten ohne Bildpadding */
.no-featured-image-padding .post-image {
  margin-left: -40px !important;
  margin-right: -40px !important;
}

.post-image-above-header .no-featured-image-padding .inside-article .post-image {
  margin-top: -30px !important;
}

/* Bilder in Archiven */
.resize-featured-image .post-image img {
  width: 100% !important;
  border-radius: 12px 12px 0 0 !important;
}

.post-image-above-header .inside-article .featured-image,
.post-image-above-header .inside-article .post-image {
  margin-bottom: 10px !important;
}


/* =========================================
   Sidebar + Pagination
========================================= */

.inside-right-sidebar {
  padding: 20px 0 !important;
  background: var(--color-surface);
  border-bottom: 6px solid var(--color-primary);
  border-radius: 12px 12px 0 0!important;
  box-shadow: var(--shadow-1);
  margin: 0 10px;
}

.separate-containers .paging-navigation {
  padding: 20px !important;
}


/* =========================================
   Single Post Featured Image
========================================= */

.single-post .inside-article > .featured-image {
  padding-top: 20px;
}


/* =========================================
   Tablet / Mobil
========================================= */

@media (max-width: 1060px) {
  .generate-columns .inside-article,
  .single-post .inside-article {
    padding: 20px !important;
    background: var(--color-surface);
    border-bottom: 6px solid var(--color-primary);
    border-radius: var(--radius-4);
    box-shadow: var(--shadow-1);
    margin: 0 20px !important;
  }


  .no-featured-image-padding .post-image {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  /* Single Post mobil:
     Hero-Bild bündig links/rechts/oben,
     Text mit 20px Seitenabstand */
  .single-post .inside-article > .featured-image,
  .single-post .inside-article > .post-image {
    margin-top: -20px !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-top: 0 !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden;
  }

  .single-post .inside-article > .featured-image img,
  .single-post .inside-article > .post-image img {
    display: block;
    width: 100% !important;
    height: auto;
    border-radius: 12px 12px 0 0 !important;
  }

  .single-post .inside-article > .entry-header {
    width: min(95%, calc(100% - 20px)) !important;
    max-width: calc(100% - 20px) !important;
    margin-left: -20px;
    margin-bottom: 20px !important;
  }

  .single-post .inside-article > .entry-content {
    padding-top: 0 !important;
  }

  .single-post .inside-article > .entry-content > *:first-child {
    margin-top: 20px !important;
  }

  .post-image-above-header .no-featured-image-padding .inside-article .post-image {
    margin-top: -20px !important;
  }
}


/* =========================================
   Startseite H3 Überschrift Blog
========================================= */

.gb-looper-cc1fc7be h3 a {
  color: var(--color-text);
}

/* =========================================
   Hero Pull – Header über Hero ziehen
   Aktiv nur wenn Hero diese Klasse hat
========================================= */

.sw-hero--pull{
  margin-top: 0 !important;
}

.sw-hero--pull + .entry-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Header über den Hero ziehen */
.sw-hero--pull{
  position: relative;
}

.sw-hero--pull::before{
  content:"";
  position:absolute;
  top:-55px;
  left:0;
  right:0;
  height:55px;
  pointer-events:none;
}

/* Header hochziehen */
.sw-hero--pull{
  margin-top:-55px;
}


.swsh__nav-list .bi,
.swsh__mega-inner .bi,
.swsh__mobile-acc .bi,
.swsh__mobile-panel .bi {
  color: rgba(52,52,52,0.3) !important;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  filter: blur(4px);
  animation: sw-icon-luxury-in 0.55s cubic-bezier(.22,.61,.36,1) forwards;
  will-change: transform, opacity, filter;
}

.swsh__mega-inner
{
  border-bottom: 6px solid var(--c-orange)!important;
  border-radius: 12px 12px 0 0!important;
}

.swsh__nav-list li:nth-child(1) .bi { animation-delay: 0.15s; }
.swsh__nav-list li:nth-child(2) .bi { animation-delay: 0.20s; }
.swsh__nav-list li:nth-child(3) .bi { animation-delay: 0.25s; }
.swsh__nav-list li:nth-child(4) .bi { animation-delay: 0.30s; }
.swsh__nav-list li:nth-child(5) .bi { animation-delay: 0.35s; }
.swsh__nav-list li:nth-child(6) .bi { animation-delay: 0.40s; }

@keyframes sw-icon-luxury-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* So beauftragst du uns Animation */
.sw-process-steps .sw-process-card {
  transform-origin: center center;
  animation: sw-card-wiggle 4s ease-in-out infinite;
  will-change: transform;
}

.sw-process-steps .sw-process-card:nth-child(1) {
  animation-delay: 0s;
}

.sw-process-steps .sw-process-card:nth-child(2) {
  animation-delay: 0.2s;
}

.sw-process-steps .sw-process-card:nth-child(3) {
  animation-delay: 0.4s;
}

.sw-process-steps .sw-process-card:nth-child(4) {
  animation-delay: 0.6s;
}

.sw-process-steps .sw-process-card:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes sw-card-wiggle {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  10% {
    transform: rotate(-2deg) translateY(-4px);
  }
  20% {
    transform: rotate(2deg) translateY(-4px);
  }
  30% {
    transform: rotate(-1deg) translateY(0);
  }
  40% {
    transform: rotate(1deg) translateY(0);
  }
  50% {
    transform: rotate(0deg) translateY(0);
  }
}


/* =========================================
   Footer komplett orange auf dunkel
========================================= */

.footer-widgets {
  background-color: var(--c-gray) !important;
  border-top: 1px solid var(--color-primary) !important;
  margin-top: 40px;
}

.site-info {
  background-color: var(--c-gray) !important;
  border-top: 1px solid var(--c-orange-50) !important;
}
.footer-widgets,
.footer-widgets .widget,
.footer-widgets p,
.footer-widgets li,
.footer-widgets span,
.footer-widgets .widget-title,
.footer-widgets a,
.footer-widgets a:visited,
.footer-widgets a:hover
{
  color: var(--color-primary) !important;
}
.site-info,
.site-info .inside-site-info,
.site-info .footer-bar,
.site-info .footer-bar .widget,
.site-info .footer-bar .widget_block,
.site-info .footer-bar p,
.site-info .footer-bar li,
.site-info .footer-bar span,
.site-info .footer-bar a,
.site-info .footer-bar a:visited,
.site-info .footer-bar a:hover {
  color: var(--color-primary) !important;
  font-size: 0.7rem;
}


/* Amelia Wrapper von 100px auf 0px */
.amelia-v2-booking #amelia-container.am-fs__wrapper
{
  margin: 0 auto!important;
  }


/* Slider Shadow und Border */
  .sw-reviews-slider .swrs-card {
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1)!important;
  margin: 0px 10px 10px 10px!important;
  border-bottom: 6px solid var(--color-primary)!important;
  }

  .sw-reviews-slider .swrs-card {
  border-radius: 12px 12px 0 0!important;
}