@font-face {
  font-family: 'Bernard MT';
  src: url('./fonts/BERNHC.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Cooper Black';
  src: url('./fonts/COOPBL.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { --yellow:#ffb500; --bg:#000; --dark:#2a1108; }
*{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:smooth}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--yellow); font-family:'Cooper Black', Georgia, serif}
a{color:inherit}
a:focus-visible{outline:3px solid white;outline-offset:6px}
.home{display:flex; flex-direction:column; align-items:center; text-align:center; min-height:100vh; padding:52px 16px 106px}
.home-title{margin:0 0 22px; font:400 81px/.98 'Bernard MT', Impact, Georgia, serif}
.cover-link{display:block; width:min(575px, 100%); border:3px solid var(--yellow); overflow:hidden; background:#000}
.cover-link img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; opacity:1; transition:opacity 1.1s ease}
.cover-link:hover img,.cover-link:focus-visible img{opacity:.47}
.home-subtitle{font:400 23px/1.15 'Bernard MT', Impact, Georgia, serif; margin:29px 0 0}
.home-subtitle a{text-decoration:none}
.home-subtitle a:hover{text-decoration:underline;text-underline-offset:4px}
.project-hero{position:relative; isolation:isolate; min-height:265px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:3px solid var(--yellow); background:#201b11 url('./assets/buero.png') no-repeat 9% 86%; background-size:100% auto; padding:24px 12px 13px; color:var(--yellow); text-decoration:none; cursor:pointer}
.project-hero:hover h1,.project-hero:focus-visible h1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.project-hero::before{content:'';position:absolute;inset:0;background:#76a3378c;opacity:.5;mix-blend-mode:difference;pointer-events:none;z-index:0}
.project-hero h1,.project-hero p{position:relative;z-index:1;transform:translateY(10px)}
.project-hero h1{margin:0; font:400 clamp(43px, 6.5vw, 93px)/.98 'Bernard MT', Impact, Georgia, serif}
.project-hero p{margin:0; font:400 clamp(20px,3.1vw,34px)/1.15 'Bernard MT', Impact, Georgia, serif}
.project-main{width:min(1280px,calc(100% - 40px)); margin:0 auto; padding:35px 0 95px}
.synopsis{margin:0 0 42px; font:400 19px/1.82 'Cooper Black', Georgia,serif; text-align:justify; hyphens:none}
.soundcloud{width:100%;height:205px;display:block;border:0;background:#f5f5f5}
.player-caption{font:12px/1.4 Arial,sans-serif; color:#bbb; text-align:right;margin:4px 0 22px}
.project-bottom{display:flex;flex-direction:column;align-items:flex-end;gap:19px;margin-top:27px}
.buy-link{font:400 21px/1.25 'Cooper Black', Georgia,serif;text-decoration:none;text-align:right;display:block}
.buy-link:hover,.buy-link:focus-visible{text-decoration:underline;text-underline-offset:4px}
.credits{font:400 14px/1.5 'Cooper Black', Georgia,serif; text-align:right; margin:0}
.support-link{position:fixed;left:13px;bottom:13px;z-index:10;display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:#33240a;padding:8px 16px 8px 14px;border-radius:999px;font:600 17px Arial,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.support-link svg{width:29px;height:29px;flex:none}
.support-link{text-decoration:none;transition:filter .15s ease}
.support-link:hover{filter:brightness(1.08)}
.support-link:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:700px){
 .home{padding-top:55px; padding-bottom:105px}
 .home-title{font-size:clamp(45px,12vw,81px); margin-bottom:25px}
 .home-subtitle{margin-top:22px}
 .project-hero{min-height:210px; background-size:auto 730px; background-position:9% 86%; align-items:flex-end; text-align:right; padding-right:18px}
 .project-hero h1,.project-hero p{transform:translateY(8px)}
 .project-hero h1{font-size:clamp(35px,10.9vw,43px);max-width:100%}
 .project-main{width:min(100% - 30px,1280px);padding-top:26px}
 .synopsis{font-size:clamp(15px,3.8vw,19px);line-height:1.55;text-align:left;margin-bottom:26px}
 .soundcloud{height:240px}
 .project-bottom{gap:18px;margin-top:26px}
 .credits{text-align:right}
 .support-link{font-size:14px;padding:6px 12px 6px 10px}
 .support-link svg{width:23px;height:23px}
 /* Hörspielseite: Ko-fi unter dem Inhalt statt über dem Audio-Player */
 .project-page .project-main{padding-bottom:22px}
 .project-page .support-link{position:static; margin:0 0 22px 15px}
}
@media(prefers-reduced-motion:reduce){.cover-link img{transition:none}}

.player-caption a{color:inherit;text-decoration:none}
.player-caption a:hover,.player-caption a:focus-visible{text-decoration:underline}