/* Alpena – Scroll-Reveal & WOW-Effekte (JS fügt .reveal hinzu; ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.7,.2,1),transform .7s cubic-bezier(.22,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* Bild-Zoom beim Hover über Karten/Bereiche */
.slot{transition:transform .6s cubic-bezier(.22,.7,.2,1)}
a:hover > div > .slot{transform:scale(1.05)}
/* Captcha */
.cta-captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cta-captcha .captcha-q{font-weight:700;font-size:16px}
.cta-captcha input[name="captcha"]{width:90px;text-align:center}
/* Leistungs-/Haltungs-Karten: feine Körnung + Inhalt über der Textur */
.lcard{position:relative;overflow:hidden}
.lcard::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px 150px}
.lcard > *{position:relative;z-index:2}
.lcard-cta{text-decoration:none;justify-content:flex-start}
.lcta{margin-top:auto;font-weight:700;font-size:15px;padding-top:16px}
/* Keine Kursivschrift in Titeln/Hervorhebungen – em dient nur der Akzentfarbe */
em{font-style:normal}
/* ===== Bewegter Hintergrund: weiche Farb-Glows in Seitenfarbe, langsam driftend ===== */
body::before{content:'';position:fixed;inset:-26%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 44% at 16% 84%,var(--bg1,transparent) 0%,transparent 68%),
             radial-gradient(46% 40% at 86% 10%,var(--bg2,transparent) 0%,transparent 70%),
             radial-gradient(34% 28% at 58% 56%,color-mix(in srgb,var(--bg2,transparent) 62%,transparent) 0%,transparent 72%);
  animation:bgdrift 26s ease-in-out infinite alternate}
@keyframes bgdrift{
  0%{transform:translate3d(-3.6%,2.6%,0) rotate(-1.1deg) scale(1)}
  100%{transform:translate3d(3.6%,-3%,0) rotate(1.1deg) scale(1.09)}
}
/* Zweite, gegenläufige Ebene – nur aktiv, wo eine Seite --bg3 setzt (Startseite) */
body::after{content:'';position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 32% at 76% 72%,var(--bg3,transparent) 0%,transparent 70%),
             radial-gradient(30% 26% at 24% 24%,var(--bg3,transparent) 0%,transparent 72%);
  animation:bgdrift2 37s ease-in-out infinite alternate}
@keyframes bgdrift2{
  0%{transform:translate3d(3.2%,-2.2%,0) scale(1.06)}
  100%{transform:translate3d(-3.2%,2.6%,0) scale(1)}
}
/* ===== Hover-Einfärbung: Verlauf in Seitenfarbe zieht von unten links nach oben rechts ein ===== */
.firm::before,.lcard::before,.acard::before,.foot-firm::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(45deg,var(--hovc,rgba(255,255,255,0.08)) 0%,transparent 62%);
  opacity:0;transform:translate3d(-16%,16%,0);transition:opacity .35s ease,transform .55s cubic-bezier(.22,.7,.2,1)}
