/* ===========================
   Basis / Variablen
=========================== */
:root{
  --c-black:#000;
  --c-white:#fff;
  --c-focus:#ffd900;
  --c-error:#d00000;
  --ease:ease;
  --t-fast:200ms;

  /* NEU: Service-Accordion Content-Gap & Zahlenbreite */
  --service-content-gap: clamp(12px, 1.6vw, 28px);
  /* Fallback; wird beim Laden per JS aus „88“ überschrieben */
  --rot-num-width: 2.6ch;
}

/* ===========================
   Lizenzierte Schriftarten
=========================== */
@font-face{
  font-family:"Review Web";
  src:url("../fonts/Review-Regular-Web.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Review Web";
  src:url("../fonts/Review-Medium-Web.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Review Web";
  src:url("../fonts/Review-Bold-Web.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Utility (falls im Markup genutzt) */
.Review-Regular-Web{ font-family:"Review Web"; font-weight:400; }
.Review-Medium-Web { font-family:"Review Web"; font-weight:500; }
.Review-Bold-Web   { font-family:"Review Web"; font-weight:700; }

/* ===========================
   Layout / Header / Navbar
=========================== */
#module-menu-dialog ul{ display:flex; }

.uk-notification-message{ color:var(--c-black); }

.tm-header{
  border-top:solid var(--c-black) 40px;
  transition:border-top-width var(--t-fast) var(--ease);
}

.uk-navbar-left,
.uk-navbar-right{ align-items:baseline; }

.uk-navbar-left{
  display:flex;
  width:100%;
}
.uk-navbar-left .uk-logo{
  flex:0 0 66.6667%;
  max-width:66.6667%;
}
.uk-logo{ width:100%; }
.uk-logo img{
  display:block;
  width:100%;
  height:auto;
}

#module-114{
  flex:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding-left:0;
}
#module-114 h2{
  margin:0;
  font-size:1.5rem;
  white-space:nowrap;
  align-self:flex-end;
}

/* ===========================
   Toolbar
=========================== */
.tm-toolbar{
  position:fixed;
  inset:0 0 auto 0; /* top:0; left:0; right:0 */
  width:100%;
  z-index:999;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s var(--ease), padding var(--t-fast) var(--ease);
}
.tm-toolbar[aria-hidden="true"]{
  max-height:0 !important;
  overflow:hidden !important;
  pointer-events:none;
  visibility:hidden !important;
}
.tm-toolbar[aria-hidden="false"]{ pointer-events:auto; }
.tm-toolbar.open{ padding:10px 0; }

.tm-toolbar .uk-subnav > * > :first-child{
  font-family:"Review Web";
  font-weight:500;
  font-size:clamp(1.25rem,3vw,3.125rem);
}
.tm-toolbar a.active{
  font-weight:700;
  text-decoration:underline;
}

.tm-toolbar-default .uk-subnav>*>a:hover {
  color: #fff
}

/* ===========================
   Navigation / Nummernrotation (global)
=========================== */
.uk-subnav.uk-dropnav li a{
  display:flex;
  align-items:center;
  font-size:clamp(1.25rem,3vw,3.125rem);
}

.rotated-number{
  display:inline-block;
  font-size:.55em;
  transform:rotate(-90deg) translateY(.1em);
  transform-origin:center;
  margin-right:.2em;
}
.rotated-number.eins{ font-size:.69em; }

/* ===========================
   SERVICE-ACCORDION: Zahl & Content (NEU)
=========================== */
#serviceaccordion .uk-accordion-title .rotated-number{
  display:inline-flex;                        /* bessere vertikale Zentrierung */
  align-items:center;
  justify-content:center;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings:"tnum" 1;
  font-feature-settings:"tnum" 1;
  width: var(--rot-num-width);                /* feste Breite (per JS gemessen) */
  margin-right:.45em;                         /* konsistenter Abstand zur Headline */
  font-size:.65em;
  transform: rotate(-90deg) translate(0.2em, 0.2em); /* sanfter, nicht zu hoch */
  transform-origin:center;
}

/* Content bündig zur Headline (nach der Zahl) – Einrückung NUR per CSS */
#serviceaccordion .uk-accordion-content{
  padding-block-start:0 !important;
  padding-inline: 0 0 !important;
  /* ALT: padding-left: calc(var(--rot-num-width) + var(--service-content-gap)) !important; */
  padding-left: calc(var(--service-title-offset, var(--rot-num-width)) + var(--service-content-gap)) !important;
  position:relative;
  z-index:2;
}

