/* ============================================================
   cuecom — components.css
   ============================================================ */

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:.75rem 1.75rem;border-radius:var(--r-full);
  font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  border:none;cursor:pointer;white-space:nowrap;overflow:hidden;
  position:relative;
  transition:transform var(--t-base),box-shadow var(--t-base),
             background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--c-brand);outline-offset:3px}
.btn-primary{background:var(--c-brand);color:var(--c-text-inv);box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--c-brand-2);transform:translateY(-1px)}
.btn-secondary{background:transparent;border:1.5px solid var(--c-border-2);color:var(--c-text)}
.btn-secondary:hover{border-color:var(--c-brand);color:var(--c-brand);transform:translateY(-1px)}
.bg-paper .btn-secondary{border-color:var(--c-border-dark);color:var(--c-text-dark)}
.bg-paper .btn-secondary:hover{border-color:var(--c-brand-3);color:var(--c-brand-3)}
.btn-ghost{background:transparent;color:var(--c-text-2)}
.btn-ghost:hover{color:var(--c-text)}
.btn--lg{padding:1rem 2.25rem;font-size:var(--fs-base)}
.btn--sm{padding:.5rem 1.25rem;font-size:var(--fs-xs)}

.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.35);transform:scale(0);
  animation:ripple .6s var(--ease-out) forwards;
}
@keyframes ripple{to{transform:scale(3);opacity:0}}

/* ---- Toast ---- */
.toast{
  position:fixed;bottom:var(--sp-6);left:50%;
  transform:translateX(-50%) translateY(140%);
  background:var(--c-dark);color:var(--c-text);
  padding:var(--sp-3) var(--sp-8);border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  box-shadow:var(--shadow-lg);z-index:9999;
  transition:transform var(--t-base);
  white-space:nowrap;pointer-events:none;
}
.toast--success{border-left:3px solid var(--c-success)}
.toast--error{border-left:3px solid var(--c-error)}
.toast--visible{transform:translateX(-50%) translateY(0)}

/* ---- Client marquee strip ---- */
.client-strip{padding-block:var(--sp-10);border-block:1px solid var(--c-border)}
.client-strip .strip-label{
  text-align:center;font-size:var(--fs-xs);letter-spacing:var(--ls-wider);
  text-transform:uppercase;color:var(--c-text-3);margin-bottom:var(--sp-6);
  font-weight:var(--fw-semibold);
}
.client-strip .logo-item{
  font-family:var(--font-display);font-size:var(--fs-lg);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-snug);
  color:var(--c-text-3);padding-inline:var(--sp-10);
  white-space:nowrap;transition:color var(--t-fast);
}
.client-strip .logo-item:hover{color:var(--c-text-2)}
/* real client logos (SVG): original brand colors on the light strip —
   a grey-silhouette filter made emblem-style logos unreadable. */
.client-strip img.logo-img{
  height:34px;width:auto;align-self:center;
  margin-inline:var(--sp-10);flex-shrink:0;
  opacity:.92;transition:opacity var(--t-fast),transform var(--t-fast);
}
.client-strip img.logo-img:hover{opacity:1;transform:translateY(-1px)}

/* ---- Client logo grid (Referenzen, paper bg) ---- */
.client-logo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--sp-4);
}
.client-logo-grid .logo-tile{
  display:flex;align-items:center;justify-content:center;
  min-height:88px;padding:var(--sp-5);
  border:1px solid var(--c-border-dark);border-radius:var(--r-md);
  background:var(--c-surface);
}
.client-logo-grid .logo-tile img{
  max-height:38px;width:auto;max-width:100%;
  filter:grayscale(1) opacity(.65);
  transition:filter var(--t-base);
}
.client-logo-grid .logo-tile:hover img{filter:grayscale(0) opacity(1)}
.client-logo-grid .logo-tile--text{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-md);color:var(--c-text-dark-2);text-align:center;
}

