@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../fonts/outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

  body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; background: #ffffff; color: #000000; }
  a { color: #e18409; text-decoration: none; }
  a:hover { color: #a86206; }
  .btn-primary { background: #e18409; color: #000000; border: none; }
  .btn-primary:hover { background: #ffffff; color: #000000; }
  .btn-outline-white { background: rgba(0,0,0,0.25); color: #ffffff; border: 1.5px solid #ffffff; }
  .btn-outline-white:hover { background: #ffffff; color: #000000; }
  .rail-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 40px; color: #ffffff; }
  .rail-icon:hover { color: #e18409; }
  .rail-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; padding: 0; }
  .bar { display: block; width: 30px; height: 3px; background: #ffffff; }
  .rail-btn:hover .bar { background: #e18409; }
  .hero-link { color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 2px solid rgba(255,255,255,0.3); }
  .hero-link:hover { color: #ffffff; border-bottom-color: #e18409; }
  .nav-item { background: transparent; border: none; cursor: pointer; padding: 0; text-align: left; display: flex; align-items: baseline; }
  .nav-label { font-size: 34px; font-weight: 400; letter-spacing: 1.5px; color: #ffffff; text-transform: uppercase; }
  .nav-item:hover .nav-label { color: #e18409; }
  .sub-link { display: inline-block; font-size: 19px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #c6c6c6; }
  .sub-link:hover { color: #e18409; }
  .footer-link { color: #ffffff; font-size: 15px; }
  .footer-link:hover { color: #e18409; }

  /* ===== Hero: Laptop-Foto mit lebendigem Sternschnuppen-Bildschirm ===== */
  .hero-cam { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .stage { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; transform-origin: 0 0; }
  .hero-photo, .hero-still { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; display: block; }
  .dim { position: absolute; inset: 0; background: #000000; opacity: 0.6; pointer-events: none; }
  .hero-cam.still { display: none; }

  /* Szene (1280 x 720) liegt per Perspektivmatrix passgenau auf dem Laptop-Display */
  .screen { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; background: #0b0706; transform: matrix3d(0.466989,0.126187,0,0.000015554,0.077498,0.351502,0,0.000174610,0,0,1,0,900.5000,70.0000,0,1); }
  .scene { position: absolute; inset: 0; }
  .scene-img { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; display: block; }
  .skyclip { position: absolute; inset: 0; }
  .scene i { position: absolute; display: block; font-style: normal; }

  /* Sternschnuppen: Kopf rechts, Schweif links, wachsen beim Fallen; laufen endlos */
  .m { transform-origin: 100% 50%; border-radius: 999px; opacity: 0; background: linear-gradient(90deg, rgba(255,205,150,0) 0%, rgba(255,224,188,0.72) 76%, #ffffff 100%); animation-timing-function: cubic-bezier(.3,.05,.6,1); animation-iteration-count: infinite; animation-fill-mode: both; }
  .m::after { content: ''; position: absolute; right: -1px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 9px 3px rgba(255,208,150,0.9); }
  .m.near::after { width: 8px; height: 8px; margin-top: -4px; box-shadow: 0 0 16px 6px rgba(255,200,140,0.95); }
/* Ohne Animationen (Systemeinstellung "Bewegung reduzieren"): fertiges Standbild des Headers */
  @media (prefers-reduced-motion: reduce) {
    .hero-cam.live, .dim { display: none; }
    .hero-cam.still { display: block; }
  }

  /* Bahnen der Sternschnuppen (je eine eigene) */
  @keyframes k1{0%{opacity:0;transform:rotate(52.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(52.3deg) translateX(206px) scaleX(1.5)}100%{opacity:0;transform:rotate(52.3deg) translateX(206px) scaleX(1.5)}}
  @keyframes k2{0%{opacity:0;transform:rotate(43.2deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(43.2deg) translateX(160px) scaleX(1.5)}100%{opacity:0;transform:rotate(43.2deg) translateX(160px) scaleX(1.5)}}
  @keyframes k3{0%{opacity:0;transform:rotate(32.9deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(32.9deg) translateX(167px) scaleX(1.5)}100%{opacity:0;transform:rotate(32.9deg) translateX(167px) scaleX(1.5)}}
  @keyframes k4{0%{opacity:0;transform:rotate(61.1deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(61.1deg) translateX(198px) scaleX(1.5)}100%{opacity:0;transform:rotate(61.1deg) translateX(198px) scaleX(1.5)}}
  @keyframes k5{0%{opacity:0;transform:rotate(52.5deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(52.5deg) translateX(260px) scaleX(1.5)}100%{opacity:0;transform:rotate(52.5deg) translateX(260px) scaleX(1.5)}}
  @keyframes k6{0%{opacity:0;transform:rotate(55.4deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(55.4deg) translateX(234px) scaleX(1.5)}100%{opacity:0;transform:rotate(55.4deg) translateX(234px) scaleX(1.5)}}
  @keyframes k7{0%{opacity:0;transform:rotate(36.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(36.3deg) translateX(250px) scaleX(1.5)}100%{opacity:0;transform:rotate(36.3deg) translateX(250px) scaleX(1.5)}}
  @keyframes k8{0%{opacity:0;transform:rotate(65.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(65.6deg) translateX(160px) scaleX(1.5)}100%{opacity:0;transform:rotate(65.6deg) translateX(160px) scaleX(1.5)}}
  @keyframes k9{0%{opacity:0;transform:rotate(61.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(61.7deg) translateX(238px) scaleX(1.5)}100%{opacity:0;transform:rotate(61.7deg) translateX(238px) scaleX(1.5)}}
  @keyframes k10{0%{opacity:0;transform:rotate(58.2deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(58.2deg) translateX(163px) scaleX(1.5)}100%{opacity:0;transform:rotate(58.2deg) translateX(163px) scaleX(1.5)}}
  @keyframes k11{0%{opacity:0;transform:rotate(37.9deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(37.9deg) translateX(173px) scaleX(1.5)}100%{opacity:0;transform:rotate(37.9deg) translateX(173px) scaleX(1.5)}}
  @keyframes k12{0%{opacity:0;transform:rotate(59.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(59.3deg) translateX(235px) scaleX(1.5)}100%{opacity:0;transform:rotate(59.3deg) translateX(235px) scaleX(1.5)}}
  @keyframes k13{0%{opacity:0;transform:rotate(62.9deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(62.9deg) translateX(191px) scaleX(1.5)}100%{opacity:0;transform:rotate(62.9deg) translateX(191px) scaleX(1.5)}}
  @keyframes k14{0%{opacity:0;transform:rotate(46.1deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(46.1deg) translateX(250px) scaleX(1.5)}100%{opacity:0;transform:rotate(46.1deg) translateX(250px) scaleX(1.5)}}
  @keyframes k15{0%{opacity:0;transform:rotate(40.5deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(40.5deg) translateX(247px) scaleX(1.5)}100%{opacity:0;transform:rotate(40.5deg) translateX(247px) scaleX(1.5)}}
  @keyframes k16{0%{opacity:0;transform:rotate(62.9deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(62.9deg) translateX(178px) scaleX(1.5)}100%{opacity:0;transform:rotate(62.9deg) translateX(178px) scaleX(1.5)}}
  @keyframes k17{0%{opacity:0;transform:rotate(58.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(58.7deg) translateX(212px) scaleX(1.5)}100%{opacity:0;transform:rotate(58.7deg) translateX(212px) scaleX(1.5)}}
  @keyframes k18{0%{opacity:0;transform:rotate(37.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(37.3deg) translateX(199px) scaleX(1.5)}100%{opacity:0;transform:rotate(37.3deg) translateX(199px) scaleX(1.5)}}
  @keyframes k19{0%{opacity:0;transform:rotate(49.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(49.3deg) translateX(258px) scaleX(1.5)}100%{opacity:0;transform:rotate(49.3deg) translateX(258px) scaleX(1.5)}}
  @keyframes k20{0%{opacity:0;transform:rotate(62.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(62.6deg) translateX(227px) scaleX(1.5)}100%{opacity:0;transform:rotate(62.6deg) translateX(227px) scaleX(1.5)}}
  @keyframes k21{0%{opacity:0;transform:rotate(54.5deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(54.5deg) translateX(158px) scaleX(1.5)}100%{opacity:0;transform:rotate(54.5deg) translateX(158px) scaleX(1.5)}}
  @keyframes k22{0%{opacity:0;transform:rotate(46.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(46.7deg) translateX(189px) scaleX(1.5)}100%{opacity:0;transform:rotate(46.7deg) translateX(189px) scaleX(1.5)}}
  @keyframes k23{0%{opacity:0;transform:rotate(54.1deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(54.1deg) translateX(219px) scaleX(1.5)}100%{opacity:0;transform:rotate(54.1deg) translateX(219px) scaleX(1.5)}}
  @keyframes k24{0%{opacity:0;transform:rotate(63.9deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(63.9deg) translateX(230px) scaleX(1.5)}100%{opacity:0;transform:rotate(63.9deg) translateX(230px) scaleX(1.5)}}
  @keyframes k25{0%{opacity:0;transform:rotate(50.4deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(50.4deg) translateX(153px) scaleX(1.5)}100%{opacity:0;transform:rotate(50.4deg) translateX(153px) scaleX(1.5)}}
  @keyframes k26{0%{opacity:0;transform:rotate(46.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(46.3deg) translateX(178px) scaleX(1.5)}100%{opacity:0;transform:rotate(46.3deg) translateX(178px) scaleX(1.5)}}
  @keyframes k27{0%{opacity:0;transform:rotate(61.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(61.0deg) translateX(199px) scaleX(1.5)}100%{opacity:0;transform:rotate(61.0deg) translateX(199px) scaleX(1.5)}}
  @keyframes k28{0%{opacity:0;transform:rotate(58.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(58.3deg) translateX(247px) scaleX(1.5)}100%{opacity:0;transform:rotate(58.3deg) translateX(247px) scaleX(1.5)}}
  @keyframes k29{0%{opacity:0;transform:rotate(59.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(59.0deg) translateX(228px) scaleX(1.5)}100%{opacity:0;transform:rotate(59.0deg) translateX(228px) scaleX(1.5)}}
  @keyframes k30{0%{opacity:0;transform:rotate(55.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(55.0deg) translateX(219px) scaleX(1.5)}100%{opacity:0;transform:rotate(55.0deg) translateX(219px) scaleX(1.5)}}
  @keyframes k31{0%{opacity:0;transform:rotate(37.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(37.0deg) translateX(246px) scaleX(1.5)}100%{opacity:0;transform:rotate(37.0deg) translateX(246px) scaleX(1.5)}}
  @keyframes k32{0%{opacity:0;transform:rotate(54.4deg) translateX(0) scaleX(.3)}1.2%{opacity:1}8.5%{opacity:1}10%{opacity:0;transform:rotate(54.4deg) translateX(200px) scaleX(1.5)}100%{opacity:0;transform:rotate(54.4deg) translateX(200px) scaleX(1.5)}}
  @keyframes k33{0%{opacity:0;transform:rotate(65.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(65.6deg) translateX(453px) scaleX(1.6)}100%{opacity:0;transform:rotate(65.6deg) translateX(453px) scaleX(1.6)}}
  @keyframes k34{0%{opacity:0;transform:rotate(44.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(44.6deg) translateX(342px) scaleX(1.6)}100%{opacity:0;transform:rotate(44.6deg) translateX(342px) scaleX(1.6)}}
  @keyframes k35{0%{opacity:0;transform:rotate(60.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(60.7deg) translateX(451px) scaleX(1.6)}100%{opacity:0;transform:rotate(60.7deg) translateX(451px) scaleX(1.6)}}
  @keyframes k36{0%{opacity:0;transform:rotate(44.5deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(44.5deg) translateX(363px) scaleX(1.6)}100%{opacity:0;transform:rotate(44.5deg) translateX(363px) scaleX(1.6)}}
  @keyframes k37{0%{opacity:0;transform:rotate(53.2deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(53.2deg) translateX(510px) scaleX(1.6)}100%{opacity:0;transform:rotate(53.2deg) translateX(510px) scaleX(1.6)}}
  @keyframes k38{0%{opacity:0;transform:rotate(50.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(50.0deg) translateX(378px) scaleX(1.6)}100%{opacity:0;transform:rotate(50.0deg) translateX(378px) scaleX(1.6)}}
  @keyframes k39{0%{opacity:0;transform:rotate(50.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(50.7deg) translateX(494px) scaleX(1.6)}100%{opacity:0;transform:rotate(50.7deg) translateX(494px) scaleX(1.6)}}
  @keyframes k40{0%{opacity:0;transform:rotate(48.2deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(48.2deg) translateX(486px) scaleX(1.6)}100%{opacity:0;transform:rotate(48.2deg) translateX(486px) scaleX(1.6)}}
  @keyframes k41{0%{opacity:0;transform:rotate(58.2deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(58.2deg) translateX(433px) scaleX(1.6)}100%{opacity:0;transform:rotate(58.2deg) translateX(433px) scaleX(1.6)}}
  @keyframes k42{0%{opacity:0;transform:rotate(42.0deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(42.0deg) translateX(380px) scaleX(1.6)}100%{opacity:0;transform:rotate(42.0deg) translateX(380px) scaleX(1.6)}}
  @keyframes k43{0%{opacity:0;transform:rotate(51.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(51.6deg) translateX(396px) scaleX(1.6)}100%{opacity:0;transform:rotate(51.6deg) translateX(396px) scaleX(1.6)}}
  @keyframes k44{0%{opacity:0;transform:rotate(60.1deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(60.1deg) translateX(443px) scaleX(1.6)}100%{opacity:0;transform:rotate(60.1deg) translateX(443px) scaleX(1.6)}}
  @keyframes k45{0%{opacity:0;transform:rotate(49.3deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(49.3deg) translateX(412px) scaleX(1.6)}100%{opacity:0;transform:rotate(49.3deg) translateX(412px) scaleX(1.6)}}
  @keyframes k46{0%{opacity:0;transform:rotate(46.8deg) translateX(0) scaleX(.3)}1.2%{opacity:1}7.5%{opacity:1}9%{opacity:0;transform:rotate(46.8deg) translateX(512px) scaleX(1.6)}100%{opacity:0;transform:rotate(46.8deg) translateX(512px) scaleX(1.6)}}
  @keyframes k47{0%{opacity:0;transform:rotate(61.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}5.5%{opacity:1}7%{opacity:0;transform:rotate(61.6deg) translateX(951px) scaleX(1.7)}100%{opacity:0;transform:rotate(61.6deg) translateX(951px) scaleX(1.7)}}
  @keyframes k48{0%{opacity:0;transform:rotate(43.6deg) translateX(0) scaleX(.3)}1.2%{opacity:1}5.5%{opacity:1}7%{opacity:0;transform:rotate(43.6deg) translateX(851px) scaleX(1.7)}100%{opacity:0;transform:rotate(43.6deg) translateX(851px) scaleX(1.7)}}
  @keyframes k49{0%{opacity:0;transform:rotate(46.7deg) translateX(0) scaleX(.3)}1.2%{opacity:1}5.5%{opacity:1}7%{opacity:0;transform:rotate(46.7deg) translateX(945px) scaleX(1.7)}100%{opacity:0;transform:rotate(46.7deg) translateX(945px) scaleX(1.7)}}
  @keyframes k50{0%{opacity:0;transform:rotate(34.5deg) translateX(0) scaleX(.3)}1.2%{opacity:1}5.5%{opacity:1}7%{opacity:0;transform:rotate(34.5deg) translateX(930px) scaleX(1.7)}100%{opacity:0;transform:rotate(34.5deg) translateX(930px) scaleX(1.7)}}

  /* ===== Unterseiten ===== */
  .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #e18409; }
  .paket { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .paket-head { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #000000; border-bottom: 2px solid #e18409; padding-bottom: 3px; align-self: flex-start; }
  .paket-claim { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.25; }
  .paket-text { margin: 0; font-size: 16.5px; line-height: 1.7; color: #333333; }
  .enthalten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .enthalten li { font-size: 16px; line-height: 1.55; color: #333333; display: flex; gap: 12px; align-items: flex-start; }
  .tick { color: #e18409; font-weight: 700; }
  .schritt { background: #ffffff; border-top: 3px solid #e18409; padding: 28px 26px 32px 26px; display: flex; flex-direction: column; gap: 12px; }
  .schritt-nr { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #000000; }
  .schritt-titel { font-size: 21px; font-weight: 500; color: #000000; }
  .schritt-text { font-size: 15.5px; line-height: 1.65; color: #444444; }
  .preis-wert { font-size: 44px; font-weight: 700; line-height: 1.05; color: #000000; }
  .preis-meta { font-size: 15px; color: #555555; }
  .next-link { color: #ffffff; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; border-bottom: 2px solid #e18409; padding-bottom: 4px; }
  .next-link:hover { color: #e18409; }
  .preis-karte { background: transparent; border-top: 3px solid #e18409; padding: 32px 32px 34px 32px; display: flex; flex-direction: column; gap: 10px; }
  .preis-label { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #000000; }
  .preis-wert-s { font-size: 36px; font-weight: 700; line-height: 1.1; color: #000000; }
  .projekt { background: #f7f7f7; border-top: 3px solid #e18409; padding: 26px 24px 30px 24px; display: flex; flex-direction: column; gap: 10px; }
  .link-u { color: #000000; font-size: 15px; font-weight: 700; border-bottom: 2px solid #e18409; padding-bottom: 3px; }
  .sec-h { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; color: #000000; }
  .link-u:hover { color: #a86206; }
  .fliess { margin: 0; font-size: 17px; line-height: 1.75; color: #333333; }
  .kw-page-leistungen .paket { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .kw-page-leistungen .paket-head { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; color: #000000; align-self: flex-start; }
  .mehr { align-self: flex-start; margin-top: 4px; color: #000000; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; border-bottom: 2px solid #e18409; padding-bottom: 4px; }
  .mehr:hover { color: #e18409; }
  .werk-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .btn-primary { cursor: pointer; }
/* KW-MOTION:START */
/* ==========================================================================
   KOPFWERK Bewegung, Stufe 1
   Ruhig und kurz, ohne Bibliothek, ohne Cookie. Animiert wird nur, wenn die
   Systemeinstellung "Bewegung reduzieren" aus ist.

   Enthalten:
   1. Hero-Text und Titelbänder bauen sich auf
   2. Werkseiten-Header: Text gestaffelt, Bild wird aufgedeckt
   3. Einblendung beim Scrollen (zusammen mit kopfwerk-motion.js)
   4. Hover auf Bildern: Zoom und Textfläche
   5. Buttons und Links: Druck-Rückmeldung, Pfeil, Unterstreichung
   6. Pausenknopf für Hero-Animationen
   7. Stufe 2: Häkchen, Ablauflinie, Bildergalerie, mobiles Menü, Logo-Zug
   ========================================================================== */

:root {
  --kw-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --kw-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes kw-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kw-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes kw-ch-in { from { opacity: 0; top: 0.22em; } to { opacity: 1; top: 0; } }
@keyframes kw-curtain-x { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes kw-curtain-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kw-settle { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- 1. Hero-Text und Titelbänder ---------- */

/* Hero-Überschrift: erscheint Buchstabe für Buchstabe (Skript teilt den Text), danach Text, Buttons und Links */
.kw-ch { position: relative; }

/* Kein Ruck am Ende des Aufbaus: Safari kernt nicht über Elementgrenzen hinweg. Der geteilte Text
   (jeder Buchstabe ein eigenes Element) wäre dort breiter als der fertige Text, "GEDACHT," bräche
   beim Zurücksetzen von der zweiten in die erste Zeile. Ohne Kerning, Ligaturen und kontextuelle
   Formen sind geteilter und ungeteilter Text in jedem Browser gleich breit. */
.kw-hero-text > h1 {
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
}

@media (prefers-reduced-motion: no-preference) {
  .kw-hero-text > :not(h1),
  .kw-intro > *,
  .kw-mtext > *,
  .kw-hero-links > * { animation: kw-up 700ms var(--kw-ease) backwards; }

  /* Reihenfolge: Überschrift (Buchstaben, ca. 1,4 s), dann Text, dann Buttons, dann Werk-Links */
  .kw-hero-text > :nth-child(2) { animation-delay: 1250ms; }
  .kw-hero-text > :nth-child(3) { animation-delay: 1500ms; }

  /* Ohne Skript erscheint die Überschrift nach 1,2 s einfach; mit Skript übernimmt .kw-typing */
  .kw-hero-text > h1 { animation: kw-appear 1ms linear 1200ms backwards; }
  .kw-hero-text > h1.kw-typing { animation: none; }
  /* Scharf gestellt: alles versteckt, bis die Hero-Fläche sichtbar ist (Sequenz startet neu) */
  .kw-wait .kw-hero-text > *,
  .kw-wait .kw-hero-links > * { animation: none !important; opacity: 0; }
  /* Pausiert: Text und Links stehen sofort fertig da (die Pause betrifft nur die Bildanimation, nie den Inhalt) */
  .kw-paused .kw-hero-text > *,
  .kw-paused .kw-hero-links > *,
  .kw-paused .kw-ch { animation: none !important; opacity: 1 !important; transform: none !important; }
  .kw-ch { animation: kw-ch-in 300ms var(--kw-ease) backwards; }

  .kw-hero-links > :nth-child(1) { animation-delay: 1700ms; }
  .kw-hero-links > :nth-child(2) { animation-delay: 1760ms; }
  .kw-hero-links > :nth-child(3) { animation-delay: 1820ms; }
  .kw-hero-links > :nth-child(4) { animation-delay: 1880ms; }

  .kw-intro > :nth-child(1) { animation-delay: 80ms; }
  .kw-intro > :nth-child(2) { animation-delay: 170ms; }
  .kw-intro > :nth-child(3) { animation-delay: 260ms; }
  .kw-intro > :nth-child(4) { animation-delay: 350ms; }

  /* ---------- 2. Werkseiten-Header ---------- */
  .kw-split > div:first-child > * { animation: kw-up 700ms var(--kw-ease) backwards; }
  .kw-split > div:first-child > :nth-child(1) { animation-delay: 100ms; }
  .kw-split > div:first-child > :nth-child(2) { animation-delay: 200ms; }
  .kw-split > div:first-child > :nth-child(3) { animation-delay: 300ms; }
  .kw-split > div:first-child > :nth-child(4) { animation-delay: 400ms; }
  .kw-split > div:last-child { animation: kw-curtain-x 900ms var(--kw-ease-io) 80ms backwards; }
  .kw-split > div:last-child img { animation: kw-settle 1400ms var(--kw-ease) 80ms backwards; }

  /* mobil: Bild oben wird von oben nach unten aufgedeckt, Text folgt */
  .kw-mimg { animation: kw-curtain-y 800ms var(--kw-ease-io) backwards; }
  .kw-mtext > :nth-child(1) { animation-delay: 300ms; }
  .kw-mtext > :nth-child(2) { animation-delay: 400ms; }
  .kw-mtext > :nth-child(3) { animation-delay: 500ms; }
  .kw-mtext > :nth-child(4) { animation-delay: 600ms; }
}

/* ---------- 4. Hover auf Bildern ---------- */

.kw-media { position: relative; overflow: hidden; }
.kw-cap { display: none; }

@media (hover: hover) and (pointer: fine) {
  .kw-cap {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 18px 24px 20px 24px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 3px solid #e18409;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.3;
    pointer-events: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kw-media .werk-img { transition: transform 600ms var(--kw-ease); }
  .kw-cap { transform: translateY(101%); transition: transform 200ms var(--kw-ease); }
  .kw-media:hover .werk-img,
  .paket:has(.mehr:hover) .werk-img,
  .paket:has(.mehr:focus-visible) .werk-img { transform: scale(1.04); }
  .kw-media:hover .kw-cap,
  .paket:has(.mehr:hover) .kw-cap,
  .paket:has(.mehr:focus-visible) .kw-cap { transform: translateY(0); transition-duration: 320ms; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .kw-cap { opacity: 0; transition: opacity 150ms ease; }
  .kw-media:hover .kw-cap,
  .paket:has(.mehr:hover) .kw-cap,
  .paket:has(.mehr:focus-visible) .kw-cap { opacity: 1; }
}

/* ---------- 5. Buttons und Links ---------- */

.btn-primary,
.btn-outline-white {
  transition: transform 160ms var(--kw-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn-primary:active,
.btn-outline-white:active { transform: scale(0.97); }

.hero-link { transition: border-color 200ms ease, color 200ms ease; }
.nav-label, .sub-link, .rail-icon, .footer-link, .foot-link, .mehr, .link-u, .next-link { transition: color 160ms ease; }

/* Pfeil rutscht beim Hover nach rechts */
.kw-arrow { display: inline-block; transition: transform 220ms var(--kw-ease); }
a:hover > .kw-arrow,
a:focus-visible > .kw-arrow { transform: translateX(6px); }

/* Menü: orange Linie läuft von links ein (die aktuelle Seite hat sie dauerhaft) */
.nav-item span[style*="transparent"] {
  background: #e18409 !important;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 220ms var(--kw-ease);
}
.nav-item:hover span[style*="transparent"],
.nav-item:focus-visible span[style*="transparent"] { transform: scaleX(1); }

/* ---------- 6. Pausenknopf ---------- */

.kw-pause {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: transform 160ms var(--kw-ease), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.kw-pause.kw-m { top: 12px; right: 12px; font-size: 11px; padding: 8px 11px; }
.kw-pause:hover { background: #ffffff; color: #000000; border-color: #ffffff; }
.kw-pause:active { transform: scale(0.97); }
.kw-pause:focus-visible { outline: 2px solid #e18409; outline-offset: 3px; }
.kw-ico-play, .kw-t-play { display: none; }
.kw-paused .kw-ico-pause, .kw-paused .kw-t-pause { display: none; }
.kw-paused .kw-ico-play { display: block; }
.kw-paused .kw-t-play { display: inline; }
/* Pausiert: alle laufenden Animationen im Bereich einfrieren */
.kw-paused, .kw-paused * { animation-play-state: paused !important; }
/* Bei "Bewegung reduzieren" läuft nichts, also braucht es den Knopf nicht */
@media (prefers-reduced-motion: reduce) { .kw-pause { display: none; } }

/* ---------- 3. Einblendung beim Scrollen (Klassen setzt kopfwerk-motion.js) ---------- */

.kw-pre { opacity: 0; transform: translateY(20px); }
.kw-rv {
  transition: opacity 560ms var(--kw-ease) var(--kw-d, 0ms), transform 700ms var(--kw-ease) var(--kw-d, 0ms);
}
@media print { .kw-pre { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

/* ==========================================================================
   Stufe 2
   ========================================================================== */

@keyframes kw-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes kw-item-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- 7a. Häkchen in "Enthalten" zeichnen sich, sobald ihre Zeile erscheint ---------- */
.kw-rv .tick { clip-path: inset(0 0 0 0); transition: clip-path 420ms var(--kw-ease) calc(var(--kw-d, 0ms) + 200ms); }
.kw-pre .tick { clip-path: inset(0 100% 0 0); }

/* ---------- 7b. Ablauf: Linie verbindet 01, 02 und 03 (dauerhaft sichtbar, Aufbau animiert) ---------- */
.schritt { position: relative; }
.schritt::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 100%;
  width: 24px;
  height: 3px;
  background: #e18409;
  transform-origin: 0 50%;
}
.schritt:last-child::after { display: none; }
@media (max-width: 760px) {
  /* mobil stehen die Schritte untereinander, dort gibt es keine Verbindungslinie */
  .schritt::after { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .schritt.kw-pre::after { transform: scaleX(0); }
  .schritt.kw-rv::after { transition: transform 450ms var(--kw-ease) calc(var(--kw-d, 0ms) + 420ms); }
}

/* ---------- 7c. Bildergalerie: Bilder werden einzeln von oben nach unten aufgedeckt ---------- */
.kw-zoom { display: block; overflow: hidden; }
.kw-gal .kw-rv { clip-path: inset(0 0 0 0); transition: clip-path 800ms var(--kw-ease-io) var(--kw-d, 0ms); }
.kw-gal .kw-pre { /* 1 % bleibt stehen, sonst meldet der Beobachter das Bild nie als sichtbar */ opacity: 1; transform: none; clip-path: inset(0 0 99% 0); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kw-zoom img { transition: transform 600ms var(--kw-ease); }
  .kw-zoom:hover img { transform: scale(1.04); }
}

/* ---------- 7d. Mobiles Menü: gleitet von rechts herein, die Einträge folgen gestaffelt ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kw-menu { animation: kw-slide-in 280ms var(--kw-ease) backwards; }
  .kw-menu > div:first-child > * { animation: kw-item-in 360ms var(--kw-ease) backwards; }
  .kw-menu > div:first-child > :nth-child(1) { animation-delay: 120ms; }
  .kw-menu > div:first-child > :nth-child(2) { animation-delay: 160ms; }
  .kw-menu > div:first-child > :nth-child(3) { animation-delay: 200ms; }
  .kw-menu > div:first-child > :nth-child(4) { animation-delay: 240ms; }
  .kw-menu > div:first-child > :nth-child(5) { animation-delay: 280ms; }
  .kw-menu > div:first-child > :nth-child(6) { animation-delay: 320ms; }
}

/* ---------- 7f. Logo-Zug: der handschriftliche Zusatz "kreativ" wird einmal von links nach rechts aufgedeckt ----------
   Braucht das Logo als Inline-SVG mit class="kw-logo" und der Gruppe class="kw-kreativ" um den Zusatz. */
.kw-logo { display: block; }
.kw-logo .kw-kreativ { clip-path: inset(0 0 0 0); }
.kw-logo.kw-logo-pre .kw-kreativ { clip-path: inset(0 99% 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .kw-logo.kw-logo-rv .kw-kreativ { transition: clip-path 1200ms var(--kw-ease-io) 300ms; }
}

/* Mockup: Pause zeigt das vorhandene Standbild (wie bei "Bewegung reduzieren") */
.kw-paused .hero-cam.live, .kw-paused .dim { display: none; }
.kw-paused .hero-cam.still { display: block; }
.kw-paused #hero-box { background: #09090a !important; }
/* KW-MOTION:END */

/* KW-A11Y: Sprunglink */
.kw-skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: #000000; color: #ffffff; padding: 12px 18px; font-size: 16px; font-weight: 500; text-decoration: none; border: 2px solid #e18409; }
.kw-skip:focus { top: 12px; }
main#inhalt:focus { outline: none; }
/* KW-A11Y:END */


/* ==========================================================================
   KOPFWERK Theme: WordPress-Rahmen, Leiste, Menü, Footer, Responsive
   ========================================================================== */

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: 'Outfit', system-ui, sans-serif; background: #ffffff; color: #000000; -webkit-text-size-adjust: 100%; }
:where(img[width][height]) { height: auto; }
img { max-width: 100%; }
.wp-site-blocks { padding: 0 0 0 88px !important; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-site-blocks > main { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
main:focus { outline: none; }
main > .wp-block-html, main > .wp-block-group { margin: 0; }
html.kw-menu-open { overflow: hidden; }

/* ---------- Leiste links (Desktop) ---------- */
.kw-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 88px; z-index: 70; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 0 0; box-sizing: border-box; }
.kw-rail-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #ffffff; margin-top: 4px; }
.kw-rail-logo { display: block; }
.kw-rail-logo img { width: 42px; height: auto; display: block; }
.kw-rail-icons { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.kw-rail-bar { display: block; width: 100%; height: 6px; background: #e18409; margin-top: 16px; }
.rail-btn.kw-open .bar:nth-child(2) { width: 18px; background: #e18409; }
.rail-btn:focus-visible, .rail-icon:focus-visible, .kw-rail-logo:focus-visible { outline: 2px solid #e18409; outline-offset: 3px; }

/* ---------- Menü ---------- */
.kw-menu { position: fixed; inset: 0; z-index: 60; background: #000000; box-sizing: border-box; padding: 96px 80px 80px 168px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: start; overflow-y: auto; }
.kw-menu[hidden] { display: none; }
.kw-menu-list { display: flex; flex-direction: column; gap: 26px; }
.kw-menu-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 32px; margin-top: -6px; }
.kw-nav-inner { display: flex; flex-direction: column; gap: 10px; }
.kw-nav-ul { display: block; width: 64px; height: 3px; }
.kw-menu-social { display: none; }

/* ---------- Footer ---------- */
.kw-sep { display: block; width: 100%; height: 2px; background: #2e2e2e; }
.kw-footer { width: 100%; box-sizing: border-box; background: #000000; padding: 72px 64px; display: flex; flex-direction: column; align-items: center; gap: 56px; }
.kw-footer .kw-logo { height: 128px; width: auto; max-width: 100%; }
.kw-footer-links { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.kw-footer-links .kw-dot { color: #6a6a6a; font-size: 15px; }
.kw-pair { display: contents; }
/* Absicherung: ältere Footer-Fassungen aus dem Site-Editor dürfen die entfernte Leiste nicht mehr zeigen */
.kw-cta-bar, aside[aria-label="Projekt anfragen"] { display: none !important; }

/* Kennzeichnung KI-Bilder: EU-Symbol direkt am Bild (Art. 50 KI-Verordnung) */
.kw-zoom { position: relative; }
.kw-ki { position: absolute; left: 12px; bottom: 12px; z-index: 4; line-height: 0; pointer-events: none; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
.kw-ki img { display: block; height: 19px !important; width: auto !important; animation: none !important; transform: none !important; }
.kw-split > div:last-child .kw-ki img { height: 19px !important; width: auto !important; }
.kw-ki.kw-ki-tl { bottom: auto; top: 12px; }
.kw-ki.kw-ki-hero { left: auto; bottom: auto; right: 24px; top: 76px; }
/* Über mich: Kennzeichnung oben links am Porträt */
.kw-page-ueber-mich .um-grid .kw-ki { bottom: auto; top: 12px; }
/* E-Mail-Schutz: Ohne JavaScript erscheint die Adresse über CSS (nicht im Quelltext als Text) */
.kw-mail::before { content: attr(data-u) "@" attr(data-d); }
.kw-ki-note { margin: 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.6; color: #b0b0b0; }

/* Leistungen: Werk-Name als große Überschrift (ohne Linie der Werkseiten) */
.kw-page-leistungen .paket-head { border-bottom: 0; padding-bottom: 0; }

/* ---------- Rechtstexte ---------- */
.kw-legal { padding: 88px 64px 104px 64px; box-sizing: border-box; width: 100%; }
.kw-legal > * { max-width: 780px; margin-left: 0; margin-right: auto; }
.kw-legal h2 { margin: 48px 0 14px 0; font-size: 24px; font-weight: 500; line-height: 1.3; color: #000000; }
.kw-legal h2:first-child { margin-top: 0; }
.kw-legal p { margin: 0 0 16px 0; font-size: 17px; line-height: 1.75; color: #333333; }
.kw-legal .kw-callout { border-left: 4px solid #e18409; background: #f4f4f4; padding: 20px 24px 4px 24px; margin: 0 0 24px 0; }
.kw-legal .kw-callout p { color: #000000; }
.kw-legal a { color: #000000; border-bottom: 2px solid #e18409; }
.kw-legal a:hover { color: #a86206; }
.kw-prose { padding: 88px 64px 104px 64px; max-width: 880px; box-sizing: border-box; }
.kw-prose h2 { font-weight: 500; }
.kw-404 { padding: 160px 64px 120px 64px; background: #000000; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

/* ---------- Mittlere Breiten: Raster entlasten ---------- */
@media (max-width: 1180px) {
  main [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kw-gal { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   Mobil (bis 860 px): Kopfleiste oben, Inhalte einspaltig, feste Anfrage-Leiste
   ========================================================================== */
@media (max-width: 860px) {
  .wp-site-blocks { padding: 64px 0 52px 0 !important; }

  /* Kopfleiste */
  .kw-rail { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 64px; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; padding: 0 18px; }
  .rail-btn { align-items: flex-start; gap: 4px; }
  .bar { width: 24px; height: 2.5px; }
  .rail-btn.kw-open .bar:nth-child(2) { width: 24px; background: #ffffff; }
  .kw-rail-label { font-size: 9px; letter-spacing: 1.5px; margin-top: 2px; }
  .kw-rail-logo { display: flex; justify-content: center; }
  .kw-rail-logo img { width: auto; height: 36px; }
  .kw-rail-icons { flex-direction: row; justify-content: flex-end; width: auto; gap: 0; }
  .kw-rail-icons .rail-icon { width: auto; height: auto; }
  .kw-rail-icons .rail-icon svg { width: 22px; height: 22px; }
  .kw-rail-icons .rail-icon:nth-child(2), .kw-rail-bar { display: none; }

  /* Menü */
  .kw-menu { inset: auto; top: 64px; left: 0; right: 0; bottom: 0; padding: 36px 50px 76px 50px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
  .kw-menu-list { gap: 22px; align-items: flex-start; }
  .kw-menu-sub { padding-left: 0; gap: 12px; margin-top: -8px; }
  .nav-label { font-size: 24px; }
  .sub-link { font-size: 16px; }
  .kw-nav-inner { gap: 8px; }
  .kw-nav-ul { width: 56px; }
  .kw-menu-social { display: flex; justify-content: center; gap: 30px; }
  .rail-icon { height: 44px; }

  /* Footer */
  .kw-footer { padding: 40px 22px; gap: 30px; }
  .kw-footer .kw-logo { width: 240px; height: auto; }
  .kw-footer-links { flex-direction: column; gap: 12px; }
  .kw-footer-links .kw-dot { display: none; }
  .kw-footer-links .kw-pair { display: flex; align-items: center; gap: 12px; }
  .kw-footer-links .kw-pair .kw-dot { display: inline; margin: 0; }
  .kw-pause { top: 12px; right: 12px; font-size: 11px; padding: 8px 11px; }
  .kw-ki img, .kw-split > div:last-child .kw-ki img { height: 17px !important; }
  .kw-ki.kw-ki-hero { right: 12px; top: 52px; }

  /* Hero */
  #top { min-height: 0 !important; justify-content: flex-start !important; background: #09090a !important; }
  #top .kw-hero-text { max-width: none !important; gap: 18px !important; }
  #top .kw-hero-text h1 { font-size: 30px !important; line-height: 1.15 !important; letter-spacing: 0.5px !important; max-width: none !important; }
  #top .kw-hero-text p { font-size: 16px !important; line-height: 1.6 !important; width: auto !important; max-width: none !important; color: #f0f0f0 !important; }
  #top .kw-hero-text > div { flex-direction: column !important; gap: 12px !important; margin-top: 4px !important; }
  #top .kw-hero-text .btn-outline-white { display: none !important; }
  .kw-hero-links { display: none !important; }
  .btn-primary, .btn-outline-white { display: block; text-align: center; }
  main a.btn-primary { align-self: stretch !important; }
  main section[style*="1.25fr"] { padding: 0 !important; gap: 0 !important; }
  main section[style*="1.25fr"] > div { padding: 36px 22px 40px 22px !important; }

  /* Abschnitte */
  main section[style]:not(#top), main > .wp-block-group { padding-left: 22px !important; padding-right: 22px !important; }
  main section[style*="padding: 88px 64px"], main section[style*="padding: 72px 64px"], main section[style*="padding: 56px 64px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  main section[style*="padding: 96px 64px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  main [style*="text-align: center"] { text-align: left !important; }
  main [style*="align-items: center"][style*="flex-direction: column"]:not(.kw-footer) { align-items: flex-start !important; }
  main section[style*="text-align: center"] { gap: 16px !important; }
  main section[style*="justify-content: center"] { justify-content: flex-start !important; }
  /* Leistungskacheln: ohne Symbol, kompakter (wie im mobilen Entwurf) */
  main [style*="border-top: 3px solid #e18409"][style*="padding: 34px 26px"] { padding: 26px 22px !important; gap: 12px !important; }
  main [style*="padding: 34px 26px"] > svg { display: none; }
  main [style*="padding: 34px 26px"] h3 { font-size: 18px !important; }
  main [style*="padding: 34px 26px"] p { font-size: 15px !important; }
  main section[style*="align-items: center; gap: 20px; text-align: center"] .btn-primary { align-self: stretch; }
  .kw-intro { padding-top: 47px !important; padding-bottom: 44px !important; gap: 16px !important; }
  main h1 { font-size: 30px !important; line-height: 1.15 !important; letter-spacing: 0.5px !important; }
  main h2[style] { font-size: 26px !important; line-height: 1.3 !important; }
  main h2[style*="font-size: 32px"] { font-size: 24px !important; }
  main p[style*="font-size: 17px"], main p[style*="font-size: 18px"] { font-size: 16px !important; line-height: 1.7 !important; }
  .paket-claim, .sec-h { font-size: 24px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; }
  .kw-page-leistungen .paket-head { font-size: 22px !important; letter-spacing: 2px !important; order: 1; }
  .kw-page-leistungen .paket { display: flex !important; flex-direction: column; gap: 20px !important; }
  .kw-page-leistungen .paket > div { display: contents !important; }
  .kw-page-leistungen .paket .kw-media { order: 2; }
  .kw-page-leistungen .paket-claim, .kw-page-leistungen .paket-text, .kw-page-leistungen .mehr { order: 3; }
  .kw-page-leistungen .paket-claim { margin-top: 4px !important; font-size: 19px !important; line-height: 1.35 !important; }
  .kw-page-leistungen main section[style*="padding: 72px 64px"] { padding-top: 38px !important; padding-bottom: 40px !important; }
  .paket-text { font-size: 16px !important; }
  main [style*="grid-template-columns"], .paket { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  main .kw-gal[style], main [style*="repeat(3, minmax(0, 1fr)); gap: 16px"], main [style*="repeat(2, minmax(0, 1fr)); gap: 16px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* Bildwerk, Kreativ-Galerie: Buch über die volle Breite, darunter zwei Hochformate nebeneinander,
     das dritte Hochformat links neben Schere und Kunde (gestapelt rechts). Die Seite liegt schon in
     der Datenbank, deshalb greift die Regel über den Aufbau und nicht über neue Klassen. */
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] > div:not(.kw-zoom) { display: contents !important; }
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] > .kw-zoom:first-child { grid-column: 1 / -1; }
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] > div:nth-child(2) > .kw-zoom:nth-child(3) { grid-row: span 2; }
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] > div:nth-child(3) > .kw-zoom { position: relative; }
  .kw-page-bildwerk .kw-gal[style*="flex-direction: column"] > div:nth-child(3) > .kw-zoom img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  .kw-page-bildwerk .paket-claim { font-size: 22px !important; }
  main [style*="display: flex; gap: 64px"] { flex-direction: column !important; gap: 20px !important; align-items: stretch !important; }
  main [style*="display: flex; gap: 64px"] > div { flex: none !important; max-width: none !important; width: 100% !important; }
  main [style*="display: flex; gap: 32px; flex-wrap: wrap"] { gap: 16px 24px !important; }
  .kw-media .werk-img { aspect-ratio: 4 / 3; }

  /* Werkseiten-Kopf: Bild oben, Text darunter */
  .kw-split { min-height: 0 !important; }
  .kw-split > div:first-child { padding: 40px 22px 44px 22px !important; gap: 16px !important; order: 2; }
  .kw-split > div:last-child { order: 1; }
  .kw-split > div:last-child img { height: 100% !important; }

  /* Über mich: Porträt als Kopf, Titel liegt unten im Bild */
  .kw-page-ueber-mich .wp-block-post-content { display: grid; grid-template-columns: minmax(0, 1fr); }
  .kw-page-ueber-mich .wp-block-post-content > .kw-intro { grid-row: 1; grid-column: 1; align-self: end; z-index: 6; background: rgba(0, 0, 0, 0.75) !important; padding: 24px 22px 28px 22px !important; gap: 12px !important; }
  .kw-page-ueber-mich .um-grid { display: contents !important; }
  .kw-page-ueber-mich .um-grid > div:first-child { grid-row: 1; grid-column: 1; position: relative !important; margin: 0 !important; }
  .kw-page-ueber-mich .um-grid > div:first-child > div { display: none !important; }
  .um-img { width: 100% !important; position: static !important; }
  .kw-page-ueber-mich .um-grid > div:last-child { grid-row: 2; grid-column: 1; padding: 40px 22px 48px 22px !important; gap: 20px !important; min-width: 0; }
  .um-grid p[style*="font-size: 28px"] { font-size: 21px !important; line-height: 1.45 !important; }
  .um-grid .fliess, .fliess { font-size: 16px; line-height: 1.7; }

  /* Preis, Schritte */
  .enthalten { gap: 12px; }
  .enthalten li { font-size: 15px; gap: 10px; }
  .schritt { gap: 10px; }
  .schritt-titel { font-size: 19px; }
  .schritt-text { font-size: 15px; line-height: 1.6; }
  .kw-split p { font-size: 16px !important; }
  .preis-wert { font-size: 40px; }
  .preis-wert-s { font-size: 30px; }
  .preis-karte { padding: 24px 20px 26px 20px; }
  .schritt { padding: 22px 20px 26px 20px; }
  .kw-legal, .kw-prose { padding: 44px 22px 56px 22px; }
  .kw-legal h2 { font-size: 21px; margin-top: 36px; }
  .kw-404 { padding: 72px 22px 64px 22px; }

  /* Kontakt: Info-Karte */
  aside[style*="background: #f7f7f7"] { padding: 28px 22px !important; }
}

@media (max-width: 380px) {
  main .kw-gal[style] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Ohne Kerning ist der Slogan ca. 6 px breiter; auf kleinen Handys (375 px) gleicht 0,4 statt 0,5 px Buchstabenabstand das aus, damit er wie bisher zweizeilig bleibt */
  #top .kw-hero-text h1 { letter-spacing: 0.4px !important; }
}

@media print {
  .kw-rail, .kw-menu, .kw-pause { display: none !important; }
  .wp-site-blocks { padding: 0 !important; }
}

/* ==========================================================================
   Leistungskacheln auf der Startseite: ganze Kachel klickbar (Release 1.0.11)
   Titel schwarz ohne Unterstrich, beim Hover orange. Auf Touchgeräten gibt es
   keinen Hover, dort zeigt ein kleiner oranger Pfeil, dass die Kachel antippbar ist.
   ========================================================================== */
.kw-card { position: relative; }
.kw-card-link { color: inherit; text-decoration: none; transition: color 160ms ease; }
.kw-card-link::after { content: ""; position: absolute; inset: 0; }
.kw-card-link:hover,
.kw-card-link:active { color: #e18409; }
.kw-card-link > .kw-arrow { display: none; margin-left: 8px; color: #e18409; }
.kw-card-link:focus-visible { outline: none; }
.kw-card:has(.kw-card-link:focus-visible) { outline: 2px solid #e18409; outline-offset: 3px; }
@media (hover: none) {
  .kw-card-link > .kw-arrow { display: inline-block; }
}