/** =========================================================
 *  components.css
 *  PEP2030 minimal – Komponenten und Layout-Bausteine
 * ========================================================= */


/** ---------------------------------------------------------
 * Kopfbereich / Header
 * --------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--c-header-bg);
  backdrop-filter:blur(4px);
  border-bottom:1px solid var(--c-header-border);
}

.site-header :focus-visible{
  outline-color:var(--c-focus);
}

.header-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--s-3);
  padding-block:var(--s-3);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-ui);
  font-weight:var(--fw-ui);
  color:var(--c-header-link);
  text-decoration:none;
}

.brand .custom-logo-link{
  display:inline-flex;
  align-items:center;
}

.brand img.custom-logo{
  height:42px;
  width:auto;
  display:block;
}


/** ---------------------------------------------------------
 * Social-Media-Icons
 * Hinweis: aktuell im Footer genutzt
 * --------------------------------------------------------- */
.social-menu{
  list-style:none;
  display:flex;
  gap:.25rem;
  margin:0;
  padding:0;
  align-items:center;
}

.social-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  text-decoration:none;
  color:var(--c-header-link);
  border:1px solid rgba(255,255,255,.22);
}

.social-menu a::before{
  content:"";
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask:var(--icon) no-repeat center / contain;
  mask:var(--icon) no-repeat center / contain;
  transition:transform .15s ease;
}

.social-menu a:hover{
  background:var(--c-header-link-hover);
  border-color:rgba(255,255,255,.36);
}

.social-menu a:hover::before{
  transform:scale(1.08);
}

.social-menu a:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}

/* Domainbasierte Icon-Zuordnung */
.social-menu a[href*="linkedin.com"]{
  --icon:url('/wp-content/themes/pep2030-minimal/assets/icons/linkedin_icon_128x128.svg');
}

.social-menu a[href*="instagram.com"]{
  --icon:url('/wp-content/themes/pep2030-minimal/assets/icons/instagram_icon_128x128.svg');
}

.social-menu a[href*="youtube.com"],
.social-menu a[href*="youtu.be"]{
  --icon:url('/wp-content/themes/pep2030-minimal/assets/icons/youtube_icon_128x128.svg');
}


/** ---------------------------------------------------------
 * Hauptnavigation
 * - Desktop: horizontale Navigation
 * - Mobil: Burger-Menü mit aufklappbarer Liste
 * --------------------------------------------------------- */
.nav-toggle{
  position:relative;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0;
  background:transparent;
  color:var(--c-header-link);
  border:1px solid rgba(255,255,255,.35);
  cursor:pointer;
  font-size:0;
  line-height:0;
}

.nav-toggle:hover{
  background:var(--c-header-link-hover);
}

.nav-toggle:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}

/* Hamburger-Linien */
.nav-toggle::before,
.nav-toggle::after{
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  height:2px;
  background:currentColor;
  transition:transform .2s ease, top .2s ease, box-shadow .2s ease;
}

/* obere + mittlere Linie */
.nav-toggle::before{
  top:16px;
  box-shadow:0 7px 0 currentColor;
}

/* untere Linie */
.nav-toggle::after{
  top:30px;
}

/* geöffneter Zustand = X */
.nav-toggle[aria-expanded="true"]::before{
  top:22px;
  box-shadow:none;
  transform:rotate(45deg);
}

.nav-toggle[aria-expanded="true"]::after{
  top:22px;
  transform:rotate(-45deg);
}

.primary-nav[hidden]{
  display:none;
}

.primary-nav{
  padding-bottom:var(--s-3);
  margin-left:auto;
}

.primary-nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.primary-nav a{
  display:block;
  padding:.5rem .75rem;
  text-decoration:none;
  color:var(--c-header-link);
  font-family:var(--font-ui);
  font-weight:var(--nav-font-weight);
}

.primary-nav a:hover{
  background:var(--c-header-link-hover);
}

.primary-nav .current-menu-item > a,
.primary-nav a[aria-current="page"]{
  background:var(--c-header-link-current);
  font-weight:var(--fw-ui);
}

/* Dropdown-Navigation */
.primary-nav li{
  position:relative;
}

.primary-nav li::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:.5rem;
}

.primary-nav .sub-menu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:14rem;
  background:rgba(0,0,0,.96);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);
  padding:.25rem;
  margin-top:.25rem;
  z-index:1000;
}

.primary-nav .sub-menu li{
  width:100%;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu{
  display:block;
}

.primary-nav .sub-menu a{
  padding:.5rem .75rem;
  white-space:nowrap;
}

.primary-nav .sub-menu a:hover{
  background:var(--c-header-link-hover);
}

/* Desktop-Navigation */
@media (min-width:56rem){
  .nav-toggle{
    display:none;
  }

  .primary-nav{
    display:block !important;
    padding-bottom:0;
  }

  .primary-nav[hidden]{
    display:block !important;
  }

  .primary-nav ul{
    flex-direction:row;
    flex-wrap:wrap;
  }
}


/** ---------------------------------------------------------
 * Suche im Header
 * - Lupe als Trigger
 * - kompaktes Suchpanel unterhalb des Headers
 * - Submit-Button im kleinen Berlin-CI-Stil
 * --------------------------------------------------------- */

/* Trigger in der Navigation */
.search-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  margin-left:.35rem;
  padding:0;
  background:transparent;
  border:0;
  color:var(--c-header-link);
  cursor:pointer;
  font-size:0;
  line-height:0;
}

