@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-regular-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/opensans-bold-webfont.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1110;
  --ink: #f7efe2;
  --muted: #c5baaa;
  --soft: rgba(247, 239, 226, .75);
  --line: rgba(247, 239, 226, .15);
  --panel: #181b18;
  --panel-2: #24251f;
  --accent: #d9b86b;
  --accent-2: #8db6ad;
  --shadow: 0 26px 90px rgba(0, 0, 0, .42);
  --header-bg: rgba(15, 17, 16, .9);
  --header-h: 74px;
  --radius: 18px;
  --radius-soft: 34px;
  --stage-width: min(1180px, calc(100% - 68px));
  --copy-width: 66ch;
  --hero-overlay-a: rgba(15, 17, 16, .94);
  --hero-overlay-b: rgba(15, 17, 16, .34);
  --hero-overlay-c: rgba(15, 17, 16, .88);
  --hero-img-opacity: .82;
  --hero-title-max: 12ch;
  --hero-title-size: clamp(4rem, 7.6vw, 8.2rem);
  color-scheme: dark;
}

html[data-styleworld="editorial"] {
  --bg: #0d0e0d;
  --ink: #f3eadb;
  --muted: #c7bca9;
  --soft: rgba(243, 234, 219, .76);
  --line: rgba(198, 161, 91, .18);
  --panel: #171816;
  --panel-2: #232016;
  --accent: #c6a15b;
  --accent-2: #8f9f93;
  --header-bg: rgba(13, 14, 13, .92);
  --hero-title-max: 11.6ch;
  --hero-title-size: clamp(4rem, 7.4vw, 7.9rem);
}

html[data-styleworld="atelier"] {
  --bg: #120d0b;
  --ink: #f7eadf;
  --muted: #d0b7a6;
  --soft: rgba(247, 234, 223, .76);
  --line: rgba(181, 123, 84, .18);
  --panel: #1f1713;
  --panel-2: #2d2119;
  --accent: #bd7448;
  --accent-2: #a99679;
  --header-bg: rgba(18, 13, 11, .92);
  --radius: 24px;
  --radius-soft: 42px;
  --hero-title-max: 11.4ch;
  --hero-title-size: clamp(4rem, 7.7vw, 8.2rem);
}

html[data-styleworld="klartechnik"] {
  --bg: #061019;
  --ink: #eff9ff;
  --muted: #afc8d3;
  --soft: rgba(239, 249, 255, .72);
  --line: rgba(141, 198, 216, .2);
  --panel: #0a1721;
  --panel-2: #102432;
  --accent: #8dc6d8;
  --accent-2: #d9e8ee;
  --header-bg: rgba(6, 16, 25, .9);
  --radius: 8px;
  --radius-soft: 12px;
  --hero-title-max: 12.8ch;
  --hero-title-size: clamp(3.7rem, 7vw, 7.6rem);
}

html[data-styleworld="natur"] {
  --bg: #0f150f;
  --ink: #f4eddc;
  --muted: #d0c5ad;
  --soft: rgba(244, 237, 220, .76);
  --line: rgba(183, 199, 123, .18);
  --panel: #182116;
  --panel-2: #25331d;
  --accent: #b7c77b;
  --accent-2: #d2a96f;
  --header-bg: rgba(15, 21, 15, .9);
  --radius: 30px;
  --radius-soft: 54px;
  --hero-title-max: 11.5ch;
  --hero-title-size: clamp(3.9rem, 7.4vw, 8rem);
}

html[data-styleworld="graustufen"] {
  --bg: #0b0c0d;
  --ink: #f1eee7;
  --muted: #b8b3a9;
  --soft: rgba(241, 238, 231, .74);
  --line: rgba(241, 238, 231, .15);
  --panel: #151617;
  --panel-2: #202123;
  --accent: #d7d2c8;
  --accent-2: #74716a;
  --header-bg: rgba(11, 12, 13, .92);
  --radius: 12px;
  --radius-soft: 22px;
  --hero-title-max: 12ch;
  --hero-title-size: clamp(3.8rem, 7.1vw, 7.7rem);
}

html[data-styleworld="ozean"] {
  --bg: #06131c;
  --ink: #eefaff;
  --muted: #b0cdd8;
  --soft: rgba(238, 250, 255, .74);
  --line: rgba(98, 183, 209, .2);
  --panel: #0a1d29;
  --panel-2: #123243;
  --accent: #5ec1d8;
  --accent-2: #d5c083;
  --header-bg: rgba(6, 19, 28, .91);
  --radius: 22px;
  --radius-soft: 46px;
  --hero-title-max: 11.8ch;
  --hero-title-size: clamp(3.9rem, 7.4vw, 8rem);
}

html[data-styleworld="sand"] {
  --bg: #1c140b;
  --ink: #fff1d2;
  --muted: #d8c19b;
  --soft: rgba(255, 241, 210, .76);
  --line: rgba(221, 167, 88, .2);
  --panel: #2a1d10;
  --panel-2: #423018;
  --accent: #e0b060;
  --accent-2: #a86e3c;
  --header-bg: rgba(28, 20, 11, .91);
  --radius: 18px;
  --radius-soft: 38px;
  --hero-title-max: 11.6ch;
  --hero-title-size: clamp(3.9rem, 7.3vw, 7.9rem);
}

html[data-styleworld="vulkan"] {
  --bg: #110d0b;
  --ink: #fff0df;
  --muted: #d5b5a0;
  --soft: rgba(255, 240, 223, .74);
  --line: rgba(243, 93, 52, .2);
  --panel: #1f1511;
  --panel-2: #321a13;
  --accent: #f06035;
  --accent-2: #f0b15f;
  --header-bg: rgba(17, 13, 11, .92);
  --radius: 14px;
  --radius-soft: 30px;
  --hero-title-max: 11.2ch;
  --hero-title-size: clamp(4rem, 7.5vw, 8.2rem);
}

html[data-styleworld="wald"] {
  --bg: #08110b;
  --ink: #f0ecd9;
  --muted: #bdc8a9;
  --soft: rgba(240, 236, 217, .75);
  --line: rgba(123, 162, 99, .19);
  --panel: #101b12;
  --panel-2: #1d2d1d;
  --accent: #9fbe72;
  --accent-2: #6ca18a;
  --header-bg: rgba(8, 17, 11, .91);
  --radius: 28px;
  --radius-soft: 56px;
  --hero-title-max: 11.7ch;
  --hero-title-size: clamp(3.8rem, 7.2vw, 7.8rem);
}

html[data-styleworld="holz"] {
  --bg: #150d08;
  --ink: #fff0dc;
  --muted: #d6b99a;
  --soft: rgba(255, 240, 220, .74);
  --line: rgba(181, 118, 69, .21);
  --panel: #21140c;
  --panel-2: #382314;
  --accent: #c98a52;
  --accent-2: #e1c08b;
  --header-bg: rgba(21, 13, 8, .91);
  --radius: 20px;
  --radius-soft: 42px;
  --hero-title-max: 11.9ch;
  --hero-title-size: clamp(3.8rem, 7.2vw, 7.8rem);
}

html[data-styleworld="sonnenuntergang"] {
  --bg: #1b0b13;
  --ink: #fff1df;
  --muted: #e8bca9;
  --soft: rgba(255, 241, 223, .78);
  --line: rgba(255, 166, 82, .26);
  --panel: #27101d;
  --panel-2: #462038;
  --accent: #ffae54;
  --accent-2: #c866d8;
  --header-bg: rgba(27, 11, 19, .92);
  --radius: 28px;
  --radius-soft: 58px;
  --hero-title-max: 10.9ch;
  --hero-title-size: clamp(4.1rem, 7.9vw, 8.6rem);
}

html[data-styleworld="gewitter"] {
  --bg: #080c14;
  --ink: #edf3ff;
  --muted: #aeb8c9;
  --soft: rgba(237, 243, 255, .74);
  --line: rgba(119, 148, 205, .22);
  --panel: #0f1420;
  --panel-2: #192236;
  --accent: #8ea8ff;
  --accent-2: #d8c373;
  --header-bg: rgba(8, 12, 20, .92);
  --radius: 12px;
  --radius-soft: 28px;
  --hero-title-max: 11.6ch;
  --hero-title-size: clamp(3.9rem, 7.3vw, 8rem);
}

html[data-mode="light"] {
  --bg: #f3ecdf;
  --ink: #181713;
  --muted: #62594e;
  --soft: rgba(24, 23, 19, .72);
  --line: rgba(24, 23, 19, .14);
  --panel: #fffaf0;
  --panel-2: #eee4d2;
  --shadow: 0 24px 76px rgba(70, 58, 38, .16);
  --header-bg: rgba(243, 236, 223, .92);
  --hero-overlay-a: rgba(243, 236, 223, .76);
  --hero-overlay-b: rgba(243, 236, 223, .04);
  --hero-overlay-c: rgba(243, 236, 223, .65);
  --hero-img-opacity: .72;
  color-scheme: light;
}


html[data-styleworld="ebenholz"][data-mode="light"] {
  --bg: #f4eee6;
  --ink: #1f1813;
  --muted: #726457;
  --line: rgba(184, 146, 78, .16);
  --panel: #fffbf4;
  --panel-2: #eadfce;
  --accent: #997341;
  --accent-2: #8c7762;
  --header-bg: rgba(244, 238, 230, .93);
}

html[data-styleworld="nachtatelier"][data-mode="light"] {
  --bg: #f2ebe9;
  --ink: #261b21;
  --muted: #79676f;
  --line: rgba(184, 121, 92, .16);
  --panel: #fff8f5;
  --panel-2: #ead8d2;
  --accent: #a96a50;
  --accent-2: #8d7781;
  --header-bg: rgba(242, 235, 233, .93);
}

html[data-styleworld="tintekalk"][data-mode="light"] {
  --bg: #eef1f2;
  --ink: #17202a;
  --muted: #606a74;
  --line: rgba(111, 136, 159, .16);
  --panel: #fbfcfd;
  --panel-2: #dde4e8;
  --accent: #617e93;
  --accent-2: #8b99a2;
  --header-bg: rgba(238, 241, 242, .93);
}

html[data-styleworld="pfauenlicht"][data-mode="light"] {
  --bg: #ebf2f1;
  --ink: #122126;
  --muted: #596e6b;
  --line: rgba(43, 141, 134, .16);
  --panel: #f7fbfb;
  --panel-2: #d7e4e2;
  --accent: #247b76;
  --accent-2: #71885c;
  --header-bg: rgba(235, 242, 241, .93);
}

html[data-styleworld="iriskupfer"][data-mode="light"] {
  --bg: #f3edf1;
  --ink: #261a24;
  --muted: #786675;
  --line: rgba(191, 124, 98, .16);
  --panel: #fff8fb;
  --panel-2: #eadbe4;
  --accent: #b16f58;
  --accent-2: #927386;
  --header-bg: rgba(243, 237, 241, .93);
}

html[data-styleworld="polarlicht"][data-mode="light"] {
  --bg: #edf4f8;
  --ink: #12202c;
  --muted: #5d7380;
  --line: rgba(102, 205, 209, .16);
  --panel: #f9fcfd;
  --panel-2: #dce9ee;
  --accent: #4caeb1;
  --accent-2: #7688c1;
  --header-bg: rgba(237, 244, 248, .93);
}

@media (prefers-color-scheme: light) {
  html[data-mode="auto"] {
    --bg: #f3ecdf;
    --ink: #181713;
    --muted: #62594e;
    --soft: rgba(24, 23, 19, .72);
    --line: rgba(24, 23, 19, .14);
    --panel: #fffaf0;
    --panel-2: #eee4d2;
    --shadow: 0 24px 76px rgba(70, 58, 38, .16);
    --header-bg: rgba(243, 236, 223, .92);
    --hero-overlay-a: rgba(243, 236, 223, .76);
    --hero-overlay-b: rgba(243, 236, 223, .04);
    --hero-overlay-c: rgba(243, 236, 223, .65);
    --hero-img-opacity: .72;
    color-scheme: light;
  }
}


html[data-styleworld="ebenholz"] {
  --bg: #0b0908;
  --ink: #f5ecdd;
  --muted: #c6b8a6;
  --soft: rgba(245, 236, 221, .76);
  --line: rgba(184, 146, 78, .18);
  --panel: #14110f;
  --panel-2: #1f1915;
  --accent: #b8924e;
  --accent-2: #8f7a60;
  --header-bg: rgba(11, 9, 8, .92);
  --radius: 16px;
  --radius-soft: 34px;
  --hero-title-max: 11.4ch;
  --hero-title-size: clamp(4rem, 7.2vw, 7.8rem);
}

html[data-styleworld="nachtatelier"] {
  --bg: #120d12;
  --ink: #f8eee8;
  --muted: #cab7bf;
  --soft: rgba(248, 238, 232, .76);
  --line: rgba(184, 121, 92, .18);
  --panel: #1d151b;
  --panel-2: #2a1f26;
  --accent: #b8795c;
  --accent-2: #9a7e88;
  --header-bg: rgba(18, 13, 18, .92);
  --radius: 26px;
  --radius-soft: 42px;
  --hero-title-max: 11.2ch;
  --hero-title-size: clamp(4rem, 7.4vw, 8rem);
}

html[data-styleworld="tintekalk"] {
  --bg: #091019;
  --ink: #f0eee8;
  --muted: #b5c0ca;
  --soft: rgba(240, 238, 232, .74);
  --line: rgba(111, 136, 159, .18);
  --panel: #111925;
  --panel-2: #1a2431;
  --accent: #6f889f;
  --accent-2: #c7d0d7;
  --header-bg: rgba(9, 16, 25, .92);
  --radius: 10px;
  --radius-soft: 18px;
  --hero-title-max: 12ch;
  --hero-title-size: clamp(4rem, 7.2vw, 7.9rem);
}

html[data-styleworld="pfauenlicht"] {
  --bg: #041216;
  --ink: #f5f2ea;
  --muted: #b8c9c3;
  --soft: rgba(245, 242, 234, .74);
  --line: rgba(43, 141, 134, .2);
  --panel: #091c21;
  --panel-2: #0f2930;
  --accent: #2b8d86;
  --accent-2: #7f9660;
  --header-bg: rgba(4, 18, 22, .92);
  --radius: 22px;
  --radius-soft: 38px;
  --hero-title-max: 11.4ch;
  --hero-title-size: clamp(4rem, 7.5vw, 8.1rem);
}

html[data-styleworld="iriskupfer"] {
  --bg: #130d16;
  --ink: #f8efea;
  --muted: #ccb6c6;
  --soft: rgba(248, 239, 234, .75);
  --line: rgba(191, 124, 98, .2);
  --panel: #1d1420;
  --panel-2: #291b2a;
  --accent: #bf7c62;
  --accent-2: #9d7891;
  --header-bg: rgba(19, 13, 22, .92);
  --radius: 24px;
  --radius-soft: 40px;
  --hero-title-max: 11.2ch;
  --hero-title-size: clamp(4rem, 7.5vw, 8rem);
}

html[data-styleworld="polarlicht"] {
  --bg: #06111c;
  --ink: #eef8ff;
  --muted: #afc5d4;
  --soft: rgba(238, 248, 255, .75);
  --line: rgba(102, 205, 209, .2);
  --panel: #0b1926;
  --panel-2: #112637;
  --accent: #66cdd1;
  --accent-2: #8ea6d8;
  --header-bg: rgba(6, 17, 28, .92);
  --radius: 20px;
  --radius-soft: 36px;
  --hero-title-max: 11.6ch;
  --hero-title-size: clamp(4rem, 7.5vw, 8rem);
}

html[data-styleworld="editorial"][data-mode="light"] {
  --bg: #eee6d7;
  --ink: #1c1913;
  --muted: #62594b;
  --soft: rgba(28, 25, 19, .72);
  --line: rgba(77, 62, 37, .14);
  --panel: #fbf5ea;
  --panel-2: #e5dac7;
  --accent: #8a6a36;
  --accent-2: #6e7b73;
  --header-bg: rgba(238, 230, 215, .94);
}

html[data-styleworld="atelier"][data-mode="light"] {
  --bg: #f2e7dc;
  --ink: #241913;
  --muted: #6d5c50;
  --line: rgba(143, 88, 55, .16);
  --panel: #fff8ef;
  --panel-2: #e5d1bd;
  --accent: #8f5635;
  --accent-2: #82725b;
  --header-bg: rgba(242, 231, 220, .94);
}

html[data-styleworld="klartechnik"][data-mode="light"] {
  --bg: #edf5f7;
  --ink: #10202a;
  --muted: #536972;
  --line: rgba(40, 103, 126, .18);
  --panel: #f8fcfd;
  --panel-2: #dfecef;
  --accent: #2f829c;
  --accent-2: #526f7a;
  --header-bg: rgba(237, 245, 247, .93);
}

html[data-styleworld="natur"][data-mode="light"] {
  --bg: #f1eadb;
  --ink: #202115;
  --muted: #655f4c;
  --line: rgba(109, 125, 60, .18);
  --panel: #fff8eb;
  --panel-2: #e7dfc7;
  --accent: #687833;
  --accent-2: #9c6f34;
  --header-bg: rgba(241, 234, 219, .93);
}

html[data-styleworld="graustufen"][data-mode="light"] {
  --bg: #eeece7;
  --ink: #141414;
  --muted: #5d5a54;
  --line: rgba(20, 20, 20, .13);
  --panel: #fbfaf7;
  --panel-2: #dcd9d1;
  --accent: #333333;
  --accent-2: #77736a;
  --header-bg: rgba(238, 236, 231, .94);
}

html[data-styleworld="ozean"][data-mode="light"] {
  --bg: #e8f4f7;
  --ink: #0e2530;
  --muted: #526f78;
  --line: rgba(35, 109, 134, .17);
  --panel: #f7fcfd;
  --panel-2: #d7eaee;
  --accent: #227e9a;
  --accent-2: #8c743e;
  --header-bg: rgba(232, 244, 247, .93);
}

html[data-styleworld="sand"][data-mode="light"] {
  --bg: #f4ead5;
  --ink: #21170d;
  --muted: #6e5b40;
  --line: rgba(145, 95, 37, .18);
  --panel: #fff7e6;
  --panel-2: #e8d4af;
  --accent: #9c6429;
  --accent-2: #c58a45;
  --header-bg: rgba(244, 234, 213, .93);
}

html[data-styleworld="vulkan"][data-mode="light"] {
  --bg: #f3e5dc;
  --ink: #23120d;
  --muted: #735547;
  --line: rgba(177, 63, 35, .19);
  --panel: #fff5ed;
  --panel-2: #ead0bf;
  --accent: #b33d22;
  --accent-2: #b97935;
  --header-bg: rgba(243, 229, 220, .93);
}

html[data-styleworld="wald"][data-mode="light"] {
  --bg: #e9efdf;
  --ink: #172013;
  --muted: #59634f;
  --line: rgba(72, 111, 58, .18);
  --panel: #f8fbf1;
  --panel-2: #d7e0c7;
  --accent: #4f742e;
  --accent-2: #507866;
  --header-bg: rgba(233, 239, 223, .93);
}

html[data-styleworld="holz"][data-mode="light"] {
  --bg: #f1e5d4;
  --ink: #21150d;
  --muted: #6d5540;
  --line: rgba(125, 75, 37, .18);
  --panel: #fff7ea;
  --panel-2: #e4cdb0;
  --accent: #8d542d;
  --accent-2: #a57b4b;
  --header-bg: rgba(241, 229, 212, .93);
}

html[data-styleworld="sonnenuntergang"][data-mode="light"] {
  --bg: #fae9df;
  --ink: #27151b;
  --muted: #76555c;
  --line: rgba(190, 86, 91, .18);
  --panel: #fff6ef;
  --panel-2: #efd6cc;
  --accent: #c65a30;
  --accent-2: #a84b81;
  --header-bg: rgba(250, 233, 223, .93);
}

html[data-styleworld="gewitter"][data-mode="light"] {
  --bg: #e8ecf3;
  --ink: #111927;
  --muted: #566273;
  --line: rgba(60, 80, 125, .18);
  --panel: #f8f9fc;
  --panel-2: #dbe1ed;
  --accent: #405da6;
  --accent-2: #9d7a29;
  --header-bg: rgba(232, 236, 243, .93);
}

@media (prefers-color-scheme: light) {
  html[data-styleworld="editorial"][data-mode="auto"] {
    --bg: #eee6d7;
    --ink: #1c1913;
    --muted: #62594b;
    --soft: rgba(28, 25, 19, .72);
    --line: rgba(77, 62, 37, .14);
    --panel: #fbf5ea;
    --panel-2: #e5dac7;
    --accent: #8a6a36;
    --accent-2: #6e7b73;
    --header-bg: rgba(238, 230, 215, .94);
  }

  html[data-styleworld="atelier"][data-mode="auto"] {
    --bg: #f2e7dc;
    --ink: #241913;
    --muted: #6d5c50;
    --line: rgba(143, 88, 55, .16);
    --panel: #fff8ef;
    --panel-2: #e5d1bd;
    --accent: #8f5635;
    --accent-2: #82725b;
    --header-bg: rgba(242, 231, 220, .94);
  }

  html[data-styleworld="klartechnik"][data-mode="auto"] {
    --bg: #edf5f7;
    --ink: #10202a;
    --muted: #536972;
    --line: rgba(40, 103, 126, .18);
    --panel: #f8fcfd;
    --panel-2: #dfecef;
    --accent: #2f829c;
    --accent-2: #526f7a;
    --header-bg: rgba(237, 245, 247, .93);
  }

  html[data-styleworld="natur"][data-mode="auto"] {
    --bg: #f1eadb;
    --ink: #202115;
    --muted: #655f4c;
    --line: rgba(109, 125, 60, .18);
    --panel: #fff8eb;
    --panel-2: #e7dfc7;
    --accent: #687833;
    --accent-2: #9c6f34;
    --header-bg: rgba(241, 234, 219, .93);
  }


  html[data-styleworld="graustufen"][data-mode="auto"] {
    --bg: #eeece7;
    --ink: #141414;
    --muted: #5d5a54;
    --line: rgba(20, 20, 20, .13);
    --panel: #fbfaf7;
    --panel-2: #dcd9d1;
    --accent: #333333;
    --accent-2: #77736a;
    --header-bg: rgba(238, 236, 231, .94);
  }

  html[data-styleworld="ozean"][data-mode="auto"] {
    --bg: #e8f4f7;
    --ink: #0e2530;
    --muted: #526f78;
    --line: rgba(35, 109, 134, .17);
    --panel: #f7fcfd;
    --panel-2: #d7eaee;
    --accent: #227e9a;
    --accent-2: #8c743e;
    --header-bg: rgba(232, 244, 247, .93);
  }

  html[data-styleworld="sand"][data-mode="auto"] {
    --bg: #f4ead5;
    --ink: #21170d;
    --muted: #6e5b40;
    --line: rgba(145, 95, 37, .18);
    --panel: #fff7e6;
    --panel-2: #e8d4af;
    --accent: #9c6429;
    --accent-2: #c58a45;
    --header-bg: rgba(244, 234, 213, .93);
  }

  html[data-styleworld="vulkan"][data-mode="auto"] {
    --bg: #f3e5dc;
    --ink: #23120d;
    --muted: #735547;
    --line: rgba(177, 63, 35, .19);
    --panel: #fff5ed;
    --panel-2: #ead0bf;
    --accent: #b33d22;
    --accent-2: #b97935;
    --header-bg: rgba(243, 229, 220, .93);
  }

  html[data-styleworld="wald"][data-mode="auto"] {
    --bg: #e9efdf;
    --ink: #172013;
    --muted: #59634f;
    --line: rgba(72, 111, 58, .18);
    --panel: #f8fbf1;
    --panel-2: #d7e0c7;
    --accent: #4f742e;
    --accent-2: #507866;
    --header-bg: rgba(233, 239, 223, .93);
  }

  html[data-styleworld="holz"][data-mode="auto"] {
    --bg: #f1e5d4;
    --ink: #21150d;
    --muted: #6d5540;
    --line: rgba(125, 75, 37, .18);
    --panel: #fff7ea;
    --panel-2: #e4cdb0;
    --accent: #8d542d;
    --accent-2: #a57b4b;
    --header-bg: rgba(241, 229, 212, .93);
  }

  html[data-styleworld="sonnenuntergang"][data-mode="auto"] {
    --bg: #fae9df;
    --ink: #27151b;
    --muted: #76555c;
    --line: rgba(190, 86, 91, .18);
    --panel: #fff6ef;
    --panel-2: #efd6cc;
    --accent: #c65a30;
    --accent-2: #a84b81;
    --header-bg: rgba(250, 233, 223, .93);
  }

  html[data-styleworld="gewitter"][data-mode="auto"] {
    --bg: #e8ecf3;
    --ink: #111927;
    --muted: #566273;
    --line: rgba(60, 80, 125, .18);
    --panel: #f8f9fc;
    --panel-2: #dbe1ed;
    --accent: #405da6;
    --accent-2: #9d7a29;
    --header-bg: rgba(232, 236, 243, .93);
  }

  html[data-styleworld="ebenholz"][data-mode="auto"] {
    --bg: #f4eee6;
    --ink: #1f1813;
    --muted: #726457;
    --line: rgba(184, 146, 78, .16);
    --panel: #fffbf4;
    --panel-2: #eadfce;
    --accent: #997341;
    --accent-2: #8c7762;
    --header-bg: rgba(244, 238, 230, .93);
  }

  html[data-styleworld="nachtatelier"][data-mode="auto"] {
    --bg: #f2ebe9;
    --ink: #261b21;
    --muted: #79676f;
    --line: rgba(184, 121, 92, .16);
    --panel: #fff8f5;
    --panel-2: #ead8d2;
    --accent: #a96a50;
    --accent-2: #8d7781;
    --header-bg: rgba(242, 235, 233, .93);
  }

  html[data-styleworld="tintekalk"][data-mode="auto"] {
    --bg: #eef1f2;
    --ink: #17202a;
    --muted: #606a74;
    --line: rgba(111, 136, 159, .16);
    --panel: #fbfcfd;
    --panel-2: #dde4e8;
    --accent: #617e93;
    --accent-2: #8b99a2;
    --header-bg: rgba(238, 241, 242, .93);
  }

  html[data-styleworld="pfauenlicht"][data-mode="auto"] {
    --bg: #ebf2f1;
    --ink: #122126;
    --muted: #596e6b;
    --line: rgba(43, 141, 134, .16);
    --panel: #f7fbfb;
    --panel-2: #d7e4e2;
    --accent: #247b76;
    --accent-2: #71885c;
    --header-bg: rgba(235, 242, 241, .93);
  }

  html[data-styleworld="iriskupfer"][data-mode="auto"] {
    --bg: #f3edf1;
    --ink: #261a24;
    --muted: #786675;
    --line: rgba(191, 124, 98, .16);
    --panel: #fff8fb;
    --panel-2: #eadbe4;
    --accent: #b16f58;
    --accent-2: #927386;
    --header-bg: rgba(243, 237, 241, .93);
  }

  html[data-styleworld="polarlicht"][data-mode="auto"] {
    --bg: #edf4f8;
    --ink: #12202c;
    --muted: #5d7380;
    --line: rgba(102, 205, 209, .16);
    --panel: #f9fcfd;
    --panel-2: #dce9ee;
    --accent: #4caeb1;
    --accent-2: #7688c1;
    --header-bg: rgba(237, 244, 248, .93);
  }

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  background:
    radial-gradient(circle at 10% -4%, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 28rem),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0, transparent 30rem),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 16%, transparent), transparent 52rem),
    var(--bg);
  color: var(--ink);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.lightbox-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 16px 28px;
  min-height: var(--header-h);
  padding: 12px clamp(18px, 4.6vw, 64px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: grid;
  gap: 2px;
  justify-self: start;
  text-decoration: none;
}

