/* Patrick Wirth — 2026 visual system. Functional catalogue, readers and audio engines stay separate. */
:root{
  --bg:#0b120d;
  --surface:#101a13;
  --surface-2:#172219;
  --paper:#f0eadf;
  --muted:#bbb9ac;
  --gold:#c7a15f;
  --line:#675738;
  --radius:1px;
}

html{overflow-x:hidden}
body.design-page{background:#0b120d;color:var(--paper);min-width:320px;overflow-x:hidden}
.design-page p{color:#c8c5b9}
.design-page main{position:relative;isolation:isolate}
.design-page h1,.design-page h2,.design-page h3{font-family:Georgia,'Times New Roman',serif}
.design-page .artist-shell{width:min(1432px,calc(100% - 72px))}

/* Shared masthead */
.design-page .artist-header{background:#09110c;border-bottom:1px solid #7b6742;position:relative;z-index:30}
.design-page .artist-header>.artist-shell{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:42px}
.design-page .artist-masthead{display:contents}
.design-page .artist-wordmark{grid-column:1;font-size:clamp(28px,2.4vw,42px);color:#dbbd87;letter-spacing:-.035em;white-space:nowrap}
.design-page .artist-roles{grid-column:3;grid-row:1;font-size:11px;color:#d1b47d;letter-spacing:.2em;white-space:nowrap}
.design-page .artist-navigation{grid-column:2;grid-row:1;justify-content:center;padding:28px 0;gap:clamp(12px,1.6vw,28px);font-size:11px;letter-spacing:.06em}
.design-page .artist-navigation a{position:relative;color:#eee8dc}
.design-page .artist-navigation a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:1px;background:#d2ac68}
.design-page .artist-menu{grid-column:3;grid-row:1}

/* Shared page architecture */
.design-page .artist-section,.design-page .mastering-design,.design-page .binaural-page,.design-page .shop-page{padding-top:72px;padding-bottom:84px}
.design-page .artist-section-top{align-items:flex-end;margin-bottom:36px}
.design-page .artist-section-top h1,.design-page .privacy-page>h1,.design-page .mastering-design h1,.design-page .shop-heading h1,.design-page .binaural-page>h1{font-size:clamp(58px,7.2vw,112px);line-height:.95;letter-spacing:-.055em}
.design-page .artist-lead,.design-page .tool-heading p{color:#dbb66f;letter-spacing:.02em}
.design-page .artist-button,.design-page .artist-link{border-color:#b89659;color:#e0bd78}
.design-page .artist-button{min-height:54px;padding:14px 27px;letter-spacing:.05em}
.design-page .artist-button.solid{background:#d3ad68;color:#0a110d}
.design-page .artist-button:hover,.design-page .artist-button:focus-visible{background:#efd49d;color:#0b120d}
.design-page .page-scenery{position:absolute;z-index:-2;top:0;left:0;right:0;height:440px;background-size:cover;background-position:center;opacity:.58;border-bottom:1px solid #6a5939}
.design-page .page-scenery::after{content:"";position:absolute;inset:0;background:#07100bb8}
.design-page .books-scenery,.design-page .contact-scenery,.design-page .privacy-scenery{background-image:url('/assets/design/landscape.webp')}
.design-page .music-scenery{background-image:url('/assets/design/music.webp');background-position:center 54%}
.design-page .artist-footer{width:min(1432px,calc(100% - 72px));padding:34px 0 42px;border-color:#8a7046;justify-content:center;position:relative;text-align:center}
.design-page .footer-motto{font:17px/1.4 Georgia,'Times New Roman',serif;color:#d5b16d;letter-spacing:.22em;flex-basis:100%}
.design-page .footer-links{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.design-page .footer-links a:hover{color:#e1bf7e}

/* Start page */
.page-home main{background-image:url('/assets/design/landscape.webp');background-size:cover;background-position:center top;background-attachment:scroll}
.page-home main::before{content:"";position:absolute;inset:0;background:#06100bbd;z-index:-1}
.design-home-hero{width:min(1410px,calc(100% - 96px));min-height:660px;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;align-items:end;position:relative}
.design-home-hero::after{content:"";position:absolute;width:420px;height:420px;border:1px solid #b18e50;border-radius:50%;right:4%;top:11%;opacity:.7;z-index:-1}
.home-copy{align-self:center;padding:70px 0 90px;z-index:2}
.home-copy h1{font-size:clamp(76px,8.4vw,138px);line-height:.83;letter-spacing:-.065em;text-wrap:balance}
.home-copy h1 span{color:#d1aa65}
.home-copy>p{font-size:20px;letter-spacing:.09em;margin-top:38px;color:#ede9df}
.home-portrait{height:630px;width:auto;max-width:none;justify-self:center;object-fit:contain;object-position:center bottom;filter:grayscale(1) contrast(1.08) drop-shadow(-20px 12px 24px #0008)}
.home-portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-bottom:65px}
.portal{height:260px;position:relative;overflow:hidden;border:1px solid #b08d50;display:flex;flex-direction:column;justify-content:flex-end;padding:31px;background:#07100b}
.portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48;transition:transform .4s ease,opacity .3s ease}
.portal::after{content:"";position:absolute;inset:0;background:#07100b77}
.portal h2,.portal span{position:relative;z-index:2}
.portal h2{font-size:43px;letter-spacing:-.035em}
.portal span{font-size:12px;color:#e1b970;letter-spacing:.11em;margin-top:16px}
.portal:hover img{transform:scale(1.035);opacity:.68}

/* Book catalogue */
.page-buecher .design-books{padding-top:92px}
.design-books .section-heading{align-items:flex-end;margin-bottom:38px}
.design-books .section-heading h1{font-size:clamp(68px,8vw,126px);line-height:.9;letter-spacing:-.055em}
.design-books .section-heading p{font:clamp(23px,2.5vw,38px)/1.25 Georgia,'Times New Roman',serif;color:#d4ad67}
.design-books .count-label{color:#e2bd78;border-color:#c39e5f}
.design-books .release-notice{background:#0e1711e8;border-color:#9a7c49}
.design-books .search-field,.design-books .sort-field select{background:#0a130ee8;border-color:#846e46}
.design-books .filter-button{border:1px solid #8a7145;border-radius:999px;padding:8px 18px}
.design-books .filter-button[aria-pressed=true]{background:#d0aa67;color:#0b120d;border-color:#d0aa67}
.design-books .series-heading{border-color:#7c6842}
.design-books .series-number{color:#d3ad67}
.design-books .series-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:42px 27px}
.design-books .book-group[data-group="1"] .series-grid{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.design-books .book-group[data-group="other"] .series-grid{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.design-books .book-card{border-color:#66583c}
.design-books .cover-area{height:360px;background:#111a14;border:1px solid #3d463b;padding:18px}
.design-books .cover-area:hover{background:#172219;border-color:#9e804c}

/* Music */
.page-musik .artist-section{padding-top:118px}
.page-musik .artist-section-top{min-height:230px;align-items:center}
.page-musik .artist-section-top h1{font-size:clamp(88px,10vw,154px)}
.page-musik .artist-lead{text-transform:uppercase;letter-spacing:.42em;font:14px/1.4 Arial,sans-serif}
.page-musik .music-console{background:#08120dda;border-color:#a4844d;box-shadow:0 28px 80px #0007}
.page-musik .music-player,.page-musik .track-panel{background:#0a130ee8}
.page-musik .music-player{min-height:500px;justify-content:center}
.page-musik .track-rail{height:480px}
.page-musik .vinyl-links{gap:42px}
.page-musik .vinyl-album{border:1px solid #806a42;padding:16px 16px 27px;text-align:center;background:#0b130ed9}
.page-musik .vinyl-album img{width:100%;aspect-ratio:1/1;object-fit:cover;margin:13px 0 19px}

/* Library */
.page-bibliothek main{background-image:url('/assets/design/library.webp');background-size:cover;background-position:center top;background-attachment:fixed}
.page-bibliothek main::before{content:"";position:absolute;inset:0;background:#06100bd4;z-index:-1}
.page-bibliothek .artist-section{padding-top:64px}
.page-bibliothek .artist-section-top h1{font-size:clamp(66px,8.3vw,126px)}
.page-bibliothek .media-filters{gap:14px;border:0;margin-bottom:22px}
.page-bibliothek .media-filters button{min-width:120px;border:1px solid #9b7e4c;border-radius:999px;padding:9px 20px;color:#eee7db}
.page-bibliothek .media-filters button[aria-pressed=true]{background:#d1ac69;color:#0b120d}
.page-bibliothek .media-list{background:#08110ccd;border:1px solid #745f3d;padding:0 25px}
.page-bibliothek .media-row{grid-template-columns:96px 72px minmax(0,1fr) auto;min-height:108px;border-color:#65573b}
.page-bibliothek .media-cover{width:86px;height:74px;object-fit:cover;border:1px solid #6f6042}
.page-bibliothek .media-kind{text-transform:uppercase;letter-spacing:.17em;color:#d8b26d}

/* Reading and buying */
.page-lesen .reading-hero{height:500px;background:#07100b;position:relative;overflow:hidden;border-bottom:1px solid #8e7447}
.page-lesen .reading-hero::after{content:"Lesen & Kaufen";position:absolute;left:8%;top:19%;font:clamp(62px,8vw,124px)/1 Georgia,'Times New Roman',serif;color:#f3ede2;letter-spacing:-.055em}
.page-lesen .reading-hero img{width:100%;height:100%;object-fit:cover;object-position:center 53%;opacity:.68}
.page-lesen .artist-section{padding-top:55px}
.page-lesen .artist-section-top h1{font-size:0}
.page-lesen .artist-section-top h1::after{content:"Ein Gedanke kann bleiben. Ein Buch auch.";font:clamp(28px,3.3vw,48px)/1.25 Georgia,'Times New Roman',serif;color:#d6b16e;letter-spacing:-.025em}
.page-lesen .artist-section-top .artist-lead{display:none}
.page-lesen .artist-triptych article{border:1px solid #846c43;padding:28px;min-height:280px;background:#0b140ee3}

/* Mastering */
.page-mastering main{background-image:url('/assets/design/landscape.webp');background-size:cover;background-position:center;background-attachment:fixed}
.page-mastering main::before{content:"";position:absolute;inset:0;background:#06100bc4;z-index:-1}
.mastering-design{text-align:center}
.mastering-design .tool-heading p{font:clamp(20px,2.3vw,34px)/1.3 Arial,sans-serif;letter-spacing:.3em;margin-top:22px}
.mastering-design iframe{display:block;width:min(1120px,100%);height:840px;margin:43px auto 22px;border:1px solid #bd9858;background:#0b120d;box-shadow:0 30px 80px #0008}

/* Binaural */
.page-binaural main{background-image:url('/assets/design/landscape.webp');background-size:cover;background-position:center top;background-attachment:fixed}
.page-binaural main::before{content:"";position:absolute;inset:0;background:#06100bc1;z-index:-1}
.page-binaural .binaural-page{text-align:center;padding-top:68px}
.page-binaural .binaural-page>h1{font-size:clamp(64px,7.5vw,116px)}
.page-binaural .binaural-intro{max-width:850px;margin:17px auto 38px}
.page-binaural .binaural-console{background:#08120de8;border-color:#bd9858;text-align:left;box-shadow:0 28px 80px #0008}
.page-binaural #binaural-wave{border-block:1px solid #6e5e3f}
.page-binaural .binaural-download{background:#0a130edc;padding:30px;border:1px solid #977a49;text-align:left}

/* About */
.page-ueber-mich main{background-image:url('/assets/design/landscape.webp');background-size:cover;background-position:center;background-attachment:fixed}
.page-ueber-mich main::before{content:"";position:absolute;inset:0;background:#06100bc8;z-index:-1}
.page-ueber-mich .artist-about{min-height:770px;grid-template-columns:.92fr 1.08fr;gap:70px;padding-top:35px;padding-bottom:0}
.page-ueber-mich .about-mark{align-self:end;position:relative}
.page-ueber-mich .about-mark::before{content:"";position:absolute;width:540px;height:540px;max-width:100%;border:1px solid #c09a58;border-radius:50%;left:50%;top:9%;transform:translateX(-50%);z-index:-1}
.page-ueber-mich .about-mark img{width:min(600px,100%);max-height:735px;object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.08) drop-shadow(15px 12px 25px #0007)}
.page-ueber-mich .artist-about h1{font:12px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.35em;color:#ddbd7e}
.page-ueber-mich .artist-about .artist-lead{font-size:clamp(45px,5.1vw,80px);line-height:1.03;color:#f1eadf;letter-spacing:-.045em}

/* Contact */
.page-kontakt .artist-section{padding-top:88px}
.page-kontakt .artist-section-top{min-height:240px;align-items:center}
.page-kontakt .artist-triptych article{border:1px solid #9b7e4b;padding:14px 14px 30px;background:#08120ddf;text-align:center}
.page-kontakt .booking-image{width:100%;height:220px;object-fit:cover;border-bottom:1px solid #8e7447}
.page-kontakt .booking-direct{text-align:center;padding:42px 20px 0}

/* Shop */
.page-shop main{position:relative}
.page-shop .shop-art{height:360px;background-image:url('/assets/design/music.webp');background-size:cover;background-position:center 48%;border:1px solid #967948;margin-bottom:38px;opacity:.75}
.page-shop .shop-heading h1{font-size:clamp(58px,7vw,104px)}
.page-shop .shop-notice{background:#15190f;border-color:#9e7e47}
.page-shop .shop-layout{grid-template-columns:minmax(0,1.7fr) minmax(310px,.78fr)}
.page-shop .shop-cart{border:1px solid #927548;padding:28px;top:18px;background:#0d1610}
.page-shop .shop-paypal img{width:190px;height:190px;margin:20px auto;background:#fff;padding:7px}
.page-shop .shop-vinyl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border:0}
.page-shop .shop-vinyl-list li{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid #836b43;padding:15px 15px 25px}
.page-shop .shop-vinyl-list img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:20px}

/* Privacy */
.page-datenschutz .privacy-page{padding:108px 0 86px}
.page-datenschutz .privacy-page>h1{margin-bottom:48px}
.page-datenschutz .privacy-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.page-datenschutz .privacy-cards article{border:1px solid #967949;min-height:360px;padding:28px 24px 0;display:flex;flex-direction:column;background:#08120dde;text-align:center;overflow:hidden}
.page-datenschutz .privacy-cards h2{font-size:28px;margin-bottom:16px}
.page-datenschutz .privacy-cards p{font-size:14px}
.page-datenschutz .privacy-cards img{height:145px;width:calc(100% + 48px);max-width:none;object-fit:cover;margin:auto -24px 0;opacity:.72}
.page-datenschutz .privacy-cards a{color:#dcb873;margin-top:15px}
.page-datenschutz .privacy-full{background:#09130de8;border:1px solid #715d3e;margin-top:42px;padding:38px;max-width:1000px}
.page-datenschutz .privacy-full h2{font-size:34px}
.page-datenschutz .privacy-full>p{margin-top:23px}

/* Responsive layout */
@media(max-width:1260px){
  .design-page .artist-header>.artist-shell{grid-template-columns:max-content minmax(0,1fr);gap:30px}
  .design-page .artist-masthead{display:flex;grid-column:1 / -1;min-height:72px}
  .design-page .artist-wordmark{grid-column:auto}
  .design-page .artist-roles{grid-column:auto;grid-row:auto;margin-left:auto}
  .design-page .artist-navigation{grid-column:1 / -1;grid-row:2;padding:12px 0 18px;justify-content:space-between}
  .design-page .artist-navigation a[aria-current="page"]::after{bottom:-9px}
  .design-home-hero{min-height:590px}.home-portrait{height:560px;width:100%;max-width:100%}
  .design-books .series-grid,.design-books .book-group[data-group="1"] .series-grid,.design-books .book-group[data-group="other"] .series-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  .design-page .artist-shell{width:min(100% - 48px,760px)}
  .design-page .artist-header>.artist-shell{display:block}
  .design-page .artist-masthead{display:flex}
  .design-page .artist-navigation{display:none;padding:4px 0 22px;grid-template-columns:1fr 1fr;gap:4px 20px;font-size:12px}
  .design-page .artist-navigation.is-open{display:grid}
  .design-page .artist-navigation a[aria-current="page"]::after{bottom:1px;width:38px;right:auto}
  .design-page .artist-menu{display:flex}
  .design-home-hero{width:calc(100% - 48px);min-height:540px;grid-template-columns:1.08fr .92fr}
  .home-copy h1{font-size:clamp(64px,10.6vw,92px)}.home-copy>p{font-size:15px}.home-portrait{height:480px}
  .home-portals{grid-template-columns:1fr}.portal{height:220px}
  .design-books .series-grid,.design-books .book-group[data-group="1"] .series-grid,.design-books .book-group[data-group="other"] .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-bibliothek .media-row{grid-template-columns:82px 1fr}.page-bibliothek .media-kind{display:none}.page-bibliothek .media-actions{grid-column:2}
  .page-lesen .artist-triptych,.page-datenschutz .privacy-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mastering-design iframe{height:1500px}
  .page-ueber-mich .artist-about{grid-template-columns:.75fr 1fr;gap:35px;min-height:690px}.page-ueber-mich .about-mark::before{width:390px;height:390px}
  .page-kontakt .artist-triptych{grid-template-columns:1fr}.page-kontakt .booking-image{height:300px}
  .page-shop .shop-layout{grid-template-columns:1fr}.page-shop .shop-cart{position:static}.page-shop .shop-vinyl-list{gap:16px}
}

@media(max-width:600px){
  .design-page .artist-shell{width:calc(100% - 32px)}
  .design-page .artist-wordmark{font-size:29px}.design-page .artist-roles{display:none}
  .design-page .artist-navigation{grid-template-columns:1fr;font-size:13px}
  .design-page .artist-section,.design-page .mastering-design,.design-page .binaural-page,.design-page .shop-page{padding-top:48px;padding-bottom:58px}
  .design-page .artist-section-top h1,.design-page .privacy-page>h1,.design-page .mastering-design h1,.design-page .shop-heading h1,.design-page .binaural-page>h1{font-size:clamp(47px,15vw,68px)}
  .design-page .artist-footer{width:calc(100% - 32px);display:block}.design-page .footer-links{margin:20px 0}
  .design-home-hero{width:calc(100% - 32px);display:block;min-height:700px;padding-top:45px}.design-home-hero::after{width:270px;height:270px;right:-25%;top:42%}
  .home-copy{padding:0;position:relative;z-index:3}.home-copy h1{font-size:clamp(55px,18vw,76px);line-height:.9}.home-copy>p{margin-top:25px;line-height:1.6}.home-portrait{position:absolute;right:-16px;bottom:0;height:430px;width:auto;max-width:320px}.home-portals{padding-bottom:45px}
  .portal{height:205px;padding:24px}.portal h2{font-size:38px}
  .page-buecher .design-books{padding-top:64px}.design-books .section-heading h1{font-size:69px}.design-books .section-heading{display:block}.design-books .count-label{display:inline-block;margin-top:20px}
  .design-books .series-grid,.design-books .book-group[data-group="1"] .series-grid,.design-books .book-group[data-group="other"] .series-grid{grid-template-columns:1fr}
  .design-books .cover-area{height:430px}
  .page-musik .artist-section{padding-top:62px}.page-musik .artist-section-top{min-height:220px}.page-musik .music-player{min-height:0}.page-musik .vinyl-links{grid-template-columns:1fr}
  .page-bibliothek .media-filters{display:grid;grid-template-columns:1fr 1fr}.page-bibliothek .media-filters button{min-width:0}.page-bibliothek .media-list{padding:0 14px}.page-bibliothek .media-row{grid-template-columns:66px 1fr;gap:14px}.page-bibliothek .media-cover{width:62px;height:74px}.page-bibliothek .media-actions{grid-column:1 / -1;padding-left:80px}
  .page-lesen .reading-hero{height:380px}.page-lesen .reading-hero::after{left:22px;top:18%;font-size:58px;max-width:300px}.page-lesen .artist-triptych{grid-template-columns:1fr}
  .mastering-design .tool-heading p{font-size:16px;letter-spacing:.18em}.mastering-design iframe{height:1620px;margin-top:30px}
  .page-binaural .binaural-console{padding:17px}.page-binaural .binaural-download{padding:22px}
  .page-ueber-mich .artist-about{display:block;min-height:0;padding-top:0}.page-ueber-mich .about-mark{display:block;height:470px;margin:0 -16px 30px}.page-ueber-mich .about-mark img{height:100%;width:auto;margin:auto}.page-ueber-mich .about-mark::before{width:360px;height:360px}.page-ueber-mich .artist-about .artist-lead{font-size:43px}
  .page-kontakt .artist-section-top{min-height:200px}.page-kontakt .booking-image{height:220px}.page-kontakt .artist-contact-email{font-size:23px}
  .page-shop .shop-art{height:260px}.page-shop .shop-heading{align-items:flex-start}.page-shop .shop-vinyl-list{grid-template-columns:1fr}
  .page-datenschutz .privacy-page{padding-top:64px}.page-datenschutz .privacy-cards{grid-template-columns:1fr}.page-datenschutz .privacy-full{padding:24px 20px}
}

@media(prefers-reduced-motion:reduce){.portal img{transition:none}.page-home main,.page-bibliothek main,.page-mastering main,.page-binaural main,.page-ueber-mich main{background-attachment:scroll}}