/* Unterseiten v13: weicher Farbraum (wie die unscharfen Blüten-Verläufe), nimmt die Farbe des Projekts in der Mitte an */
.sub13{--serif2:'Italiana','Instrument Serif',Georgia,serif;--serif3:'Cormorant Garamond','Instrument Serif',Georgia,serif}
.sub13 #world,.sub13 .nav .theme{display:none!important}
.sub13 h2,.sub13 .cfinfo h2{font-family:var(--serif2);font-weight:400;letter-spacing:-.01em}
.sub13 h2 em,.sub13 .pcard em,.sub13 .cfinfo h2 em{font-family:var(--serif3);font-style:italic}
html:has(.sub13),.sub13{background:#0A1430}
.subbg{position:fixed;inset:0;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;background:#0A1430;--cfc:#8a6a4c}
.subbg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9}
.subbg .a{width:70vmax;height:70vmax;left:-22vmax;top:-30vmax;background:radial-gradient(circle,#2F5FD0,rgba(47,95,208,0) 68%)}
.subbg .b{width:60vmax;height:60vmax;right:-20vmax;bottom:-28vmax;background:radial-gradient(circle,#FF8A3D,rgba(255,138,61,0) 66%);opacity:.75}
.subbg .c{width:46vmax;height:46vmax;right:8vw;top:-12vmax;background:radial-gradient(circle,#8FB4DA,rgba(143,180,218,0) 66%);opacity:.5}
.subbg .d{width:64vmax;height:40vmax;left:50%;top:46%;translate:-50% -50%;background-color:var(--cfc);-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);border-radius:0;filter:blur(40px);opacity:.75;transition:background-color 1.2s var(--ease)}
.subbg::after{content:"";position:absolute;inset:0;background:var(--grain);background-size:220px;opacity:.4;mix-blend-mode:overlay}
.subbg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,11,20,.3),transparent 26%,transparent 72%,rgba(7,11,20,.45))}
.sub13 .nav{background:rgba(10,16,30,.24)!important;border-color:rgba(255,255,255,.16)!important;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}

/* Kopf: „So könnte deine Café-Website aussehen.“ – das Wort wechselt mit dem Projekt in der Mitte */
.cfhero{padding:118px 0 4px;position:relative}
.cfh{font-family:var(--serif2);font-weight:400;font-size:clamp(40px,5.6vw,92px);line-height:1;letter-spacing:-.02em;margin-top:22px;color:#F2F5F9;text-shadow:0 2px 30px rgba(7,11,20,.35)}
.cfh .l2{white-space:nowrap}
.cfh em{display:inline-block;font-family:var(--serif3,var(--serif));font-style:italic;color:#FFC56B;text-shadow:0 0 30px rgba(255,197,107,.45)}
.cfh em.swap{animation:cfWord .7s var(--ease) both}
@keyframes cfWord{0%{opacity:0;filter:blur(10px);transform:translate3d(0,.25em,0)}100%{opacity:1;filter:none;transform:none}}
.cfhero .lead{margin-top:16px;max-width:620px;color:#D5DCE6;min-height:3em}
.cfchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.cfchips button{padding:10px 16px;border-radius:99px;font:400 14px var(--sans);color:#E6ECF3;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease)}
.cfchips button:hover{transform:translateY(-2px)}
.cfchips button.on{background:#F2F5F9;color:#0B1220;border-color:#F2F5F9}

/* Karussell: Mitte groß und scharf, Nachbarn schräg dahinter */
.cfsec{padding:0 0 40px;position:relative}
.cf{position:relative;height:min(40vw,520px);perspective:1400px;perspective-origin:50% 45%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;margin-top:8px}
.cf:active{cursor:grabbing}
.cf__track{position:absolute;inset:0;transform-style:preserve-3d}
.cfc{position:absolute;left:50%;top:50%;width:min(52vw,780px);aspect-ratio:16/10;margin:0;translate:-50% -50%;border-radius:24px;overflow:hidden;display:block;text-decoration:none;color:#fff;background:#111a2e;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.14);will-change:transform,opacity;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}
.cfc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cfc .sh{position:absolute;inset:0;background:#070B14;opacity:var(--sh,0);pointer-events:none}
.cfc .bar{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;background:linear-gradient(180deg,rgba(7,11,20,.55),transparent)}
.cfc .bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.cfc .tg{position:absolute;left:14px;bottom:14px}
.cfc.c{box-shadow:0 50px 110px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,226,170,.45),0 0 80px -20px rgba(255,197,107,.35)}
.cf__nav{position:absolute;top:50%;translate:0 -50%;z-index:200;width:52px;height:52px;border-radius:50%;font:300 20px var(--sans);color:#fff;background:rgba(10,16,30,.4);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.cf__nav:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}
.cf__nav.prev{left:max(16px,4vw)}.cf__nav.next{right:max(16px,4vw)}
.cfinfo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:18px}
.cfinfo h2{font-size:clamp(28px,3vw,44px);margin-top:6px;color:#F2F5F9}
.cfinfo h2 em{color:#FFC56B}
.cfinfo p{color:#C5CDD8;margin-top:6px;max-width:520px}
.cfinfo .label{color:#C5CDD8}
.cfacts{display:flex;gap:10px;flex-wrap:wrap}
.cfsec .note{margin-top:22px;font-size:12.5px;color:#9aa6b6}
@media (max-width:700px){
  .subbg i{filter:blur(60px)}
  .cfhero{padding:104px 0 0}
  /* immer drei Zeilen: das wechselnde Wort steht allein in Zeile 2, nichts bricht um */
  .cfh{font-size:clamp(30px,8.8vw,44px);line-height:1.08}
  .cfh>span{display:block;white-space:nowrap}
  .cfchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:16px -16px 0;padding:2px 16px}
  .cfchips::-webkit-scrollbar{display:none}
  .cfchips button{flex:none}
  .cf{height:min(72vw,340px)}
  .cfc{width:80vw;aspect-ratio:16/11;border-radius:20px}
  .cf--v{height:min(118vw,520px)}
  .cf--v .cfc{width:58vw;aspect-ratio:9/16}
  .cfchips button{padding:9px 14px;font-size:13.5px}
  .cfinfo h2{font-size:28px}
  .cf__nav{display:none}
  .cfinfo{margin-top:8px}
  .cfacts .btn{flex:1 1 auto;justify-content:center}
}

/* Content-Seite: dasselbe Karussell im Hochformat */
.cf--v{height:min(40vw,560px)}
.cf--v .cfc{width:min(20vw,280px);aspect-ratio:9/16}
.cfc .play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(10,16,30,.35);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .4s}
.cfc .play::after{content:"";position:absolute;left:21px;top:17px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.cfc.c .play{opacity:1}
/* (alt) Content-Raster ohne einzelne Lücke */
.sub13 .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub13 .pcard.wide{grid-column:span 2}
.sub13 .pcard.wide .tile{aspect-ratio:21/9}
.sub13 .pgrid.v{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:800px){.sub13 .pgrid{grid-template-columns:1fr}.sub13 .pcard.wide{grid-column:auto}.sub13 .pcard.wide .tile{aspect-ratio:16/10}.sub13 .pgrid.v{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.cf--v{height:min(112vw,500px)}.cf--v .cfc{width:56vw}}

/* Runde 3: Überschrift + Karussell passen zusammen auf einen Bildschirm; die Überschrift bleibt am Desktop eine Zeile (springt nicht um) */
.cfinfo .cfyou{color:#C5CDD8;margin-top:6px;max-width:520px}
.btn.sm{font-size:14px;padding:11px 16px}
@media (min-width:701px){
  .cfhero{padding:96px 0 0}
  .cfh{font-size:min(3.9vw,60px);margin-top:16px;white-space:nowrap}
  .cfh>span{display:inline}
  .cfhero .lead{margin-top:10px;min-height:0}
  .cfchips{margin-top:14px}
  .cf{height:min(34vw,440px);margin-top:4px}
  .cfc{width:min(42vw,620px)}
  .cf--v{height:min(36vw,470px)}
  .cf--v .cfc{width:min(16vw,250px)}
  .cfinfo{margin-top:12px}
  .cfinfo h2{font-size:clamp(24px,2.4vw,36px)}
}

/* Runde 7: Mini-Browser auf der vorderen Karte (Drüberfahren = die Seite scrollt durch, kein Zoom) */
.cfc .strip{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .4s;pointer-events:none}
.cfc .strip img{position:absolute;left:0;top:0;width:100%;height:auto;object-fit:initial;inset:auto;translate:0 0;transition:translate .9s cubic-bezier(.22,1,.36,1)}
.cfc.ld .strip{opacity:1}
.cfc.go .strip img{translate:0 calc(-100% * (var(--n,6) - 1) / var(--n,6));transition:translate calc(var(--n,6) * 1.7s) cubic-bezier(.42,0,.4,1)}
.cfc .tg{z-index:2}
@media (max-width:700px){.cfc{aspect-ratio:16/10}.cfc .strip{display:none}}
.cfc .bar{z-index:2}

/* Runde 8: Scroll-Aufnahme statt Bildstreifen */
.cfc video.rec{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s;pointer-events:none}
.cfc.ld video.rec{opacity:1}
@media (max-width:700px){.cfc video.rec{display:none}}

/* Runde 9: Unterseiten-Hintergrund näher am Branding – ruhiger Verlauf Nachtblau → Kobalt mit warmem Licht unten rechts, feine Linien, dezentes Raster */
.subbg{background:radial-gradient(120% 90% at 0% 0%,#1E3F9E 0%,#122867 38%,#0A1430 72%),#0A1430}
.subbg .a{opacity:.55}
.subbg .b{opacity:.5}
.subbg .c{opacity:.22}
.subbg .d{opacity:.35}
.subbg__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;-webkit-mask:radial-gradient(70% 60% at 50% 38%,#000,transparent 78%);mask:radial-gradient(70% 60% at 50% 38%,#000,transparent 78%)}
.subbg__l{position:absolute;left:0;top:0;width:100%;height:115%;z-index:0;fill:none;stroke:url(#sbl);stroke-width:1.2;opacity:.5;will-change:translate}
.subbg__l .t{opacity:.55}.subbg__l .t2{opacity:.35;stroke-width:1}
@media (max-width:700px){.subbg__grid{background-size:48px 48px;opacity:.7}.subbg__l{opacity:.38}}