.brand span,
.kicker {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.brand strong {
  max-width: 34ch;
  overflow: hidden;
  color: var(--ink);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

nav a,
.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 56%, transparent);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

nav a:hover,
.button:hover {
  border-color: color-mix(in srgb, var(--accent) 78%, transparent);
}

nav a.is-active,
nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--accent) 86%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--panel)), color-mix(in srgb, var(--accent-2) 12%, var(--panel)));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent),
    0 10px 34px color-mix(in srgb, var(--accent) 18%, transparent);
}

.button {
  margin-top: 18px;
  background: var(--accent);
  color: #171408;
  box-shadow: none;
}

.site-tools {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

.mode-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.mode-buttons button {
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .04em;
  cursor: pointer;
}

.mode-buttons button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--ink);
}

.hero-stage {
  position: relative;
  min-height: clamp(590px, calc(100svh - var(--header-h)), 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(70px, 7vw, 112px) clamp(24px, 7vw, 112px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  scroll-margin-top: 96px;
}

.hero-stage::before,
.hero-stage::after,
.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-stage::before {
  content: "";
  z-index: -1;
  inset: clamp(18px, 3vw, 46px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: clamp(18px, 3vw, 46px);
  opacity: .72;
  mask-image: linear-gradient(90deg, #000 0 64%, transparent 94%);
}

.hero-stage::after {
  content: "";
  z-index: -1;
  background:
    radial-gradient(circle at 22% 26%, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 18rem),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px 100%);
  background-size: auto, 144px 100%;
  opacity: .18;
  mix-blend-mode: screen;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: var(--hero-img-opacity);
  filter: saturate(1.03) contrast(1.04);
}

.hero-overlay {
  z-index: -3;
  background:
    linear-gradient(90deg, var(--hero-overlay-a) 0%, color-mix(in srgb, var(--hero-overlay-a) 76%, transparent) 36%, var(--hero-overlay-b) 70%, color-mix(in srgb, var(--hero-overlay-a) 44%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--hero-overlay-a) 48%, transparent) 0%, transparent 42%, var(--hero-overlay-c) 100%);
}

.hero-content {
  position: relative;
  width: min(900px, 100%);
  padding-left: clamp(0px, 2vw, 28px);
}

.hero-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  opacity: .78;
}

.hero-stage h1 {
  max-width: var(--hero-title-max);
  margin: 16px 0 24px;
  color: var(--ink);
  font-size: var(--hero-title-size);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-shadow: 0 22px 70px rgba(0, 0, 0, .48);
}

.lead,
.article-lead {
  max-width: 58ch;
  color: var(--soft);
  font-size: clamp(1.08rem, 1.45vw, 1.35rem);
  line-height: 1.62;
}

.stage {
  position: relative;
  width: var(--stage-width);
  margin: clamp(50px, 6.4vw, 88px) auto;
  padding: clamp(34px, 4.6vw, 68px);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 25rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
  box-shadow: var(--shadow);
  scroll-margin-top: 102px;
}

.stage h2 {
  max-width: 12ch;
  margin: 10px 0 24px;
  color: var(--ink);
  font-size: clamp(2.6rem, 4.6vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: -.038em;
}

.article-stage,
.cta-stage {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(280px, .52fr);
  gap: clamp(38px, 6vw, 88px);
  align-items: start;
}

.article-body {
  position: relative;
  z-index: 1;
  max-width: var(--copy-width);
}

.article-header {
  position: relative;
  margin-bottom: clamp(34px, 4.6vw, 62px);
  padding-bottom: clamp(22px, 2.8vw, 36px);
}

.article-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(380px, 78%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 18%, transparent), transparent);
  opacity: .72;
}

.article-header .kicker,
.gallery-intro .kicker,
.cta-copy .kicker {
  margin: 0 0 18px;
}

.article-header h2 {
  max-width: 9.5ch;
  margin-bottom: 24px;
  font-size: clamp(3rem, 5.2vw, 6rem);
}

.article-lead {
  max-width: 56ch;
  color: var(--ink);
}

.article-section {
  position: relative;
  margin-top: clamp(28px, 4vw, 54px);
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: calc(var(--radius) * .9);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--panel-2) 58%, transparent)),
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 18rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
    0 18px 50px rgba(0, 0, 0, .12);
}

.article-section:first-of-type {
  margin-top: 0;
}

.article-section::before {
  content: "";
  position: absolute;
  left: clamp(20px, 2.8vw, 34px);
  top: 0;
  width: clamp(54px, 8vw, 118px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 68%, transparent));
  transform: translateY(-50%);
}

.article-body h3 {
  max-width: 20ch;
  margin: 0 0 18px;
  color: var(--accent-2);
  font-size: clamp(1.52rem, 2vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -.018em;
}

.article-section p:last-child {
  margin-bottom: 0;
}

.article-body p {
  max-width: 64ch;
  margin: 0 0 1.12em;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.12vw, 1.16rem);
  line-height: 1.78;
}

blockquote {
  position: relative;
  margin: clamp(28px, 4.8vw, 50px) 0;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

blockquote p {
  color: var(--ink);
  font-size: clamp(1.18rem, 1.55vw, 1.46rem);
  line-height: 1.5;
}

cite {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-style: normal;
  font-weight: 760;
}

.article-side,
.cta-image {
  margin: 0;
}

.article-side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  height: fit-content;
  display: grid;
  gap: 16px;
  padding: clamp(10px, 1.4vw, 18px);
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: calc(var(--radius) * 1.05);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 68%, transparent), color-mix(in srgb, var(--panel-2) 34%, transparent));
}

.article-side img,
.cta-image img {
  width: 100%;
  max-height: min(620px, calc(100vh - var(--header-h) - 150px));
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
}

.article-side figcaption {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.5;
}

.gallery-stage {
  overflow: hidden;
}

.gallery-stage::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 2.6vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: calc(var(--radius-soft) * .82);
  pointer-events: none;
  mask-image: linear-gradient(115deg, #000 0 28%, transparent 72%);
  opacity: .72;
}

.gallery-stage > * {
  position: relative;
  z-index: 1;
}

.gallery-intro {
  display: grid;
  gap: 12px;
  margin-bottom: 30px;
}

.gallery-intro h2 {
  margin-bottom: 8px;
}

.gallery-intro p {
  max-width: 66ch;
  color: var(--muted);
  font-size: 1.1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  align-items: stretch;
}

.gallery-grid--single {
  max-width: min(640px, 100%);
  grid-template-columns: 1fr;
}

.gallery-grid--pair {
  max-width: min(940px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-card {
  position: relative;
  min-height: 260px;
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 18px 58px rgba(0, 0, 0, .2);
}

.gallery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .22)),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%);
  opacity: .5;
  transition: opacity .35s ease;
}

.gallery-card:hover::before {
  opacity: .28;
}

.gallery-card:nth-child(1) {
  min-height: clamp(360px, 34vw, 460px);
  grid-column: span 6;
  grid-row: span 2;
}

.gallery-card:nth-child(2) {
  grid-column: span 6;
}

.gallery-card:nth-child(3),
.gallery-card:nth-child(4),
.gallery-card:nth-child(5) {
  grid-column: span 4;
}

.gallery-card:nth-child(6),
.gallery-card:nth-child(7),
.gallery-card:nth-child(8),
.gallery-card:nth-child(9),
.gallery-card:nth-child(10) {
  grid-column: span 3;
  min-height: 220px;
}

.gallery-grid--single .gallery-card,
.gallery-grid--single .gallery-card:nth-child(1) {
  min-height: clamp(320px, 42vw, 500px);
  grid-column: auto;
  grid-row: auto;
}

.gallery-grid--pair .gallery-card,
.gallery-grid--pair .gallery-card:nth-child(1),
.gallery-grid--pair .gallery-card:nth-child(2) {
  min-height: clamp(280px, 30vw, 420px);
  grid-column: auto;
  grid-row: auto;
}

.gallery-open {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.gallery-open img {
  pointer-events: none;
}

.gallery-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.04);
}

.gallery-card figcaption {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: calc(var(--radius) * .75);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
}


.gallery-card figcaption strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.gallery-card figcaption p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .92rem;
}

.cta-stage {
  grid-template-columns: minmax(0, .9fr) minmax(260px, .5fr);
  align-items: center;
  overflow: hidden;
}

.cta-stage::before {
  content: "";
  position: absolute;
  inset: auto -8% -34% 42%;
  height: 76%;
  border-radius: 999px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  pointer-events: none;
}

.cta-copy,
.cta-image {
  position: relative;
  z-index: 1;
}

.cta-copy p {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.13rem;
}


html[data-composition="portrait"] .article-stage {
  grid-template-columns: minmax(250px, .48fr) minmax(0, 1fr);
  align-items: stretch;
}

html[data-composition="portrait"] .article-side {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  top: auto;
  min-height: 100%;
}

html[data-composition="portrait"] .article-side img {
  min-height: min(720px, calc(100svh - 120px));
  max-height: none;
  aspect-ratio: 3 / 5;
}

html[data-composition="portrait"] .article-body {
  grid-column: 2;
  max-width: 72ch;
}

html[data-composition="portrait"] .article-header h2 {
  max-width: 11.5ch;
}

html[data-composition="portrait"] .article-section {
  padding-left: clamp(30px, 4.2vw, 58px);
  border-left: 4px solid color-mix(in srgb, var(--accent) 58%, transparent);
}

html[data-composition="portrait"] .gallery-card:nth-child(1),
html[data-composition="portrait"] .gallery-card:nth-child(2) {
  grid-column: span 6;
  min-height: clamp(300px, 28vw, 430px);
}

html[data-composition="aufruf"] .article-stage {
  grid-template-columns: 1fr;
}

html[data-composition="aufruf"] .article-body {
  max-width: none;
}

html[data-composition="aufruf"] .article-header {
  max-width: min(820px, 100%);
}

html[data-composition="aufruf"] .article-header h2 {
  max-width: 13ch;
}

html[data-composition="aufruf"] .article-section {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

html[data-composition="aufruf"] .article-body h3 {
  margin-bottom: 0;
  color: var(--ink);
}

html[data-composition="aufruf"] .article-side {
  position: relative;
  top: auto;
  width: min(780px, 100%);
  justify-self: center;
}

html[data-composition="aufruf"] .article-side img {
  aspect-ratio: 16 / 9;
  max-height: none;
}

html[data-composition="aufruf"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card {
  grid-column: span 3;
  min-height: clamp(220px, 21vw, 320px);
}

html[data-composition="aufruf"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 3;
  grid-row: auto;
}

html[data-composition="bildfokus"] .article-stage {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

html[data-composition="bildfokus"] .article-side {
  order: -1;
  position: relative;
  top: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-composition="bildfokus"] .article-side img {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 8.4;
  border: 0;
  border-radius: 0;
}

html[data-composition="bildfokus"] .article-side figcaption {
  padding: 16px clamp(24px, 4vw, 54px) 0;
  border-top: 0;
}

html[data-composition="bildfokus"] .article-body {
  max-width: 78ch;
  padding: clamp(34px, 4.6vw, 68px);
}

html[data-composition="bildfokus"] .article-section {
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

html[data-composition="bildfokus"] .gallery-stage {
  width: min(1320px, calc(100% - 44px));
}

html[data-composition="bildfokus"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 7;
  min-height: clamp(430px, 40vw, 620px);
}

html[data-composition="bildfokus"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 5;
  min-height: clamp(300px, 28vw, 420px);
}

html[data-composition="bildfokus"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(n+3) {
  grid-column: span 4;
}

html[data-composition="dossier"] .article-section:nth-of-type(even) {
  transform: translateX(clamp(0px, 1.4vw, 18px));
}

@media (max-width: 880px) {
  html[data-composition="portrait"] .article-stage,
  html[data-composition="aufruf"] .article-stage,
  html[data-composition="bildfokus"] .article-stage {
    grid-template-columns: 1fr;
  }

  html[data-composition="portrait"] .article-side,
  html[data-composition="portrait"] .article-body {
    grid-column: auto;
    grid-row: auto;
  }

  html[data-composition="portrait"] .article-side img,
  html[data-composition="bildfokus"] .article-side img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  html[data-composition="aufruf"] .article-section {
    grid-template-columns: 1fr;
  }

  html[data-composition="aufruf"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card,
  html[data-composition="aufruf"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1),
  html[data-composition="bildfokus"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(n) {
    grid-column: 1 / -1;
  }
}

.lightbox[hidden] {
  display: none;
}

/* A70: Folgebühnen bleiben kontrolliert; die Abschlussbühne erhält zusätzlich einen eigenen Schlussauftritt.
   Die Hero-Startanimation bleibt unangetastet; es gibt keinen Klick-Exit und keine scrollgekoppelte Wegbewegung. */
html.effects-ready {
  --stage-motion-x: 0px;
  --stage-motion-y: clamp(18px, 3.2vw, 42px);
  --stage-motion-scale: .992;
  --stage-motion-blur: 7px;
  --stage-motion-duration: .78s;
  --stage-item-y: clamp(14px, 2.2vw, 28px);
  --stage-item-duration: .72s;
  --stage-image-scale: 1.028;
}

html.effects-ready[data-styleworld="magazinlinie"] {
  --stage-motion-y: clamp(14px, 2.2vw, 28px);
  --stage-motion-blur: 5px;
  --stage-motion-duration: .74s;
}

html.effects-ready[data-styleworld="menschennaehe"] {
  --stage-motion-y: clamp(16px, 2.8vw, 34px);
  --stage-motion-scale: .994;
  --stage-motion-blur: 6px;
  --stage-motion-duration: .82s;
  --stage-image-scale: 1.022;
}

html.effects-ready[data-styleworld="materialatelier"] {
  --stage-motion-y: clamp(24px, 3.8vw, 48px);
  --stage-motion-scale: .988;
  --stage-motion-duration: .84s;
  --stage-image-scale: 1.034;
}

html.effects-ready[data-styleworld="strukturblatt"] {
  --stage-motion-x: clamp(8px, 1.4vw, 18px);
  --stage-motion-y: clamp(10px, 1.8vw, 24px);
  --stage-motion-blur: 3px;
  --stage-motion-duration: .66s;
}

html.effects-ready[data-styleworld="ortslicht"] {
  --stage-motion-y: clamp(18px, 3vw, 38px);
  --stage-motion-blur: 8px;
  --stage-motion-duration: .86s;
  --stage-image-scale: 1.024;
}

html.effects-ready[data-styleworld="buehnenabend"] {
  --stage-motion-y: clamp(26px, 4vw, 52px);
  --stage-motion-scale: .986;
  --stage-motion-blur: 9px;
  --stage-motion-duration: .9s;
  --stage-image-scale: 1.036;
}

html.effects-ready[data-styleworld="dunkelsalon"] {
  --stage-motion-y: clamp(22px, 3.6vw, 46px);
  --stage-motion-scale: .988;
  --stage-motion-blur: 8px;
  --stage-motion-duration: .92s;
  --stage-image-scale: 1.03;
}

@keyframes profilsiteStageArrivalA69 {
  0% {
    opacity: .84;
    transform: translate3d(var(--stage-motion-x), var(--stage-motion-y), 0) scale(var(--stage-motion-scale));
    filter: blur(var(--stage-motion-blur)) saturate(.94) brightness(.96);
  }
  56% {
    opacity: 1;
    filter: blur(0) saturate(1.03) brightness(1.025);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }
}

@keyframes profilsiteMotionItemArrivalA69 {
  0% {
    opacity: .58;
    transform: translate3d(0, var(--stage-item-y), 0);
    filter: blur(calc(var(--stage-motion-blur) * .72));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}

@keyframes profilsiteMotionImageArrivalA69 {
  0% {
    scale: var(--stage-image-scale);
    filter: saturate(.92) brightness(.92);
  }
  100% {
    scale: 1;
    filter: none;
  }
}

html.effects-ready .motion-stage {
  opacity: .94;
  transform: translate3d(0, 0, 0);
  filter: none;
  will-change: opacity, transform, filter;
}

html.effects-ready .motion-stage:not(.is-motion-visible) {
  opacity: .9;
  transform: translate3d(var(--stage-motion-x), calc(var(--stage-motion-y) * .72), 0) scale(.998);
  filter: blur(2px) saturate(.97) brightness(.97);
}

html.effects-ready .motion-stage.is-motion-visible {
  animation: profilsiteStageArrivalA69 var(--stage-motion-duration) cubic-bezier(.16,.82,.18,1) both;
}

html.effects-ready .motion-stage [data-motion-item] {
  will-change: opacity, transform, filter;
}

html.effects-ready .motion-stage:not(.is-motion-visible) [data-motion-item] {
  opacity: .76;
  transform: translate3d(0, var(--stage-item-y), 0);
  filter: blur(2px);
}

html.effects-ready .motion-stage.is-motion-visible [data-motion-item] {
  animation: profilsiteMotionItemArrivalA69 var(--stage-item-duration) cubic-bezier(.16,.82,.18,1) both;
}

html.effects-ready .motion-stage.is-motion-visible [data-motion-item="intro"] {
  animation-delay: .04s;
}

html.effects-ready .motion-stage.is-motion-visible [data-motion-item="body"],
html.effects-ready .motion-stage.is-motion-visible [data-motion-item="closing"] {
  animation-delay: .08s;
}

html.effects-ready .motion-stage.is-motion-visible [data-motion-item="text"] {
  animation-delay: .14s;
}

html.effects-ready .motion-stage.is-motion-visible [data-motion-item="media"] {
  animation-delay: .18s;
}

html.effects-ready .motion-stage.is-motion-visible .gallery-card:nth-child(1),
html.effects-ready .motion-stage.is-motion-visible .seeportal-project-card:nth-child(1) {
  animation-delay: .1s;
}

html.effects-ready .motion-stage.is-motion-visible .gallery-card:nth-child(2),
html.effects-ready .motion-stage.is-motion-visible .seeportal-project-card:nth-child(2) {
  animation-delay: .18s;
}

html.effects-ready .motion-stage.is-motion-visible .gallery-card:nth-child(3),
html.effects-ready .motion-stage.is-motion-visible .seeportal-project-card:nth-child(3) {
  animation-delay: .26s;
}

html.effects-ready .motion-stage.is-motion-visible .gallery-card:nth-child(n+4),
html.effects-ready .motion-stage.is-motion-visible .seeportal-project-card:nth-child(n+4) {
  animation-delay: .32s;
}

html.effects-ready .motion-stage:not(.is-motion-visible) .article-side img,
html.effects-ready .motion-stage:not(.is-motion-visible) .gallery-card img,
html.effects-ready .motion-stage:not(.is-motion-visible) .seeportal-project-card img {
  scale: var(--stage-image-scale);
  filter: saturate(.92) brightness(.92);
}

html.effects-ready .motion-stage.is-motion-visible .article-side img,
html.effects-ready .motion-stage.is-motion-visible .gallery-card img,
html.effects-ready .motion-stage.is-motion-visible .seeportal-project-card img {
  animation: profilsiteMotionImageArrivalA69 .92s cubic-bezier(.16,.82,.18,1) both;
}

/* A70: Abschlussbühne bekommt einen eigenen, sichtbaren Schlussauftritt.
   Die Hero-Startanimation bleibt unverändert; der Effekt liegt nur auf #abschluss. */
@keyframes profilsiteFinaleBackdropA70 {
  0% { opacity: .82; transform: scale(1.012); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes profilsiteFinaleOverlayA70 {
  0% { opacity: .88; }
  54% { opacity: 1; }
  100% { opacity: .96; }
}

@keyframes profilsiteFinaleAtmosphereA70 {
  0% { opacity: .05; transform: translate3d(-5%, 0, 0) scaleX(.86); }
  52% { opacity: .34; }
  100% { opacity: .18; transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes profilsiteFinaleKickerA70 {
  0% { opacity: .35; transform: translate3d(0, 14px, 0); letter-spacing: .32em; }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes profilsiteFinaleTitleA70 {
  0% { opacity: .28; clip-path: inset(0 0 100% 0); transform: translate3d(0, 30px, 0); }
  62% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate3d(0, 0, 0); }
}

@keyframes profilsiteFinaleLeadA70 {
  0% { opacity: .18; transform: translate3d(0, 22px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes profilsiteFinaleReferencesA70 {
  0% { opacity: .18; transform: translate3d(0, 28px, 0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes profilsiteFinaleCardA70 {
  0% { opacity: .16; transform: translate3d(0, 24px, 0) scale(.974); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

html.effects-ready .motion-stage--closing,
html.effects-ready .motion-stage--closing:not(.is-motion-visible),
html.effects-ready .motion-stage--closing.is-motion-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

html.effects-ready .motion-stage--closing.is-motion-visible {
  animation: none;
}

html.effects-ready .motion-stage--closing:not(.is-motion-visible) .hero-bg--closing {
  opacity: .86;
  transform: scale(1.012);
}

html.effects-ready .motion-stage--closing.is-motion-visible .hero-bg--closing {
  animation: profilsiteFinaleBackdropA70 1.15s cubic-bezier(.18,.78,.18,1) both;
}

html.effects-ready .motion-stage--closing.is-motion-visible .hero-overlay--closing {
  animation: profilsiteFinaleOverlayA70 1.15s ease-out both;
}

html.effects-ready .motion-stage--closing::after {
  transform-origin: left center;
}

html.effects-ready .motion-stage--closing.is-motion-visible::after {
  animation: profilsiteFinaleAtmosphereA70 1.25s cubic-bezier(.18,.78,.18,1) both;
}

html.effects-ready .motion-stage--closing [data-motion-item] {
  will-change: opacity, transform, clip-path;
}

html.effects-ready .motion-stage--closing:not(.is-motion-visible) [data-motion-item] {
  opacity: .32;
  transform: translate3d(0, 18px, 0);
  filter: none;
}

html.effects-ready .motion-stage--closing:not(.is-motion-visible) [data-motion-item="closing-title"] {
  opacity: .26;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 30px, 0);
}

html.effects-ready .motion-stage--closing.is-motion-visible [data-motion-item] {
  filter: none;
}

html.effects-ready .motion-stage--closing.is-motion-visible [data-motion-item="closing-kicker"] {
  animation: profilsiteFinaleKickerA70 .58s cubic-bezier(.16,.82,.18,1) .08s both;
}

html.effects-ready .motion-stage--closing.is-motion-visible [data-motion-item="closing-title"] {
  animation: profilsiteFinaleTitleA70 .82s cubic-bezier(.16,.82,.18,1) .16s both;
}

html.effects-ready .motion-stage--closing.is-motion-visible [data-motion-item="closing-lead"] {
  animation: profilsiteFinaleLeadA70 .68s cubic-bezier(.16,.82,.18,1) .36s both;
}

html.effects-ready .motion-stage--closing.is-motion-visible [data-motion-item="closing-references"] {
  animation: profilsiteFinaleReferencesA70 .78s cubic-bezier(.16,.82,.18,1) .5s both;
}

html.effects-ready .motion-stage--closing.is-motion-visible .seeportal-project-card {
  animation-name: profilsiteFinaleCardA70;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 44px);
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(18px);
}

.lightbox-panel {
  width: min(900px, calc(100% - 56px));
  max-height: calc(100svh - 48px);
  display: grid;
  gap: 12px;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  box-shadow: 0 28px 110px rgba(0, 0, 0, .6);
}

.lightbox-panel figure {
  margin: 0;
  display: grid;
  gap: 12px;
}

.lightbox-panel img {
  width: auto;
  max-width: 100%;
  max-height: min(58svh, 540px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: calc(var(--radius) * .72);
  background: #050605;
}

.lightbox-panel figcaption {
  min-height: 1.4em;
  color: var(--muted);
  font-size: .96rem;
}

.lightbox-close,
.lightbox-controls button {
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 850;
  cursor: pointer;
}

.lightbox-close {
  justify-self: end;
}

.lightbox-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.lightbox-controls span {
  color: var(--muted);
  font-weight: 850;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 32px clamp(18px, 4.6vw, 64px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}

html[data-styleworld="editorial"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 12%, transparent), transparent 42rem),
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0, transparent 30rem),
    var(--bg);
}

html[data-styleworld="editorial"] .stage {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 80%, transparent), color-mix(in srgb, var(--panel) 98%, transparent)),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 26rem);
}

html[data-styleworld="editorial"] .article-body p {
  font-size: clamp(1.06rem, 1.18vw, 1.2rem);
}

html[data-styleworld="editorial"] .gallery-card:first-child figcaption {
  left: 20px;
  right: auto;
  width: min(360px, calc(100% - 40px));
}

html[data-styleworld="editorial"] .article-section {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--panel-2) 60%, transparent));
}

html[data-styleworld="editorial"] .article-section::before {
  width: clamp(72px, 10vw, 160px);
}

html[data-styleworld="atelier"] body {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 30rem),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0, transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 16%, transparent), transparent 46rem),
    var(--bg);
}

html[data-styleworld="atelier"] .site-header {
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

html[data-styleworld="atelier"] .hero-stage::after {
  background:
    radial-gradient(circle at 18% 32%, color-mix(in srgb, var(--accent) 20%, transparent) 0, transparent 19rem),
    radial-gradient(circle at 72% 24%, color-mix(in srgb, var(--accent-2) 15%, transparent) 0, transparent 24rem),
    linear-gradient(125deg, transparent 0 38%, color-mix(in srgb, var(--accent) 7%, transparent) 38% 39%, transparent 39% 100%);
  opacity: .42;
}

html[data-styleworld="atelier"] .stage {
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 25rem),
    radial-gradient(circle at 94% 6%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 94%, transparent), color-mix(in srgb, var(--panel) 97%, transparent));
}

html[data-styleworld="atelier"] blockquote {
  border-left-width: 0;
  border-radius: var(--radius-soft);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 17rem),
    color-mix(in srgb, var(--panel-2) 72%, transparent);
}

html[data-styleworld="atelier"] .article-side img,
html[data-styleworld="atelier"] .cta-image img {
  border-radius: var(--radius-soft);
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--pair):not(.gallery-grid--single) .gallery-card:nth-child(3n+2) {
  transform: translateY(18px);
}

html[data-styleworld="atelier"] .gallery-card figcaption {
  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
}

html[data-styleworld="atelier"] .article-section {
  background:
    radial-gradient(circle at 4% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 14rem),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 74%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
}

html[data-styleworld="atelier"] .article-header::after,
html[data-styleworld="atelier"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="klartechnik"] body {
  background:
    linear-gradient(90deg, rgba(141, 198, 216, .05) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(141, 198, 216, .04) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 34rem),
    var(--bg);
  background-size: 96px 96px, 96px 96px, auto, auto;
}

html[data-styleworld="klartechnik"] .site-header,
html[data-styleworld="klartechnik"] .stage,
html[data-styleworld="klartechnik"] .gallery-card,
html[data-styleworld="klartechnik"] blockquote,
html[data-styleworld="klartechnik"] .article-side img,
html[data-styleworld="klartechnik"] .cta-image img,
html[data-styleworld="klartechnik"] .lightbox-panel {
  border-radius: var(--radius);
}

html[data-styleworld="klartechnik"] .hero-stage::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, transparent 0 48%, color-mix(in srgb, var(--accent) 16%, transparent) 48% 49%, transparent 49% 100%);
  background-size: 112px 112px, 112px 112px, auto;
  opacity: .22;
}

html[data-styleworld="klartechnik"] .stage {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
  background-size: 72px 72px, 72px 72px, auto;
}

html[data-styleworld="klartechnik"] .kicker,
html[data-styleworld="klartechnik"] nav a,
html[data-styleworld="klartechnik"] .mode-buttons button {
  letter-spacing: .18em;
}

html[data-styleworld="klartechnik"] nav a,
html[data-styleworld="klartechnik"] .mode-buttons button {
  border-radius: var(--radius);
}

html[data-styleworld="klartechnik"] .gallery-card figcaption {
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

html[data-styleworld="klartechnik"] .article-section {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 84%, transparent), color-mix(in srgb, var(--panel-2) 64%, transparent));
  background-size: 46px 46px, 46px 46px, auto;
}

html[data-styleworld="klartechnik"] .article-section::before {
  height: 2px;
  border-radius: 0;
}

html[data-styleworld="natur"] body {
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 32rem),
    radial-gradient(ellipse at 94% 10%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0, transparent 36rem),
    linear-gradient(180deg, color-mix(in srgb, #24341b 20%, transparent), transparent 44rem),
    var(--bg);
}

html[data-styleworld="natur"] .hero-bg,
html[data-styleworld="natur"] .article-side img,
html[data-styleworld="natur"] .cta-image img,
html[data-styleworld="natur"] .gallery-card img {
  filter: saturate(1.06) contrast(1.02) sepia(.05);
}

html[data-styleworld="natur"] .hero-stage::after {
  background:
    radial-gradient(ellipse at 18% 36%, color-mix(in srgb, var(--accent) 19%, transparent) 0, transparent 22rem),
    radial-gradient(ellipse at 88% 22%, color-mix(in srgb, var(--accent-2) 15%, transparent) 0, transparent 28rem),
    linear-gradient(145deg, transparent 0 62%, color-mix(in srgb, var(--accent) 8%, transparent) 62% 64%, transparent 64% 100%);
  opacity: .4;
}

html[data-styleworld="natur"] .stage {
  background:
    radial-gradient(ellipse at 16% 8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 26rem),
    radial-gradient(ellipse at 96% 16%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 92%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="natur"] blockquote {
  border-left-color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

html[data-styleworld="natur"] .article-side img,
html[data-styleworld="natur"] .cta-image img,
html[data-styleworld="natur"] .gallery-card {
  border-radius: var(--radius-soft);
}

html[data-styleworld="natur"] .article-section {
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 76%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
}

html[data-styleworld="natur"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="graustufen"] body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 9%, transparent) 0, transparent 34rem),
    var(--bg);
  background-size: 118px 100%, auto, auto;
}

html[data-styleworld="graustufen"] .hero-bg,
html[data-styleworld="graustufen"] .article-side img,
html[data-styleworld="graustufen"] .cta-image img,
html[data-styleworld="graustufen"] .gallery-card img {
  filter: saturate(1.02) contrast(1.04);
}

html[data-styleworld="graustufen"] .stage,
html[data-styleworld="graustufen"] .article-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 78%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
}

html[data-styleworld="graustufen"] .article-header::after,
html[data-styleworld="graustufen"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 50%, transparent), transparent);
}

