:root {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --text: #0b0b0b;
  --accent: #e10a1d;
  --accent2: #111111;
  --rule: 3px solid var(--text);
  --sans: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Courier New', Courier, 'Lucida Console', monospace;
  --space: clamp(20px, 3.2vw, 52px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.65 var(--mono); }
.page { min-width: 0; }
main { min-width: 0; counter-reset: section; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; }
::selection { background: var(--accent); color: white; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; overflow-wrap: anywhere; }
a:hover { color: var(--accent); }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; }
figure, p, ul, ol, dl { margin: 0 0 1.5rem; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); font-weight: 900; line-height: 1.05; letter-spacing: -.045em; margin: 0 0 1.25rem; overflow-wrap: normal; word-break: normal; hyphens: auto; hyphenate-limit-chars: 30 15 15; }
h1 { font-size: clamp(2rem, 4.5vw, 4.25rem); }
h2 { font-size: clamp(1.8rem, 3vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
h4, h5, h6 { font-size: 1.25rem; }
p, li, dd { overflow-wrap: anywhere; }
ul, ol { padding-left: 1.5rem; }
li::marker { color: var(--accent); }
strong, b { font-weight: 700; }
small, figcaption { font-size: .82rem; }
hr { border: 0; border-top: var(--rule); margin: 2rem 0; }
blockquote, .note { margin: 2rem 0; border: var(--rule); border-left: 3px solid var(--accent); background: white; padding: clamp(18px, 3vw, 30px); }
blockquote > :last-child, .note > :last-child { margin-bottom: 0; }
code, pre, kbd, samp { font-family: var(--mono); }
pre { overflow: auto; padding: 1rem; border: var(--rule); }
table { width: 100%; border-collapse: collapse; }
th, td { border: var(--rule); padding: .75rem; text-align: left; overflow-wrap: anywhere; }
input, textarea, select, button { max-width: 100%; border: var(--rule); border-radius: 0; background: white; color: var(--text); padding: .75rem; font: inherit; }
.skip-link { position: fixed; left: 16px; top: 12px; transform: translateY(-180%); z-index: 100; background: white; border: var(--rule); padding: 12px 18px; font-weight: bold; }
.skip-link:focus { transform: none; }
.site-header { background: white; border-bottom: var(--rule); z-index: 20; }
.header-inner { padding: 22px var(--space) 0; }
.brand { display: block; width: fit-content; position: relative; font: 900 clamp(1.7rem, 3vw, 2rem)/.95 var(--sans); text-transform: uppercase; text-decoration: none; letter-spacing: -.065em; white-space: nowrap; margin-bottom: 24px; }
.brand::before { content: ''; display: inline-block; width: .65em; height: .65em; margin-right: .3em; background: var(--accent); }
.site-nav ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.site-nav li { border-top: 1px solid var(--text); flex: 1 1 160px; }
.site-nav a { display: block; padding: 14px 10px; font-size: .8rem; line-height: 1.4; font-weight: bold; text-transform: uppercase; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'], .site-nav a.active { background: var(--accent); color: white; }
body:has(.article-figure img[src='img/hardcore.jpg']) .site-nav a[href='hardcore-punk.html'],
body:has(.article-figure img[src='img/metal.jpg']) .site-nav a[href='metal-subgenres.html'],
body:has(.article-figure img[src='img/zine.jpg']) .site-nav a[href='fanzines-diy.html'],
body:has(.article-figure img[src='img/konzert.jpg']) .site-nav a[href='konzertkultur.html'],
body:has(.article-figure img[src='img/gehoer.jpg']) .site-nav a[href='gehoerschutz.html'] { background: var(--accent); color: white; }
.hero { background: white; border-bottom: var(--rule); }
.hero-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hero-text { display: contents; }
.hero h1 { grid-column: 1 / 9; grid-row: 1 / 3; margin: 0; padding: var(--space); padding-bottom: 16px; border-right: var(--rule); border-bottom: var(--rule); font-size: clamp(2.5rem, 4.7vw, 4.5rem); line-height: 1.04; letter-spacing: -.065em; position: relative; z-index: 1; }
.eyebrow { grid-column: 9 / 13; grid-row: 1; align-self: start; width: min(100%, 190px); aspect-ratio: 1; display: flex; align-items: end; background: var(--accent); color: white; padding: 20px; margin: 0; font-size: .8rem; font-weight: bold; line-height: 1.3; text-transform: uppercase; letter-spacing: .07em; }
.hero-media { grid-column: 9 / 13; grid-row: 2; min-width: 0; margin: 28px 18px 24px; background: var(--accent); align-self: stretch; }
.hero-media img { height: 100%; min-height: 300px; border: var(--rule); transform: rotate(-1deg) translate(-5px, -6px); object-position: 53% center; }
.lead { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.7; }
.hero .lead { grid-column: 1 / 9; margin: 0; padding: var(--space); border-right: var(--rule); }
.hero-actions { grid-column: 9 / 13; border-top: var(--rule); padding: 24px; display: flex; align-items: end; }
.btn { display: inline-block; padding: 16px 20px; border: var(--rule); font: bold .88rem/1.4 var(--mono); text-transform: uppercase; text-decoration: none; }
.btn-primary { background: var(--accent); color: white; }
.btn:hover { background: var(--text); color: white; }
.section { counter-increment: section; background: white; }
.section > .wrap { padding: var(--space); }
.section + .section::before { content: 'KELLERLÄRM / METAL / HARDCORE / DIY'; display: block; padding: 9px var(--space); background: var(--accent); color: white; border-block: var(--rule); font-size: .75rem; line-height: 1.4; font-weight: bold; letter-spacing: .12em; }
.section-title { border-top: var(--rule); padding-top: 22px; text-transform: uppercase; font-size: clamp(1.8rem, 3.3vw, 3.6rem); }
.section-title::before { content: counter(section, decimal-leading-zero) ' /'; display: block; margin-bottom: 16px; color: var(--accent); font: bold .95rem/1 var(--mono); letter-spacing: 0; }
.section-intro, .section > .wrap > p { max-width: 68ch; margin-bottom: 2rem; }
.card-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; background: var(--text); border: var(--rule); counter-reset: card; }
.card { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; overflow-wrap: normal; padding: clamp(18px, 2vw, 30px); background: white; counter-increment: card; transition: background-color .15s, color .15s; }
.card:nth-child(3) { grid-column: span 2; }
.card:nth-child(n+4) { grid-column: span 3; }
.card::before { content: 'DOSSIER / ' counter(card, decimal-leading-zero); background: var(--accent); color: white; padding: 7px 10px; margin: calc(-1 * clamp(18px, 2vw, 30px)) calc(-1 * clamp(18px, 2vw, 30px)) 24px; font: bold .75rem/1.4 var(--mono); letter-spacing: .06em; }
.card-title { text-transform: uppercase; hyphens: auto; hyphenate-limit-chars: 30 15 15; }
.card-title, .card-text, .card-link { overflow-wrap: normal; }
.card-text { font-family: Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.7; color: inherit; margin-bottom: 18px; }
.card-link { font-weight: bold; text-decoration-thickness: 3px; }
.card > .card-link { align-self: flex-start; margin-top: 0; padding-top: 0; font-size: .9375rem; }
.card:focus-within { background: var(--text); color: white; }
.card:focus-within a { color: white; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.section > .wrap.split { padding: 0; }
.split-text { grid-column: 1 / 8; padding: var(--space); border-right: var(--rule); }
.split-media { grid-column: 8 / 13; position: relative; margin: 0; min-width: 0; background: var(--accent2); }
.split-media img { height: 100%; min-height: 440px; object-position: 48% center; }
.split-media::after { content: 'SZENE / LIVE'; position: absolute; top: 24px; left: -3px; background: var(--accent); color: white; border: var(--rule); padding: 12px 20px; font-size: .8rem; font-weight: bold; transform: rotate(-2deg); }
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; border-top: var(--rule); }
.fact { padding: 20px; border-bottom: var(--rule); border-left: 3px solid var(--accent); }
.section-partners { background: var(--bg); }
.partner-list { list-style: none; padding: 0; margin: 0; border-bottom: var(--rule); }
.partner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: var(--rule); background: white; }
.partner-link { min-width: 0; font: 700 1rem/1.55 Helvetica, Arial, sans-serif; text-decoration-thickness: 1px; padding: 22px; font-weight: bold; color: var(--accent); overflow-wrap: anywhere; border-right: var(--rule); }
.partner-phrase { grid-column: 1; padding: 0 22px 22px; margin: 0; border-right: var(--rule); font-size: .8rem; text-transform: uppercase; font-variant: small-caps; color: #333333; letter-spacing: .05em; }
.partner-desc { grid-column: 2; grid-row: 1 / 3; padding: 22px; margin: 0; font: 1rem/1.65 Helvetica, Arial, sans-serif; }
.article { padding: var(--space); background: white; }
.article > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.breadcrumb { grid-column: 1; grid-row: 1; border-left: 3px solid var(--accent); padding: 10px 0 10px 12px; align-self: start; font-size: .8125rem; text-transform: uppercase; margin-bottom: 28px; }
.breadcrumb a { display: inline; font-weight: bold; }
.page-header { grid-column: 1 / -1; }
.page-header h1 { border-bottom: 6px solid var(--text); padding-bottom: 25px; margin-bottom: 30px; line-height: 1.08; text-wrap: balance; }
.page-header .lead { max-width: none; margin-left: 0; margin-bottom: 32px; font-family: Helvetica, Arial, sans-serif; font-size: 1.1875rem; line-height: 1.7; }
.article-figure { grid-column: 1; margin: 0 0 40px; border: var(--rule); background: var(--accent); }
.article-figure img { aspect-ratio: 2 / 1; max-height: 560px; }
.prose { grid-column: 1; max-width: none; min-width: 0; padding-bottom: 1rem; font: 1.125rem/1.75 Helvetica, Arial, sans-serif; }
.prose h2 { break-after: avoid; margin-top: 2.5rem; padding-top: 20px; border-top: var(--rule); font-size: clamp(1.65rem, 2.5vw, 2.5rem); }
.prose h2::before { content: ''; display: inline-block; width: .33em; height: .33em; background: var(--accent); margin-right: .35em; vertical-align: .12em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 1.6rem; }
.site-footer { background: var(--text); color: white; border-top: 8px solid var(--accent); }
.footer-inner { padding: var(--space); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 30px; }
.footer-note { max-width: 64ch; font-size: .85rem; margin: 0; }
.footer-nav ul { padding: 0; margin: 0; list-style: none; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { color: var(--accent); background: white; padding: 3px 6px; display: inline-block; text-decoration-color: var(--accent); text-decoration-thickness: 3px; font-size: .85rem; }
.footer-nav a:hover { background: var(--accent); color: white; }
@media (hover: hover) {
  .card:hover { background: var(--text); color: white; }
  .card:hover a { color: white; }
}
@media (min-width: 1024px) {
  body { padding-left: 240px; }
  .site-header { position: fixed; inset: 0 auto 0 0; width: 240px; height: 100dvh; overflow-y: auto; border-right: var(--rule); border-bottom: 0; }
  .header-inner { min-height: 100%; padding: 30px 20px; display: flex; flex-direction: column; }
  .brand { width: 175px; max-width: 100%; font-size: 28px; line-height: .95; padding-top: 48px; margin-bottom: 45px; }
  .brand::before { position: absolute; top: 0; left: 0; width: 28px; height: 28px; }
  .site-nav ul { display: block; }
  .site-nav li:last-child { border-bottom: 1px solid var(--text); }
  .site-nav a { padding: 19px 8px; }
  .header-inner::after { content: 'UNABHÄNGIG.\A LAUT.\A KELLERLÄRM.'; white-space: pre-line; margin-top: auto; padding-top: 60px; font-size: .75rem; line-height: 1.7; letter-spacing: .08em; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .card { grid-column: span 3; }
  .card:nth-child(3) { grid-column: span 3; }
  .card:last-child { grid-column: span 6; }
}
@media (max-width: 767px) {
  .hero h1 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(2.7rem, 8.6vw, 4.8rem); border-right: 0; padding-block: 26px; }
  .eyebrow { grid-column: 1 / 5; grid-row: 1; width: 100%; min-height: 145px; padding: 14px; font-size: .75rem; }
  .hero-media { grid-column: 5 / 13; grid-row: 1; margin: 14px 16px; }
  .hero-media img { min-height: 0; height: 100%; max-height: 240px; }
  .hero .lead { grid-column: 1 / -1; grid-row: 3; border-right: 0; }
  .hero-actions { grid-column: 1 / -1; grid-row: 4; padding: 0 var(--space) 28px; border-top: 0; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .card, .card:nth-child(n) { grid-column: 1; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-text, .split-media { grid-column: 1; }
  .split-text { border-right: 0; border-bottom: var(--rule); }
  .split-media img { min-height: 0; height: 340px; }
  .partner { grid-template-columns: minmax(0, 1fr); }
  .partner-link, .partner-phrase, .partner-desc { grid-column: 1; grid-row: auto; border-right: 0; padding-inline: 18px; }
  .partner-link { padding-top: 16px; padding-bottom: 8px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .partner-phrase { padding-bottom: 12px; font-size: 12px; letter-spacing: .025em; }
  .partner-desc { border-top: 1px solid #d3d3d3; padding-block: 12px 16px; font-size: 15px; }
  .article > .wrap { display: block; }
  .breadcrumb { margin-bottom: 28px; }
  .breadcrumb a { display: inline; }
  .page-header h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); }
  .page-header .lead { margin-left: 0; }
  .footer-inner, .fact-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  h1, .page-header h1, .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.45rem); line-height: 1.15; letter-spacing: -.04em; }
  h2, .section-title, .prose h2 { font-size: clamp(1.25rem, 5.8vw, 1.7rem); line-height: 1.2; }
  h3 { font-size: clamp(1.2rem, 5.2vw, 1.5rem); }
  .wrap > *, .split > *, .footer-inner > * { min-width: 0; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.page-home main { border-bottom: var(--rule); }
.page-sub main { min-height: 75vh; }
.section-feature { border-bottom: var(--rule); }

/* Balanced reading columns use the full article width on large screens. */
@media (min-width: 1100px) {
  .prose { columns: 2; column-gap: clamp(32px, 4vw, 64px); column-rule: 1px solid #d3d3d3; }
  .prose p, .prose li { break-inside: avoid; }
  .prose h2 { font-size: clamp(1.5rem, 2vw, 2rem); }
}