/* „Aus einem Fluss“ (12.11.2026, Wünsche Sascha): Schaufenster, interaktive Placemats und Galerie wirken wie ein Teil der Seite.
   Erst dunkel gebaut (Stand in aufnahmen/fluss-dunkel.css), am selben Abend auf Saschas Vorschlag hell wie die übrige Homepage:
   gleicher Verlauf #f4f4f4 → #fff → #f4f4f4 wie die Placemats, Orange als Akzent, keine Lücken zwischen den Zeilen.
   Wird mit dem Block von einblick geladen. */

/* keine Lücke: WPBakery gibt jedem .wpb_raw_code unten 35 px, dazwischen schien der Seitengrund durch */
.ux-zeile .wpb_raw_code,.pm-zeile .wpb_raw_code,.uxg-zeile .wpb_raw_code{margin-bottom:0!important}
.ux-zeile,.pm-zeile,.uxg-zeile{margin-bottom:0!important}

/* doppelter Hinweis auf den Downloadbereich: unter den Placemats aus, die Galerie darunter nennt ihn */
.pm-zeile .pm-fuss p:first-child{display:none}

/* gleiche kleine Überschrift wie im Schaufenster */
.pm .pm-marke{letter-spacing:.06em;text-transform:uppercase;color:#c2410c}

/* Galerie der Placemats zum Ausdrucken (ersetzt die frühere Galerie der Seite) */
.uxg{position:relative;padding:clamp(40px,6vw,80px) 16px clamp(64px,9vw,120px);background:linear-gradient(180deg,#f4f4f4,#fff 40%,#f4f4f4);color:#1d1d1f;font-family:"Glacial Indifference",-apple-system,"Segoe UI",Arial,sans-serif}
.uxg *{box-sizing:border-box}
.uxg-kopf{max-width:820px;margin:0 auto;text-align:center}
.uxg-marke{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c2410c}
.uxg h2{margin:0;font-size:clamp(32px,4.6vw,54px);line-height:1.06;letter-spacing:-.02em;color:#1d1d1f}
.uxg-lead{margin:18px auto 0;max-width:680px;font-size:clamp(17px,1.8vw,20px);line-height:1.45;color:#6e6e73}
.uxg-lead a,.uxg-fuss a{color:#cd3301}
.uxg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-width:1240px;margin:clamp(30px,4vw,48px) auto 0;padding:0;list-style:none}
.uxg-raster button{appearance:none;display:block;width:100%;padding:0;border:1px solid rgba(0,0,0,.08);border-radius:16px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:zoom-in;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -10px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.32,.72,0,1),box-shadow .3s}
.uxg-raster button:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 16px 34px -12px rgba(0,0,0,.25)}
.uxg-raster button:focus-visible{outline:3px solid #ff8a1f;outline-offset:3px}
.uxg-raster img{display:block;width:100%;aspect-ratio:970/686;object-fit:cover;background:#ececf0}
.uxg-raster span{display:block;padding:10px 14px 12px;font-size:15px;font-weight:700}
.uxg-fuss{max-width:760px;margin:clamp(28px,4vw,44px) auto 0;text-align:center;font-size:15px;color:#6e6e73}
.uxg-gross{position:fixed;inset:0;z-index:100000;display:grid;grid-template-rows:1fr auto;place-items:center;padding:56px 16px 16px;background:rgba(20,20,24,.9);opacity:0;visibility:hidden;pointer-events:none;touch-action:pan-y;transition:opacity .3s ease,visibility 0s .3s}
.uxg-gross.uxg-auf{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}
.uxg-leiste a{color:#ffb37a;font-size:15px}
.uxg-gross img{max-width:min(100%,1600px);max-height:calc(100vh - 140px);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);background:#fff}
.uxg-leiste{display:flex;align-items:center;gap:12px;margin-top:14px;color:#f5f5f7;font-family:"Glacial Indifference",-apple-system,"Segoe UI",Arial,sans-serif;font-size:16px}
.uxg-gross button{appearance:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:20px;cursor:pointer}
.uxg-gross .uxg-zu{position:absolute;right:16px;top:12px}
@media (max-width:600px){.uxg-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.uxg-raster span{font-size:13px;padding:8px 10px 10px}}
@media (prefers-reduced-motion:reduce){.uxg *,.uxg-gross{transition:none!important}}

/* Einleitung: iPad mit wechselnden Placemats statt des schrägen Einzelbilds (intro.js), Original und orange Quadrate ausgeblendet */
.wf-schraeg.uxi-da>figure,.wf-schraeg.uxi-da .vc_single_image-wrapper,.wf-schraeg.uxi-da .wf-apps{display:none!important}
.uxi{position:relative;margin:10px 4% 30px;perspective:1600px}
.uxi-kippe{transform:rotateY(-14deg) rotateX(7deg) rotateZ(1.5deg);transition:transform .9s cubic-bezier(.2,.7,.2,1);animation:uxiSchwebe 6s ease-in-out infinite alternate}
.wf-schraeg:hover .uxi-kippe{transform:rotateY(-4deg) rotateX(2deg)}
.uxi-geraet{appearance:none;display:block;width:100%;border:0;cursor:pointer;position:relative;padding:clamp(9px,1.1vw,13px);border-radius:clamp(22px,2.4vw,30px);background:linear-gradient(145deg,#3a3a40,#151518 40%,#0c0c0e);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 1px 0 rgba(255,255,255,.18) inset,0 40px 70px -24px rgba(0,0,0,.45),0 0 90px -30px rgba(255,138,31,.6)}
.uxi-schirm{display:block;position:relative;aspect-ratio:970/686;overflow:hidden;border-radius:clamp(13px,1.4vw,18px);background:#fff;transform:translateZ(0)}
.uxi-schirm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;transform-origin:30% 30%}
.uxi-schirm img.uxi-an{opacity:1;animation:uxiZoom 4.6s ease-in-out forwards}
.uxi-app{appearance:none;padding:0;border:0;cursor:pointer;position:absolute;z-index:2;width:var(--g);height:var(--g);margin:calc(var(--g)/-2) 0 0 calc(var(--g)/-2);border-radius:23%;background-size:cover;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.35);animation:uxiApp var(--t) ease-in-out var(--v) infinite alternate;transition:box-shadow .25s,outline-color .25s;outline:3px solid transparent;outline-offset:3px}
.uxi-app:hover{box-shadow:0 16px 30px -8px rgba(205,51,1,.45)}
.uxi-app.uxi-gewaehlt{outline-color:#ff8a1f}
.uxi-app:focus-visible,.uxi-geraet:focus-visible{outline:3px solid #ff8a1f}
@keyframes uxiSchwebe{from{translate:0 -6px}to{translate:0 8px}}
@keyframes uxiZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes uxiApp{from{transform:translateY(-7px) rotate(-5deg)}to{transform:translateY(7px) rotate(5deg)}}
@media (max-width:767px){.uxi{margin:20px 8% 36px}.uxi-app{width:calc(var(--g)*.75);height:calc(var(--g)*.75);margin:calc(var(--g)*-.375) 0 0 calc(var(--g)*-.375)}.uxi-kippe{transform:rotateY(-9deg) rotateX(4deg) rotateZ(1deg)}}
@media (prefers-reduced-motion:reduce){.uxi-kippe,.uxi-app,.uxi-schirm img.uxi-an{animation:none!important}}

/* Überschrift der Einleitung auf dem iPhone unsichtbar (Rückmeldung Sascha 12.11.2026): Safari zeigt Verlaufsschrift
   (background-clip:text) nicht, wenn dasselbe Element mit clip-path aufgedeckt wird (basis.css, .wf-rv). Hier ohne clip-path,
   nur sanft eingeblendet; der Verlauf bleibt. */
.wf-digital .ld-fancy-heading.wf-rv>*,.wf-digital .ld-fancy-heading.wf-rv.da>*{clip-path:none!important;-webkit-clip-path:none!important}
.wf-digital .ld-fancy-heading>*{-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Eigentliche Ursache (Foto vom iPhone, 12.11.2026): Den Verlauf trägt das h1, der Text steht aber in span.ld-fh-txt (inline-block,
   position:relative, vom Theme). Safari malt background-clip:text nicht in so einen Kindblock, die Schrift bleibt durchsichtig.
   Deshalb Verlauf direkt am span, am h1 keiner. */
.wf-digital .ld-fancy-heading>*{background:none!important;-webkit-text-fill-color:currentColor}
.wf-digital .ld-fancy-heading .ld-fh-txt{background:linear-gradient(100deg,#ff9900,#e85d04 45%,#cd3301);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#e85d04}
/* mehr Luft zwischen Überschrift und Text (Wunsch Sascha 12.11.2026) */
.wf-digital .ld-fancy-heading{margin-bottom:clamp(20px,2.6vw,36px)!important}