/* =====================================================================
 * Demo: "Kommt Ihnen das bekannt vor?" as a collage of notes and
 * "Was ich für Sie tue" as tiles with live elements — built on the
 * existing tokens (Inter, --c-*, --r-*) so both sections sit inside the
 * current page unchanged. Slots carry the reveal (effects.js); the inner
 * note/tile carries drift, rotation and tilt (js/tiles.js).
 * ===================================================================== */

/* ── collage (pain points) ───────────────────────────────────────── */
.collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 36px 24px;
    margin-top: 8px;
}
.collage__slot { display: flex; }
.collage__slot--a { grid-column: 1 / span 7; grid-row: span 2; }
.collage__slot--b { grid-column: 8 / span 5; }
.collage__slot--c { grid-column: 8 / span 5; }
.collage__slot--d { grid-column: 1 / span 4; }
.collage__slot--e { grid-column: 5 / span 4; }
.collage__slot--f { grid-column: 9 / span 4; }

.note {
    --rot: 0deg; --tx: 0deg; --ty: 0deg; --drift: 0px;
    position: relative; flex: 1;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    padding: 32px 30px;
    border-radius: var(--r-lg);
    transform: translateY(var(--drift)) rotate(var(--rot)) perspective(900px) rotateY(var(--tx)) rotateX(var(--ty));
    transition: transform .25s ease-out, box-shadow var(--t-base);
    box-shadow: var(--shadow-lg);
}
.note:hover { --rot: 0deg; box-shadow: var(--shadow-xl); z-index: 2; }
.note__q {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 700; line-height: 1.35; letter-spacing: -0.01em;
}
.note__a { font-size: .9rem; font-weight: 600; }

.collage__slot--a .note { --rot: -.8deg; justify-content: flex-start; padding: 44px 40px; }
.collage__slot--a .note__q { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 14em; }
.collage__slot--a .note__a { margin-top: auto; }
.collage__slot--a .note::before {
    content: '„'; position: absolute; right: 30px; top: -22px;
    font: 800 8rem/1 var(--f-body); color: var(--c-accent);
}
.collage__slot--b .note { --rot: 1.2deg; }
.collage__slot--c .note { --rot: -1deg; }
.collage__slot--d .note { --rot: .9deg; }
.collage__slot--e .note { --rot: -.6deg; }
.collage__slot--f .note { --rot: 1.1deg; }

.note--white   { background: var(--c-bg-white); color: var(--c-text); border: 1px solid var(--c-border); }
.note--white .note__a { color: var(--c-primary); }
.note--orange  { background: var(--c-accent); color: var(--c-bg-dark); }
.note--blue    { background: var(--c-primary); color: var(--c-text-white); }
.note--navy    { background: var(--c-bg-dark); color: var(--c-text-white); }
.note--navy .note__a { color: #8fb3ff; }
.note--paper   { background: var(--c-bg-light-2); color: var(--c-text); }
.note--paper .note__a { color: var(--c-primary-dark); }
.note--outline { background: transparent; color: var(--c-text); border: 2px solid var(--c-text); box-shadow: none; }
.note--outline .note__a { color: var(--c-primary-dark); }

.collage + .painpoints__cta { margin-top: 56px; }

@media (max-width: 900px) {
    .collage { grid-template-columns: 1fr 1fr; gap: 20px; }
    .collage__slot--a { grid-column: 1 / -1; grid-row: auto; }
    .collage__slot--b, .collage__slot--c, .collage__slot--d, .collage__slot--e, .collage__slot--f { grid-column: auto; }
    .note { --drift: 0px !important; }
    .collage__slot--a .note::before { display: none; }
}
@media (max-width: 560px) { .collage { grid-template-columns: 1fr; } }

/* ── bento (services) ────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.bento__slot { display: flex; grid-column: span 2; }
.bento__slot--wide { grid-column: span 4; }
.bento__slot--half { grid-column: span 3; }

.tile {
    --tx: 0deg; --ty: 0deg;
    position: relative; flex: 1;
    display: flex; flex-direction: column; gap: 12px;
    padding: 32px; border-radius: var(--r-lg); overflow: hidden;
    transform: perspective(1000px) rotateY(var(--tx)) rotateX(var(--ty));
    transition: transform .25s ease-out, border-color var(--t-base), box-shadow var(--t-base);
}
.tile:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, .3); }
.tile--ink    { background: var(--c-bg-dark-2); border: 1px solid rgba(255, 255, 255, .06); color: var(--c-text-light); }
.tile--ink:hover { border-color: rgba(255, 106, 0, .3); }
.tile--blue   { background: var(--c-primary); color: var(--c-text-white); }
.tile--light  { background: var(--c-bg-light); color: var(--c-text); }
.tile--orange { background: var(--c-accent); color: var(--c-bg-dark); }

.tile__visual { height: 128px; margin-bottom: 8px; position: relative; }
.tile__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: inherit; }
.tile--ink .tile__title { color: var(--c-text-white); }
.tile__desc { font-size: .95rem; line-height: 1.65; opacity: .85; }
.tile--blue .tile__desc, .tile--blue .tile__list { opacity: 1; }
.tile__list { margin-top: auto; padding: 14px 0 0; list-style: none; display: grid; gap: 6px; font-size: .875rem; opacity: .8; }
.tile__list li { padding-left: 1em; text-indent: -1em; }
.tile__list li::before { content: '– '; }

/* wide tiles: text left, live element right */
.tile--wide:not(.tile--check) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-content: start; }
.tile--wide:not(.tile--check) .tile__visual { grid-column: 2; grid-row: 1 / span 4; height: auto; min-height: 210px; margin: 0; }
.tile--wide:not(.tile--check) > :not(.tile__visual) { grid-column: 1; }