.search-toggle:hover{
  background:var(--c-header-link-hover);
}

.search-toggle:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}

/* Lupe */
.search-toggle::before{
  content:"";
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-radius:50%;
  position:absolute;
  transform:translate(-2px,-2px);
}

.search-toggle::after{
  content:"";
  width:8px;
  height:2px;
  background:currentColor;
  position:absolute;
  transform:translate(7px,7px) rotate(45deg);
  transform-origin:center;
}

/* Aufgeklapptes Suchpanel */
.header-search{
  position:absolute;
  right:0;
  top:100%;
  width:min(22rem, 92vw);
  padding:.65rem;
  background:#111;
  border:1px solid rgba(255,255,255,.15);
  z-index:1001;
}

/* Formularzeile */
.header-search .search-form{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  align-items:stretch;
}

/* Suchfeld */
.header-search input[type="search"],
.header-search .search-field{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  height:2.7rem;
  padding:.08rem .95rem 0 .95rem;
  border:2px solid #d0d0d0;
  background:#fff;
  color:#111;
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1;
}

/* Submit-Button im Header-Suchdialog */
.header-search .search-submit,
.header-search input[type="submit"],
.header-search button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:2.7rem;
  padding:.18rem 1rem 0 1rem;
  border:2px solid var(--c-accent) !important;
  background:#fff;
  color:#111;
  font-family:var(--font-ui);
  font-size:var(--fs-1);
  font-weight:var(--button-font-weight);
  line-height:1;
  text-decoration:none !important;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.header-search .search-submit:hover,
.header-search input[type="submit"]:hover,
.header-search button[type="submit"]:hover,
.header-search .search-submit:active,
.header-search input[type="submit"]:active,
.header-search button[type="submit"]:active{
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent) !important;
}

.header-search .search-submit:focus-visible,
.header-search input[type="submit"]:focus-visible,
.header-search button[type="submit"]:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}


/** ---------------------------------------------------------
 * Breadcrumbs
 * --------------------------------------------------------- */
.breadcrumbs{
  position:absolute;
  top:0;
  left:var(--s-4);
  background:rgba(255,255,255,.96);
  color:#000;
  margin-top:var(--s-3);
  padding:.25rem .6rem;
  border:1px solid var(--c-border);
  font-size:var(--fs-1);
  font-family:var(--font-ui);
  font-weight:var(--fw-ui);
  box-shadow:none;
  z-index:10;
}

.breadcrumbs a,
.breadcrumbs__item a{
  color:inherit;
  text-decoration:none;
  text-decoration-thickness:.12em;
  text-underline-offset:.18em;
}

.breadcrumbs a:hover{
  text-decoration:underline;
  text-decoration-thickness:.16em;
}

.breadcrumbs__list{
  list-style:none;
  padding:5px 5px 0 5px;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.breadcrumbs__item:not(:last-child)::after{
  content:"›";
  margin-left:.35rem;
  opacity:.6;
}

.breadcrumbs--hero{
  color:rgba(255,255,255,.88);
  margin:0 0 var(--s-2);
}

.breadcrumbs--hero a{
  color:#fff;
}


/** ---------------------------------------------------------
 * Buttons
 * - allgemeine CI-Buttons mit Pfeilsegment rechts
 * --------------------------------------------------------- */
.wp-block-button__link,
.button,
.dl-group .dl-button .wp-block-button__link,
.dl-group .dl-button a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:1rem 4.8rem .68rem 1.25rem;
  min-height:3.5rem;
  border:2px solid #1a1a1a;
  background:#fff;
  color:#111;
  text-decoration:none;
  font-family:var(--font-ui);
  font-weight:var(--button-font-weight);
  line-height:1.15;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.wp-element-button,
.wp-block-button__link,
button,
input,
select,
textarea{
  border-radius:var(--radius) !important;
}

.wp-block-button__link::after,
.button::after,
.dl-group .dl-button .wp-block-button__link::after,
.dl-group .dl-button a::after{
  content:"→";
  position:absolute;
  top:-2px;
  right:-2px;
  bottom:-2px;
  width:3.5rem;
  padding-top:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-accent);
  color:#fff;
  border:2px solid #1a1a1a;
  font-family:var(--font-ui);
  font-size:2.5rem;
  font-weight:500;
  line-height:1;
}

.wp-block-button__link:hover,
.button:hover,
.dl-group .dl-button .wp-block-button__link:hover,
.dl-group .dl-button a:hover{
  background:var(--c-accent);
  color:#fff;
  border-color:#1a1a1a;
  box-shadow:0 3px 8px rgba(0,0,0,.16);
}

