/* =========================================================
   A+ Pilot — Ultimate Design shared theme
   Loaded AFTER styles.min.css (and after the homepage's
   inline #ud-styles) on every page, so these rules win for
   equal specificity. Reworks every page into the Ultimate
   Design visual language + full mobile responsiveness.
   ========================================================= */

:root{ --ud-ease:cubic-bezier(.22,.61,.36,1); }

/* clip horizontal overflow WITHOUT breaking position:sticky.
   overflow:hidden on html/body makes them scroll containers, which breaks
   sticky (the pinned services + sticky-stack process). overflow-x:clip does
   not create a scroll container, so sticky keeps working. */
html{overflow-x:clip}
body{overflow-x:clip}  /* override styles.min.css body{overflow-x:hidden} which broke sticky */

/* long German compound words must wrap, never clip */
h1,h2,h3,.lead{overflow-wrap:break-word}

/* ---------- Dark cinematic page hero ---------- */
.page-hero{
  position:relative;
  background:radial-gradient(ellipse 130% 100% at 72% -10%, #25422F 0%, #1B3022 55%, #15261B 100%);
  color:#FDFCF9;
  overflow:hidden;
  padding:clamp(88px,12vw,148px) 0 clamp(56px,8vw,92px);
}
.page-hero::before{ /* dot grid */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.05) 1px,transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 28%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 85% at 50% 28%,#000 30%,transparent 80%);
}
.page-hero::after{ /* gold glow */
  content:"";position:absolute;top:-170px;right:-130px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.26),transparent 65%);filter:blur(22px);z-index:0;pointer-events:none;
}
.page-hero > .container{position:relative;z-index:1}
.page-hero h1{color:#fff}
.page-hero .lead{color:rgba(253,252,249,.82)}
.page-hero .eyebrow{background:transparent;color:var(--color-gold);padding:0;border-radius:0;letter-spacing:.12em;font-weight:700}
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb li{color:rgba(253,252,249,.6)}
.page-hero .breadcrumb a:hover{color:#fff}
.page-hero .breadcrumb [aria-current="page"]{color:rgba(253,252,249,.85)}
.page-hero-meta span{background:rgba(255,255,255,.06);color:rgba(253,252,249,.9);border-color:rgba(255,255,255,.16)}
.page-hero-meta span .material-symbols-outlined{color:var(--color-gold)}
.page-hero .btn-ghost{color:#FDFCF9;border-color:rgba(253,252,249,.35);background:transparent}
.page-hero .btn-ghost:hover{background:rgba(253,252,249,.1);border-color:#FDFCF9;color:#fff}
.page-hero .hero-image{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.page-hero .hero-card{box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
/* contact icon links on dark hero (kontakt page) */
.page-hero .contact-icon-link{border-color:rgba(253,252,249,.22);color:#FDFCF9}
.page-hero .contact-icon-link:hover{border-color:var(--color-gold);background:rgba(255,255,255,.05)}

/* fix: homepage hero shares .wrap+.hero-in; restore horizontal padding */
.ud .hero-in{padding:120px 24px 90px}

/* ---------- Transparent header over a dark hero, solid on scroll ---------- */
.site-header{transition:background .5s var(--ud-ease),border-color .5s var(--ud-ease),box-shadow .5s var(--ud-ease),backdrop-filter .5s var(--ud-ease)}
.ud-trans-header .site-header .brand,
.ud-trans-header .site-header .primary-nav a,
.ud-trans-header .site-header .phone-link,
.ud-trans-header .site-header .menu-toggle,
.ud-trans-header .site-header .nav-actions a:not(.btn){transition:color .5s var(--ud-ease)}
/* pull the hero up so it sits behind the (sticky) header; its own top padding clears the bar */
.ud-trans-header .ud .hero,
.ud-trans-header .page-hero,
.ud-trans-header .guide-hero{margin-top:calc(-1 * var(--ud-header-h, 74px))}
.ud-trans-header .page-hero,
.ud-trans-header .guide-hero{padding-top:calc(var(--ud-header-h, 74px) + clamp(40px,7vw,86px))}
/* transparent state (at the top, over the dark hero) */
.ud-trans-header:not(.ud-header-solid) .site-header{background:transparent;border-bottom-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.ud-trans-header:not(.ud-header-solid) .site-header .brand,
.ud-trans-header:not(.ud-header-solid) .site-header .primary-nav a,
.ud-trans-header:not(.ud-header-solid) .site-header .phone-link,
.ud-trans-header:not(.ud-header-solid) .site-header .menu-toggle,
.ud-trans-header:not(.ud-header-solid) .site-header .nav-actions a:not(.btn){color:#FDFCF9}
.ud-trans-header:not(.ud-header-solid) .site-header .brand small{color:rgba(253,252,249,.72)}
.ud-trans-header:not(.ud-header-solid) .site-header .phone-link:hover{background:rgba(255,255,255,.08)}
/* solid state (after scrolling): the normal cream bar */
.ud-header-solid .site-header{background:rgba(253,252,249,.92);border-bottom-color:var(--color-border)}

/* FIX: dropdown panels are a light cream sheet — keep their links dark/readable
   even while the header itself is in transparent (light-text) mode */
.ud-trans-header .site-header .nav-dropdown a{color:var(--color-primary)!important}
.ud-trans-header .site-header .nav-dropdown a:hover,
.ud-trans-header .site-header .nav-dropdown a[aria-current="page"]{color:var(--color-gold)!important}

/* FIX: contact icon buttons default to a WHITE box (var(--color-surface)); on a
   transparent header over the dark hero the white icon vanished. Make the box
   translucent so the light icon is visible. */
.ud-trans-header:not(.ud-header-solid) .site-header .contact-icon-link{
  background:rgba(255,255,255,.08);border-color:rgba(253,252,249,.28);color:#FDFCF9
}
.ud-trans-header:not(.ud-header-solid) .site-header .contact-icon-link:hover{
  background:rgba(255,255,255,.16);border-color:#FDFCF9
}
/* same fix for the contact icon row inside a dark page hero (e.g. kontakt) */
.page-hero .hero-contact-icons .contact-icon-link{
  background:rgba(255,255,255,.07);border-color:rgba(253,252,249,.24);color:#FDFCF9;box-shadow:none
}
.page-hero .hero-contact-icons .contact-icon-link:hover{
  background:rgba(255,255,255,.16);border-color:var(--color-gold)
}

/* ---------- Headings to brand serif ---------- */
.section-header h2{letter-spacing:-0.02em}

/* ---------- Cards ---------- */
.card{
  border-radius:20px;border:1px solid var(--color-border);background:var(--color-surface);
  transition:transform .35s var(--ud-ease),box-shadow .35s var(--ud-ease),border-color .35s var(--ud-ease);
}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 55px -32px rgba(27,48,34,.4);border-color:var(--color-border-strong)}
.card-icon{
  background:var(--color-primary-soft);color:var(--color-primary);
  border-radius:14px;transition:background .35s var(--ud-ease),color .35s var(--ud-ease)
}
.card:hover .card-icon{background:var(--color-gold-soft);color:var(--color-gold)}
.card-link{color:var(--color-gold);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.card-link .material-symbols-outlined{transition:transform .25s var(--ud-ease)}
.card-link:hover .material-symbols-outlined{transform:translateX(4px)}

/* ---------- Region cards ---------- */
.region-card{
  border-radius:16px;border:1px solid var(--color-border);background:var(--color-surface);
  transition:transform .3s var(--ud-ease),box-shadow .3s var(--ud-ease),border-color .3s var(--ud-ease)
}
.region-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -28px rgba(27,48,34,.38);border-color:var(--color-gold)}
.region-card-arrow,.region-card .region-card-arrow{color:var(--color-gold);transition:transform .25s var(--ud-ease)}
.region-card:hover .region-card-arrow{transform:translateX(4px)}

/* ---------- CTA strip -> dark cinematic band ---------- */
.cta-strip{
  position:relative;overflow:hidden;border-radius:26px;
  background:linear-gradient(120deg,#1B3022,#15261B);
  color:#FDFCF9;box-shadow:0 30px 70px -40px rgba(15,31,21,.7)
}
.cta-strip::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.06) 1px,transparent 0);background-size:30px 30px
}
.cta-strip::after{
  content:"";position:absolute;top:-120px;right:-90px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.28),transparent 65%);filter:blur(20px);z-index:0;pointer-events:none
}
.cta-strip > *{position:relative;z-index:1}
.cta-strip h2{color:#fff}
.cta-strip p{color:rgba(253,252,249,.82)}

/* ---------- Callout ---------- */
.callout{border-radius:14px}

/* ---------- Steps ---------- */
.step{border-radius:18px;border:1px solid var(--color-border);background:var(--color-surface);transition:box-shadow .3s var(--ud-ease),transform .3s var(--ud-ease)}
.step:hover{box-shadow:0 20px 50px -32px rgba(27,48,34,.4)}
.step-meta{color:var(--color-gold);font-weight:600}

/* ---------- Compare table ---------- */
.compare-table{border-collapse:separate;border-spacing:0;width:100%;border:1px solid var(--color-border);border-radius:16px;overflow:hidden}
.compare-table thead th{background:var(--color-primary);color:var(--color-on-primary);font-weight:600;text-align:left}
.compare-table th,.compare-table td{padding:.85rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:top}
.compare-table tbody tr:nth-child(even){background:var(--color-surface-soft)}
.compare-table tbody tr:last-child td{border-bottom:0}

/* ---------- Pricing cards ---------- */
.pricing-card{
  border-radius:20px;border:1px solid var(--color-border);background:var(--color-surface);
  transition:transform .35s var(--ud-ease),box-shadow .35s var(--ud-ease),border-color .35s var(--ud-ease)
}
.pricing-card:hover{transform:translateY(-5px);box-shadow:0 26px 60px -34px rgba(27,48,34,.42);border-color:var(--color-gold)}
.pricing-price{color:var(--color-gold);font-family:var(--font-serif,"Newsreader",Georgia,serif);font-weight:600}

/* ---------- Table of contents ---------- */
.toc{border:1px solid var(--color-border);background:var(--color-surface-soft);border-radius:16px;padding:1.25rem 1.5rem}
.toc-title{color:var(--color-gold);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:700}
.toc a:hover{color:var(--color-gold)}

/* ---------- Article meta ---------- */
.article-meta{color:var(--color-text-soft)}
.article-meta .material-symbols-outlined{color:var(--color-gold)}

/* ---------- News entries ---------- */
.news-entry{border:1px solid var(--color-border);background:var(--color-surface);border-radius:18px;padding:clamp(1.25rem,3vw,2rem);transition:transform .3s var(--ud-ease),box-shadow .3s var(--ud-ease)}
.news-entry:hover{transform:translateY(-3px);box-shadow:0 20px 50px -32px rgba(27,48,34,.4)}
.news-cat{background:var(--color-gold-soft);color:var(--color-gold-hover);border-radius:100px;font-weight:600}

/* ---------- FAQ accordion polish ---------- */
.faq-item{border:1px solid var(--color-border);border-radius:14px;background:var(--color-surface);margin-bottom:.85rem;overflow:hidden;transition:border-color .25s var(--ud-ease),box-shadow .25s var(--ud-ease)}
.faq-item:hover{border-color:var(--color-border-strong)}
.faq-question{font-weight:600;color:var(--color-primary)}
.faq-toggle{color:var(--color-gold);transition:transform .25s var(--ud-ease)}
.faq-question[aria-expanded="true"] .faq-toggle{transform:rotate(45deg)}

/* =========================================================
   Ratgeber index (guide-*) — bring into the Ultimate Design.
   The .guide-* classes are styled only in styles.css (legacy
   light look); these rules re-skin them to match the rest of
   the site. HTML/JS contract (data-guide-* + [hidden]) stays.
   ========================================================= */
/* --- dark cinematic guide hero (mirrors .page-hero) --- */
.guide-hero{
  position:relative;overflow:hidden;color:#FDFCF9;
  background:radial-gradient(ellipse 130% 100% at 72% -10%, #25422F 0%, #1B3022 55%, #15261B 100%);
}
.guide-hero::before{ /* dot grid */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.05) 1px,transparent 0);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 28%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 90% 85% at 50% 28%,#000 30%,transparent 80%);
}
.guide-hero::after{ /* gold glow */
  content:"";position:absolute;top:-170px;right:-130px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.26),transparent 65%);filter:blur(22px);z-index:0;pointer-events:none;
}
.guide-hero .container{position:relative;z-index:1}
.guide-hero h1{color:#fff}
.guide-hero .lead{color:rgba(253,252,249,.82)}
.guide-hero .eyebrow{background:transparent;color:var(--color-gold);padding:0;border-radius:0;letter-spacing:.12em;font-weight:700}
.guide-hero .breadcrumb,
.guide-hero .breadcrumb a,
.guide-hero .breadcrumb li{color:rgba(253,252,249,.6)}
.guide-hero .breadcrumb a:hover{color:#fff}
.guide-hero .breadcrumb [aria-current="page"]{color:rgba(253,252,249,.85)}
/* search box: bright field that pops on the dark hero */
.guide-hero .guide-search input{
  background:rgba(253,252,249,.97);border-color:transparent;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6)
}
.guide-hero .guide-search input:focus{
  border-color:var(--color-gold);box-shadow:0 0 0 4px rgba(217,119,6,.3)
}

/* --- segment cards: align with the .card skin --- */
.guide-segment-card{border-radius:20px;border-color:var(--color-border)}
.guide-segment-card:hover{transform:translateY(-5px);box-shadow:0 24px 55px -32px rgba(27,48,34,.4);border-color:var(--color-border-strong)}
.guide-card-link .material-symbols-outlined{transition:transform .25s var(--ud-ease)}
.guide-card-link:hover .material-symbols-outlined{transform:translateX(4px)}

/* --- support block: dark cta band (mirrors .cta-strip) --- */
.guide-support-section{background:var(--color-bg);border-top:0}
.guide-support{
  position:relative;overflow:hidden;border-radius:26px;color:#FDFCF9;
  background:linear-gradient(120deg,#1B3022,#15261B);
  box-shadow:0 30px 70px -40px rgba(15,31,21,.7);
  padding:clamp(1.75rem,4vw,3rem);
}
.guide-support::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 2px 2px,rgba(255,255,255,.06) 1px,transparent 0);background-size:30px 30px
}
.guide-support::after{
  content:"";position:absolute;top:-120px;right:-90px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,6,.28),transparent 65%);filter:blur(20px);z-index:0;pointer-events:none
}
.guide-support > *{position:relative;z-index:1}
.guide-support h2{color:#fff}
.guide-support p{color:rgba(253,252,249,.82)}
.guide-support .eyebrow{color:var(--color-gold)}
.guide-support-photo{background:rgba(255,255,255,.06)}
.guide-support .btn-ghost{color:#FDFCF9;border-color:rgba(253,252,249,.35);background:transparent}
.guide-support .btn-ghost:hover{background:rgba(253,252,249,.1);border-color:#FDFCF9;color:#fff}

/* ---------- Buttons polish ---------- */
.btn{border-radius:12px;transition:background .2s var(--ud-ease),color .2s var(--ud-ease),transform .2s var(--ud-ease),box-shadow .2s var(--ud-ease)}
.btn-primary:hover{transform:translateY(-2px)}

/* ---------- Site-wide scroll reveal (JS-gated, fail-safe) ---------- */
.ud-theme-js .ud-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ud-ease),transform .7s var(--ud-ease);
  will-change:opacity,transform
}
.ud-theme-js .ud-reveal.in{opacity:1;transform:none}

/* =========================================================
   CUSTOM CURSOR FOLLOWER
   ========================================================= */
.ud-has-cursor,.ud-has-cursor *{cursor:none!important}
#ud-cdot,#ud-cring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:99999;opacity:0;will-change:transform}
#ud-cdot{width:7px;height:7px;background:var(--color-gold,#D97706)}
#ud-cring{width:36px;height:36px;border:1.5px solid rgba(217,119,6,.5);transition:background .15s,border-color .15s}
#ud-cring.hover{background:rgba(217,119,6,.1);border-color:var(--color-gold,#D97706)}

/* =========================================================
   MOBILE / RESPONSIVE
   ========================================================= */
@media(max-width:900px){
  .card-grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .page-hero .hero-grid{grid-template-columns:1fr}
  .page-hero{padding:84px 0 56px}
  .card-grid.cols-3,.card-grid.cols-2{grid-template-columns:1fr}
  .region-grid{grid-template-columns:1fr}
  .cta-strip{flex-direction:column;align-items:flex-start;gap:1.25rem;text-align:left}
  .flex-wrap-cta{width:100%}
  /* homepage showcase hero on mobile */
  .ud .hero-in{padding:104px 24px 72px}
  .ud .hero h1{font-size:clamp(2.3rem,11vw,3.2rem);max-width:100%;hyphens:auto}
  .ud .hero-sub{gap:26px}
  .ud .hero-sub p{max-width:100%}
  .ud .hero-actions{width:100%}
  .ud .hero-badges{margin-bottom:26px}
}
@media(max-width:640px){
  .card-grid,.card-grid.cols-3,.card-grid.cols-4,.card-grid.cols-2{grid-template-columns:1fr}
  .hero-ctas .btn,.cta-strip .btn,.flex-wrap-cta .btn{width:100%;justify-content:center}
  .ud .hero-actions .btn{width:100%;justify-content:center}
  .ud .final .actions .btn{width:100%;justify-content:center}
  .ud .cgrid{grid-template-columns:1fr 1fr;gap:24px 18px}
  .ud .scard{padding:30px 22px}
  /* horizontal scroll for wide tables instead of clipping */
  .compare-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media(prefers-reduced-motion:reduce){
  .ud-theme-js .ud-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .page-hero::after,.cta-strip::after{animation:none}
  .card,.pricing-card,.region-card,.step,.news-entry,.btn{transition:none!important}
}


/* =========================================================
   Lighter, partial mobile drawer (burger menu)
   Was a full-screen opaque cover; now a right-side panel
   that only partially overlays the page (dimmed scrim).
   ========================================================= */
.mobile-drawer{
  left:auto;right:0;top:0;bottom:0;
  width:min(84vw,360px);max-width:360px;
  background:rgba(253,252,249,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-left:1px solid var(--color-border);
  border-top-left-radius:22px;border-bottom-left-radius:22px;
  box-shadow:-26px 0 64px -30px rgba(15,31,21,.5), 0 0 0 100vmax rgba(15,31,21,.38);
}
.mobile-drawer.open{animation:udDrawerIn .32s cubic-bezier(.22,.61,.36,1) both}
@keyframes udDrawerIn{from{transform:translateX(103%)}to{transform:translateX(0)}}
/* slightly tighter inner padding so the narrower panel feels lighter */
.mobile-drawer{padding-left:1.1rem;padding-right:1.1rem}
.mobile-drawer-actions{max-width:none}
@media(prefers-reduced-motion:reduce){.mobile-drawer.open{animation:none}}