@font-face{font-family:'Elegant Typewriter';font-weight:400;font-display:swap;src:url(fonts/elegant-typewriter-regular.ttf) format('truetype')}
@font-face{font-family:'Alegreya';font-weight:500;font-display:swap;src:url(fonts/alegreya-500.woff2) format('woff2')}
@font-face{font-family:'Elegant Typewriter';font-weight:700;font-display:swap;src:url(fonts/elegant-typewriter-bold.ttf) format('truetype')}
:root{--magenta:#d50264;--tinte:#1c1c1c;--beige:#f7f5ef;--linie:#e2dccf}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:400 17px/1.65 'Elegant Typewriter','Courier New',monospace;color:var(--tinte);background:var(--beige)}
a{color:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.vorschau{position:fixed;right:0;bottom:0;z-index:5;background:var(--tinte);color:#fff;font-size:13px;padding:.35rem .8rem}
.rahmen{display:grid;grid-template-columns:clamp(270px,19.3vw,350px) 1fr;min-height:100vh}
.spalte{background:var(--beige);padding:0 2.4rem;display:flex;flex-direction:column;justify-content:center;min-height:100vh;position:sticky;top:0;align-self:start;border-right:1px solid var(--linie)}
.marke{display:block;text-decoration:none;margin-bottom:2.6rem;line-height:1.02}
.marke b{display:block;color:var(--magenta);font-weight:700;font-size:2.6rem;letter-spacing:-.01em}
.marke span{display:block;color:var(--tinte);font-size:1.45rem;margin-top:.2rem}
.adresse{margin:0 0 1.5rem;font-size:1.08rem;line-height:1.55}
.mail{margin:0 0 3rem;font-size:1rem}
.mail a{text-decoration:none;border-bottom:1px solid var(--magenta)}
.spalte ul{list-style:none;margin:0;padding:0}
.spalte li a{display:inline-block;padding:.22rem 0;font-size:1.12rem;text-decoration:none;border-bottom:2px solid transparent}
.spalte li a:hover,.spalte li a[aria-current]{color:var(--magenta);border-bottom-color:var(--magenta)}
.foto{background:url(regal.jpg) center/cover no-repeat;min-height:100vh}
.inhalt{padding:4.5rem clamp(1.5rem,5vw,5rem) 4rem;max-width:1100px}
h1{font-size:1.9rem;font-weight:700;margin:0 0 2rem;color:var(--magenta)}
h2{font-size:1.1rem;font-weight:700;margin:2rem 0 .6rem}
.inhalt p{max-width:44rem}
.wort{margin:0 0 2rem;font-size:1.05rem}
/* Willo 02.10.: Über-Text größer, "so wie Am Kanal 74". Rechnerisch war er gleich groß (17 px), wirkte im
   breiten Textblock aber kleiner, deshalb eine Stufe größer. */
.ueber p{font-size:1.3rem;line-height:1.6}
.ueber .wort{font-size:1.3rem}
.wort i{color:var(--magenta);font-style:normal;font-weight:700}
.platzhalter{background:#fff3c4;border:1px dashed #b08900;padding:.6rem .9rem;font-size:.95rem}
.titel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4.4rem 2rem;margin-top:1rem}
.titel article{display:flex;flex-direction:column}
.titel .cover{height:300px;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:1rem}
.titel img{max-height:300px;max-width:100%;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.titel h2{margin:0 0 .3rem;font-size:1.02rem;line-height:1.45}
.titel .unter{margin:0 0 .5rem;font-size:.9rem;color:#555}
.titel .angaben{margin:0 0 .6rem;font-size:.85rem;color:#555}
.titel .beschreibung{margin:0 0 .9rem;font:500 1.02rem/1.5 'Alegreya',Georgia,serif}
.titel .preis{margin:0 0 .9rem;font-weight:700}
.knopf{align-self:flex-start;margin-top:auto;display:inline-block;background:var(--magenta);color:#fff;text-decoration:none;padding:.55rem 1rem;font-weight:700;font-size:.95rem}
.knopf:hover{background:var(--tinte)}
.recht{margin:2.2rem 0 0;font-size:.85rem}.recht a{text-decoration:none;border-bottom:1px solid var(--linie)}
.hinweise{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--linie);font-size:.92rem}
.hinweise h2{font-size:1rem;margin:1.6rem 0 .5rem}
.versand{border-collapse:collapse;margin:0 0 .8rem;max-width:34rem;width:100%}
.versand td{padding:.35rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
.versand td+td{text-align:right;padding-left:1.5rem;white-space:nowrap}
@media (max-width:760px){
  .rahmen{grid-template-columns:1fr}
  .spalte{min-height:auto;position:static;padding:2.2rem 1.4rem 1.8rem;border-right:0;border-bottom:1px solid var(--linie)}
  .marke{margin-bottom:1.4rem}
  .marke b{font-size:2.3rem}
  .mail{margin-bottom:1.4rem}
  .spalte ul{display:flex;gap:1.4rem}
  .foto{min-height:62vh}
  .inhalt{padding:2.2rem 1.25rem 3rem}
}