html[data-styleworld="ozean"] body {
  background:
    radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--accent) 17%, transparent) 0, transparent 36rem),
    radial-gradient(ellipse at 8% 18%, color-mix(in srgb, #0d5370 26%, transparent) 0, transparent 34rem),
    var(--bg);
}

html[data-styleworld="ozean"] .hero-stage::after,
html[data-styleworld="ozean"] .stage {
  background-image:
    radial-gradient(ellipse at 20% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 90%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="ozean"] .gallery-card,
html[data-styleworld="ozean"] .article-side img,
html[data-styleworld="ozean"] .cta-image img {
  border-radius: var(--radius-soft) var(--radius) var(--radius-soft) var(--radius);
}

html[data-styleworld="ozean"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 70%, transparent), transparent);
}

html[data-styleworld="sand"] body {
  background:
    linear-gradient(165deg, transparent 0 36%, color-mix(in srgb, var(--accent) 7%, transparent) 36% 37%, transparent 37% 100%),
    radial-gradient(ellipse at 76% 0%, color-mix(in srgb, var(--accent) 18%, transparent) 0, transparent 34rem),
    var(--bg);
}

html[data-styleworld="sand"] .stage,
html[data-styleworld="sand"] .article-section {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 86%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
  background-size: 100% 82px, auto;
}

html[data-styleworld="sand"] .gallery-grid:not(.gallery-grid--pair):not(.gallery-grid--single) .gallery-card:nth-child(4n+3) {
  transform: translateY(14px);
}

html[data-styleworld="sand"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="vulkan"] body {
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 32rem),
    radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--accent-2) 14%, transparent) 0, transparent 36rem),
    var(--bg);
}

html[data-styleworld="vulkan"] .stage,
html[data-styleworld="vulkan"] .article-section,
html[data-styleworld="vulkan"] .gallery-card figcaption {
  background:
    radial-gradient(circle at 95% 4%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 85%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="vulkan"] .hero-stage::after {
  background:
    radial-gradient(circle at 72% 28%, color-mix(in srgb, var(--accent) 30%, transparent) 0, transparent 18rem),
    linear-gradient(135deg, transparent 0 58%, color-mix(in srgb, var(--accent-2) 10%, transparent) 58% 60%, transparent 60% 100%);
  opacity: .44;
}

html[data-styleworld="vulkan"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="wald"] body {
  background:
    radial-gradient(ellipse at 8% 8%, color-mix(in srgb, var(--accent) 15%, transparent) 0, transparent 34rem),
    radial-gradient(ellipse at 84% 18%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0, transparent 38rem),
    var(--bg);
}

html[data-styleworld="wald"] .hero-bg,
html[data-styleworld="wald"] .article-side img,
html[data-styleworld="wald"] .cta-image img,
html[data-styleworld="wald"] .gallery-card img {
  filter: saturate(1.05) contrast(1.04) sepia(.08);
}

html[data-styleworld="wald"] .stage,
html[data-styleworld="wald"] .article-section {
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 22rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 86%, transparent), color-mix(in srgb, var(--panel) 97%, transparent));
}

html[data-styleworld="wald"] .article-side img,
html[data-styleworld="wald"] .cta-image img,
html[data-styleworld="wald"] .gallery-card {
  border-radius: var(--radius-soft);
}

html[data-styleworld="wald"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="holz"] body {
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 0 1px, transparent 1px 34px),
    radial-gradient(ellipse at 82% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34rem),
    var(--bg);
}

html[data-styleworld="holz"] .stage,
html[data-styleworld="holz"] .article-section,
html[data-styleworld="holz"] blockquote {
  background:
    repeating-linear-gradient(105deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 20px),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="holz"] .article-side img,
html[data-styleworld="holz"] .cta-image img,
html[data-styleworld="holz"] .gallery-card {
  border-radius: var(--radius) var(--radius-soft);
}

html[data-styleworld="holz"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

html[data-styleworld="sonnenuntergang"] body {
  background:
    radial-gradient(ellipse at 72% -6%, rgba(255, 174, 84, .34), transparent 32rem),
    radial-gradient(ellipse at 20% 4%, rgba(198, 102, 216, .24), transparent 30rem),
    linear-gradient(180deg, rgba(84, 28, 54, .36), transparent 48rem),
    var(--bg);
}

html[data-styleworld="sonnenuntergang"] .hero-stage::after {
  background:
    radial-gradient(ellipse at 62% 28%, rgba(255, 174, 84, .34), transparent 22rem),
    radial-gradient(ellipse at 88% 10%, rgba(198, 102, 216, .24), transparent 28rem),
    linear-gradient(12deg, transparent 0 54%, rgba(255, 174, 84, .13) 54% 56%, transparent 56% 100%);
  opacity: .58;
}

html[data-styleworld="sonnenuntergang"] .stage,
html[data-styleworld="sonnenuntergang"] .article-section {
  background:
    radial-gradient(ellipse at 8% 4%, rgba(255, 174, 84, .2), transparent 21rem),
    radial-gradient(ellipse at 100% 0%, rgba(198, 102, 216, .17), transparent 28rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="sonnenuntergang"] .gallery-card {
  box-shadow:
    0 24px 86px rgba(115, 45, 16, .32),
    0 0 0 1px rgba(255, 174, 84, .14);
}

html[data-styleworld="sonnenuntergang"] .gallery-card figcaption,
html[data-styleworld="sonnenuntergang"] blockquote {
  background:
    linear-gradient(135deg, rgba(64, 25, 43, .86), rgba(34, 14, 25, .92));
}

html[data-styleworld="sonnenuntergang"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), #ff744f, var(--accent-2), transparent);
}

html[data-styleworld="gewitter"] body {
  background:
    linear-gradient(115deg, transparent 0 58%, color-mix(in srgb, var(--accent) 10%, transparent) 58% 59%, transparent 59% 100%),
    radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 35rem),
    var(--bg);
}

html[data-styleworld="gewitter"] .hero-stage::after {
  background:
    linear-gradient(118deg, transparent 0 50%, color-mix(in srgb, var(--accent) 24%, transparent) 50% 50.5%, transparent 50.5% 100%),
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 21rem);
  opacity: .38;
}

html[data-styleworld="gewitter"] .stage,
html[data-styleworld="gewitter"] .article-section,
html[data-styleworld="gewitter"] .gallery-card figcaption {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 86%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="gewitter"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}


.article-stage::before,
.gallery-stage::after,
.cta-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.article-stage::before {
  inset: clamp(16px, 2.4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: calc(var(--radius-soft) * .78);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 24rem),
    radial-gradient(circle at 96% 84%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 22rem);
  background-size: 94px 100%, auto, auto;
  opacity: .68;
  mask-image: linear-gradient(90deg, #000 0 54%, transparent 94%);
}

.article-body,
.gallery-stage > *,
.cta-stage > * {
  position: relative;
  z-index: 1;
}

.article-side {
  z-index: 1;
}

.article-header {
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: calc(var(--radius) * 1.12);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bg) 46%, transparent), color-mix(in srgb, var(--panel-2) 58%, transparent)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 20rem);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}

.article-header::before {
  content: "";
  position: absolute;
  right: clamp(22px, 4vw, 54px);
  top: clamp(22px, 3vw, 38px);
  width: clamp(74px, 9vw, 136px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: .72;
}

.article-section {
  padding-left: clamp(28px, 3.8vw, 52px);
}

.article-section:nth-of-type(even) {
  transform: translateX(clamp(0px, 1.2vw, 18px));
  background:
    radial-gradient(circle at 0% 12%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 68%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
}

.article-section h3::after {
  content: "";
  display: block;
  width: clamp(42px, 6vw, 96px);
  height: 2px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent) 40%, transparent));
}

.article-side {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .22),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.article-side::before,
.cta-image::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: calc(var(--radius) * 1.4);
  background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%);
  opacity: .86;
  pointer-events: none;
}

.gallery-stage::after {
  right: clamp(28px, 5vw, 74px);
  top: clamp(42px, 6vw, 96px);
  width: clamp(120px, 17vw, 240px);
  height: clamp(120px, 17vw, 240px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%);
  opacity: .72;
}

.gallery-card {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  box-shadow:
    0 22px 70px rgba(0, 0, 0, .24),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.gallery-card:nth-child(4n+1) {
  border-radius: calc(var(--radius) * 1.18);
}

.gallery-card:nth-child(4n+2) {
  border-radius: calc(var(--radius) * .82);
}

.gallery-card figcaption {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

.cta-stage {
  background:
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 27rem),
    radial-gradient(circle at 10% 92%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 94%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
}

.cta-stage::after {
  inset: clamp(18px, 2.8vw, 40px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: calc(var(--radius-soft) * .75);
  mask-image: linear-gradient(135deg, transparent 0 36%, #000 58% 100%);
}

.cta-copy h2 {
  max-width: 9ch;
}

html[data-styleworld="editorial"] .article-stage::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 24rem);
  background-size: 128px 100%, auto;
}

html[data-styleworld="atelier"] .article-section:nth-of-type(even) {
  transform: translateX(clamp(0px, 1.8vw, 30px)) rotate(-.35deg);
}

html[data-styleworld="atelier"] .article-section:nth-of-type(odd) {
  transform: rotate(.18deg);
}

html[data-styleworld="klartechnik"] .article-header,
html[data-styleworld="klartechnik"] .article-section {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 13%, transparent),
    0 18px 58px rgba(0, 0, 0, .18);
}

html[data-styleworld="klartechnik"] .article-header::before {
  height: 2px;
  background: var(--accent);
}

html[data-styleworld="natur"] .article-stage::before {
  background:
    radial-gradient(ellipse at 18% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 25rem),
    radial-gradient(ellipse at 94% 84%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 24rem);
}

html[data-mode="light"] .article-header,
html[data-mode="light"] .article-section,
html[data-mode="light"] .gallery-card figcaption {
  background-color: color-mix(in srgb, var(--panel) 88%, white 12%);
}

@media (prefers-color-scheme: light) {
  html[data-mode="auto"] .article-header,
  html[data-mode="auto"] .article-section,
  html[data-mode="auto"] .gallery-card figcaption {
    background-color: color-mix(in srgb, var(--panel) 88%, white 12%);
  }
}

html[data-mode="light"] .hero-stage::after {
  mix-blend-mode: multiply;
  opacity: .1;
}

@media (prefers-color-scheme: light) {
  html[data-mode="auto"] .hero-stage::after {
    mix-blend-mode: multiply;
    opacity: .1;
  }
}

.site-header {
  background: rgba(10, 12, 13, .92);
  border-bottom-color: rgba(247, 239, 226, .15);
  color: #f7efe2;
}

.site-header .brand strong,
.site-header nav a,
.site-header .mode-buttons button {
  color: #f7efe2;
}

.site-header nav a {
  background: rgba(20, 22, 22, .72);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

.site-header nav a.is-active,
.site-header nav a[aria-current="page"] {
  color: #fff3df;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, #141616), color-mix(in srgb, var(--accent-2) 12%, #141616));
}

.site-header .mode-buttons button {
  background: rgba(20, 22, 22, .78);
  border-color: rgba(247, 239, 226, .16);
}

.site-header .mode-buttons button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 22%, #141616);
  border-color: color-mix(in srgb, var(--accent) 68%, transparent);
}

html[data-mode="light"] .hero-stage,
html[data-mode="auto"] .hero-stage {
  background: #0c0f10;
  border-bottom-color: rgba(247, 239, 226, .13);
  color: #f7efe2;
}

html[data-mode="light"] .hero-stage h1,
html[data-mode="auto"] .hero-stage h1,
html[data-mode="light"] .hero-stage .lead,
html[data-mode="auto"] .hero-stage .lead {
  color: #f7efe2;
}

html[data-mode="light"] .hero-stage .lead,
html[data-mode="auto"] .hero-stage .lead {
  color: rgba(247, 239, 226, .78);
}

html[data-mode="light"] .hero-overlay,
html[data-mode="auto"] .hero-overlay {
  background:
    linear-gradient(90deg, rgba(12, 15, 16, .95) 0%, rgba(12, 15, 16, .7) 36%, rgba(12, 15, 16, .24) 70%, rgba(12, 15, 16, .68) 100%),
    linear-gradient(180deg, rgba(12, 15, 16, .56) 0%, transparent 42%, rgba(12, 15, 16, .88) 100%);
}

html[data-mode="light"] .hero-stage::after,
html[data-mode="auto"] .hero-stage::after {
  mix-blend-mode: screen;
  opacity: .2;
}

html[data-mode="light"] .hero-bg,
html[data-mode="auto"] .hero-bg {
  opacity: .84;
}

/* A68: Nach dem Hero keine Folgebühnen- oder Klickanimationen mehr.
   effects-ready bleibt nur als Schalter für die Hero-Startanimation erhalten. */
html.effects-ready {
  --hero-sweep-opacity: .2;
  --hero-title-rise: 34px;
  --hero-intro-scale: 1.018;
  --hero-rest-scale: 1.008;
}

html.effects-ready[data-styleworld="magazinlinie"] {
  --hero-sweep-opacity: .16;
  --hero-intro-scale: 1.016;
  --hero-rest-scale: 1.008;
}

html.effects-ready[data-styleworld="menschennaehe"] {
  --hero-sweep-opacity: .18;
  --hero-intro-scale: 1.018;
  --hero-rest-scale: 1.008;
}

html.effects-ready[data-styleworld="materialatelier"] {
  --hero-sweep-opacity: .12;
  --hero-intro-scale: 1.02;
  --hero-rest-scale: 1.01;
}

html.effects-ready[data-styleworld="strukturblatt"] {
  --hero-sweep-opacity: .1;
  --hero-title-rise: 24px;
  --hero-intro-scale: 1.014;
  --hero-rest-scale: 1.006;
}

html.effects-ready[data-styleworld="ortslicht"] {
  --hero-sweep-opacity: .25;
  --hero-intro-scale: 1.018;
  --hero-rest-scale: 1.009;
}

html.effects-ready[data-styleworld="buehnenabend"] {
  --hero-sweep-opacity: .28;
  --hero-title-rise: 42px;
  --hero-intro-scale: 1.02;
  --hero-rest-scale: 1.01;
}

html.effects-ready[data-styleworld="dunkelsalon"] {
  --hero-sweep-opacity: .22;
  --hero-intro-scale: 1.018;
  --hero-rest-scale: 1.009;
}

.hero-bg,
.hero-content {
  will-change: transform;
}

@keyframes profilsiteHeroImageOpening {
  0% {
    opacity: .52;
    filter: saturate(.88) contrast(.94) brightness(.78) blur(10px);
    transform: scale(var(--hero-intro-scale, 1.018));
    clip-path: inset(0 0 0 0);
  }
  54% {
    opacity: calc(var(--hero-img-opacity) + .035);
    filter: saturate(1.05) contrast(1.05) brightness(1.02) blur(0);
    transform: scale(var(--hero-rest-scale, 1.008));
  }
  100% {
    opacity: var(--hero-img-opacity);
    filter: saturate(1.03) contrast(1.04) brightness(1) blur(0);
    transform: scale(var(--hero-rest-scale, 1.008));
    clip-path: inset(0 0 0 0);
  }
}

@keyframes profilsiteHeroTextOpening {
  0% {
    opacity: 0;
    translate: 0 24px;
    filter: blur(9px);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

@keyframes profilsiteHeroLineOpening {
  0% {
    opacity: 0;
    scale: 1 .2;
  }
  100% {
    opacity: .78;
    scale: 1 1;
  }
}

#start .hero-bg {
  transform-origin: center;
  transform: scale(var(--hero-rest-scale, 1.008));
  animation: profilsiteHeroImageOpening 1.24s cubic-bezier(.18,.78,.18,1) both;
  transition:
    transform .72s cubic-bezier(.2,.72,.18,1),
    opacity .58s ease,
    filter .58s ease;
}

#start .hero-content::before {
  transform-origin: 50% 50%;
  animation: profilsiteHeroLineOpening .92s cubic-bezier(.16,.82,.18,1) .18s both;
}

#start .hero-content > * {
  opacity: 0;
  animation: profilsiteHeroTextOpening .86s cubic-bezier(.16,.82,.18,1) var(--hero-intro-delay, .22s) both;
  transition:
    opacity .52s ease,
    translate .52s ease,
    filter .52s ease;
}

#start .hero-content .kicker {
  --hero-intro-delay: .16s;
}

#start .hero-content h1 {
  --hero-intro-delay: .28s;
}

#start .hero-content .lead {
  --hero-intro-delay: .44s;
}


html.hero-open-complete #start .hero-bg,
html.hero-open-complete #start .hero-content > * {
  animation: none;
}

html.hero-open-complete #start .hero-content > * {
  opacity: 1;
  translate: 0 0;
  filter: none;
}



/* A68: Hero-Auftritt bleibt, alle Restanimationen nach dem Hero sind entfernt. */
@keyframes profilsiteHeroStageOpening {
  0% {
    opacity: .1;
    transform: scale(.985);
  }
  100% {
    opacity: .72;
    transform: scale(1);
  }
}

@keyframes profilsiteHeroFocusSweep {
  0% {
    opacity: 0;
    transform: translate3d(-34%, 0, 0) skewX(-10deg);
  }
  38% {
    opacity: var(--hero-sweep-opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(36%, 0, 0) skewX(-10deg);
  }
}

@keyframes profilsiteHeroOverlayOpeningA67 {
  0% {
    opacity: .74;
    filter: brightness(.82) saturate(.92);
  }
  56% {
    opacity: 1;
    filter: brightness(1.06) saturate(1.04);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@keyframes profilsiteHeroTitleOpeningA66 {
  0% {
    opacity: 0;
    translate: 0 var(--hero-title-rise);
    filter: blur(14px);
    clip-path: inset(0 0 100% 0);
    letter-spacing: -.015em;
  }
  66% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    filter: none;
    clip-path: inset(0 0 0 0);
    letter-spacing: -.045em;
  }
}

@keyframes profilsiteHeroLeadOpeningA66 {
  0% {
    opacity: 0;
    translate: 0 22px;
    filter: blur(8px);
    clip-path: inset(22% 0 0 0);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    filter: none;
    clip-path: inset(0 0 0 0);
  }
}

#start::before {
  animation: profilsiteHeroStageOpening 1.18s cubic-bezier(.16,.82,.18,1) .05s both;
}

#start .hero-overlay {
  animation: profilsiteHeroOverlayOpeningA67 1.36s cubic-bezier(.18,.78,.18,1) both;
}

#start .hero-content::after {
  content: "";
  position: absolute;
  left: clamp(-18px, -1.4vw, -8px);
  right: clamp(20%, 36vw, 42%);
  top: -18%;
  bottom: -16%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--accent) 34%, transparent) 48%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(20px);
  animation: profilsiteHeroFocusSweep 1.45s cubic-bezier(.16,.82,.18,1) .32s both;
}

#start .hero-content h1 {
  animation-name: profilsiteHeroTitleOpeningA66;
  animation-duration: 1.02s;
  animation-timing-function: cubic-bezier(.14,.86,.16,1);
}

#start .hero-content .lead {
  animation-name: profilsiteHeroLeadOpeningA66;
  animation-duration: .92s;
  animation-timing-function: cubic-bezier(.16,.82,.18,1);
}

html.hero-open-complete #start .hero-content::after,
html.motion-reduced #start .hero-content::after {
  animation: none;
  opacity: 0;
}

html.hero-open-complete #start::before,
html.hero-open-complete #start .hero-overlay,
html.motion-reduced #start .hero-overlay {
  animation: none;
}

.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-panel {
  transform: translateY(16px) scale(.985);
  transition: transform .22s ease;
}

.lightbox.is-open .lightbox-panel {
  transform: translateY(0) scale(1);
}

html[data-styleworld="graustufen"] .stage,
html[data-styleworld="graustufen"] .article-section,
html[data-styleworld="graustufen"] .gallery-card figcaption {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 82%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
}

html[data-styleworld="graustufen"] .gallery-card {
  border-color: rgba(255, 255, 255, .2);
}

html[data-styleworld="ozean"] .hero-stage::after {
  background:
    radial-gradient(ellipse at 74% 16%, rgba(94, 193, 216, .22), transparent 28rem),
    repeating-linear-gradient(172deg, rgba(94, 193, 216, .08) 0 1px, transparent 1px 32px);
  opacity: .46;
}

html[data-styleworld="ozean"] .gallery-card:nth-child(odd) {
  transform: translateY(12px);
}

html[data-styleworld="sand"] .hero-stage::after {
  background:
    radial-gradient(ellipse at 76% 12%, rgba(224, 176, 96, .22), transparent 26rem),
    repeating-linear-gradient(166deg, rgba(224, 176, 96, .08) 0 1px, transparent 1px 54px);
  opacity: .42;
}

html[data-styleworld="vulkan"] .article-stage::before,
html[data-styleworld="vulkan"] .gallery-stage::after,
html[data-styleworld="vulkan"] .cta-stage::after {
  filter: saturate(1.18);
}