#serviceaccordion .uk-open{ background:var(--c-white); }
.uk-open .uk-accordion-title .rotated-number{ color:var(--c-black) !important; }

#serviceaccordion .el-item[data-opening="true"] [uk-grid] > div:nth-child(2){
  transition: none !important;
}


/* Platz für die Titelhöhe reservieren + Overlap ohne Reflow */
#serviceaccordion [uk-grid]{
  --title-h: 0px;                 /* wird per JS gesetzt */
  padding-top: var(--title-h);    /* reserviert Raum für den overlap */
  position: relative;
}

#serviceaccordion [uk-grid] > div:nth-child(2){
  position: relative;
  z-index: 10;
  will-change: transform;
  transform: translateY(calc(-1 * (var(--title-h) + var(--title-overlap-tweak, 0px))));
  transition: transform .3s ease; /* smooth bei Resizes etc. */
}







/* ===========================
   Accordion Titel / Inhalte
=========================== */
#tm-main .uk-accordion-title{
  border-inline:0 !important; /* ersetzt border-left/right */
  position:relative;
  z-index:4;
      padding-left: 20px !important;
}
#tm-main .uk-accordion-title .el-accordion-title{
  font-weight:500;
  font-size:clamp(2rem,4.9vw,10rem) !important;
  line-height:1.05; /* leichte Baseline-Feinheit */
}

.uk-accordion .uk-open { background:#fff; }
.uk-accordion .uk-open .uk-accordion-title{
  background:transparent !important;
  border:none !important;
}
.uk-accordion .uk-open .uk-accordion-title .el-accordion-title{
  color:var(--c-black) !important;
}

#tm-main :is(#faqaccordion,#jobaccordion) h3{
  font-size:clamp(1.6rem,2.6vw,5rem) !important;
}

#serviceaccordion .uk-open .uk-accordion-title .el-accordion-title { 
  background-color:transparent;
  text-shadow:var(--c-white) 3px 3px 1px;
}

/* ===========================
   Section-Titel (Fade only)
=========================== */
#section-title{
  font-size:clamp(1.25rem,5vw,10.125rem) !important;
  text-transform:uppercase;
  font-weight:700;
  transition:opacity var(--t-fast) var(--ease);
  opacity:1;
  transform:none !important; /* evtl. geerbte Transforms neutralisieren */
  will-change:opacity;
}
#section-title.title-deferred,
#section-title.animating{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  #section-title{ transition:none; }
}

/* ===========================
   Typografie
=========================== */
h1,.uk-h1{ font-size:clamp(2.5rem,4.9vw,10rem) !important; }
h2,.uk-h2{ font-size:clamp(1.6rem,2.6vw,5rem) !important; }

p,
.uk-subnav > * > :first-child, .convertforms .cf-control-label .cf-label{
  font-size:clamp(1rem,1.45vw,1.8rem);
}
.uk-text-large p{
  font-size:clamp(2rem,3.125vw,2.5rem);
  font-family:"Review Web";
}

p,
.uk-subnav > * > :first-child, .convertforms .cf-control-label .cf-label{ font-size: clamp(0.8rem,1.45vw,1.8rem) }
h1,.uk-h1 { font-size: clamp(1.6rem,4.9vw,10rem) !important }
h2,.uk-h2{ font-size: clamp(1.2rem,2.6vw,5rem) !important; }


/* ===========================
   Burger Icon
=========================== */
.uk-navbar-primary .uk-navbar-toggle-icon > svg{ width:4rem; }
.uk-navbar-toggle-icon svg [class*="line-"]{
  fill:var(--c-white);
  height:1px;
}

/* ===========================
   Buttons & Forms
=========================== */
#tm-main .convertforms .cf-btn{ border:2px solid var(--c-white); }
section:last-of-type{ padding-bottom:150px; }
.convertforms .cf-control-input .cf-btn:hover {
  opacity: 1;
  color: #000;
  background: #fff;
}