.wp-block-button__link:hover::after,
.button:hover::after,
.dl-group .dl-button .wp-block-button__link:hover::after,
.dl-group .dl-button a:hover::after{
  background:var(--c-accent);
  color:#fff;
}

.wp-block-button__link:focus-visible,
.button:focus-visible,
.dl-group .dl-button .wp-block-button__link:focus-visible,
.dl-group .dl-button a:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}


/** ---------------------------------------------------------
 * Hero / allgemeiner Content
 * --------------------------------------------------------- */
.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.22)),
    var(--hero-image) center/cover no-repeat;
  background-color:#111;
  border-top:1px solid rgba(255,255,255,.10);
}

.hero-inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:var(--s-6) var(--s-3);
  padding-top:calc(var(--s-6) + 2rem);
}

.hero-title{
  font-family:var(--font-heading);
  font-size:var(--hero-title-size);
  font-weight:var(--hero-title-weight);
  line-height:var(--hero-title-line-height);
  letter-spacing:var(--tracking-tight);
  max-width:22ch;
  margin:0;
}

.hero .hero-content{
  max-width:var(--container);
  padding:var(--s-5) var(--s-6);
}

.hero .hero-content p{
  font-weight:var(--fw-3);
  margin:0 0 var(--s-3);
}

.hero .hero-content h1,
.hero .hero-content .wp-block-heading{
  font-family:var(--font-heading);
  font-size:var(--hero-title-size) !important;
  font-weight:var(--hero-title-weight);
  line-height:var(--hero-title-line-height);
  letter-spacing:var(--tracking-tight);
  margin:0 0 var(--s-3);
  color:#fff !important;
}

.page .entry-content > :first-child:is(p, ul, ol, div, section){
  margin-top:calc(var(--s-6) * 1.15);
}

.hero .breadcrumbs{
  z-index:20;
}

/* Typografische Standard-Hierarchie im Inhaltsbereich */
.entry-content h2{
  font-size:clamp(1.75rem, 2vw, 2.25rem);
  line-height:1.2;
  margin-top:calc(var(--s-6) * 1.4);
  margin-bottom:var(--s-3);
}

/* Wenn auf Fließtext direkt eine H2 folgt, etwas kompakter */
.entry-content p + h2{
  margin-top:var(--s-6);
}


/** ---------------------------------------------------------
 * Karten / Grid
 * --------------------------------------------------------- */
.card{
  border:1px solid var(--c-border);
  background:var(--c-bg);
  padding:var(--s-3);
}

.grid{
  display:grid;
  gap:var(--s-3);
}

@media (min-width:48rem){
  .grid.cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .grid.cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}


/** ---------------------------------------------------------
 * Footer
 * --------------------------------------------------------- */
.site-footer{
  margin-top:var(--s-6);
  background:var(--c-footer-bg);
  color:var(--c-footer-fg);
  border-top:1px solid var(--c-footer-border);
  padding:var(--s-6) 0 var(--s-4);
}

.footer-grid{
  display:grid;
  gap:var(--s-5);
}

@media (min-width:56rem){
  .footer-grid{
    grid-template-columns:1fr 1fr 1fr;
    align-items:start;
  }
}

.footer-title{
  font-family:var(--font-heading);
  font-size:var(--fs-2);
  font-weight:var(--fw-heading);
  letter-spacing:var(--tracking-tight);
  margin:0 0 var(--s-2);
  color:#fff;
}

.footer-menu{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}

.site-footer a{
  color:#fff;
  text-decoration-thickness:.12em;
  text-underline-offset:.18em;
}

.site-footer a:hover{
  text-decoration-thickness:.16em;
}

.footer-tagline{
  margin:var(--s-2) 0 0;
  color:var(--c-footer-fg-muted);
}

.footer-bottom{
  margin-top:calc(var(--s-5) * 1.15);
  padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.15);
}

.footer-copy{
  margin:0;
  color:var(--c-footer-fg-muted);
}

/* Social-Icons im Footer */
.footer-social-nav{
  margin-top:var(--s-3);
}

.footer-social{
  justify-content:flex-start;
}

.footer-meta .social-menu{
  list-style:none;
  display:flex;
  gap:.25rem;
  margin:0;
  padding:0;
  align-items:center;
}

.footer-meta .social-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

.footer-meta .social-menu a::before{
  content:"";
  width:20px;
  height:20px;
  background:currentColor;
  -webkit-mask:var(--icon) no-repeat center / contain;
  mask:var(--icon) no-repeat center / contain;
  transition:transform .15s ease;
}

.footer-meta .social-menu a:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.36);
}

.footer-meta .social-menu a:hover::before{
  transform:scale(1.08);
}

.footer-meta .social-menu a:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}


/** ---------------------------------------------------------
 * Inhaltsbilder
 * --------------------------------------------------------- */
.wp-block-image .alignright,
div.wp-block-image figure.alignright{
  margin-left:60px;
  margin-bottom:20px;
  border:1px solid white;
}

.wp-block-image .alignleft,
div.wp-block-image figure.alignleft{
  margin-right:60px;
  margin-bottom:20px;
  border:1px solid white;
}