html[data-styleworld="vulkan"] .hero-stage::before {
  border-color: rgba(240, 96, 53, .42);
  box-shadow: 0 0 70px rgba(240, 96, 53, .12);
}

html[data-styleworld="wald"] .hero-stage::after {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(159, 190, 114, .2), transparent 24rem),
    repeating-linear-gradient(88deg, rgba(159, 190, 114, .05) 0 1px, transparent 1px 44px);
  opacity: .38;
}

html[data-styleworld="holz"] .hero-stage::after,
html[data-styleworld="holz"] .gallery-stage::before {
  background:
    repeating-linear-gradient(104deg, rgba(201, 138, 82, .09) 0 1px, transparent 1px 18px),
    radial-gradient(ellipse at 78% 12%, rgba(201, 138, 82, .18), transparent 26rem);
}

html[data-styleworld="gewitter"] .site-header,
html[data-styleworld="gewitter"] .stage {
  box-shadow:
    0 22px 90px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(142, 168, 255, .07);
}

html[data-styleworld="gewitter"] .hero-stage::before {
  border-color: rgba(142, 168, 255, .28);
}



html[data-styleworld] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--world-texture-opacity, .18);
  background: var(--world-texture, transparent);
  mix-blend-mode: var(--world-texture-blend, screen);
}

html[data-styleworld="editorial"] {
  --world-texture-opacity: .12;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.035) 12% 12.1%, transparent 12.1% 100%),
    linear-gradient(180deg, transparent 0 17%, rgba(255,255,255,.025) 17% 17.1%, transparent 17.1% 100%);
}

html[data-styleworld="editorial"] .hero-content {
  width: min(760px, 100%);
}

html[data-styleworld="editorial"] .article-stage {
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, .44fr);
}

html[data-styleworld="editorial"] .article-header {
  border-top: 4px double color-mix(in srgb, var(--accent) 42%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

html[data-styleworld="editorial"] .article-section {
  border-left: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

html[data-styleworld="editorial"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 7;
}

html[data-styleworld="editorial"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 5;
  min-height: 300px;
}

html[data-styleworld="editorial"] .lightbox-panel {
  border-radius: 4px;
}

html[data-styleworld="atelier"] {
  --world-texture-opacity: .24;
  --world-texture:
    radial-gradient(circle at 9% 18%, rgba(189,116,72,.20), transparent 14rem),
    radial-gradient(circle at 90% 20%, rgba(169,150,121,.13), transparent 20rem),
    linear-gradient(128deg, transparent 0 43%, rgba(255,255,255,.035) 43% 44%, transparent 44% 100%);
}

html[data-styleworld="atelier"] .hero-content {
  rotate: -.35deg;
  padding: clamp(18px, 2.8vw, 34px);
  border-radius: var(--radius-soft);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 42%, transparent), transparent);
}

html[data-styleworld="atelier"] .stage {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 16%, var(--line));
}

html[data-styleworld="atelier"] .article-stage {
  grid-template-columns: minmax(0, .92fr) minmax(280px, .58fr);
}

html[data-styleworld="atelier"] .article-section:nth-of-type(odd) {
  rotate: -.12deg;
}

html[data-styleworld="atelier"] .article-section:nth-of-type(even) {
  rotate: .12deg;
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+1) {
  grid-column: span 5;
  border-radius: 48px 20px 48px 24px;
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+2) {
  grid-column: span 3;
  translate: 0 14px;
  rotate: .35deg;
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+3) {
  grid-column: span 4;
  rotate: -.3deg;
}

html[data-styleworld="atelier"] .lightbox.is-open .lightbox-panel {
  rotate: -.25deg;
}

html[data-styleworld="klartechnik"] {
  --world-texture-opacity: .24;
  --world-texture:
    linear-gradient(90deg, rgba(141,198,216,.12) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(141,198,216,.1) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, transparent 0 49%, rgba(141,198,216,.12) 49% 49.25%, transparent 49.25% 100%);
  --world-texture-blend: screen;
}

html[data-styleworld="klartechnik"] body::before {
  background-size: 80px 80px, 80px 80px, auto;
}

html[data-styleworld="klartechnik"] .hero-content::before {
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--accent) 0 12px, transparent 12px 22px);
}

html[data-styleworld="klartechnik"] .article-stage,
html[data-styleworld="klartechnik"] .cta-stage {
  grid-template-columns: minmax(0, .88fr) minmax(300px, .62fr);
}

html[data-styleworld="klartechnik"] .stage,
html[data-styleworld="klartechnik"] .article-section,
html[data-styleworld="klartechnik"] .gallery-card {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

html[data-styleworld="klartechnik"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(odd) {
  grid-column: span 3;
}

html[data-styleworld="klartechnik"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(even) {
  grid-column: span 3;
}

html[data-styleworld="klartechnik"] .lightbox-panel {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}

html[data-styleworld="natur"] {
  --world-texture-opacity: .24;
  --world-texture:
    radial-gradient(ellipse at 20% 18%, rgba(183,199,123,.22), transparent 18rem),
    radial-gradient(ellipse at 82% 34%, rgba(210,169,111,.13), transparent 24rem),
    linear-gradient(142deg, transparent 0 60%, rgba(183,199,123,.06) 60% 62%, transparent 62% 100%);
}

html[data-styleworld="natur"] .hero-content {
  width: min(820px, 100%);
}

html[data-styleworld="natur"] .article-stage {
  grid-template-columns: minmax(0, .95fr) minmax(280px, .5fr);
}

html[data-styleworld="natur"] .article-section:nth-of-type(3n+1) {
  border-radius: 58px 30px 46px 30px;
}

html[data-styleworld="natur"] .article-section:nth-of-type(3n+2) {
  border-radius: 32px 58px 32px 48px;
}

html[data-styleworld="natur"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 5;
}

html[data-styleworld="natur"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2),
html[data-styleworld="natur"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3) {
  grid-column: span 7;
  min-height: 300px;
}

html[data-styleworld="graustufen"] {
  --world-texture-opacity: .18;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.05) 8% 8.08%, transparent 8.08% 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 42px);
}

html[data-styleworld="graustufen"] .hero-bg,
html[data-styleworld="graustufen"] .article-side img,
html[data-styleworld="graustufen"] .cta-image img,
html[data-styleworld="graustufen"] .gallery-card img {
  filter: saturate(1.08) contrast(1.05);
}

html[data-styleworld="graustufen"] .stage {
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 28px 78px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.05);
}

html[data-styleworld="graustufen"] .article-header,
html[data-styleworld="graustufen"] .article-section {
  border-radius: 0;
}

html[data-styleworld="graustufen"] .gallery-card {
  border-width: 2px;
}

html[data-styleworld="graustufen"] .gallery-card figcaption {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
}

html[data-styleworld="ozean"] {
  --world-texture-opacity: .28;
  --world-texture:
    radial-gradient(ellipse at 74% 12%, rgba(94,193,216,.24), transparent 28rem),
    repeating-radial-gradient(ellipse at 30% 20%, rgba(94,193,216,.08) 0 1px, transparent 1px 28px);
}

html[data-styleworld="ozean"] .hero-stage::before {
  border-radius: 70% 28% 62% 34%;
}

html[data-styleworld="ozean"] .article-stage {
  grid-template-columns: minmax(0, .9fr) minmax(300px, .58fr);
}

html[data-styleworld="ozean"] .article-section:nth-of-type(even) {
  translate: clamp(0px, 2vw, 26px) 0;
}

html[data-styleworld="ozean"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3n+1) {
  grid-column: span 7;
  border-radius: 80px 28px 80px 28px;
}

html[data-styleworld="ozean"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3n+2) {
  grid-column: span 5;
  translate: 0 24px;
  border-radius: 28px 80px 28px 80px;
}

html[data-styleworld="ozean"] .lightbox-panel img {
  border-radius: 44px 18px 44px 18px;
}

html[data-styleworld="sand"] {
  --world-texture-opacity: .24;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(177deg, transparent 0 28%, rgba(224,176,96,.12) 28% 28.5%, transparent 28.5% 100%),
    linear-gradient(183deg, transparent 0 58%, rgba(224,176,96,.09) 58% 58.4%, transparent 58.4% 100%);
}

html[data-styleworld="sand"] .hero-content {
  margin-top: auto;
  padding-bottom: clamp(20px, 3vw, 40px);
}

html[data-styleworld="sand"] .article-stage {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr);
}

html[data-styleworld="sand"] .article-section,
html[data-styleworld="sand"] .stage {
  border-radius: 28px 28px 12px 12px;
}

html[data-styleworld="sand"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 12;
  min-height: clamp(260px, 26vw, 360px);
}

html[data-styleworld="sand"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(n+2) {
  grid-column: span 4;
  min-height: 230px;
}

html[data-styleworld="vulkan"] {
  --world-texture-opacity: .34;
  --world-texture:
    radial-gradient(circle at 78% 10%, rgba(240,96,53,.26), transparent 18rem),
    linear-gradient(130deg, transparent 0 44%, rgba(240,96,53,.13) 44% 45%, transparent 45% 100%),
    linear-gradient(38deg, transparent 0 62%, rgba(240,177,95,.1) 62% 62.7%, transparent 62.7% 100%);
}

html[data-styleworld="vulkan"] .hero-content {
  max-width: 820px;
}

html[data-styleworld="vulkan"] .stage,
html[data-styleworld="vulkan"] .article-section,
html[data-styleworld="vulkan"] .gallery-card,
html[data-styleworld="vulkan"] .article-side img,
html[data-styleworld="vulkan"] .cta-image img {
  clip-path: polygon(0 0, 96% 0, 100% 10%, 96% 100%, 0 100%, 3% 88%);
}

html[data-styleworld="vulkan"] .article-stage {
  grid-template-columns: minmax(0, .86fr) minmax(310px, .62fr);
}

html[data-styleworld="vulkan"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 8;
}

html[data-styleworld="vulkan"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 4;
  min-height: 460px;
}

html[data-styleworld="wald"] {
  --world-texture-opacity: .22;
  --world-texture:
    repeating-linear-gradient(90deg, rgba(159,190,114,.08) 0 1px, transparent 1px 36px),
    radial-gradient(ellipse at 10% 0%, rgba(159,190,114,.18), transparent 30rem);
}

html[data-styleworld="wald"] .hero-stage::before {
  mask-image: linear-gradient(90deg, #000 0 44%, transparent 82%);
}

html[data-styleworld="wald"] .article-stage {
  grid-template-columns: minmax(0, .92fr) minmax(300px, .54fr);
}

html[data-styleworld="wald"] .article-section:nth-of-type(even) {
  translate: clamp(0px, 1.5vw, 20px) 0;
}

html[data-styleworld="wald"] .article-section::after {
  content: "";
  position: absolute;
  inset: 12px auto 12px 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 42%, transparent), transparent);
}

html[data-styleworld="wald"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(odd) {
  grid-column: span 4;
  border-radius: 70px 24px 70px 24px;
}

html[data-styleworld="wald"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(even) {
  grid-column: span 4;
  translate: 0 18px;
  border-radius: 24px 70px 24px 70px;
}

html[data-styleworld="holz"] {
  --world-texture-opacity: .32;
  --world-texture-blend: normal;
  --world-texture:
    repeating-linear-gradient(98deg, rgba(201,138,82,.11) 0 1px, transparent 1px 18px),
    repeating-radial-gradient(ellipse at 65% 12%, rgba(225,192,139,.08) 0 1px, transparent 1px 24px);
}

html[data-styleworld="holz"] .hero-stage::before,
html[data-styleworld="holz"] .stage {
  border-width: 2px;
}

html[data-styleworld="holz"] .article-stage {
  grid-template-columns: minmax(0, .96fr) minmax(280px, .5fr);
}

html[data-styleworld="holz"] .article-section {
  box-shadow:
    inset 0 0 0 1px rgba(225,192,139,.08),
    inset 0 24px 80px rgba(201,138,82,.06),
    0 18px 50px rgba(0,0,0,.16);
}

html[data-styleworld="holz"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1),
html[data-styleworld="holz"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(5) {
  grid-column: span 6;
}

html[data-styleworld="holz"] .gallery-card figcaption {
  border-top: 2px solid rgba(225,192,139,.18);
}

html[data-styleworld="sonnenuntergang"] {
  --world-texture-opacity: .42;
  --world-texture:
    radial-gradient(ellipse at 80% 18%, rgba(255,174,84,.34), transparent 20rem),
    radial-gradient(ellipse at 34% 18%, rgba(198,102,216,.18), transparent 26rem),
    linear-gradient(177deg, transparent 0 55%, rgba(255,174,84,.12) 55% 56%, rgba(198,102,216,.08) 56% 58%, transparent 58% 100%);
}

html[data-styleworld="sonnenuntergang"] .hero-content {
  width: min(880px, 100%);
  padding: clamp(20px, 3vw, 42px);
  border-radius: 999px 60px 999px 60px;
  background: radial-gradient(ellipse at 0% 100%, rgba(255,174,84,.14), transparent 70%);
}

html[data-styleworld="sonnenuntergang"] .article-stage {
  grid-template-columns: minmax(0, .88fr) minmax(300px, .58fr);
}

html[data-styleworld="sonnenuntergang"] .article-section:nth-of-type(odd) {
  border-radius: 56px 18px 56px 18px;
}

html[data-styleworld="sonnenuntergang"] .article-section:nth-of-type(even) {
  border-radius: 18px 56px 18px 56px;
}

html[data-styleworld="sonnenuntergang"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 7;
}

html[data-styleworld="sonnenuntergang"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 5;
  translate: 0 30px;
}

html[data-styleworld="sonnenuntergang"] .gallery-card img {
  filter: saturate(1.16) contrast(1.03) sepia(.08);
}

html[data-styleworld="gewitter"] {
  --world-texture-opacity: .36;
  --world-texture:
    linear-gradient(116deg, transparent 0 46%, rgba(142,168,255,.18) 46% 46.4%, transparent 46.4% 100%),
    linear-gradient(72deg, transparent 0 61%, rgba(216,195,115,.12) 61% 61.3%, transparent 61.3% 100%),
    radial-gradient(circle at 82% 10%, rgba(142,168,255,.22), transparent 18rem);
}

html[data-styleworld="gewitter"] .hero-content {
  width: min(760px, 100%);
  margin-left: clamp(0px, 3vw, 44px);
}

html[data-styleworld="gewitter"] .stage,
html[data-styleworld="gewitter"] .article-section,
html[data-styleworld="gewitter"] .gallery-card {
  border-radius: 10px 34px 10px 34px;
}

html[data-styleworld="gewitter"] .article-stage {
  grid-template-columns: minmax(0, .84fr) minmax(320px, .62fr);
}

html[data-styleworld="gewitter"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(odd) {
  grid-column: span 5;
  rotate: -.35deg;
}

html[data-styleworld="gewitter"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(even) {
  grid-column: span 7;
  rotate: .35deg;
}


html[data-styleworld="ebenholz"] {
  --world-texture-opacity: .22;
  --world-texture-blend: normal;
  --world-texture:
    radial-gradient(circle at 78% 12%, rgba(184,146,78,.14), transparent 18rem),
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.03) 10% 10.08%, transparent 10.08% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(255,255,255,.025) 18% 18.08%, transparent 18.08% 100%);
}

html[data-styleworld="ebenholz"] .hero-content {
  width: min(760px, 100%);
}

html[data-styleworld="ebenholz"] .article-stage {
  grid-template-columns: minmax(0, 1.02fr) minmax(280px, .46fr);
}

html[data-styleworld="ebenholz"] .article-header {
  border-top: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

html[data-styleworld="ebenholz"] .article-section {
  border-left: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 0 28px 28px 0;
}

html[data-styleworld="ebenholz"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 8;
}

html[data-styleworld="ebenholz"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 4;
  min-height: 440px;
}

html[data-styleworld="nachtatelier"] {
  --world-texture-opacity: .32;
  --world-texture:
    radial-gradient(circle at 8% 18%, rgba(184,121,92,.18), transparent 16rem),
    radial-gradient(circle at 86% 14%, rgba(154,126,136,.16), transparent 22rem),
    linear-gradient(126deg, transparent 0 44%, rgba(255,255,255,.028) 44% 44.6%, transparent 44.6% 100%);
}

html[data-styleworld="nachtatelier"] .hero-content {
  width: min(820px, 100%);
  margin-left: clamp(0px, 2.8vw, 34px);
}

html[data-styleworld="nachtatelier"] .article-stage {
  grid-template-columns: minmax(0, .94fr) minmax(290px, .56fr);
}

html[data-styleworld="nachtatelier"] .article-section:nth-of-type(odd) {
  border-radius: 36px 56px 26px 38px;
}

html[data-styleworld="nachtatelier"] .article-section:nth-of-type(even) {
  border-radius: 56px 30px 44px 28px;
  translate: clamp(0px, 1vw, 14px) 0;
}

html[data-styleworld="nachtatelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+1) {
  grid-column: span 5;
  border-radius: 52px 20px 44px 20px;
}

html[data-styleworld="nachtatelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+2) {
  grid-column: span 3;
  translate: 0 18px;
}

html[data-styleworld="nachtatelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4n+3) {
  grid-column: span 4;
  rotate: -.2deg;
}

html[data-styleworld="tintekalk"] {
  --world-texture-opacity: .24;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(90deg, rgba(111,136,159,.09) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.032) 0 1px, transparent 1px 40px);
}

html[data-styleworld="tintekalk"] body::before {
  background-size: 76px 76px, auto;
}

html[data-styleworld="tintekalk"] .hero-content::before {
  width: 4px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent-2) 52%, transparent));
}

html[data-styleworld="tintekalk"] .article-stage,
html[data-styleworld="tintekalk"] .cta-stage {
  grid-template-columns: minmax(0, .9fr) minmax(300px, .58fr);
}

html[data-styleworld="tintekalk"] .stage,
html[data-styleworld="tintekalk"] .article-section,
html[data-styleworld="tintekalk"] .gallery-card,
html[data-styleworld="tintekalk"] blockquote {
  border-radius: 6px;
}

html[data-styleworld="tintekalk"] .article-header,
html[data-styleworld="tintekalk"] .article-section {
  border-left: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

html[data-styleworld="tintekalk"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(odd) {
  grid-column: span 6;
}

html[data-styleworld="tintekalk"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(even) {
  grid-column: span 6;
}

html[data-styleworld="pfauenlicht"] {
  --world-texture-opacity: .34;
  --world-texture:
    radial-gradient(circle at 74% 10%, rgba(43,141,134,.22), transparent 18rem),
    radial-gradient(circle at 16% 22%, rgba(127,150,96,.18), transparent 24rem),
    linear-gradient(160deg, transparent 0 52%, rgba(255,255,255,.03) 52% 52.5%, transparent 52.5% 100%);
}

html[data-styleworld="pfauenlicht"] .hero-content {
  width: min(860px, 100%);
}

html[data-styleworld="pfauenlicht"] .hero-stage::before {
  border-radius: 68% 28% 62% 32%;
}

html[data-styleworld="pfauenlicht"] .article-stage {
  grid-template-columns: minmax(0, .88fr) minmax(300px, .6fr);
}

html[data-styleworld="pfauenlicht"] .article-section:nth-of-type(even) {
  translate: clamp(0px, 2vw, 22px) 0;
}

html[data-styleworld="pfauenlicht"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3n+1) {
  grid-column: span 7;
  border-radius: 78px 28px 78px 28px;
}

html[data-styleworld="pfauenlicht"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3n+2) {
  grid-column: span 5;
  translate: 0 26px;
  border-radius: 28px 78px 28px 78px;
}

html[data-styleworld="iriskupfer"] {
  --world-texture-opacity: .34;
  --world-texture:
    radial-gradient(circle at 18% 12%, rgba(157,120,145,.18), transparent 18rem),
    radial-gradient(circle at 82% 10%, rgba(191,124,98,.18), transparent 20rem),
    linear-gradient(176deg, transparent 0 54%, rgba(191,124,98,.08) 54% 54.7%, transparent 54.7% 100%);
}

html[data-styleworld="iriskupfer"] .hero-content {
  width: min(820px, 100%);
}

html[data-styleworld="iriskupfer"] .article-stage {
  grid-template-columns: minmax(0, .9fr) minmax(300px, .58fr);
}

html[data-styleworld="iriskupfer"] .article-section:nth-of-type(odd) {
  border-radius: 48px 24px 44px 24px;
}

html[data-styleworld="iriskupfer"] .article-section:nth-of-type(even) {
  border-radius: 24px 52px 24px 44px;
}

html[data-styleworld="iriskupfer"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(odd) {
  grid-column: span 5;
  rotate: -.22deg;
}

html[data-styleworld="iriskupfer"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(even) {
  grid-column: span 7;
  rotate: .22deg;
}

html[data-styleworld="polarlicht"] {
  --world-texture-opacity: .38;
  --world-texture:
    radial-gradient(circle at 12% 16%, rgba(102,205,209,.18), transparent 18rem),
    radial-gradient(circle at 74% 8%, rgba(142,166,216,.18), transparent 22rem),
    linear-gradient(122deg, transparent 0 50%, rgba(102,205,209,.09) 50% 50.8%, rgba(142,166,216,.07) 50.8% 51.5%, transparent 51.5% 100%);
}

html[data-styleworld="polarlicht"] .hero-content {
  width: min(900px, 100%);
}

html[data-styleworld="polarlicht"] .stage,
html[data-styleworld="polarlicht"] .article-section,
html[data-styleworld="polarlicht"] .gallery-card {
  box-shadow: 0 22px 60px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.05);
}

html[data-styleworld="polarlicht"] .article-stage {
  grid-template-columns: minmax(0, .86fr) minmax(320px, .62fr);
}

html[data-styleworld="polarlicht"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 12;
  min-height: clamp(280px, 28vw, 380px);
}

html[data-styleworld="polarlicht"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(n+2) {
  grid-column: span 4;
}


/* Stilweltbezogene Navigation und größeres Artikelbild */
.article-stage {
  grid-template-columns: minmax(0, .78fr) minmax(380px, .76fr);
}

.article-side {
  width: min(560px, 100%);
  justify-self: end;
}

.article-side img {
  max-height: min(760px, calc(100vh - var(--header-h) - 88px));
  aspect-ratio: 3.5 / 4.8;
}

html[data-styleworld] nav a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    border-color .24s ease,
    background .24s ease,
    color .24s ease,
    box-shadow .24s ease,
    transform .24s ease,
    clip-path .24s ease;
}

html[data-styleworld] nav a::before,
html[data-styleworld] nav a::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease, transform .24s ease;
}

html[data-styleworld] nav a.is-active::before,
html[data-styleworld] nav a[aria-current="page"]::before,
html[data-styleworld] nav a:hover::before,
html[data-styleworld] nav a.is-active::after,
html[data-styleworld] nav a[aria-current="page"]::after,
html[data-styleworld] nav a:hover::after {
  opacity: 1;
}

html[data-styleworld="editorial"] nav a {
  min-height: 38px;
  border-radius: 2px;
  border-left: 0;
  border-right: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  letter-spacing: .045em;
  text-transform: uppercase;
}

html[data-styleworld="editorial"] nav a::after {
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

html[data-styleworld="atelier"] nav a {
  border-style: dashed;
  border-radius: 22px 10px 24px 12px;
  background: radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%), color-mix(in srgb, var(--panel) 56%, transparent);
}

html[data-styleworld="atelier"] nav a:nth-child(even) {
  border-radius: 10px 24px 12px 22px;
  transform: rotate(.35deg);
}

html[data-styleworld="atelier"] nav a:nth-child(odd) {
  transform: rotate(-.35deg);
}

html[data-styleworld="klartechnik"] nav a {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  background: linear-gradient(135deg, rgba(141,198,216,.12), rgba(255,255,255,.028));
  text-transform: uppercase;
  letter-spacing: .08em;
}

html[data-styleworld="klartechnik"] nav a::before {
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
}

html[data-styleworld="natur"] nav a {
  border-radius: 30px 12px 30px 14px;
  background: radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%), color-mix(in srgb, var(--panel) 58%, transparent);
}

html[data-styleworld="natur"] nav a:nth-child(even) {
  border-radius: 14px 30px 14px 30px;
}

html[data-styleworld="graustufen"] nav a {
  border-radius: 0;
  border-color: rgba(255,255,255,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.025));
  color: rgba(255,255,255,.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

html[data-styleworld="graustufen"] nav a::after {
  inset: auto 10px 7px 10px;
  height: 1px;
  background: rgba(255,255,255,.7);
}

html[data-styleworld="ozean"] nav a {
  border-radius: 999px 28px 999px 28px;
  background: radial-gradient(ellipse at 20% 0%, rgba(94,193,216,.2), transparent 70%), color-mix(in srgb, var(--panel) 58%, transparent);
}

html[data-styleworld="ozean"] nav a::before {
  left: 13px;
  right: 13px;
  bottom: 7px;
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

html[data-styleworld="sand"] nav a {
  border-radius: 8px;
  border-top-color: color-mix(in srgb, var(--accent) 78%, transparent);
  border-bottom-width: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), color-mix(in srgb, var(--panel) 70%, transparent));
}

html[data-styleworld="sand"] nav a::after {
  left: 14px;
  right: 14px;
  top: 8px;
  height: 1px;
  background: color-mix(in srgb, var(--accent-2) 60%, transparent);
}

html[data-styleworld="vulkan"] nav a {
  border-radius: 0;
  clip-path: polygon(0 0, 94% 0, 100% 34%, 96% 100%, 0 100%, 5% 72%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--panel) 74%, transparent));
}

html[data-styleworld="vulkan"] nav a::before {
  inset: auto 12px 6px 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 55%, transparent));
}

html[data-styleworld="wald"] nav a {
  border-radius: 26px 8px 26px 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), color-mix(in srgb, var(--panel) 66%, transparent));
}

html[data-styleworld="wald"] nav a::before {
  inset: 7px auto 7px 9px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
}

html[data-styleworld="holz"] nav a {
  border-radius: 7px 20px 7px 20px;
  border-width: 2px;
  background:
    repeating-linear-gradient(98deg, rgba(225,192,139,.08) 0 1px, transparent 1px 10px),
    color-mix(in srgb, var(--panel) 64%, transparent);
}

html[data-styleworld="holz"] nav a::after {
  inset: 7px 12px auto 12px;
  height: 1px;
  background: rgba(225,192,139,.42);
}