.firm:hover::before,.lcard:hover::before,.acard:hover::before,.foot-firm:hover::before{opacity:1;transform:translate3d(0,0,0)}
.firm{--hovc:color-mix(in srgb,var(--c,#2f86d6) 24%,transparent)}
.lcard,.acard{--hovc:color-mix(in srgb,var(--pa,#2f86d6) 19%,transparent)}
.acard{position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.22,.7,.2,1),border-color .22s}
.acard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pa,#2f86d6) 55%,transparent)!important}
.acard > *{position:relative;z-index:1}
/* Karten-Abschlüsse (Gästezahl, Eckdaten) sitzen auf einer Linie, egal wie lang der Text darüber ist */
.acard{display:flex;flex-direction:column}
.acard > div{flex:none}
.acard > div:last-child{display:flex;flex-direction:column;flex:1 1 auto}
.acard .specs,.acard > span:last-child{margin-top:auto;padding-top:8px}
/* ===== Button-Sweep: heller Verlauf zieht beim Hover von unten links nach oben rechts ein ===== */
.btn-sweep,.hdr-cta{position:relative;overflow:hidden}
.btn-sweep::before,.hdr-cta::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(45deg,rgba(255,255,255,0.30) 0%,rgba(255,255,255,0.06) 48%,transparent 64%);
  opacity:0;transform:translate3d(-26%,26%,0);transition:opacity .3s ease,transform .5s cubic-bezier(.22,.7,.2,1)}
.btn-sweep:hover::before,.hdr-cta:hover::before{opacity:1;transform:translate3d(0,0,0)}
/* Chips (Pill-Links): Einfärbung in der eigenen Textfarbe */
.chip{position:relative;overflow:hidden}
.chip::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(45deg,currentColor 0%,transparent 65%);
  opacity:0;transform:translate3d(-20%,20%,0);transition:opacity .3s ease,transform .45s cubic-bezier(.22,.7,.2,1)}
.chip:hover::before{opacity:.17;transform:translate3d(0,0,0)}
/* ===== Premium: goldener Schimmer läuft periodisch über die Ansprechpartner-Karte ===== */
.pcard{position:relative}
.pcard::after{content:'';position:absolute;top:0;bottom:0;left:-75%;width:60%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,var(--gold1,rgba(255,214,110,0.05)) 30%,var(--gold2,rgba(255,228,150,0.17)) 50%,var(--gold1,rgba(255,214,110,0.05)) 70%,transparent 100%);
  transform:skewX(-12deg);animation:goldsheen 6.5s ease-in-out infinite}
@keyframes goldsheen{
  0%{transform:translateX(0) skewX(-12deg)}
  46%{transform:translateX(400%) skewX(-12deg)}
  100%{transform:translateX(400%) skewX(-12deg)}
}
.pcard img[alt="Philipp Bretscher"]{border-color:rgba(231,196,115,0.55)!important}
/* Telefon-/Mail-Zeilen: Wert bleibt rechtsbündig, auch wenn er auf schmalen Displays umbricht
   (als eigenes Flex-Item ist die Box sonst nur so breit wie ihr Inhalt und sitzt links). */
.pcard a > span:last-child{margin-left:auto;text-align:right}
/* ===== Pfeile wandern beim Hover ein Stück nach rechts ===== */
.arr{display:inline-block;transition:transform .28s cubic-bezier(.22,.7,.2,1)}
a:hover .arr,button:hover .arr{transform:translateX(5px)}
/* ===== Hero-Titel: Zeile 1 und Akzent-Zeile gleiten nacheinander ein ===== */
@media (prefers-reduced-motion:no-preference){
  h1{animation:titleup .6s cubic-bezier(.22,.7,.2,1) both}
}
/* Zeilen-Stagger nur auf Desktop: inline-block würde auf Mobile den Umbruch der Akzent-Zeile verhindern */
@media (prefers-reduced-motion:no-preference) and (min-width:861px){
  h1 em{display:inline-block;animation:titleup .6s .16s cubic-bezier(.22,.7,.2,1) both}
}
@keyframes titleup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* ===== Header wird beim Scrollen kompakter ===== */
.stickytop{transition:box-shadow .25s}
.hdr{transition:min-height .25s ease,padding .25s ease}
.brand-logo{transition:height .25s ease}
@media(min-width:861px){
  .stickytop.shrunk{box-shadow:0 8px 26px rgba(0,0,0,0.20)}
  .stickytop.shrunk .hdr{min-height:56px;padding-top:8px;padding-bottom:8px}
  .stickytop.shrunk .brand-logo{height:24px}
}
/* ===== Ken-Burns: Hero-Bild zoomt sehr langsam ===== */
@media (prefers-reduced-motion:no-preference){
  .hero .media .slot{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:62% 38%}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
/* ===== Erreichbarkeits-Status in der Ansprechpartner-Karte (JS berechnet Zürich-Zeit) ===== */
.avail{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.avail i{width:8px;height:8px;border-radius:50%;flex:none}
.avail.on{color:#34b873}
.avail.on i{background:#34b873;animation:availpulse 2.6s ease-out infinite}
.avail.off{color:#98a2ad}
.avail.off i{background:#98a2ad}
@keyframes availpulse{0%{box-shadow:0 0 0 0 rgba(52,184,115,.4)}70%{box-shadow:0 0 0 7px rgba(52,184,115,0)}100%{box-shadow:0 0 0 0 rgba(52,184,115,0)}}
/* ===== Galerie-Lightbox ===== */
#galerie .slot{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(8,11,15,0.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .28s}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:calc(100vw - 130px);max-height:calc(100vh - 120px);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.55);transform:scale(.96);transition:transform .28s cubic-bezier(.22,.7,.2,1)}
.lb.open img{transform:scale(1)}
.lb-cap{position:absolute;left:20px;right:20px;bottom:20px;text-align:center;color:#c9d3dc;font-size:14.5px;pointer-events:none}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,26,33,.65);color:#fff;font-size:21px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s,border-color .15s}
.lb-btn:hover{background:rgba(40,52,66,.85);border-color:rgba(255,255,255,.5)}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-close{position:absolute;top:16px;right:16px;transform:none;font-size:24px}
@media(max-width:700px){.lb img{max-width:calc(100vw - 20px);max-height:calc(100vh - 130px)}.lb-btn{width:40px;height:40px}.lb-prev{left:8px}.lb-next{right:8px}.lb-close{top:10px;right:10px}}
/* ===== Schwebender Anruf-Button (nur mobil, erscheint nach etwas Scrollen) ===== */
.call-fab{position:fixed;right:16px;bottom:16px;z-index:70;display:none;align-items:center;gap:9px;text-decoration:none;background:var(--pa,#2f86d6);color:var(--pa-ct,#fff);font-weight:700;font-size:15px;padding:13px 21px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.35);opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s;pointer-events:none}
.call-fab svg{flex:none}
.call-fab.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:860px){.call-fab{display:inline-flex}}
/* ===== Rechts-Seiten (AGB/Datenschutz/Impressum) im neuen Look ===== */
.legal{max-width:860px;margin:0 auto;padding:64px 48px 84px}
.legal h1{font-family:'Figtree',sans-serif;font-weight:700;font-size:42px;line-height:1.1;color:#eef2f5;margin:0 0 18px}
.legal h2{font-family:'Figtree',sans-serif;font-weight:700;font-size:23px;color:#eef2f5;margin:38px 0 10px}
.legal p{font-size:15.5px;line-height:1.75;color:#aab3bc;margin:0 0 14px;text-wrap:pretty}
.legal a{color:#c2d2e0}
.legal a:hover{color:#fff}
.legal-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;background:#1b212a;border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:26px 28px;margin:26px 0 8px}
.legal-meta > div{font-size:15px;line-height:1.6;color:#d6dde3}
.legal-meta span{display:block;font-size:11.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#8fa0af;margin-bottom:5px}
@media(max-width:700px){.legal{padding:44px 20px 64px}.legal h1{font-size:34px}.legal-meta{grid-template-columns:1fr}}
/* Hero-Kennzahlen: Titel und Untertitel bleiben einzeilig (z.B. „Deko-Wände", „Innen · Aussen").
   Dafür etwas kleinere Schrift und engere Trennabstände – Inline-Styles brauchen !important. */
.stats > div > div{white-space:nowrap}
@media(min-width:861px){
  .stats > div{padding-left:14px!important;padding-right:14px!important}
  .stats > div:first-child{padding-left:0!important}
  .stats > div:last-child{padding-right:0!important}
  .stats > div > div:first-child{font-size:18px!important}
  .stats > div > div:last-child{font-size:12px!important}
}
/* ===== Firmen-Kacheln: Akzentlinie läuft ein, Kachel hebt deutlicher =====
   Selektor mit .firms davor, sonst gewinnt `.firm > *{position:relative}` aus dem Seiten-Stylesheet.
   Breite fix + scaleX statt animierter Breite: läuft ohne JS und unabhängig vom Reveal. */
.firms .firm-line{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--c);z-index:3;transform-origin:left;animation:firmline .85s .25s cubic-bezier(.22,.7,.2,1) both}
@keyframes firmline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.firms .firm{transition:transform .24s cubic-bezier(.22,.7,.2,1),background .24s,box-shadow .24s}
.firms .firm:hover{box-shadow:0 20px 44px rgba(0,0,0,0.34)}
@media (prefers-reduced-motion:reduce){
  body::before,body::after{animation:none}
  .firms .firm-line{animation:none;transform:none}
  .pcard::after{animation:none;opacity:0}
  h1,h1 em,.hero .media .slot,.avail.on i{animation:none}
  .firm::before,.lcard::before,.acard::before,.foot-firm::before,.btn-sweep::before,.hdr-cta::before,.chip::before,.arr{transition:none}
}
/* ===== Einheitlicher Header (auf allen Seiten identisch – nur Farbe/Theme variiert) ===== */
.stickytop{position:sticky;top:0;z-index:40;background:var(--hbg,rgba(15,18,23,0.96));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hbd,rgba(255,255,255,0.12))}
.hdr{display:grid;grid-template-columns:200px 1fr auto;align-items:end;gap:22px;min-height:78px;max-width:1240px;margin:0 auto;padding:16px 48px 15px}
/* Breite Screens: Nav beginnt an der linken Content-Kante (1240er-Raster), Logo sitzt links davon im Seitenband */
@media(min-width:1461px){
  .hdr{grid-template-columns:minmax(145px,calc(50% - 572px)) 1fr auto minmax(20px,calc(50% - 572px));gap:0;max-width:none;padding:16px 0 15px}
  .hdr .brand{justify-self:end;margin-right:26px}
  .hdr .hdr-nav{padding-right:22px}
}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px;text-decoration:none;justify-self:start;line-height:0}
/* Logo auf die Baseline der Menü-Schrift heben (Unterlänge von p/g ausgleichen) */
@media(min-width:861px){.hdr .brand{margin-bottom:3px}}
.brand-logo{height:30px;width:auto;max-width:none;display:block;flex:none}
.brand-badge{width:113px;box-sizing:border-box;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--acc-ct,#fff);background:var(--acc,#2f86d6);padding:4px 6px;border-radius:5px;line-height:1.25;white-space:nowrap}
.hdr-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-self:start}
.hdr-nav a{position:relative;text-decoration:none;color:var(--hfg,rgba(255,255,255,0.82));font-weight:600;font-size:15px;white-space:nowrap;transition:color .15s}
.hdr-nav a:hover{color:var(--hfgh,#fff)}
.hdr-nav a::after{content:'';position:absolute;left:0;bottom:-5px;height:2px;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--acc,#9ecdf2),transparent);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.hdr-nav a:hover::after{transform:scaleX(1)}
.hdr-cta{justify-self:end;text-decoration:none;background:var(--acc,#2f86d6);color:var(--acc-ct,#fff);font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:7px;white-space:nowrap;transition:filter .15s;cursor:pointer}
.hdr-cta:hover{filter:brightness(1.08)}
.hdr-burger{display:none}
@media(max-width:860px){
  /* Mobile: Logo → Anruf-Button → Hamburger; Menü klappt darunter auf */
  .hdr{grid-template-columns:1fr auto auto;align-items:center;gap:10px 12px;padding:10px 16px;min-height:0}
  .hdr-cta{padding:9px 14px;font-size:13.5px}
  .hdr-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:40px;padding:0 10px;background:transparent;border:1px solid var(--hbd,rgba(255,255,255,0.25));border-radius:8px;cursor:pointer}
  .hdr-burger span{display:block;height:2px;width:100%;background:var(--hfg,rgba(255,255,255,0.9));border-radius:2px;transition:transform .2s,opacity .2s}
  .hdr.nav-open .hdr-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr.nav-open .hdr-burger span:nth-child(2){opacity:0}
  .hdr.nav-open .hdr-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr-nav{display:none}
  .hdr.nav-open .hdr-nav{display:flex;grid-column:1 / -1;order:4;flex-direction:column;align-items:stretch;gap:2px;width:100%;padding:8px 0 4px;border-top:1px solid var(--hbd,rgba(255,255,255,0.12));margin-top:6px}
  .hdr.nav-open .hdr-nav a{padding:10px 2px;font-size:16px}
}
/* ===== Einheitlicher Footer (auf allen Seiten identisch, immer dunkel) ===== */
.site-foot{background:#0f1216;border-top:1px solid rgba(255,255,255,0.1);color:#8b95a1;padding:54px 0 26px}
.site-foot .fwrap{max-width:1240px;margin:0 auto;padding:0 48px}
.foot-title{font-family:'Figtree',sans-serif;font-weight:700;font-size:22px;color:#eef2f5;margin:0 0 12px}
.foot-family{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;margin-top:24px}
.foot-firm{position:relative;overflow:hidden;display:inline-flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;border:1px solid rgba(255,255,255,0.14);border-radius:9px;padding:16px 16px 14px;background:rgba(255,255,255,0.03);transition:border-color .15s;--hovc:color-mix(in srgb,var(--acc,#2f86d6) 22%,transparent)}
.foot-firm:hover{border-color:rgba(255,255,255,0.32)}
.foot-firm > *{position:relative;z-index:1}
.foot-firm img{height:26px;width:auto;max-width:none;display:block}
.foot-cols{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:40px;padding:0 0 34px}
.foot-cols h4{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8b95a1;margin:0 0 15px}
.foot-cols p{font-size:14.5px;line-height:1.7;margin:0;max-width:42ch;color:#aab3bc}
.foot-links{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot-links a,.foot-cols a{color:#c2ccd6;text-decoration:none}
.foot-links a:hover,.foot-cols a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;flex-wrap:wrap}
.foot-bottom a{color:#8b95a1;text-decoration:none}
.foot-bottom a:hover{color:#c2ccd6}
@media(max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;gap:26px}.foot-family{gap:26px}}
@media(max-width:520px){.foot-cols{grid-template-columns:1fr}}