/* Mosaik Energy – Gestaltungsebene (überschreibt die Basisstile im HTML) */
:root{--tile-a:#0F4C41;--tile-b:#A47B3C;--tile-c:#1E7A66;--ease:cubic-bezier(.2,.7,.1,1)}

/* Barrierefreiheit */
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:#F6F3EC;padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}
.dark :where(a,button,input,summary):focus-visible,footer :where(a,button):focus-visible{outline-color:#E3C58E}
::selection{background:#E3C58E;color:#15211E}

/* Lesefortschritt im Kopf (moderne Browser) */
@supports (animation-timeline:scroll()){
  header::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--tile-a),var(--tile-c),var(--tile-b));transform-origin:0 50%;transform:scaleX(0);animation:me-prog linear both;animation-timeline:scroll(root)}
  @keyframes me-prog{to{transform:scaleX(1)}}
}
nav.links a{position:relative}
nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
nav.links a:hover::after,nav.links a.act::after{transform:scaleX(1)}

/* Mosaik-Motiv: Eyebrow mit vier Kacheln statt Linie */
.eyebrow::before{width:14px!important;height:14px!important;background:
  linear-gradient(var(--tile-a),var(--tile-a)) 0 0/6px 6px no-repeat,
  linear-gradient(var(--tile-b),var(--tile-b)) 8px 0/6px 6px no-repeat,
  linear-gradient(var(--tile-c),var(--tile-c)) 0 8px/6px 6px no-repeat,
  linear-gradient(var(--tile-a),var(--tile-a)) 8px 8px/6px 6px no-repeat!important;border-radius:1px;opacity:.95}
.dark .eyebrow::before,.cta-band.dark .eyebrow::before{background:
  linear-gradient(#E3C58E,#E3C58E) 0 0/6px 6px no-repeat,linear-gradient(#F6F3EC,#F6F3EC) 8px 0/6px 6px no-repeat,
  linear-gradient(#6FB39F,#6FB39F) 0 8px/6px 6px no-repeat,linear-gradient(#E3C58E,#E3C58E) 8px 8px/6px 6px no-repeat!important}

/* Typografie: größer, enger, redaktioneller */
section .head h2{font-size:clamp(36px,4.8vw,72px)!important;line-height:1!important;letter-spacing:-.03em;text-wrap:balance}
h1{letter-spacing:-.035em;text-wrap:balance}
h3{text-wrap:balance}
.lead{text-wrap:pretty}
h1 em,h2 em{font-style:normal;background:linear-gradient(transparent 82%,color-mix(in srgb,var(--brass) 28%,transparent) 82%);padding:0 .04em}
.dark h2 em,.cta-band.dark h2 em{background:linear-gradient(transparent 82%,rgba(227,197,142,.25) 82%)}
section{padding:clamp(72px,9vw,136px) 0}

/* Flächen mit Kachelraster */
.alt{background:
  linear-gradient(color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,color-mix(in srgb,var(--line) 45%,transparent) 1px,transparent 1px) 0 0/56px 56px,
  var(--paper2)}
section.dark,.cta-band.dark{position:relative;overflow:hidden;isolation:isolate}
section.dark::before,.cta-band.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 80% at 100% 0%,rgba(164,123,60,.22),transparent 60%),
  radial-gradient(50% 70% at 0% 100%,rgba(30,122,102,.35),transparent 60%),
  linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px}

/* Karten */
.card{border-radius:20px;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.card:not(.dark):not(.vc)::after{content:"";position:absolute;right:18px;top:18px;width:10px;height:10px;border-radius:2px;background:var(--tile-b);opacity:0;transform:scale(.4) rotate(-20deg);transition:.45s var(--ease)}
.card:not(.dark):not(.vc):hover::after{opacity:1;transform:none}
.card:hover{transform:translateY(-6px)}

/* Versprechen unter dem Film: Kachelreihe */
.promise{gap:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--white);counter-reset:pr}
.promise div{border:0!important;border-radius:0!important;padding:26px 24px 24px!important;position:relative;counter-increment:pr;background:transparent!important}
.promise div+div{border-left:1px solid var(--line)!important}
.promise div::before{content:"0" counter(pr);display:block;font:500 12px var(--mono);letter-spacing:.14em;color:var(--brass);margin-bottom:14px}
.promise div::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--tile-a)}
.promise div:nth-child(2)::after{background:var(--tile-c)}.promise div:nth-child(3)::after{background:var(--tile-b)}.promise div:nth-child(4)::after{background:var(--ink)}
@media(max-width:900px){.promise div:nth-child(3){border-left:0!important}.promise div:nth-child(n+3){border-top:1px solid var(--line)!important}}
@media(max-width:520px){.promise div+div{border-left:0!important;border-top:1px solid var(--line)!important}}