html[data-styleworld="sonnenuntergang"] nav a {
  border-radius: 999px 18px 999px 18px;
  background: radial-gradient(ellipse at 0% 100%, rgba(255,174,84,.22), transparent 72%), color-mix(in srgb, var(--panel) 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(255,174,84,.05);
}

html[data-styleworld="sonnenuntergang"] nav a.is-active,
html[data-styleworld="sonnenuntergang"] nav a[aria-current="page"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 28px rgba(255,174,84,.18);
}

html[data-styleworld="gewitter"] nav a {
  border-radius: 7px 24px 7px 24px;
  transform: skewX(-6deg);
  background: linear-gradient(116deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), color-mix(in srgb, var(--panel) 68%, transparent));
}

html[data-styleworld="gewitter"] nav a > span,
html[data-styleworld="gewitter"] nav a {
  text-transform: uppercase;
  letter-spacing: .055em;
}

html[data-styleworld="gewitter"] nav a::before {
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, transparent, var(--accent-2), var(--accent), transparent);
}

@media (max-width: 1180px) {
  .article-stage {
    grid-template-columns: minmax(0, .9fr) minmax(320px, .56fr);
  }

  .article-side {
    width: min(480px, 100%);
  }
}

@media (max-width: 980px) {
  .article-stage {
    grid-template-columns: 1fr;
  }

  .article-side {
    width: 100%;
    justify-self: stretch;
  }

  .article-side img {
    aspect-ratio: 16 / 10;
    max-height: 520px;
  }
}



.site-header {
  overflow: hidden;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, .26),
    inset 0 -1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
  opacity: .9;
  pointer-events: none;
}

.hero-stage {
  box-shadow:
    inset 0 -120px 180px rgba(0, 0, 0, .34),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.hero-content {
  padding: clamp(18px, 2.8vw, 36px) clamp(16px, 2.6vw, 34px);
  border-radius: clamp(18px, 2.8vw, 34px);
  background:
    linear-gradient(135deg, rgba(10, 12, 13, .46), rgba(10, 12, 13, .12) 58%, transparent 100%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow:
    0 22px 90px rgba(0, 0, 0, .18),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

.hero-content::after {
  content: "";
  position: absolute;
  left: clamp(18px, 2.8vw, 34px);
  right: clamp(18px, 2.8vw, 34px);
  bottom: clamp(14px, 2vw, 24px);
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 0%, transparent), color-mix(in srgb, var(--accent) 42%, transparent), transparent);
  opacity: .5;
}

.hero-stage h1 {
  text-wrap: balance;
  text-shadow: 0 26px 78px rgba(0, 0, 0, .56);
}

.stage {
  overflow: hidden;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .22),
    0 4px 16px rgba(0, 0, 0, .08),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), transparent 24%);
  opacity: .75;
}

.stage > *,
.article-section > *,
.cta-copy,
.cta-image,
.article-side,
.gallery-intro,
.gallery-grid {
  position: relative;
  z-index: 1;
}

.article-header {
  padding-top: clamp(10px, 1.2vw, 16px);
}

.article-header h2,
.stage h2 {
  text-wrap: balance;
}

.article-section {
  backdrop-filter: blur(10px) saturate(112%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    inset 0 -36px 90px color-mix(in srgb, var(--accent) 4%, transparent),
    0 24px 60px rgba(0, 0, 0, .15);
}

.article-section::after {
  content: "";
  position: absolute;
  inset: auto 16px 16px auto;
  width: clamp(88px, 13vw, 160px);
  height: clamp(88px, 13vw, 160px);
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  opacity: .55;
  pointer-events: none;
}

blockquote {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 20px 44px rgba(0, 0, 0, .12);
}

.article-side {
  padding: clamp(14px, 1.8vw, 24px);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .18),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.article-side img,
.cta-image img {
  box-shadow:
    0 28px 84px rgba(0, 0, 0, .26),
    0 4px 18px rgba(0, 0, 0, .16);
}

.gallery-card {
  isolation: isolate;
  box-shadow:
    0 24px 68px rgba(0, 0, 0, .22),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 14%, rgba(255,255,255,.13) 28%, transparent 44%);
  opacity: .12;
  transform: translateX(-26%);
  transition: transform .5s ease, opacity .35s ease;
}

.gallery-card:hover::after {
  opacity: .22;
  transform: translateX(8%);
}

.gallery-card figcaption {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .18),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.cta-stage {
  box-shadow:
    0 30px 96px rgba(0, 0, 0, .24),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}

.cta-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 8%, transparent));
  pointer-events: none;
}

.button {
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.lightbox {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.06), transparent 32rem),
    rgba(2, 3, 4, .84);
}

.lightbox-panel {
  box-shadow:
    0 34px 130px rgba(0, 0, 0, .62),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}

.lightbox-panel figure {
  position: relative;
}

.lightbox-panel figure::after {
  content: "";
  position: absolute;
  inset: auto 8% 0 8%;
  height: 18%;
  background: radial-gradient(ellipse, rgba(0,0,0,.3), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.site-footer {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 66%, transparent));
}

html[data-styleworld="editorial"] .hero-content {
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(12,13,15,.58), rgba(12,13,15,.16) 64%, transparent 100%);
}

html[data-styleworld="editorial"] .stage,
html[data-styleworld="editorial"] .article-section,
html[data-styleworld="editorial"] .gallery-card figcaption,
html[data-styleworld="editorial"] .lightbox-panel {
  box-shadow:
    0 24px 66px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-styleworld="editorial"] .gallery-card::after {
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.18) 32%, transparent 44%);
}

html[data-styleworld="atelier"] .hero-content {
  box-shadow:
    0 28px 84px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

html[data-styleworld="atelier"] .stage::after {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 18rem),
    radial-gradient(circle at 100% 4%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 20rem),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent 22%);
}

html[data-styleworld="atelier"] .gallery-card:hover {
  transform: translateY(-6px) rotate(.3deg);
}

html[data-styleworld="klartechnik"] .site-header::after,
html[data-styleworld="klartechnik"] .hero-content::after {
  background: linear-gradient(90deg, transparent, rgba(141,198,216,.52), transparent);
}

html[data-styleworld="klartechnik"] .stage::after,
html[data-styleworld="klartechnik"] .article-section::after {
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(141,198,216,.05) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(141,198,216,.04) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 100% 0%, rgba(141,198,216,.08), transparent 14rem);
  background-size: 38px 38px, 38px 38px, auto;
}

html[data-styleworld="klartechnik"] .gallery-card:hover {
  transform: translateY(-4px) scale(1.01);
}

html[data-styleworld="natur"] .hero-content,
html[data-styleworld="wald"] .hero-content,
html[data-styleworld="ozean"] .hero-content,
html[data-styleworld="sonnenuntergang"] .hero-content {
  backdrop-filter: blur(14px) saturate(118%);
}

html[data-styleworld="natur"] .stage::after {
  background:
    radial-gradient(ellipse at 16% 0%, rgba(183,199,123,.08), transparent 20rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
}

html[data-styleworld="graustufen"] .hero-content {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(16,16,18,.62), rgba(16,16,18,.18) 62%, transparent 100%);
}

html[data-styleworld="graustufen"] .stage::after,
html[data-styleworld="graustufen"] .article-section::after {
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.07), transparent 14rem);
}

html[data-styleworld="graustufen"] .gallery-card::after {
  background: linear-gradient(120deg, transparent 22%, rgba(255,255,255,.22) 35%, transparent 48%);
}

html[data-styleworld="ozean"] .stage::after {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(94,193,216,.10), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%),
    radial-gradient(ellipse at 100% 100%, rgba(94,193,216,.10), transparent 18rem);
}

html[data-styleworld="ozean"] .gallery-card:hover {
  transform: translateY(-7px) rotate(-.2deg);
}

html[data-styleworld="sand"] .stage::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%),
    radial-gradient(ellipse at 50% 100%, rgba(224,176,96,.10), transparent 16rem),
    repeating-linear-gradient(180deg, rgba(224,176,96,.03) 0 1px, transparent 1px 22px);
}

html[data-styleworld="sand"] .gallery-card figcaption {
  background: color-mix(in srgb, var(--panel) 78%, rgba(35, 28, 20, .65));
}

html[data-styleworld="vulkan"] .hero-content {
  box-shadow:
    0 0 0 1px rgba(240,96,53,.18),
    0 34px 100px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-styleworld="vulkan"] .stage::after,
html[data-styleworld="vulkan"] .article-section::after {
  background:
    radial-gradient(circle at 100% 0%, rgba(240,96,53,.15), transparent 14rem),
    radial-gradient(circle at 0% 100%, rgba(240,177,95,.08), transparent 16rem);
}

html[data-styleworld="vulkan"] .gallery-card:hover {
  transform: translateY(-5px) rotate(-.25deg);
}

html[data-styleworld="wald"] .stage::after {
  background:
    linear-gradient(90deg, rgba(159,190,114,.04) 0 2px, transparent 2px 100%),
    radial-gradient(ellipse at 12% 0%, rgba(159,190,114,.08), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
  background-size: 40px 100%, auto, auto;
}

html[data-styleworld="holz"] .hero-content {
  box-shadow:
    0 22px 76px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(225,192,139,.08);
}

html[data-styleworld="holz"] .stage::after {
  background:
    repeating-linear-gradient(98deg, rgba(225,192,139,.04) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
}

html[data-styleworld="sonnenuntergang"] .hero-content {
  box-shadow:
    0 0 0 1px rgba(255,174,84,.12),
    0 30px 96px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-styleworld="sonnenuntergang"] .stage::after,
html[data-styleworld="sonnenuntergang"] .article-section::after {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(255,174,84,.14), transparent 18rem),
    radial-gradient(ellipse at 0% 100%, rgba(198,102,216,.10), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
}

html[data-styleworld="sonnenuntergang"] .gallery-card:hover {
  transform: translateY(-6px) scale(1.01);
}

html[data-styleworld="gewitter"] .hero-content {
  box-shadow:
    0 0 0 1px rgba(142,168,255,.12),
    0 30px 94px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-styleworld="gewitter"] .stage::after,
html[data-styleworld="gewitter"] .article-section::after {
  background:
    linear-gradient(116deg, transparent 0 46%, rgba(142,168,255,.12) 46% 46.3%, transparent 46.3% 100%),
    radial-gradient(circle at 100% 0%, rgba(142,168,255,.12), transparent 14rem),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 24%);
}

html[data-styleworld="gewitter"] .gallery-card:hover {
  transform: translateY(-6px) skewX(-1.5deg);
}

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

  .hero-bg,
  .hero-content {
    transform: none !important;
  }

  #start .hero-bg,
  #start .hero-content > *,
  #start .hero-content::before,
  #start .hero-content::after,
  html.effects-ready .stage,
  html.effects-ready .article-header,
  html.effects-ready .article-section,
  html.effects-ready .article-side,
  html.effects-ready .gallery-intro,
  html.effects-ready .gallery-card,
  html.effects-ready .seeportal-project-card,
  html.effects-ready .hero-content--closing > * {
    animation: none !important;
    opacity: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }

  html.effects-ready .article-side img,
  html.effects-ready .gallery-card img,
  html.effects-ready .seeportal-project-card img {
    scale: 1 !important;
  }
}

@media (max-width: 1200px) {
  :root {
    --stage-width: min(100% - 44px, 1180px);
  }

  .site-header {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  nav,
  .site-tools,
  .mode-buttons {
    justify-content: flex-start;
  }

  .article-stage,
  .cta-stage {
    grid-template-columns: 1fr;
  }

  .article-side {
    position: static;
  }

  .article-side img,
  .cta-image img {
    max-height: 560px;
  }

  .gallery-grid,
  .gallery-grid--pair,
  .gallery-grid--single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-grid--single {
    grid-template-columns: 1fr;
  }

  .gallery-card,
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(2),
  .gallery-card:nth-child(3),
  .gallery-card:nth-child(4),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(6),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8),
  .gallery-card:nth-child(9),
  .gallery-card:nth-child(10) {
    min-height: 280px;
    grid-column: auto;
    grid-row: auto;
  }

  html[data-styleworld="atelier"] .gallery-grid .gallery-card:nth-child(3n+2) {
    transform: none;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 260px;
  }

  :root {
    --stage-width: min(100% - 28px, 1180px);
  }

  .site-header,
  .site-footer {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .brand strong {
    white-space: normal;
  }

  nav a,
  .button {
    min-height: 40px;
    padding: 9px 14px;
  }

  .site-tools,
  .mode-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-stage {
    min-height: 680px;
    padding: 96px 22px 62px;
    scroll-margin-top: 168px;
  }

  .hero-stage::before {
    inset: 14px;
    border-radius: 24px;
  }

  .hero-content {
    padding-left: 18px;
  }

  .hero-stage h1 {
    max-width: 9.5ch;
    font-size: clamp(3rem, 16vw, 5.2rem);
  }

  .lead,
  .article-lead {
    font-size: 1.06rem;
  }

  .stage {
    margin: 38px auto;
    padding: 28px 20px;
    border-radius: 20px;
    scroll-margin-top: 260px;
  }

  .stage h2,
  .article-header h2 {
    font-size: clamp(2.35rem, 12vw, 4rem);
  }


  .gallery-grid,
  .gallery-grid--pair,
  .gallery-grid--single {
    grid-template-columns: 1fr;
  }

  .gallery-card,
  .gallery-card:nth-child(1),
  .gallery-card:nth-child(2),
  .gallery-card:nth-child(3),
  .gallery-card:nth-child(4),
  .gallery-card:nth-child(5),
  .gallery-card:nth-child(6),
  .gallery-card:nth-child(7),
  .gallery-card:nth-child(8),
  .gallery-card:nth-child(9),
  .gallery-card:nth-child(10) {
    min-height: 300px;
    grid-column: auto;
    grid-row: auto;
  }

  .gallery-card figcaption {
    position: static;
    border-width: 1px 0 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
  }

  .lightbox-panel {
    width: min(100%, calc(100% - 12px));
  }
}



.hero-content {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.hero-content .lead:last-child {
  margin-bottom: 0;
}

.stage {
  box-shadow:
    0 34px 100px rgba(0, 0, 0, .24),
    0 8px 24px rgba(0, 0, 0, .1),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 11%, transparent);
}

.article-stage {
  overflow: visible;
  grid-template-columns: minmax(0, .74fr) minmax(420px, .86fr);
  gap: clamp(44px, 6vw, 96px);
}

.article-stage::after {
  content: "";
  position: absolute;
  right: clamp(24px, 4vw, 42px);
  top: clamp(28px, 4vw, 52px);
  width: clamp(160px, 18vw, 280px);
  height: clamp(160px, 18vw, 280px);
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%);
  opacity: .75;
  pointer-events: none;
}

.article-header,
.article-section,
.gallery-card figcaption,
.article-side,
.cta-copy {
  backdrop-filter: blur(12px) saturate(115%);
}

.article-header {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
    0 18px 46px rgba(0, 0, 0, .14);
}

.article-section {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    inset 0 -40px 90px color-mix(in srgb, var(--accent) 6%, transparent),
    0 24px 58px rgba(0, 0, 0, .16);
}

.article-side {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  width: min(620px, 100%);
  padding: clamp(16px, 2vw, 26px);
  overflow: visible;
  box-shadow:
    0 32px 94px rgba(0, 0, 0, .22),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.article-side::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: calc(var(--radius) * 1.12);
  pointer-events: none;
}

.article-side img {
  position: relative;
  z-index: 1;
  max-height: min(900px, calc(100vh - var(--header-h) - 48px));
  aspect-ratio: 4 / 5.25;
  border-width: 1px;
  box-shadow:
    0 32px 92px rgba(0, 0, 0, .3),
    0 10px 28px rgba(0, 0, 0, .16);
}

.article-side figcaption {
  position: relative;
  z-index: 1;
  padding: 16px 2px 0;
  margin-top: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 0%, transparent), color-mix(in srgb, var(--panel) 36%, transparent));
}

.gallery-card {
  box-shadow:
    0 28px 76px rgba(0, 0, 0, .22),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

.gallery-card:hover {
  transform: translateY(-8px);
}

.gallery-card figcaption {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(122%);
}

.cta-copy {
  padding: clamp(18px, 2.4vw, 30px);
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: calc(var(--radius) * 1.1);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 84%, transparent), color-mix(in srgb, var(--panel-2) 58%, transparent)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 20rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 20px 54px rgba(0, 0, 0, .14);
}

.button,
nav a,
.mode-buttons button,
.gallery-card,
.article-side,
.article-section,
.article-header,
.cta-copy,
.lightbox-panel {
  transition:
    box-shadow .28s ease,
    border-color .28s ease,
    background .28s ease,
    transform .28s ease,
    filter .28s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.lightbox-panel {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--panel) 88%, transparent)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 20rem);
}

html[data-styleworld="editorial"] .article-stage,
html[data-styleworld="natur"] .article-stage,
html[data-styleworld="sand"] .article-stage,
html[data-styleworld="holz"] .article-stage {
  grid-template-columns: minmax(0, .66fr) minmax(460px, .98fr);
}

html[data-styleworld="editorial"] .article-side,
html[data-styleworld="natur"] .article-side,
html[data-styleworld="sand"] .article-side,
html[data-styleworld="holz"] .article-side {
  width: min(700px, 100%);
}

html[data-styleworld="editorial"] .article-side img,
html[data-styleworld="natur"] .article-side img,
html[data-styleworld="sand"] .article-side img,
html[data-styleworld="holz"] .article-side img {
  max-height: min(980px, calc(100vh - var(--header-h) - 38px));
  aspect-ratio: 4 / 5.5;
}

html[data-styleworld="editorial"] .article-side::before,
html[data-styleworld="natur"] .article-side::before,
html[data-styleworld="sand"] .article-side::before,
html[data-styleworld="holz"] .article-side::before {
  inset: -26px;
  opacity: .94;
}

html[data-styleworld="editorial"] .article-side {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, transparent), color-mix(in srgb, var(--panel-2) 46%, transparent));
}

html[data-styleworld="natur"] .article-side,
html[data-styleworld="wald"] .article-side {
  border-radius: clamp(26px, 4vw, 38px);
}

html[data-styleworld="sand"] .article-side,
html[data-styleworld="holz"] .article-side {
  box-shadow:
    0 34px 98px rgba(0, 0, 0, .18),
    inset 0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-styleworld="sand"] .article-side::after,
html[data-styleworld="holz"] .article-side::after {
  border-width: 2px;
}

html[data-styleworld="sand"] .article-section,
html[data-styleworld="holz"] .article-section,
html[data-styleworld="editorial"] .article-section,
html[data-styleworld="natur"] .article-section {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    inset 0 -30px 80px color-mix(in srgb, var(--accent) 5%, transparent),
    0 22px 56px rgba(0, 0, 0, .14);
}

@media (min-width: 981px) {
  .article-side {
    position: sticky;
  }
}

@media (max-width: 1200px) {
  .article-stage {
    grid-template-columns: minmax(0, .82fr) minmax(360px, .7fr);
  }

  html[data-styleworld="editorial"] .article-stage,
  html[data-styleworld="natur"] .article-stage,
  html[data-styleworld="sand"] .article-stage,
  html[data-styleworld="holz"] .article-stage {
    grid-template-columns: minmax(0, .76fr) minmax(380px, .82fr);
  }

  .article-side {
    width: min(560px, 100%);
  }
}

@media (max-width: 980px) {
  .article-stage,
  html[data-styleworld="editorial"] .article-stage,
  html[data-styleworld="natur"] .article-stage,
  html[data-styleworld="sand"] .article-stage,
  html[data-styleworld="holz"] .article-stage {
    grid-template-columns: 1fr;
  }

  .article-side {
    position: static;
    width: 100%;
    top: auto;
  }

  .article-side img,
  html[data-styleworld="editorial"] .article-side img,
  html[data-styleworld="natur"] .article-side img,
  html[data-styleworld="sand"] .article-side img,
  html[data-styleworld="holz"] .article-side img {
    max-height: 560px;
    aspect-ratio: 16 / 10;
  }
}



.article-stage {
  overflow: visible !important;
  isolation: isolate;
  opacity: 1 !important;
  filter: none !important;
  translate: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  transform: none !important;
}

.article-body,
.article-header,
.article-section,
.article-section > *,
.article-side,
.article-side > * {
  visibility: visible !important;
}

.article-body,
.article-header,
.article-section {
  position: relative;
  z-index: 3;
  opacity: 1 !important;
  filter: none !important;
}

.article-side {
  position: sticky !important;
  top: calc(var(--header-h) + 28px) !important;
  z-index: 4;
  align-self: start;
  opacity: 1 !important;
  filter: none !important;
  translate: none !important;
  rotate: 0deg !important;
  scale: 1 !important;
  transform: none !important;
}

.article-stage::before,
.article-stage::after {
  z-index: 0;
  pointer-events: none;
}

html[data-styleworld="editorial"] .article-stage {
  grid-template-columns: minmax(0, .7fr) minmax(440px, .9fr);
}

html[data-styleworld="editorial"] .article-body,
html[data-styleworld="editorial"] .article-header,
html[data-styleworld="editorial"] .article-section {
  opacity: 1 !important;
  color: var(--ink);
  filter: none !important;
}

html[data-styleworld="editorial"] .article-body p,
html[data-styleworld="editorial"] .article-section p,
html[data-styleworld="editorial"] .article-lead {
  color: var(--muted);
}

html[data-styleworld="editorial"] .article-header h2,
html[data-styleworld="editorial"] .article-section h3 {
  color: var(--ink);
}

html[data-styleworld="editorial"] .article-side {
  width: min(680px, 100%);
}

html[data-styleworld="editorial"] .article-side img {
  max-height: min(920px, calc(100vh - var(--header-h) - 44px));
  aspect-ratio: 4 / 5.35;
}

html[data-styleworld="editorial"] .article-header,
html[data-styleworld="editorial"] .article-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 86%, transparent), color-mix(in srgb, var(--panel-2) 64%, transparent)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 18rem);
}

@media (max-width: 1200px) {
  html[data-styleworld="editorial"] .article-stage {
    grid-template-columns: minmax(0, .78fr) minmax(360px, .78fr);
  }
}

@media (max-width: 980px) {
  .article-side {
    position: static !important;
    top: auto !important;
  }

  html[data-styleworld="editorial"] .article-stage {
    grid-template-columns: 1fr;
  }
}



/* Einheitliche Artikelaufteilung 60/40 */
@media (min-width: 981px) {
  .article-stage,
  html[data-styleworld="editorial"] .article-stage,
  html[data-styleworld="atelier"] .article-stage,
  html[data-styleworld="klartechnik"] .article-stage,
  html[data-styleworld="natur"] .article-stage,
  html[data-styleworld="graustufen"] .article-stage,
  html[data-styleworld="ozean"] .article-stage,
  html[data-styleworld="sand"] .article-stage,
  html[data-styleworld="vulkan"] .article-stage,
  html[data-styleworld="wald"] .article-stage,
  html[data-styleworld="holz"] .article-stage,
  html[data-styleworld="sonnenuntergang"] .article-stage,
  html[data-styleworld="gewitter"] .article-stage {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important;
    gap: clamp(34px, 4.6vw, 72px);
  }

  .article-side,
  html[data-styleworld] .article-side {
    width: 100% !important;
    max-width: none;
    justify-self: stretch;
  }

  .article-side img,
  html[data-styleworld] .article-side img {
    width: 100%;
    max-height: min(900px, calc(100vh - var(--header-h) - 48px)) !important;
    aspect-ratio: 4 / 5.25 !important;
  }
}

@media (max-width: 980px) {
  .article-stage,
  html[data-styleworld] .article-stage {
    grid-template-columns: 1fr !important;
  }

  .article-side,
  html[data-styleworld] .article-side {
    width: 100% !important;
  }
}



/* Abschlussbühne als heroartige Kontaktfläche */
.cta-stage {
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .92fr);
  align-items: center;
  min-height: clamp(540px, 72vh, 860px);
  padding-block: clamp(42px, 6.8vw, 92px);
  overflow: hidden;
}

.cta-copy {
  position: relative;
  z-index: 2;
  max-width: 46rem;
}

.cta-copy h2 {
  max-width: 8.8ch;
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 6vw, 6.6rem);
  line-height: 1.08;
  letter-spacing: -.044em;
  text-wrap: balance;
}

.cta-copy p {
  max-width: 34rem;
  color: var(--soft);
  font-size: clamp(1.06rem, 1.22vw, 1.22rem);
  line-height: 1.72;
}

.cta-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 26px;
  padding: 0;
  list-style: none;
}

.cta-highlights li {
  padding: 12px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 78%, transparent), color-mix(in srgb, var(--panel-2) 44%, transparent));
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.35;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
}

.cta-meta {
  margin: 0 0 28px;
}

.cta-meta p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 90%, var(--soft));
  font-size: 1.02rem;
  line-height: 1.5;
}

.cta-meta p + p {
  margin-top: 4px;
}

.cta-image {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(100%, 760px);
}

.cta-image img {
  width: 100%;
  max-height: min(860px, calc(100vh - var(--header-h) - 60px));
  aspect-ratio: 4 / 5.2;
  object-position: center;
}

html[data-styleworld="editorial"] .cta-stage,
html[data-styleworld="atelier"] .cta-stage,
html[data-styleworld="natur"] .cta-stage,
html[data-styleworld="sand"] .cta-stage,
html[data-styleworld="holz"] .cta-stage {
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .94fr);
}

html[data-styleworld="editorial"] .cta-copy h2,
html[data-styleworld="atelier"] .cta-copy h2,
html[data-styleworld="natur"] .cta-copy h2,
html[data-styleworld="sand"] .cta-copy h2,
html[data-styleworld="holz"] .cta-copy h2 {
  max-width: 7.8ch;
}

@media (max-width: 1200px) {
  .cta-stage,
  html[data-styleworld] .cta-stage {
    grid-template-columns: minmax(0, .94fr) minmax(320px, .88fr);
    min-height: auto;
  }

  .cta-image {
    width: min(100%, 620px);
  }
}

@media (max-width: 980px) {
  .cta-stage,
  html[data-styleworld] .cta-stage {
    grid-template-columns: 1fr !important;
    gap: 26px;
    min-height: auto;
  }

  .cta-copy h2 {
    max-width: 10ch;
  }

  .cta-image {
    justify-self: stretch;
    width: 100%;
  }

  .cta-image img {
    max-height: 620px;
    aspect-ratio: 16 / 10;
  }
}
.static-page .site-header {
  position: sticky;
}