/* ---- Numbered editorial service rows ---- */
.service-rows{display:flex;flex-direction:column}
.service-row{
  display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  padding-block:var(--sp-10);border-top:1px solid var(--c-border);
  position:relative;transition:background var(--t-base);
}
.service-row:last-child{border-bottom:1px solid var(--c-border)}
.service-row:hover{background:var(--c-bg-2)}
.service-row .num{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-4xl);font-weight:var(--fw-bold);
  color:var(--c-text);opacity:.14;line-height:1;
}
.service-row h3{font-size:var(--fs-2xl);margin-bottom:var(--sp-3)}
.service-row p{color:var(--c-text-2);max-width:56ch}
.service-row .row-link{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-4);font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-emph);
  transition:gap var(--t-fast);
}
.service-row .row-link:hover{gap:var(--sp-3)}
.service-row .row-media{
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;
  order:-1;
}
.service-row .row-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow);
}
.service-row:hover .row-media img{transform:scale(1.05)}
@media(min-width:768px){
  .service-row{grid-template-columns:110px 1fr 280px;align-items:center;column-gap:var(--sp-8)}
  .service-row .row-media{order:0}
}

/* ---- Stats band ---- */
.stats-band{
  display:grid;grid-template-columns:1fr;gap:var(--sp-8);
  text-align:left;
}
.stat .stat-num{
  font-family:var(--font-display);font-weight:var(--fw-xbold);
  font-size:var(--fs-4xl);letter-spacing:var(--ls-tight);
  color:var(--c-brand-3);line-height:1;
}
.stat .stat-label{
  margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--c-text-2);
}
.bg-paper .stat .stat-label{color:var(--c-text-dark-2)}
.bg-paper .stat .stat-num{color:var(--c-brand-3)}
@media(min-width:640px){.stats-band{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.stats-band{grid-template-columns:repeat(4,1fr)}}

/* ---- Cards (references, services detail) ---- */
.card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.card:hover{border-color:var(--c-border-2);box-shadow:var(--shadow-md)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)}
.card:hover .card__media img{transform:scale(1.05)}
.card__tag{
  position:absolute;top:var(--sp-4);left:var(--sp-4);z-index:2;
  background:rgba(12,10,9,.72);backdrop-filter:blur(8px);
  color:#F6F2EA;font-family:var(--font-display);
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);
}
.card__body{padding:var(--sp-6)}
.card__body h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.card__body p{font-size:var(--fs-sm);color:var(--c-text-2)}
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card-grid .card--featured{grid-column:1/-1}
.card--featured .card__media{aspect-ratio:21/9}

/* ---- Filter tabs ---- */
.filter-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-10)}
.filter-tabs button{
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-full);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--c-text-2);border:1.5px solid var(--c-border);
  transition:all var(--t-fast);
}
.filter-tabs button:hover{border-color:var(--c-brand);color:var(--c-brand)}
.filter-tabs button[aria-pressed="true"]{
  background:var(--c-brand);border-color:var(--c-brand);color:var(--c-text-inv);
}
.card.filtered-out{display:none}

/* ---- Process (sticky left column) ---- */
.process-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
.process-steps{display:flex;flex-direction:column}
.process-step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-6);
  padding-block:var(--sp-8);border-top:1px solid var(--c-border);
}
.process-step .p-num{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-2xl);font-weight:var(--fw-bold);
  color:var(--c-emph);line-height:1.2;min-width:2.4em;
}
.process-step h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-3)}
.process-step svg{width:26px;height:26px;color:var(--c-emph);flex-shrink:0}
.process-step p{font-size:var(--fs-base)}
@media(min-width:1024px){
  .process-grid{grid-template-columns:1fr 1.4fr}
  .process-intro{position:sticky;top:calc(var(--header-h) + var(--sp-8));align-self:start}
}

/* ---- Pull quote ---- */
.pull-quote{
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-3xl);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-snug);line-height:var(--lh-snug);
  max-width:24ch;
}
.pull-quote em{color:var(--c-brand-3);font-style:inherit}