/* bars: use cases being scored */
.v-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 10%; padding: 0 2%; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.v-bars span { flex: 1; height: calc(var(--h) * 1%); background: var(--c-bg-dark-3); border-radius: 3px 3px 0 0; transform-origin: bottom; transform: scaleY(.4); transition: transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.v-bars span { background: #2a3d5c; }
.v-bars span:nth-child(4), .v-bars span:nth-child(6) { background: var(--c-accent); }
.is-live .v-bars span { transform: scaleY(1); }
.is-live .v-bars span:nth-child(2) { transition-delay: .08s } .is-live .v-bars span:nth-child(3) { transition-delay: .16s } .is-live .v-bars span:nth-child(4) { transition-delay: .24s }
.is-live .v-bars span:nth-child(5) { transition-delay: .32s } .is-live .v-bars span:nth-child(6) { transition-delay: .4s } .is-live .v-bars span:nth-child(7) { transition-delay: .48s } .is-live .v-bars span:nth-child(8) { transition-delay: .56s }

/* radar: technology radar sweeping */
.v-radar { position: absolute; top: 0; bottom: 0; left: 0; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.v-radar__ring { position: absolute; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; }
.v-radar__ring:nth-child(1) { inset: 0; } .v-radar__ring:nth-child(2) { inset: 18%; } .v-radar__ring:nth-child(3) { inset: 36%; }
.v-radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70deg); animation: tl-spin 4s linear infinite paused; }
.v-radar b { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: #fff; opacity: .25; animation: tl-blip 4s ease-out infinite var(--d); animation-play-state: paused; }
.is-live .v-radar__sweep, .is-live .v-radar b { animation-play-state: running; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@keyframes tl-blip { 0%, 100% { opacity: .25; transform: scale(1); } 8% { opacity: 1; transform: scale(1.6); background: var(--c-accent); } 30% { opacity: .6; transform: scale(1); } }

/* slides: a training deck shuffling */
.v-slides { position: absolute; inset: 6px 0 0 0; }
.v-slides span { position: absolute; left: 0; top: 0; width: 64%; aspect-ratio: 16 / 10; border-radius: 6px; background: #fff; border: 1px solid var(--c-border); box-shadow: var(--shadow-md); }
.v-slides span::before { content: ''; position: absolute; left: 10%; top: 16%; width: 46%; height: 9%; background: var(--c-bg-dark); border-radius: 2px; box-shadow: 0 14px 0 -2px var(--c-border), 0 26px 0 -2px var(--c-border); }
.v-slides span::after { content: ''; position: absolute; right: 10%; bottom: 14%; width: 26%; height: 34%; background: var(--c-primary); border-radius: 3px; }
.v-slides span:nth-child(2) { transform: translate(14%, 10%); }
.v-slides span:nth-child(3) { transform: translate(28%, 20%); }
.v-slides span:nth-child(3)::after { background: var(--c-accent); }
.is-live .v-slides span { animation: tl-deck 6s cubic-bezier(.6, 0, .2, 1) infinite; }
.is-live .v-slides span:nth-child(2) { animation-delay: -2s; } .is-live .v-slides span:nth-child(3) { animation-delay: -4s; }
@keyframes tl-deck {
    0%, 28%  { transform: translate(28%, 20%); z-index: 3; }
    33%, 61% { transform: translate(0, 0); z-index: 1; }
    66%, 95% { transform: translate(14%, 10%); z-index: 2; }
    100%     { transform: translate(28%, 20%); z-index: 3; }
}

/* checklist: the compliance items tick off one by one */
.tile--check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 36px; align-content: start; }
.tile--check .tile__title, .tile--check .tile__desc { grid-column: 1; }
.tile--check .tile__desc { align-self: start; }
.tile--check .tile__list { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; gap: 10px; font-size: .95rem; opacity: 1; align-self: center; }
.tile--check .tile__list li { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); text-indent: 0; }
.tile--check .tile__list li::before {
    content: ''; flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .4);
    background: no-repeat center / 0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230a1628' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.is-live.tile--check .tile__list li::before { animation: tl-tick 8s infinite; }
.is-live.tile--check .tile__list li:nth-child(2)::before { animation-delay: .7s; }
.is-live.tile--check .tile__list li:nth-child(3)::before { animation-delay: 1.4s; }
.is-live.tile--check .tile__list li:nth-child(4)::before { animation-delay: 2.1s; }
@keyframes tl-tick {
    0%, 4%   { background-color: transparent; border-color: rgba(255, 255, 255, .4); background-size: 0; }
    8%, 88%  { background-color: var(--c-accent); border-color: var(--c-accent); background-size: 14px; }
    96%, 100% { background-color: transparent; border-color: rgba(255, 255, 255, .4); background-size: 0; }
}

/* pipeline: PoC → Pilot → Betrieb */
.v-pipe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; }
.v-pipe__track { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(10, 22, 40, .3); }
.v-pipe__track i { position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-bg-dark); }
.is-live .v-pipe__track i { animation: tl-travel 4.5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tl-travel { 0% { left: 0; } 45%, 55% { left: calc(50% - 6px); } 95%, 100% { left: calc(100% - 12px); } }
.v-pipe__node { position: relative; z-index: 1; padding: 8px 14px; border-radius: var(--r-sm); background: var(--c-bg-dark); color: #fff; font-size: .875rem; font-weight: 600; }

/* calendar: 1–2 days a month on call */
.v-cal { position: absolute; inset: 0 34% 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-content: center; }
.v-cal span { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.is-live .v-cal span:nth-child(9), .is-live .v-cal span:nth-child(24) { animation: tl-day 6s infinite; }
.is-live .v-cal span:nth-child(24) { animation-delay: 3s; }
@keyframes tl-day { 0%, 100% { background: rgba(255, 255, 255, .07); } 10%, 45% { background: var(--c-accent); } }

@media (max-width: 1000px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento__slot, .bento__slot--half { grid-column: span 1; }
    .bento__slot--wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .bento__slot, .bento__slot--half, .bento__slot--wide { grid-column: 1; }
    .tile--wide:not(.tile--check), .tile--check { display: flex; }
    .tile--wide:not(.tile--check) .tile__visual { min-height: 150px; }
    .tile--check .tile__list { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .note, .tile { transform: rotate(var(--rot, 0deg)); transition: none; }
    .v-bars span { transform: none; transition: none; }
    .v-radar__sweep, .v-radar b, .v-slides span, .tile__list li::before, .v-pipe__track i, .v-cal span { animation: none !important; }
}
.v-cal { inset: 0 auto 0 0; grid-template-columns: repeat(7, 16px); gap: 6px; }
/* fix: size the slide deck by height so it can never spill into the headline (iOS / narrow tiles) */
.tile__visual { overflow: hidden; }
.v-slides { inset: 0; }
.v-slides span { width: auto; height: 74%; aspect-ratio: 16 / 10; }