.section-intro .wp-block-image{
  margin-bottom:0;
}

.section-intro .wp-block-image img{
  display:block;
}

.section-intro .wp-block-image + h2{
  margin-top:10px;
}


/** ---------------------------------------------------------
 * Bereich „Unsere Vision“
 * --------------------------------------------------------- */
.unsere-vision-handlungsfelder{
  counter-reset:handlungsfeld;
  list-style:none;
  margin:50px 0 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem 4rem;
}

.unsere-vision-handlungsfelder li{
  counter-increment:handlungsfeld;
  display:grid;
  grid-template-columns:120px 1fr;
  column-gap:1.75rem;
  align-items:center;
  margin:0;
  padding:0;
  font-weight:var(--fw-3);
  font-size:1.2rem;
  line-height:1.5;
}

.unsere-vision-handlungsfelder li::before{
  content:counter(handlungsfeld);
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--number-box-size);
  height:var(--number-box-size);
  border:2px solid var(--c-accent);
  color:var(--c-accent);
  background-color:var(--c-accent-bg);
  font-family:var(--font-heading);
  font-size:3rem;
  font-weight:var(--fw-heading);
  line-height:1;
  padding:14px 7px 0 7px;
}

@media (max-width:900px){
  .unsere-vision-handlungsfelder{
    grid-template-columns:1fr;
    gap:2rem;
  }
}


/** ---------------------------------------------------------
 * Design-Fixes / Hilfsklassen
 * --------------------------------------------------------- */
.citation{
  font-size:var(--fs-4);
  font-style:oblique;
}

/* Hilfsklasse: Element komplett aus dem Layout nehmen */
.hide-me{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Zweispaltige Gutenberg-Gruppen:
   - entfernt überflüssige obere Abstände
   - sorgt für sauberes oberes Ausrichten
   - hält beide Spalten gleich breit */
.wp-block-group:has(.two-columns){
  padding-top:0 !important;
  margin-top:0 !important;
}

.two-columns,
.two-columns .wp-block-heading,
.two-columns h2 + p{
  margin-top:0 !important;
}

.wp-block-group.two-columns.is-layout-flex{
  align-items:flex-start !important;
  gap:clamp(2rem, 4vw, 5rem);
}

.wp-block-group.two-columns.is-layout-flex > .wp-block-group{
  align-self:flex-start;
  flex:1 1 0;
  max-width:none;
  min-width:0;
}

.wp-block-group.two-columns.is-layout-flex > .wp-block-group.is-layout-flex{
  align-items:flex-start !important;
}


/** ---------------------------------------------------------
 * Milestones / Themen
 * --------------------------------------------------------- */
.pep-milestones{
  counter-reset:milestone;
  list-style:none;
  padding:0;
  margin:50px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:calc(var(--s-6) * 1.15);
  max-width:calc(var(--measure) - 2rem) !important;
  margin-inline:auto;
  padding-inline:var(--s-6);
}

.pep-milestones > li{
  counter-increment:milestone;
  display:grid;
  grid-template-columns:120px 1fr;
  column-gap:3.2rem;
  align-items:start;
  margin:0;
  font-weight:var(--fw-3);
}

.pep-milestones > li::before{
  content:counter(milestone);
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--number-box-size);
  height:var(--number-box-size);
  border:2px solid var(--c-accent);
  color:var(--c-accent);
  background-color:var(--c-accent-bg);
  font-family:var(--font-heading);
  font-size:3rem;
  font-weight:var(--fw-heading);
  grid-column:1;
  grid-row:1 / span 2;
}

.pep-milestones > li > ul{
  grid-column:2;
  margin-top:var(--s-3);
  margin-left:0;
  margin-bottom:var(--s-2);
  padding-left:0;
  line-height:1.5;
  list-style:none;
}

.pep-milestones > li > ul li{
  position:relative;
  padding-left:1.4rem;
  margin-bottom:.55rem;
  font-weight:var(--fw-1);
}

.pep-milestones > li > ul li::before{
  content:"→";
  position:absolute;
  left:0;
  top:0;
  color:var(--c-accent);
  font-weight:var(--fw-2);
}

.pep-milestones details{
  margin-top:var(--s-2);
}

.pep-milestones summary{
  cursor:pointer;
  font-family:var(--font-ui);
  font-weight:var(--fw-ui);
  color:var(--c-accent);
  list-style:none;
  display:grid;
  grid-template-columns:1rem 1fr;
  column-gap:.5rem;
  align-items:start;
  align-self:start;
  line-height:1.4;
}

.pep-milestones summary::-webkit-details-marker{
  display:none;
}

.pep-milestones summary::marker{
  content:"";
}

.pep-milestones summary::before{
  content:"→";
  display:block;
  line-height:1;
  transform-origin:center;
  transition:transform .2s ease;
  margin-top:.08em;
}

.pep-milestones details[open] summary::before{
  transform:rotate(90deg);
}

.pep-milestones > li > ul li:has(details)::before{
  content:none;
}