/* ---- FAQ ---- */
.faq-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10)}
@media(min-width:1024px){
  .faq-grid{grid-template-columns:1fr 1.6fr}
  .faq-intro{position:sticky;top:calc(var(--header-h) + var(--sp-8));align-self:start}
}
.accordion-item{border-bottom:1px solid var(--c-border)}
.accordion-trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-4);padding-block:var(--sp-5);text-align:left;
  font-family:var(--font-display);font-size:var(--fs-md);
  font-weight:var(--fw-semibold);color:var(--c-text);
  transition:color var(--t-fast);
}
.accordion-trigger:hover{color:var(--c-emph)}
.accordion-trigger .acc-icon{
  flex-shrink:0;width:22px;height:22px;color:var(--c-brand-3);
  transition:transform var(--t-base);
}
.accordion-trigger[aria-expanded="true"] .acc-icon{transform:rotate(45deg)}
.accordion-body p{
  padding-bottom:var(--sp-5);color:var(--c-text-2);max-width:68ch;
}

/* ---- CTA band ---- */
.cta-band{
  position:relative;background:var(--c-brand);color:var(--c-text-inv);
  overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 10%,rgba(255,255,255,.28),transparent 55%),
             radial-gradient(ellipse at 85% 90%,rgba(12,10,9,.22),transparent 60%);
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{
  font-style:italic;font-size:var(--fs-4xl);
  max-width:18ch;color:var(--c-text-inv);
}
.cta-band p{margin-top:var(--sp-4);color:rgba(23,19,16,.9);font-size:var(--fs-md)}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
.cta-band .btn-primary{background:var(--c-dark);color:var(--c-ondark);box-shadow:none}
.cta-band .btn-primary:hover{background:#241F1A}
.cta-band .btn-secondary{border-color:rgba(23,19,16,.4);color:var(--c-text-inv)}
.cta-band .btn-secondary:hover{border-color:var(--c-dark);color:var(--c-dark)}

/* ---- Forms ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-12)}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1.3fr}}
.contact-info h3{font-size:var(--fs-lg);margin-bottom:var(--sp-3)}
.contact-info .info-block{margin-bottom:var(--sp-8)}
.contact-info a{color:var(--c-emph);transition:color var(--t-fast)}
.contact-info a:hover{color:var(--c-brand-3)}
.contact-info address{font-style:normal;color:var(--c-text-2);line-height:var(--lh-relaxed)}

.form-card{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,2.5rem);
}
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5)}
@media(min-width:640px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
}
.field label{
  display:block;font-family:var(--font-display);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  margin-bottom:var(--sp-2);color:var(--c-text-2);
}
.field label .req{color:var(--c-brand)}
.field input,.field select,.field textarea{
  width:100%;padding:var(--sp-3) var(--sp-4);
  background:var(--c-bg-2);border:1.5px solid var(--c-border);
  border-radius:var(--r-md);color:var(--c-text);
  font:inherit;font-size:var(--fs-sm);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23F08A00' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-4) center}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--c-brand);background:var(--c-bg-3);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--c-error)}
.field .error-msg{
  display:none;font-size:var(--fs-xs);color:var(--c-error);margin-top:var(--sp-1);
}
.field .error-msg.show{display:block}
.field-check{display:flex;gap:var(--sp-3);align-items:flex-start}
.field-check input{
  width:18px;height:18px;margin-top:3px;accent-color:var(--c-brand);flex-shrink:0;
}
.field-check label{font-size:var(--fs-xs);color:var(--c-text-3);line-height:var(--lh-base)}
.field-check a{color:var(--c-brand);text-decoration:underline}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:var(--sp-4);font-size:var(--fs-sm);min-height:1.4em}
.form-status.ok{color:var(--c-success)}
.form-status.err{color:var(--c-error)}

/* ---- Cookie consent ---- */
#cookie-banner{
  position:fixed;bottom:var(--sp-4);left:var(--sp-4);right:var(--sp-4);
  z-index:5000;margin-inline:auto;max-width:560px;
  background:var(--c-dark-2);border:1px solid var(--c-border-2);
  border-radius:var(--r-lg);padding:var(--sp-6);
  box-shadow:var(--shadow-lg);
}
#cookie-banner h3{font-size:var(--fs-md);margin-bottom:var(--sp-2)}
#cookie-banner p{font-size:var(--fs-xs);color:var(--c-text-2);margin-bottom:var(--sp-5)}
#cookie-banner p a{color:var(--c-brand);text-decoration:underline}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cookie-actions .btn{flex:1 1 auto;justify-content:center;font-size:var(--fs-xs);padding:.65rem 1rem}