.static-main {
  padding: clamp(52px, 7vw, 96px) 0 clamp(70px, 9vw, 130px);
}

.static-stage {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  overflow: visible;
}

.static-hero {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: calc(var(--radius) * 1.08);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--panel-2) 58%, transparent)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 20rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 24px 70px rgba(0, 0, 0, .18);
}

.static-hero h1 {
  margin: 12px 0 22px;
  color: var(--ink);
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: 1.08;
  letter-spacing: -.046em;
  text-wrap: balance;
}

.static-sections {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
}

.static-section {
  position: relative;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: calc(var(--radius) * .95);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 86%, transparent), color-mix(in srgb, var(--panel-2) 62%, transparent)),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 18rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 20px 54px rgba(0, 0, 0, .14);
}

.static-section::before {
  content: "";
  position: absolute;
  left: clamp(22px, 3vw, 38px);
  top: 0;
  width: clamp(54px, 8vw, 118px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent-2) 64%, transparent));
  transform: translateY(-50%);
}

.static-section h2 {
  margin: 0 0 16px;
  color: var(--accent-2);
  font-size: clamp(1.45rem, 2.2vw, 2.35rem);
  line-height: 1.22;
}

.static-section p {
  max-width: 72ch;
  margin: 0 0 1em;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.12vw, 1.16rem);
  line-height: 1.76;
}

.static-section p:last-child {
  margin-bottom: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 16px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 760;
}

.footer-links a:hover {
  color: var(--ink);
}

@media (max-width: 980px) {
  .static-stage {
    grid-template-columns: 1fr;
  }

  .static-hero {
    position: relative;
    top: auto;
  }

  .footer-links {
    justify-content: flex-start;
  }
}



body {
  line-height: 1.62;
}

.article-body p,
.static-section p,
.cta-copy p,
.gallery-intro p {
  line-height: 1.72;
}

.lead,
.article-lead {
  line-height: 1.58;
}

.article-body h3,
.static-section h2 {
  line-height: 1.22;
}

.static-stage {
  grid-template-columns: minmax(330px, .78fr) minmax(0, 1.22fr);
}

.static-hero {
  min-width: 0;
}

.static-hero h1 {
  max-width: 100%;
  font-size: clamp(2.55rem, 3.6vw, 4.1rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.static-hero p {
  line-height: 1.66;
}



/* Feinschliff statische Seiten */
.static-page .site-header nav {
  gap: 6px;
}

.static-page .site-header nav a {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border-width: 1px;
  background: color-mix(in srgb, var(--panel) 52%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    0 8px 20px rgba(0, 0, 0, .10);
  font-size: .78rem;
  letter-spacing: .08em;
}

.static-page .site-header nav a[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    0 10px 26px color-mix(in srgb, var(--accent) 12%, transparent);
}

.static-main {
  padding-top: clamp(28px, 4.4vw, 62px);
  padding-bottom: clamp(60px, 8vw, 112px);
}

.static-stage {
  margin-top: clamp(18px, 3vw, 42px);
  margin-bottom: clamp(44px, 6vw, 80px);
  padding-top: clamp(28px, 4vw, 54px);
}

.static-hero {
  top: calc(var(--header-h) + 22px);
  padding: clamp(20px, 2.6vw, 34px);
}

.static-hero h1 {
  margin-bottom: 18px;
  font-size: clamp(2.45rem, 3.25vw, 3.8rem);
  line-height: 1.12;
  letter-spacing: -.034em;
}

.static-hero .lead,
.static-hero p {
  max-width: 38ch;
  line-height: 1.58;
}

.static-sections {
  gap: clamp(16px, 1.8vw, 24px);
}

.static-section {
  padding: clamp(22px, 2.6vw, 36px);
}

.static-section h2 {
  margin-bottom: 14px;
  line-height: 1.22;
}

.static-section p {
  font-size: clamp(1rem, 1.06vw, 1.12rem);
  line-height: 1.68;
}

@media (max-width: 760px) {
  .static-main {
    padding-top: 20px;
  }

  .static-page .site-header nav a {
    font-size: .74rem;
    padding: 6px 10px;
  }

  .static-stage {
    margin-top: 24px;
    padding-top: 24px;
  }
}


.cta-stage {
  width: 100%;
  margin: clamp(54px, 7vw, 96px) 0 0;
  padding: clamp(54px, 7vw, 96px) clamp(26px, 6vw, 104px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-right: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-left: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 74% 48%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 24rem),
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 20rem),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 98%, transparent) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 46%, color-mix(in srgb, var(--bg) 66%, transparent) 76%, color-mix(in srgb, var(--bg) 90%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  box-shadow: none;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr) !important;
  gap: clamp(26px, 4vw, 44px);
  align-items: center;
  min-height: min(900px, calc(100svh - var(--header-h)));
  overflow: hidden;
}

.cta-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 68% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 18rem);
  background-size: 180px 100%, auto;
  opacity: .16;
}

.cta-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .12) 100%),
    radial-gradient(circle at 68% 54%, rgba(0, 0, 0, 0) 0 22%, rgba(0, 0, 0, .22) 68%, rgba(0, 0, 0, .34) 100%);
  opacity: .9;
}

.cta-copy,
.cta-image {
  position: relative;
  z-index: 2;
}

.cta-copy {
  max-width: 42rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.cta-copy .kicker {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: .92rem;
  letter-spacing: .24em;
}

.cta-copy h2 {
  max-width: 7.1ch;
  margin: 0 0 28px;
  font-size: clamp(4rem, 7.3vw, 7.9rem);
  line-height: 1.08;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.cta-copy p {
  max-width: 33rem;
  margin: 0 0 1em;
  color: color-mix(in srgb, var(--ink) 90%, var(--soft));
  font-size: clamp(1.05rem, 1.22vw, 1.2rem);
  line-height: 1.66;
}

.cta-highlights {
  margin: 34px 0 26px;
  gap: 10px;
}

.cta-highlights li {
  padding: 11px 16px;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 7%, transparent);
}

.cta-meta {
  margin: 0 0 30px;
}

.cta-meta p {
  color: color-mix(in srgb, var(--ink) 94%, var(--soft));
}

.cta-image {
  align-self: stretch;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  overflow: visible;
}

.cta-image::before {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: min(52vw, 580px);
  height: min(42vw, 440px);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
  filter: blur(22px);
  opacity: .52;
  pointer-events: none;
}

.cta-image img {
  width: min(100%, 840px);
  max-width: 100%;
  max-height: min(860px, calc(100svh - var(--header-h) - 16px));
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 40px 90px rgba(0, 0, 0, .42));
}

@media (max-width: 1280px) {
  .cta-stage {
    grid-template-columns: minmax(0, .94fr) minmax(360px, 1.02fr) !important;
    padding-inline: clamp(24px, 4.5vw, 72px);
  }

  .cta-copy h2 {
    font-size: clamp(3.5rem, 6.6vw, 6.6rem);
  }

  .cta-image img {
    width: min(100%, 720px);
  }
}

@media (max-width: 980px) {
  .cta-stage {
    min-height: auto;
    grid-template-columns: 1fr !important;
    gap: 24px;
    padding-block: clamp(40px, 8vw, 68px);
  }

  .cta-copy {
    max-width: none;
  }

  .cta-copy h2 {
    max-width: 9ch;
    font-size: clamp(3rem, 10vw, 5.1rem);
  }

  .cta-copy p {
    max-width: none;
  }

  .cta-image {
    justify-self: stretch;
    align-items: end;
    min-height: 0;
  }

  .cta-image img {
    width: min(100%, 640px);
    max-height: 560px;
    margin-left: auto;
  }
}


/* Abschlussbühne als zweite Hero-Bühne mit bühnenfüllendem Hintergrundbild */
.hero-stage--closing {
  min-height: clamp(620px, calc(100svh - var(--header-h) - 18px), 760px);
  margin-top: 0;
  padding: clamp(42px, 4.8vw, 68px) clamp(26px, 6vw, 86px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  background: var(--bg);
}

.hero-stage--closing::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  mask-image: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 100%);
  background-size: 160px 100%;
}

.hero-stage--closing::after {
  background:
    radial-gradient(circle at 75% 52%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 19rem),
    radial-gradient(circle at 36% 24%, color-mix(in srgb, var(--accent) 8%, transparent) 0, transparent 18rem),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .03) 100%);
  background-size: auto;
  opacity: .22;
}

.hero-bg--closing {
  object-position: 76% center;
  opacity: 1;
  filter: saturate(1.05) contrast(1.08) brightness(.8);
}

.hero-overlay--closing {
  background:
    linear-gradient(90deg, rgba(8, 10, 12, .9) 0%, rgba(8, 10, 12, .82) 28%, rgba(8, 10, 12, .54) 48%, rgba(8, 10, 12, .18) 72%, rgba(8, 10, 12, .08) 100%),
    linear-gradient(180deg, rgba(8, 10, 12, .12) 0%, rgba(8, 10, 12, .08) 44%, rgba(8, 10, 12, .68) 100%);
}

.hero-content--closing {
  width: min(100%, 43rem);
  max-width: 43rem;
  margin-left: clamp(10px, 1.6vw, 20px);
  padding: clamp(26px, 2.8vw, 38px) clamp(26px, 2.9vw, 40px);
  padding-left: clamp(26px, 2.9vw, 40px);
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: clamp(20px, 2.6vw, 34px);
  background: linear-gradient(180deg, rgba(8, 10, 12, .72) 0%, rgba(8, 10, 12, .58) 100%);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

.hero-content--closing::before {
  display: none;
}

.hero-stage--closing .kicker {
  margin-bottom: 18px;
}

.hero-stage--closing h2 {
  max-width: 7ch;
  margin: 0 0 22px;
  color: var(--ink);
  font-size: clamp(3.6rem, 5.5vw, 6.1rem);
  line-height: 1.08;
  letter-spacing: -.048em;
  text-wrap: balance;
  text-shadow: 0 24px 70px rgba(0, 0, 0, .44);
}

.hero-stage--closing .lead {
  max-width: 34rem;
  margin: 0 0 .82em;
  color: color-mix(in srgb, var(--ink) 94%, var(--soft));
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  line-height: 1.58;
}

.seeportal-project-links {
  width: min(100%, 58rem);
  margin-top: clamp(24px, 3vw, 42px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(210, 144, 91, .28);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(19, 13, 10, .72), rgba(46, 28, 20, .52));
  box-shadow: 0 24px 56px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}

.seeportal-project-links__eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.seeportal-project-links h3 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.15;
}

.seeportal-project-links__empty {
  max-width: 44rem;
  margin: 0;
  color: rgba(255, 248, 236, .78);
  font-size: clamp(1rem, 1.1vw, 1.14rem);
  line-height: 1.7;
}

.seeportal-project-links__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.seeportal-project-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 248, 236, .16);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  background: rgba(255, 248, 236, .055);
}

.seeportal-project-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
}

.seeportal-project-card__body {
  display: grid;
  gap: 6px;
}

.seeportal-project-card__body strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.25;
}

.seeportal-project-card__body span,
.seeportal-project-card__body em {
  color: rgba(255, 248, 236, .72);
  font-size: .95rem;
  line-height: 1.45;
  font-style: normal;
}

.seeportal-project-card__body small {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-actions--closing {
  margin-top: 30px;
}

.hero-stage--closing .button {
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}

html[data-mode="light"] .hero-stage--closing,
html[data-mode="auto"] .hero-stage--closing {
  background: #0c0f10;
  color: #f7efe2;
}

html[data-mode="light"] .hero-stage--closing h2,
html[data-mode="auto"] .hero-stage--closing h2 {
  color: #f7efe2;
}

html[data-mode="light"] .hero-stage--closing .lead,
html[data-mode="auto"] .hero-stage--closing .lead {
  color: rgba(247, 239, 226, .82);
}

html[data-mode="light"] .hero-content--closing,
html[data-mode="auto"] .hero-content--closing {
  background: linear-gradient(180deg, rgba(8, 10, 12, .82) 0%, rgba(8, 10, 12, .68) 100%);
  border-color: rgba(247, 239, 226, .12);
}

html[data-mode="light"] .site-footer,
html[data-mode="auto"] .site-footer {
  background: linear-gradient(180deg, rgba(8, 10, 12, .94), rgba(8, 10, 12, .98));
  border-top-color: rgba(247, 239, 226, .12);
  color: rgba(247, 239, 226, .76);
}

html[data-mode="light"] .footer-links a,
html[data-mode="auto"] .footer-links a {
  color: rgba(247, 239, 226, .82);
}

html[data-mode="light"] .footer-links a:hover,
html[data-mode="auto"] .footer-links a:hover {
  color: #fff3df;
}

@media (max-width: 980px) {
  .hero-stage--closing {
    min-height: clamp(580px, calc(100svh - var(--header-h)), 760px);
    padding: clamp(48px, 9vw, 84px) clamp(22px, 6vw, 34px);
  }

  .hero-content--closing {
    max-width: 100%;
    margin-left: 0;
    padding: 24px 22px 26px;
  }

  .hero-stage--closing h2 {
    max-width: 8ch;
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .hero-bg--closing {
    object-position: 72% center;
  }
}


html[data-styleworld="editorial"] {
  --bg: #0a0a09;
  --ink: #f4ecdc;
  --muted: #c8bda8;
  --soft: rgba(244, 236, 220, .78);
  --line: rgba(190, 158, 96, .22);
  --panel: #141412;
  --panel-2: #1d1b16;
  --accent: #b99555;
  --accent-2: #e6dccb;
  --radius: 6px;
  --radius-soft: 10px;
  --stage-width: min(1120px, calc(100% - 76px));
  --copy-width: 74ch;
  --hero-title-max: 10.6ch;
}

html[data-styleworld="editorial"] .site-header {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 -3px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}

html[data-styleworld="editorial"] nav a,
html[data-styleworld="editorial"] .button,
html[data-styleworld="editorial"] .mode-buttons button {
  border-radius: 2px;
}

html[data-styleworld="editorial"] .hero-stage::before {
  inset: clamp(22px, 3vw, 52px) clamp(28px, 5vw, 82px);
  border-radius: 0;
  border-top: 4px double color-mix(in srgb, var(--accent) 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-left: 0;
  border-right: 0;
  mask-image: none;
}

html[data-styleworld="editorial"] .hero-stage::after {
  background:
    linear-gradient(90deg, transparent 0 18%, color-mix(in srgb, var(--accent) 18%, transparent) 18% 18.15%, transparent 18.15% 100%),
    linear-gradient(90deg, transparent 0 68%, color-mix(in srgb, var(--ink) 8%, transparent) 68% 68.08%, transparent 68.08% 100%);
  background-size: 100% 100%;
  opacity: .42;
  mix-blend-mode: normal;
}

html[data-styleworld="editorial"] .hero-content {
  max-width: 820px;
  padding: clamp(20px, 3vw, 42px) clamp(22px, 3.4vw, 48px);
  border-left: 6px solid color-mix(in srgb, var(--accent) 76%, transparent);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .24) 72%, transparent);
  backdrop-filter: blur(4px);
}

html[data-styleworld="editorial"] .hero-content::before {
  display: none;
}

html[data-styleworld="editorial"] .stage {
  border-radius: 0;
  border-top: 4px double color-mix(in srgb, var(--accent) 26%, transparent);
  border-left: 0;
  border-right: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 72%, transparent), color-mix(in srgb, var(--panel) 98%, transparent));
  background-size: 96px 100%, auto;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .26);
}

html[data-styleworld="editorial"] .article-stage {
  grid-template-columns: minmax(0, 1.12fr) minmax(240px, .38fr);
}

html[data-styleworld="editorial"] .article-header {
  padding: clamp(24px, 3vw, 42px) 0 clamp(26px, 3.2vw, 44px);
  border-radius: 0;
}

html[data-styleworld="editorial"] .article-section {
  padding: clamp(22px, 3vw, 38px) 0 clamp(22px, 3vw, 38px) clamp(22px, 2.8vw, 38px);
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-styleworld="editorial"] .article-section::before {
  left: 0;
  width: clamp(90px, 12vw, 190px);
  height: 1px;
  border-radius: 0;
}

html[data-styleworld="editorial"] .article-side {
  border-radius: 0;
  border-top: 4px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: 8px;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

html[data-styleworld="editorial"] .article-side img,
html[data-styleworld="editorial"] .cta-image img,
html[data-styleworld="editorial"] .gallery-card,
html[data-styleworld="editorial"] .gallery-card img {
  border-radius: 0;
}

html[data-styleworld="editorial"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 8;
  min-height: clamp(410px, 38vw, 560px);
}

html[data-styleworld="editorial"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 4;
  min-height: clamp(410px, 38vw, 560px);
}

html[data-styleworld="editorial"] .gallery-card figcaption {
  left: 0;
  right: 0;
  bottom: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: rgba(10, 10, 9, .88);
  backdrop-filter: blur(4px);
}

html[data-styleworld="graustufen"] {
  --bg: #080909;
  --ink: #f2f0eb;
  --muted: #beb9ae;
  --soft: rgba(242, 240, 235, .76);
  --line: rgba(242, 240, 235, .20);
  --panel: #121313;
  --panel-2: #1b1c1d;
  --accent: #f2f0eb;
  --accent-2: #8f8d88;
  --radius: 0px;
  --radius-soft: 0px;
  --stage-width: min(1160px, calc(100% - 72px));
  --copy-width: 70ch;
  --hero-img-opacity: .76;
}

html[data-styleworld="graustufen"] body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255,255,255,.024) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: 80px 80px, 80px 80px, auto;
}

html[data-styleworld="graustufen"] .site-header {
  background: rgba(8, 9, 9, .96);
  border-bottom-color: rgba(242, 240, 235, .18);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .42);
}

html[data-styleworld="graustufen"] nav a,
html[data-styleworld="graustufen"] .button,
html[data-styleworld="graustufen"] .mode-buttons button {
  border-radius: 0;
  background: #111;
}

html[data-styleworld="graustufen"] nav a.is-active,
html[data-styleworld="graustufen"] nav a[aria-current="page"],
html[data-styleworld="graustufen"] .mode-buttons button[aria-pressed="true"] {
  background: #e8e5de;
  color: #101010;
  border-color: #e8e5de;
  box-shadow: none;
}

html[data-styleworld="graustufen"] .hero-bg,
html[data-styleworld="graustufen"] .article-side img,
html[data-styleworld="graustufen"] .cta-image img,
html[data-styleworld="graustufen"] .gallery-card img {
  filter: none;
}

html[data-styleworld="graustufen"] .hero-stage::before {
  inset: clamp(20px, 3vw, 48px);
  border-radius: 0;
  border-color: rgba(242, 240, 235, .28);
  mask-image: none;
}

html[data-styleworld="graustufen"] .hero-stage::after {
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(255,255,255,.16) 22% 22.12%, transparent 22.12% 100%),
    linear-gradient(180deg, transparent 0 70%, rgba(255,255,255,.08) 70% 70.12%, transparent 70.12% 100%);
  opacity: .58;
  mix-blend-mode: normal;
}

html[data-styleworld="graustufen"] .hero-content {
  width: min(780px, 100%);
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid rgba(242, 240, 235, .22);
  border-radius: 0;
  background: rgba(8, 9, 9, .68);
  backdrop-filter: blur(2px);
}

html[data-styleworld="graustufen"] .stage,
html[data-styleworld="graustufen"] .article-section {
  border-radius: 0;
  background: linear-gradient(180deg, #161718, #101111);
  box-shadow: 0 22px 82px rgba(0, 0, 0, .34);
}

html[data-styleworld="graustufen"] .article-stage {
  grid-template-columns: minmax(0, .96fr) minmax(280px, .56fr);
}

html[data-styleworld="graustufen"] .article-section {
  border: 1px solid rgba(242, 240, 235, .16);
}

html[data-styleworld="graustufen"] .article-section::before,
html[data-styleworld="graustufen"] .article-header::after {
  background: #f2f0eb;
  opacity: .52;
}

html[data-styleworld="graustufen"] .article-side,
html[data-styleworld="graustufen"] .gallery-card,
html[data-styleworld="graustufen"] .lightbox-panel {
  border-radius: 0;
  border-color: rgba(242, 240, 235, .2);
  background: #101111;
}

html[data-styleworld="graustufen"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(n) {
  grid-column: span 6;
  min-height: clamp(280px, 28vw, 430px);
  grid-row: auto;
}

html[data-styleworld="graustufen"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1),
html[data-styleworld="graustufen"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(6) {
  grid-column: span 12;
  min-height: clamp(420px, 38vw, 560px);
}

html[data-styleworld="graustufen"] .gallery-card::before {
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.44));
  opacity: .72;
}

html[data-styleworld="graustufen"] .gallery-card figcaption {
  left: 18px;
  right: 18px;
  bottom: 18px;
  border-radius: 0;
  background: rgba(8, 9, 9, .84);
  border-color: rgba(242, 240, 235, .18);
  backdrop-filter: none;
}

html[data-styleworld="atelier"] {
  --bg: #160f0b;
  --ink: #f7ecdf;
  --muted: #d5bea8;
  --soft: rgba(247, 236, 223, .78);
  --line: rgba(183, 121, 80, .24);
  --panel: #211713;
  --panel-2: #33241a;
  --accent: #b7744c;
  --accent-2: #d6c0a1;
  --radius: 28px;
  --radius-soft: 58px;
  --stage-width: min(1210px, calc(100% - 58px));
  --copy-width: 64ch;
  --hero-title-max: 9.8ch;
}

html[data-styleworld="atelier"] body {
  background:
    radial-gradient(circle at 10% 0%, rgba(183, 116, 76, .20), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(214, 192, 161, .10), transparent 36rem),
    linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: auto, auto, 42px 42px, auto;
}

html[data-styleworld="atelier"] .site-header {
  margin: 10px clamp(12px, 2vw, 28px) 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 0 0 30px 30px;
  background: rgba(22, 15, 11, .9);
}

html[data-styleworld="atelier"] nav a,
html[data-styleworld="atelier"] .button,
html[data-styleworld="atelier"] .mode-buttons button {
  border-radius: 18px 7px 18px 7px;
}

html[data-styleworld="atelier"] .hero-stage::before {
  inset: clamp(18px, 3vw, 42px);
  border-radius: 60px 18px 60px 22px;
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  mask-image: none;
}

html[data-styleworld="atelier"] .hero-stage::after {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 18rem),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 25rem),
    linear-gradient(132deg, transparent 0 43%, color-mix(in srgb, var(--accent) 12%, transparent) 43% 44.2%, transparent 44.2% 100%);
  opacity: .52;
}

html[data-styleworld="atelier"] .hero-content {
  width: min(760px, 100%);
  margin-left: clamp(0px, 4vw, 64px);
  rotate: -1.1deg;
  padding: clamp(24px, 3.2vw, 44px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 54px 20px 54px 22px;
  background:
    radial-gradient(circle at 4% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 16rem),
    color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(6px);
}

html[data-styleworld="atelier"] .hero-content::before {
  left: 24px;
  top: 22px;
  bottom: 22px;
  width: 5px;
  border-radius: 999px;
}

html[data-styleworld="atelier"] .stage {
  border-radius: 54px 18px 54px 22px;
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 20rem),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow: 0 30px 88px rgba(0, 0, 0, .28), inset 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-styleworld="atelier"] .article-stage {
  grid-template-columns: minmax(0, .86fr) minmax(300px, .64fr);
  gap: clamp(34px, 5vw, 72px);
}

html[data-styleworld="atelier"] .article-header {
  padding: clamp(24px, 3vw, 40px);
  border-radius: 36px 14px 36px 14px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

html[data-styleworld="atelier"] .article-section {
  border-radius: 36px 12px 36px 12px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 16rem),
    color-mix(in srgb, var(--panel-2) 72%, transparent);
}

html[data-styleworld="atelier"] .article-section:nth-of-type(odd) {
  translate: clamp(0px, 2vw, 24px) 0;
  rotate: -.35deg;
}

html[data-styleworld="atelier"] .article-section:nth-of-type(even) {
  translate: clamp(0px, -2vw, -24px) 0;
  rotate: .35deg;
}

html[data-styleworld="atelier"] .article-side {
  border-radius: 48px 16px 48px 18px;
  padding: clamp(12px, 1.8vw, 22px);
  rotate: .7deg;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent), color-mix(in srgb, var(--panel) 82%, transparent));
}

html[data-styleworld="atelier"] .article-side img,
html[data-styleworld="atelier"] .cta-image img {
  border-radius: 38px 12px 38px 14px;
}

