@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/gf-4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
    @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/gf-3.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}
    :root{
      /* Aperitivo Look: Creme, Schwarz und das dunkle Blau vom Aperol Etikett */
      --ink:#192a53;        /* Etikett Blau, Schrift auf Creme */
      --accent:#819180;     /* TEST Colorplan Mid Green (Aperol Etikett Blau zum Vergleich: ?farbe=blau) */
      --dark:#0c0d10;       /* Schwarz für dunkle Flächen */
      --paper:#fffae6;      /* Creme */
      --ink-2:rgba(25,42,83,.7);
      --paper-2:rgba(255,250,230,.72);
      --line-ink:rgba(25,42,83,.16);
      --line-paper:rgba(255,250,230,.2);
      --h:'Afacad','Hanken Grotesk',system-ui,sans-serif;
      --f:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
      --pad:clamp(18px,3.2vw,48px);
      --ease:cubic-bezier(.2,.8,.2,1);
    }
    *,*::before,*::after{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
    img,video{display:block;max-width:100%}
    a{color:inherit}
    .wrap{padding-left:var(--pad);padding-right:var(--pad)}
    .label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
    .big{font-weight:800;letter-spacing:-.045em;line-height:.92;margin:0}
    .gruen{--accent:#8fd6b0}
    .blau{--accent:#192a53}
    .teal{--accent:#2f7377}
    .tl{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.22em;transition:color .25s}
    .tl:hover{color:var(--accent)}
    .claim a{color:inherit;text-decoration:none}.claim a:hover{text-decoration:underline;text-underline-offset:4px}
    .acc{color:var(--accent)}

    /* Wortmarke */
    .mark{display:inline-flex;align-items:baseline;gap:.5em;text-decoration:none;font-weight:800;letter-spacing:-.04em;font-size:22px;line-height:1;white-space:nowrap}
    .mark small{font-size:11px;font-weight:600;letter-spacing:.16em;opacity:.75}

    /* Kopfzeile wie bei Odyssée: eine dünne Linie mit Marke, Claim, Anfrage, Menü */
    .top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;padding:18px var(--pad);color:var(--paper);transition:background .35s ease,padding .35s ease}
    .top.solid{background:rgba(10,11,14,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:12px;padding-bottom:12px}
    .top nav a.cta{background:var(--accent);color:var(--paper);padding:9px 16px;border-radius:999px;border:1px solid rgba(255,250,230,.28)}
    .top nav a.cta:hover{text-decoration:none;background:var(--paper);color:var(--accent)}
    .top .claim{font-size:14px;opacity:.85}
    .top nav{margin-left:auto;display:flex;gap:28px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
    .top nav a{text-decoration:none}
    .top nav a:hover{text-decoration:underline;text-underline-offset:5px}
    @media (max-width:1100px){.top .claim{display:none}}
    @media (max-width:760px){.top nav .hide-m{display:none}}

    /* 1 Hero */
    .hero{position:relative;height:100svh;min-height:560px;background:var(--dark);color:var(--paper);overflow:hidden}
    .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78}
    .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,.35) 0%,rgba(10,11,14,0) 35%,rgba(10,11,14,.75) 100%)}
    .hero-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(24px,4vw,48px)}
    .hero h1{font-size:clamp(46px,9.4vw,168px);max-width:13ch}
    .hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-top:clamp(20px,3vw,36px);padding-top:18px;border-top:1px solid var(--line-paper)}
    .hero-row p{margin:0;max-width:46ch;color:var(--paper-2);font-size:16px}
    .btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:transform .3s var(--ease),background .3s}
    .btn-paper{background:var(--paper);color:var(--ink)}
    .btn-acc{background:var(--accent);color:var(--paper);border:1px solid rgba(255,250,230,.3)}
    .btn-acc:hover{background:var(--paper);color:var(--accent)}
    .hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .hero-links a{padding:10px 18px;border:1px solid var(--line-paper);border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;background:rgba(10,11,14,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .3s,color .3s,border-color .3s}
    .hero-links a:hover{background:var(--accent);border-color:rgba(255,250,230,.45);color:var(--paper)}
    .hero-row p strong{color:var(--paper)}
    .btn-ink{background:var(--ink);color:var(--paper)}
    .btn:hover{transform:translateY(-2px)}
    .btn i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
    .btn:hover i{transform:translateX(4px)}
    /* Headline Aufdecken: ganzer Block, damit sich der Zeilenumbruch nie ändert */
    /* Headline: jedes Wort knallt aus der Tiefe rein (erst nach geladener Schrift, kein Zeilensprung) */
    .hero h1 .w{display:inline-block;transform-origin:50% 80%}
    .js .hero h1{visibility:hidden}
    .js .hero.go h1{visibility:visible}
    .js .hero.go h1 .w{animation:fly 1.05s cubic-bezier(.16,1.25,.3,1) both;animation-delay:calc(var(--i) * 95ms)}
    .js .hero.go h1 .acc{animation:fly 1.05s cubic-bezier(.16,1.25,.3,1) both,punch .6s ease-out both;animation-delay:calc(var(--i) * 95ms),1.35s}
    @keyframes fly{0%{opacity:0;transform:translate3d(0,.45em,0) scale(2.4) rotate(-6deg);filter:blur(18px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
    @keyframes punch{0%{transform:none}35%{transform:scale(1.08)}100%{transform:none}}
    .js .hero .hero-row,.js .hero .hero-links{opacity:0;transform:translateY(16px)}
    .js .hero.go .hero-links{opacity:1;transform:none;transition:opacity .8s ease 1.1s,transform .8s var(--ease) 1.1s}
    .js .hero.go .hero-row{opacity:1;transform:none;transition:opacity .9s ease 1.3s,transform .9s var(--ease) 1.3s}
    .js .hero .acc{color:var(--paper);transition:color .5s ease 1.2s}
    .js .hero.go .acc{color:var(--paper)}
    .js .hero video{transform:scale(1.1)}
    .js .hero.go video{transform:scale(1);transition:transform 3s var(--ease)}

    /* 2 Statement mit Scroll Einfärben */
    .statement{padding-top:clamp(90px,14vw,200px);padding-bottom:clamp(90px,14vw,200px);display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:clamp(24px,5vw,80px);align-items:start}
    .statement img{width:100%;aspect-ratio:3/4;object-fit:cover}
    .statement p{margin:0;font-size:clamp(28px,4.4vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
    .statement p span{color:rgba(25,42,83,.28);transition:color .25s linear}
    .statement p span.on{color:var(--ink)}
    .statement .label{display:block;margin-bottom:22px;color:var(--ink-2)}
    @media (max-width:700px){.statement{grid-template-columns:1fr}.statement img{width:46%}}

    /* 3 Gestapelte Vollbild Fotos */
    .stack-item{position:sticky;top:0;height:100svh;margin:0;overflow:hidden;background:var(--dark)}
    .stack-item img{width:100%;height:100%;object-fit:cover}
    .stack-item figcaption{position:absolute;inset:0;padding:0 var(--pad);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
    .stack-item figcaption .label{order:-1}
    .stack-item figcaption strong{font-size:clamp(34px,6vw,96px);font-weight:800;letter-spacing:-.04em;line-height:.95;max-width:13ch}
    .stack-item img,.stack-item video{width:100%;height:100%;object-fit:cover}
    .stack-item::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(10,11,14,.6) 0%,rgba(10,11,14,.3) 70%,rgba(10,11,14,.2) 100%);pointer-events:none}
    .stack-item figcaption strong{text-shadow:0 2px 24px rgba(0,0,0,.45)}
    .stack-item .label{color:var(--accent)}
    .stack-item figcaption{z-index:2}

    /* 4 Drei Wege als große Zeilen */
    .paths{background:var(--dark);color:var(--paper);padding:clamp(80px,10vw,150px) 0}
    .sec-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:16px;border-bottom:1px solid currentColor;margin-bottom:8px}
    .sec-head .bar{flex:1;height:1px;background:currentColor;opacity:.35;margin:0 18px;position:relative;overflow:hidden}
    .path{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:20px;padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line-paper);text-decoration:none;position:relative}
    .path .num{font-size:13px;font-weight:600;color:var(--accent)}
    .path .t{font-size:clamp(34px,6.6vw,110px);font-weight:800;letter-spacing:-.045em;line-height:.95;transition:transform .5s var(--ease),color .3s}
    .path .d{font-size:15px;color:var(--paper-2);max-width:26ch;text-align:right}
    .path .peek{position:absolute;right:28%;top:50%;width:clamp(160px,18vw,280px);aspect-ratio:4/5;object-fit:cover;transform:translateY(-50%) scale(.85) rotate(-3deg);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .5s var(--ease);z-index:3}
    @media (hover:hover){.path:hover .t{transform:translateX(18px);color:var(--accent)}.path:hover .peek{opacity:1;transform:translateY(-50%) scale(1) rotate(-3deg)}}
    @media (max-width:760px){.path{grid-template-columns:40px 1fr}.path .d{grid-column:2;text-align:left}.path .peek{display:none}}

    /* 5 Stimmen */
    .voices{padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(90px,12vw,170px)}
    .quote{font-size:clamp(30px,4.6vw,70px);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin:34px 0 26px;max-width:22ch}
    .voices-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:clamp(50px,7vw,90px);padding-top:28px;border-top:1px solid var(--line-ink)}
    .voices-list p{margin:0 0 10px;font-size:17px}
    .voices-list span,.who{font-size:13px;color:var(--ink-2)}

    /* 6 Firmen */
    .corp{background:var(--dark);color:var(--paper);padding:clamp(90px,12vw,170px) 0 0}
    .corp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
    .corp img{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:760px}
    .corp h2{font-size:clamp(40px,6vw,96px)}
    .corp p{color:var(--paper-2)}
    .corp ul{list-style:none;padding:0;margin:28px 0 34px;border-top:1px solid var(--line-paper)}
    .corp li{padding:14px 0;border-bottom:1px solid var(--line-paper);font-size:16px}
    .corp .label,.end .label,.paths .sec-head{color:var(--accent)}
    @media (max-width:860px){.corp-grid{grid-template-columns:1fr}}
    .logos{overflow:hidden;margin-top:clamp(70px,9vw,120px);padding:clamp(40px,5vw,64px) 0;border-top:1px solid var(--line-paper);background:#16171b}
    .logos-track{display:flex;align-items:center;gap:clamp(56px,7vw,100px);width:max-content;animation:marquee 55s linear infinite}
    .logos:hover .logos-track{animation-play-state:paused}
    .corp .logos img,.logos img{flex:none;height:clamp(40px,4.4vw,60px);width:auto;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
    .logos b{font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,30px);white-space:nowrap}
    @keyframes marquee{to{transform:translateX(-50%)}}

    /* 7 Preis */
    .price{padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(90px,12vw,170px)}
    .price-num{font-size:clamp(84px,17vw,280px);margin:22px 0 10px}
    .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:40px;padding-top:28px;border-top:1px solid var(--line-ink)}
    .price-grid ul{list-style:none;padding:0;margin:0}
    .price-grid li{padding:12px 0;border-bottom:1px solid var(--line-ink)}
    .price-grid p{margin:0 0 26px;font-size:20px;line-height:1.45}
    @media (max-width:760px){.price-grid{grid-template-columns:1fr}}

    /* 8 FAQ */
    .faq{padding-bottom:clamp(90px,12vw,170px)}
    /* So läuft's: vier Schritte */
    .steps{padding-top:clamp(90px,12vw,170px)}
    .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(30px,4vw,56px)}
    .step{border-top:2px solid var(--ink);padding-top:22px}
    .step .n{display:block;font-size:clamp(44px,5vw,80px);font-weight:800;letter-spacing:-.05em;line-height:1}
    .step h3{margin:18px 0 10px;font-size:20px;font-weight:800;letter-spacing:-.02em}
    .step p{margin:0;color:var(--ink-2);font-size:16px}
    @media (max-width:900px){.steps-grid{grid-template-columns:1fr 1fr}}
    @media (max-width:520px){.steps-grid{grid-template-columns:1fr}}
    .faq details{border-bottom:1px solid var(--line-ink)}
    .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary::after{content:"+";font-weight:400;transition:transform .3s}
    .faq details[open] summary::after{transform:rotate(45deg)}
    .faq details p{margin:0 0 24px;max-width:62ch;color:var(--ink-2)}

    /* 9 Abschluss */
    .end{background:var(--dark);color:var(--paper);padding-top:clamp(90px,12vw,170px);padding-bottom:40px}
    .end h2{font-size:clamp(56px,12vw,200px)}
    .end-row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;margin-top:40px}
    .end-row a.plain{text-decoration:underline;text-underline-offset:5px;color:var(--paper-2)}
    .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;margin-top:clamp(90px,12vw,160px);padding-top:22px;border-top:1px solid var(--line-paper);font-size:13px;color:var(--paper-2)}
    .foot a{text-decoration:none}
    .foot a:hover{text-decoration:underline}
    .foot div{display:flex;flex-wrap:wrap;gap:8px 22px}

    @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.statement p span{color:var(--ink)}}
    /* Überschriften in Afacad: fett, ohne Schnörkel, Großbuchstaben wie auf der Flasche */
    .big,.mark,.stack-item figcaption strong,.path .t,.quote,.statement p,.step .n,.step h3,.faq summary,.logos b,.voices-list p{font-family:var(--h)}
    .big,.stack-item figcaption strong,.path .t,.mark{text-transform:uppercase;font-weight:700;letter-spacing:-.005em}
    .big{line-height:.88}
    .hero h1{font-size:clamp(50px,9.6vw,176px);max-width:12ch}
    .stack-item figcaption strong{line-height:.9}
    .path .t{letter-spacing:0}
    .statement p,.quote{font-weight:600;letter-spacing:-.015em}
    .step .n{font-weight:700;letter-spacing:0;color:var(--accent)}
    .faq summary{font-weight:600;letter-spacing:0}
    /* Akzentwörter in Etikett Blau, als Fläche nur bei Buttons und Hover */
    .hero .acc,.end .acc,.js .hero.go .acc{color:var(--accent)}
    .stack-item .label,.corp .label,.end .label,.paths .sec-head,.path .num,.logos .label{color:var(--paper-2)!important}
    .path{transition:background .35s ease;padding-left:14px;padding-right:14px}
    @media (hover:hover){.path:hover .t{color:var(--accent)}}
    .hero .tl,.corp .tl,.paths .tl,.end .tl{text-decoration-color:rgba(255,250,230,.5)}
    .corp h2 .tl{text-decoration:none}
    .hero .tl:hover,.corp .tl:hover{color:var(--paper);text-decoration-color:var(--paper)}
    /* Unterseiten */
    .hero .kicker{display:block;margin-bottom:18px;color:var(--paper-2)}
    .hero-bul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;font-size:15px;color:var(--paper-2)}
    .hero-bul li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}
    .sub .hero h1{font-size:clamp(44px,8.2vw,150px);max-width:14ch}
    .stack-item figcaption p{margin:0;max-width:46ch;font-size:clamp(16px,1.4vw,19px);color:var(--paper-2);text-shadow:0 1px 14px rgba(0,0,0,.5)}
    .marq{overflow:hidden;background:var(--paper);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink);padding:clamp(18px,2.4vw,30px) 0}
    .marq-track{display:flex;gap:clamp(30px,4vw,60px);width:max-content;animation:marquee 45s linear infinite;font-family:var(--h);font-weight:700;text-transform:uppercase;font-size:clamp(28px,4vw,56px);line-height:1;color:var(--ink)}
    .marq-track span::after{content:"\00B7";margin-left:clamp(30px,4vw,60px);color:var(--accent)}
    .steps3 .steps-grid{grid-template-columns:repeat(3,1fr)}
    .steps-grid .step h3{text-transform:none}
    @media (max-width:900px){.steps3 .steps-grid{grid-template-columns:1fr}}
    .music{background:var(--dark);color:var(--paper);padding:clamp(90px,12vw,170px) 0}
    .music .label{color:var(--paper-2)}
    .pills{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
    .pills span{padding:10px 18px;border:1px solid var(--line-paper);border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
    .music p.lead{max-width:56ch;color:var(--paper-2);margin:26px 0 0;font-size:18px}
    .mixes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(40px,5vw,70px)}
    .mixes a{display:block;padding:26px;border:1px solid var(--line-paper);text-decoration:none;transition:border-color .3s,color .3s}
    .mixes a:hover{border-color:var(--accent);color:var(--accent)}
    .mixes b{display:block;font-family:var(--h);font-size:clamp(26px,2.6vw,36px);text-transform:uppercase;line-height:1}
    .mixes span{display:block;margin-top:12px;font-size:15px;color:var(--paper-2)}
    @media (max-width:800px){.mixes{grid-template-columns:1fr}}
    .about{padding-top:clamp(90px,12vw,170px);padding-bottom:clamp(90px,12vw,170px);display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:clamp(30px,6vw,100px);align-items:start}
    .about img{width:100%;aspect-ratio:4/5;object-fit:cover}
    .about p{max-width:60ch;font-size:18px;color:var(--ink-2)}
    .about p.sign{font-family:var(--h);font-weight:700;font-size:clamp(24px,2.4vw,32px);color:var(--ink);text-transform:uppercase;line-height:1.05}
    @media (max-width:800px){.about{grid-template-columns:1fr}}
    .tiles{background:var(--dark);color:var(--paper);padding:clamp(90px,12vw,170px) 0}
    .tiles .label{color:var(--paper-2)}
    .tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(36px,5vw,60px)}
    .tile-grid li{list-style:none;padding:22px;border:1px solid var(--line-paper);font-family:var(--h);font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.6vw,22px);line-height:1.1}
    .tile-grid{padding:0}
    @media (max-width:900px){.tile-grid{grid-template-columns:1fr 1fr}}
    .reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,60px)}
    .reasons div{border-top:2px solid var(--ink);padding-top:20px}
    .reasons b{display:block;font-family:var(--h);font-size:22px;text-transform:uppercase;margin:12px 0 8px}
    .reasons .n{font-family:var(--h);font-weight:700;color:var(--accent);font-size:34px;line-height:1}
    .reasons p{margin:0;color:var(--ink-2)}
    @media (max-width:900px){.reasons{grid-template-columns:1fr}}
    .countries{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(36px,5vw,60px)}
    .country{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;text-decoration:none;color:var(--paper);background:var(--dark)}
    .country img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
    .country:hover img{transform:scale(1.05)}
    .country::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,0) 35%,rgba(10,11,14,.8) 100%)}
    .country div{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
    .country h3{margin:0;font-family:var(--h);font-size:clamp(34px,4vw,60px);text-transform:uppercase;line-height:.9}
    .country small{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2)}
    .country p{margin:10px 0 0;font-size:15px;color:var(--paper-2);max-width:40ch}
    .country em{font-style:normal;display:inline-block;margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
    @media (max-width:760px){.countries{grid-template-columns:1fr}}
    .world{margin-top:30px;color:var(--ink-2);font-size:18px}
    .end p.lead{max-width:52ch;color:var(--paper-2);font-size:18px;margin:26px 0 0}
    .sub .music .big,.sub .tiles .big,.sub .about .big,.sub section.wrap:not(.end) > h2.big{font-size:clamp(38px,6vw,96px)}
    .isnot{padding-top:clamp(90px,12vw,170px)}
    .isnot-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);margin-top:clamp(36px,5vw,60px)}
    .isnot-grid ul{margin:0;padding:0;list-style:none}
    .isnot-grid h3{margin:0 0 10px;font-family:var(--h);font-size:clamp(26px,2.6vw,36px);text-transform:uppercase}
    .isnot-grid li{padding:14px 0 14px 34px;border-bottom:1px solid var(--line-ink);position:relative;font-size:17px}
    .isnot-grid li::before{position:absolute;left:0;top:13px;font-weight:700;font-family:var(--h);font-size:20px}
    .isnot-grid .yes li::before{content:"✓";color:var(--accent)}
    .isnot-grid .no li{color:var(--ink-2)}
    .isnot-grid .no li::before{content:"✕";color:var(--ink-2)}
    @media (max-width:760px){.isnot-grid{grid-template-columns:1fr}}
    .catnav{position:sticky;top:58px;z-index:20;background:rgba(255,250,230,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-ink)}
    .catnav-in{display:flex;gap:8px;overflow-x:auto;padding:12px var(--pad);scrollbar-width:none}
    .catnav-in::-webkit-scrollbar{display:none}
    .catnav a{flex:none;padding:8px 14px;border:1px solid var(--line-ink);border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color .25s,border-color .25s}
    .catnav a:hover{color:var(--accent);border-color:var(--accent)}
    .rec{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(20px,3vw,40px);scroll-margin-top:110px}
    .rec.dk{background:var(--dark);color:var(--paper);padding-bottom:clamp(80px,10vw,140px);margin-top:clamp(60px,8vw,100px)}
    .rec.dk + .rec{padding-top:clamp(60px,8vw,100px)}
    .rec .lead{max-width:62ch;margin:24px 0 0;font-size:18px;color:var(--ink-2)}
    .rec.dk .lead,.rec.dk .card p{color:var(--paper-2)}
    .rec.dk .sec-head{color:var(--paper-2)}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(36px,5vw,56px)}
    .card{display:flex;flex-direction:column;padding:26px 24px 22px;border:1px solid var(--line-ink);text-decoration:none;transition:border-color .3s,transform .4s var(--ease)}
    .rec.dk .card{border-color:var(--line-paper)}
    .card:hover{border-color:var(--accent);transform:translateY(-3px)}
    .card .top-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
    .rec.dk .card .top-row{color:var(--paper-2)}
    .card .top-row b{color:var(--accent);font-weight:700}
    .card h3{margin:22px 0 10px;font-family:var(--h);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:.95;text-transform:uppercase}
    .card p{margin:0 0 22px;font-size:16px;color:var(--ink-2);flex:1}
    .card em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:color .25s}
    .card:hover em,.card:hover h3{color:var(--accent)}
    .cards.solo{grid-template-columns:1fr}
    .cards.solo .card{padding:clamp(28px,4vw,48px)}
    .cards.solo .card h3{font-size:clamp(40px,6vw,88px)}
    .cards.solo .card p{font-size:clamp(18px,1.6vw,21px);max-width:60ch}
    @media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
    @media (max-width:640px){.cards{grid-template-columns:1fr}}
    /* Anlässe als Liste zum Aufklappen */
    .occ{margin-top:clamp(36px,5vw,60px);border-top:1px solid var(--line-paper)}
    .occ details{border-bottom:1px solid var(--line-paper)}
    .occ summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:22px;padding:clamp(18px,2.2vw,26px) 0;font-family:var(--h);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);line-height:1.05;transition:color .25s}
    .occ summary::-webkit-details-marker{display:none}
    .occ summary span{font-size:13px;letter-spacing:.14em;color:var(--paper-2);min-width:28px}
    .occ summary::after{content:"+";margin-left:auto;font-weight:400;transition:transform .3s}
    .occ details[open] summary::after{transform:rotate(45deg)}
    .occ summary:hover{color:var(--accent)}
    .occ p{margin:0 0 26px 50px;max-width:60ch;color:var(--paper-2);font-size:17px}
    @media (max-width:600px){.occ p{margin-left:0}}
    /* Top Songs */
    .top10{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px);counter-reset:t;border-top:1px solid var(--line-paper)}
    .top10 li{counter-increment:t;display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-paper)}
    .top10 li::before{content:counter(t,decimal-leading-zero);font-family:var(--h);font-weight:700;font-size:clamp(22px,2vw,30px);color:var(--accent);min-width:42px}
    .top10 b{font-family:var(--h);font-weight:700;text-transform:uppercase;font-size:clamp(19px,1.9vw,26px);line-height:1.05}
    .top10 span{margin-left:auto;text-align:right;font-size:14px;color:var(--paper-2)}
    @media (max-width:800px){.top10{grid-template-columns:1fr}}
    @media (min-width:801px){.top10{grid-auto-flow:column;grid-template-rows:repeat(6,auto)}}
    /* Musik: Genres zum Aufklappen, Mixe mit Hörprobe */
    .occ.gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:clamp(30px,5vw,80px);border-top:0}
    .occ.gen>div{min-width:0;border-top:1px solid var(--line-paper)}
    .occ.gen summary{font-size:clamp(19px,1.9vw,26px)}
    .occ.gen p{margin:0 0 22px;font-size:16px}
    @media (max-width:800px){.occ.gen{grid-template-columns:minmax(0,1fr)}.occ.gen>div+div{border-top:0}}
    .mixes-h{margin-top:clamp(50px,6vw,80px);color:var(--paper-2)}
    .mixes{display:block;margin-top:14px;border-top:1px solid var(--line-paper)}
    .mix{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px;padding:20px 0;border-bottom:1px solid var(--line-paper);cursor:pointer}
    .mix-play{flex:none;width:58px;height:58px;border-radius:50%;border:0;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .25s}
    .mix-play i{width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
    .mix.on .mix-play i{border:0;width:16px;height:18px;margin:0;border-left:5px solid #fff;border-right:5px solid #fff}
    .mix:hover .mix-play{transform:scale(1.08)}
    .mix-txt{flex:1;min-width:200px}
    .mix-txt b{display:block;font-family:var(--h);font-size:clamp(24px,2.4vw,34px);text-transform:uppercase;line-height:1;transition:color .25s}
    .mix-txt span{display:block;margin-top:8px;font-size:15px;color:var(--paper-2)}
    .mix:hover .mix-txt b{color:var(--accent)}
    .mix-go{border:0;background:none;color:inherit;font:600 13px/1 var(--b,inherit);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:8px 0}
    .mix-go::after{content:" ▶";color:var(--accent)}
    .mix.on .mix-go::after{content:" ✕"}
    .mix-frame{flex-basis:100%;height:0;overflow:hidden;transition:height .4s ease}
    .mix.on .mix-frame{height:120px}
    .mix-frame iframe{display:block;width:100%;height:120px;border:0}
    .mix-all{display:inline-block;margin-top:26px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-2)}
    .mix-all:hover{color:var(--accent)}
    @media (max-width:600px){.mix-go{display:none}.mix-play{width:48px;height:48px}}