.cookie-modal{
  position:fixed;inset:0;z-index:5100;display:flex;
  align-items:center;justify-content:center;padding:var(--sp-4);
  background:rgba(12,10,9,.7);backdrop-filter:blur(6px);
}
.cookie-modal[hidden]{display:none}
.cookie-modal__panel{
  width:100%;max-width:520px;max-height:85vh;overflow:auto;
  background:var(--c-dark-2);border:1px solid var(--c-border-2);
  border-radius:var(--r-lg);padding:var(--sp-8);
}
.cookie-modal__panel h3{margin-bottom:var(--sp-5)}
.cookie-row{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-4);border-top:1px solid var(--c-border);
}
.cookie-row h4{font-size:var(--fs-sm);margin-bottom:var(--sp-1)}
.cookie-row p{font-size:var(--fs-xs);color:var(--c-text-3);max-width:38ch}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{
  position:absolute;inset:0;border-radius:var(--r-full);
  background:var(--c-bg-3);border:1px solid var(--c-border-2);
  transition:background var(--t-fast);cursor:pointer;
}
.switch .slider::before{
  content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;background:var(--c-text-3);
  transition:transform var(--t-fast),background var(--t-fast);
}
.switch input:checked+.slider{background:var(--c-brand)}
.switch input:checked+.slider::before{transform:translate(20px,-50%);background:var(--c-text-inv)}
.switch input:disabled+.slider{opacity:.55;cursor:not-allowed}
.switch input:focus-visible+.slider{outline:2px solid var(--c-brand);outline-offset:2px}
.cookie-modal__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6)}

/* ---- Page hero (subpages) ---- */
.page-hero{padding-block:calc(var(--section-gap)*1.1) var(--section-gap);position:relative;overflow:hidden}
.page-hero h1{max-width:16ch}
.page-hero .lede{
  margin-top:var(--sp-6);font-size:var(--fs-md);color:var(--c-text-2);max-width:56ch;
}

/* Über-uns team hero: centred headline + photo-fan intro */
.about-hero__title{max-width:22ch;margin-inline:auto}
/* tighter top so the "Über uns" kicker + photo-fan sit higher up the page */
.about-hero{padding-block-start:var(--sp-10)}
.about-hero .label{margin-bottom:var(--sp-4)}
/* photo-fan leads under the kicker: small top gap, larger gap before the headline */
.about-hero .photo-fan{margin-block:var(--sp-2) var(--sp-10)}
.about-hero .lede{max-width:60ch}

/* ---- Split media/text ---- */
.split{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}
@media(min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:var(--sp-16)}}
.split__media{border-radius:var(--r-lg);overflow:hidden;position:relative}
.split__media img{width:100%;height:100%;object-fit:cover}

/* ---- Photo annotation (arrow + label, e.g. Geschäftsführer) ---- */
.annotate img{max-height:600px;object-position:center 30%}
.annotate .annotate-badge{
  position:absolute;top:var(--sp-5);right:var(--sp-5);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-2);
  pointer-events:none;
}
.annotate .annotate-label{
  font-family:var(--font-display);font-style:italic;
  font-weight:var(--fw-bold);font-size:var(--fs-md);
  color:#F2EFE7;background:rgba(24,34,37,.8);
  padding:var(--sp-2) var(--sp-5);border-radius:var(--r-full);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;
}
.annotate .annotate-arrow{
  width:54px;height:62px;color:var(--c-brand);
  margin-right:var(--sp-8);
  filter:drop-shadow(0 2px 6px rgba(24,34,37,.5));
}