.pep-milestones details[open] > summary{
  margin-bottom:var(--s-3);
}

.pep-milestones details ul{
  list-style:disc;
  margin:var(--s-2) 0 var(--s-3);
  padding-left:1.5rem;
}

.pep-milestones details ul li{
  position:static;
  padding-left:0;
  margin-bottom:.35rem;
}

.pep-milestones details ul li::before{
  content:none;
}


/** ---------------------------------------------------------
 * Downloads
 * --------------------------------------------------------- */
.dl-letterbox{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--s-2);
  margin:0;
  padding:0;
  font-family:var(--font-ui);
  font-weight:var(--fw-ui);
}

.dl-letterbox a{
  display:inline-block;
  min-width:1.2em;
  text-align:center;
  color:var(--c-accent);
  text-decoration:underline;
  text-underline-offset:.2em;
}

.dl-letterbox a:hover{
  text-decoration-thickness:.16em;
}

.dl-group h2[id]{
  scroll-margin-top:var(--header-offset);
}

.dl-letterbox a.is-disabled{
  color:var(--c-muted);
  text-decoration:none;
  pointer-events:none;
  cursor:default;
}

.dl-letterbox + .wp-block-separator{
  margin-top:var(--s-6);
}

.dl-group{
  margin-top:var(--s-6);
}

.dl-group h2{
  margin:0 0 var(--s-3);
  margin-top:3em;
  padding:0;
  line-height:1.2;
  font-size:var(--fs-3);
  font-family:var(--font-heading);
  font-weight:var(--fw-heading);
  color:var(--c-fg);
}

.dl-group .dl-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-3);
  margin:0;
  padding:var(--s-3) 0;
  border-top:1px solid var(--c-border);
  min-height:4.25rem;
}

.dl-group .dl-row:last-child{
  border-bottom:1px solid var(--c-border);
}

.dl-group .dl-row p{
  margin:0;
  padding:0 var(--s-3) 0 0;
  flex:1 1 auto;
  line-height:1.45;
  font-size:var(--fs-2);
  font-weight:var(--fw-1);
  color:var(--c-fg);
}

.dl-group .wp-block-buttons,
.dl-group .dl-button{
  margin:0;
  padding:0;
  flex:0 0 auto;
}

.dl-group .wp-block-buttons{
  justify-content:flex-end;
}

.dl-group + .dl-group{
  margin-top:var(--s-5);
}

/* Eingebettete Download-Kästen auf Best-Practice-Seiten */
.page-id-1199 .entry-content .dl-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  flex-wrap:wrap;
  border:1px solid var(--c-border);
  padding:var(--s-2) var(--s-3);
  margin:var(--s-2) 0 var(--s-3);
  background:transparent;
}

.page-id-1199 .entry-content .dl-row > p{
  margin:0;
  flex:1 1 18rem;
}

.page-id-1199 .entry-content .dl-row .wp-block-buttons,
.page-id-1199 .entry-content .dl-row .dl-button,
.page-id-1199 .entry-content .dl-row .dl-button .wp-block-button__link{
  margin:0;
}


/** ---------------------------------------------------------
 * Seitenspezifische Anpassungen
 * --------------------------------------------------------- */
.space-xs{
  margin:0 !important;
  padding:0 !important;
  height:.75rem;
  min-height:.75rem;
}
p:has(+ .space-xs){
  margin-bottom:0 !important;
}
.space-xs + p{
  margin-top:0 !important;
}

.page-id-934 .last-separator{
  margin-top:var(--s-5);
}

/* Hero ohne Hintergrundbild für Serviceseiten */
:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero{
  min-height:0;
  height:auto;
  padding:0 !important;
  background:var(--c-bg);
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero-inner{
  min-height:0;
  height:auto;
  padding:0 !important;
  gap:var(--s-2);
  align-items:flex-start;
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero-inner .breadcrumbs{
  left:0;
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero-content{
  padding:0;
  margin-top:0;
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero-content .wp-block-heading,
:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080,
  body.page-id-370
) .hero-content h1{
  margin:calc(var(--s-6) * 2) 0 0;
  color:var(--c-fg) !important;
}

/* Dokumentseiten etwas ruhiger und schmaler */
:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080
) .entry-content{
  max-width:var(--measure-narrow);
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080
) .entry-content h2{
  margin-top:calc(var(--s-6) * 1.4);
  margin-bottom:var(--s-3);
}

:is(
  body.page-id-1078,
  body.page-id-1225,
  body.page-id-1080
) .entry-content p{
  margin-bottom:var(--s-4);
}

/* Datenschutz / Kontakt Zeilen kompakter */
.wp-block-group.is-nowrap.is-layout-flex{
  gap:1rem;
  margin-top:0 !important;
  margin-bottom:1rem !important;
  align-items:flex-start;
}

.wp-block-group.is-nowrap.is-layout-flex p{
  margin:0 !important;
  line-height:1.45;
}

/* Kontaktseite */
body.page-id-370 .entry-content .contact-layout{
  display:grid;
  grid-template-columns:minmax(16rem, 24rem) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 5rem);
  align-items:start;
  margin-top:var(--s-6);
}

body.page-id-370 .entry-content .contact-layout__info{
  min-width:0;
}

body.page-id-370 .entry-content .contact-layout__logo{
  display:block;
  width:min(218px, 100%);
  height:auto;
  margin:0 0 var(--s-5);
}

body.page-id-370 .entry-content .contact-layout__info h2{
  margin:calc(var(--s-5) * 1.1) 0 var(--s-2);
}

body.page-id-370 .entry-content .contact-layout__info h2:first-of-type{
  margin-top:0;
}

body.page-id-370 .entry-content .contact-layout__info p{
  margin:0 0 var(--s-5);
}

body.page-id-370 .entry-content .contact-layout__map{
  min-width:0;
}

body.page-id-370 .entry-content .map-wrapper{
  margin-top:0;
  border:1px solid var(--c-border);
  overflow:hidden;
}

body.page-id-370 .entry-content .map-wrapper iframe{
  width:100%;
  height:600px;
  border:0;
  display:block;
}

/* Videodemo-Grid */
.video-demo-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-6) !important;
}