/* Buttons */
.btn{transition:transform .35s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .35s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{box-shadow:0 14px 30px -18px rgba(15,76,65,.8)}
.btn .arr,.tlink span{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr,.tlink:hover span{transform:translateX(4px)}

/* Abschlussband */
.cta-band{border-radius:32px}
.cta-band h2{font-size:clamp(32px,4vw,60px)!important;letter-spacing:-.03em;line-height:1}

/* FAQ */
details{transition:background .3s}
details summary{cursor:pointer}
details[open]{background:linear-gradient(90deg,color-mix(in srgb,var(--brass) 8%,transparent),transparent 60%)}

/* Fußbereich mit großem Schriftzug */
footer{position:relative;overflow:hidden}
footer::after{content:"Mosaik Energy";display:block;font-family:var(--serif);font-weight:800;font-size:clamp(64px,13.5vw,220px);line-height:.8;letter-spacing:-.05em;color:rgba(246,243,236,.06);white-space:nowrap;text-align:center;margin:56px 0 -0.12em;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  header::after{display:none}
  .card:hover,.btn:hover{transform:none}
}

/* Hero intro: headline full width, lead + actions in a calm row below */
.cinehero .hero-top2{display:grid!important;grid-template-columns:1fr!important;gap:28px!important;align-items:start!important}
.cinehero .hero-top2 h1{max-width:23ch;font-size:clamp(38px,5vw,72px)!important;hyphens:manual;text-wrap:balance}
.cinehero .hero-top2 h1 em{white-space:nowrap}
.cinehero .hero-top2>div:last-child{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:20px 48px;align-items:end;border-left:0!important;padding-left:0!important;border-top:1px solid var(--line);padding-top:28px}
.cinehero .hero-top2>div:last-child .lead{margin:0;max-width:62ch}
.cinehero .hero-top2>div:last-child .cta{margin:0;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:flex-end}
@media (max-width:900px){.cinehero .hero-top2>div:last-child{grid-template-columns:1fr}.cinehero .hero-top2>div:last-child .cta{justify-content:flex-start}.cinehero .hero-top2 h1 em{white-space:normal}}
/* Hero: Subtext direkt unter Headline, volle Breite; Buttons darunter */
.cinehero .hero-top2{gap:22px!important}
.cinehero .hero-top2>div:last-child{grid-template-columns:1fr!important;gap:28px!important;align-items:start!important;border-top:0!important;padding-top:0!important}
.cinehero .hero-top2>div:last-child .lead{max-width:none!important;font-size:clamp(18px,1.6vw,22px);line-height:1.55}
.cinehero .hero-top2>div:last-child .cta{justify-content:flex-start!important}
/* Lesbarere Überschriften, Charakter bleibt (Bricolage) */
h1,h2,h3{font-weight:700!important;letter-spacing:-.02em!important;word-spacing:.02em}
h1{line-height:1.02!important}
section .head h2{letter-spacing:-.022em!important;line-height:1.04!important}
.cinehero .hero-top2 h1{font-size:clamp(36px,4.6vw,66px)!important}
#film .cine-orn h3,#film2 .cine-orn h3{font-family:var(--serif)!important;font-weight:700;letter-spacing:-.015em}
body{font-size:17px}.lead{color:color-mix(in srgb,var(--ink) 82%,transparent)}