/* ---- Legal pages ---- */
.legal-content{max-width:760px}
.legal-content h2{font-size:var(--fs-xl);margin-top:var(--sp-12);margin-bottom:var(--sp-4)}
.legal-content h3{font-size:var(--fs-md);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.legal-content p,.legal-content li{color:var(--c-text-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm)}
.legal-content ul{list-style:disc;padding-left:var(--sp-6);margin-bottom:var(--sp-4)}
.legal-content a{color:var(--c-emph);text-decoration:underline}
.legal-content table{
  width:100%;border-collapse:collapse;font-size:var(--fs-xs);
  margin-block:var(--sp-6);
}
.legal-content th,.legal-content td{
  text-align:left;padding:var(--sp-3);border:1px solid var(--c-border);
  color:var(--c-text-2);vertical-align:top;
}
.legal-content th{color:var(--c-text);font-family:var(--font-display);background:var(--c-bg-2)}
.table-scroll{overflow-x:auto}

/* ---- 404 ---- */
.error-hero{
  min-height:70svh;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
}
.error-hero .code{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(5rem,18vw,11rem);font-weight:var(--fw-xbold);
  line-height:1;color:var(--c-brand);opacity:.9;
}

/* ============================================================
   ARC GALLERY HERO (Kontakt) — cards fan into an arch,
   headline fades in beneath. Positions set by hero-animations.js.
   ============================================================ */
.arc-hero{position:relative;overflow:hidden;padding-block:var(--sp-16) var(--section-gap)}
.arc-gallery{position:relative;width:100%;max-width:1160px;margin-inline:auto;height:440px}
.arc-item{
  position:absolute;left:50%;bottom:0;
  width:var(--arc-card,122px);height:var(--arc-card,122px);
  transform:translate(-50%,50%);opacity:0;
}
.arc-item.in{opacity:1;animation:arcIn .8s var(--ease-out) both}
.arc-item__inner{
  width:100%;height:100%;border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-surface);box-shadow:var(--shadow-md);
  border:1px solid var(--c-border);
  transform:rotate(var(--rot,0deg));
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.arc-item__inner img{width:100%;height:100%;object-fit:cover}
.arc-item:hover{z-index:60!important}
.arc-item:hover .arc-item__inner,
.arc-item:focus-within .arc-item__inner{
  transform:rotate(0deg) scale(1.07);box-shadow:var(--shadow-lg);
}
.arc-hero__text{
  position:relative;z-index:3;text-align:center;
  max-width:640px;margin-inline:auto;padding-inline:var(--gutter);
  margin-top:clamp(-8rem,-9vw,-3.5rem);
}
.arc-hero__text h1{font-size:var(--fs-4xl)}
.arc-hero__text .lede{
  margin-top:var(--sp-5);font-size:var(--fs-md);
  color:var(--c-text-2);max-width:52ch;margin-inline:auto;
}
.arc-hero__actions{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
  justify-content:center;margin-top:var(--sp-8);
}
@media(max-width:640px){
  .arc-gallery{height:300px}
  .arc-hero__text{margin-top:-2.5rem}
}

/* ============================================================
   CTA + STAGGERED GALLERY (Kontakt) — text column beside a
   masonry photo grid whose cells blur/fade in on load.
   (Vanilla port of the motion/react "cta-section-with-gallery".)
   ============================================================ */
.gallery-cta__grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center;
}
@media(min-width:768px){
  .gallery-cta__grid{grid-template-columns:1fr 1fr;gap:var(--sp-16)}
}
.gallery-cta__text h1{font-size:var(--fs-4xl)}
.gallery-cta__text .lede{
  margin-top:var(--sp-5);font-size:var(--fs-md);color:var(--c-text-2);max-width:52ch;
}
.gallery-cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
.gallery-cta__gallery{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:50px 150px 50px 150px 50px;gap:var(--sp-4);
}
.gallery-cta__cell{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;animation:galleryCellIn .8s var(--ease-out) forwards;
}
.gallery-cta__cell img{width:100%;height:100%;object-fit:cover;object-position:center}
.gallery-cta__cell--1{grid-column:2/3;grid-row:1/3;animation-delay:.15s}
.gallery-cta__cell--2{grid-column:1/2;grid-row:2/4;animation-delay:.35s}
.gallery-cta__cell--3{grid-column:1/2;grid-row:4/6;animation-delay:.55s}
.gallery-cta__cell--4{grid-column:2/3;grid-row:3/5;animation-delay:.75s}

/* ============================================================
   IMAGE CAROUSEL HERO (Leistungen intro) — rotating photo ring
   ============================================================ */
