/*
Theme Name:     Twenty Twenty-Five Child
Theme URI:      https://arbion.de/
Description:    Child-Theme für Twenty Twenty-Five
Author:         Arbion IT-Services
Author URI:     https://arbion.de/
Template:       twentytwentyfive
Version:        1.0
License:        GNU General Public License v2 or later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    twentytwentyfive-child
*/

/* Dein Custom CSS kommt hier rein */

/* =========================================================
   ARBION SLIDER – HERO, ORG, SERVICES
   ========================================================= */

/* Basis für alle Arbion-Slider */
.arbion-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Gemeinsame Slide-Basis */
.arbion-slider .arbion-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.arbion-slider .arbion-slide img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pause bei Hover / Fokus (JS setzt .is-paused) */
.arbion-slider.is-paused .arbion-slide {
  animation-play-state: paused;
}

/* =========================================================
   HERO-SLIDER ([arbion_slider])
   ========================================================= */

.arbion-slider--hero {
  --arbion-total-speed: 24s;
  --arbion-single-speed: calc(var(--arbion-total-speed) / 3);
  --arbion-height: clamp(300px, 85vh, 800px);
  height: var(--arbion-height);
}

/* Basis der Slides im Hero: überblenden, kein Springen */
.arbion-slider--hero .arbion-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeHeroLoop var(--arbion-total-speed) linear infinite;
}

/* Verteilung über den Zeitkreis mit NEGATIVEM Delay → weicher Loop */
.arbion-slider--hero .arbion-slide:nth-child(1) {
  animation-delay: 0s;
}
.arbion-slider--hero .arbion-slide:nth-child(2) {
  /* 2. Bild soll in der 2. Phase liegen → -2 * single-speed */
  animation-delay: calc(-2 * var(--arbion-single-speed));
}
.arbion-slider--hero .arbion-slide:nth-child(3) {
  /* 3. Bild in der 3. Phase → -1 * single-speed */
  animation-delay: calc(-1 * var(--arbion-single-speed));
}

.arbion-slider--hero .arbion-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Große Caption im Hero-Slider (Overlay auf dem Bild) */
.arbion-slider--hero .arbion-slide__caption {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  text-align: center;
  padding: 0 4vw 6%;
  font-weight: 400;
  line-height: 1.2;
  font-size: clamp(1.4rem, 4.5vw, 6rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  z-index: 2;
}

/* Abdunklung nur im Hero-Slider */
.arbion-slider--hero .arbion-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Keyframes für weichen Loop:
   – kurz einblenden
   – sichtbar
   – wieder ausblenden
   – Rest der Zeit unsichtbar
   Durch die negativen Delays gibt es keinen „Neustart-Ruckler“. */
@keyframes fadeHeroLoop {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* weich eingeblendet */
  30%  { opacity: 1; }   /* gut sichtbar */
  35%  { opacity: 0; }   /* ausblenden */
  100% { opacity: 0; }   /* unsichtbar bis zur nächsten Runde */
}


/* =========================================================
   ORG-SLIDER ([arbion_org_slider]) – 3 Bilder, ohne Titel
   ========================================================= */

.arbion-org-slider {
  --arbion-total-speed: 18s;          /* 18s für 3 Bilder → 6s je Bild */
  --arbion-count: 3;
  --arbion-single-speed: calc(var(--arbion-total-speed) / var(--arbion-count));
  height: clamp(10rem, 47vw, 32rem);   /* min – dynamisch – max */
  max-height: 50vh;                    /* optional: Deckel gegen “zu hoch” */

  background: #fff;
}

/* Alle Org-Slides: gleiche Animation, verteilt per negativem Delay
   → weicher Loop ohne Sprung */
.arbion-org-slider .arbion-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: fadeOrgLoop var(--arbion-total-speed) linear infinite;
}

.arbion-org-slider .arbion-slide:nth-child(1) {
  animation-delay: 0s;
}
.arbion-org-slider .arbion-slide:nth-child(2) {
  /* 2. Bild soll auch in der 2. Phase liegen → -2 * single-speed */
  animation-delay: calc(-2 * var(--arbion-single-speed));
}
.arbion-org-slider .arbion-slide:nth-child(3) {
  /* 3. Bild in der 3. Phase → -1 * single-speed */
  animation-delay: calc(-1 * var(--arbion-single-speed));
}



