/* Geschäftsausstattung header after iru.com (16.10.2026), values from their lumi-cards module: centred headline, 3D card
   carousel below (js/coverflow.js). Every panel is a square; js/coverflow.js paints iru's colour slab into it (hard left edge,
   blurring out to the right), the front panel also shows its glass card. */
.lh.cf { padding-bottom: 2rem; text-align: center; overflow-x: clip; }
.lh.cf .lh_h1 { max-width: none; }
.lh.cf .lh_btns { margin-top: 2rem; }
.cf_flow { position: relative; height: 774px; margin-top: 1.75rem; perspective: 2000px; perspective-origin: 50% 50%; user-select: none; cursor: grab; }
.cf_flow:active { cursor: grabbing; }
.cf_track { position: absolute; left: 50%; top: 40%; transform-style: preserve-3d; pointer-events: none; }
.cf_track > li { display: none; }
.cf_panel { position: absolute; left: -250px; top: -250px; width: 500px; height: 500px; transform-style: preserve-3d; pointer-events: auto; cursor: pointer; will-change: transform, opacity;
  transition: transform 1.1s cubic-bezier(.25, .46, .45, .94), opacity .4s ease-out; }
.cf_panel.is-jump { transition: none; }
.cf_panel.is-active { cursor: default; }
.cf_slab { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the glass card on the front panel (16.10.2026): almost clear, only the word and one paragraph in bold white;
   sizes follow the panel width (container units), so it scales with the breakpoints */
.cf_panel { container-type: inline-size; }
.cf_glass { position: absolute; left: 50%; top: 50%; width: 52%; padding: 7cqw 6cqw; transform: translate(-50%, -50%); text-align: left; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s ease-in-out; pointer-events: none; }
.cf_panel.is-active .cf_glass { opacity: 1; transition-delay: .15s; }
.cf_word { margin: 0 0 3cqw; font-family: var(--_typography---font-styles--heading); font-size: 6.4cqw; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.cf_text { margin: 0; font-family: var(--_typography---font-styles--body); font-size: 2.9cqw; font-weight: 600; line-height: 1.45; color: #fff; }
.cf_bar { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 1rem; margin-top: -120px; padding: 2px 2px 2px 1rem; background: rgba(14, 14, 43, .05); }
.cf_dots { display: flex; align-items: center; gap: .5rem; }
.cf_dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; overflow: hidden; background: rgba(12, 12, 41, .1); cursor: pointer; transition: width .4s cubic-bezier(.4, 0, .2, 1), background .2s; }
.cf_dot:hover { background: rgba(12, 12, 41, .25); }
.cf_dot.is-active { width: 38px; background: rgba(12, 12, 41, .15); cursor: default; }
.cf_dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(12, 12, 41, .9); }
.cf_pause { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: #fff; cursor: pointer; }
.cf_pause:hover { background: #ebebeb; }
.cf_pause-icon { width: 10px; height: 10px; border-left: 3px solid #0c0c29; border-right: 3px solid #0c0c29; box-sizing: border-box; }
.cf_pause.is-paused .cf_pause-icon { border: 0; border-left: 9px solid #0c0c29; border-top: 5px solid transparent; border-bottom: 5px solid transparent; width: 0; height: 0; }
/* iru's breakpoints */
@media (max-width: 1199px) { .cf_flow { height: 650px; } .cf_panel { width: 420px; height: 420px; left: -210px; top: -210px; } }
@media (max-width: 991px) { .cf_flow { height: 550px; } .cf_track { top: 35%; } .cf_panel { width: 350px; height: 350px; left: -175px; top: -175px; } }
@media (max-width: 719px) { .cf_flow { height: 480px; } .cf_track { top: 32%; } .cf_panel { width: 300px; height: 300px; left: -150px; top: -150px; } }
@media (max-width: 719px) { .cf_flow { height: 400px; } .cf_track { top: 30%; } .cf_panel { width: 240px; height: 240px; left: -120px; top: -120px; } .cf_bar { margin-top: -60px; } }
@media (max-width: 479px) { .cf_flow { height: 350px; } .cf_track { top: 28%; } .cf_panel { width: 200px; height: 200px; left: -100px; top: -100px; } }
/* 18.10.2026, Christian: "mach die paragraphs deutlicher kleiner und nicht bold hier bei dem visual" */
.cf_text { font-size: 2.2cqw; font-weight: 400; line-height: 1.5; }
@media (max-width: 719px) { .cf_text { font-size: 2.9cqw; } } /* phones keep the old size, smaller would be unreadable */
/* 18.10.2026, Christian: "näher dran am hauptvisual", then "wir nehmen das design für die geschäftsausstattung header visual bar"
   (Apple-style screenshot): the dots sit in a light grey pill, round dots, the active one a longer bar that fills dark,
   pause as its own round button next to it. Round on his word, an exception to the square corners. */
.cf_bar { display: flex; width: fit-content; gap: 16px; margin: var(--cf-bar-y, -152px) auto 0; padding: 0; background: none; }
.cf_dots { gap: 16px; height: 56px; padding: 0 36px; background: #e8e8ed; border-radius: 28px !important; }
.cf_dot { width: 8px; height: 8px; border-radius: 4px !important; background: #8e8e93; }
.cf_dot:hover { background: #6b6a66; }
.cf_dot.is-active { width: 48px; background: #8e8e93; }
.cf_dot i { border-radius: 4px !important; background: #1d1d1f; }
.cf_pause { width: 56px; height: 56px; border-radius: 50% !important; background: #e8e8ed; }
.cf_pause:hover { background: #dcdce1; }
.cf_pause-icon { width: 12px; height: 17px; border: 0; background: linear-gradient(90deg, #1d1d1f 0 4px, transparent 4px 8px, #1d1d1f 8px 12px); border-radius: 1px !important; }
.cf_pause.is-paused .cf_pause-icon { width: 0; height: 0; margin-left: 3px; background: none; border-radius: 0 !important; border-left: 13px solid #1d1d1f; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
@media (max-width: 1199px) { .cf_bar { --cf-bar-y: -120px; } }
@media (max-width: 719px) { .cf_bar { --cf-bar-y: -100px; gap: 10px; } .cf_dots { height: 44px; padding: 0 22px; gap: 12px; } .cf_dot.is-active { width: 36px; } .cf_pause { width: 44px; height: 44px; } }
/* 19 cards since 18.10.2026: on phones the dots get tighter so the pill still fits next to the pause button */
@media (max-width: 719px) { .cf_dots { gap: 7px; padding: 0 16px; } .cf_dot { width: 6px; height: 6px; } .cf_dot.is-active { width: 22px; } }
/* 18.10.2026, Christian: "grau muss heller, das ganze tick kleiner, [...] und tick weiter nach unten setzen" */
.cf_bar { --cf-bar-y: -122px; gap: 12px; }
.cf_dots { height: 44px; padding: 0 26px; gap: 12px; border-radius: 22px !important; background: #f2f2f5; }
.cf_dot { width: 6px; height: 6px; border-radius: 3px !important; background: #c4c4c9; }
.cf_dot:hover { background: #a8a8ad; }
.cf_dot.is-active { width: 36px; background: #c4c4c9; }
.cf_dot i { border-radius: 3px !important; background: #3a3a3c; }
.cf_pause { width: 44px; height: 44px; background: #f2f2f5; }
.cf_pause:hover { background: #e8e8ec; }
.cf_pause-icon { width: 10px; height: 13px; background: linear-gradient(90deg, #3a3a3c 0 3px, transparent 3px 7px, #3a3a3c 7px 10px); }
.cf_pause.is-paused .cf_pause-icon { border-left: 10px solid #3a3a3c; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 1199px) { .cf_bar { --cf-bar-y: -92px; } }
@media (max-width: 719px) { .cf_bar { --cf-bar-y: -76px; gap: 8px; } .cf_dots { height: 36px; padding: 0 14px; gap: 6px; } .cf_dot { width: 5px; height: 5px; } .cf_dot.is-active { width: 20px; } .cf_pause { width: 36px; height: 36px; } }
/* long words break inside the glass box instead of running out (19.10.2026, Christian: "brech um") */
.cf_word { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Geschäftsausstattung 834: "bisschen mehr spacing zwischen button und visual" */
@media (max-width: 991px) { body .cf_flow { margin-top: 2.5rem; } }
/* 21.10.2026, Christian: "aber hier auch schon mehr space nach oben" (~960) and on phones "visual muss grösser, und mehr abstand
   nach oben" - more room between button and carousel below 992; below 480 the panels grow 200 -> 260 px */
@media (max-width: 991px) { body .cf_flow { margin-top: 6.5rem; } }
@media (max-width: 479px) { body .cf_flow { height: 440px; margin-top: 6rem; } body .cf_track { top: 32%; } body .cf_panel { width: 260px; height: 260px; left: -130px; top: -130px; } }