/* ============================================================
   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%;
  /* object-fit is required here: max-width and max-height both clamp the box,
     and without it wide wordmarks (Samsonite, Hoffmann, REMONDIS …) get
     squashed to the tile ratio instead of keeping their own. */
  object-fit:contain;
  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}

/* ---- Promise line ("individuell – verlässlich – persönlich") ----
   Replaces the former three "Drei Zusagen" cards with one claim line. */
.promise-line{
  margin-top:var(--sp-10);
  font-family:var(--font-display);
  font-size:var(--fs-3xl);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-tight);line-height:var(--lh-snug);
  text-wrap:balance;
}
.promise-line span{color:var(--c-emph);margin-inline:var(--sp-2)}

/* ---- 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:30ch;margin-inline:auto;text-align:center;text-wrap:balance;
}
.pull-quote em{color:var(--c-brand-3);font-style:inherit}
/* the caption underneath follows the quote (p has a 68ch max-width globally,
   so it needs the auto margins too, not just text-align) */
.pull-quote + p{text-align:center;margin-inline:auto}

/* ---- 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}
.split__media picture{display:block;width:100%;height:100%}

/* ============================================================
   "BILD IM BILD" (Leistungen · 01 Event, 02 Incentive, 03 Konzeption)
   Full-bleed backdrop photo behind a scrim, with the actual photo
   sitting on top in the media slot. Static by design — no parallax,
   so there is nothing to disable for reduced motion.

   The scrim colour follows the section background via --pip-scrim, and
   the gradient runs towards whichever side holds the photo:
     .pip            copy left  / photo right   (01 Event, 03 Konzeption)
     .pip--flip      photo left / copy right    (02 Incentive)
   It holds ~92% over the whole copy column and only falls off past it
   (55%), so the text keeps full contrast while the photo opens right up.
   ============================================================ */
.pip{
  position:relative;isolation:isolate;overflow:hidden;
  --pip-scrim:241,236,226;            /* default = .bg-raise */
}
.bg-base.pip{--pip-scrim:250,248,243}
.bg-paper.pip{--pip-scrim:240,233,218}
.bg-deep.pip{--pip-scrim:20,23,28}     /* dark island: scrim must be dark too */
.pip__bg{position:absolute;inset:0;z-index:0;display:block}
/* the photo runs at full strength — the scrim alone controls how much shows */
.pip__bg img{width:100%;height:100%;object-fit:cover;opacity:1}
.pip::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(var(--pip-scrim),.95) 0%,
    rgba(var(--pip-scrim),.92) 55%,
    rgba(var(--pip-scrim),.28) 78%,
    rgba(var(--pip-scrim),.08) 100%);
}
/* mirrored: photo sits on the left, so the scrim protects the right */
.pip--flip::after{
  background:linear-gradient(260deg,
    rgba(var(--pip-scrim),.95) 0%,
    rgba(var(--pip-scrim),.92) 55%,
    rgba(var(--pip-scrim),.28) 78%,
    rgba(var(--pip-scrim),.08) 100%);
}
.pip > .wrap{position:relative;z-index:2}
/* lifts the inset photo off the backdrop — this is what reads as "Bild im Bild" */
.pip__front{box-shadow:0 24px 60px rgba(24,20,14,.34)}
.bg-deep .pip__front{box-shadow:0 24px 60px rgba(0,0,0,.55)}
@media(max-width:900px){
  /* stacked layout: the copy spans the full width, so the scrim stays flat */
  .pip::after,.pip--flip::after{background:rgba(var(--pip-scrim),.92)}
}

/* ---- 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;
}

/* ============================================================
   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}

/* ============================================================
   MODULE ROWS (Leistungen · 04 Special Services)
   Numbered module list with photo. Replaces the former radial
   "constellation" animation on client request (slide-07): all the
   module info is now readable at a glance, with no motion at all.
   ============================================================ */
.module-rows{margin-top:var(--sp-12);display:block}
.module-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-5) var(--sp-6);
  align-items:center;
  padding-block:var(--sp-8);
  border-top:1px solid var(--c-border-dark);
}
.module-row:last-child{border-bottom:1px solid var(--c-border-dark)}
.module-row__num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4.5vw,3.25rem);
  font-weight:var(--fw-bold);font-style:italic;
  line-height:1;letter-spacing:var(--ls-tight);
  color:var(--c-text-dark);opacity:.2;
  align-self:start;
}
.module-row__body h3{
  font-size:var(--fs-xl);color:var(--c-text-dark);
  margin-bottom:var(--sp-2);
}
.module-row__body p{
  font-size:var(--fs-sm);color:var(--c-text-dark-2);
  line-height:var(--lh-base);max-width:62ch;
}
.module-row__media{
  display:block;overflow:hidden;
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  background:var(--c-light-2);
}
.module-row__media img{
  width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;display:block;
}
/* desktop: number · copy · photo on one line, like the client's layout */
@media(min-width:900px){
  .module-row{
    grid-template-columns:auto minmax(0,1fr) 320px;
    gap:var(--sp-10);padding-block:var(--sp-10);
  }
  .module-row__num{align-self:center}
}
/* mobile: number beside the title, photo full width underneath */
@media(max-width:899px){
  .module-row__media{grid-column:1/-1}
}