/* src/styles/riso-framework.css */
/* Riso 2.0 Framework-Ergänzungen. Farben, Fonts, Type- und Space-Skala sind Instatic-Tokens (var(--riso-red), var(--font-sans), var(--text-l), var(--space-m)). Hier: Schriftdatei, feste Typo-Werte aus dem Styleguide, Radien, Bewegung, Riso-Körnung und Verlauf. */
/* Schrift (05.11.): Installed Font «Cadiz 2.0» (Dateien CadizWeb-Regular 400 / CadizWeb-Bold 700) über Token var(--font-sans). Regular für alles, Bold nur für Buttons, Tags, Nav-Links und Footer-Titel. Keine weiteren Schriftnamen im Code verwenden. */
html,body,body :where(h1,h2,h3,h4,h5,h6,p,a,span,li,ul,ol,div,label,button,input,select,textarea,legend,summary,blockquote,figcaption,td,th,strong,em,b,i,small){font-family:var(--font-sans,"Cadiz 2.0",system-ui,sans-serif)!important}
:root{
  --font-features:normal;
  /* Typo-Grössen nach Styleguide (rem) */
  --fs-display:4.8rem;--fs-display-md:3.84rem;--fs-display-sm:3.07rem;
  --fs-h2:2.4rem;--fs-h3:1.8rem;--fs-lead:1.25rem;--fs-stat:2.4rem;--fs-stat-unit:1.2rem;--fs-body:1rem;--fs-small:.88rem;
  --lh-tight:1.2;--lh-body:1.5;--ls-heading:-.04em;--ls-body:-.02em;--fw-regular:400;--fw-bold:700;
  /* Layout */
  --container-max:1440px;--text-max:720px;
  --section-pad-desktop:96px 80px;--section-pad-tablet:64px 40px;--section-pad-phone:64px 24px;
  --radius-card:8px;--radius-pill:500px;
  /* Overlays */
  --scrim-70:rgba(0,0,0,.7);--scrim-20:rgba(0,0,0,.2);--hairline:rgba(136,136,136,.1);
  /* Semantik */
  --surface-page:var(--white);--surface-section:var(--paper);--surface-inverse:var(--black);
  --text-heading:var(--black);--text-body:var(--grey-600);--text-meta:var(--grey-500);--text-eyebrow:var(--riso-red);
  --text-on-ink:var(--paper);--text-on-dark:var(--white);--link-hover:var(--riso-green);--accent:var(--riso-red);
  /* Bewegung */
  --ease-standard:cubic-bezier(.4,0,.2,1);--dur-standard:600ms;--dur-fast:200ms;--blur-button:blur(5px);
  /* Riso-Körnung: drei SVG-Ebenen, papierfarbene Sprenkel */
  --riso-grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'n'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.45'%20numOctaves%3D'4'%20seed%3D'8'%20stitchTiles%3D'stitch'%20result%3D'a'%2F%3E%3CfeColorMatrix%20in%3D'a'%20values%3D'0%200%200%200%20.97%200%200%200%200%20.97%200%200%200%200%20.97%206.5%200%200%200%20-4.2'%20result%3D's'%2F%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.02'%20numOctaves%3D'2'%20seed%3D'3'%20stitchTiles%3D'stitch'%20result%3D'c'%2F%3E%3CfeColorMatrix%20in%3D'c'%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.2%200%200%200%200.2'%20result%3D'm'%2F%3E%3CfeComposite%20in%3D's'%20in2%3D'm'%20operator%3D'in'%2F%3E%3CfeColorMatrix%20values%3D'1%200%200%200%200%200%201%200%200%200%200%200%201%200%200%200%200%200%200.45%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --riso-grain-b:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'n'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.8'%20numOctaves%3D'3'%20seed%3D'41'%20stitchTiles%3D'stitch'%20result%3D'a'%2F%3E%3CfeColorMatrix%20in%3D'a'%20values%3D'0%200%200%200%20.97%200%200%200%200%20.97%200%200%200%200%20.97%205.5%200%200%200%20-3.3'%20result%3D's'%2F%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.03'%20numOctaves%3D'2'%20seed%3D'17'%20stitchTiles%3D'stitch'%20result%3D'c'%2F%3E%3CfeColorMatrix%20in%3D'c'%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.2%200%200%200%200.2'%20result%3D'm'%2F%3E%3CfeComposite%20in%3D's'%20in2%3D'm'%20operator%3D'in'%2F%3E%3CfeColorMatrix%20values%3D'1%200%200%200%200%200%201%200%200%200%200%200%201%200%200%200%200%200%200.5%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --riso-grain-c:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'n'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.62'%20numOctaves%3D'3'%20seed%3D'73'%20stitchTiles%3D'stitch'%20result%3D'a'%2F%3E%3CfeColorMatrix%20in%3D'a'%20values%3D'0%200%200%200%20.97%200%200%200%200%20.97%200%200%200%200%20.97%206%200%200%200%20-3.7'%20result%3D's'%2F%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.025'%20numOctaves%3D'2'%20seed%3D'29'%20stitchTiles%3D'stitch'%20result%3D'c'%2F%3E%3CfeColorMatrix%20in%3D'c'%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.2%200%200%200%200.2'%20result%3D'm'%2F%3E%3CfeComposite%20in%3D's'%20in2%3D'm'%20operator%3D'in'%2F%3E%3CfeColorMatrix%20values%3D'1%200%200%200%200%200%201%200%200%200%200%200%201%200%200%200%200%200%200.25%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --riso-grain-stack:var(--riso-grain-c),var(--riso-grain-b),var(--riso-grain);
  --noise-size:300px 300px;
}
html{font-family:var(--font-sans,"Cadiz 2.0",system-ui,sans-serif);font-weight:400;font-feature-settings:var(--font-features);-webkit-font-smoothing:antialiased;color:var(--black);background:var(--paper)}
body{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
h1,h2,h3,h4{margin:0;font-weight:var(--fw-regular);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--text-heading);text-wrap:balance}
h1{font-size:var(--fs-display)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
@media (max-width:991px){h1{font-size:var(--fs-display-md)}}
@media (max-width:767px){h1{font-size:var(--fs-display-sm)}}
/* Leere Hilfselemente (Körnung, Farbebenen, Plugin-Formen): im Editor erscheint sonst der Platzhalter «Text» */
.effect-noise,.effect-noise-a,.effect-noise-b,.effect-noise-c,[data-blob],[data-riso-face]:empty,[data-riso-shape]:empty{font-size:0!important;line-height:0!important;color:transparent!important}
/* Körnung als Overlay (Elternelement position:relative) */
.effect-noise{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:var(--riso-grain-stack);background-repeat:repeat;background-size:var(--noise-size)}
.effect-noise-a{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:var(--riso-grain);background-repeat:repeat;background-size:var(--noise-size)}
.effect-noise-b{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:var(--riso-grain-b);background-repeat:repeat;background-size:var(--noise-size)}
.effect-noise-c{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:var(--riso-grain-c);background-repeat:repeat;background-size:var(--noise-size)}
/* Riso-Verlauf in CSS: Farbebene in ::before, Körnung in ::after, beide nach unten ausgeblendet. Inhalt bleibt sichtbar. */
.effect-gradient{
  --rg-layers:
    radial-gradient(55% 45% at 0% 72%, rgba(255,236,140,.55) 0%, rgba(255,236,140,0) 80%),
    radial-gradient(75% 95% at 0% 0%, #ffeb00 0%, rgba(255,235,0,.9) 30%, rgba(255,235,0,0) 78%),
    radial-gradient(55% 85% at 33% 0%, #f9a74e 0%, rgba(249,167,78,.85) 35%, rgba(249,167,78,0) 80%),
    radial-gradient(85% 100% at 76% 0%, #ec0626 0%, rgba(236,6,38,.92) 42%, rgba(236,6,38,0) 85%),
    radial-gradient(70% 85% at 95% 62%, #ee4a79 0%, rgba(238,74,121,.85) 35%, rgba(238,74,121,0) 85%);
  position:relative;isolation:isolate}
.effect-gradient::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-2;background:var(--rg-layers);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.effect-gradient::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:1;
  background-image:var(--riso-grain-stack);background-repeat:repeat;background-size:300px 300px;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.effect-gradient > *{position:relative}
/* Footer: Verlauf ragt nach oben aus dem Element (bis 2× Höhe) und läuft weich aus. */
.effect-gradient-spill{--rgs-layers:
    radial-gradient(55% 24% at 0% 76%, rgba(255,236,140,.55) 0%, rgba(255,236,140,0) 80%),
    radial-gradient(75% 51% at 0% 100%, #ffeb00 0%, rgba(255,235,0,.9) 30%, rgba(255,235,0,0) 78%),
    radial-gradient(55% 45% at 33% 100%, #f9a74e 0%, rgba(249,167,78,.85) 35%, rgba(249,167,78,0) 80%),
    radial-gradient(85% 53% at 76% 100%, #ec0626 0%, rgba(236,6,38,.92) 42%, rgba(236,6,38,0) 85%),
    radial-gradient(70% 45% at 95% 79%, #ee4a79 0%, rgba(238,74,121,.85) 35%, rgba(238,74,121,0) 85%);
  position:relative;isolation:isolate}
.effect-gradient-spill::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-200%;pointer-events:none;z-index:-2;background:var(--rgs-layers);
  -webkit-mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.22) 74%,rgba(0,0,0,.07) 88%,transparent 100%);mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.22) 74%,rgba(0,0,0,.07) 88%,transparent 100%)}
.effect-gradient-spill::after{content:"";position:absolute;left:0;right:0;bottom:0;top:-200%;pointer-events:none;z-index:-1;opacity:1;
  background-image:var(--riso-grain-stack);background-repeat:repeat;background-size:300px 300px;
  -webkit-mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.22) 74%,rgba(0,0,0,.07) 88%,transparent 100%);mask-image:linear-gradient(to top,#000 18%,rgba(0,0,0,.92) 30%,rgba(0,0,0,.72) 44%,rgba(0,0,0,.46) 58%,rgba(0,0,0,.22) 74%,rgba(0,0,0,.07) 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Bewegung: nur die Farbebene driftet, die Körnung bleibt stehen. Zusatzklasse zu .effect-gradient */
.effect-gradient-drift::before{background-size:130% 130%;background-position:0% 0%;animation:rg-drift 10s ease-in-out infinite alternate}
@keyframes rg-drift{0%{background-position:0% 0%}33%{background-position:60% 20%}66%{background-position:100% 0%}100%{background-position:30% 35%}}
/* Mit Script riso-gradient-drift.js: Zufallsbewegung, Maus verwischt die Farbe. Löst den CSS-Loop ab */
.effect-gradient-drift[data-rg-live]::before{animation:none;background-position:var(--gx,50%) var(--gy,50%);background-size:var(--gsx,130%) var(--gsy,130%)}
@media (prefers-reduced-motion:reduce){.effect-gradient-drift::before{animation:none}}

/* ============================================================
   Client-First Basis
   ============================================================ */
/* Struktur */
.page-wrapper{position:relative;overflow-x:clip;background:var(--paper)}
.main-wrapper{position:relative}
.padding-global{padding-left:80px;padding-right:80px}
.container-large{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto}
.container-medium{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
.container-small{width:100%;max-width:var(--text-max);margin-left:auto;margin-right:auto}
.padding-section-small{padding-top:48px;padding-bottom:48px}
.padding-section-medium{padding-top:64px;padding-bottom:64px}
.padding-section-large{padding-top:128px;padding-bottom:128px}
.padding-section-xlarge{padding-top:160px;padding-bottom:160px}
@media (max-width:991px){.padding-global{padding-left:40px;padding-right:40px}.padding-section-large{padding-top:64px;padding-bottom:64px}.padding-section-xlarge{padding-top:96px;padding-bottom:96px}}
@media (max-width:767px){.padding-global{padding-left:24px;padding-right:24px}.padding-section-medium{padding-top:48px;padding-bottom:48px}.padding-section-xlarge{padding-top:80px;padding-bottom:80px}}

/* Typo-Klassen */
.heading-style-h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
.heading-style-h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
.heading-style-h3{font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
.heading-style-h4{font-size:var(--fs-lead);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
.heading-style-h5{font-size:var(--fs-body);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
.heading-style-h6{font-size:var(--fs-small);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);font-weight:var(--fw-regular)}
@media (max-width:991px){.heading-style-h1{font-size:var(--fs-display-md)}}
@media (max-width:767px){.heading-style-h1{font-size:var(--fs-display-sm)}.heading-style-h2{font-size:2rem}}
.text-size-large{font-size:var(--fs-lead);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-size-medium{font-size:1.1rem;line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-size-regular{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-size-small{font-size:var(--fs-small);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-size-tiny{font-size:.78rem;line-height:var(--lh-body);letter-spacing:0}
.text-weight-normal{font-weight:var(--fw-regular)}
.text-weight-bold{font-weight:var(--fw-bold)}
.text-style-allcaps{text-transform:uppercase;letter-spacing:.06em}
.text-style-nowrap{white-space:nowrap}
.text-style-italic{font-style:italic}
.text-style-strikethrough{text-decoration:line-through}
.text-style-link{text-decoration:underline;text-underline-offset:.15em}
.text-style-muted{opacity:.6}
.text-style-balance{text-wrap:balance}
.text-align-left{text-align:left}
.text-align-center{text-align:center}
.text-align-right{text-align:right}
.text-color-black{color:var(--black)}
.text-color-white{color:var(--white)}
.text-color-paper{color:var(--paper)}
.text-color-grey{color:var(--text-body)}
.text-color-grey-light{color:var(--text-meta)}
.text-color-red{color:var(--riso-red)}
.text-color-pink{color:var(--riso-pink)}
.text-color-orange{color:var(--riso-orange)}
.text-color-yellow{color:var(--riso-yellow)}
.text-color-green{color:var(--riso-green)}
.text-rich-text h2,.text-rich-text h3,.text-rich-text h4{margin-top:1.5em;margin-bottom:.5em}
.text-rich-text p{margin-bottom:1em}
.text-rich-text a{color:var(--riso-red)}

/* Hintergrund */
.background-color-paper{background-color:var(--paper)}
.background-color-white{background-color:var(--white)}
.background-color-black{background-color:var(--black)}
.background-color-grey{background-color:var(--grey-200)}
.background-color-red{background-color:var(--riso-red)}
.background-color-pink{background-color:var(--riso-pink)}
.background-color-orange{background-color:var(--riso-orange)}
.background-color-yellow{background-color:var(--riso-yellow)}
.background-color-green{background-color:var(--riso-green)}

/* Spacing: Grösse + Richtung kombinieren, z. B. "margin-bottom margin-medium". Skala 8-px-Raster in rem. */
.margin-0{margin:0}.margin-tiny{margin:.25rem}.margin-xxsmall{margin:.5rem}.margin-xsmall{margin:.75rem}.margin-small{margin:1rem}.margin-medium{margin:1.5rem}.margin-large{margin:2rem}.margin-xlarge{margin:3rem}.margin-xxlarge{margin:4rem}.margin-huge{margin:5rem}.margin-xhuge{margin:6rem}.margin-xxhuge{margin:8rem}
.padding-0{padding:0}.padding-tiny{padding:.25rem}.padding-xxsmall{padding:.5rem}.padding-xsmall{padding:.75rem}.padding-small{padding:1rem}.padding-medium{padding:1.5rem}.padding-large{padding:2rem}.padding-xlarge{padding:3rem}.padding-xxlarge{padding:4rem}.padding-huge{padding:5rem}.padding-xhuge{padding:6rem}.padding-xxhuge{padding:8rem}
.margin-top{margin-right:0;margin-bottom:0;margin-left:0}.margin-bottom{margin-top:0;margin-right:0;margin-left:0}.margin-left{margin-top:0;margin-right:0;margin-bottom:0}.margin-right{margin-top:0;margin-bottom:0;margin-left:0}.margin-vertical{margin-right:0;margin-left:0}.margin-horizontal{margin-top:0;margin-bottom:0}
.padding-top{padding-right:0;padding-bottom:0;padding-left:0}.padding-bottom{padding-top:0;padding-right:0;padding-left:0}.padding-left{padding-top:0;padding-right:0;padding-bottom:0}.padding-right{padding-top:0;padding-bottom:0;padding-left:0}.padding-vertical{padding-right:0;padding-left:0}.padding-horizontal{padding-top:0;padding-bottom:0}
.spacing-clean{margin:0;padding:0}

/* Hide */
.hide{display:none!important}
@media (max-width:991px){.hide-tablet{display:none!important}}
@media (max-width:767px){.hide-mobile-landscape{display:none!important}}
@media (max-width:478px){.hide-mobile-portrait{display:none!important}}

/* Weitere Utilities */
.max-width-full{width:100%;max-width:none}
.max-width-xxlarge{width:100%;max-width:1280px}
.max-width-xlarge{width:100%;max-width:1040px}
.max-width-large{width:100%;max-width:860px}
.max-width-medium{width:100%;max-width:var(--text-max)}
.max-width-small{width:100%;max-width:560px}
.max-width-xsmall{width:100%;max-width:400px}
.align-center{margin-left:auto;margin-right:auto}
.overflow-hidden{overflow:hidden}
.overflow-clip{overflow:clip}
.pointer-events-off{pointer-events:none}
.pointer-events-on{pointer-events:auto}
.z-index-1{position:relative;z-index:1}
.z-index-2{position:relative;z-index:2}
.layer{position:absolute;inset:0}
.icon-1x1-small{width:20px;height:20px;flex:none}
.icon-1x1-medium{width:32px;height:32px;flex:none}
.icon-height-small{height:20px}
.radius-card{border-radius:var(--radius-card)}
.radius-pill{border-radius:var(--radius-pill)}
.hairline-top{border-top:1px solid rgba(0,0,0,.12)}
.hairline-bottom{border-bottom:1px solid rgba(0,0,0,.12)}
.button-group{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.button-group.is-center{justify-content:center}
.button-group.is-vertical{flex-direction:column;align-items:stretch}



/* src/styles/riso-components.css */
/* Riso 2.0 Komponenten nach Client-First. Baut auf riso-framework.css auf (Tokens, Client-First-Basis, effect-noise, effect-gradient). Bewegung kommt aus dem Plugin dropzone.riso-ui (riso-ui.js, riso-motion.js, riso-calc.js), gesteuert über data-Attribute.
   Namensschema: [component]_[element] für Komponenten, is-[variante] für Modifier, Utilities sprechend (hide, margin-*, text-*). Breakpoints 991 / 767 / 478. */

/* 12.11. Footer: Schriftzug «dropZone» in «made with a hint of dropZone magic» mit Zeichenabstand -5 % */
.footer_component .footer_credit{letter-spacing:-.05em!important}

/* 13.11. CookieYes: schwebendes Cookie-Symbol unten links ausblenden (Einstellungen öffnet der Footer-Link «Privacy Center», Klasse cky-banner-element). Banner erst zeigen, wenn der Hero verlassen ist: newsletter-result.js setzt dann html.is-cookie-ready (Seiten ohne Hero sofort). */
.cky-btn-revisit-wrapper{display:none!important}
html:not(.is-cookie-ready) .cky-consent-container,html:not(.is-cookie-ready) .cky-overlay{display:none!important}
/* CookieYes-Banner und Einstellungsfenster im Riso-Look (13.11.): Papierton, schwarze Schrift, Pillen-Buttons, «Alle akzeptieren» schwarz gefüllt, übrige Buttons als schwarzer Ring. CookieYes setzt Farben inline, darum !important. */
.cky-consent-container,.cky-modal{font-family:inherit!important;letter-spacing:var(--ls-body)}
.cky-consent-container .cky-consent-bar,.cky-modal .cky-preference-center{background:var(--paper)!important;color:var(--black)!important;border:0!important;border-radius:var(--radius-card)!important;box-shadow:0 12px 40px rgba(0,0,0,.16)!important}
.cky-consent-container .cky-consent-bar{padding:24px!important}
.cky-title,.cky-preference-title,.cky-accordion-btn{font-family:inherit!important;font-weight:var(--fw-bold)!important;color:var(--black)!important;letter-spacing:var(--ls-heading)}
.cky-title{font-size:1.25rem!important;line-height:var(--lh-tight)!important;margin-bottom:8px!important}
.cky-notice-des,.cky-notice-des *,.cky-dma-content-wrapper,.cky-preference-content-wrapper,.cky-preference-content-wrapper *,.cky-accordion-header-des,.cky-accordion-header-des *,.cky-audit-table,.cky-audit-table *{font-family:inherit!important;color:var(--black)!important;font-size:var(--fs-small)!important;line-height:var(--lh-body)!important}
.cky-consent-container a,.cky-modal a,.cky-show-desc-btn{color:var(--black)!important;text-decoration:underline!important;text-underline-offset:3px}
.cky-notice-btn-wrapper{gap:10px;margin-top:20px!important}
.cky-btn{font-family:inherit!important;font-weight:var(--fw-bold)!important;font-size:var(--fs-small)!important;line-height:1.2!important;letter-spacing:var(--ls-body);padding:11px 20px!important;border-radius:var(--radius-pill)!important;border:2px solid var(--black)!important;background:transparent!important;color:var(--black)!important;box-shadow:none!important;opacity:1!important;transition:background .2s,color .2s}
.cky-btn:hover{background:var(--black)!important;color:var(--white)!important;opacity:1!important}
.cky-btn.cky-btn-accept{background:var(--black)!important;color:var(--white)!important}
.cky-btn.cky-btn-accept:hover{background:transparent!important;color:var(--black)!important}
.cky-btn:focus-visible,.cky-btn-close:focus-visible,.cky-accordion-btn:focus-visible,.cky-switch input:focus-visible{outline:2px solid var(--black)!important;outline-offset:2px}
.cky-preference-header,.cky-accordion,.cky-footer-wrapper,.cky-prefrence-btn-wrapper{border-color:rgba(0,0,0,.12)!important;background:transparent!important}
.cky-footer-shadow{display:none!important}
.cky-btn-close{box-shadow:none!important;outline-color:var(--black)!important}
.cky-always-active{color:var(--black)!important;font-weight:var(--fw-bold)!important}
.cky-switch input[type="checkbox"]{background:rgba(0,0,0,.25)!important}
.cky-switch input[type="checkbox"]:checked{background:var(--black)!important}
.cky-audit-table{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.12)!important}
[data-cky-tag="powered-by"],[data-cky-tag="detail-powered-by"]{background:transparent!important;color:var(--black)!important}
.cky-overlay{background:var(--scrim-70)!important;opacity:1!important}

/* Button. Markup: <a class="button is-secondary is-red" data-rnd-btn="1" data-kind="sek" data-color="#ec0626">Label</a>. Farbe pro Button als --btn. Fläche (Primär) bzw. Ring (Sekundär) liegt in ::before und wächst beim Hover auf 107 %. Farbfleck-Hover macht riso-ui.js. */
.button{--btn:var(--riso-red);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-family:inherit;font-weight:var(--fw-bold);font-size:var(--fs-body);letter-spacing:var(--ls-body);line-height:1.2;text-decoration:none;cursor:pointer;padding:10px 22px;border:2px solid transparent;border-radius:var(--radius-pill);background:transparent;color:var(--white);transition:color var(--dur-fast) var(--ease-standard)}
.button::before{content:"";position:absolute;inset:-2px;border-radius:var(--radius-pill);z-index:-1;pointer-events:none;background:var(--btn);transition:transform .5s cubic-bezier(.34,1.8,.5,1)}
.button:hover{color:var(--white)}
.button:hover::before{transform:scale(1.07)}
.button.is-red{--btn:var(--riso-red)}.button.is-pink{--btn:var(--riso-pink)}.button.is-orange{--btn:var(--riso-orange)}.button.is-yellow{--btn:var(--riso-yellow)}.button.is-green{--btn:var(--riso-green)}.button.is-black{--btn:var(--black)}
.button.is-orange,.button.is-yellow,.button.is-green,.button.is-orange:hover,.button.is-yellow:hover,.button.is-green:hover{color:var(--black)}
.button.is-secondary,.button.is-secondary:hover{color:var(--btn)}
.button.is-secondary::before{background:transparent;border:2px solid var(--btn)}
.button.is-text,.button.is-text:hover{color:var(--btn);padding:6px 0;border:0}
.button.is-text::before{display:none}
.button.is-small{padding:6px 16px;font-size:var(--fs-small)}
.button.is-large{padding:14px 30px;font-size:var(--fs-lead)}
.button.is-text.is-small,.button.is-text.is-large{padding-left:0;padding-right:0}
.button svg[data-arrow],.button .icon-1x1-small{width:20px;height:20px;flex:none;transition:margin-left .3s var(--ease-standard)}
.button.is-text:hover svg[data-arrow],.button.is-text:hover .icon-1x1-small{margin-left:6px}
.button:focus-visible{outline:2px solid var(--black);outline-offset:4px}

/* Tag. Pille, Bold. Gefüllt = weisse Schrift auf Farbe. is-outline = Weiss mit 2px Rahmen in der Farbe. is-dark auf Fotos. is-small = kleine Pille ohne Bold. */
.tag{--tag:var(--riso-red);display:inline-block;padding:8px 20px;border:2px solid transparent;border-radius:var(--radius-pill);font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.2;letter-spacing:var(--ls-body);color:var(--white);background:var(--tag);white-space:nowrap}
.tag.is-yellow{--tag:var(--riso-yellow)}.tag.is-orange{--tag:var(--riso-orange)}.tag.is-pink{--tag:var(--riso-pink)}.tag.is-red{--tag:var(--riso-red)}.tag.is-green{--tag:var(--riso-green)}.tag.is-black{--tag:var(--black)}
.tag.is-dark{--tag:rgba(0,0,0,.9)}
.tag.is-outline{background:var(--white);border-color:var(--tag);color:var(--tag)}
.tag.is-small{padding:0 12px;border:0;font-weight:var(--fw-regular);line-height:1.5}

/* Header. is-floating = transparent zuoberst (data-riso-header), Papier nach Scroll (.is-scrolled aus riso-motion.js). Burger via data-menu-toggle / data-menu-panel. */
.header_component{position:sticky;top:0;z-index:50;background:var(--paper);transition:background var(--dur-fast) var(--ease-standard)}
.header_component.is-floating{background:transparent;margin-bottom:-88px}
.header_component.is-floating.is-scrolled{background:var(--paper)}
.header_wrapper{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}
.header_logo{display:flex}
.header_logo img{width:207px;max-width:100%;display:block}
.header_nav{display:flex;align-items:center;gap:32px;margin-left:auto}
.header_link{font-weight:var(--fw-bold);font-size:1.1rem;letter-spacing:var(--ls-body);color:var(--grey-600)}
.header_link:hover,.header_link.is-active{color:var(--black)}
.header_component.is-floating:not(.is-scrolled) .header_link{color:var(--black)}
.header_right{display:flex;align-items:center;gap:16px}
.header_burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:transparent;padding:0;cursor:pointer}
.header_mobile-menu{display:none;flex-direction:column;gap:4px;padding:8px 24px 24px;background:var(--paper)}
.header_mobile-menu a{font-weight:var(--fw-bold);font-size:1.5rem;padding:12px 0;color:var(--black)}
.header_mobile-menu.is-open{display:flex}
.padding-header-offset{padding-top:136px}
@media (max-width:991px){.header_nav{display:none}.header_burger{display:flex}}
@media (max-width:767px){.header_wrapper{height:72px}.header_component.is-floating{margin-bottom:-72px}.header_logo img{width:160px}.header_right .button{display:none}.padding-header-offset{padding-top:104px}}

/* Footer. Verlauf (effect-gradient-spill) beginnt ganz unten und reicht höher (3× Footer-Höhe). */
.footer_component{position:relative;padding-top:200px;padding-bottom:32px;background:transparent}
.footer_component.effect-gradient-spill::before,.footer_component.effect-gradient-spill::after{top:-300%}
.footer_wrapper{position:relative;display:flex;flex-direction:column;gap:48px}
.footer_grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.footer_logo img{width:250px;max-width:100%}
.footer_title{margin:0 0 12px;font-weight:var(--fw-bold);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.footer_links{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.footer_contact{display:flex;flex-direction:column;gap:16px;font-size:.95rem}
.footer_rule{height:1px}
.footer_bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:var(--fs-small)}
/* Footer-Farbe: alles schwarz (Lesbarkeit auf Gelb): Texte, Links, Logo, Linie. Hover = 60 % Deckkraft. */
.footer_component,.footer_title,.footer_contact,.footer_bottom,.footer_component a{color:#000000!important}
.footer_component a:hover{color:#000000!important;opacity:.6}
.footer_rule{background:#000000!important}
.footer_legal{display:flex;gap:8px 20px}
@media (max-width:991px){.footer_component{padding-top:160px;padding-bottom:24px}.footer_grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer_logo{grid-column:1/-1}}
@media (max-width:767px){.footer_component{padding-top:120px}.footer_grid{grid-template-columns:minmax(0,1fr);gap:32px}.footer_grid > :last-child{grid-column:1/-1}.footer_links{gap:0}.footer_links a{padding:6px 0}.footer_contact a{display:inline-block;padding:6px 0}.footer_legal a{padding:10px 0}}

/* Hero Home: Verlauf + treibende Formen (data-riso-blobs) + Titel als Treppe. Höhe: Desktop volle Bildschirmhöhe mit Obergrenze (die Instatic-Vorschau ist so hoch wie die ganze Seite, 100vh wäre dort endlos), Tablet/Mobile so hoch wie der Inhalt. Verlauf, Auslauf und Ebenen: Blöcke «05.11.» und «11.11. Home-Hero» weiter unten. Schriftgrösse des Titels und padding-top Desktop kommen aus dem Selectors-Panel. */
.hero-home_component{position:relative;isolation:isolate;overflow:hidden;padding:48px 80px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
/* Desktop: mindestens 1000px hoch (Untergrenze, 11.11.); auf hohen Bildschirmen füllt der Hero den Bildschirm (height:100vh im Selectors-Panel). */
.main-wrapper .hero-home_component{min-height:1000px!important}
.hero-home_gradient{position:absolute;inset:0;z-index:-2;--rg-layers:radial-gradient(70% 90% at 100% 0%,#ffeb00 0%,rgba(255,235,0,.9) 30%,rgba(255,235,0,0) 75%),radial-gradient(60% 80% at 62% 0%,#f9a74e 0%,rgba(249,167,78,.9) 35%,rgba(249,167,78,0) 80%),radial-gradient(80% 95% at 22% 0%,#ec0626 0%,rgba(236,6,38,.92) 40%,rgba(236,6,38,0) 85%),radial-gradient(60% 80% at 0% 60%,#ee4a79 0%,rgba(238,74,121,.85) 35%,rgba(238,74,121,0) 85%)}
.hero-home_shapes [data-blob]:nth-child(1){width:14%}.hero-home_shapes [data-blob]:nth-child(2){width:13%}.hero-home_shapes [data-blob]:nth-child(3){width:12%}.hero-home_shapes [data-blob]:nth-child(4){width:11%}.hero-home_shapes [data-blob]:nth-child(5){width:13%}.hero-home_shapes [data-blob]:nth-child(6){width:10%}.hero-home_shapes [data-blob]:nth-child(7){width:12%}.hero-home_shapes [data-blob]:nth-child(8){width:11%}
.hero-home_shapes{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-home_shapes [data-blob]{position:absolute;left:0;top:0;aspect-ratio:1;width:12%;mix-blend-mode:multiply;opacity:.9;will-change:transform}
.hero-home_fade{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:-1;background:linear-gradient(to top,var(--paper) 0%,rgba(243,242,233,.85) 30%,rgba(243,242,233,0) 100%)}
.hero-home_eyebrow{position:relative;margin:0;color:var(--black)}
/* Titel als Treppe: The gerade, Magic gekippt darunter, of gerade, Riso gekippt rechts daneben. Masse in em, skaliert mit font-size. */
.hero-home_title{position:relative;display:block;margin:0;width:5.1em;height:3.15em;font-size:9.5rem;line-height:1;letter-spacing:var(--ls-heading);color:var(--black);rotate:0deg;align-self:center}
.hero-home_line{display:contents}
.hero-home_word{position:absolute;display:inline-block;transform-origin:left bottom;white-space:nowrap}
.hero-home_word.is-1{left:0;top:0;rotate:0deg}
.hero-home_word.is-2{left:.57em;top:1.02em;rotate:-12deg}
.hero-home_word.is-3{left:1.92em;top:1.82em;rotate:0deg}
.hero-home_word.is-4{left:3.25em;top:2.02em;rotate:-12deg}
.hero-home_bottom{position:relative;width:100%;max-width:var(--container-max);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.hero-home_copy{display:flex;flex-direction:column;gap:12px;max-width:560px}
.hero-home_copy p{margin:0;color:var(--black)}
.hero-home_copy .text-size-small{margin-top:4px}
.hero-home_bottom .button-group{margin-top:8px}
/* Tablet/Mobile: Text direkt unter dem Titel statt ganz unten, Höhe = Inhalt, Abstand oben unter dem schwebenden Header */
@media (max-width:991px){.hero-home_component{padding:40px}.main-wrapper .hero-home_component{justify-content:flex-start;gap:64px;min-height:0!important;padding-bottom:80px!important}.main-wrapper .hero-home_component,.hero-home_component.padding-header-offset{padding-top:152px!important}.hero-home_title{font-size:6.5rem}}
@media (max-width:767px){.hero-home_component{padding:32px 24px}.main-wrapper .hero-home_component{gap:48px;padding-bottom:56px!important}.main-wrapper .hero-home_component,.hero-home_component.padding-header-offset{padding-top:120px!important}.hero-home_title{font-size:3.6rem}.hero-home_bottom{flex-direction:column;align-items:flex-start}}
/* Navigation (11.11.): Aktiver Menüpunkt und Hover sind auf allen Seiten grün, deutsch und französisch, Desktop und Mobile-Menü. Aktiv = aria-current ODER Klasse is-active (setzt das Skript); die is-active-Regeln liegen zusätzlich im Selectors-Panel (ebenfalls grün). */
header a.is-active:not(.button),.header_mobile-menu a.is-active:not(.button){color:#00A95C!important}
/* Logo: kein Aktiv-Zustand (auch nicht auf der Startseite), nur Hover grün */
html body .header_component a.header_logo:is(.is-active,[aria-current]):not(:hover){color:inherit!important}
header a[aria-current="page"]:not(.button),.header_mobile-menu a[aria-current="page"]:not(.button),nav a[aria-current="page"]:not(.button){color:#00A95C!important}
header a[href]:not(.button):hover,header a[href][aria-current="page"]:not(.button):hover,body:has(.hero-sub_grid.is-ticket) header a:is([href="/workshops"],[href="/fr/ateliers"]):not(.button):hover{color:#00A95C!important}
.header_nav{margin-left:auto;justify-content:flex-end}
@media (min-width:992px){.header_right{display:none}}
/* Workshop-Detailseiten (Template mit Ticket-Hero): «Workshops» als aktiv markieren */
body:has(.hero-sub_grid.is-ticket) header a:is([href="/workshops"],[href="/fr/ateliers"]):not(.button){color:#00A95C!important}
/* Farbsystem pro Seite (29.10.): Eyebrows + Buttons + Textlinks tragen die Farbe der Seite bzw. des Linkziels.
   Seitenfarbe: Marker <div class="page-color" data-page-color="orange|pink|red"> oben in der Seite. Ohne Marker (Home) = schwarz.
   Section-Farbe: Seitenfarbe, ausser die Section verlinkt auf eine Kategorie (Workshops/Anlass = pink, Produktion = rot, Risographie/über uns = orange). Mehrere Kategorien oder Gutschein = schwarz (neutral). Hero behält die Seitenfarbe.
   Buttons/Textlinks: Farbe ihres Linkziels, sonst Section-Farbe. Orange Buttons mit schwarzer Schrift. */
.page-color{display:none}
/* Carousel: setzt scrollLeft jedes Frame selbst. Smooth-Scroll bremst das aus (Drag hakt) → hier immer auto */
[data-carousel]{scroll-behavior:auto!important}
/* Sticker: Mehrfachklick markiert keinen Text (sonst wird die Eyebrow daneben ausgewählt) */
.sticker_component,.sticker_component *,[data-smiley],[data-riso-face]{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Sticker innerhalb der Content-Breite (container-large 1440px + padding-global) statt am Bildschirmrand */
.sticker_component{--edge:max(80px,calc((100% - 1440px) / 2));--jit:56px;--js:1}
@media (max-width:991px){.sticker_component{--edge:40px;--js:.6}}
@media (max-width:767px){.sticker_component{--edge:24px;--js:.35}}
/* wie von Hand aufgeklebt: je nach Section unterschiedlich weit von der Kante nach innen */
section:nth-of-type(7n+1) .sticker_component{--jit:24px}
section:nth-of-type(7n+2) .sticker_component{--jit:61px}
section:nth-of-type(7n+3) .sticker_component{--jit:37px}
section:nth-of-type(7n+4) .sticker_component{--jit:74px}
section:nth-of-type(7n+5) .sticker_component{--jit:46px}
section:nth-of-type(7n+6) .sticker_component{--jit:68px}
section:nth-of-type(7n) .sticker_component{--jit:31px}
.sticker_component:not(.is-right){left:calc(var(--edge) + var(--jit) * var(--js))!important;right:auto!important}
.sticker_component.is-right{right:calc(var(--edge) + var(--jit) * var(--js))!important;left:auto!important}
/* Smooth Scroll: Ankersprünge (#termine, #anfrage …) gleiten, Ziel landet unter dem schwebenden Header. Horizontale Scrollbereiche (Wischgalerie, Preistabelle) gleiten ebenfalls. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (max-width:767px){html{scroll-padding-top:72px}}
/* 03.11. Anker-Ziele: Oberkante der Section schliesst genau unten an die Navbar an (Header 88px, Mobile 72px) */
[id]{scroll-margin-top:0}
.gallery_list[data-carousel-mobile],.review_list{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Button-Gruppen: horizontaler Abstand 24px (war 12px), damit sich wachsende Buttons beim Hover nicht berühren */
.button-group{column-gap:24px}
/* Newsletter: 24px zwischen Feld und Button, Button immer schwarz */
.newsletter_row{gap:24px!important}
.newsletter_form > p:first-child{color:#000000!important}
.main-wrapper section .newsletter_row .button,.newsletter_row .button{--btn:#000000;--bi:#FFFFFF}
.main-wrapper{--page-color:#000000;--page-ink:#FFFFFF}
.main-wrapper:has([data-page-color="orange"]){--page-color:#F9A74E;--page-ink:#000000}
.main-wrapper:has([data-page-color="pink"]){--page-color:#EE4A79;--page-ink:#FFFFFF}
.main-wrapper:has([data-page-color="red"]){--page-color:#EC0626;--page-ink:#FFFFFF}
.main-wrapper section{--sc:var(--page-color);--sci:var(--page-ink)}
/* 11.11. Farbsystem kennt auch die französischen Linkziele (/fr/…), damit FR-Seiten dieselben Farben tragen wie die deutschen */
.main-wrapper section:not(.section_hero):has(a[href^="/risographie"],a[href^="/ueber-uns"],a[href^="/fr/risographie"],a[href^="/fr/a-propos"]){--sc:#F9A74E;--sci:#000000}
.main-wrapper section:not(.section_hero):has(a[href^="/produktion"],a[href^="/fr/production"]){--sc:#EC0626;--sci:#FFFFFF}
.main-wrapper section:not(.section_hero):has(a[href^="/workshops"],a[href^="/individueller-workshop"],a[href^="/exploriso"],a[href^="/calendar"],a[href^="/teamanlass"],a[href^="/fr/atelier"],a[href^="/fr/exploriso"],a[href^="/fr/calendrier"],a[href^="/fr-ateliers"],.workshop-card_component){--sc:#EE4A79;--sci:#FFFFFF}
.main-wrapper section:not(.section_hero):has(a[href^="/risographie"],a[href^="/ueber-uns"],a[href^="/fr/risographie"],a[href^="/fr/a-propos"]):has(a[href^="/produktion"],a[href^="/workshops"],a[href^="/individueller-workshop"],a[href^="/fr/production"],a[href^="/fr/atelier"],a[href^="/fr-ateliers"]),.main-wrapper section:not(.section_hero):has(a[href^="/produktion"],a[href^="/fr/production"]):has(a[href^="/workshops"],a[href^="/individueller-workshop"],a[href^="/fr/atelier"],a[href^="/fr-ateliers"]),.main-wrapper section:has(.voucher_copy){--sc:#000000;--sci:#FFFFFF}
.main-wrapper section :is(.section-header_component,.split_copy,.hero-sub_copy) > p[class*="text-color-"]:first-child:not(.text-color-grey):not(.text-color-grey-light){color:var(--sc)!important}
.main-wrapper section :is(.button,.text-link){--btn:var(--sc)}
.main-wrapper section :is(.button,.text-link):is([href^="/risographie"],[href^="/ueber-uns"],[href^="/fr/risographie"],[href^="/fr/a-propos"]){--btn:#F9A74E;--bi:#000000}
.main-wrapper section :is(.button,.text-link):is([href^="/produktion"],[href^="/fr/production"]){--btn:#EC0626;--bi:#FFFFFF}
.main-wrapper section :is(.button,.text-link):is([href^="/workshops"],[href^="/individueller-workshop"],[href^="/exploriso"],[href^="/calendar"],[href^="/teamanlass"],[href^="/fr/atelier"],[href^="/fr/exploriso"],[href^="/fr/calendrier"],[href^="/fr-ateliers"]){--btn:#EE4A79;--bi:#FFFFFF}
.main-wrapper section .text-link:not(.text-color-white):not(.text-color-paper),.main-wrapper section .text-link:not(.text-color-white):not(.text-color-paper):hover{color:var(--btn)!important}
.main-wrapper section .button:not(.is-secondary):not(.is-text),.main-wrapper section .button:not(.is-secondary):not(.is-text):hover{color:var(--bi,var(--sci))!important}
.main-wrapper section .button:is(.is-secondary,.is-text),.main-wrapper section .button:is(.is-secondary,.is-text):hover{color:var(--btn)!important}

/* Hero Unterseite: Text links, Bild 4:5 rechts */
.hero-sub_component{position:relative;background:var(--paper);min-height:760px;padding:48px 80px 80px;display:flex;align-items:center}
.hero-sub_grid{width:100%;max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:center}
.hero-sub_copy{display:flex;flex-direction:column;gap:24px}
/* Hero C (Workshop-Detail): Text links, Ticket rechts */
.hero-sub_grid.is-ticket{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.workshop_hero-ticket{display:flex;justify-content:flex-end}
@media (max-width:767px){.hero-sub_grid.is-ticket{grid-template-columns:minmax(0,1fr)}.workshop_hero-ticket{justify-content:stretch}}
/* Galerie 3 Bilder (Workshop-Detail): 2:1, grosses Bild links */
.gallery_list.is-3{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2/1}
.gallery_list.is-3 .gallery_item:nth-child(1){grid-column:1 / span 8;grid-row:1 / span 2}
.gallery_list.is-3 .gallery_item:nth-child(2){grid-column:9 / span 4;grid-row:1 / span 1}
.gallery_list.is-3 .gallery_item:nth-child(3){grid-column:9 / span 4;grid-row:2 / span 1}
@media (max-width:767px){.gallery_list.is-3{grid-template-rows:none;aspect-ratio:auto}.gallery_list.is-3 .gallery_item:nth-child(n){grid-column:auto;grid-row:auto}.gallery_list.is-3 .gallery_item:nth-child(1){grid-column:1 / span 2}}
.hero-sub_image-wrapper{position:relative;aspect-ratio:4/5;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200);width:100%;max-width:520px;justify-self:end}
.hero-sub_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:991px){.hero-sub_component{padding:40px 40px 64px;min-height:0}.hero-sub_grid{gap:40px}}
@media (max-width:767px){.hero-sub_component{padding:32px 24px 56px}.hero-sub_grid{grid-template-columns:minmax(0,1fr)}.hero-sub_image-wrapper{max-width:none}}

/* Workshop-Karte. Ganze Karte ist der Link. Bild zoomt auf Hover, «Mehr Infos»-Tag folgt der Maus (data-cursor-tag, riso-motion.js). */
.workshop-card_component{display:flex;flex-direction:column;gap:16px;width:100%;color:var(--black);text-decoration:none}
.workshop-card_component:hover{color:var(--black)}
.workshop-card_media{position:relative;aspect-ratio:7/8;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.workshop-card_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-standard) var(--ease-standard)}
.workshop-card_component:hover .workshop-card_image{transform:scale(1.05)}
.workshop-card_cursor{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s var(--ease-standard),transform .35s cubic-bezier(.2,.8,.3,1);will-change:transform}
.workshop-card_badge{position:absolute;top:16px;right:16px}
.workshop-card_status{position:absolute;top:16px;left:16px;z-index:2}
.workshop-card_date{position:absolute;left:0;bottom:0;min-width:112px;padding:14px 18px 12px;border-top-right-radius:var(--radius-card);background:var(--riso-pink);color:var(--paper);display:flex;flex-direction:column;overflow:hidden}
.workshop-card_date.is-orange{background:var(--riso-orange);color:var(--black)}.workshop-card_date.is-yellow{background:var(--riso-yellow);color:var(--black)}.workshop-card_date.is-red{background:var(--riso-red)}
.workshop-card_date>span{position:relative}
.workshop-card_date-day{font-size:var(--fs-small);line-height:1.2}
.workshop-card_date-number{font-size:var(--fs-h2);line-height:1;letter-spacing:var(--ls-heading)}
.workshop-card_date-month{font-size:var(--fs-small);line-height:1.4}
.workshop-card_head{display:flex;flex-direction:column;gap:6px}
.workshop-card_kicker{margin:0;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-meta);text-transform:uppercase}
.workshop-card_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
.workshop-card_facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
.workshop-card_fact{padding:10px 0;display:flex;flex-direction:column}
.workshop-card_fact+.workshop-card_fact{padding-left:16px;border-left:1px solid rgba(0,0,0,.12)}
.workshop-card_fact-label{font-size:.78rem;color:var(--text-meta);text-transform:uppercase}
.workshop-card_fact-value{font-size:var(--fs-body)}
/* Angebotskarten (Home): gleicher Hover wie Workshop-Karte. Bild zoomt, grüne Pille folgt der Maus (data-cursor-tag auf offer_media), Bild ist Link (offer_media-link, display:contents). */
.offer_media[data-cursor-tag]{position:relative;overflow:hidden}
.offer_media-link{display:contents}
.offer_card .offer_image{transition:transform var(--dur-standard) var(--ease-standard)}
.offer_card:hover .offer_image{transform:scale(1.05)}
/* Workshop-Detail «Inhalt und Ergebnis»: Text und «Das nimmst du mit» als zentrierter Block (720px, linksbündig), Linien nur so lang wie der Text. Galerie bleibt volle Breite. */
.section_inhalt .container-large.is-stack{align-items:center!important}
.section_inhalt .container-large.is-stack>.section-header_component,.section_inhalt .container-large.is-stack>.tech-list_component,.section_inhalt .container-large.is-stack>.tech-list_component.is-full{width:66.6667%!important;max-width:66.6667%!important;margin-left:auto!important;margin-right:auto!important;text-align:left!important}
@media (max-width:991px){.section_inhalt .container-large.is-stack>.section-header_component,.section_inhalt .container-large.is-stack>.tech-list_component,.section_inhalt .container-large.is-stack>.tech-list_component.is-full{width:100%!important;max-width:100%!important}}
.section_inhalt .container-large.is-stack>.gallery_list{align-self:stretch!important;width:100%!important;max-width:none!important}

/* Eintrittskarte (Ticket). Kopf = Dreifarbendruck mit Körnung, Rest orange Outline mit Perforation. is-wide = Querformat (Buchung). */
.ticket_component{position:relative;width:100%;max-width:440px;rotate:1deg}
.ticket_head{position:relative;isolation:isolate;color:var(--paper);padding:32px 36px 36px;display:flex;flex-direction:column;gap:20px}
.ticket_ink{position:absolute;inset:0;overflow:hidden;border-radius:12px 12px 0 0;z-index:-1}
.ticket_ink.is-a{background:var(--riso-orange)}
.ticket_ink.is-b{background:var(--riso-red);transform:translate(8px,4px) rotate(1.5deg)}
.ticket_ink-overlap{position:absolute;inset:0;border-radius:12px 12px 0 0;background:var(--riso-pink);transform:rotate(-1.5deg) translate(-8px,-4px);font-size:0;line-height:0}
.ticket_top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.ticket_label{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase}
.ticket_date{display:flex;align-items:flex-end;gap:16px}
.ticket_day{font-size:5.6rem;line-height:.85;letter-spacing:-.05em}
.ticket_when{display:flex;flex-direction:column;font-size:1.1rem;line-height:1.3;padding-bottom:4px}
.ticket_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--paper)}
.ticket_perforation{position:relative;height:0;border-top:2px dashed var(--riso-orange);margin:10px 20px 0}
.ticket_perforation-line{display:none;font-size:0;line-height:0}
.ticket_body{position:relative;border:2px solid var(--riso-orange);border-top:0;border-radius:0 0 12px 12px;padding:28px 32px 32px;display:flex;flex-direction:column;gap:24px}
.ticket_facts{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.ticket_fact{display:flex;flex-direction:column;gap:2px}
.ticket_fact-label{font-size:.78rem;color:var(--text-meta);text-transform:uppercase}
.ticket_fact-value{font-size:1.1rem;letter-spacing:var(--ls-body);color:var(--black)}
.ticket_cta{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.ticket_note{margin:0;text-align:center;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-meta)}
.ticket_component.is-wide{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.3fr);max-width:none;rotate:-.6deg}
.ticket_component.is-wide .ticket_head{border-radius:12px 0 0 12px;padding:40px 48px 48px;justify-content:space-between;gap:40px}
.ticket_component.is-wide .ticket_ink{border-radius:inherit}
.ticket_component.is-wide .ticket_ink.is-b{transform:translate(8px,4px) rotate(.8deg)}
.ticket_component.is-wide .ticket_ink-overlap{border-radius:inherit;transform:rotate(-.8deg) translate(-8px,-4px)}
.ticket_component.is-wide .ticket_perforation{position:relative;z-index:1;display:flex;justify-content:center;height:auto;border:0;margin:20px 0}
.ticket_component.is-wide .ticket_perforation-line{display:block;width:0;border-left:2px dashed var(--riso-orange)}
.ticket_component.is-wide .ticket_body{margin-left:-44px;border:2px solid var(--riso-orange);border-left:0;border-radius:0 12px 12px 0;padding:40px 48px 48px 76px;justify-content:space-between;gap:32px}
.ticket_component.is-wide .ticket_facts{gap:20px 24px}
.ticket_component.is-wide .ticket_cta{flex-direction:row;align-items:center;gap:20px}
.ticket_component.is-wide .ticket_note{text-align:left}
@media (max-width:767px){.ticket_component,.ticket_component.is-wide{rotate:none;max-width:none}.ticket_component.is-wide{grid-template-columns:minmax(0,1fr)}.ticket_component.is-wide .ticket_head{border-radius:12px 12px 0 0;padding:32px 28px}.ticket_component.is-wide .ticket_perforation{height:0;margin:10px 20px 0;border-top:2px dashed var(--riso-orange);display:block}.ticket_component.is-wide .ticket_perforation-line{display:none}.ticket_component.is-wide .ticket_body{margin:0;border:2px solid var(--riso-orange);border-top:0;border-radius:0 0 12px 12px;padding:28px 28px 32px}.ticket_day{font-size:4rem}.ticket_component.is-wide .ticket_cta{flex-direction:column;align-items:stretch}}

/* Bewertungskarte (Review). Farbe via is-orange / is-red / is-yellow (Standard Pink). review_list = Endlos-Carousel (data-carousel). */
.review_component{position:relative;margin:0;min-height:400px;padding:32px 28px;border-radius:var(--radius-card);overflow:hidden;background:var(--riso-pink);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.review_quote{position:relative;margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--paper)}
.review_source{position:relative;margin:0;font-size:var(--fs-small);color:var(--paper)}
.review_component.is-orange{background:var(--riso-orange)}.review_component.is-red{background:var(--riso-red)}.review_component.is-yellow{background:var(--riso-yellow)}
.review_component.is-orange .review_quote,.review_component.is-orange .review_source,.review_component.is-yellow .review_quote,.review_component.is-yellow .review_source{color:var(--black)}
.review_list{display:flex;gap:32px;width:100%;overflow:hidden}
.review_list .review_component{flex:none;width:max(260px,calc((100% - 96px) / 3.2));min-height:0;aspect-ratio:331/400}
.review_list .review_quote{font-size:clamp(1.4rem,2.2vw,1.8rem)}

/* Personenkarte (Team): Name auf Farbband unten links */
.team-card_component{display:flex;flex-direction:column;gap:20px;width:100%}
.team-card_media{position:relative;aspect-ratio:7/8;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.team-card_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-card_band{position:absolute;left:0;bottom:0;max-width:85%;padding:16px 20px;border-top-right-radius:var(--radius-card);background:var(--riso-red);color:var(--paper);overflow:hidden}
.team-card_name{position:relative;margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
.team-card_role{position:relative;margin:2px 0 0;font-size:var(--fs-small);text-transform:uppercase}
.team-card_text{margin:0;padding:0 24px;color:var(--text-body)}

/* Beispielkarte (Example): Text unter Bild, ganze Karte Link */
.example-card_component{display:flex;flex-direction:column;gap:20px;width:100%;color:var(--black);text-decoration:none}
.example-card_component:hover{color:var(--black)}
.example-card_media{position:relative;aspect-ratio:7/8;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.example-card_media.is-fixed{aspect-ratio:auto;height:400px}
.example-card_meta{display:flex;flex-direction:column;gap:4px}
.example-card_lead{margin:0;color:var(--black)}
.example-card_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-standard) var(--ease-standard)}
.example-card_component:hover .example-card_image{transform:scale(1.05)}
.example-card_body{display:flex;flex-direction:column;gap:12px}
.example-card_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
.example-card_text{margin:0;color:var(--text-body)}

/* Farbkarten (Ink): die sechs Druckfarben der Maschine. Hex-Werte fest im Markup, bewusst keine Tokens. */
.ink_list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px 24px}
.ink_item{display:flex;flex-direction:column;gap:16px}
.ink_swatch{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden}
.ink_names{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
.ink_specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:var(--fs-small)}
.ink_spec{display:flex;flex-direction:column}
.ink_spec:nth-child(2){text-align:center}.ink_spec:nth-child(3){text-align:right}
.ink_spec-label{color:var(--text-meta)}
.ink_spec-label{font-size:.78rem;color:var(--black)}.ink_spec-value{color:var(--text-meta)}
.ink_list.is-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:991px){.ink_list.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.ink_list.is-3{grid-template-columns:minmax(0,1fr)}}

/* Ablauf (Steps) */
.steps_list{max-width:760px;display:flex;flex-direction:column}
.steps_item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:baseline;padding:28px 0;border-top:1px solid rgba(0,0,0,.12)}
.steps_item:first-child{border-top:0}
.steps_number{font-size:3.2rem;line-height:1;letter-spacing:var(--ls-heading);color:var(--riso-red)}
.steps_body{display:flex;flex-direction:column;gap:6px}
.steps_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading)}
.steps_text{margin:0;color:var(--text-body)}
@media (max-width:767px){.steps_item{grid-template-columns:40px minmax(0,1fr);gap:12px}.steps_number{font-size:var(--fs-h2)}}
/* Farbe der Zahl pro Bereich: is-pink (Workshops), is-black (Risographie, Produktion), Standard Rot. */
.steps_list.is-pink .steps_number{color:var(--riso-pink)}
.steps_list.is-black .steps_number{color:var(--black)}

/* Infoliste / Checkliste (Styleguide «Was wir liefern / Was du mitbringst»): Titel links (260px, h2-Grösse), rechts Hairline-Liste mit Pentagon-Punkt in der Akzentfarbe (--bullet). Farbe via is-pink / is-black (Standard Rot). */
.info-list_component{--bullet:var(--riso-red);display:flex;flex-direction:column;gap:20px;max-width:860px}
.info-list_component.is-pink{--bullet:var(--riso-pink)}.info-list_component.is-black{--bullet:var(--black)}
.info-list_item{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:16px;align-items:start;padding-bottom:20px;border-bottom:1px solid rgba(0,0,0,.12)}
.info-list_item:last-child{padding-bottom:0;border-bottom:0}
.info-list_title{margin:0;font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--black)}
.info-list_points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12);color:var(--text-body)}
.info-list_points li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.info-list_points li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--bullet);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)}
.info-list_points.is-muted::before,.info-list_points.is-muted li::before{opacity:.6}
@media (max-width:767px){.info-list_item{grid-template-columns:minmax(0,1fr);gap:8px}.info-list_title{font-size:var(--fs-h3)}}

/* Zeitstrahl (Herkunft): 4 Spalten, schwarze Linie oben, Jahr gross */
.timeline_list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.timeline_item{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--black);padding-top:20px}
.timeline_year{margin:0;font-size:var(--fs-h2);line-height:1.1;letter-spacing:var(--ls-heading);color:var(--black)}
.timeline_prefix{font-size:var(--fs-lead);letter-spacing:var(--ls-body);margin-right:.25em}
.timeline_title{margin:0;font-size:var(--fs-lead);line-height:var(--lh-tight);letter-spacing:var(--ls-body);color:var(--black)}
.timeline_text{margin:0;color:var(--text-body)}
@media (max-width:991px){.timeline_list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.timeline_list{grid-template-columns:minmax(0,1fr)}}

/* Standort: Kartenfläche füllt die Höhe, darunter Adresse und Textlink */
.location_component{display:flex;flex-direction:column;gap:16px}
.location_map{position:relative;flex:1;min-height:240px;border-radius:var(--radius-card);background:var(--grey-200);display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);color:var(--text-meta);overflow:hidden}
.location_map iframe,.location_map img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.location_map:hover iframe{filter:none}
@media (max-width:767px){.location_map{flex:none;aspect-ratio:1}}

/* Linkliste (Individueller Workshop): Zeile = Link, Titel + Kurztext, Pfeil rechts */
.link-list_component{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12)}
.link-list_item{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.12);color:var(--black);text-decoration:none}
.link-list_item:hover{color:var(--black)}
.link-list_body{display:flex;flex-direction:column;gap:4px}
.link-list_title{margin:0;font-size:var(--fs-lead);line-height:var(--lh-tight);letter-spacing:var(--ls-body);color:var(--black)}
.link-list_text{margin:0;font-size:var(--fs-small);color:var(--text-body)}
.link-list_arrow{flex:none;color:var(--riso-pink);display:flex}
.link-list_arrow svg{width:20px;height:20px;transition:margin-left .3s var(--ease-standard)}
.link-list_item:hover .link-list_arrow svg{margin-left:4px}

/* Galerie: 12 Spalten × 6 Zeilen, 5 Bilder */
.gallery_list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:24px;aspect-ratio:3/2}
.gallery_item{position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.gallery_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery_item:nth-child(1){grid-column:1 / span 8;grid-row:1 / span 4}
.gallery_item:nth-child(2){grid-column:9 / span 4;grid-row:1 / span 2}
.gallery_item:nth-child(3){grid-column:9 / span 4;grid-row:3 / span 2}
.gallery_item:nth-child(4){grid-column:1 / span 6;grid-row:5 / span 2}
.gallery_item:nth-child(5){grid-column:7 / span 6;grid-row:5 / span 2}
@media (max-width:767px){.gallery_list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;aspect-ratio:auto;gap:12px}.gallery_item{aspect-ratio:1}.gallery_item:nth-child(n){grid-column:auto;grid-row:auto}.gallery_item:nth-child(1){grid-column:1 / span 2;aspect-ratio:3/2}}

/* FAQ (Akkordeon, <details>) */
.faq_list{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12);max-width:var(--text-max)}
.faq_item{border-bottom:1px solid rgba(0,0,0,.12)}
.faq_question{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-size:var(--fs-lead);letter-spacing:var(--ls-body)}
.faq_question::-webkit-details-marker{display:none}
.faq_question::after{content:"+";flex:none;font-size:1.6rem;line-height:1;color:var(--riso-red);transition:transform var(--dur-fast) var(--ease-standard)}
.faq_item[open] .faq_question::after{transform:rotate(45deg)}
.faq_answer{padding:0 0 24px;color:var(--text-body);max-width:640px}
/* FAQ zweispaltig: Section-Header links, Liste rechts. Plus-Farbe via is-pink. */
.faq_component{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.faq_component .faq_list{max-width:none}
.faq_list.is-pink .faq_question::after{color:var(--riso-pink)}
.faq_list.is-black .faq_question::after{color:var(--black)}
@media (max-width:991px){.faq_component{gap:40px}}
@media (max-width:767px){.faq_component{grid-template-columns:minmax(0,1fr);gap:32px}}

/* Formular (Anfrage) */
.form_component{display:flex;flex-direction:column;gap:20px}
.form_row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form_field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--black)}
.form_input{font:inherit;font-size:var(--fs-body);letter-spacing:var(--ls-body);padding:12px 16px;border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-card);background:var(--white);color:var(--black);outline:none;width:100%}
.form_input:focus{border-color:var(--black)}
.form_textarea{min-height:140px;resize:vertical}
.form_note{margin:0;font-size:var(--fs-small);color:var(--text-meta)}
@media (max-width:767px){.form_row{grid-template-columns:minmax(0,1fr)}}

/* Kalkulator (riso-calc.js, data-calc). Steuer-Attribute auf <label>. Kontaktblock braucht data-calc-contact. */
.calculator_component{display:flex;flex-direction:column;gap:40px;align-items:center}
.calculator_grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;width:100%;align-items:start}
.calculator_config{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:20px;min-width:0}
.calculator_legend{padding:0;margin:0 0 8px;font-size:var(--fs-lead);letter-spacing:var(--ls-body)}
.calculator_row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.calculator_label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);color:var(--black)}
.calculator_input{font:inherit;font-size:var(--fs-body);letter-spacing:var(--ls-body);padding:12px 16px;border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-card);background:var(--white);color:var(--black);outline:none;width:100%}
.calculator_input:focus{border-color:var(--black)}
.calculator_textarea{font:inherit;font-size:var(--fs-body);letter-spacing:var(--ls-body);padding:12px 16px;border:1px solid rgba(0,0,0,.3);border-radius:var(--radius-card);background:var(--white);color:var(--black);outline:none;width:100%;resize:vertical}
.calculator_check{display:none;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--black);align-self:end;padding-bottom:12px}
.calculator_checkbox{width:20px;height:20px;accent-color:var(--black);margin:0}
.calculator_inks{display:flex;flex-direction:column;gap:20px}
.calculator_ink-group{display:flex;flex-direction:column;gap:8px}
.calculator_ink-head{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-small);color:var(--black)}
.calculator_ink-row{display:flex;flex-wrap:wrap;gap:10px}
.calculator_ink{position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s}
.calculator_ink:hover{transform:scale(1.06)}
.calculator_ink[aria-pressed="true"]{transform:scale(1.08);box-shadow:0 0 0 3px var(--white),0 0 0 4px rgba(0,0,0,.18)}
.calculator_column{display:flex;flex-direction:column;gap:6px}
.calculator_note{margin:0;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-meta)}
.calculator_info{margin:0;padding:12px 16px;border-radius:var(--radius-card);background:var(--grey-200);font-size:var(--fs-body);line-height:1.4;color:var(--black)}
.calculator_card{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:24px;padding:40px;border-radius:var(--radius-card);background:var(--grey-200);overflow:hidden}
.calculator_eyebrow{position:relative;margin:0;color:var(--black)}
.calculator_output{position:relative;display:flex;flex-direction:column;gap:24px}
.calculator_total-wrapper{display:flex;flex-direction:column;gap:4px}
.calculator_total{font-size:var(--fs-display);line-height:1;letter-spacing:-.05em;color:var(--black)}
.calculator_per-piece{color:var(--black)}
.calculator_lines{display:flex;flex-direction:column;border-top:1px solid rgba(0,0,0,.12)}
.calculator_line{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.calculator_message{position:relative;display:none;margin:0;font-size:var(--fs-lead);line-height:1.4;color:var(--black)}
.calculator_foot{position:relative;margin:0;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-meta)}
.calculator_contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%;padding-top:40px;border-top:1px solid rgba(0,0,0,.12)}
.calculator_fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:16px}
.calculator_submit{display:flex;flex-direction:column;align-items:center;gap:12px}
@media (max-width:991px){.calculator_grid{grid-template-columns:minmax(0,1fr);gap:40px}.calculator_card{position:static}}
@media (max-width:767px){.calculator_row,.calculator_contact{grid-template-columns:minmax(0,1fr)}.calculator_total{font-size:3rem}}


/* Angebotskarte (Home) */
/* Leistung (Produktion): Split mit Faktenliste (dl) und Bildraster 2 Spalten (16:9 oben, 2× 1:1 unten) */
.service_facts{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;padding-top:20px;border-top:1px solid rgba(0,0,0,.12)}
.service_facts dt{font-size:var(--fs-small);color:var(--text-meta)}
.service_facts dd{margin:0;color:var(--black)}
.image-grid_list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.image-grid_item{position:relative;aspect-ratio:1;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.image-grid_item:first-child{grid-column:1 / -1;aspect-ratio:16/9}
.image-grid_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Werte-Karte (Über uns, Haltung): Nummer, Titel, Text, 3 Spalten via card-grid_list */
.value-card_component{display:flex;flex-direction:column;gap:12px}
.value-card_number{margin:0;font-size:var(--fs-small);letter-spacing:.06em;color:var(--text-meta)}
.value-card_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--black)}
.value-card_text{margin:0;color:var(--text-body)}
/* Textsplit (Geschichte): Eyebrow + Titel links, Fließtext rechts */
.split_component.is-text{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);align-items:start}
@media (max-width:767px){.split_component.is-text{grid-template-columns:minmax(0,1fr)}}
.team-card_media.is-portrait{aspect-ratio:3/4}
.team-card_body{display:flex;flex-direction:column;gap:6px}
.team-card_role.is-plain{text-transform:none;font-size:var(--fs-small);color:var(--black)}
.offer_list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.offer_card{display:flex;flex-direction:column;gap:16px}
.offer_media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.offer_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.offer_title{margin:0;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-heading);color:var(--black)}
.offer_text{margin:0;color:var(--text-body)}
.offer_link{padding-top:8px}
/* Textlink mit Pfeil (Tertiär ohne Button-Klasse) */
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-bold);font-size:var(--fs-body);letter-spacing:var(--ls-body);color:var(--riso-red);text-decoration:none}
.text-link:hover{color:var(--riso-red)}
.text-link svg{width:20px;height:20px;flex:none;transition:margin-left .3s var(--ease-standard)}
.text-link:hover svg{margin-left:4px}
@media (max-width:767px){.offer_list{grid-template-columns:minmax(0,1fr);gap:48px}}

/* Rechner: grauer Hinweistext (z. B. «keine», «unbedruckt») */
.calculator_muted{color:var(--text-meta)}

/* Section-Bausteine */
.section-header_component{display:flex;flex-direction:column;gap:16px;max-width:var(--text-max)}
.section-header_component .text-link{margin-top:8px}
.container-large.is-stack{display:flex;flex-direction:column;gap:64px}
.container-large.is-center-row{display:flex;justify-content:center}
.sticker_component{position:absolute;top:0;left:clamp(16px,4cqw,56px);translate:0 -50%;width:clamp(64px,9cqw,130px);z-index:3;pointer-events:none}
.sticker_component.is-right{left:auto;right:clamp(16px,4cqw,56px)}
.section-header_component.is-center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.section-header_component .text-size-large{color:var(--text-body)}
.card-grid_list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.card-grid_list.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid_list.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-grid_list.is-rows-large{gap:64px 32px}
.split_component{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.split_component.is-reverse>*:first-child{order:2}
.split_component.is-top{align-items:start}
.split_component.is-stretch{align-items:stretch}
.split_component.is-wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.split_component.is-wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.split_copy{display:flex;flex-direction:column;gap:18px;justify-content:center;align-items:flex-start}
.split_copy .text-link{margin-top:8px}
.split_media{position:relative;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200)}
.split_media.is-portrait{aspect-ratio:4/5}
.split_image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stat_list{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;width:fit-content;max-width:100%;gap:24px 56px;align-self:stretch;align-content:center}
.stat_item{display:flex;flex-direction:column}
.stat_number{margin:0;font-size:3.4rem;line-height:1.1;letter-spacing:var(--ls-heading);color:var(--black)}
.stat_prefix{font-size:var(--fs-body);letter-spacing:var(--ls-body);margin-right:.25em}
.stat_label{margin:8px 0 0;font-size:var(--fs-body);color:var(--grey-600)}
.voucher_component{position:relative;isolation:isolate;overflow:hidden;background:var(--riso-red);color:var(--paper);padding:80px 0}
.voucher_grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:center}
.voucher_copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:640px}
.voucher_copy .heading-style-h2,.voucher_copy p{color:var(--paper)}
.voucher_copy .text-link{margin-top:8px}
.voucher_media{position:relative;aspect-ratio:3/2;border-radius:var(--radius-card);overflow:hidden;background:var(--grey-200);max-width:480px;width:100%;justify-self:end}
.text-link.text-color-white,.text-link.text-color-white:hover{color:var(--white)}
.text-link.text-color-pink,.text-link.text-color-pink:hover{color:var(--riso-pink)}
.text-link.text-color-black,.text-link.text-color-black:hover{color:var(--black)}
.newsletter_component{position:relative;isolation:isolate;overflow:hidden;background:var(--grey-200);border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);padding:240px 0}
.newsletter_shapes{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.newsletter_shapes [data-blob]{position:absolute;left:0;top:0;mix-blend-mode:multiply;opacity:.9;will-change:transform;aspect-ratio:1;width:12%}
.newsletter_shapes [data-blob]:nth-child(1){width:20%}.newsletter_shapes [data-blob]:nth-child(2){width:22%}.newsletter_shapes [data-blob]:nth-child(3){width:16%}.newsletter_shapes [data-blob]:nth-child(5){width:14%}.newsletter_shapes [data-blob]:nth-child(6){width:15%}.newsletter_shapes [data-blob]:nth-child(7){width:14%}.newsletter_shapes [data-blob]:nth-child(9){width:9%}.newsletter_shapes [data-blob]:nth-child(10){width:11%}.newsletter_shapes [data-blob]:nth-child(11){width:10%}
.newsletter_form{position:relative;max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.newsletter_row{display:flex;gap:8px;width:100%;max-width:520px;margin-top:8px}
.newsletter_input{flex:1 1 200px;min-width:0;font:inherit;font-size:var(--fs-body);padding:12px 20px;border:1px solid var(--black);border-radius:var(--radius-pill);background:var(--paper);color:var(--black);outline:none}
.newsletter_success{display:none;margin:0;color:var(--riso-red)}
.cta-center_component{position:relative;max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.cta-center_component .button-group{justify-content:center;margin-top:8px}
.section_testimonials,.section_cta{background:transparent;position:relative;z-index:1}
.section_cta{padding:128px 0 192px}
.workshop-card_body{display:contents}
.workshop-card_body>*:not(.workshop_card-data){display:none}
.workshop_card-data{display:contents}
.workshop_hero-ticket{display:flex;justify-content:center}
.workshop_voucher{border-top:0!important}
.workshop-card_component.is-booked{opacity:.55}
@media (max-width:991px){.card-grid_list.is-4,.card-grid_list:has(> :nth-child(4)),.card-grid_list:has(.workshop-card_component ~ .workshop-card_component ~ .workshop-card_component ~ .workshop-card_component){grid-template-columns:repeat(2,minmax(0,1fr))}.split_component{gap:40px}.container-large.is-stack{gap:48px}.heading-style-h2{font-size:2rem}.stat_list{gap:16px 20px}.stat_number{font-size:1.8rem;white-space:nowrap}.stat_label{font-size:.88rem}}
@media (max-width:767px){.card-grid_list,.card-grid_list.is-2,.card-grid_list.is-4{grid-template-columns:minmax(0,1fr)}.card-grid_list.is-rows-large{gap:48px}.split_component,.split_component.is-wide-left,.split_component.is-wide-right{grid-template-columns:minmax(0,1fr)}.split_component.is-reverse>*:first-child{order:0}.stat_list{gap:16px 24px}.voucher_grid{grid-template-columns:minmax(0,1fr)}.voucher_component{padding:56px 0}.newsletter_row{flex-direction:column}.newsletter_component{padding:120px 0}.section_cta{padding:96px 0 128px}.container-large.is-stack{gap:40px}.newsletter_input{flex:none;width:100%}.newsletter_row>.button{width:100%}.heading-style-h2{font-size:1.8rem}.stat_number{font-size:1.6rem}.split_component>.split_media,.split_component.is-reverse>.split_media{order:2}.gallery_list[data-carousel-mobile]{display:flex;overflow-x:auto;aspect-ratio:auto;margin:0 -24px;padding:0 24px;gap:12px;scrollbar-width:none}.gallery_list[data-carousel-mobile]::-webkit-scrollbar{display:none}.gallery_list[data-carousel-mobile] .gallery_item:nth-child(n){flex:none;width:80%;aspect-ratio:4/3;grid-column:auto;grid-row:auto}}

/* Responsive 28.10. (Abgleich Design Tablet/Mobile, nur ≤991 / ≤767) */
@media (max-width:991px){h1,.heading-style-h1{font-size:3.4rem}.hero-sub_grid.is-ticket h1,.hero-sub_grid.is-ticket .heading-style-h1{font-size:2rem}.info-list_title,.timeline_year{font-size:2rem}.calculator_total{font-size:3.4rem}}
@media (max-width:767px){h1,.heading-style-h1{font-size:2.6rem}h1,h2,.heading-style-h1,.heading-style-h2{hyphens:auto;overflow-wrap:break-word}.hero-sub_grid.is-ticket h1,.hero-sub_grid.is-ticket .heading-style-h1{font-size:1.8rem}.steps_item{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:24px 0}.service_facts{grid-template-columns:minmax(0,1fr);gap:2px 0}.service_facts dd{margin-bottom:10px}.split_component>.image-grid_list{order:2}.hero-sub_image-wrapper{aspect-ratio:4/3}.faq_question{font-size:1.1rem}.card-grid_list,.card-grid_list.is-2,.card-grid_list.is-4,.card-grid_list:has(> :nth-child(4)),.card-grid_list:has(.workshop-card_component ~ .workshop-card_component ~ .workshop-card_component ~ .workshop-card_component){grid-template-columns:minmax(0,1fr)}}
/* Responsive Schritt 3 (Design-Container-Regeln ≤809/≤1199 auf 767/991 übertragen) */
.voucher_copy>.button-group{flex-direction:row;align-items:center}
.main-wrapper section .voucher_copy .button{--btn:#FFFFFF;--bi:#EC0626}
.main-wrapper section .voucher_copy .button.is-secondary{--btn:#FFFFFF}
[data-riso-loadmore]{--riso-loadmore:6}
@media (max-width:991px){[data-riso-loadmore]{--riso-loadmore:4}}
@media (max-width:767px){[data-riso-loadmore]{--riso-loadmore:3}}
@media (min-width:768px) and (max-width:991px){.anlass-card_list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}.split_component:has(> .split_copy .check-list_component){grid-template-columns:minmax(0,1fr);gap:40px}.split_component:has(> .split_copy .check-list_component)>.split_copy{display:contents}.split_component:has(> .split_copy .check-list_component) .section-header_component{order:1;max-width:600px}.split_component:has(> .split_copy .check-list_component)>.split_media,.split_component:has(> .split_copy .check-list_component)>.split_media.is-landscape{order:2;aspect-ratio:16/9!important;width:100%;height:auto}.split_component:has(> .split_copy .check-list_component) .check-list_component{order:3;margin-top:0}.split_component:has(> .split_copy .check-list_component) .check-list_list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}}
@media (max-width:991px){.offer_list:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}.header_logo img{width:170px}.split_component:has(.info-list_component),.split_component.is-wide-left:has(.info-list_component),.split_component.is-wide-right:has(.info-list_component){grid-template-columns:minmax(0,1fr);gap:48px;align-items:start}.split_component:has(.info-list_component) .info-list_component{max-width:none}.info-list_item{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px}.split_component:has(.info-list_component) .location_map{flex:none;min-height:0;aspect-ratio:16/9}.split_component:has(.info-list_component)>.split_media{aspect-ratio:16/9}.hero-sub_component{min-height:620px}.hero-sub_grid.is-ticket{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}.workshop_hero-ticket .ticket_day{font-size:4.2rem}.workshop_hero-ticket .ticket_title{font-size:1.4rem}.steps_item{grid-template-columns:80px minmax(0,1fr)}.steps_number{font-size:3.4rem}.split_component .steps_item{grid-template-columns:44px minmax(0,1fr);gap:12px}.split_component .steps_number{font-size:2.2rem}.ticket_component.is-wide .ticket_head{padding:32px}.ticket_component.is-wide .ticket_body{padding:32px 32px 32px 76px;gap:20px;justify-content:flex-start}.ticket_component.is-wide .ticket_facts{grid-template-columns:repeat(2,auto);gap:16px 32px}.ticket_component.is-wide .ticket_day{font-size:2rem}.ticket_component.is-wide .ticket_cta .button{padding:12px 24px;font-size:1rem}.calculator_grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.calculator_card{position:sticky;padding:32px}.calculator_row{grid-template-columns:minmax(0,1fr)}.review_list .review_component{width:calc((100% - 32px) / 2.2)}.padding-section-xlarge{padding-top:96px;padding-bottom:96px}.example-card_media.is-fixed{height:auto;aspect-ratio:4/3}.section_beispiele .card-grid_list{gap:24px}.section_beispiele .example-card_title{font-size:1.25rem}}
@media (max-width:767px){.split_component>.image-grid_list{grid-template-columns:minmax(0,1fr)}.split_component>.image-grid_list>.image-grid_item:nth-child(n+2){display:none}.split_component>.image-grid_list>.image-grid_item:first-child{grid-column:1/-1;aspect-ratio:4/3}.offer_list:has(> :nth-child(4)){grid-template-columns:minmax(0,1fr);gap:48px}.header_wrapper{gap:12px}.info-list_item{grid-template-columns:minmax(0,1fr);gap:8px}.split_component:has(.info-list_component) .location_map{aspect-ratio:1}.split_component:has(.info-list_component)>.split_media{aspect-ratio:4/3}.header_logo img{width:120px}.header_right .button{display:inline-flex;padding:8px 14px;font-size:.88rem}.header_burger{width:40px}.hero-sub_component{min-height:0}.hero-sub_grid{gap:32px}.hero-sub_grid.is-ticket{grid-template-columns:minmax(0,1fr);gap:40px}.workshop_hero-ticket .ticket_day{font-size:4rem}.steps_item,.split_component .steps_item{grid-template-columns:56px minmax(0,1fr);gap:16px}.steps_number,.split_component .steps_number{font-size:2.4rem}.ticket_component.is-wide .ticket_head{padding:24px}.ticket_component.is-wide .ticket_body{padding:20px 24px 24px}.ticket_component.is-wide .ticket_facts{grid-template-columns:minmax(0,1fr)}.ticket_component.is-wide .ticket_day{font-size:1.8rem}.calculator_grid{grid-template-columns:minmax(0,1fr);gap:32px}.calculator_card{position:static;padding:24px}.review_list .review_component{width:80%;aspect-ratio:auto;min-height:320px}.review_list .review_quote{font-size:1.4rem}.padding-section-xlarge{padding-top:80px;padding-bottom:80px}.section_termine .card-grid_list{gap:64px}.anlass-card_list{grid-template-columns:minmax(0,1fr)}}
/* 03.11. Workshop-Detail Buchung: Block zentriert, Inhalt linksbündig (Breite = Ticket is-two-thirds) */
.section_buchung .container-large.is-stack{align-items:center}
.section_buchung .section-header_component,.section_buchung .ticket_component.is-two-thirds{width:66.6667%!important;max-width:66.6667%!important;margin-left:auto!important;margin-right:auto!important;align-self:center!important;justify-self:center!important;text-align:left}
.section_buchung .section-header_component{align-items:flex-start}
@media (max-width:991px){.section_buchung .section-header_component,.section_buchung .ticket_component.is-two-thirds{width:100%!important;max-width:100%!important}}
/* 03.11. Gut zu wissen: Abschnittstitel (Eckdaten, Inklusive, Mitbringen …) in H3-Grösse statt H2 */
.section_gut-zu-wissen .info-list_title,.section_gut-zu-wissen :is(h2,h3,h4):not(.section-header_component > *){font-size:var(--fs-h3)!important;line-height:var(--lh-tight)!important}
/* 03.11. Formulare: Dropdown-Pfeil eigener Chevron, 20px vom Rand. Adressfelder paarweise (Strasse|Nr., PLZ|Ort, Vor-|Nachname) */
select.form_input,select.calculator_input{-webkit-appearance:none;appearance:none;padding-right:52px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 20px center!important;background-size:18px 18px!important;cursor:pointer}
.form_pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:16px}
.form_pair.is-plz{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
.form_pair.is-even{grid-template-columns:repeat(2,minmax(0,1fr))}
.form_pair.is-wide-left{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
/* Gruppentitel im Formular (Lieferadresse, Rechnungsadresse) */
.form_group-title{margin:12px 0 -6px;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--black)}
/* Footer: Instagram-Icon unter dem Logo; leere Sprungziele ohne Platz */
.footer_logo{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.footer_contact .footer_social{margin-top:-4px}
/* Kontakt: Adresse oben, darunter Telefon/Mail mit Instagram-Icon rechts daneben */
.footer_contact:has(.footer_social){display:grid!important;width:max-content;max-width:100%;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:20px;row-gap:16px}
.footer_contact:has(.footer_social) > p:first-child{grid-column:1 / -1}
.footer_contact:has(.footer_social) .footer_social{margin:0 -4px -4px 0;justify-self:end;align-self:end;width:40px;height:40px}
.footer_social svg{width:22px!important;height:22px!important}
/* Instagram unter dem Logo, abgesetzt: mehr Abstand + Handle als Text, damit es nicht zum Logo gehört */
.footer_logo{gap:24px!important}
.footer_social.is-labeled{width:37px!important;height:37px!important;justify-content:flex-start!important;margin:0 0 0 -4.6px}
.footer_social.is-labeled svg{width:37px!important;height:37px!important}
.footer_social-text{font-weight:var(--fw-regular)}
.footer_copyright{margin:0}
.footer_sep{display:inline-block;margin:0 12px;opacity:.5}
.footer_credit{font-weight:var(--fw-bold)}
/* «dropZone»-Credit (wie Yellowcamper): Hover = violetter Balken wächst von unten über das Wort, weisse Buchstaben springen einzeln von unten hinein (Spans per Skript) */
.footer_credit{--dz:#a658af;position:relative;display:inline-block;vertical-align:baseline;padding:0 3px;margin:0 -3px;overflow:clip;border-radius:3px;isolation:isolate;font:inherit;font-weight:var(--fw-bold);line-height:inherit;letter-spacing:inherit;color:inherit!important;text-decoration:none}
.footer_component .footer_credit:hover{opacity:1!important;color:inherit!important}
.footer_credit::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dz);border-radius:inherit;transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.footer_credit .dz-word{position:relative;display:inline-block;vertical-align:baseline}
.footer_credit .dz-base{display:inline}
.footer_credit .dz-hover{position:absolute;left:0;top:0;display:inline;white-space:nowrap;color:#ffffff}
.footer_credit .dz-base span,.footer_credit .dz-hover span{display:inline-block;transition:transform .5s cubic-bezier(.34,1.8,.5,1),opacity .2s ease;transition-delay:calc(var(--i) * 35ms)}
.footer_credit .dz-hover span{transform:translateY(110%);opacity:0}
.footer_credit:hover::before{transform:scaleY(1)}
.footer_credit:hover .dz-base span{transform:translateY(-110%);opacity:0}
.footer_credit:hover .dz-hover span{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion:reduce){.footer_credit *,.footer_credit::before{transition:none!important}}
.footer_social{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;margin-left:-4px;color:#000000!important}
.footer_social:hover{opacity:.6}
.anchor_target{height:0;font-size:0;line-height:0}
/* Produktion Leistungs-Bilder: Hover-Karte mit Projektname + Eckdaten (folgt der Maus via data-cursor-tag), ohne Maus fest unten links */
.image-grid_hover{position:absolute;inset:0;overflow:hidden}
.image-grid_hover .image-grid_image{transition:transform var(--dur-standard) var(--ease-standard)}
.image-grid_hover:hover .image-grid_image{transform:scale(1.05)}
.image-grid_tag{display:flex;flex-direction:column;gap:2px;max-width:240px;padding:10px 14px;border-radius:8px;background:var(--riso-green);color:#fff;white-space:normal;line-height:1.3}
.image-grid_tag-title{font-weight:var(--fw-bold);font-size:var(--fs-body)}
.image-grid_tag-meta{font-size:var(--fs-small);opacity:.9}
@media (hover:none){.image-grid_hover .image-grid_tag{opacity:1!important;transform:none!important;left:12px!important;top:auto!important;bottom:12px}}
/* Bewertungskarten auf Touch-Geräten wischbar: natives horizontales Scrollen + Pointer-Drag erlaubt */
@media (hover:none),(max-width:767px){.review_list[data-carousel]{overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:none}.review_list[data-carousel]::-webkit-scrollbar{display:none}.gallery_list[data-carousel-mobile]{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}}
/* Hamburger-Menü: Panel unter der Navbar, Papierhintergrund; Header bekommt beim Öffnen Hintergrund */
.header_mobile-menu{border-top:1px solid rgba(0,0,0,.12)}
.header_mobile-menu.is-open{display:flex!important;padding:16px 24px 32px;background:var(--paper)}
.header_mobile-menu a{font-weight:var(--fw-bold);font-size:1.5rem;padding:12px 0;color:var(--black);border-bottom:1px solid rgba(0,0,0,.08)}
.header_mobile-menu a:last-child{border-bottom:0}
.is-menu-open .header_component{background:var(--paper)!important}
@media (min-width:992px){.header_mobile-menu,.header_mobile-menu.is-open{display:none!important}}
/* 04.11. Hero (Unterseiten, Workshop-Detail, Landingpages): auf Tablet/Mobile Platz unter dem fixen Header, damit Eyebrow nicht unters Logo rutscht */
@media (max-width:991px){html body .hero-sub_component,html body .hero-lp_component{padding-top:136px!important}}
@media (max-width:767px){html body .hero-sub_component,html body .hero-lp_component{padding-top:112px!important}}
/* 04.11. iOS Safari: Datumsfelder haben eine feste Eigenbreite und laufen aus dem Raster → auf Feldbreite zwingen (alle Formulare) */
input[type="date"]:is(.form_input,.calculator_input),input[type="time"]:is(.form_input,.calculator_input),input[type="datetime-local"]:is(.form_input,.calculator_input){-webkit-appearance:none;appearance:none;display:block;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Kalender-Icon rechts im Datumsfeld (alle Browser gleich; natives Icon unsichtbar, bleibt aber klickbar) */
input[type="date"]:is(.form_input,.calculator_input){position:relative;cursor:pointer;padding-right:48px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:20px 20px!important}
input[type="date"]:is(.form_input,.calculator_input)::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:56px;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.form_pair > *,.calculator_label,.form_field{min-width:0}
/* 04.11. Nummerierte Aufzählungen (steps, value-card): Abstand Titel → Text */
.steps_body{display:flex!important;flex-direction:column!important;gap:0!important}
.steps_body > .steps_title{margin:0!important;text-box-trim:trim-start!important}
.steps_body > .steps_title + .steps_text{margin:16px 0 0!important}
html body :is(.steps_list,.value-card_component,[class*="value-card"],.section_haltung,.section_erklaert,.section_ablauf) :is(h3,h4) + p{margin-top:16px!important}
.value-card_title + .value-card_text{margin-top:10px!important}
/* 04.11. AGB/Datenschutz-Checkbox in Anfrageformularen */
.form_agb{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:8px 0 4px!important;font-size:var(--fs-small);line-height:1.5;color:var(--black)}
.form_agb input[type="checkbox"]{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#000;cursor:pointer}
.form_agb .form_check-text{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--black)}
.form_component .form_agb{max-width:640px;margin-left:auto!important;margin-right:auto!important}
/* 04.11. Fehlerzustand Pflichtfelder (alle Formulare ausser Newsletter) */
:is(.form_input,.calculator_input,.calculator_textarea).is-error{border-color:#ec0626!important;box-shadow:0 0 0 1px #ec0626!important}
:is(.form_field,.calculator_label).is-error{color:#ec0626}
:is(.form_field,.calculator_label).is-error::after{content:"Bitte ausfüllen";font-size:.78rem;line-height:1.3;color:#ec0626}
.form_agb.is-error,.form_agb.is-error .form_check-text{color:#ec0626!important}
.form_agb.is-error input[type="checkbox"]{outline:2px solid #ec0626;outline-offset:1px}
.form_agb.is-error::after{content:"Bitte bestätigen";display:block;flex-basis:100%;font-size:.78rem;color:#ec0626}
.form_agb{flex-wrap:wrap}
/* 04.11. Navbar/Footer: «über uns» wie die anderen Links gross */
:is(header,.header_mobile-menu,.footer_component) a:is([href="/ueber-uns"],[href="/fr/a-propos"]):not(.button){display:inline-block}
:is(header,.header_mobile-menu,.footer_component) a:is([href="/ueber-uns"],[href="/fr/a-propos"]):not(.button)::first-letter{text-transform:uppercase}
/* 04.11. dropZone-Credit: violettes Feld rundum gleich viel Luft, Abstand zum Text davor/danach */
.footer_copyright a[href*="dropzone.ch"]{display:inline-block!important;position:relative;padding:calc(.2em - 2px) calc(.45em - 2px)!important;margin:calc(2px - .2em) calc(5px - .45em)!important;line-height:1.2!important;vertical-align:baseline;font-family:"Montserrat",sans-serif!important;font-weight:700!important;letter-spacing:0!important}
.footer_copyright a[href*="dropzone.ch"]:hover{margin:calc(2px - .2em) calc(5px - .45em)!important}
/* 05.11. dropZone-Hover dezenter; Unhover: Feld blendet ruhig aus, Schrift wird ohne Bewegung wieder schwarz */
.footer_credit::before{opacity:0;transition:opacity .4s ease,transform 0s linear .4s!important}
.footer_credit:hover::before{opacity:1;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .15s ease!important}
.footer_credit .dz-hover span{transition:opacity .35s ease,transform 0s linear .35s!important}
.footer_credit:hover .dz-hover span{transition:transform .5s cubic-bezier(.34,1.22,.5,1) calc(var(--i) * 35ms),opacity .25s ease calc(var(--i) * 35ms)!important}
.footer_credit .dz-base span{transition:opacity .35s ease .1s,transform 0s!important}
.footer_credit:hover .dz-base span{transform:none!important;opacity:0!important;transition:opacity .15s ease!important}
.footer_copyright a[href*="dropzone.ch"]::before{inset:0!important;top:0!important;bottom:0!important;left:0!important;right:0!important;height:auto!important}
/* 05.11. Button beim Hochladen: 5 Styleguide-Formen (data-riso-shape, Plugin zeichnet) schweben langsam um den Button (Bewegung im Skript newsletter-result.js), kein Klick möglich */
.button.is-uploading{pointer-events:none;cursor:progress}
.calculator_submit{position:relative}
.calculator_upload-shapes{position:absolute;left:50%;top:0;width:0;height:0;pointer-events:none;z-index:3}
.calculator_upload-shape{position:absolute;left:0;top:0;display:block;width:var(--w,40px);aspect-ratio:1;opacity:0;transition:opacity .6s var(--ease-standard);will-change:transform}
.calculator_upload-shape.is-in{opacity:1}
.calculator_upload-shape svg{display:block;width:100%;height:100%;overflow:visible}
/* Danke-Nachricht: Formular gleitet auf die Höhe der Nachricht zusammen */
.form_prod-done{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:640px;margin:0 auto;padding:48px 0;text-align:center;opacity:0;transition:opacity .7s var(--ease-standard) .25s}
.form_prod-done.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){.calculator_upload-shape{transition:none}.form_prod-done{transition:none}}
/* 04.11. Sanftes Erscheinen beim Scrollen: 10px nach oben + Einblenden, 0.9s, minimal gestaffelt */
.riso-rv .rv{opacity:0;translate:0 6px;transition:opacity 1.4s cubic-bezier(.25,.1,.25,1) var(--rv-d,0ms),translate 1.6s cubic-bezier(.16,1,.3,1) var(--rv-d,0ms)}
.riso-rv .rv.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.riso-rv .rv{opacity:1;translate:none;transition:none}}
/* 05.11. iOS/Android: native Button-Optik in Formularen entfernen (Safari setzt eigene Rundung, Farbe, Schrift und Deckkraft bei disabled) */
button.button,input.button,form button[type="submit"],form input[type="submit"],[data-calc-send]{-webkit-appearance:none!important;appearance:none!important;font-family:inherit!important;font-weight:var(--fw-bold)!important;font-size:var(--fs-body)!important;line-height:1.2!important;border-radius:var(--radius-pill)!important;-webkit-tap-highlight-color:transparent;-webkit-text-fill-color:currentColor;margin:0;box-sizing:border-box}
button.button:disabled,form button[type="submit"]:disabled,[data-calc-send]:disabled{opacity:1!important;-webkit-text-fill-color:currentColor}
button.button:not(.is-secondary):not(.is-text),form button[type="submit"].button:not(.is-secondary):not(.is-text){color:var(--white)!important}
button.button:is(.is-orange,.is-yellow,.is-green):not(.is-secondary){color:var(--black)!important}
@media (max-width:767px){:is(.form_component,.calculator_component,.calculator_card) :is(button[type="submit"],[data-calc-send]){width:100%!important;justify-content:center!important;white-space:normal!important;text-align:center}}
/* 05.11. Produktion Leistungen: eine Section, 5 Reiter (Hover wechselt, Desktop), Auto-Wechsel alle 4 s, Pause bei Maus in der Section (Skript) */
.leistungen_component{display:flex;flex-direction:column;gap:48px}
.leistungen_tabs{display:flex;flex-wrap:wrap;gap:12px}
.leistungen_tab{-webkit-appearance:none;appearance:none;margin:0;padding:8px 20px;border:2px solid #000;border-radius:var(--radius-pill);background:transparent;color:#000;font-family:inherit;font-weight:var(--fw-bold);font-size:var(--fs-body);letter-spacing:var(--ls-body);line-height:1.2;cursor:default;-webkit-tap-highlight-color:transparent;transition:background-color .25s var(--ease-standard),color .25s var(--ease-standard)}
.leistungen_tab.is-active{background:#000;color:#fff;-webkit-text-fill-color:#fff}
.leistungen_tab:focus-visible{outline:2px solid #000;outline-offset:3px}
@media (hover:none),(max-width:991px){.leistungen_tab{cursor:pointer}}
.leistungen_panel{display:none}
.leistungen_panel.is-active{display:block;animation:leistungIn .5s cubic-bezier(.22,.61,.36,1)}
@keyframes leistungIn{from{opacity:0}to{opacity:1}}
.leistungen_panel .rv{opacity:1!important;translate:none!important}
.leistungen_panel .split_component{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;gap:64px!important;align-items:start!important}
.leistungen_panel .image-grid_list{display:grid!important;grid-template-columns:minmax(0,3fr) minmax(0,2fr)!important;grid-template-rows:280px 280px!important;gap:16px!important}
.leistungen_panel .image-grid_item{position:relative!important;min-height:0!important;height:auto!important;aspect-ratio:auto!important;border-radius:var(--radius-card);overflow:hidden}
.leistungen_panel .image-grid_item:first-child{grid-column:1!important;grid-row:1 / span 2!important}
.leistungen_panel .image-grid_item:nth-child(2){grid-column:2!important;grid-row:1!important}
.leistungen_panel .image-grid_item:nth-child(3){grid-column:2!important;grid-row:2!important}
.leistungen_panel .image-grid_image{width:100%;height:100%;object-fit:cover}
@media (max-width:991px){.leistungen_component{gap:32px}.leistungen_panel .split_component{grid-template-columns:minmax(0,1fr)!important;gap:40px!important}.leistungen_panel .image-grid_list{grid-template-rows:240px 240px!important}}
@media (max-width:767px){.leistungen_tabs{gap:8px}.leistungen_tab{padding:6px 16px;font-size:var(--fs-small)}.leistungen_panel .image-grid_list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:240px 160px!important;gap:12px!important}.leistungen_panel .image-grid_item:first-child{grid-column:1 / span 2!important;grid-row:1!important}.leistungen_panel .image-grid_item:nth-child(2){grid-column:1!important;grid-row:2!important}.leistungen_panel .image-grid_item:nth-child(3){grid-column:2!important;grid-row:2!important}}
@media (prefers-reduced-motion:reduce){.leistungen_panel.is-active{animation:none}}
/* 05.11. Burger → Kreuz beim Öffnen; Menü legt sich über den Inhalt statt ihn nach unten zu schieben */
.header_burger-line{transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.65,0,.35,1),opacity .2s ease}
.is-menu-open .header_burger-line.is-top{transform:translateY(6px) rotate(45deg)}
.is-menu-open .header_burger-line.is-middle{opacity:0}
.is-menu-open .header_burger-line.is-bottom{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:991px){.header_component{z-index:1000}.header_mobile-menu.is-open{position:absolute!important;top:100%;left:0;right:0;z-index:1000;max-height:calc(100dvh - 72px);overflow-y:auto;box-sizing:border-box;transform-origin:top center;animation:risoMenuIn .55s cubic-bezier(.22,.61,.36,1) both}.header_mobile-menu.is-open a{animation:risoMenuItem .55s cubic-bezier(.22,.61,.36,1) both}.header_mobile-menu.is-open a:nth-child(1){animation-delay:.06s}.header_mobile-menu.is-open a:nth-child(2){animation-delay:.1s}.header_mobile-menu.is-open a:nth-child(3){animation-delay:.14s}.header_mobile-menu.is-open a:nth-child(4){animation-delay:.18s}.header_mobile-menu.is-open a:nth-child(5){animation-delay:.22s}.header_mobile-menu.is-open a:nth-child(n+6){animation-delay:.26s}}
@keyframes risoMenuIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (max-width:991px){.header_mobile-menu.is-open.is-closing{animation:risoMenuOut .32s cubic-bezier(.4,0,.6,1) both;pointer-events:none}.header_mobile-menu.is-open.is-closing a{animation:risoMenuItemOut .26s cubic-bezier(.4,0,.6,1) both!important;animation-delay:0s!important}}
@keyframes risoMenuOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
@keyframes risoMenuItemOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes risoMenuItem{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.header_burger-line{transition:none}.header_mobile-menu.is-open,.header_mobile-menu.is-open a{animation:none}}
/* 05.11. Home-Hero-Verlauf: Farben reichen weiter nach unten, weisser Auslauf nur noch ca. halb so hoch, ganz unten vollständig transparent (keine sichtbare Kante) */
.hero-home_component .hero-home_gradient.effect-gradient{--rg-layers:
    radial-gradient(55% 62% at 0% 86%, rgba(255,236,140,.55) 0%, rgba(255,236,140,0) 80%),
    radial-gradient(75% 128% at 0% 0%, #ffeb00 0%, rgba(255,235,0,.9) 30%, rgba(255,235,0,0) 80%),
    radial-gradient(55% 118% at 33% 0%, #f9a74e 0%, rgba(249,167,78,.85) 35%, rgba(249,167,78,0) 82%),
    radial-gradient(85% 134% at 76% 0%, #ec0626 0%, rgba(236,6,38,.92) 42%, rgba(236,6,38,0) 86%),
    radial-gradient(70% 108% at 95% 78%, #ee4a79 0%, rgba(238,74,121,.85) 35%, rgba(238,74,121,0) 88%)}
.hero-home_component .hero-home_gradient.effect-gradient::before,.hero-home_component .hero-home_gradient.effect-gradient::after{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.82) 84%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.08) 98%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.82) 84%,rgba(0,0,0,.55) 89%,rgba(0,0,0,.28) 94%,rgba(0,0,0,.08) 98%,transparent 100%)!important}
.hero-home_component .hero-home_fade{display:none!important}
/* 05.11. Spill: Hero overflow sichtbar, Verlauf ragt 35 % in die nächste Section und läuft dort aus. Formen bleiben im Hero. */
html body .main-wrapper .hero-home_component,html body .hero-home_component.section_hero{overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important}
html body .hero-home_component .hero-home_gradient{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:-22%!important;height:auto!important;pointer-events:none;z-index:0}
html body .hero-home_component .hero-home_gradient.effect-gradient::before,html body .hero-home_component .hero-home_gradient.effect-gradient::after{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.36) 80%,rgba(0,0,0,.17) 88%,rgba(0,0,0,.05) 95%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 56%,rgba(0,0,0,.85) 64%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.36) 80%,rgba(0,0,0,.17) 88%,rgba(0,0,0,.05) 95%,transparent 100%)!important}
html body .hero-home_component .hero-home_shapes{position:absolute;inset:0;overflow:hidden!important;z-index:1!important}
html body .hero-home_component > .hero-home_title,html body .hero-home_component > .hero-home_bottom{position:relative;z-index:2}
/* Flächen-Körnung liegt HINTER den Formen (Formen tragen ihre eigene, mitwandernde Körnung). Hero: unten weich ausgeblendet, damit an der Section-Kante keine Linie entsteht. */
html body .hero-home_component .hero-home_shapes{isolation:isolate}
html body .hero-home_component .hero-home_shapes > [data-blob]{z-index:1}
html body .hero-home_component .hero-home_shapes > .effect-noise{z-index:0!important;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.25) 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.6) 72%,rgba(0,0,0,.25) 86%,transparent 100%)}
html body [data-riso-blobs]:not(.hero-home_component) [data-blob]{z-index:1}
html body [data-riso-blobs]:not(.hero-home_component) [data-blob] ~ .riso-noise,html body [data-riso-blobs]:not(.hero-home_component) [data-blob] ~ .effect-noise{z-index:0!important}
html body [data-riso-blobs]:not(.hero-home_component) :has(> [data-blob]){isolation:isolate}
@media (max-width:767px){html body .hero-home_component .hero-home_gradient{bottom:-12%!important}}
/* 11.11. Home-Hero: Auslauf in Hintergrundfarbe liegt VOR den fliegenden Formen (Formen verschwinden unten weich), Titel und Text bleiben darüber. Ebenen: Verlauf 0 · Formen 1 · Auslauf 2 · Inhalt 3 */
html body .hero-home_component .hero-home_fade{display:block!important;position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;pointer-events:none;background:linear-gradient(to top,var(--paper) 0%,rgba(243,242,233,.92) 22%,rgba(243,242,233,.6) 50%,rgba(243,242,233,.22) 76%,rgba(243,242,233,0) 100%)}
html body .hero-home_component > .hero-home_title,html body .hero-home_component > .hero-home_bottom{z-index:3}
@media (max-width:767px){html body .hero-home_component .hero-home_fade{height:30%}}
/* 11.11. Section direkt unter dem Home-Hero (DE + FR): eigene Hintergrundfarbe und über dem Hero-Verlauf, damit dieser nicht durchscheint */
html body .hero-home_component + section{position:relative;z-index:1;background-color:var(--paper)}
/* Steps-Zahlen orange (über uns, Risographie) */
@media (max-width:767px){.upload_list .upload_tile:nth-child(n+4){display:none!important}}
/* Gutschein-Sections Tablet: Bild so hoch wie die Textspalte */
@media (min-width:768px) and (max-width:991px){section.voucher_component .voucher_grid.voucher_grid{align-items:stretch!important}section.voucher_component .voucher_grid .voucher_media.voucher_media{aspect-ratio:auto!important;height:auto!important;max-width:none!important;align-self:stretch!important;justify-self:stretch!important}}
.steps_list.is-orange .steps_number{color:var(--riso-orange)}
.main-wrapper:has([data-page-color="orange"]) .steps_list .steps_number{color:var(--riso-orange)!important}
/* Produktion «Technische Angaben»: zentrierter Block wie Buchung/Inhalt (66.67%), Inhalt linksbündig */
.section_technisches .container-large.is-stack{align-items:center!important}
.section_technisches .container-large.is-stack > *{width:66.6667%!important;max-width:66.6667%!important;margin-left:auto!important;margin-right:auto!important;text-align:left!important}
.section_technisches .tech-list_component{max-width:none!important;width:100%!important}
@media (max-width:991px){.section_technisches .container-large.is-stack > *{width:100%!important;max-width:100%!important}}
/* Farbsystem-Ergänzung (03.11.): Sprunglinks innerhalb der Seite (#anfrage, #termine …) verweisen auf die eigene Seite → Seitenfarbe, nicht Section-Farbe */
.main-wrapper section :is(.button,.text-link)[href^="#"]{--btn:var(--page-color);--bi:var(--page-ink)}
/* Section mit Sprunglink (= eigene Seite) UND Link auf eine andere Kategorie → gemischt → Eyebrow schwarz */
.main-wrapper:has([data-page-color="red"]) section:not(.section_hero):has(a[href^="#"]):has(a[href^="/workshops"],a[href^="/individueller-workshop"],a[href^="/risographie"],a[href^="/ueber-uns"],a[href^="/fr/atelier"],a[href^="/fr-ateliers"],a[href^="/fr/risographie"],a[href^="/fr/a-propos"]),.main-wrapper:has([data-page-color="pink"]) section:not(.section_hero):has(a[href^="#"]):has(a[href^="/produktion"],a[href^="/risographie"],a[href^="/ueber-uns"],a[href^="/fr/production"],a[href^="/fr/risographie"],a[href^="/fr/a-propos"]),.main-wrapper:has([data-page-color="orange"]) section:not(.section_hero):has(a[href^="#"]):has(a[href^="/produktion"],a[href^="/workshops"],a[href^="/individueller-workshop"],a[href^="/fr/production"],a[href^="/fr/atelier"],a[href^="/fr-ateliers"]){--sc:#000000;--sci:#FFFFFF}
/* Checkbox mit Titel + Hinweis (z. B. «Abholung im Studio» im Rechner) */
.form_check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.form_checkbox{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--black);cursor:pointer}
.form_check-body{display:flex;flex-direction:column;gap:2px}
.form_check-title{font-size:var(--fs-body);line-height:1.3;color:var(--black)}
.form_check-text{font-size:var(--fs-small);line-height:1.4;color:var(--text-meta)}
/* Abholung gewählt: Lieferadresse = Rechnungsadresse, Auswahl «andere Rechnungsadresse» ausgeblendet (Klasse per Skript) */
.is-pickup .address-choice_component,.is-pickup .form_group-title.is-billing-title{display:none!important}
/* Datei-Upload (Druckdaten): Kacheln 2 Spalten, Klick oder Drag & Drop. Zustand via Skript (is-filled, is-error, is-drag) */
.upload_component{display:flex;flex-direction:column;gap:12px}
.upload_list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.upload_tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:112px;padding:16px;border:1px dashed rgba(0,0,0,.3);border-radius:var(--radius-card);background:var(--white);color:var(--text-meta);font-size:var(--fs-small);line-height:1.4;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.upload_tile:hover,.upload_tile.is-drag{border-color:var(--black);background:var(--paper)}
.upload_input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.upload_icon{flex:none;width:24px;height:24px;color:var(--black)}
.upload_text{overflow-wrap:anywhere}
.upload_tile.is-filled{border-style:solid;border-color:var(--black);color:var(--black)}
.upload_tile.is-error{border-color:var(--riso-red);color:var(--riso-red)}
.upload_remove{position:absolute;top:8px;right:8px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;background:var(--grey-200);color:var(--black);font-size:16px;line-height:28px;text-align:center;cursor:pointer;padding:0}
@media (max-width:478px){.upload_list{grid-template-columns:minmax(0,1fr)}}
/* Adress-Auswahl (Rechnungsadresse gleich wie Lieferadresse / andere): zwei schlichte Radiobuttons, bei «andere» erscheinen die Felder */
.address-choice_component{display:flex;flex-direction:column;gap:12px}
.address-choice_option{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.address-choice_radio{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--black);cursor:pointer}
.address-choice_body{display:flex;flex-direction:column;gap:2px;min-width:0}
.address-choice_title{margin:0;font-size:var(--fs-body);line-height:1.3;color:var(--black)}
.address-choice_summary{margin:0;font-size:var(--fs-small);line-height:1.4;color:var(--text-meta)}
.address-choice_fields{display:none;flex-direction:column;gap:16px;padding-top:8px}
.address-choice_component:has(.address-choice_radio[value="nein"]:checked) .address-choice_fields{display:flex}

/* Farben Vorder-/Rückseite: grauer Hinweis (z. B. «4 Farben (max.)», «unbedruckt») unter dem Titel statt rechts */
.calculator_ink-head{flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;gap:2px!important}
/* Produkt|Auflage und Papier|Seitenzahl je auf einer Zeile, Auflage/Seitenzahl 30% */
/* Richtpreis-Karte scrollt nicht mehr mit (kein position:sticky) */
.calculator_card{position:static!important;top:auto!important}
/* Alle Eingabefelder und Dropdowns gleich hoch (Datumsfelder waren höher), Zeilen oben bündig */
:is(input,select):is(.form_input,.calculator_input){height:50px!important;min-height:50px!important;box-sizing:border-box!important;line-height:1.5;margin:0!important}
.calculator_label,.form_field{gap:6px!important}
/* riso-calc blendet Felder per inline display:block ein (z. B. Testdruck) → dann gilt die Flex-Lücke nicht, Abstand per margin */
:is(.calculator_label,.form_field)[style*="display: block"] > :is(select,input,textarea),:is(.calculator_label,.form_field)[style*="display:block"] > :is(select,input,textarea){display:block;width:100%;margin-top:6px!important}
.calculator_row,.form_pair{align-items:start!important}
.calculator_row > .calculator_column{gap:6px}
.calculator_row:has([data-calc-field="product"]),.calculator_row:has([data-calc-field="paper"]){grid-template-columns:minmax(0,7fr) minmax(0,3fr)!important}
@media (max-width:478px){.calculator_row:has([data-calc-field="product"]),.calculator_row:has([data-calc-field="paper"]){grid-template-columns:minmax(0,1fr)!important}}
/* Aufklappbarer Formularteil (z. B. «Andere Lieferadresse») */
.form_details{border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12)}
.form_details-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;cursor:pointer;list-style:none;font-size:var(--fs-body);color:var(--black)}
.form_details-toggle::-webkit-details-marker{display:none}
.form_details-toggle::after{content:"";flex:none;width:18px;height:18px;margin-right:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/18px 18px;transition:transform var(--dur-fast) var(--ease-standard)}
.form_details[open] .form_details-toggle::after{transform:rotate(180deg)}
.form_details-body{display:flex;flex-direction:column;gap:16px;padding:4px 0 20px}
.calculator_fieldset > p.calculator_label{margin:8px 0 -8px}
@media (max-width:478px){.form_pair.is-even,.form_pair.is-wide-left{grid-template-columns:minmax(0,1fr)}}
/* Leere Dropdowns und Datumsfelder grau (Platzhalter), Liste selbst schwarz */
:is(.form_input,.calculator_input)[data-empty],:is(.form_input,.calculator_input)[data-empty]::-webkit-datetime-edit{color:var(--grey-500)!important}
select:is(.form_input,.calculator_input) option{color:var(--black)}
select:is(.form_input,.calculator_input) option[disabled]{color:var(--grey-500)}
:is(.form_input,.calculator_input)::placeholder{color:var(--grey-500);opacity:1}
/* 03.11. Karten- und Bildraster (ohne Galerien): vertikaler Abstand = 2× horizontaler */
.card-grid_list,.card-grid_list.is-rows-large,.offer_list,.ink_list.is-3{row-gap:64px!important;column-gap:32px!important}
.ink_list{row-gap:48px;column-gap:24px}
.image-grid_list{row-gap:32px!important;column-gap:16px!important}
.anlass-card_list{row-gap:calc(2 * var(--acg,32px))!important;column-gap:var(--acg,32px)!important}
@media (max-width:991px){.section_beispiele .card-grid_list{row-gap:48px!important;column-gap:24px!important}.anlass-card_list{--acg:24px}}
/* 05.11. Home-Titel erscheint weich: Wort für Wort leicht versetzt (0 / 0.25 / 0.5 / 0.75 s), je 1.1 s → nach 1.85 s steht der ganze Titel */
@keyframes risoTitleIn{from{opacity:0;transform:translateY(.12em)}to{opacity:1;transform:none}}
.hero-home_title .hero-home_word{animation:risoTitleIn 1.1s cubic-bezier(.22,.61,.36,1) both}
.hero-home_title .hero-home_word.is-1{animation-delay:0s}
.hero-home_title .hero-home_word.is-2{animation-delay:.25s}
.hero-home_title .hero-home_word.is-3{animation-delay:.5s}
.hero-home_title .hero-home_word.is-4{animation-delay:.75s}
@media (prefers-reduced-motion:reduce){.hero-home_title .hero-home_word{animation:none}}
/* 05.11. Leistungen Mobile: grüne Pille unter dem Bild statt darüber, damit die Referenz frei bleibt */
@media (max-width:767px){
.leistungen_panel .image-grid_list>.image-grid_item,.leistungen_panel .image-grid_list>.image-grid_item:first-child,.leistungen_panel .image-grid_list>.image-grid_item:nth-child(n+2){aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important}
.leistungen_panel .image-grid_hover{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column;align-items:flex-start;gap:10px;overflow:visible!important}
.leistungen_panel .image-grid_hover .image-grid_image{position:static!important;display:block;width:100%!important;height:auto!important;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-card)}
.leistungen_panel .image-grid_hover .image-grid_tag{position:static!important;left:auto!important;top:auto!important;bottom:auto!important;transform:none!important;opacity:1!important;max-width:100%}
}
/* 05.11. Alle Karussells (Bewertungen, Galerien) auf Touch/Mobile: Karte rastet beim Loslassen ein. Endlos-Sprung und Autoplay im Plugin laufen in ganzen Kartenschritten, passen also zum Raster */
@media (hover:none),(max-width:767px){
[data-carousel]{scroll-snap-type:x mandatory}
[data-carousel]>*{scroll-snap-align:start;scroll-snap-stop:normal}
}
/* 05.11. Leistungen: Bilder sind keine Links → kein Hover-Zoom. Mobile: alle 3 Referenzen als wischbares Karussell (natives Scrollen, Einrasten) */
.leistungen_panel .image-grid_hover:hover .image-grid_image,.leistungen_panel .image-grid_image{transform:none!important}
@media (max-width:767px){
.leistungen_panel .image-grid_list{display:flex!important;grid-template-columns:none!important;grid-template-rows:none!important;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;margin:0 -24px;padding:0 24px;scroll-padding:0 24px}
.leistungen_panel .image-grid_list::-webkit-scrollbar{display:none}
.leistungen_panel .image-grid_list>.image-grid_item,.leistungen_panel .image-grid_list>.image-grid_item:first-child,.leistungen_panel .image-grid_list>.image-grid_item:nth-child(n+2){display:block!important;flex:0 0 82%!important;grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/5!important;height:auto!important;scroll-snap-align:start}
}

/* Sprachumschalter als Dropdown im primären Button-Design (09.11.). Markup im Layout-Template: details.lang-switch_component > summary.button.is-small.lang-switch_toggle (span.lang-switch_current + svg.lang-switch_icon) + div.lang-switch_list > a.lang-switch_link[data-lang]. Skript newsletter-result.js setzt Links, aktuelle Sprache und schliesst bei Klick ausserhalb. Buttonfarbe = Seitenfarbe. */
.lang-switch_component{position:relative;margin-left:32px}
.lang-switch_toggle{--btn:var(--page-color,var(--black));list-style:none;gap:6px;user-select:none}
.lang-switch_toggle::-webkit-details-marker{display:none}
.lang-switch_toggle::marker{content:""}
.lang-switch_icon{width:16px;height:16px;flex:none;transition:transform var(--dur-fast) var(--ease-standard)}
.lang-switch_component[open] .lang-switch_icon{transform:rotate(180deg)}
.lang-switch_list{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:160px;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--white);border-radius:var(--radius-card);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.lang-switch_link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:6px;font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--black)}
.lang-switch_link:hover{background:var(--paper)}
.lang-switch_link.is-active::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--page-color,var(--black))}
.header_component .lang-switch_link.lang-switch_link{color:var(--black)!important}
/* Sprachauswahl bleibt schwarz, auch aktiv und beim Hover (sonst greift das Grün der Navigation) */
.header_component .lang-switch_list a.lang-switch_link.is-active:not(.button),.header_component .lang-switch_list a.lang-switch_link[href]:not(.button):hover{color:var(--black)!important}
.lang-switch_component:not([open]) .lang-switch_list{display:none}
.lang-switch_component.is-mobile{display:none;align-self:flex-start;margin:24px 0 0;padding-top:24px;border-top:1px solid rgba(0,0,0,.12)}
.header_mobile-menu .lang-switch_link{font-size:1.1rem;padding:8px 12px}
.lang-switch_component.is-mobile .lang-switch_list{position:static;margin-top:8px;box-shadow:none;background:transparent;padding:0}
@media (max-width:991px){.lang-switch_component:not(.is-mobile){display:none}.lang-switch_component.is-mobile{display:block}}