@font-face{ font-family:'Manrope'; font-style:normal; font-weight:300 800; font-display:swap; src:url('/assets/fonts/manrope.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/playfair-display.woff2') format('woff2'); }
@font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:400 700; font-display:swap; src:url('/assets/fonts/playfair-display-italic.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/fraunces.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:italic; font-weight:300 700; font-display:swap; src:url('/assets/fonts/fraunces-italic.woff2') format('woff2'); }
@font-face{ font-family:'Dancing Script'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/dancing-script.woff2') format('woff2'); }
/* Testimonial-Screenshot: am Desktop per Hover größer, am Handy per Tap (React-State, siehe Testimonial.jsx) */
.testimonial-shot{ cursor:zoom-in; transition:transform .3s ease, box-shadow .3s ease; position:relative; }
@media (hover:hover){
  .testimonial-shot:hover{ transform:scale(1.35) !important; box-shadow:0 24px 60px rgba(0,0,0,.5); z-index:5; }
}
/* Werkstattnotizen-Artikel: freigestelltes Maskottchen-Bild als eigene, sticky Spalte links
   neben dem Fließtext (nicht im Text schwimmend), auf Mobile stapelt es sich stattdessen oben.
   top:50vh + translateY(-50%) statt eines festen top-Werts, damit das Bild beim Scrollen
   vertikal in der Mitte des Viewports bleibt, statt fest oben zu kleben. */
.blogpost-side-grid{ display:grid; grid-template-columns:minmax(260px,420px) minmax(0,760px); gap:clamp(40px,5vw,88px); align-items:start; }
.blogpost-side-image{ width:100%; max-width:420px; display:block; position:sticky; top:50vh; transform:translateY(-50%); }
@media (max-width:760px){
  .blogpost-side-grid{ grid-template-columns:1fr; }
  .blogpost-side-image{ max-width:220px; margin:0 auto; position:static; transform:none; }
}
/* Ara im Hero: Blinzeln erstmal deaktiviert (wirkte zu unruhig), Keyframe bleibt für
   ein späteres, sanfteres Comeback stehen. scaleY(0) = Lid unsichtbar (Auge offen). */
@keyframes araBlink{
  0%, 92%, 100%{ transform:translate(-50%,-50%) scaleY(0); }
  95%{ transform:translate(-50%,-50%) scaleY(1); }
}
.ara-blink{ animation:none; transform:translate(-50%,-50%) scaleY(0); transform-origin:center; }
/* dc-runtime Lade-Platzhalter: Framework-Default ist ein helles Lachs-Schimmern, das auf
   der dunklen Bühne wie ein Rendering-Fehler aussieht. Auf die dunkle Palette umgefärbt. */
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing{
  background:rgba(235,232,223,.06) !important;
  border-color:rgba(235,232,223,.14) !important;
}
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before{
  background:linear-gradient(90deg,rgba(235,232,223,0) 25%,rgba(235,232,223,.22) 37%,rgba(235,232,223,0) 63%) !important;
  background-size:400% 100% !important;
}
.sc-placeholder{
  background:rgba(235,232,223,.05) !important;
  border-color:rgba(235,232,223,.12) !important;
  border-radius:8px !important;
}
/* Framework-Basisregel für einzelne unaufgelöste {{ }}-Werte hatte noch einen
   weißen Kasten mit schwarzem Rand als Default, unabhängig vom Streaming-Status. */
.sc-interp.sc-missing{
  background:rgba(235,232,223,.1) !important;
  border-color:rgba(235,232,223,.3) !important;
}
/* Auf schnellen Verbindungen (u.a. lokal) lädt der Inhalt oft schneller, als das
   Auge einen Kasten überhaupt bewusst wahrnimmt, trotzdem blitzt er kurz auf und
   wirkt wie ein Rendering-Fehler. Erst sichtbar werden lassen, wenn das Laden
   wirklich spürbar dauert (>180ms), sonst bleibt er bei schnellem Laden unsichtbar. */
.sc-placeholder, .sc-interp.sc-missing{
  animation:sc-placeholder-appear .01s .18s both !important;
}
@keyframes sc-placeholder-appear{ from{ opacity:0; } to{ opacity:1; } }
*{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{ margin:0; background:#2e3437; }
/* Dunkle Bühne: Klassenname bleibt (überall als Wurzel eingesetzt), Look ist jetzt die dunkle Schiefer-Bühne */
.paper-bg{
  background-color:#2e3437;
}
/* Spotlight, folgt via CSS-Scroll-Animation dem Seitenfortschritt */
.spotlight{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90vmax 55vmax at 50% var(--sy,20%), rgba(245,184,65,.07), transparent 60%);
  animation:spotlightTravel linear both; animation-timeline:scroll(); }
@keyframes spotlightTravel{ from{ --sy:18%; } to{ --sy:82%; } }
@property --sy { syntax:'<percentage>'; inherits:false; initial-value:20%; }
.rust-text{
  background-image:url("/assets/rust-texture.png");
  background-attachment:fixed;
  background-size:cover;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
::selection{ background:#a44e20; color:#fff; }
input,textarea,button{ font-family:inherit; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
/* to{transform:none} statt translateY(0): jedes aktive transform, auch ein Null-Offset,
   macht das Element zum Containing Block für position:fixed-Nachfahren (hier <main>, das
   dadurch fixed-positionierte Kinder wie AraCompanion an sich statt an den Viewport binden
   würde). transform:none vermeidet das, sieht optisch identisch aus. */
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes reveal{ from{ opacity:0; transform:translateY(34px);} to{ opacity:1; transform:translateY(0);} }
@keyframes revealScale{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:scale(1);} }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* CTA-Sektion vor dem Footer: wächst kontinuierlich beim Reinscrollen, statt nur einmalig
   einzublenden (animation-timeline:view() = nativ scroll-gesteuert, kein JS nötig, siehe
   auch .timeline-progress). */
@keyframes ctaGrow{ from{ transform:scale(.92);} to{ transform:scale(1);} }
.cta-grow{ animation:ctaGrow linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-9px) rotate(-2deg);} }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(164,78,32,.45);} 70%{ box-shadow:0 0 0 9px rgba(164,78,32,0);} 100%{ box-shadow:0 0 0 0 rgba(164,78,32,0);} }

/* ============================================================
   MOTION LIBRARY — shared, reusable animation language.
   Ruhig, editorial, nie verspielt. Above-the-fold-Elemente
   spielen einmalig beim Laden (rise-Familie); alles darunter
   ist scroll-gekoppelt über animation-timeline:view().
   ============================================================ */
:root{ --ease-editorial:cubic-bezier(.19,1,.22,1); --ease-soft:cubic-bezier(.25,.1,.25,1); }

/* Überschriften-Maske: nur noch Layout (Unterlängen-Luft), die Einblendung
   übernimmt das IntersectionObserver-Reveal (reveal.js) */
.reveal-mask{ display:block; }
.reveal-mask-inner{ display:block; padding-bottom:.14em; }
.reveal-mask-inner-eager{ display:block; padding-bottom:.14em; }
.fade-up-eager{ animation:reveal .7s .16s var(--ease-soft) both; }

/* Scroll-Reveal (reveal.js): Blöcke blenden beim ersten Sichtbarwerden einmalig
   sanft ein — Opacity + 26px von unten, ease-out, per JS gestaffelt.
   Kein Parallax, kein Zoom, keine Rotation. */
.reveal-el{ opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal-el.is-visible{ opacity:1; transform:none; }

/* Klickbare Karten wachsen beim Hover leicht (nach reveal definiert, damit der
   Hover-Transform die is-visible-Regel überschreibt) */
.card-lift{ transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .16s ease-out, box-shadow .16s ease-out; }
.card-lift:hover{ transform:translateY(-4px) scale(1.025); box-shadow:0 18px 44px rgba(0,0,0,.35); }
/* Angebot-Übersicht: dezentes Hintergrundbild in den drei Leistungs-Kacheln, nur bei Hover
   leicht sichtbar (z-index:-1 setzt es hinter den Text, aber vor die eigene Kartenfarbe). */
.pillar-card{ overflow:hidden; }
.pillar-card-bg{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; pointer-events:none; }
.pillar-card:hover .pillar-card-bg{ opacity:.13; }
@media (prefers-reduced-motion: reduce){
  .reveal-el{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Icons/Details: minimales, langsames Schweben – sparsam einsetzen */
.icon-float{ animation:iconFloat 4.5s ease-in-out infinite; }
@keyframes iconFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }

/* ---- Angebots-Sektionen (01/02/03) auf der Angebotsübersicht ---- */
.offer-kicker{ font-family:'Fraunces',serif; font-style:italic; font-size:15px; letter-spacing:.5px; color:#F5B841; }
.offer-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.offer-list li{ position:relative; padding-left:28px; font-size:15px; line-height:1.55; color:#bcb3a6; }
.offer-list li::before{ content:''; position:absolute; left:0; top:.68em; width:15px; height:2px; background:#a44e20; }
.offer-price{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(20px,2.2vw,26px); color:#ebe8df; }
.offer-price-note{ font-size:13px; color:#a8a49b; margin-top:4px; }

/* Bilder driften beim Scrollen leicht schräg (abwechselnde Richtung) */
.tilt-drift > *{ animation:tiltDriftA linear both; animation-timeline:view(); animation-range:entry 0% cover 70%; will-change:transform; }
.tilt-drift > *:nth-child(even){ animation-name:tiltDriftB; }
@keyframes tiltDriftA{ from{ opacity:0; transform:rotate(-2.6deg) translateY(18px);} 30%{ opacity:1; } to{ opacity:1; transform:rotate(1.4deg) translateY(-8px);} }
@keyframes tiltDriftB{ from{ opacity:0; transform:rotate(2.6deg) translateY(18px);} 30%{ opacity:1; } to{ opacity:1; transform:rotate(-1.4deg) translateY(-8px);} }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid #a44e20; outline-offset:3px; border-radius:6px;
}
/* ---- Shared components: hover states (style-hover only works inside
   x-dc templates, not inside Babel-compiled .jsx components, so these
   recurring interactive elements get real CSS classes instead) ---- */
.nav-link:hover{ background:rgba(235,232,223,.08); color:#ffffff; }
/* Mobile-Navigation: unter 900px Burger statt Desktop-Links */
.nav-burger{ display:none; cursor:pointer; background:none; border:1px solid rgba(235,232,223,.28); border-radius:10px; color:#ebe8df; width:42px; height:38px; font-size:17px; line-height:1; align-items:center; justify-content:center; flex:none; padding:0; }
.nav-mobile-panel{ position:absolute; top:100%; left:0; right:0; background:#262b2e; border-bottom:1px solid rgba(235,232,223,.16); box-shadow:0 26px 48px rgba(0,0,0,.5); padding:8px 18px 20px; display:flex; flex-direction:column; z-index:85; animation:rise .25s ease both; }
.nav-mobile-link{ display:block; font-size:16px; font-weight:500; color:#ebe8df; text-decoration:none; padding:12px 4px; border-bottom:1px solid rgba(235,232,223,.08); }
.nav-mobile-link:active, .nav-mobile-link:hover{ color:#F5B841; }
@media (max-width:900px){
  .nav-desktop{ display:none !important; }
  .nav-burger{ display:flex; }
}
/* Angebot-Dropdown */
.nav-drop{ position:relative; display:inline-block; }
.nav-drop-menu{ position:absolute; top:100%; left:0; min-width:240px; padding:8px; margin-top:6px;
  background:#262b2e; border:1px solid rgba(235,232,223,.16); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; z-index:90; }
.nav-drop::after{ content:''; position:absolute; left:0; right:0; top:100%; height:10px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.nav-drop-item{ display:block; font-size:14px; font-weight:500; color:#d3cfc6; text-decoration:none; padding:10px 13px; border-radius:9px; transition:background .18s, color .18s; }
.nav-drop-item:hover{ background:rgba(235,232,223,.08); color:#ffffff; }
.nav-drop-item:first-child{ border-bottom:1px solid rgba(235,232,223,.12); border-radius:9px 9px 0 0; margin-bottom:4px; padding-bottom:12px; }
.btn-cta{ background-color:#a44e20; color:#ebe8df; }
.btn-cta:hover{ background-color:#ebe8df; color:#a44e20; transform:translateY(-1px); }
.footer-link{ position:relative; }
.footer-link::after{ content:''; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:currentColor; transition:width .28s ease; }
.footer-link:hover{ color:#fff; }
.footer-link:hover::after{ width:100%; }
.btn{ cursor:pointer; display:inline-block; text-decoration:none; transition:all .4s cubic-bezier(.25,.1,.25,1); border:none; }
.btn-primary{ color:#ebe8df; background-color:#a44e20; }
.btn-primary:hover{ background-color:#ebe8df; color:#353c3f; transform:translateY(-2px); }
.btn-primary-on-dark{ color:#ebe8df; background-color:#a44e20; }
.btn-primary-on-dark:hover{ background-color:#ffffff; color:#353c3f; transform:translateY(-2px); }
.btn-outline{ color:#ebe8df; background:transparent; border:1.5px solid rgba(235,232,223,.45); }
.btn-outline:hover{ background:rgba(235,232,223,.08); border-color:#ebe8df; color:#ffffff; }
.btn-white-on-dark{ color:#353c3f; background:#ebe8df; border:1px solid rgba(235,232,223,.25); }
.btn-white-on-dark:hover{ background:#a44e20; color:#fff; border-color:#a44e20; }
.btn-dark{ color:#353c3f; background:#ebe8df; }
.btn-dark:hover{ background:#a44e20; color:#fff; }
.link-arrow{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:gap .2s; }
.link-arrow:hover{ gap:14px; }
.about-more-text, .about-more-arrow{ display:inline-block; transition:transform .25s ease; }
.about-more-link:hover .about-more-text{ transform:scale(1.04); }
.about-more-link:hover .about-more-arrow{ transform:scale(1.22); }
.form-field-light{ background:#262b2e; border:1px solid rgba(235,232,223,.16); color:#ebe8df; }
.form-field-light:focus{ border-color:#c26436; box-shadow:0 0 0 3px rgba(164,78,32,.22); }
.form-field-dark{ background:#262b2e; border:1px solid rgba(235,232,223,.16); color:#ffffff; }
.form-field-dark:focus{ border-color:#c26436; box-shadow:0 0 0 3px rgba(164,78,32,.22); }

/* ---- Glowing-Border (portiert aus dem GlowingEffect-React-Component):
   Conic-Verlauf läuft als Lichtkante um den Kasten und folgt der Maus.
   .glow-box = voller Effekt (CTA-Kästen, "So läuft's"-Kästchen)
   .glow-box.glow-soft = dezente Variante (alle übrigen Kästen) ---- */
.glow-box{ position:relative; --start:0; --active:0; --glow-w:2.5px; --glow-spread:60; }
.glow-box.glow-soft{ --glow-w:1.5px; --glow-spread:44; }
.glow-box::before{
  content:''; position:absolute; inset:calc(-1 * var(--glow-w)); border-radius:inherit;
  padding:var(--glow-w); pointer-events:none; z-index:1;
  background:conic-gradient(from calc((var(--start) - var(--glow-spread)) * 1deg),
    transparent 0deg,
    rgba(245,184,65,.95) calc(var(--glow-spread) * .7deg),
    #c26436 calc(var(--glow-spread) * 1deg),
    rgba(245,184,65,.95) calc(var(--glow-spread) * 1.3deg),
    transparent calc(var(--glow-spread) * 2deg));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--active); transition:opacity .3s;
}
.glow-box.glow-soft::before{ filter:opacity(.5); }
/* Innen-Variante: für Kästen mit overflow:hidden (z. B. Karten mit randlosem Bild),
   sonst schneidet der Kasten die außen liegende Lichtkante ab */
.glow-box.glow-inside::before{ inset:0; }
/* Weiße, dezente Variante (Zusammenarbeits-Kästchen) */
.glow-box.glow-white::before{
  background:conic-gradient(from calc((var(--start) - var(--glow-spread)) * 1deg),
    transparent 0deg,
    rgba(255,255,255,.75) calc(var(--glow-spread) * 1deg),
    transparent calc(var(--glow-spread) * 2deg));
  filter:opacity(.4);
}
@media (prefers-reduced-motion: reduce){ .glow-box::before{ display:none; } }

/* ---- Zusammenarbeit: scroll-driven vertical timeline ----
   Die Linie ist eine handgezeichnet wirkende Schlangenlinie statt eines geraden Strichs:
   Form kommt über eine SVG-Maske (Kachel, senkrecht wiederholt), die eigentliche Farbe
   bleibt weiter über --tl-track/--tl-progress steuerbar (siehe .timeline-dark). Der
   Aufzieh-Effekt läuft über clip-path statt scaleY, damit die Wellenform beim Wachsen
   nicht gestaucht/gestreckt wird. */
@keyframes timelineGrow{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0% 0); } }
@keyframes timelineIconActive{ from{ background:var(--tl-icon-bg,#eeeeee); border-color:var(--tl-icon-border,rgba(235,232,223,.16)); color:var(--tl-icon-color,#9a9082); } to{ background:#a44e20; border-color:#a44e20; color:#fff; } }
.timeline-base, .timeline-progress{
  position:absolute; left:calc(50% - 10px); top:0; bottom:0; width:20px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='440' viewBox='0 0 20 440'%3E%3Cpath d='M10,0 C18,55 2,165 10,220 C18,275 2,385 10,440' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-y; -webkit-mask-size:20px 440px; -webkit-mask-position:top center;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='440' viewBox='0 0 20 440'%3E%3Cpath d='M10,0 C18,55 2,165 10,220 C18,275 2,385 10,440' stroke='black' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-repeat:repeat-y; mask-size:20px 440px; mask-position:top center;
}
.timeline-base{ background:var(--tl-track,rgba(235,232,223,.16)); }
.timeline-progress{ background:var(--tl-progress,#a44e20); animation:timelineGrow linear both; animation-timeline:view(); animation-range:cover 0% cover 80%; }
.timeline-dark{ --tl-track:rgba(255,255,255,.18); --tl-progress:#ffffff; --tl-icon-bg:#4a4130; --tl-icon-border:rgba(255,255,255,.22); --tl-icon-color:#cfc6b5; }
.timeline-icon{ width:44px; height:44px; border-radius:50%; background:var(--tl-icon-bg,#eeeeee); border:2px solid var(--tl-icon-border,rgba(235,232,223,.16)); color:var(--tl-icon-color,#9a9082); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:15px; font-weight:600; position:relative; z-index:1; animation:timelineIconActive .8s linear both; animation-timeline:view(); animation-range:cover 30% cover 50%; }
@media (prefers-reduced-motion: reduce){
  .timeline-progress{ animation:none; clip-path:inset(0 0 0% 0); }
  .timeline-icon{ animation:none; background:#a44e20; border-color:#a44e20; color:#fff; }
}
@media (max-width:680px){
  .timeline-base, .timeline-progress{ left:22px; }
  .timeline-row .timeline-icon-wrap{ order:1 !important; }
  .timeline-row .timeline-content{ order:2 !important; text-align:left !important; flex:1 !important; }
  .timeline-row .timeline-side-empty{ display:none !important; }
}

@media (max-width:680px){
  /* Feste Mehrspalten-Grids auf eine Spalte klappen. Jeweils beide Schreibweisen:
     Template-HTML ohne Leerzeichen, React/dc-Re-Render normalisiert mit Leerzeichen. */
  [style*="grid-template-columns:0.85fr 1.15fr"], [style*="grid-template-columns: 0.85fr 1.15fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1.1fr"], [style*="grid-template-columns: 1fr 1.1fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1.15fr"], [style*="grid-template-columns: 1fr 1.15fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1.05fr 0.95fr"], [style*="grid-template-columns: 1.05fr 0.95fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"]{ grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }
  [style*="border-left:1px solid rgba(235,232,223,.16); padding-left:clamp(20px,3vw,40px)"]{ border-left:none !important; border-top:1px solid rgba(235,232,223,.16) !important; padding-left:0 !important; padding-top:20px !important; margin-top:6px !important; }
}

/* ---- Hero-Shell: reserviert die volle Hero-Höhe VOR dem Komponenten-Mount
   und zeigt das Hero-Bild sofort als CSS-Hintergrund (kein Layout-Shift,
   kein Aufblitzen der Folge-Sektion). Nach dem Mount übernimmt die Komponente
   und die Shell gibt Hintergrund + Mindesthöhe ab. ---- */
.hero-shell{
  min-height:100dvh;
  background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)), url('/assets/querformat_saskia.jpg') center/cover no-repeat;
}
@media (max-width:767px){
  .hero-shell{ background-position:24% center; }
}
.hero-shell.is-mounted{ background:none; min-height:0; }

/* ---- Referenz-Mockups: Laptop + Smartphone mit Hover-Scroll ----
   Screenshots liegen mit object-fit:cover / object-position:top im Display;
   Hover animiert object-position nach bottom. Die Distanz ergibt sich aus der
   tatsächlichen Screenshot-Höhe, beide Geräte laufen in derselben Dauer und
   damit automatisch leicht unterschiedlich schnell. ---- */
.device-combo{ position:relative; padding-right:9%; padding-bottom:5%; }
.dm-laptop{ position:relative; z-index:1; }
.dm-screen{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  background:#ffffff; border:5px solid #16191b; border-radius:12px 12px 0 0;
  box-shadow:0 22px 48px rgba(0,0,0,.42);
}
.dm-base{
  position:relative; height:12px; margin:0 -3.5%;
  background:linear-gradient(#454d51,#2c3134);
  border-radius:3px 3px 12px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.dm-base::after{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:16%; height:4px; background:#1b1f21; border-radius:0 0 7px 7px;
}
.dm-phone{
  position:absolute; right:17%; bottom:0; width:24%; z-index:2;
  background:#16191b; padding:4px;
  border:1px solid rgba(235,232,223,.18); border-radius:16px;
  box-shadow:0 16px 36px rgba(0,0,0,.5);
}
.dm-phone-screen{
  position:relative; overflow:hidden; aspect-ratio:9/19;
  background:#ffffff; border-radius:12px;
}
.dm-screen img.dm-scroll, .dm-phone-screen img.dm-scroll{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .dm-scroll{ transition:object-position 9s cubic-bezier(.33,.05,.3,.95); }
  .device-combo:hover .dm-scroll{ object-position:bottom; }
}

/* ---- Referenz-Slider: ein Projekt in voller Größe, Pfeile links/rechts ---- */
.ref-slider{ max-width:1000px; margin:0 auto; }
/* Sicherheitsnetz: der Slider-Wrapper darf nie vom Scroll-Reveal ausgeblendet bleiben */
.reveal-el:has(.ref-slider){ opacity:1 !important; transform:none !important; }
.ref-stage{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,20px); }
/* Zwei Projekte nebeneinander; jede Karte behält die bisherige Mockup-Größe */
.ref-view{
  flex:1 1 auto; min-width:0; display:grid; gap:clamp(20px,3vw,36px);
  grid-template-columns:repeat(2, minmax(0,1fr));
  animation:refIn .45s cubic-bezier(.22,.61,.36,1) both;
}
@media (max-width:819px){
  .ref-view{ grid-template-columns:minmax(0,1fr); max-width:420px; margin:0 auto; }
}
@keyframes refIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.ref-arrow{
  flex:none; cursor:pointer; width:46px; height:46px; border-radius:50%;
  background:#262b2e; border:1px solid rgba(235,232,223,.3); color:#ebe8df;
  font-size:26px; line-height:1; padding:0 0 3px; display:flex; align-items:center; justify-content:center;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.ref-arrow:hover{ background:#a44e20; border-color:#a44e20; color:#fff; transform:scale(1.08); }
.ref-dots{ display:flex; gap:9px; justify-content:center; margin-top:22px; }
.ref-dot{
  cursor:pointer; width:9px; height:9px; padding:0; border-radius:50%;
  background:rgba(235,232,223,.28); border:none; transition:background .25s ease, transform .25s ease;
}
.ref-dot:hover{ background:rgba(235,232,223,.55); }
.ref-dot.is-active{ background:#a44e20; transform:scale(1.35); }
@media (max-width:640px){
  .ref-arrow{ width:38px; height:38px; font-size:21px; }
  .ref-stage{ gap:6px; }
}
@media (prefers-reduced-motion:reduce){ .ref-slide{ animation:none; } }

/* ---- Blog-Karten (Werkstattnotizen): Schatten + wandernder Doppelpfeil beim Hover ---- */
.blog-card{ transition:box-shadow .3s ease, border-color .3s ease; }
.blog-card:hover{ box-shadow:0 16px 38px rgba(0,0,0,.4); border-color:rgba(235,232,223,.32); }
.blog-card-link{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#ebe8df; }
.blog-arrow-box{ position:relative; width:30px; height:30px; border-radius:50%; border:1px solid rgba(235,232,223,.3); overflow:hidden; transition:background .3s ease, border-color .3s ease; flex:none; }
.blog-arrow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; color:#ebe8df; transition:transform .4s cubic-bezier(.19,1,.22,1), opacity .4s ease; }
.blog-arrow-1{ opacity:1; }
.blog-arrow-2{ opacity:0; transform:translate(calc(-50% - 22px),-50%); }
.blog-card:hover .blog-arrow-box{ background:#a44e20; border-color:#a44e20; }
.blog-card:hover .blog-arrow-1{ opacity:0; transform:translate(calc(-50% + 22px),-50%); }
.blog-card:hover .blog-arrow-2{ opacity:1; transform:translate(-50%,-50%); }
@media (prefers-reduced-motion:reduce){ .blog-arrow{ transition:none; } }

/* ---- Verbundene Werkzeuge (Integrationen-Seite): Hub-and-Spoke-Grafik ----
   Pro Verbindung zwei Pfade übereinander: .ct-beam-base ist die durchgehende,
   blasse Linie (immer sichtbar), .ct-beam-flash ist ein kurzes farbiges Segment,
   das per stroke-dashoffset vom Icon zum Hub wandert (wie ein Lichtpunkt/Blitz). */
.ct-node{
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  width:58px; height:58px; box-shadow:0 8px 22px rgba(0,0,0,.35); position:relative; z-index:2; overflow:hidden;
}
.ct-node svg{ width:100%; height:100%; }
.ct-node-hub{ width:76px; height:76px; background:#a44e20; box-shadow:0 0 34px rgba(164,78,32,.45); padding:14px; }
.ct-node-square{ border-radius:16px; }
.ct-beam-base{ fill:none; stroke:rgba(235,232,223,.16); stroke-width:1.5; }
.ct-beam-flash{ fill:none; stroke:#F5B841; stroke-width:2; stroke-linecap:round; stroke-dasharray:34 900; filter:drop-shadow(0 0 4px rgba(245,184,65,.8)); animation:ctFlash 7s linear infinite; }
@keyframes ctFlash{ from{ stroke-dashoffset:220; } to{ stroke-dashoffset:-700; } }
@media (prefers-reduced-motion:reduce){ .ct-beam{ animation:none; } }

/* ---- Cookie-Consent: Icon unten links + Einstellungs-Dialog ---- */
.cookie-fab {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 9998;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #262b2e;
  border: 1px solid rgba(235,232,223,.22);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .2s ease, border-color .2s ease;
}
.cookie-fab:hover { transform: scale(1.1); border-color: #a44e20; }
.cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cookie-modal {
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  background: #262b2e;
  border: 1px solid rgba(235,232,223,.16);
  border-radius: 18px;
  padding: clamp(22px,4vw,34px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: revealScale .35s ease both;
}
.cookie-cat {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #353c3f;
  border: 1px solid rgba(235,232,223,.1);
  border-radius: 12px;
  padding: 15px 17px;
  margin-top: 12px;
}
.cookie-modal button:hover { filter: brightness(1.15); }
@media (max-width: 520px) {
  .cookie-fab { left: 12px; bottom: 12px; }
}