/* Sys360 auf UIkit: Grundlagen neben Odoo (Bootstrap bleibt für Shop, Portal, Anmeldung geladen). */
.s360-uikit-kopf { position: relative; z-index: 980; }
/* Überlagerter Kopf (wie YOOtheme «tm-header-overlay»): liegt über dem ersten Abschnitt */
.s360-uikit-kopf .tm-header-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 980; }
/* Odoos Pflichtangaben (Impressum/Datenschutz) unter dem UIkit-Fuss schlicht */
.s360-uikit-fuss + footer#bottom { font-size: .85rem; }

/* Bild-Überlagerung (S 30.10.) an jedem Element mit Bild: --s360-ue-farbe (Farbe), --s360-ue-staerke (0-100),
   --s360-ue-modus (normal, multiply, color …). Profi-Ansicht, Chat und Website-Umzug setzen nur diese Werte. */
.s360-ue.s360-ue-mix {
    background-color: color-mix(in srgb, var(--s360-ue-farbe, #000) calc(var(--s360-ue-staerke, 40) * 1%), transparent);
    background-blend-mode: var(--s360-ue-modus, multiply);
}
.s360-ue.s360-ue-normal, .s360-ue-bild { position: relative; }
.s360-ue.s360-ue-normal::after, .s360-ue-bild::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: var(--s360-ue-farbe, #000); opacity: calc(var(--s360-ue-staerke, 40) / 100);
    mix-blend-mode: var(--s360-ue-modus, normal);
}
.s360-ue.s360-ue-normal > :not([class*="uk-position"]):not([uk-cover]):not(.uk-cover-container) { position: relative; z-index: 1; }
/* Ken Burns auf Hintergrundbild: das Bild liegt in einer eigenen Ebene (Profi-Ansicht), Text zoomt nicht mit */
.s360-kb { position: relative; overflow: hidden; }
.s360-kb > .s360-kb-bild { background-size: cover; background-position: center; z-index: 0; }
.s360-kb > :not(.s360-kb-bild):not([class*="uk-position"]) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .s360-kb-bild.uk-animation-kenburns { animation: none; } }
/* Einzelbild: Behälter um das <img> (Profi-Ansicht) */
.s360-ue-bild { display: inline-block; line-height: 0; }
.s360-ue-bild > img { display: block; }

/* Schreibmaschine (schreibmaschine.js) */
.s360-sm-cursor { display: inline-block; margin-left: .05em; animation: s360-blinken 1s steps(1) infinite; }
@keyframes s360-blinken { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s360-sm-cursor { animation: none; } }

/* --- Sys360-Effekte (effekte.js) ------------------------------------------------------------------------------- */
/* Laufband */
.s360-laufband { overflow: hidden; }
.s360-laufband-spur { display: flex; gap: 3rem; width: max-content; animation: s360-lauf 30s linear infinite; align-items: center; }
.s360-laufband:hover .s360-laufband-spur, .s360-laufband:focus-within .s360-laufband-spur { animation-play-state: paused; }
.s360-laufband-ruhig { overflow-x: auto; }
.s360-laufband-ruhig .s360-laufband-spur { animation: none; }
@keyframes s360-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Vorher/Nachher */
.s360-vorher-nachher { position: relative; overflow: hidden; touch-action: pan-y; }
.s360-vorher-nachher img { display: block; width: 100%; height: auto; }
.s360-vorher-nachher .s360-vn-nachher { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.s360-vn-linie { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.4); pointer-events: none; }
.s360-vn-griff { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
/* Wechselnde Wörter */
.s360-wort { display: inline-block; transition: opacity .3s, transform .3s; }
.s360-wort-weg { opacity: 0; transform: translateY(.3em); }
/* Wort/Zeile einblenden */
.s360-ein { display: inline-block; opacity: 0; transform: translateY(.6em); transition: opacity .5s ease, transform .5s ease; }
.s360-ein-da { opacity: 1; transform: none; }
/* Scrollgeschichte: Bild bleibt stehen */
.s360-geschichte-bild { position: sticky; top: 15vh; }
.s360-geschichte-bild [data-schritt] { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.s360-geschichte-bild [data-schritt]:first-child { position: relative; }
.s360-geschichte-bild .s360-aktiv { opacity: 1; }
.s360-geschichte-schritt { min-height: 60vh; display: flex; align-items: center; }
/* Karten-Hover: anheben, Schatten, Bild-Zoom */
.s360-karte-hover { transition: transform .3s ease, box-shadow .3s ease; }
.s360-karte-hover:hover { transform: translateY(-6px); box-shadow: 0 14px 25px rgba(0,0,0,.16); }
.s360-karte-hover img { transition: transform .5s ease; }
.s360-karte-hover:hover img { transform: scale(1.05); }
/* 360°-Ansicht */
[data-s360-dreh] { cursor: grab; touch-action: pan-y; user-select: none; }
[data-s360-dreh]:active { cursor: grabbing; }
[data-s360-dreh] img { display: block; width: 100%; height: auto; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .s360-ein { opacity: 1; transform: none; transition: none; }
    .s360-karte-hover, .s360-karte-hover img, .s360-wort, .s360-geschichte-bild [data-schritt] { transition: none; }
    .s360-karte-hover:hover { transform: none; }
    .s360-karte-hover:hover img { transform: none; }
}

/* Hell-Kontext (.uk-light, z. B. Text auf Bild) hat Vorrang vor dem Website-Theme - wichtig, wo eine UIkit-Seite in einer
   bestehenden (Bootstrap-)Website läuft und deren Titel-/Textfarben sonst gewinnen */
#wrapwrap .uk-light :is(h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-heading-small, .uk-heading-medium,
    .uk-heading-large, .uk-heading-xlarge) { color: #fff; }
#wrapwrap .uk-light :is(p, li, .uk-text-lead, address) { color: rgba(255, 255, 255, .85); }

/* --- Bild-Effekte ------------------------------------------------------------------------------------------------ */
/* Schwarzweiss wird farbig (Hover, auf dem Handy beim Antippen/Fokus) */
.s360-sw img, img.s360-sw { filter: grayscale(1); transition: filter .5s ease; }
.s360-sw:hover img, .s360-sw:focus-within img, img.s360-sw:hover, img.s360-sw:focus { filter: none; }
/* Duotone in den Firmenfarben: --s360-duo-hell / --s360-duo-dunkel */
.s360-duotone { position: relative; display: block; overflow: hidden; isolation: isolate; }
.s360-duotone img { filter: grayscale(1) contrast(1.15); display: block; width: 100%; position: relative; z-index: 0; }
.s360-duotone::before, .s360-duotone::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.s360-duotone::before { background: var(--s360-duo-hell, #f7c59f); mix-blend-mode: darken; }
.s360-duotone::after { background: var(--s360-duo-dunkel, #1e2225); mix-blend-mode: lighten; }
/* Bildformen */
.s360-form-rund img, img.s360-form-rund { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.s360-form-weich img, img.s360-form-weich { border-radius: 1.5rem; }
.s360-form-welle img, img.s360-form-welle {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C83 98 67 80 50 88S17 98 0 88Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V88C83 98 67 80 50 88S17 98 0 88Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Enthüllen beim Scrollen */
[data-s360-enthuellen] { transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1); }
.s360-enth-links { clip-path: inset(0 100% 0 0); }
.s360-enth-unten { clip-path: inset(100% 0 0 0); }
.s360-enth-kreis { clip-path: circle(0% at 50% 50%); }
.s360-enth-links.s360-enth-da, .s360-enth-unten.s360-enth-da { clip-path: inset(0 0 0 0); }
.s360-enth-kreis.s360-enth-da { clip-path: circle(75% at 50% 50%); }
/* Blur-up */
.s360-blur { background-size: cover; background-position: center; overflow: hidden; display: block; }
.s360-blur img { opacity: 0; transition: opacity .6s ease; display: block; width: 100%; }
.s360-blur.s360-blur-da img { opacity: 1; }
/* Hotspots (uk-marker + uk-drop) */
.s360-hotspots { position: relative; }
.s360-hotspots .uk-marker { position: absolute; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
    .s360-sw img, img.s360-sw, [data-s360-enthuellen], .s360-blur img { transition: none; }
    [data-s360-enthuellen] { clip-path: none !important; }
}