/**
 * theme.css — Gestaltung jenseits von theme.json.
 * Farben und Abstände kommen als CSS-Variablen aus theme.json.
 */

/* --- Grundgerüst --- */
.tpp-skip{
  position:absolute; left:-9999px; top:0; z-index:100000;
  background:var(--wp--preset--color--primary); color:#fff;
  padding:10px 18px; border-radius:0 0 4px 0;
}
.tpp-skip:focus{ left:0; }

:where(a:focus-visible),:where(button:focus-visible),
:where(input:focus-visible),:where(select:focus-visible),:where(textarea:focus-visible){
  outline:2px solid var(--wp--preset--color--primary);
  outline-offset:2px;
}

/* --- Kopfbereich: contained, sticky, weiß (onepress_header_*) --- */
.tpp-header{
  position:sticky; top:0; z-index:900;
  background:#fff;
  border-bottom:1px solid var(--wp--preset--color--line);
  padding-top:0 !important; padding-bottom:0 !important;
}
/* Der blaue Block des aktiven Punktes geht im Original über die volle
   Kopfhöhe — dafür muss die Zeile strecken statt zentrieren. */
.tpp-header__row{ align-items:stretch !important; min-height:96px; gap:16px; }
.tpp-header__logo{ display:flex; align-items:center; }
.tpp-header__logo img{ height:auto; max-height:78px; width:auto; display:block; }

/* WordPress schiebt zwischen <nav> und <ul> zwei responsive-container-Divs.
   Damit der blaue Block über die volle Kopfhöhe geht, muss jedes Glied der
   Kette strecken — sonst bleibt das <a> 33 px hoch und der Block wird ein
   Kästchen in der Mitte. Nur ab Tablet: darunter ist der Container ein Dialog. */
@media (min-width:783px){
  .tpp-nav{ align-self:stretch; align-items:stretch !important; }
  /* __responsive-close gehört zwingend dazu — dort riss die Kette. */
  .tpp-nav .wp-block-navigation__responsive-container,
  .tpp-nav .wp-block-navigation__responsive-close,
  .tpp-nav .wp-block-navigation__responsive-dialog,
  .tpp-nav .wp-block-navigation__responsive-container-content{
    height:100%; align-items:stretch;
  }
  .tpp-nav .wp-block-navigation__container{
    height:100%; align-items:stretch; gap:0;
  }
  .tpp-nav .wp-block-navigation__container > .wp-block-navigation-item{
    align-items:stretch; display:flex;
  }
  .tpp-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
  .tpp-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle{
    height:100%;
  }
}

.tpp-nav .wp-block-navigation-item__content{
  display:flex; align-items:center;
  padding:0 18px;
  font-size:20px;                                   /* onepress_typo_menu */
  font-weight:700;
  color:var(--wp--preset--color--ink);
  text-decoration:none;
  transition:background .12s, color .12s;
}
.tpp-nav .wp-block-navigation-item__content:hover,
.tpp-nav .wp-block-navigation-item__content:focus-visible,
.tpp-nav .current-menu-item > .wp-block-navigation-item__content,
.tpp-nav .current-menu-ancestor > .wp-block-navigation-item__content{
  background:var(--wp--preset--color--primary);     /* onepress_menu_hover_bg_color */
  color:#fff;                                       /* onepress_menu_hover_color */
}
.tpp-nav .wp-block-navigation__submenu-icon{ margin-left:4px; }

/* Untermenü */
.tpp-nav .wp-block-navigation__submenu-container{
  border:1px solid var(--wp--preset--color--line);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.25);
  min-width:240px;
}
.tpp-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:11px 16px; font-size:16px; font-weight:600;
}

@media (max-width:900px){
  .tpp-nav .wp-block-navigation-item__content{ font-size:17px; padding:0 12px; }
}
@media (max-width:782px){
  .tpp-header__row{ min-height:68px; align-items:center !important; }
  /* 220px Logo auf einem 390px-Bildschirm sind 56 % der Breite. */
  .tpp-header__logo img{ max-height:52px; }
  .tpp-nav .wp-block-navigation__responsive-container-open{ color:var(--wp--preset--color--ink); }
  .tpp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    padding:10px 0; color:var(--wp--preset--color--ink); background:none;
  }
}