.video-demo-card{
  padding:var(--s-3);
  border:1px solid var(--c-border);
  background:var(--c-bg);
}

.video-demo-card h3,
.video-demo-card p{
  margin-top:0;
}

.video-demo-card .presto-player-wrapper,
.video-demo-card .presto-player,
.video-demo-card video{
  width:100%;
}


/** ---------------------------------------------------------
 * Suchergebnisseite
 * --------------------------------------------------------- */
body.search .search-results-page{
  width:100%;
  max-width:none;
  margin:0;
  padding-top:calc(var(--s-6) * 1.35);
}

body.search .search-results-header{
  margin-bottom:var(--s-5);
  padding-bottom:var(--s-4);
  border-bottom:2px solid var(--c-border-search);
}

body.search .search-results-title{
  margin:0 0 var(--s-4);
  padding-top:0;
  color:#111;
  font-size:clamp(3rem, 6vw, 4.5rem);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-0.02em;
}

body.search .search-results-summary{
  margin:0 0 var(--s-3);
  color:#555;
  font-size:1.05rem;
}

body.search .search-results-form{
  max-width:30rem;
}

body.search .search-results-form .search-form{
  display:flex;
  flex-wrap:nowrap;
  gap:.75rem;
  align-items:stretch;
}

body.search .search-results-form .search-field,
body.search .search-results-form input[type="search"]{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  height:3rem;
  padding:.08rem .95rem 0 .95rem;
  border:2px solid #d0d0d0;
  background:#fff;
  color:#111;
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1;
}

body.search .search-results-form .search-submit,
body.search .search-results-form input[type="submit"],
body.search .search-results-form button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:3rem;
  padding:.18rem 1rem 0 1rem;
  border:2px solid var(--c-accent) !important;
  background:#fff;
  color:#111;
  font-family:var(--font-ui);
  font-size:var(--fs-1);
  font-weight:var(--button-font-weight);
  line-height:1;
  text-decoration:none !important;
  cursor:pointer;
  white-space:nowrap;
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}

body.search .search-results-form .search-submit:hover,
body.search .search-results-form input[type="submit"]:hover,
body.search .search-results-form button[type="submit"]:hover,
body.search .search-results-form .search-submit:active,
body.search .search-results-form input[type="submit"]:active,
body.search .search-results-form button[type="submit"]:active{
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent) !important;
}

body.search .search-results-form .search-submit:focus-visible,
body.search .search-results-form input[type="submit"]:focus-visible,
body.search .search-results-form button[type="submit"]:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:2px;
}

body.search .search-results-list{
  display:grid;
  gap:0;
}

body.search .search-result-item{
  padding:3rem 0;
  border-bottom:2px solid var(--c-border-search);
}

body.search .search-result-header{
  margin-bottom:var(--s-3);
}

body.search .search-result-title{
  margin:0 0 .75rem;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-0.01em;
}

body.search .search-result-title a{
  color:#111;
  text-decoration:none;
}

body.search .search-result-title a:hover{
  color:var(--c-accent);
}

body.search .search-result-meta{
  margin:0 0 1rem .5rem;
  color:#666;
  font-size:.95rem;
  line-height:1.5;
  border-left:1px solid #666;
  padding-left:1rem;
}

body.search .search-result-excerpt{
  max-width:var(--measure-narrow);
}

body.search .search-result-excerpt p{
  margin:0;
  line-height:1.65;
}

body.search .search-result-link{
  margin:var(--s-3) 0 0;
}

body.search .search-result-link a{
  text-decoration:none !important;
}

body.search .search-result-link .wp-block-buttons,
body.search .search-result-link .wp-block-button{
  margin:0;
  padding:0;
}

body.search .search-result-link .wp-block-button__link{
  min-height:2.55rem;
  padding:.72rem 3.4rem .42rem 1rem;
  font-size:.92rem;
  line-height:1.05;
  text-decoration:none !important;
}