.carousel-hero{position:relative;overflow:hidden;padding-block:var(--sp-16) var(--section-gap)}
.carousel-hero::before,.carousel-hero::after{
  content:'';position:absolute;width:26rem;height:26rem;border-radius:50%;
  background:radial-gradient(circle,var(--c-brand-soft),transparent 70%);
  filter:blur(40px);pointer-events:none;z-index:0;
}
.carousel-hero::before{top:-6rem;right:-4rem}
.carousel-hero::after{bottom:-6rem;left:-4rem}
.carousel-hero__ring{
  position:relative;z-index:1;height:440px;margin-bottom:var(--sp-12);
  perspective:1000px;
}
.carousel-hero__card{
  position:absolute;top:50%;left:50%;
  width:150px;height:190px;margin-left:-75px;margin-top:-95px;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);will-change:transform;
  transition:box-shadow var(--t-base);
}
.carousel-hero__card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 60%);
}
.carousel-hero__card img{width:100%;height:100%;object-fit:cover}
.carousel-hero__body{
  position:relative;z-index:2;text-align:center;
  max-width:640px;margin-inline:auto;padding-inline:var(--gutter);
}
.carousel-hero__body h1{font-size:var(--fs-4xl)}
.carousel-hero__body .lede{
  margin-top:var(--sp-5);font-size:var(--fs-md);color:var(--c-text-2);
  max-width:54ch;margin-inline:auto;
}
.carousel-hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-8)}
.carousel-hero__features{
  display:grid;grid-template-columns:1fr;gap:var(--sp-5);
  max-width:900px;margin:var(--sp-16) auto 0;position:relative;z-index:2;
}
.carousel-hero__feature{
  text-align:center;padding:var(--sp-6);border-radius:var(--r-lg);
  background:var(--c-bg-2);border:1px solid var(--c-border);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.carousel-hero__feature:hover{transform:translateY(-3px);border-color:var(--c-border-2);box-shadow:var(--shadow-sm)}
.carousel-hero__feature h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.carousel-hero__feature p{font-size:var(--fs-sm);color:var(--c-text-2);margin-inline:auto}
@media(min-width:768px){.carousel-hero__features{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .carousel-hero__ring{height:340px}
  .carousel-hero__card{width:112px;height:142px;margin-left:-56px;margin-top:-71px}
}

/* ============================================================
   RADIAL ORBITAL TIMELINE (Special Services)
   Light stage that sits directly on the paper section (no dark box);
   orange focus accents. JS toggles --orbit / --list.
   ============================================================ */
.orbital{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%,var(--c-brand-soft) 0%,transparent 62%);
  padding:clamp(1.5rem,4vw,2.75rem);
}
.orbital__stage{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:var(--sp-3);
}
.orbital__hub,.orbital__ring{display:none}

/* ---- Orbit mode (desktop) ---- */
.orbital--orbit .orbital__stage{
  display:block;height:var(--orb-h,540px);
}
.orbital--orbit .orbital__hub{
  display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;z-index:5;
  background:conic-gradient(from 0deg,var(--c-brand),var(--c-brand-2),var(--c-accent-2),var(--c-brand));
  animation:orbitalPulse 3s var(--ease-out) infinite;
}
.orbital--orbit .orbital__hub::before{
  content:'';position:absolute;width:80px;height:80px;border-radius:50%;
  border:1px solid var(--c-brand-mid);animation:orbitalPing 2.4s cubic-bezier(0,0,.2,1) infinite;
}
.orbital--orbit .orbital__hub::after{
  content:'';width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(4px);
}
.orbital--orbit .orbital__ring{
  display:block;position:absolute;top:50%;left:50%;
  width:var(--orb-ring,400px);height:var(--orb-ring,400px);margin:calc(var(--orb-ring,400px)/-2) 0 0 calc(var(--orb-ring,400px)/-2);
  border-radius:50%;border:1px dashed rgba(30,27,21,.16);
}
.orbital--orbit .orbital-node{
  position:absolute;top:50%;left:50%;margin:-22px 0 0 -22px;
  width:44px;height:44px;
  transition:opacity .5s var(--ease-out);
  will-change:transform; /* composite the per-frame orbit on the GPU */
}
/* one-off smooth glide when a click rotates a node to the focal point */
.orbital--orbit.is-centering .orbital-node{
  transition:transform .7s var(--ease-out),opacity .5s var(--ease-out);
}

/* ---- Node dot + label (shared) ---- */
.orbital-node{
  appearance:none;background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  color:var(--c-ondark);text-align:center;
}
.orbital-node__dot{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  background:var(--c-dark);border:2px solid var(--c-border-2);
  color:#fff;transition:transform var(--t-base),background var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.orbital-node__dot svg{width:20px;height:20px}
.orbital-node__title{
  font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-snug);color:var(--c-text-dark);
}
.orbital-node__text{font-size:var(--fs-sm);color:var(--c-text-dark-2);max-width:34ch}
html.js .orbital-node__text{display:none}

.orbital-node:hover .orbital-node__dot{border-color:var(--c-brand);box-shadow:0 0 0 4px var(--c-brand-soft)}
.orbital-node.is-related .orbital-node__dot{border-color:var(--c-brand);animation:orbitalPulse 1.6s var(--ease-out) infinite}
.orbital-node.is-active .orbital-node__dot{
  background:var(--c-brand);color:var(--c-text-inv);border-color:var(--c-brand-3);
  box-shadow:0 0 0 5px rgba(240,138,0,.22),var(--shadow-md);
}
.orbital--orbit .orbital-node.is-active .orbital-node__dot{transform:scale(1.35)}
.orbital--orbit .orbital-node__title{
  position:absolute;top:52px;left:50%;transform:translateX(-50%);white-space:nowrap;
}
.orbital-node:focus-visible{outline:none}
.orbital-node:focus-visible .orbital-node__dot{outline:2px solid var(--c-brand-2);outline-offset:3px}

/* ---- Focus / detail card ---- */
.orbital__focus{position:relative}
.orbital__focus[hidden]{display:none}
.orbital--orbit .orbital__focus{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(300px,80%);z-index:210;
  /* override the base fadeInUp so the reveal doesn't cancel the centering */
  animation:orbitalFocusIn .3s var(--ease-out) both;
}
.orbital--list .orbital__focus{margin-top:var(--sp-6)}
.orbital__focus{
  background:var(--c-surface);backdrop-filter:blur(10px);
  border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-lg);
  animation:fadeInUp .3s var(--ease-out) both;
}
.orbital__close{
  position:absolute;top:var(--sp-3);right:var(--sp-4);
  font-size:1.4rem;line-height:1;color:var(--c-text-3);
}
.orbital__close:hover{color:var(--c-text)}
.orbital__focus-title{font-size:var(--fs-lg);color:var(--c-text);margin-bottom:var(--sp-2);padding-right:var(--sp-6)}
.orbital__focus-text{font-size:var(--fs-sm);color:var(--c-text-2);line-height:var(--lh-base)}
.orbital__related{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--c-border)}
.orbital__related-label{
  display:block;font-family:var(--font-display);font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--c-brand-dark);margin-bottom:var(--sp-3);
}
.orbital__related-links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.orbital__related-btn{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:var(--c-text);border:1px solid var(--c-border-2);border-radius:var(--r-full);
  padding:var(--sp-1) var(--sp-3);transition:border-color var(--t-fast),background var(--t-fast);
}
.orbital__related-btn:hover{border-color:var(--c-brand);background:var(--c-brand-soft)}

/* ---- List mode (mobile / no-JS / reduced-motion) ---- */
.orbital--list .orbital-node,
html:not(.js) .orbital .orbital-node{
  flex-direction:row;justify-content:flex-start;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);
  background:var(--c-surface);border:1px solid var(--c-border);
  width:100%;text-align:left;
}
.orbital--list .orbital-node.is-active{border-color:var(--c-brand);background:var(--c-bg-2)}
.orbital--list .orbital-node__title{font-size:var(--fs-md)}
html:not(.js) .orbital__hub,html:not(.js) .orbital__ring,
html:not(.js) .orbital__focus{display:none}
@media(min-width:520px){
  .orbital--list .orbital__stage{grid-template-columns:1fr 1fr}
}