/* --- Hero (onepress_hcl1_*) --- */
.tpp-hero{
  position:relative;
  padding-block:clamp(64px,11vw,140px);
  background-size:cover; background-position:center;
  color:#fff;
}
.tpp-hero::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.42);
}
.tpp-hero > *{ position:relative; }
.tpp-hero h1{ color:#fff; }

/* Der rotierende Text aus onepress_hcl1_largetext.
   Original: flipInX, 2500 ms. */
.js-rotating{ display:inline-block; color:#fff; }
.js-rotating > span{
  display:inline-block;
  animation:tpp-flip .6s ease both;
}
@keyframes tpp-flip{
  from{ transform:perspective(400px) rotateX(90deg); opacity:0; }
  to  { transform:perspective(400px) rotateX(0);     opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .js-rotating > span{ animation:none; }
}

/* --- Sektionen --- */
.tpp-section{ padding-block:clamp(40px,6vw,80px); }
.tpp-section--alt{ background:var(--wp--preset--color--surface); }
.tpp-section__head{ text-align:center; margin-bottom:clamp(24px,4vw,48px); }
.tpp-section__sub{
  color:var(--wp--preset--color--primary);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:.8125rem; margin:0 0 6px;
}

/* --- Die 4 Schritte (onepress_features_boxes) --- */
.tpp-step{ text-align:center; }
.tpp-step__icon{
  font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;
  width:64px; height:64px; margin:0 auto 14px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--wp--preset--color--primary); color:#fff;
  font-size:26px;
}
.tpp-step h3{ margin:0 0 8px; }
.tpp-step hr{ border:0; border-top:1px solid var(--wp--preset--color--line); margin:12px 0; }

/* --- Marken (onepress_clients, layout 6) --- */
.tpp-brands{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  align-items:center;
}
.tpp-brands img{
  max-height:70px; width:auto; margin:0 auto; display:block;
  filter:grayscale(1); opacity:.75; transition:.2s;
}
.tpp-brands img:hover{ filter:none; opacity:1; }

/* --- Counter (onepress_counter_boxes) --- */
.tpp-counter{ text-align:center; }
.tpp-counter__num{
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem); font-weight:700; line-height:1;
  color:var(--wp--preset--color--primary);
}
.tpp-counter__label{ color:var(--wp--preset--color--muted); margin-top:6px; }

/* --- CTA (onepress_cta_title) --- */
.tpp-cta{
  background:var(--wp--preset--color--primary); color:#fff;
  text-align:center; padding-block:clamp(32px,5vw,56px);
}
.tpp-cta i{ display:block; font-style:italic; opacity:.9; margin-bottom:6px; }
/* Im Original stand hier ein <h1> — einer von drei auf der Startseite.
   Optisch identisch, aber ohne die Gliederung zu zerschießen. */
.tpp-cta__phone{
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem); font-weight:700; margin:0;
}
.tpp-cta__phone a{ color:#fff; text-decoration:none; }
.tpp-cta__phone a:hover{ text-decoration:underline; }

/* --- FAQ: ersetzt Ultimate FAQ. <details> kann das nativ. --- */
.tpp-faq{ border-top:1px solid var(--wp--preset--color--line); }
.tpp-faq details{ border-bottom:1px solid var(--wp--preset--color--line); }
.tpp-faq summary{
  cursor:pointer; padding:16px 40px 16px 0; position:relative;
  font-weight:600; list-style:none;
}
.tpp-faq summary::-webkit-details-marker{ display:none; }
.tpp-faq summary::after{
  content:"+"; position:absolute; right:8px; top:14px;
  font-size:22px; font-weight:400; color:var(--wp--preset--color--primary);
  transition:transform .2s;
}
.tpp-faq details[open] summary::after{ transform:rotate(45deg); }
.tpp-faq details > div{ padding:0 0 18px; }

/* --- Feste Seitenknöpfe: ersetzt Sticky Side Buttons + q2w3-fixed-widget --- */
.tpp-side{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:800; display:flex; flex-direction:column; gap:2px;
}
.tpp-side a{
  background:var(--wp--preset--color--primary); color:#fff;
  padding:12px 14px; text-decoration:none; font-size:13px; font-weight:600;
  border-radius:4px 0 0 4px; writing-mode:vertical-rl;
}
.tpp-side a:hover{ background:var(--wp--preset--color--primary-dark); }
.tpp-side a.is-accent{ background:var(--wp--preset--color--accent); color:#1a1a1a; }
@media (max-width:782px){
  .tpp-side{
    top:auto; bottom:0; right:0; left:0; transform:none;
    flex-direction:row; gap:0;
  }
  .tpp-side a{
    flex:1; writing-mode:horizontal-tb; text-align:center; border-radius:0;
  }
}

/* --- Fußbereich --- */
.tpp-footer{
  background:var(--wp--preset--color--ink); color:#cfd6dd;
  padding-block:40px 24px; font-size:.9rem;
}
.tpp-footer a{ color:#fff; }
.tpp-footer__legal{ display:flex; flex-wrap:wrap; gap:6px 18px; }

/* --- Treppenlift Suche: der Einstieg in den Preisvergleich (Seite 758) --- */
.tpp-suche__icon{ text-align:center; color:var(--wp--preset--color--primary); margin-bottom:10px; }
.tpp-suche__frage{ font-size:clamp(1.05rem,.9rem + .6vw,1.4rem); font-weight:700; margin:0 0 32px; }

.tpp-suche__karten{
  display:grid; gap:20px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:760px){ .tpp-suche__karten{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

.tpp-suche__karte{
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  gap:10px; padding:20px 16px 16px;
  border:2px solid var(--wp--preset--color--primary);
  border-radius:4px; background:#fff;
  text-decoration:none;
  transition:background .15s, transform .15s, box-shadow .15s;
}
.tpp-suche__karte:hover,
.tpp-suche__karte:focus-visible{
  background:#f0f6fc;
  transform:translateY(-3px);
  box-shadow:0 10px 22px -10px rgba(30,115,190,.5);
}
.tpp-suche__karte img{ width:100%; max-width:260px; height:auto; display:block; }
.tpp-suche__karte span{
  /* kursiv wie im Original */
  font-style:italic; font-size:clamp(1.15rem,1rem + .5vw,1.5rem);
  color:var(--wp--preset--color--primary);
}