body.search .search-result-link .wp-block-button__link::after{
  width:2.45rem;
  font-size:1.8rem;
  padding-top:.32rem;
}

body.search .search-result-link .wp-block-button__link:hover,
body.search .search-result-link .wp-block-button__link:active{
  color:#fff !important;
  text-decoration:none !important;
}

body.search .search-result-link .wp-block-button__link:hover::after,
body.search .search-result-link .wp-block-button__link:active::after{
  color:#fff;
}

body.search .search-no-results{
  padding:var(--s-5) 0;
  border-top:1px solid var(--c-border);
}

body.search .search-no-results h2{
  margin-top:0;
  margin-bottom:var(--s-2);
}

body.search .search-results-pagination{
  margin-top:var(--s-5);
}

body.search .search-results-pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

/* Standard: Seitenzahlen schlicht im kleinen CI-Stil */
body.search .search-results-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.4rem;
  min-height:2.4rem;
  padding:.18rem .75rem 0 .75rem;
  border:2px solid var(--c-accent);
  background:#fff;
  color:#111;
  font-family:var(--font-ui);
  font-size:var(--fs-1);
  font-weight:var(--button-font-weight);
  line-height:1;
  text-decoration:none !important;
}

body.search .search-results-pagination a.page-numbers:hover,
body.search .search-results-pagination a.page-numbers:active{
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent);
}

body.search .search-results-pagination .current{
  background:var(--c-accent);
  color:#fff;
  border-color:var(--c-accent);
}

body.search .search-results-pagination .dots{
  border-color:var(--c-accent);
  color:#111;
}

/* CTA-Variante für Zurück / Weiter */
body.search .search-results-pagination .prev,
body.search .search-results-pagination .next{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  min-width:auto;
  min-height:auto;
}

body.search .search-results-pagination .prev .pagination-cta,
body.search .search-results-pagination .next .pagination-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:2.55rem;
  background:#fff;
  color:#111;
  border:2px solid #1a1a1a;
  font-family:var(--font-ui);
  font-size:.92rem;
  font-weight:var(--button-font-weight);
  line-height:1.05;
  text-decoration:none !important;
}

/* Weiter: Pfeil rechts */
body.search .search-results-pagination .next .pagination-cta{
  padding:.72rem 3.7rem .42rem 1rem;
}

body.search .search-results-pagination .next .pagination-cta::after{
  content:"→";
  position:absolute;
  top:-2px;
  right:-2px;
  bottom:-2px;
  width:2.45rem;
  padding-top:.32rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-accent);
  color:#fff;
  border:2px solid #1a1a1a;
  font-family:var(--font-ui);
  font-size:1.7rem;
  font-weight:500;
  line-height:1;
}

/* Zurück: Pfeil links */
body.search .search-results-pagination .prev .pagination-cta{
  padding:.72rem 1rem .42rem 3.7rem;
}

body.search .search-results-pagination .prev .pagination-cta::before{
  content:"←";
  position:absolute;
  top:-2px;
  left:-2px;
  bottom:-2px;
  width:2.45rem;
  padding-top:.32rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-accent);
  color:#fff;
  border:2px solid #1a1a1a;
  font-family:var(--font-ui);
  font-size:1.7rem;
  font-weight:500;
  line-height:1;
}

body.search .search-results-pagination .prev:hover .pagination-cta,
body.search .search-results-pagination .next:hover .pagination-cta,
body.search .search-results-pagination .prev:active .pagination-cta,
body.search .search-results-pagination .next:active .pagination-cta{
  background:var(--c-accent);
  color:#fff;
  border-color:#1a1a1a;
}

body.search .search-results-pagination .prev:hover .pagination-cta::before,
body.search .search-results-pagination .next:hover .pagination-cta::after,
body.search .search-results-pagination .prev:active .pagination-cta::before,
body.search .search-results-pagination .next:active .pagination-cta::after{
  background:var(--c-accent);
  color:#fff;
}


/** ---------------------------------------------------------
 * Responsive: bis 900px
 * --------------------------------------------------------- */

/* Kontaktseite */
@media (max-width:900px){
  body.page-id-370 .entry-content .contact-layout{
    grid-template-columns:1fr;
    gap:var(--s-5);
  }

  body.page-id-370 .entry-content .map-wrapper iframe{
    height:420px;
  }
}


/** ---------------------------------------------------------
 * Responsive: bis 680px
 * --------------------------------------------------------- */

/* Eingebettete Download-Kästen auf Best-Practice-Seiten */
@media (max-width:680px){
  .page-id-1199 .entry-content .dl-row{
    align-items:flex-start;
  }

  .page-id-1199 .entry-content .dl-row .wp-block-buttons{
    width:100%;
  }
}


/** ---------------------------------------------------------
 * Responsive: bis 64rem
 * --------------------------------------------------------- */

/* Seitlich platzierte Bilder im Inhaltsbereich */
@media (max-width:64rem){
  .entry-content .figure-sideimage{
    float:right;
    max-width:36%;
    margin:0 0 var(--s-4) var(--s-4);
  }

  .entry-content .figure-sideimage img{
    display:block;
    width:100% !important;
    height:auto !important;
  }
}