.arbion-org-slider .arbion-slide img {
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

/* Sichtfenster: kurz einblenden, sichtbar, wieder ausblenden */
@keyframes fadeOrgLoop {
  0%   { opacity: 0; }
  5%   { opacity: 1; }   /* weich eingeblendet */
  30%  { opacity: 1; }   /* gut sichtbar */
  35%  { opacity: 0; }   /* ausblenden */
  100% { opacity: 0; }
}


/* =========================================================
   SERVICES-SLIDER ([arbion_services_slider]) – bis 7 Bilder, ohne Titel
   ========================================================= */

.arbion-services-slider {
  --arbion-total-speed: 42s;         /* 42s für 7 Bilder → auch 6s je Bild */
  --arbion-count: 7;
  --arbion-single-speed: calc(var(--arbion-total-speed) / var(--arbion-count));
    height: clamp(10rem, 47vw, 32rem);   /* min – dynamisch – max */
  max-height: 50vh;                    /* optional: Deckel gegen “zu hoch” */
  background: #fff;
}

/* Alle Service-Slides: gleiche Animation, verteilt per negativem Delay */
.arbion-services-slider .arbion-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: fadeServicesLoop var(--arbion-total-speed) linear infinite;
}

/* negative Delays: verteilen 7 Bilder gleichmäßig über die 42s */
.arbion-services-slider .arbion-slide:nth-child(1) { 
  animation-delay: calc(-0 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(2) { 
  animation-delay: calc(-6 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(3) { 
  animation-delay: calc(-5 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(4) { 
  animation-delay: calc(-4 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(5) { 
  animation-delay: calc(-3 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(6) { 
  animation-delay: calc(-2 * var(--arbion-single-speed)); 
}
.arbion-services-slider .arbion-slide:nth-child(7) { 
  animation-delay: calc(-1 * var(--arbion-single-speed)); 
}


.arbion-services-slider .arbion-slide img {
  height: auto;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

/* Sichtfenster etwas schmaler, damit sich nichts überlappt */
@keyframes fadeServicesLoop {
  0%    { opacity: 0; }
  1.5%    { opacity: 1; }    /* einblenden */
  11%   { opacity: 1; }    /* sichtbar */
  16% { opacity: 0; }    /* ausblenden (≈ 1/7 der Zeit) */
  100%  { opacity: 0; }
}

/* =========================================================
   ENDE SLIDER-BEREICH
   ========================================================= */


/*Partner-Logos*/

.partner-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 30%;
  gap: 20px;
  flex-wrap: wrap;
}

.partner-logos img {
  width: 10vw;
  flex: 1 1 auto;
}

.partner-divider {
  width: 1px;
  background-color: #9b957a;
  height: 300px;
}

/* Mobile Ansicht: Logos untereinander, keine Divider */
@media (max-width: 768px) {
  .partner-logos {
    padding: 0 15%;
    gap: 15px;
  }

  .partner-logos img {
    width: 15vw;
    flex: 1 1 auto;
  }

  .partner-divider {
    height: 120px;
  }
}

/* Mobile Menü: linksbündig + 3em Abstand */
@media (max-width: 782px) {
  .wp-block-navigation.items-justified-right {
    --navigation-layout-justification-setting: flex-start !important;
    --navigation-layout-justify: flex-start !important;
    padding-left: 3em;
  }
}

/* ARBION: Ziel-Headline + Rotator */
.goal-wrap {
  text-align: center;
  line-height: 1.35;
  margin: 0 auto;
  padding: 0.5rem 0;
  max-width: 60ch;
}

.goal-main,
.goal-sub {
  font-weight: 400;
  margin: 0;
}

.goal-main {
  font-size: clamp(1.4rem, 2.8vw + 0.6rem, 2.6rem);
  margin-bottom: 0.35rem;
  height: 1.8em;
}

.goal-sub {
  font-size: clamp(1.2rem, 2.4vw + 0.6rem, 2.2rem);
  height: 1.8em;
}

/* Weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .goal-sub { transition: none !important; }
}

/*Verschwindet beim Hochscrollen IT-Services*/
/* 1) Cover sticky machen und unten halten */
.wp-block-cover#overlay-next {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 50svh;
  --fog: 0;
}

/* 2) Nächstes Geschwister-Element nach dem Cover nach oben ziehen */
.wp-block-cover#overlay-next + * {
  position: relative;
  z-index: 1;
}

/* 3) Sticky-Fallen umgehen: Eltern dürfen kein overflow/transform/filter haben */
.wp-site-blocks:has(> .wp-block-cover#overlay-next),
.entry-content:has(> .wp-block-cover#overlay-next),
.wp-block-group:has(> .wp-block-cover#overlay-next) {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* 4) Cover-Inhalt hübsch zentrieren */
.wp-block-cover#overlay-next .wp-block-cover__inner-container {
  text-align: center;
  font-weight: 400;
}

.wp-block-cover#overlay-next::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--fog, 0);
  transition: opacity 150ms linear;
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,0) 0%,
      rgba(128,128,128,0.25) 25%,
      rgba(128,128,128,0.50) 50%,
      rgba(128,128,128,0.75) 75%,
      rgba(128,128,128,0.9) 100%),
    linear-gradient(to bottom,
      rgba(128,128,128,0.9) 100%,
      rgba(128,128,128,0.9) 100%,
      rgba(128,128,128,0.9) 100%);
}

/* Bonus: dezente Unschärfe, wo unterstützt */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wp-block-cover#overlay-next::after {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Accessibility: wer „weniger Bewegung“ möchte, bekommt kein progressives Nebeln */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover#overlay-next { --fog: 0; }
}

/*Verschwindet beim Hochscrollen Banking*/
/* 1) Cover sticky machen und unten halten */
.wp-block-cover#overlay-next-b {
  position: sticky;
  top: 0;
  margin: 0;
  padding-top: 0;
  z-index: 0;
  min-height: 50svh;
  --fog: 0;
}

/* 2) Nächstes Geschwister-Element nach dem Cover nach oben ziehen */
.wp-block-cover#overlay-next-b + * {
  position: relative;
  z-index: 1;
}

/* 3) Sticky-Fallen umgehen: Eltern dürfen kein overflow/transform/filter haben */
.wp-site-blocks:has(> .wp-block-cover#overlay-next-b),
.entry-content:has(> .wp-block-cover#overlay-next-b),
.wp-block-group:has(> .wp-block-cover#overlay-next-b) {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

.wp-block-cover#overlay-next-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: var(--fog, 0);
  transition: opacity 150ms linear;
  background:
    radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,0) 0%,
      rgba(128,128,128,0.25) 25%,
      rgba(128,128,128,0.50) 50%,
      rgba(128,128,128,0.75) 75%,
      rgba(128,128,128,0.9) 100%),
    linear-gradient(to bottom,
      rgba(128,128,128,0.9) 100%,
      rgba(128,128,128,0.9) 100%,
      rgba(128,128,128,0.9) 100%);
}

/* Bonus: dezente Unschärfe, wo unterstützt */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wp-block-cover#overlay-next-b::after {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Accessibility: wer „weniger Bewegung“ möchte, bekommt kein progressives Nebeln */
@media (prefers-reduced-motion: reduce) {
  .wp-block-cover#overlay-next-b { --fog: 0; }
}

/*Tabs-Block für Jobs */

/* --- Tabs Container / Akkordeon --- */
.tabs {
  max-width: 100%;
  margin: 2rem 0;
  font-family: inherit;
}

/* --- Radio-Buttons ausblenden --- */
.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Labels-Icon */
.tabs label::before {
  content: "➤";
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 4px;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  color: #e10234;
}

/* Labels als Akkordeon-Header */
.tabs label {
  display: block;
  cursor: pointer;
  background: #fff;
  margin: 0 0 4px 0;
  padding: 12px 16px;
  border: 1px solid #ddd;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  transition: background 0.3s, border-color 0.3s;
}

.tabs label:hover {
  background: #f7f7f7;
}

/* Panels – zunächst versteckt */
.tab-content {
  display: none;
  border: 1px solid #ddd;
  border-top: 0;
  padding: 20px;
  margin: 0 0 10px 0;
}

/* Ausgewähltes Panel anzeigen */
.tabs input[type="radio"]:checked + label + .tab-content {
  display: block;
}

/* Aktiver Header */
.tabs input[type="radio"]:checked + label {
  border-color: #ccc;
  border-bottom-color: #ccc;
  background: #fff;
}

/* --- Checkliste --- */
.checklist li {
  list-style: none;
  margin: 0.5em 0;
  position: relative;
  padding-left: 1.8em;
}

.checklist li::before {
  content: "✔";
  color: #e10234;
  position: absolute;
  left: 0;
  top: 0;
}

/* Navigation: Breite Submenü */
@media (min-width: 782px) {
  .wp-block-navigation .wp-block-navigation__submenu-container {
    min-width: 300px !important;
    width: 300px !important;
  }
}

/* Navigation: Titel + Beschreibung untereinander */
.wp-block-navigation__submenu-container
.wp-block-navigation-item__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  white-space: normal !important;
}

.wp-block-navigation__submenu-container
.wp-block-navigation-item__content[data-description]::after {
  content: attr(data-description);
  display: block;
  margin-top: 0.2em;
  font-size: 0.85em;
  line-height: 1.3;
  opacity: 0.7;
}

@media (max-width: 781px) {
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content[data-description]::after {
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 0.3em;
  }
}

.wp-block-navigation__submenu-container li {
  padding: 0.35em 0;
}

.wp-block-navigation__submenu-container a[data-description]::after {
  color: currentColor;
}

/* Fokus-Styling */
:focus-visible {
  outline: 3px solid #e10234;
  outline-offset: 3px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* Basis: keine Bullets, keine Einrückung */
.arbion-list-rechtsbund{
  list-style: none;
  text-align:right;
  
}


/* Optional: etwas Luft zwischen den Zeilen */
.arbion-list-rechtsbund li{
  margin: 1em 0;
}


/* Basis: keine Bullets, keine Einrückung */
.arbion-list-linksbund{
  list-style: none;
  text-align:left;
   padding-left: 0;
  
}


/* Optional: etwas Luft zwischen den Zeilen */
.arbion-list-linksbund li{
  margin: 1em 0;
}