html[data-styleworld="atelier"] .gallery-grid {
  gap: clamp(16px, 2vw, 28px);
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(1) {
  grid-column: span 5;
  min-height: clamp(440px, 42vw, 620px);
  border-radius: 56px 18px 56px 22px;
  rotate: -.5deg;
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(2) {
  grid-column: span 7;
  min-height: clamp(300px, 30vw, 460px);
  translate: 0 42px;
  rotate: .45deg;
}

html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(3),
html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(4),
html[data-styleworld="atelier"] .gallery-grid:not(.gallery-grid--single):not(.gallery-grid--pair) .gallery-card:nth-child(5) {
  grid-column: span 4;
  border-radius: 34px 12px 34px 12px;
}

html[data-styleworld="atelier"] .gallery-card figcaption {
  border-radius: 24px 8px 24px 8px;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
}



/* Hero- und Abschluss-Text bleiben als freie Bühnentypografie geführt. */
html[data-styleworld="editorial"] .hero-content,
html[data-styleworld="graustufen"] .hero-content,
html[data-styleworld="atelier"] .hero-content {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

html[data-styleworld="editorial"] .hero-content {
  padding-left: clamp(14px, 2.2vw, 34px);
  border-left: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
}

html[data-styleworld="graustufen"] .hero-content {
  width: min(780px, 100%);
  padding-left: clamp(14px, 2vw, 30px);
  border-left: 2px solid rgba(242, 240, 235, .62);
}

html[data-styleworld="atelier"] .hero-content {
  width: min(760px, 100%);
  margin-left: clamp(0px, 4vw, 64px);
  padding-left: clamp(18px, 2.6vw, 38px);
  rotate: 0deg;
}

html[data-styleworld="atelier"] .hero-content::before {
  left: 0;
  top: 8px;
  bottom: 12px;
  width: 3px;
}

.hero-content--closing,
html[data-mode="light"] .hero-content--closing,
html[data-mode="auto"] .hero-content--closing,
html[data-styleworld="editorial"] .hero-content--closing,
html[data-styleworld="graustufen"] .hero-content--closing,
html[data-styleworld="atelier"] .hero-content--closing {
  max-width: 43rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-content--closing::before {
  display: none;
}

/* Graustufen führt die Oberfläche, nicht die Farbigkeit der Projektbilder. */
html[data-styleworld="graustufen"] .hero-bg,
html[data-styleworld="graustufen"] .article-side img,
html[data-styleworld="graustufen"] .cta-image img,
html[data-styleworld="graustufen"] .gallery-card img {
  filter: none !important;
}



/* S3 - übrige Stilwelten harmonisiert: freie Hero-Texte, keine Bildfilter, gedämpfte Paletten. */
html[data-styleworld="klartechnik"] {
  --bg: #071018;
  --ink: #eff4f4;
  --muted: #aebdc0;
  --soft: rgba(239, 244, 244, .72);
  --line: rgba(134, 158, 163, .18);
  --panel: #0d171e;
  --panel-2: #16242c;
  --accent: #8eb1bb;
  --accent-2: #6f858c;
  --header-bg: rgba(7, 16, 24, .92);
  --radius: 6px;
  --radius-soft: 10px;
  --world-texture-opacity: .20;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(90deg, transparent 0 11%, rgba(142,177,187,.07) 11% 11.08%, transparent 11.08% 100%),
    linear-gradient(180deg, transparent 0 19%, rgba(142,177,187,.045) 19% 19.07%, transparent 19.07% 100%);
}

html[data-styleworld="natur"] {
  --bg: #10160f;
  --ink: #f0eadb;
  --muted: #c0b9a3;
  --soft: rgba(240, 234, 219, .74);
  --line: rgba(133, 145, 91, .16);
  --panel: #171f15;
  --panel-2: #202a1c;
  --accent: #909a6a;
  --accent-2: #a49368;
  --header-bg: rgba(16, 22, 15, .92);
  --radius: 30px;
  --radius-soft: 56px;
  --world-texture-opacity: .18;
  --world-texture:
    radial-gradient(ellipse at 12% 4%, rgba(144,154,106,.16), transparent 30rem),
    radial-gradient(ellipse at 86% 18%, rgba(164,147,104,.09), transparent 34rem);
}

html[data-styleworld="ozean"] {
  --bg: #061319;
  --ink: #edf6f4;
  --muted: #abc2c4;
  --soft: rgba(237, 246, 244, .73);
  --line: rgba(92, 139, 147, .18);
  --panel: #0b1f26;
  --panel-2: #15313a;
  --accent: #7aaeb2;
  --accent-2: #87a79d;
  --header-bg: rgba(6, 19, 25, .92);
  --radius: 24px;
  --radius-soft: 50px;
  --world-texture-opacity: .22;
  --world-texture:
    radial-gradient(ellipse at 78% 8%, rgba(122,174,178,.18), transparent 31rem),
    repeating-radial-gradient(ellipse at 30% 18%, rgba(122,174,178,.055) 0 1px, transparent 1px 34px);
}

html[data-styleworld="sand"] {
  --bg: #18120b;
  --ink: #f4ead4;
  --muted: #c8b797;
  --soft: rgba(244, 234, 212, .74);
  --line: rgba(154, 118, 76, .17);
  --panel: #241b10;
  --panel-2: #332718;
  --accent: #b8955e;
  --accent-2: #907456;
  --header-bg: rgba(24, 18, 11, .92);
  --radius: 18px;
  --radius-soft: 34px;
  --world-texture-opacity: .20;
  --world-texture-blend: normal;
  --world-texture:
    linear-gradient(177deg, transparent 0 28%, rgba(184,149,94,.08) 28% 28.35%, transparent 28.35% 100%),
    linear-gradient(183deg, transparent 0 58%, rgba(144,116,86,.07) 58% 58.3%, transparent 58.3% 100%);
}

html[data-styleworld="vulkan"] {
  --bg: #0e0d0c;
  --ink: #f2e5d8;
  --muted: #bfa999;
  --soft: rgba(242, 229, 216, .72);
  --line: rgba(149, 82, 61, .18);
  --panel: #191513;
  --panel-2: #251d18;
  --accent: #9c5643;
  --accent-2: #8b7664;
  --header-bg: rgba(14, 13, 12, .93);
  --radius: 10px;
  --radius-soft: 24px;
  --world-texture-opacity: .24;
  --world-texture:
    radial-gradient(circle at 78% 10%, rgba(156,86,67,.18), transparent 18rem),
    linear-gradient(130deg, transparent 0 44%, rgba(156,86,67,.09) 44% 45%, transparent 45% 100%),
    linear-gradient(38deg, transparent 0 62%, rgba(139,118,100,.07) 62% 62.7%, transparent 62.7% 100%);
}

html[data-styleworld="wald"] {
  --bg: #08100b;
  --ink: #ece8d7;
  --muted: #b7bea6;
  --soft: rgba(236, 232, 215, .73);
  --line: rgba(91, 124, 83, .17);
  --panel: #101912;
  --panel-2: #1a261b;
  --accent: #6f8358;
  --accent-2: #776d55;
  --header-bg: rgba(8, 16, 11, .92);
  --radius: 28px;
  --radius-soft: 58px;
  --world-texture-opacity: .20;
  --world-texture:
    repeating-linear-gradient(90deg, rgba(111,131,88,.055) 0 1px, transparent 1px 42px),
    radial-gradient(ellipse at 10% 0%, rgba(111,131,88,.13), transparent 30rem);
}

html[data-styleworld="holz"] {
  --bg: #130d08;
  --ink: #f2e4d2;
  --muted: #c5ae94;
  --soft: rgba(242, 228, 210, .73);
  --line: rgba(139, 95, 62, .17);
  --panel: #1e150e;
  --panel-2: #2f2115;
  --accent: #a87950;
  --accent-2: #b19a78;
  --header-bg: rgba(19, 13, 8, .92);
  --radius: 18px;
  --radius-soft: 38px;
  --world-texture-opacity: .24;
  --world-texture-blend: normal;
  --world-texture:
    repeating-linear-gradient(98deg, rgba(168,121,80,.07) 0 1px, transparent 1px 22px),
    repeating-radial-gradient(ellipse at 65% 12%, rgba(177,154,120,.055) 0 1px, transparent 1px 28px);
}

html[data-styleworld="sonnenuntergang"] {
  --bg: #1a1011;
  --ink: #f4e5dc;
  --muted: #d0b3a9;
  --soft: rgba(244, 229, 220, .74);
  --line: rgba(158, 93, 76, .17);
  --panel: #251817;
  --panel-2: #35221e;
  --accent: #b5795d;
  --accent-2: #9d7774;
  --header-bg: rgba(26, 16, 17, .92);
  --radius: 26px;
  --radius-soft: 54px;
  --world-texture-opacity: .24;
  --world-texture:
    radial-gradient(ellipse at 80% 18%, rgba(181,121,93,.18), transparent 22rem),
    radial-gradient(ellipse at 34% 18%, rgba(157,119,116,.11), transparent 28rem),
    linear-gradient(177deg, transparent 0 55%, rgba(181,121,93,.075) 55% 56%, rgba(157,119,116,.055) 56% 58%, transparent 58% 100%);
}

html[data-styleworld="gewitter"] {
  --bg: #080b11;
  --ink: #edf0f4;
  --muted: #aab2bd;
  --soft: rgba(237, 240, 244, .72);
  --line: rgba(91, 111, 139, .18);
  --panel: #0f141d;
  --panel-2: #19202c;
  --accent: #8291a8;
  --accent-2: #5f738c;
  --header-bg: rgba(8, 11, 17, .93);
  --radius: 10px;
  --radius-soft: 28px;
  --world-texture-opacity: .26;
  --world-texture:
    linear-gradient(116deg, transparent 0 46%, rgba(130,145,168,.13) 46% 46.4%, transparent 46.4% 100%),
    linear-gradient(72deg, transparent 0 61%, rgba(95,115,140,.08) 61% 61.3%, transparent 61.3% 100%),
    radial-gradient(circle at 82% 10%, rgba(130,145,168,.15), transparent 18rem);
}

html[data-styleworld="klartechnik"][data-mode="light"] {
  --bg: #eef2f1;
  --ink: #131d22;
  --muted: #58666a;
  --line: rgba(65, 88, 96, .15);
  --panel: #fafcfc;
  --panel-2: #dde7e9;
  --accent: #527783;
  --accent-2: #6d7b80;
}

html[data-styleworld="natur"][data-mode="light"] {
  --bg: #efeadb;
  --ink: #202016;
  --muted: #67624f;
  --line: rgba(96, 106, 62, .14);
  --panel: #fbf7eb;
  --panel-2: #e1dcc8;
  --accent: #6f784c;
  --accent-2: #87794f;
}

html[data-styleworld="ozean"][data-mode="light"] {
  --bg: #e9f1f0;
  --ink: #102329;
  --muted: #536b6d;
  --line: rgba(55, 104, 112, .15);
  --panel: #f7fbfa;
  --panel-2: #d8e7e6;
  --accent: #4f7f83;
  --accent-2: #667f78;
}

html[data-styleworld="sand"][data-mode="light"] {
  --bg: #f0e6d2;
  --ink: #21180f;
  --muted: #695b45;
  --line: rgba(129, 94, 54, .15);
  --panel: #fbf5e8;
  --panel-2: #e2d2b4;
  --accent: #80613a;
  --accent-2: #897255;
}

html[data-styleworld="vulkan"][data-mode="light"] {
  --bg: #ede4dd;
  --ink: #221714;
  --muted: #6c5a51;
  --line: rgba(115, 65, 49, .15);
  --panel: #fbf4ee;
  --panel-2: #ddcfc6;
  --accent: #7f493b;
  --accent-2: #756454;
}

html[data-styleworld="wald"][data-mode="light"] {
  --bg: #e8ecdf;
  --ink: #172015;
  --muted: #596250;
  --line: rgba(65, 91, 58, .15);
  --panel: #f7f9f1;
  --panel-2: #d5ddc9;
  --accent: #526640;
  --accent-2: #695f49;
}

html[data-styleworld="holz"][data-mode="light"] {
  --bg: #eee3d3;
  --ink: #201710;
  --muted: #655643;
  --line: rgba(106, 73, 47, .15);
  --panel: #fbf4e9;
  --panel-2: #dec9ad;
  --accent: #765739;
  --accent-2: #8a7657;
}

html[data-styleworld="sonnenuntergang"][data-mode="light"] {
  --bg: #f1e3da;
  --ink: #251715;
  --muted: #705b56;
  --line: rgba(139, 76, 62, .15);
  --panel: #fcf4ee;
  --panel-2: #e2cbc1;
  --accent: #8b5a49;
  --accent-2: #806563;
}

html[data-styleworld="gewitter"][data-mode="light"] {
  --bg: #e7ebef;
  --ink: #111821;
  --muted: #56616d;
  --line: rgba(57, 75, 99, .15);
  --panel: #f7f9fb;
  --panel-2: #d9e0e8;
  --accent: #536276;
  --accent-2: #5a6d84;
}

@media (prefers-color-scheme: light) {
  html[data-styleworld="klartechnik"][data-mode="auto"] {
    --bg: #eef2f1;
    --ink: #131d22;
    --muted: #58666a;
    --line: rgba(65, 88, 96, .15);
    --panel: #fafcfc;
    --panel-2: #dde7e9;
    --accent: #527783;
    --accent-2: #6d7b80;
  }
  html[data-styleworld="natur"][data-mode="auto"] {
    --bg: #efeadb;
    --ink: #202016;
    --muted: #67624f;
    --line: rgba(96, 106, 62, .14);
    --panel: #fbf7eb;
    --panel-2: #e1dcc8;
    --accent: #6f784c;
    --accent-2: #87794f;
  }
  html[data-styleworld="ozean"][data-mode="auto"] {
    --bg: #e9f1f0;
    --ink: #102329;
    --muted: #536b6d;
    --line: rgba(55, 104, 112, .15);
    --panel: #f7fbfa;
    --panel-2: #d8e7e6;
    --accent: #4f7f83;
    --accent-2: #667f78;
  }
  html[data-styleworld="sand"][data-mode="auto"] {
    --bg: #f0e6d2;
    --ink: #21180f;
    --muted: #695b45;
    --line: rgba(129, 94, 54, .15);
    --panel: #fbf5e8;
    --panel-2: #e2d2b4;
    --accent: #80613a;
    --accent-2: #897255;
  }
  html[data-styleworld="vulkan"][data-mode="auto"] {
    --bg: #ede4dd;
    --ink: #221714;
    --muted: #6c5a51;
    --line: rgba(115, 65, 49, .15);
    --panel: #fbf4ee;
    --panel-2: #ddcfc6;
    --accent: #7f493b;
    --accent-2: #756454;
  }
  html[data-styleworld="wald"][data-mode="auto"] {
    --bg: #e8ecdf;
    --ink: #172015;
    --muted: #596250;
    --line: rgba(65, 91, 58, .15);
    --panel: #f7f9f1;
    --panel-2: #d5ddc9;
    --accent: #526640;
    --accent-2: #695f49;
  }
  html[data-styleworld="holz"][data-mode="auto"] {
    --bg: #eee3d3;
    --ink: #201710;
    --muted: #655643;
    --line: rgba(106, 73, 47, .15);
    --panel: #fbf4e9;
    --panel-2: #dec9ad;
    --accent: #765739;
    --accent-2: #8a7657;
  }
  html[data-styleworld="sonnenuntergang"][data-mode="auto"] {
    --bg: #f1e3da;
    --ink: #251715;
    --muted: #705b56;
    --line: rgba(139, 76, 62, .15);
    --panel: #fcf4ee;
    --panel-2: #e2cbc1;
    --accent: #8b5a49;
    --accent-2: #806563;
  }
  html[data-styleworld="gewitter"][data-mode="auto"] {
    --bg: #e7ebef;
    --ink: #111821;
    --muted: #56616d;
    --line: rgba(57, 75, 99, .15);
    --panel: #f7f9fb;
    --panel-2: #d9e0e8;
    --accent: #536276;
    --accent-2: #5a6d84;
  }
}

/* Magazin-Hero bleibt eine freie Bühne, kein Textkasten. */
.hero-content,
html[data-styleworld] .hero-content,
html[data-mode="light"] .hero-content,
html[data-mode="auto"] .hero-content,
.hero-content--closing,
html[data-styleworld] .hero-content--closing,
html[data-mode="light"] .hero-content--closing,
html[data-mode="auto"] .hero-content--closing {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  clip-path: none !important;
}

.hero-content::before,
.hero-content::after,
.hero-content--closing::before,
.hero-content--closing::after,
html[data-styleworld] .hero-content::before,
html[data-styleworld] .hero-content::after {
  display: none !important;
}

/* Stilwelten rahmen Bilder, verfremden sie aber nicht automatisch. */
html[data-styleworld] .hero-bg,
html[data-styleworld] .article-side img,
html[data-styleworld] .cta-image img,
html[data-styleworld] .gallery-card img,
html[data-styleworld] .hero-bg--closing {
  filter: none !important;
}

html[data-styleworld="klartechnik"] .stage,
html[data-styleworld="klartechnik"] .article-section,
html[data-styleworld="klartechnik"] .gallery-card,
html[data-styleworld="klartechnik"] .article-side img,
html[data-styleworld="klartechnik"] .cta-image img {
  border-radius: 6px;
}

html[data-styleworld="natur"] .stage,
html[data-styleworld="natur"] .article-section,
html[data-styleworld="natur"] .gallery-card,
html[data-styleworld="natur"] .article-side img,
html[data-styleworld="natur"] .cta-image img {
  border-radius: 34px 18px 34px 18px;
}

html[data-styleworld="ozean"] .stage,
html[data-styleworld="ozean"] .article-section,
html[data-styleworld="ozean"] .gallery-card,
html[data-styleworld="ozean"] .article-side img,
html[data-styleworld="ozean"] .cta-image img {
  border-radius: 58px 24px 58px 24px;
}

html[data-styleworld="sand"] .stage,
html[data-styleworld="sand"] .article-section,
html[data-styleworld="sand"] .gallery-card,
html[data-styleworld="sand"] .article-side img,
html[data-styleworld="sand"] .cta-image img {
  border-radius: 28px 28px 12px 12px;
}

html[data-styleworld="vulkan"] .stage,
html[data-styleworld="vulkan"] .article-section,
html[data-styleworld="vulkan"] .gallery-card,
html[data-styleworld="vulkan"] .article-side img,
html[data-styleworld="vulkan"] .cta-image img {
  clip-path: polygon(0 0, 98% 0, 100% 7%, 97% 100%, 0 100%, 2% 90%);
}

html[data-styleworld="wald"] .stage,
html[data-styleworld="wald"] .article-section,
html[data-styleworld="wald"] .gallery-card,
html[data-styleworld="wald"] .article-side img,
html[data-styleworld="wald"] .cta-image img {
  border-radius: 44px 22px 44px 22px;
}

html[data-styleworld="holz"] .stage,
html[data-styleworld="holz"] .article-section,
html[data-styleworld="holz"] .gallery-card,
html[data-styleworld="holz"] .article-side img,
html[data-styleworld="holz"] .cta-image img {
  border-radius: 18px 38px 18px 38px;
}

html[data-styleworld="sonnenuntergang"] .stage,
html[data-styleworld="sonnenuntergang"] .article-section,
html[data-styleworld="sonnenuntergang"] .gallery-card,
html[data-styleworld="sonnenuntergang"] .article-side img,
html[data-styleworld="sonnenuntergang"] .cta-image img {
  border-radius: 54px 18px 54px 18px;
}

html[data-styleworld="gewitter"] .stage,
html[data-styleworld="gewitter"] .article-section,
html[data-styleworld="gewitter"] .gallery-card,
html[data-styleworld="gewitter"] .article-side img,
html[data-styleworld="gewitter"] .cta-image img {
  border-radius: 8px 30px 8px 30px;
}

html[data-styleworld="sonnenuntergang"] .article-section::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent) !important;
}


html[data-styleworld="magazinlinie"] {
  --bg: #0b0c0c;
  --ink: #f4efe7;
  --muted: #c4bbb0;
  --soft: rgba(244, 239, 231, .74);
  --line: rgba(231, 222, 207, .18);
  --panel: #171817;
  --panel-2: #22211e;
  --accent: #d7c7a9;
  --accent-2: #8b8f88;
  --header-bg: rgba(11, 12, 12, .94);
  --radius: 4px;
  --radius-soft: 10px;
  --hero-title-max: 11ch;
  --hero-title-size: clamp(4rem, 7.2vw, 7.9rem);
}

html[data-styleworld="menschennaehe"] {
  --bg: #140f0c;
  --ink: #fff1e3;
  --muted: #d3bba8;
  --soft: rgba(255, 241, 227, .76);
  --line: rgba(207, 144, 93, .18);
  --panel: #211813;
  --panel-2: #30231a;
  --accent: #d08b5c;
  --accent-2: #bba17c;
  --header-bg: rgba(20, 15, 12, .93);
  --radius: 30px;
  --radius-soft: 56px;
  --hero-title-max: 10.8ch;
  --hero-title-size: clamp(3.9rem, 7vw, 7.6rem);
}

html[data-styleworld="materialatelier"] {
  --bg: #130f0b;
  --ink: #f7ead9;
  --muted: #c9b29a;
  --soft: rgba(247, 234, 217, .75);
  --line: rgba(166, 115, 74, .21);
  --panel: #1d1711;
  --panel-2: #2a2118;
  --accent: #b47846;
  --accent-2: #8d8f78;
  --header-bg: rgba(19, 15, 11, .94);
  --radius: 18px;
  --radius-soft: 34px;
  --hero-title-max: 11.4ch;
  --hero-title-size: clamp(4rem, 7.6vw, 8rem);
}

html[data-styleworld="strukturblatt"] {
  --bg: #071018;
  --ink: #f0f7fa;
  --muted: #adbdc6;
  --soft: rgba(240, 247, 250, .74);
  --line: rgba(144, 174, 190, .24);
  --panel: #0d1720;
  --panel-2: #17232d;
  --accent: #9db7c6;
  --accent-2: #d6c9a9;
  --header-bg: rgba(7, 16, 24, .94);
  --radius: 2px;
  --radius-soft: 6px;
  --hero-title-max: 12.8ch;
  --hero-title-size: clamp(3.8rem, 6.9vw, 7.5rem);
}

html[data-styleworld="ortslicht"] {
  --bg: #0a1411;
  --ink: #f5eddc;
  --muted: #c8bea7;
  --soft: rgba(245, 237, 220, .76);
  --line: rgba(166, 185, 107, .2);
  --panel: #121f18;
  --panel-2: #203225;
  --accent: #b6bd73;
  --accent-2: #d0a56a;
  --header-bg: rgba(10, 20, 17, .93);
  --radius: 38px;
  --radius-soft: 72px;
  --hero-title-max: 11.2ch;
  --hero-title-size: clamp(4rem, 7.4vw, 8rem);
}

html[data-styleworld="buehnenabend"] {
  --bg: #10070a;
  --ink: #fff1df;
  --muted: #d4b6a1;
  --soft: rgba(255, 241, 223, .75);
  --line: rgba(215, 139, 74, .22);
  --panel: #1b0e12;
  --panel-2: #28151b;
  --accent: #d68b4e;
  --accent-2: #8d2636;
  --header-bg: rgba(16, 7, 10, .94);
  --radius: 8px;
  --radius-soft: 28px;
  --hero-title-max: 10.6ch;
  --hero-title-size: clamp(4.1rem, 7.8vw, 8.4rem);
}

html[data-styleworld="dunkelsalon"] {
  --bg: #070605;
  --ink: #f4ebdc;
  --muted: #beb0a0;
  --soft: rgba(244, 235, 220, .72);
  --line: rgba(171, 126, 73, .18);
  --panel: #11100e;
  --panel-2: #1c1813;
  --accent: #ac7e49;
  --accent-2: #6e6257;
  --header-bg: rgba(7, 6, 5, .95);
  --radius: 6px;
  --radius-soft: 18px;
  --hero-title-max: 10.8ch;
  --hero-title-size: clamp(4.1rem, 7.2vw, 7.8rem);
}

html[data-styleworld="magazinlinie"][data-mode="light"] {
  --bg: #f0ece5; --ink: #161616; --muted: #5e5a54; --line: rgba(20, 20, 20, .14); --panel: #fbfaf7; --panel-2: #e1ddd5; --accent: #57534b; --accent-2: #9a8c75; --header-bg: rgba(240, 236, 229, .94);
}
html[data-styleworld="menschennaehe"][data-mode="light"] {
  --bg: #f5eadf; --ink: #241814; --muted: #6f5a4d; --line: rgba(140, 85, 48, .16); --panel: #fff9f2; --panel-2: #e8d2bd; --accent: #9c5e37; --accent-2: #917451; --header-bg: rgba(245, 234, 223, .94);
}
html[data-styleworld="materialatelier"][data-mode="light"] {
  --bg: #efe6dc; --ink: #21170f; --muted: #67584b; --line: rgba(125, 81, 46, .18); --panel: #fbf4eb; --panel-2: #ded0bf; --accent: #89532f; --accent-2: #6f725c; --header-bg: rgba(239, 230, 220, .94);
}
html[data-styleworld="strukturblatt"][data-mode="light"] {
  --bg: #eef2f3; --ink: #111820; --muted: #56626b; --line: rgba(57, 80, 94, .17); --panel: #fbfcfc; --panel-2: #dce3e6; --accent: #3f6376; --accent-2: #897b5e; --header-bg: rgba(238, 242, 243, .94);
}
html[data-styleworld="ortslicht"][data-mode="light"] {
  --bg: #eef0df; --ink: #172014; --muted: #5f624f; --line: rgba(102, 124, 55, .17); --panel: #fbfaee; --panel-2: #dfe4c8; --accent: #687b35; --accent-2: #9c743d; --header-bg: rgba(238, 240, 223, .94);
}
html[data-styleworld="buehnenabend"][data-mode="light"] {
  --bg: #f2e8e2; --ink: #271512; --muted: #73584e; --line: rgba(151, 74, 47, .17); --panel: #fff8f3; --panel-2: #e4d0c8; --accent: #a55d2d; --accent-2: #7a2734; --header-bg: rgba(242, 232, 226, .94);
}
html[data-styleworld="dunkelsalon"][data-mode="light"] {
  --bg: #eee9e1; --ink: #1b1713; --muted: #6a6258; --line: rgba(120, 85, 52, .15); --panel: #faf7f1; --panel-2: #ded6ca; --accent: #825f37; --accent-2: #665d54; --header-bg: rgba(238, 233, 225, .94);
}

@media (prefers-color-scheme: light) {
  html[data-styleworld="magazinlinie"][data-mode="auto"] { --bg: #f0ece5; --ink: #161616; --muted: #5e5a54; --line: rgba(20, 20, 20, .14); --panel: #fbfaf7; --panel-2: #e1ddd5; --accent: #57534b; --accent-2: #9a8c75; --header-bg: rgba(240, 236, 229, .94); }
  html[data-styleworld="menschennaehe"][data-mode="auto"] { --bg: #f5eadf; --ink: #241814; --muted: #6f5a4d; --line: rgba(140, 85, 48, .16); --panel: #fff9f2; --panel-2: #e8d2bd; --accent: #9c5e37; --accent-2: #917451; --header-bg: rgba(245, 234, 223, .94); }
  html[data-styleworld="materialatelier"][data-mode="auto"] { --bg: #efe6dc; --ink: #21170f; --muted: #67584b; --line: rgba(125, 81, 46, .18); --panel: #fbf4eb; --panel-2: #ded0bf; --accent: #89532f; --accent-2: #6f725c; --header-bg: rgba(239, 230, 220, .94); }
  html[data-styleworld="strukturblatt"][data-mode="auto"] { --bg: #eef2f3; --ink: #111820; --muted: #56626b; --line: rgba(57, 80, 94, .17); --panel: #fbfcfc; --panel-2: #dce3e6; --accent: #3f6376; --accent-2: #897b5e; --header-bg: rgba(238, 242, 243, .94); }
  html[data-styleworld="ortslicht"][data-mode="auto"] { --bg: #eef0df; --ink: #172014; --muted: #5f624f; --line: rgba(102, 124, 55, .17); --panel: #fbfaee; --panel-2: #dfe4c8; --accent: #687b35; --accent-2: #9c743d; --header-bg: rgba(238, 240, 223, .94); }
  html[data-styleworld="buehnenabend"][data-mode="auto"] { --bg: #f2e8e2; --ink: #271512; --muted: #73584e; --line: rgba(151, 74, 47, .17); --panel: #fff8f3; --panel-2: #e4d0c8; --accent: #a55d2d; --accent-2: #7a2734; --header-bg: rgba(242, 232, 226, .94); }
  html[data-styleworld="dunkelsalon"][data-mode="auto"] { --bg: #eee9e1; --ink: #1b1713; --muted: #6a6258; --line: rgba(120, 85, 52, .15); --panel: #faf7f1; --panel-2: #ded6ca; --accent: #825f37; --accent-2: #665d54; --header-bg: rgba(238, 233, 225, .94); }
}

html[data-styleworld="magazinlinie"] .site-header nav a { border-radius: 0; text-transform: uppercase; letter-spacing: .11em; }
html[data-styleworld="menschennaehe"] .site-header nav a { border-radius: 999px; }
html[data-styleworld="materialatelier"] .site-header nav a { border-radius: 18px 6px 18px 6px; }
html[data-styleworld="strukturblatt"] .site-header nav a { border-radius: 2px; border-style: solid; text-transform: uppercase; letter-spacing: .1em; }
html[data-styleworld="ortslicht"] .site-header nav a { border-radius: 999px 999px 999px 18px; }
html[data-styleworld="buehnenabend"] .site-header nav a { border-radius: 999px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-styleworld="dunkelsalon"] .site-header nav a { border-radius: 4px; background: rgba(10, 9, 8, .8); }

html[data-styleworld="magazinlinie"] .hero-overlay {
  background: linear-gradient(90deg, rgba(6, 7, 7, .96) 0%, rgba(6, 7, 7, .62) 38%, rgba(6, 7, 7, .18) 72%, rgba(6, 7, 7, .7) 100%);
}
html[data-styleworld="menschennaehe"] .hero-overlay {
  background: radial-gradient(circle at 62% 42%, rgba(208, 139, 92, .12), transparent 28rem), linear-gradient(90deg, rgba(19, 12, 8, .94), rgba(19, 12, 8, .45), rgba(19, 12, 8, .78));
}
html[data-styleworld="materialatelier"] .hero-overlay {
  background: linear-gradient(105deg, rgba(16, 11, 7, .95), rgba(16, 11, 7, .58) 45%, rgba(16, 11, 7, .78));
}
html[data-styleworld="strukturblatt"] .hero-overlay {
  background: linear-gradient(90deg, rgba(5, 12, 18, .97), rgba(5, 12, 18, .72) 42%, rgba(5, 12, 18, .28) 76%, rgba(5, 12, 18, .76));
}
html[data-styleworld="ortslicht"] .hero-overlay {
  background: linear-gradient(90deg, rgba(5, 13, 10, .94), rgba(5, 13, 10, .55) 42%, rgba(5, 13, 10, .18) 72%, rgba(5, 13, 10, .72));
}
html[data-styleworld="buehnenabend"] .hero-overlay {
  background: radial-gradient(circle at 66% 28%, rgba(214, 139, 78, .24), transparent 27rem), linear-gradient(90deg, rgba(13, 5, 8, .96), rgba(13, 5, 8, .62), rgba(13, 5, 8, .85));
}
html[data-styleworld="dunkelsalon"] .hero-overlay {
  background: radial-gradient(circle at 70% 40%, rgba(172, 126, 73, .15), transparent 28rem), linear-gradient(90deg, rgba(5, 4, 3, .96), rgba(5, 4, 3, .68), rgba(5, 4, 3, .86));
}

html[data-styleworld="magazinlinie"] .article-stage { grid-template-columns: minmax(0, 1.28fr) minmax(280px, .58fr); }
html[data-styleworld="magazinlinie"] .article-header,
html[data-styleworld="magazinlinie"] .article-section,
html[data-styleworld="magazinlinie"] .gallery-card figcaption { border-left: 3px solid var(--accent); border-radius: 0; }
html[data-styleworld="magazinlinie"] .gallery-grid { grid-template-columns: 1.2fr .8fr; align-items: start; }
html[data-styleworld="magazinlinie"] .gallery-card:nth-child(1) { grid-row: span 2; }
html[data-styleworld="magazinlinie"] .gallery-card,
html[data-styleworld="magazinlinie"] .article-side img { border-radius: 0; }

html[data-styleworld="menschennaehe"] .stage { width: min(1080px, calc(100% - 68px)); }
html[data-styleworld="menschennaehe"] .article-header,
html[data-styleworld="menschennaehe"] .article-section,
html[data-styleworld="menschennaehe"] .gallery-card figcaption { border-radius: 34px; }
html[data-styleworld="menschennaehe"] .article-side img,
html[data-styleworld="menschennaehe"] .gallery-card img { border-radius: 42px 42px 18px 42px; }
html[data-styleworld="menschennaehe"] .gallery-grid { gap: clamp(1.1rem, 2vw, 2rem); }

html[data-styleworld="materialatelier"] .article-stage::before { background: radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 23rem); }
html[data-styleworld="materialatelier"] .article-section:nth-of-type(even) { transform: translateX(clamp(0px, 1.5vw, 22px)) rotate(-.22deg); }
html[data-styleworld="materialatelier"] .article-section:nth-of-type(odd) { transform: rotate(.16deg); }
html[data-styleworld="materialatelier"] .article-header,
html[data-styleworld="materialatelier"] .article-section { border-radius: 28px 10px 28px 10px; }
html[data-styleworld="materialatelier"] .gallery-card,
html[data-styleworld="materialatelier"] .article-side img { border-radius: 10px 34px 10px 34px; }

html[data-styleworld="strukturblatt"] .stage { border-radius: 0; }
html[data-styleworld="strukturblatt"] .article-header,
html[data-styleworld="strukturblatt"] .article-section,
html[data-styleworld="strukturblatt"] .gallery-card figcaption { border-radius: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
html[data-styleworld="strukturblatt"] .article-header::before,
html[data-styleworld="strukturblatt"] .article-section::before { height: 1px; background: var(--accent); }
html[data-styleworld="strukturblatt"] .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-styleworld="strukturblatt"] .gallery-card,
html[data-styleworld="strukturblatt"] .article-side img { border-radius: 0; }

html[data-styleworld="ortslicht"] .article-stage::before { background: radial-gradient(ellipse at 12% 14%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 28rem), radial-gradient(ellipse at 88% 90%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 28rem); }
html[data-styleworld="ortslicht"] .article-header,
html[data-styleworld="ortslicht"] .article-section { border-radius: 46px 18px 46px 18px; }
html[data-styleworld="ortslicht"] .article-side img,
html[data-styleworld="ortslicht"] .gallery-card img { border-radius: 70px 18px 70px 18px; }
html[data-styleworld="ortslicht"] .gallery-card:nth-child(even) { transform: translateY(clamp(0px, 1.5vw, 24px)); }

html[data-styleworld="buehnenabend"] .article-stage { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 24rem); }
html[data-styleworld="buehnenabend"] .article-header,
html[data-styleworld="buehnenabend"] .article-section,
html[data-styleworld="buehnenabend"] .gallery-card figcaption { border-radius: 6px 28px 6px 28px; border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
html[data-styleworld="buehnenabend"] .gallery-grid { grid-template-columns: .8fr 1.2fr; }
html[data-styleworld="buehnenabend"] .gallery-card:nth-child(2) { grid-row: span 2; }
html[data-styleworld="buehnenabend"] .article-side img,
html[data-styleworld="buehnenabend"] .gallery-card img { border-radius: 6px 38px 6px 38px; }

html[data-styleworld="dunkelsalon"] .stage { background: color-mix(in srgb, var(--panel) 80%, black 20%); }
html[data-styleworld="dunkelsalon"] .article-header,
html[data-styleworld="dunkelsalon"] .article-section,
html[data-styleworld="dunkelsalon"] .gallery-card figcaption { border-radius: 4px; border-color: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: 0 28px 90px rgba(0, 0, 0, .34); }
html[data-styleworld="dunkelsalon"] .article-side img,
html[data-styleworld="dunkelsalon"] .gallery-card img { border-radius: 4px; }
html[data-styleworld="dunkelsalon"] .gallery-grid { gap: clamp(1.4rem, 2.8vw, 3.2rem); }

@media (max-width: 980px) {
  html[data-styleworld="editorial"] .article-stage,
  html[data-styleworld="graustufen"] .article-stage,
  html[data-styleworld="atelier"] .article-stage {
    grid-template-columns: 1fr;
  }

  html[data-styleworld="editorial"] .stage,
  html[data-styleworld="graustufen"] .stage,
  html[data-styleworld="atelier"] .stage {
    width: min(100% - 32px, 760px);
  }

  html[data-styleworld="atelier"] .hero-content,
  html[data-styleworld="atelier"] .article-section,
  html[data-styleworld="atelier"] .article-side,
  html[data-styleworld="atelier"] .gallery-card {
    rotate: 0deg;
    translate: 0 0;
  }
}


html[data-styleworld="magazinlinie"] { --hero-title-size: clamp(3.2rem, 5.6vw, 6.15rem); --hero-title-max: 11.8ch; }
html[data-styleworld="menschennaehe"] { --hero-title-size: clamp(3.15rem, 5.45vw, 5.85rem); --hero-title-max: 11.6ch; }
html[data-styleworld="materialatelier"] { --hero-title-size: clamp(3.2rem, 5.75vw, 6.25rem); --hero-title-max: 12ch; }
html[data-styleworld="strukturblatt"] { --hero-title-size: clamp(3.05rem, 5.15vw, 5.65rem); --hero-title-max: 13.4ch; }
html[data-styleworld="ortslicht"] { --hero-title-size: clamp(3.2rem, 5.65vw, 6.15rem); --hero-title-max: 12ch; }
html[data-styleworld="buehnenabend"] { --hero-title-size: clamp(3.3rem, 5.9vw, 6.35rem); --hero-title-max: 11.4ch; }
html[data-styleworld="dunkelsalon"] { --hero-title-size: clamp(3.15rem, 5.35vw, 5.95rem); --hero-title-max: 11.6ch; }

html[data-styleworld="magazinlinie"] .hero-stage h1,
html[data-styleworld="menschennaehe"] .hero-stage h1,
html[data-styleworld="materialatelier"] .hero-stage h1,
html[data-styleworld="strukturblatt"] .hero-stage h1,
html[data-styleworld="ortslicht"] .hero-stage h1,
html[data-styleworld="buehnenabend"] .hero-stage h1,
html[data-styleworld="dunkelsalon"] .hero-stage h1 {
  line-height: 1.075;
  letter-spacing: -.035em;
}

html[data-styleworld="magazinlinie"] .stage h2,
html[data-styleworld="magazinlinie"] .article-header h2,
html[data-styleworld="menschennaehe"] .stage h2,
html[data-styleworld="menschennaehe"] .article-header h2,
html[data-styleworld="materialatelier"] .stage h2,
html[data-styleworld="materialatelier"] .article-header h2,
html[data-styleworld="strukturblatt"] .stage h2,
html[data-styleworld="strukturblatt"] .article-header h2,
html[data-styleworld="ortslicht"] .stage h2,
html[data-styleworld="ortslicht"] .article-header h2,
html[data-styleworld="buehnenabend"] .stage h2,
html[data-styleworld="buehnenabend"] .article-header h2,
html[data-styleworld="dunkelsalon"] .stage h2,
html[data-styleworld="dunkelsalon"] .article-header h2 {
  max-width: 13.8ch;
  font-size: clamp(2.2rem, 3.45vw, 4.15rem);
  line-height: 1.1;
  letter-spacing: -.028em;
}

html[data-styleworld="strukturblatt"] .stage h2,
html[data-styleworld="strukturblatt"] .article-header h2,
html[data-styleworld="magazinlinie"] .stage h2,
html[data-styleworld="magazinlinie"] .article-header h2 {
  max-width: 15.5ch;
  font-size: clamp(2.1rem, 3.2vw, 3.85rem);
  letter-spacing: -.02em;
}

html[data-styleworld="menschennaehe"] .stage h2,
html[data-styleworld="menschennaehe"] .article-header h2,
html[data-styleworld="ortslicht"] .stage h2,
html[data-styleworld="ortslicht"] .article-header h2 {
  max-width: 14.5ch;
}

html[data-styleworld="buehnenabend"] .stage h2,
html[data-styleworld="buehnenabend"] .article-header h2 {
  max-width: 12.8ch;
}

html[data-styleworld="magazinlinie"] .lead,
html[data-styleworld="magazinlinie"] .article-lead,
html[data-styleworld="menschennaehe"] .lead,
html[data-styleworld="menschennaehe"] .article-lead,
html[data-styleworld="materialatelier"] .lead,
html[data-styleworld="materialatelier"] .article-lead,
html[data-styleworld="strukturblatt"] .lead,
html[data-styleworld="strukturblatt"] .article-lead,
html[data-styleworld="ortslicht"] .lead,
html[data-styleworld="ortslicht"] .article-lead,
html[data-styleworld="buehnenabend"] .lead,
html[data-styleworld="buehnenabend"] .article-lead,
html[data-styleworld="dunkelsalon"] .lead,
html[data-styleworld="dunkelsalon"] .article-lead {
  font-size: clamp(1.02rem, 1.16vw, 1.18rem);
  line-height: 1.64;
}

html[data-styleworld="magazinlinie"] .hero-stage--closing h2,
html[data-styleworld="menschennaehe"] .hero-stage--closing h2,
html[data-styleworld="materialatelier"] .hero-stage--closing h2,
html[data-styleworld="strukturblatt"] .hero-stage--closing h2,
html[data-styleworld="ortslicht"] .hero-stage--closing h2,
html[data-styleworld="buehnenabend"] .hero-stage--closing h2,
html[data-styleworld="dunkelsalon"] .hero-stage--closing h2 {
  max-width: 8.8ch;
  font-size: clamp(2.55rem, 4.15vw, 4.7rem);
  line-height: 1.1;
  letter-spacing: -.036em;
}

@media (max-width: 980px) {
  html[data-styleworld="magazinlinie"] .hero-stage h1,
  html[data-styleworld="menschennaehe"] .hero-stage h1,
  html[data-styleworld="materialatelier"] .hero-stage h1,
  html[data-styleworld="strukturblatt"] .hero-stage h1,
  html[data-styleworld="ortslicht"] .hero-stage h1,
  html[data-styleworld="buehnenabend"] .hero-stage h1,
  html[data-styleworld="dunkelsalon"] .hero-stage h1 {
    max-width: 11.5ch;
    font-size: clamp(2.75rem, 12vw, 4.65rem);
  }

  html[data-styleworld="magazinlinie"] .stage h2,
  html[data-styleworld="magazinlinie"] .article-header h2,
  html[data-styleworld="menschennaehe"] .stage h2,
  html[data-styleworld="menschennaehe"] .article-header h2,
  html[data-styleworld="materialatelier"] .stage h2,
  html[data-styleworld="materialatelier"] .article-header h2,
  html[data-styleworld="strukturblatt"] .stage h2,
  html[data-styleworld="strukturblatt"] .article-header h2,
  html[data-styleworld="ortslicht"] .stage h2,
  html[data-styleworld="ortslicht"] .article-header h2,
  html[data-styleworld="buehnenabend"] .stage h2,
  html[data-styleworld="buehnenabend"] .article-header h2,
  html[data-styleworld="dunkelsalon"] .stage h2,
  html[data-styleworld="dunkelsalon"] .article-header h2 {
    max-width: 14ch;
    font-size: clamp(2rem, 9vw, 3.25rem);
  }

  html[data-styleworld="magazinlinie"] .hero-stage--closing h2,
  html[data-styleworld="menschennaehe"] .hero-stage--closing h2,
  html[data-styleworld="materialatelier"] .hero-stage--closing h2,
  html[data-styleworld="strukturblatt"] .hero-stage--closing h2,
  html[data-styleworld="ortslicht"] .hero-stage--closing h2,
  html[data-styleworld="buehnenabend"] .hero-stage--closing h2,
  html[data-styleworld="dunkelsalon"] .hero-stage--closing h2 {
    font-size: clamp(2.25rem, 9.5vw, 3.55rem);
  }
}


html[data-styleworld="magazinlinie"] { --hero-title-size: clamp(2.85rem, 4.35vw, 5.15rem); --hero-title-max: 15.2ch; }
html[data-styleworld="menschennaehe"] { --hero-title-size: clamp(2.8rem, 4.15vw, 4.95rem); --hero-title-max: 14.6ch; }
html[data-styleworld="materialatelier"] { --hero-title-size: clamp(2.85rem, 4.35vw, 5.1rem); --hero-title-max: 14.8ch; }
html[data-styleworld="strukturblatt"] { --hero-title-size: clamp(2.75rem, 4vw, 4.9rem); --hero-title-max: 15.8ch; }
html[data-styleworld="ortslicht"] { --hero-title-size: clamp(2.85rem, 4.25vw, 5.05rem); --hero-title-max: 14.8ch; }
html[data-styleworld="buehnenabend"] { --hero-title-size: clamp(2.95rem, 4.55vw, 5.25rem); --hero-title-max: 13.8ch; }
html[data-styleworld="dunkelsalon"] { --hero-title-size: clamp(2.85rem, 4.2vw, 5rem); --hero-title-max: 14.4ch; }

html[data-styleworld="magazinlinie"] .hero-content,
html[data-styleworld="menschennaehe"] .hero-content,
html[data-styleworld="materialatelier"] .hero-content,
html[data-styleworld="strukturblatt"] .hero-content,
html[data-styleworld="ortslicht"] .hero-content,
html[data-styleworld="buehnenabend"] .hero-content,
html[data-styleworld="dunkelsalon"] .hero-content {
  width: min(980px, 100%);
}

html[data-styleworld="magazinlinie"] .hero-stage h1,
html[data-styleworld="menschennaehe"] .hero-stage h1,
html[data-styleworld="materialatelier"] .hero-stage h1,
html[data-styleworld="strukturblatt"] .hero-stage h1,
html[data-styleworld="ortslicht"] .hero-stage h1,
html[data-styleworld="buehnenabend"] .hero-stage h1,
html[data-styleworld="dunkelsalon"] .hero-stage h1 {
  line-height: 1.09;
  letter-spacing: -.03em;
}

html[data-styleworld="magazinlinie"] .stage h2,
html[data-styleworld="magazinlinie"] .article-header h2,
html[data-styleworld="menschennaehe"] .stage h2,
html[data-styleworld="menschennaehe"] .article-header h2,
html[data-styleworld="materialatelier"] .stage h2,
html[data-styleworld="materialatelier"] .article-header h2,
html[data-styleworld="strukturblatt"] .stage h2,
html[data-styleworld="strukturblatt"] .article-header h2,
html[data-styleworld="ortslicht"] .stage h2,
html[data-styleworld="ortslicht"] .article-header h2,
html[data-styleworld="buehnenabend"] .stage h2,
html[data-styleworld="buehnenabend"] .article-header h2,
html[data-styleworld="dunkelsalon"] .stage h2,
html[data-styleworld="dunkelsalon"] .article-header h2 {
  max-width: 16.2ch;
  font-size: clamp(1.95rem, 2.75vw, 3.35rem);
  line-height: 1.14;
  letter-spacing: -.022em;
}

html[data-styleworld="buehnenabend"] .stage h2,
html[data-styleworld="buehnenabend"] .article-header h2,
html[data-styleworld="dunkelsalon"] .stage h2,
html[data-styleworld="dunkelsalon"] .article-header h2 {
  max-width: 14.6ch;
}

html[data-styleworld="magazinlinie"] .hero-stage--closing h2,
html[data-styleworld="menschennaehe"] .hero-stage--closing h2,
html[data-styleworld="materialatelier"] .hero-stage--closing h2,
html[data-styleworld="strukturblatt"] .hero-stage--closing h2,
html[data-styleworld="ortslicht"] .hero-stage--closing h2,
html[data-styleworld="buehnenabend"] .hero-stage--closing h2,
html[data-styleworld="dunkelsalon"] .hero-stage--closing h2 {
  max-width: 11.2ch;
  font-size: clamp(2.1rem, 3.35vw, 3.85rem);
  line-height: 1.13;
  letter-spacing: -.028em;
}

@media (min-width: 1600px) {
  html[data-styleworld="magazinlinie"] .hero-stage h1,
  html[data-styleworld="menschennaehe"] .hero-stage h1,
  html[data-styleworld="materialatelier"] .hero-stage h1,
  html[data-styleworld="strukturblatt"] .hero-stage h1,
  html[data-styleworld="ortslicht"] .hero-stage h1,
  html[data-styleworld="buehnenabend"] .hero-stage h1,
  html[data-styleworld="dunkelsalon"] .hero-stage h1 {
    text-shadow: 0 20px 64px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 980px) {
  html[data-styleworld="magazinlinie"] .hero-stage h1,
  html[data-styleworld="menschennaehe"] .hero-stage h1,
  html[data-styleworld="materialatelier"] .hero-stage h1,
  html[data-styleworld="strukturblatt"] .hero-stage h1,
  html[data-styleworld="ortslicht"] .hero-stage h1,
  html[data-styleworld="buehnenabend"] .hero-stage h1,
  html[data-styleworld="dunkelsalon"] .hero-stage h1 {
    max-width: 12.8ch;
    font-size: clamp(2.45rem, 10.5vw, 4.05rem);
  }

  html[data-styleworld="magazinlinie"] .stage h2,
  html[data-styleworld="magazinlinie"] .article-header h2,
  html[data-styleworld="menschennaehe"] .stage h2,
  html[data-styleworld="menschennaehe"] .article-header h2,
  html[data-styleworld="materialatelier"] .stage h2,
  html[data-styleworld="materialatelier"] .article-header h2,
  html[data-styleworld="strukturblatt"] .stage h2,
  html[data-styleworld="strukturblatt"] .article-header h2,
  html[data-styleworld="ortslicht"] .stage h2,
  html[data-styleworld="ortslicht"] .article-header h2,
  html[data-styleworld="buehnenabend"] .stage h2,
  html[data-styleworld="buehnenabend"] .article-header h2,
  html[data-styleworld="dunkelsalon"] .stage h2,
  html[data-styleworld="dunkelsalon"] .article-header h2 {
    max-width: 15ch;
    font-size: clamp(1.85rem, 7.6vw, 2.95rem);
  }
}


html[data-styleworld] {
  --hero-title-size: clamp(3.2rem, 5.1vw, 6.55rem);
  --hero-title-max: 12.4ch;
  --hero-lead-size: clamp(1.12rem, 1.32vw, 1.46rem);
  --hero-kicker-size: clamp(.78rem, .72vw, .96rem);
}

html[data-styleworld] .hero-content {
  width: min(1120px, 78vw, 100%);
}

html[data-styleworld] .hero-stage h1 {
  line-height: 1.08;
  letter-spacing: -.035em;
}

html[data-styleworld] .hero-stage .hero-content .kicker {
  font-size: var(--hero-kicker-size);
}

html[data-styleworld] .hero-stage .hero-content .lead {
  max-width: 62ch;
  font-size: var(--hero-lead-size);
  line-height: 1.64;
}

html[data-styleworld] .stage h2,
html[data-styleworld] .article-header h2 {
  max-width: 22ch;
  font-size: clamp(1.85rem, 2.28vw, 3.05rem);
  line-height: 1.15;
  letter-spacing: -.018em;
}

html[data-styleworld] .gallery-intro h2 {
  max-width: 22ch;
  font-size: clamp(1.85rem, 2.28vw, 3.05rem);
}

html[data-styleworld] .hero-stage--closing h2,
html[data-styleworld] .cta-copy h2 {
  max-width: 18ch;
  font-size: clamp(2.05rem, 2.85vw, 3.55rem);
  line-height: 1.14;
  letter-spacing: -.022em;
}

@media (min-width: 1540px) {
  html[data-styleworld] {
    --hero-title-size: clamp(4.15rem, 4.45vw, 6.55rem);
    --hero-title-max: 12ch;
    --hero-lead-size: clamp(1.18rem, 1.12vw, 1.46rem);
  }

  html[data-styleworld] .stage h2,
  html[data-styleworld] .article-header h2,
  html[data-styleworld] .gallery-intro h2 {
    font-size: clamp(1.9rem, 2.05vw, 2.8rem);
  }

  html[data-styleworld] .hero-stage--closing h2,
  html[data-styleworld] .cta-copy h2 {
    font-size: clamp(2rem, 2.35vw, 3.2rem);
  }
}

@media (max-width: 980px) {
  html[data-styleworld] .hero-content {
    width: min(100%, 720px);
  }

  html[data-styleworld] .hero-stage h1 {
    max-width: 14.5ch;
    font-size: clamp(2.2rem, 9.2vw, 3.65rem);
  }

  html[data-styleworld] .stage h2,
  html[data-styleworld] .article-header h2,
  html[data-styleworld] .gallery-intro h2 {
    max-width: 16ch;
    font-size: clamp(1.72rem, 6.4vw, 2.75rem);
  }
}


/* A48 - grosse Galerieansicht */
.lightbox {
  padding: clamp(8px, 1.2vw, 22px);
  place-items: stretch;
  align-items: stretch;
}

.lightbox-panel {
  width: min(100%, 1920px);
  height: calc(100svh - clamp(16px, 2.4vw, 44px));
  max-height: none;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox-panel figure {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
}

.lightbox-panel img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox-panel figcaption {
  max-width: min(96ch, 100%);
  margin-inline: auto;
}

.lightbox:fullscreen {
  padding: clamp(8px, 1.2vw, 22px);
  background: #020302;
}

.lightbox:fullscreen .lightbox-panel {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) * .7);
}

.lightbox:fullscreen .lightbox-panel img {
  max-height: 100%;
}

@media (max-width: 760px) {
  .lightbox {
    padding: 6px;
  }

  .lightbox-panel {
    width: 100%;
    height: calc(100svh - 12px);
    padding: 10px;
    border-radius: calc(var(--radius) * .72);
  }

  .lightbox-panel img {
    height: auto;
    max-height: calc(100svh - 150px);
  }
}