/* =========================================================
   v3: Kachel-Hintergrund, kompakter Hero, endlose Projekt-Wand
   ========================================================= */
.tiles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='9' fill='%23F7F8FB' stroke='%23ECEEF4'/%3E%3C/svg%3E");
  background-size: 44px 44px; }
.tiles .acc { position: absolute; width: 39px; height: 39px; margin: 2.5px; border-radius: 9px; background: #EEF0FF; border: 1px solid #DDE1FF; opacity: 0; animation: accGlow 6s ease-in-out infinite; }
.tiles .acc--strong { background: #DCE0FF; border-color: #C5CBFF; }
@keyframes accGlow { 0%, 100% { opacity: 0; } 35%, 65% { opacity: 1; } }
.tiles--dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='9' fill='%23ffffff' fill-opacity='.03' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E"); }
.tiles--dark .acc { background: rgba(46,59,255,.28); border-color: rgba(109,119,255,.35); }
.tiles--dark .acc--strong { background: rgba(46,59,255,.5); }

/* Punkte raus, Kacheln rein */
.hero::before { display: none; }
.sec--canvas { background-image: none; background-color: #fff; }
.sec--canvas > .tiles { mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, #000); -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, #000); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(40px, 5vw, 64px); }
.hero > .tiles { mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%); }
.hero-glow { position: absolute; left: 50%; top: 20px; width: min(1100px, 100%); height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, #fff 45%, rgba(255,255,255,0) 100%); }
.h1 { font-size: clamp(38px, 5.2vw, 70px); max-width: 21ch; margin-top: 24px; line-height: 1.04; }
.hero .lead { margin-top: 30px; font-size: clamp(16.5px, 1.4vw, 19px); max-width: 560px; }
.hero .btns { margin-top: 30px; }
.hero-ticks { margin-top: 20px; }
.sel-size { display: none; }
.cur { right: -64px; bottom: -34px; }

/* ---------- Projekt-Wand ---------- */
.wall { margin-top: clamp(28px, 3.5vw, 44px); height: clamp(340px, 40vw, 540px); }
.wall-in { left: -900px; top: 6%; transform: perspective(2400px) rotateX(24deg) rotateZ(-7deg); transform-origin: calc(900px + 50vw) 30%; }
.wcard { width: clamp(260px, 24vw, 360px); aspect-ratio: 16 / 10.5; border-radius: 12px; }
.wcard img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wtrack { animation: wallL 90s linear infinite; }
.wrow:nth-child(2) .wtrack { animation: wallR 100s linear infinite; }
.wrow:nth-child(3) .wtrack { animation: wallL 110s linear infinite; }
@keyframes wallL { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes wallR { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }

/* ---------- Leistungen: alles im Loop ---------- */
.ed-frame img { animation: edScroll 12s cubic-bezier(.45,.05,.35,1) infinite; transition: none; }
.bt-design:hover .ed-frame img { transform: none; }
@keyframes edScroll { 0%, 20% { transform: translateY(0); } 50%, 70% { transform: translateY(-38%); } 100% { transform: translateY(0); } }
.phone-in img { animation: phScroll 10s cubic-bezier(.45,.05,.35,1) infinite; transition: none; }
.bt-mobile:hover .phone-in img { transform: translateX(-4%); }
@keyframes phScroll { 0%, 15% { transform: translate(-4%, 0); } 50%, 65% { transform: translate(-4%, -42%); } 100% { transform: translate(-4%, 0); } }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
  .h1 { font-size: clamp(34px, 9.5vw, 44px); }
  .wall-in { left: -500px; transform-origin: calc(500px + 50vw) 30%; }
  .wcard { width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .tiles .acc { opacity: .8; }
}

.sec--canvas, .ftr, .fund, .fn { isolation: isolate; }
.fund::before { display: none; }
.ftr .wrap, .sec--canvas .wrap { position: relative; }

/* ---------- v4: Kacheln weich ausblenden, Navigation transparent ---------- */
/* Navigation: oben transparent, Hintergrund erst beim Scrollen */
.hdr { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.hdr.on { background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
/* Hero reicht hinter die Navigation */
.hero { margin-top: -74px; padding-top: calc(74px + clamp(40px, 5vw, 64px)); }
@media (max-width: 700px) { .hero { margin-top: -64px; padding-top: calc(64px + 36px); } }

/* Hero: Kacheln nur am Rand, Mitte und unten stark ausgeblendet */
.hero > .tiles {
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 34%, transparent 48%, #000 100%), linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 58% 72% at 50% 34%, transparent 48%, #000 100%), linear-gradient(180deg, #000 0%, #000 40%, transparent 72%);
  mask-composite: intersect;
}
.hero-glow { display: none; }

/* Sektionen: Kacheln nur links und rechts, oben/unten weich ausgeblendet */
.sec--canvas > .tiles, .fund > .tiles {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-composite: intersect;
}

/* ---------- Editor-Kachel: sinnvolle Animation ---------- */
.ed-frame { height: 100%; }
.ed-frame img, .ed-frame img:hover { animation: none !important; transform: none !important; }
.ed-doc { position: relative; }
.ed-doc img { display: block; width: 100%; }
.ed-sel { position: absolute; left: 4.9%; top: 13.6%; width: 34.6%; height: 12.3%; border: 1.5px solid var(--blue); background: rgba(46,59,255,.06); pointer-events: none; animation: edPick 9s cubic-bezier(.65,0,.35,1) infinite; }
.ed-sel .hd { width: 7px; height: 7px; border-width: 1.5px; }
.ed-sel .hd.a { left: -4px; top: -4px; } .ed-sel .hd.b { right: -4px; top: -4px; } .ed-sel .hd.c { left: -4px; bottom: -4px; } .ed-sel .hd.d { right: -4px; bottom: -4px; }
.ed-sel .ed-cur { position: absolute; left: 100%; top: 100%; right: auto; bottom: auto; margin: -4px 0 0 -3px; animation: none; }
.ed-sel .ed-cur em { margin-top: 14px; font-size: 9.5px; padding: 2px 6px; }
.ed-sel .ed-cur svg { width: 16px; height: 16px; }
.ed-tag { position: absolute; left: -1.5px; top: -17px; height: 15px; padding: 0 5px; font-size: 9px; font-weight: 600; line-height: 15px; color: #fff; background: var(--blue); border-radius: 3px 3px 0 0; white-space: nowrap; }
.ed-tag::after { content: "Headline"; animation: edTag 9s steps(1) infinite; }
@keyframes edTag { 0% { content: "Headline"; } 33% { content: "Button"; } 66% { content: "Bild"; } }
@keyframes edPick {
  0%, 26%   { left: 4.9%;  top: 13.6%; width: 34.6%; height: 12.3%; }
  33%, 59%  { left: 5%;    top: 35.6%; width: 18.7%; height: 4.3%; }
  66%, 92%  { left: 52.7%; top: 7.1%;  width: 42.1%; height: 44.7%; }
  100%      { left: 4.9%;  top: 13.6%; width: 34.6%; height: 12.3%; }
}
.ed-layers span.grp { color: var(--ink); font-weight: 600; }
.ed-layers .l1 { animation: edL1 9s steps(1) infinite; }
.ed-layers .l2 { animation: edL2 9s steps(1) infinite; }
.ed-layers .l3 { animation: edL3 9s steps(1) infinite; }
@keyframes edL1 { 0% { background: var(--blue-l); color: var(--blue); font-weight: 600; } 33% { background: none; color: var(--text); font-weight: 400; } }
@keyframes edL2 { 0% { background: none; color: var(--text); font-weight: 400; } 33% { background: var(--blue-l); color: var(--blue); font-weight: 600; } 66% { background: none; color: var(--text); font-weight: 400; } }
@keyframes edL3 { 0% { background: none; color: var(--text); font-weight: 400; } 66% { background: var(--blue-l); color: var(--blue); font-weight: 600; } }

/* Hero-Kacheln etwas prominenter */
.hero > .tiles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect x='2.5' y='2.5' width='39' height='39' rx='9' fill='%23F2F4F9' stroke='%23E3E6EF'/%3E%3C/svg%3E"); }
.hero > .tiles .acc { background: #E3E7FF; border-color: #C9CFFF; }
.hero > .tiles .acc--strong { background: #CDD3FF; border-color: #AEB6FF; }
.hero > .tiles {
  -webkit-mask-image: radial-gradient(ellipse 48% 62% at 50% 34%, transparent 38%, #000 90%), linear-gradient(180deg, #000 0%, #000 48%, transparent 78%);
  mask-image: radial-gradient(ellipse 48% 62% at 50% 34%, transparent 38%, #000 90%), linear-gradient(180deg, #000 0%, #000 48%, transparent 78%);
}

/* Footer-Schriftzug: gefüllt statt Kontur */
.ftr-word { -webkit-text-stroke: 0; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); -webkit-background-clip: text; background-clip: text; font-weight: 800; letter-spacing: -.055em; }

/* Handy-Kachel: echte Mobilansicht, volle Breite, scrollt im Loop */
.phone { width: 168px; height: 250px; padding: 7px 7px 0; }
.phone-in { position: relative; }
.phone-in img, .bt-mobile:hover .phone-in img { width: 100%; max-width: 100%; height: auto; transform: none; animation: phScroll2 9s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes phScroll2 { 0%, 18% { transform: translateY(0); } 50%, 68% { transform: translateY(-38%); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .phone-in img { animation: none; } }

/* Projektplan: Kurztexte auf dem Handy */
.pbar .s { display: none; }
@media (max-width: 700px) {
  .pbar .l { display: none; }
  .pbar .s { display: inline; }
  .pbar { padding: 0 8px; font-size: 11px; }
}
/* CTA-Button auf dem Handy: umbrechen statt abschneiden */
@media (max-width: 700px) {
  .final .btn { white-space: normal; height: auto; min-height: 56px; padding: 8px 16px 8px 8px; text-align: left; line-height: 1.3; justify-content: flex-start; }
  .final .btn svg { margin-left: auto; flex: none; }
  .final { padding-left: 18px; padding-right: 18px; }
}

/* Hero-Text: auf dem Desktop genau zwei Zeilen */
.br-d { display: none; }
@media (min-width: 1000px) {
  .hero .lead { max-width: 860px; text-wrap: wrap; }
  .br-d { display: inline; }
}