/* Accordion mit drehender Zahl (anderes Modul – bleibt unangetastet) */
.custom_acc_6887b50515a29 .el-accordion-title::before{
  content:attr(data-number);
  display:inline-block;
  transform:rotate(-90deg);
  transform-origin:center;
  height:1em;
  line-height:1;
  margin-right:.5em;
  font-weight:700;
  font-size:1em;
  transition:transform .3s var(--ease);
}
.custom_acc_6887b50515a29 .uk-accordion-title[aria-expanded="true"]::before{
  transform:rotate(90deg);
}

/* ===========================
   Fokus / A11y
=========================== */
:focus-visible{
  outline:3px solid var(--c-focus);
  outline-offset:3px;
  border-radius:4px;
  transition:outline var(--t-fast) var(--ease);
}
.tm-toolbar :is(a,button):focus-visible{ outline-offset:4px; }

:focus:not(:focus-visible),
.tm-toolbar :is(a,button):focus:not(:focus-visible){
  outline:none;
  box-shadow:none;
}

/* Fallback ältere Browser */
:is(input,textarea,select):focus{
  /* outline:3px solid var(--c-focus) !important; */
  outline-offset:3px;
  border-radius:4px;
}

/* Ungültige Felder */
:is(input,textarea):invalid{
  /* border:2px solid var(--c-error); */
  background-color:#fff5f5;
}
:is(input,textarea):invalid:focus{ outline-color:var(--c-error); }

/* ===========================
   Menü mit Zahl & Label
=========================== */
.uk-subnav a{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  position:relative;
}
.menu-number{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  line-height:1;
  height:1em;
  width:1em;
  transform:rotate(-90deg) scale(.6);
  transform-origin:center;
  transition:transform .4s var(--ease);
}
.uk-subnav a:hover .menu-number{ transform:rotate(0) scale(1); }
.menu-label{ display:inline-block; white-space:nowrap; }
.uk-subnav > *{ padding-right:5em; padding-left:0; }

/* ===========================
   FAQ Layering
=========================== */
#faqaccordion {
  margin-left: -40px;
}

#faqaccordion .el-item {
padding-left: 40px;
}

#faqaccordion .uk-open{
  position:relative;
  z-index:2;
  margin-right: -30px;
  padding-right: 30px;
}
#faqaccordion .uk-open::before,
#faqaccordion .uk-open::after{
  /* content:"";
  position:absolute;
  inset:0 auto 0 auto; /* nur Höhe übernehmen */
  top:0;
  height:100%;
  background:var(--c-white);
  display:block; */
}
#faqaccordion .uk-open::before{
  /* left:-50px;
  width:100px;
  z-index:1;
  background: none; */
}
#faqaccordion .uk-open::after{
  /* right:-50px;
  width:100px; */
}

/* ===========================
   Media Queries
=========================== */
@media (max-width:960px){
  .tm-header{ border-top-width:10px; }

    nav .uk-subnav {
    display: block;
  }

     nav .uk-subnav li {
   padding-bottom: 15px;
  }

  nav .uk-flex-middle {
    justify-content: center;
  }

  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
    min-height: initial
  }
    h1, .uk-h1 {
    line-height: 1.05;
  }

#serviceaccordion [uk-grid] > div:nth-child(2) {
  padding-left: 0
}

#serviceaccordion .uk-slider-container{
  margin-left: -50px;
  margin-right: -50px
}


}

@media(max-width: 640px){
  #tm-main .uk-accordion-title{
  
      padding-left: 10px !important;
}
}

@media (max-width:600px){
  .uk-navbar-left .uk-logo{ flex:0 0 60%; }
  .uk-navbar-primary .uk-navbar-toggle-icon > svg{ width:2rem; }
  .tm-toolbar,
  .tm-toolbar.open{ padding:20px; }


}
@media (min-width:1024px){
  .tm-toolbar{ max-height:none; overflow:visible; }
}
@media (min-width:961px){
  #serviceaccordion .tm-grid-expand > div:last-child{
    position:relative;
    z-index:10;
  }


}