/** ---------------------------------------------------------
 * Responsive: bis 56rem
 * - Header / Navigation mobil
 * --------------------------------------------------------- */
@media (max-width:56rem){

  .site-header{
    position:sticky;
    top:0;
  }

  .site-header .container{
    max-width:100%;
    padding-inline:var(--s-3);
  }

  .header-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--s-3);
    padding-block:var(--s-3);
  }

  .brand{
    flex:0 1 auto;
    min-width:0;
  }

  .brand img.custom-logo{
    height:36px;
    width:auto;
    max-width:100%;
  }

  .nav-toggle{
    margin-left:0;
    margin-right:0;
    flex:0 0 auto;
    align-self:flex-start;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    padding:0;
    z-index:1002;
  }

  .primary-nav{
    width:100%;
    margin-left:0;
    padding-top:0;
    padding-bottom:0;
    order:20;
  }

  .primary-nav[hidden]{
    display:none !important;
  }

  .primary-nav:not([hidden]){
    display:block;
    width:100%;
    margin-top:var(--s-2);
    padding:var(--s-3);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);
    max-height:min(60vh, 24rem);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .primary-nav ul{
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }

  .primary-nav li{
    width:100%;
  }

  .primary-nav li::after{
    content:none;
  }

  .primary-nav a{
    display:block;
    width:100%;
    padding:.7rem .8rem;
    white-space:normal;
  }

  .primary-nav .sub-menu{
    display:block;
    position:static;
    min-width:0;
    margin:.2rem 0 0 0;
    padding:.2rem 0 .2rem 1rem;
    border:0;
    background:transparent;
  }

  .primary-nav .sub-menu a{
    padding:.55rem .8rem;
    font-weight:var(--fw-1);
    color:rgba(255,255,255,.9);
  }

  .search-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    margin-left:.25rem;
    padding:0;
  }
}


/** ---------------------------------------------------------
 * Responsive: bis 48rem
 * - Buttons
 * - Suchergebnisse
 * - iFrame-Ausblendung
 * - Downloads mobil
 * - Video-Grid
 * --------------------------------------------------------- */
body.page-id-934 .mobile-note{
  display:none;
}
@media (max-width:48rem){

  /* Allgemeine CI-Buttons */
  .wp-block-button__link,
  .button,
  .dl-group .dl-button a,
  .dl-group .dl-button .wp-block-button__link{
    padding:.75rem 3.9rem .68rem 1rem;
    min-height:3.1rem;
    font-size:.92rem;
    line-height:1.15;
  }

  .wp-block-button__link::after,
  .button::after,
  .dl-group .dl-button .wp-block-button__link::after{
    width:3rem;
    font-size:1.35rem;
  }

  .wp-block-buttons.is-content-justification-center{
    justify-content:center;
  }

  .wp-block-buttons.is-content-justification-right{
    justify-content:flex-end;
  }

  .dl-button .wp-block-button__link,
  .dl-button a{
    font-size:.85rem;
    padding:.58rem .85rem .5rem;
    white-space:nowrap;
  }

  /* Downloads mobil */
  .dl-group .dl-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .dl-group .wp-block-buttons{
    width:100%;
  }

  .dl-group .dl-button .wp-block-button__link,
  .dl-group .dl-button a{
    width:100%;
    text-align:center;
  }

  /* Suchergebnisse mobil */
  body.search .search-results-page{
    padding-top:var(--s-4);
  }

  body.search .search-results-form .search-form{
    flex-direction:column;
    align-items:stretch;
  }

  body.search .search-results-form .search-field,
  body.search .search-results-form input[type="search"],
  body.search .search-results-form .search-submit,
  body.search .search-results-form input[type="submit"],
  body.search .search-results-form button[type="submit"]{
    width:100%;
  }

  body.search .search-result-title{
    font-size:clamp(1.5rem, 6vw, 2rem);
  }

  /* Videodemo-Grid mobil */
  .video-demo-grid{
    grid-template-columns:1fr;
  }

  /* Hinweistext statt iFrame auf kleinen Geräten */
  body.page-id-934 .mobile-note{
    display:block;
    margin:0;
    padding:1rem 1.25rem;
    border:1px solid var(--c-border);
    background:var(--c-bg-soft);
    font-size:.95rem;
    line-height:1.45;
  }

  body.page-id-934 iframe.hide-when-mobile{
    display:none !important;
  }
}


/** ---------------------------------------------------------
 * Responsive: bis 36rem
 * - sehr kleine Displays / Smartphones
 * --------------------------------------------------------- */
@media (max-width:36rem){

  .header-row{
    gap:var(--s-2);
    padding-block:var(--s-2);
  }

  .brand img.custom-logo{
    height:32px;
  }

  .nav-toggle{
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
  }

  .primary-nav:not([hidden]){
    padding:var(--s-2);
  }

  .primary-nav a{
    padding:.8rem .8rem;
  }

  .search-toggle{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
  }
}